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

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

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

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

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

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

@ -36,6 +36,7 @@
:terminalPhoto="terminalPhoto"
v-if="terminalPhoto"
></carouselChart>
<div class="totalPic">图片总数：{{ totalPic }}</div>
</div>
<div class="parameterArea">
<div class="paramsDate">
@ -161,6 +162,7 @@ export default {
channelOption: [], //通道分类
channelValue: [], //选中的通道
terminalPhoto: [], //获取拍照装置当前数据
totalPic: "",
dateValue: "", //日期
nopicPath: require("@/assets/img/nopic.jpg"),
loadingBg: true,
@ -202,7 +204,7 @@ export default {
console.log(this.dateValue);
console.log(this.channelList);
this.getTerminalPhotoList(
this.channelList[0].channelid,
this.channelValue,
this.dateValue,
this.channelList[0].termId
);
@ -296,6 +298,7 @@ export default {
];
} else {
this.terminalPhoto = res.data.list;
this.totalPic = res.data.num;
}
this.loading = false;
console.log(this.terminalPhoto);
@ -460,6 +463,19 @@ export default {
flex: 1;
width: auto;
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 {
@ -515,4 +531,7 @@ export default {
}
}
}
.el-loading-mask {
z-index: 9999;
}
</style>

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

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

Write Preview
Loading…
Cancel
Save