From cae7f403bb70f6c2752bedacbceb55e6f2c79891 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期四, 15 十二月 2022 16:06:50 +0800 Subject: [PATCH] 2022-12-15 肖辉 智能巡查--预警研判 报警信息突出可点击,修改默认不弹出 --- src/views/intelligentPatrol/studyJudge/index.vue | 185 +++++++++++++++++++++++++++++++++++---------- 1 files changed, 143 insertions(+), 42 deletions(-) diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue index 35d74c5..f10e22f 100644 --- a/src/views/intelligentPatrol/studyJudge/index.vue +++ b/src/views/intelligentPatrol/studyJudge/index.vue @@ -1,30 +1,47 @@ <template> <div class="study-judge"> - <div class="study-judge-header"> - <span - >鎮ㄦ湁{{ countData.review }}鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫{{ - countData.register - }}鏉�,鍐嶅涔爗{ countData.study }}鏉�</span - > - </div> + <!-- <div class="study-judge-header">--> + <!-- <span--> + <!-- >鎮ㄦ湁{{ countData.review }}鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫{{--> + <!-- countData.register--> + <!-- }}鏉�,鍐嶅涔爗{ countData.study }}鏉�</span--> + <!-- >--> + <!-- </div>--> <div class="study-judge-main"> - <div class="sjm-header"> - <div class="sjm-header-left"> - <span class="moni-name">鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} </span> - <span class="moni-area">{{ currentEvent.street }}</span> - <span>{{ currentEvent.address }}</span> - </div> - <div class="sjm-header-right"> - <el-button size="small" @click="createVideo(currentEvent, 'live')" - >瀹炴椂棰勮</el-button - > - <el-button size="small" @click="createVideo(currentEvent, 'playback')" - >褰曞儚鍥炴斁</el-button - > - </div> - </div> + <!-- <div class="sjm-header">--> + <!-- <div class="sjm-header-left">--> + <!-- <span class="moni-name">鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} </span>--> + <!-- <span class="moni-area">{{ currentEvent.street }}</span>--> + <!-- <span>{{ currentEvent.address }}</span>--> + <!-- </div>--> + <!-- <div class="sjm-header-right">--> + <!-- <el-button size="small" @click="createVideo(currentEvent, 'live')"--> + <!-- >瀹炴椂棰勮</el-button--> + <!-- >--> + <!-- <el-button size="small" @click="createVideo(currentEvent, 'playback')"--> + <!-- >褰曞儚鍥炴斁</el-button--> + <!-- >--> + <!-- </div>--> + <!-- </div>--> <div class="sjm-content"> <div class="sjm-content-left"> + <!-- <div class="sjm-header-left">--> + <!-- <span class="moni-name">鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} </span>--> + <!-- <span class="moni-area">{{ currentEvent.street }}</span>--> + <!-- <span>{{ currentEvent.address }}</span>--> + <!-- </div>--> + <span @click="openDialogTable" class="count-data-span" + >鎮ㄦ湁{{ countData.review }}鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫{{ + countData.register + }}鏉�,鍐嶅涔爗{ countData.study }}鏉�</span + > + <div class="sjm-header-left"> + <span class="moni-name" + >鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} + </span> + <span class="moni-area">{{ currentEvent.street }}</span> + <span>{{ currentEvent.address }}</span> + </div> <div class="img-item" v-for="(item, index) in imageList" @@ -39,10 +56,49 @@ <div class="img-item" v-for="item in imageList" :key="item.id"> <img :src="item" /> </div> + <el-form + ref="currentEvent" + label-width="120px" + :model="eventInfoData" + :rules="rules" + label-position="left" + class="left-form" + > + <el-form-item label="浜嬩欢缂栧彿:"> + <span>{{ currentEvent.code }}</span> + </el-form-item> + <el-form-item label="浜嬩欢绛夌骇:"> + <span>{{ currentEvent.grade }}</span> + </el-form-item> + <el-form-item label="棣栨鎶ヨ鏃堕棿:"> + <span>{{ currentEvent.alarmTime }}</span> + </el-form-item> + <el-form-item label="鏈�杩戞姤璀︽椂闂�:"> + <span>{{ currentEvent.currentAlarmTime }}</span> + </el-form-item> + <el-form-item label="鎸佺画鏃堕棿:"> + <span>{{ currentEvent.conntinueTime }}</span> + </el-form-item> + </el-form> </div> - <div class="sjm-content-center">鍦板浘瀹瑰櫒</div> + <div class="sjm-content-center"> + <div class="map"> + <MyMap :point="point" :zoom="zoom" :mark="mark"></MyMap> + </div> + <!-- <iframe src="https://183.245.159.161:8282/OneMap/index.html#/OneMap?code=2&clientVersion=&skin=white&locale=zh&otherAuthor=allowable"></iframe> --> + </div> <div class="sjm-content-right"> <div class="card-box"> + <div class="but-live"> + <el-button size="small" @click="createVideo(currentEvent, 'live')" + >瀹炴椂棰勮</el-button + > + <el-button + size="small" + @click="createVideo(currentEvent, 'playback')" + >褰曞儚鍥炴斁</el-button + > + </div> <div class="card-header"> <span>鎶ヨ璁板綍--{{ currentEvent.algoName }}</span> </div> @@ -52,21 +108,21 @@ :model="eventInfoData" :rules="rules" > - <el-form-item label="浜嬩欢缂栧彿:"> - <span>{{ currentEvent.code }}</span> - </el-form-item> - <el-form-item label="浜嬩欢绛夌骇:"> - <span>{{ currentEvent.grade }}</span> - </el-form-item> - <el-form-item label="棣栨鎶ヨ鏃堕棿:"> - <span>{{ currentEvent.alarmTime }}</span> - </el-form-item> - <el-form-item label="鏈�杩戞姤璀︽椂闂�:"> - <span>{{ currentEvent.currentAlarmTime }}</span> - </el-form-item> - <el-form-item label="鎸佺画鏃堕棿:"> - <span>{{ currentEvent.conntinueTime }}</span> - </el-form-item> + <!-- <el-form-item label="浜嬩欢缂栧彿:">--> + <!-- <span>{{ currentEvent.code }}</span>--> + <!-- </el-form-item>--> + <!-- <el-form-item label="浜嬩欢绛夌骇:">--> + <!-- <span>{{ currentEvent.grade }}</span>--> + <!-- </el-form-item>--> + <!-- <el-form-item label="棣栨鎶ヨ鏃堕棿:">--> + <!-- <span>{{ currentEvent.alarmTime }}</span>--> + <!-- </el-form-item>--> + <!-- <el-form-item label="鏈�杩戞姤璀︽椂闂�:">--> + <!-- <span>{{ currentEvent.currentAlarmTime }}</span>--> + <!-- </el-form-item>--> + <!-- <el-form-item label="鎸佺画鏃堕棿:">--> + <!-- <span>{{ currentEvent.conntinueTime }}</span>--> + <!-- </el-form-item>--> <el-form-item label="鍏宠仈搴楅摵" prop="store"> <el-select v-model="eventInfoData.store" @@ -172,6 +228,9 @@ <div id="dom1" class="dom1"></div> </div> </el-dialog> + <el-dialog :visible.sync="isShowTable" title="鎶ヨ淇℃伅" width="1200px"> + <inspection-table/> + </el-dialog> </div> </template> @@ -182,9 +241,11 @@ import { FILE_ORIGINAL_URL } from "@/utils"; import { validateCarNum } from "@/utils/validate"; import MyDispatch from "@/components/dispatch"; +import InspectionTable from "@/views/intelligentPatrol/studyJudge/inspectionTable/index.vue"; +import MyMap from "@/components/map"; export default { - components: { MyDispatch }, + components: { MyDispatch, MyMap,InspectionTable }, created() { this.getInspectionData(); this.initEventParams(); @@ -217,6 +278,11 @@ }) .catch((err) => this.$message.error(err)); }, + mounted() { + this.timer = setInterval(() => { + setTimeout(this.getInspectionData, 0); + }, 1000 * 10); + }, data() { const validateCarNumber = (rule, value, callback) => { if (value) { @@ -230,6 +296,8 @@ } }; return { + isShowTable:false, + timer: null, countData: { study: 0, review: 0, @@ -300,9 +368,15 @@ domId: "dom1", ctrl: "ctrl1", playType: "live", + point: null, + mark: null, + zoom: null, }; }, methods: { + openDialogTable(){ + this.isShowTable = true + }, pageChange(type) { if (type === "next") { this.currentPage += 1; @@ -317,6 +391,12 @@ .getInspectionData({ current: this.currentPage }) .then(({ records }) => { this.currentEvent = records[0]; + this.point = { + x: this.currentEvent.longitude, + y: this.currentEvent.latitude, + }; + this.zoom = 19; + this.mark = { title: this.currentEvent.address }; if (this.currentEvent?.picData) { this.imageList = this.currentEvent.picData .split(",") @@ -558,6 +638,10 @@ return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second; }, }, + beforeDestroy() { + clearInterval(this.timer); + this.timer = null; + }, }; </script> @@ -605,11 +689,17 @@ .sjm-content-left { line-height: 4.8vh; + .count-data-span{ + cursor: pointer; + color: blue; + } + .left-form > ::v-deep.el-form-item__label { + font-size: 16px !important; + } .img-item { display: flex; flex-direction: column; - img { width: 15vw; height: 20vh; @@ -620,9 +710,15 @@ margin-top: 2vh; } } - + .sjm-content-center { + width: calc(100% - 920px); + } .sjm-content-right { .card-box { + .but-live { + padding-left: 48px; + line-height: 4.8vh; + } .card-header { padding-left: 48px; line-height: 4.8vh; @@ -634,7 +730,7 @@ .el-form { ::v-deep .el-form-item { - margin-bottom: 5px; + margin-bottom: 15px; } ::v-deep .el-form-item__label { @@ -646,4 +742,9 @@ color: #4b9bb7; } } + +.map { + height: 100%; + min-width: 460px; +} </style> -- Gitblit v1.8.0