布局告警处理,实时查询

master
fanluyan 2 years ago
parent 467b6c887d
commit 0fd825ac2c

File diff suppressed because it is too large Load Diff

@ -40,7 +40,9 @@
> >
<img :src="item.path" alt="" /> <img :src="item.path" alt="" />
<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")
}})
<span>(通道{{ item.channelId }})</span> <span>(通道{{ item.channelId }})</span>
</p> </p>
</swiper-slide> </swiper-slide>

@ -56,6 +56,7 @@
placeholder="请选择" placeholder="请选择"
@change="changeChannelId" @change="changeChannelId"
multiple multiple
ref="multiSelect"
> >
<el-option <el-option
v-for="item in channelOption" v-for="item in channelOption"
@ -155,10 +156,10 @@ export default {
}, },
currentNodekey: "", //, currentNodekey: "", //,
cmdid: "", //id, cmdid: "", //id,
id: "", //id channelId: "", //id
channelList: "", // channelList: "", //
channelOption: [], // channelOption: [], //
channelValue: [], channelValue: [], //
terminalPhoto: [], // terminalPhoto: [], //
dateValue: "", // dateValue: "", //
nopicPath: require("@/assets/img/nopic.jpg"), nopicPath: require("@/assets/img/nopic.jpg"),
@ -177,12 +178,19 @@ export default {
], ],
}; };
}, },
watch: {}, watch: {
// channelValue() {
// setTimeout(() => {
// this.$refs.multiSelect.blur();
// }, 50);
// },
},
mounted() {}, mounted() {},
created() { created() {
this.getLineTreeList(); this.getLineTreeList();
this.getDateTime(); this.getDateTime();
console.log(this.dateValue);
}, },
methods: { methods: {
// //
@ -191,6 +199,7 @@ export default {
}, },
// //
changedate() { changedate() {
console.log(this.dateValue);
console.log(this.channelList); console.log(this.channelList);
this.getTerminalPhotoList( this.getTerminalPhotoList(
this.channelList[0].channelid, this.channelList[0].channelid,
@ -214,9 +223,9 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.currentNodekey); // this.$refs.tree.setCurrentKey(this.currentNodekey); //
console.log(this.currentNodekey); console.log(this.currentNodekey);
this.id = this.currentNodekey; this.channelId = this.currentNodekey;
console.log(this.id); console.log(this.channelId);
this.getChannelList(this.id); //id this.getChannelList(this.channelId); //id
}); });
} }
this.loadingBg = false; this.loadingBg = false;
@ -232,6 +241,7 @@ export default {
this.$refs.tree.setCurrentKey(data.list[0].id); this.$refs.tree.setCurrentKey(data.list[0].id);
} }
this.channelId = data.id; //id this.channelId = data.id; //id
this.channelValue = [];
this.channelOption = []; this.channelOption = [];
this.getChannelList(this.channelId); //id this.getChannelList(this.channelId); //id
}, },
@ -242,11 +252,7 @@ export default {
console.log(res); console.log(res);
this.channelList = res.data.list; this.channelList = res.data.list;
console.log(this.channelList); console.log(this.channelList);
// this.getTerminalPhotoList(
// this.channelList[0].channelid,
// this.dateValue,
// this.channelList[0].termId
// ); // id termid
this.channelOption = []; this.channelOption = [];
this.channelList.forEach((item) => { this.channelList.forEach((item) => {
this.channelOption.push({ this.channelOption.push({
@ -254,9 +260,17 @@ export default {
value: item.channelid, value: item.channelid,
termid: item.termId, termid: item.termId,
}); });
this.channelValue.push(item.channelid); //
}); // select }); // select
this.channelValue = this.channelOption[0].label; //
console.log(this.channelOption); console.log(this.channelOption);
console.log(this.channelValue);
// console.log(JSON.parse(JSON.stringify(this.channelValue)));
// this.channelValue = JSON.parse(JSON.stringify(this.channelValue));
this.getTerminalPhotoList(
this.channelValue,
this.dateValue,
this.channelList[0].termId
); // id termid
}) })
.catch((err) => { .catch((err) => {
console.log(err); // console.log(err); //
@ -295,11 +309,12 @@ export default {
console.log(val); console.log(val);
let channelObj = {}; let channelObj = {};
channelObj = this.channelOption.find(function (i) { channelObj = this.channelOption.find(function (i) {
return i.value === val; return i.value;
}); });
console.log(channelObj); console.log(channelObj);
this.getTerminalPhotoList(val, this.dateValue, channelObj.termid); this.getTerminalPhotoList(val, this.dateValue, channelObj.termid);
}, },
// //
handleSetSchedule() { handleSetSchedule() {
this.$refs.setschedule_ref.display(); this.$refs.setschedule_ref.display();

@ -1,17 +1,249 @@
<template> <template>
<div class="realTimeSearch">查询展示图片</div> <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>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return {}; return {
formInline: {
user: "",
region: "",
},
picList: [
{
id: 15,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 265357,
photoTime: "2023-05-05T17:21:04.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012104.jpg",
manualRequest: 0,
},
{
id: 16,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 263597,
photoTime: "2023-05-05T17:21:49.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012149.jpg",
manualRequest: 0,
},
{
id: 17,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 265471,
photoTime: "2023-05-05T17:25:13.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012513.jpg",
manualRequest: 0,
},
{
id: 18,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 263625,
photoTime: "2023-05-05T17:36:37.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013617.jpg",
manualRequest: 0,
},
{
id: 19,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 261572,
photoTime: "2023-05-05T17:37:14.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013654.jpg",
manualRequest: 0,
},
{
id: 22,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 264348,
photoTime: "2023-05-05T17:40:06.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013946.jpg",
manualRequest: 0,
},
{
id: 23,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 262231,
photoTime: "2023-05-05T17:42:33.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014213.jpg",
manualRequest: 0,
},
{
id: 24,
termId: 10010,
channelId: 1,
presetId: 255,
width: 0,
height: 0,
fileSize: 262564,
photoTime: "2023-05-05T17:43:11.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014252.jpg",
manualRequest: 0,
},
{
id: 26,
termId: 10010,
channelId: 2,
presetId: 255,
width: 0,
height: 0,
fileSize: 177557,
photoTime: "2023-05-05T17:46:23.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014604.jpg",
manualRequest: 0,
},
{
id: 37,
termId: 10010,
channelId: 2,
presetId: 255,
width: 0,
height: 0,
fileSize: 219467,
photoTime: "2023-05-05T17:47:31.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014711.jpg",
manualRequest: 0,
},
{
id: 89,
termId: 10010,
channelId: 2,
presetId: 255,
width: 0,
height: 0,
fileSize: 257854,
photoTime: "2023-05-06T00:54:07.000+00:00",
recvTime: null,
path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506085401.jpg",
manualRequest: 0,
},
],
};
},
methods: {
onSubmit() {
console.log("submit!");
},
}, },
methods: {},
created() {},
}; };
</script> </script>
<style lang="less"> <style lang="less">
.realTimeSearch { .realTimeSearch {
width: calc(100% - 32px);
height: calc(100% - 32px);
padding: 16px 16px;
background: #f0f0f0;
.pictureBox {
display: flex;
// justify-content: space-around;
flex-wrap: wrap;
height: calc(100% - 52px);
overflow: auto;
.imgList {
width: 23.5%;
position: relative;
display: inline-block;
margin: 8px;
position: relative;
padding: 4px;
border-radius: 3px;
background: #fff;
img {
width: 100%;
//height: 100%;
}
.caption {
padding: 9px;
color: #333;
.infoTop {
font-size: 16px;
color: #000;
font-weight: normal;
margin-top: 2px;
padding-left: 5px;
padding-right: 5px;
}
.infoBottom {
color: #000;
font-size: 12px;
font-weight: normal;
margin-top: 6px;
padding-left: 5px;
padding-right: 5px;
}
}
}
}
} }
</style> </style>

Loading…
Cancel
Save