xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改样式

Browse Source
master
Fluyan 2 years ago
parent f3c634bf99
commit 41b0ba141f
6 changed files with 223 additions and 12016 deletions
Show Stats Download Patch File Download Diff File

12025
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
src/components/common/Sidebar.vue
Unescape Escape View File

@ -70,11 +70,11 @@ export default {
index: "pictureRotation", index: "pictureRotation",
title: "图片轮巡", title: "图片轮巡",
}, },
{ // {
icon: "el-icon-bell", // icon: "el-icon-bell",
index: "photoAlarm", // index: "photoAlarm",
title: "告警处理", // title: "告警处理",
}, // },
{ {
icon: "el-icon-search", icon: "el-icon-search",
@ -116,17 +116,17 @@ export default {
}, },
], ],
}, },
{ // {
icon: "el-icon-monitor", // icon: "el-icon-monitor",
index: "system", // index: "system",
title: "系统管理", // title: "系统管理",
subs: [ // subs: [
{ // {
index: "userManagement", // index: "userManagement",
title: "用户管理", // title: "用户管理",
}, // },
], // ],
}, // },
], ],
}; };
}, },

17
src/views/components/carouselChart.vue
Unescape Escape View File

@ -12,7 +12,7 @@
:key="item.id" :key="item.id"
> >
<viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1"> <viewer class="bigimg" v-if="item.path.indexOf('nopic') == -1">
<img :src="item.path" alt="" /> <img :src="item.path + '!1330x670'" alt="" />
</viewer> </viewer>
<div class="bigimg" v-else> <div class="bigimg" v-else>
<img :src="item.path" alt="" /> <img :src="item.path" alt="" />
@ -38,7 +38,13 @@
v-for="(item, index) in terminalPhoto" v-for="(item, index) in terminalPhoto"
:key="item.id" :key="item.id"
> >
<img :src="item.path" alt="" /> <img
:src="item.path + '!260x160'"
alt=""
v-if="item.path.indexOf('nopic') == -1"
/>
<img :src="item.path" alt="" v-else />
<p class="timeInfo" v-if="item.path.indexOf('nopic') == -1"> <p class="timeInfo" v-if="item.path.indexOf('nopic') == -1">
{{ $moment(item.photoTime).format("HH:mm:ss") }}({{ {{ $moment(item.photoTime).format("HH:mm:ss") }}({{
$moment(item.recvTime).format("HH:mm:ss") $moment(item.recvTime).format("HH:mm:ss")
@ -104,14 +110,15 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: calc(100% - 26px);
box-sizing: border-box; box-sizing: border-box;
.gallery-top { .gallery-top {
//background: #fcc; //background: #fcc;
width: calc(100% - 6px); width: 100%;
height: 80%; height: 80%;
overflow: hidden; overflow: hidden;
border: 3px solid transparent; margin-bottom: 4px;
//border: 3px solid transparent;
.slide-1 { .slide-1 {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;

2
src/views/pictureRotation/index.vue
Unescape Escape View File

@ -35,7 +35,7 @@
<div class="imageCenter" v-loading="loading"> <div class="imageCenter" v-loading="loading">
<div class="imgList" v-for="(item, index) in picList" :key="index"> <div class="imgList" v-for="(item, index) in picList" :key="index">
<viewer class="bigpic" v-if="!item.path.includes('mp4')"> <viewer class="bigpic" v-if="!item.path.includes('mp4')">
<img :src="item.path" /> <img :src="item.path + '!1280x720'" />
</viewer> </viewer>
<video width="100%" height="90%" controls autoplay v-else> <video width="100%" height="90%" controls autoplay v-else>
<source :src="item.path" type="video/mp4" /> <source :src="item.path" type="video/mp4" />

21
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -36,6 +36,7 @@
:terminalPhoto="terminalPhoto" :terminalPhoto="terminalPhoto"
v-if="terminalPhoto" v-if="terminalPhoto"
></carouselChart> ></carouselChart>
<div class="totalPic">图片总数：{{ totalPic }}</div>
</div> </div>
<div class="parameterArea"> <div class="parameterArea">
<div class="paramsDate"> <div class="paramsDate">
@ -161,6 +162,7 @@ export default {
channelOption: [], //通道分类 channelOption: [], //通道分类
channelValue: [], //选中的通道 channelValue: [], //选中的通道
terminalPhoto: [], //获取拍照装置当前数据 terminalPhoto: [], //获取拍照装置当前数据
totalPic: "",
dateValue: "", //日期 dateValue: "", //日期
nopicPath: require("@/assets/img/nopic.jpg"), nopicPath: require("@/assets/img/nopic.jpg"),
loadingBg: true, loadingBg: true,
@ -202,7 +204,7 @@ export default {
console.log(this.dateValue); console.log(this.dateValue);
console.log(this.channelList); console.log(this.channelList);
this.getTerminalPhotoList( this.getTerminalPhotoList(
this.channelList[0].channelid, this.channelValue,
this.dateValue, this.dateValue,
this.channelList[0].termId this.channelList[0].termId
); );
@ -296,6 +298,7 @@ export default {
]; ];
} else { } else {
this.terminalPhoto = res.data.list; this.terminalPhoto = res.data.list;
this.totalPic = res.data.num;
} }
this.loading = false; this.loading = false;
console.log(this.terminalPhoto); console.log(this.terminalPhoto);
@ -460,6 +463,19 @@ export default {
flex: 1; flex: 1;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
}
.totalPic {
width: 100%;
height: 24px;
margin-bottom: 8px;
text-align: center;
font-size: 14px;
color: #2d8cf0;
font-weight: bold;
line-height: 24px;
} }
} }
.parameterArea { .parameterArea {
@ -515,4 +531,7 @@ export default {
} }
} }
} }
.el-loading-mask {
z-index: 9999;
}
</style> </style>

142
src/views/realTimeSearch/index.vue
Unescape Escape View File

@ -1,35 +1,82 @@
<template> <template>
<div class="realTimeSearch"> <div class="realTimeSearch">
<div class="searchBox"> <div class="searchMain">
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <div class="searchBox">
<el-form-item label="审批人"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-input v-model="formInline.user" placeholder="审批人"></el-input> <el-form-item label="线路名称">
</el-form-item> <el-select v-model="formInline.xlVal" placeholder="活动区域">
<el-form-item label="活动区域"> <el-option label="区域一" value="shanghai"></el-option>
<el-select v-model="formInline.region" placeholder="活动区域"> <el-option label="区域二" value="beijing"></el-option>
<el-option label="区域一" value="shanghai"></el-option> </el-select>
<el-option label="区域二" value="beijing"></el-option> </el-form-item>
</el-select> <el-form-item label="杆塔名称">
</el-form-item> <el-select v-model="formInline.gtVal" placeholder="活动区域">
<el-form-item> <el-option label="区域一" value="shanghai"></el-option>
<el-button type="primary" @click="onSubmit">查询</el-button> <el-option label="区域二" value="beijing"></el-option>
</el-form-item> </el-select>
</el-form> </el-form-item>
</div> <el-form-item label="通道监拍点">
<div class="pictureBox"> <el-select v-model="formInline.tdVal" placeholder="活动区域">
<div class="imgList" v-for="(item, index) in picList" :key="index"> <el-option label="区域一" value="shanghai"></el-option>
<img :src="item.path" /> <el-option label="区域二" value="beijing"></el-option>
<div class="caption"> </el-select>
<p class="infoTop"> </el-form-item>
{{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }} <el-form-item label="开始日期">
</p> <el-date-picker
<p class="infoBottom"> v-model="formInline.startTimeVal"
拍照时间：{{ type="datetime"
$moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") placeholder="选择日期时间"
}} >
上传时间：{{ $moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss") }} </el-date-picker>
</p> </el-form-item>
</div> <el-form-item label="结束日期">
<el-date-picker
v-model="formInline.endTimeVal"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="pictureBox">
<el-card
class="box-card imgList"
v-for="(item, index) in picList"
:key="index"
>
<viewer class="bigpic">
<img :src="item.path" />
<!-- <el-image :src="item.path" lazy></el-image> -->
<div class="caption">
<p class="infoTop">
{{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
</p>
<p class="infoBottom">
拍照时间：{{
$moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss")
}}
上传时间：{{
$moment(item.recvTime).format("YYYY-MM-DD HH:mm:ss")
}}
</p>
</div>
</viewer>
</el-card>
</div>
<div class="pageNation">
<el-pagination
@current-change="handleCurrentChange"
:current-page="page"
:page-size="pageSize"
layout=" prev, pager, next, jumper,total"
:total="total"
background
>
</el-pagination>
</div> </div>
</div> </div>
</div> </div>
@ -40,9 +87,13 @@ export default {
data() { data() {
return { return {
formInline: { formInline: {
user: "", xlVal: "",
region: "", gtVal: "",
tdVal: "",
startTimeVal: "",
endTimeVal: "",
}, },
picList: [ picList: [
{ {
id: 15, id: 15,
@ -188,12 +239,19 @@ export default {
manualRequest: 0, manualRequest: 0,
}, },
], ],
page: 1, // 当前页数
pageSize: 10, // 每页数量
total: 0, //总条数
}; };
}, },
methods: { methods: {
onSubmit() { onSubmit() {
console.log("submit!"); console.log("submit!");
}, },
//点击分页
handleCurrentChange(val) {
this.page = val;
},
}, },
}; };
</script> </script>
@ -202,15 +260,23 @@ export default {
width: calc(100% - 32px); width: calc(100% - 32px);
height: calc(100% - 32px); height: calc(100% - 32px);
padding: 16px 16px; padding: 16px 16px;
background: #f0f0f0; background: #fff;
.searchMain {
border: 1px solid #dddddd;
height: calc(100% - 32px);
padding: 16px;
border-radius: 4px;
}
.pictureBox { .pictureBox {
display: flex; display: flex;
// justify-content: space-around; // justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
height: calc(100% - 52px); height: calc(100% - 86px);
overflow: auto; overflow: auto;
border: 1px solid #eee;
.imgList { .imgList {
width: calc((100% - 96px) / 4); width: calc((100% - 104px) / 4);
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 8px; margin: 8px;
@ -218,11 +284,15 @@ export default {
padding: 4px; padding: 4px;
border-radius: 3px; border-radius: 3px;
background: #fff; background: #fff;
.el-card__body {
padding: 0px;
}
img { img {
cursor: pointer;
width: 100%; width: 100%;
//height: 100%; //height: 100%;
} }
.caption { .caption {
padding: 9px; padding: 9px;
color: #333; color: #333;

Write Preview
Loading…
Cancel
Save