布局告警处理,实时查询

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="" />
<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>
</p>
</swiper-slide>

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

@ -1,17 +1,249 @@
<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>
<script>
export default {
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>
<style lang="less">
.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>

Loading…
Cancel
Save