From b624ceba2053f5f9d82a63ea0682ca87ca54dc12 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期三, 14 十二月 2022 16:35:30 +0800 Subject: [PATCH] 2022-12-14 肖辉 用户管理模块-新建用户密码校验修改 智能巡查模块-预警研判样式修改 --- src/views/intelligentPatrol/studyJudge/index.vue | 391 +++++++++++++++++++++++++++++++++---------------------- 1 files changed, 232 insertions(+), 159 deletions(-) diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue index 35d74c5..6b983fd 100644 --- a/src/views/intelligentPatrol/studyJudge/index.vue +++ b/src/views/intelligentPatrol/studyJudge/index.vue @@ -1,150 +1,201 @@ <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 + >鎮ㄦ湁{{ 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" - :key="item.id" + class="img-item" + v-for="(item, index) in imageList" + :key="item.id" > <span>鎶ヨ鍥剧墖</span> <img :src="item" /> <span v-if="index === 0" - >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span + >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span > </div> <div class="img-item" v-for="item in imageList" :key="item.id"> <img :src="item" /> </div> - </div> - <div class="sjm-content-center">鍦板浘瀹瑰櫒</div> - <div class="sjm-content-right"> - <div class="card-box"> - <div class="card-header"> - <span>鎶ヨ璁板綍--{{ currentEvent.algoName }}</span> - </div> - <el-form + <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 class="map"> + <MyMap></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> + <el-form + ref="currentEvent" + label-width="120px" + :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" - clearable - @change="selectStoreChange" - placeholder="璇烽�夋嫨鍏宠仈搴楅摵" + v-model="eventInfoData.store" + clearable + @change="selectStoreChange" + placeholder="璇烽�夋嫨鍏宠仈搴楅摵" > <el-option - v-for="store in storeList" - :value="store.id" - :label="store.storeName" - :key="store.id" + v-for="store in storeList" + :value="store.id" + :label="store.storeName" + :key="store.id" /> </el-select> </el-form-item> <el-form-item v-if="eventInfoData.store" label="搴楅摵寰楀垎:"> <span>{{ - selectStoreChange(eventInfoData.store).storeScore - }}</span> + selectStoreChange(eventInfoData.store).storeScore + }}</span> </el-form-item> <el-form-item label="澶勭悊鎰忚:" prop="state"> <el-radio-group v-model="eventInfoData.state"> <el-radio - :label="item.id" - v-for="item in stateList" - :key="item.id" - >{{ item.label }}</el-radio + :label="item.id" + v-for="item in stateList" + :key="item.id" + >{{ item.label }}</el-radio > </el-radio-group> </el-form-item> <el-form-item label="澶х被鍚嶇О:" prop="categoryId"> <el-select - v-model="eventInfoData.categoryId" - placeholder="璇烽�夋嫨澶х被鍚嶇О" - @change="categoryChange" + v-model="eventInfoData.categoryId" + placeholder="璇烽�夋嫨澶х被鍚嶇О" + @change="categoryChange" > <el-option - v-for="category in categoryOptions" - :key="category.id" - :value="category.id" - :label="category.name" + v-for="category in categoryOptions" + :key="category.id" + :value="category.id" + :label="category.name" /> </el-select> </el-form-item> <el-form-item label="灏忕被鍚嶇О:" prop="typeId"> <el-select - v-model="eventInfoData.typeId" - placeholder="璇烽�夋嫨灏忕被鍚嶇О" + v-model="eventInfoData.typeId" + placeholder="璇烽�夋嫨灏忕被鍚嶇О" > <el-option - v-for="type in typeOptions" - :key="type.id" - :value="type.id" - :label="type.name" + v-for="type in typeOptions" + :key="type.id" + :value="type.id" + :label="type.name" /> </el-select> </el-form-item> <el-form-item label="杞︾墝鍙�:" prop="carNumber"> <el-input - v-model="eventInfoData.carNumber" - placeholder="璇峰~鍐欒溅鐗屽彿鐮�" + v-model="eventInfoData.carNumber" + placeholder="璇峰~鍐欒溅鐗屽彿鐮�" ></el-input> </el-form-item> <el-form-item label="澶囨敞:" prop="description"> <el-input - type="textarea" - :rows="5" - v-model="eventInfoData.description" + type="textarea" + :rows="5" + v-model="eventInfoData.description" ></el-input> </el-form-item> <el-form-item> <el-button - :disabled="currentPage === 1" - @click="pageChange('prev')" - >涓婁竴鏉�</el-button + :disabled="currentPage === 1" + @click="pageChange('prev')" + >涓婁竴鏉�</el-button > <el-button @click.native.prevent="handleConfirm" - >纭</el-button + >纭</el-button > <el-button @click="pageChange('next')">涓嬩竴鏉�</el-button> </el-form-item> @@ -155,18 +206,18 @@ </div> <el-dialog :visible="isShowDialog" title="璋冨害淇℃伅"> <MyDispatch - v-if="isShowDialog" - :mytype="1" - @getDispatchData="confirmInspection" - :isGetData="true" - @changeDialog="closeDialog" + v-if="isShowDialog" + :mytype="1" + @getDispatchData="confirmInspection" + :isGetData="true" + @changeDialog="closeDialog" ></MyDispatch> </el-dialog> <el-dialog - :visible.sync="dialogCreate" - title="鏌ョ湅瑙嗛" - v-show="dialogCreate" - :before-close="handleClose2" + :visible.sync="dialogCreate" + title="鏌ョ湅瑙嗛" + v-show="dialogCreate" + :before-close="handleClose2" > <div class="dom" style="width: 100%; height: 600px; position: relative"> <div id="dom1" class="dom1"></div> @@ -183,39 +234,46 @@ import { validateCarNum } from "@/utils/validate"; import MyDispatch from "@/components/dispatch"; +import MyMap from "@/components/map"; + export default { - components: { MyDispatch }, + components: { MyDispatch, MyMap }, created() { this.getInspectionData(); this.initEventParams(); basecase - .getInspectionCountData() - .then((res) => { - this.countData = res; - }) - .catch((err) => this.$message.error(err)); + .getInspectionCountData() + .then((res) => { + this.countData = res; + }) + .catch((err) => this.$message.error(err)); getStoreInfoList({ current: 1, size: 100 }) - .then(({ list }) => { - this.storeList = list; - }) - .catch((err) => { - this.$message.error(err); - }); + .then(({ list }) => { + this.storeList = list; + }) + .catch((err) => { + this.$message.error(err); + }); baseInfo - .getCategoryList() - .then((res) => { - this.categoryOptions = res; - }) - .catch((err) => this.$message.error(err)); + .getCategoryList() + .then((res) => { + this.categoryOptions = res; + }) + .catch((err) => this.$message.error(err)); baseInfo - .getTypeList() - .then((res) => { - this.typeList = res; - }) - .catch((err) => this.$message.error(err)); + .getTypeList() + .then((res) => { + this.typeList = res; + }) + .catch((err) => this.$message.error(err)); + }, + mounted() { + this.timer = setInterval(() => { + setTimeout(this.getInspectionData, 0); + }, 1000 * 10); }, data() { const validateCarNumber = (rule, value, callback) => { @@ -230,6 +288,7 @@ } }; return { + timer: null, countData: { study: 0, review: 0, @@ -314,32 +373,32 @@ getInspectionData() { basecase - .getInspectionData({ current: this.currentPage }) - .then(({ records }) => { - this.currentEvent = records[0]; - if (this.currentEvent?.picData) { - this.imageList = this.currentEvent.picData - .split(",") - .map((item) => `${FILE_ORIGINAL_URL}${item}`); - } - if ( - this.currentEvent?.alarmTime || - this.currentEvent?.currentAlarmTime - ) { - const { alarmTime, currentAlarmTime } = this.currentEvent; - const continueAlarmTime = - new Date().getTime() - - (currentAlarmTime - ? new Date(currentAlarmTime).getTime() - : new Date(alarmTime).getTime()); - const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24; - const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24; - this.currentEvent.conntinueTime = `${parseInt( - CONTINUE_DAY - )}澶�${parseInt(CONTINUE_HOURS)}灏忔椂`; - } - }) - .catch((err) => this.$message.error(err)); + .getInspectionData({ current: this.currentPage }) + .then(({ records }) => { + this.currentEvent = records[0]; + if (this.currentEvent?.picData) { + this.imageList = this.currentEvent.picData + .split(",") + .map((item) => `${FILE_ORIGINAL_URL}${item}`); + } + if ( + this.currentEvent?.alarmTime || + this.currentEvent?.currentAlarmTime + ) { + const { alarmTime, currentAlarmTime } = this.currentEvent; + const continueAlarmTime = + new Date().getTime() - + (currentAlarmTime + ? new Date(currentAlarmTime).getTime() + : new Date(alarmTime).getTime()); + const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24; + const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24; + this.currentEvent.conntinueTime = `${parseInt( + CONTINUE_DAY + )}澶�${parseInt(CONTINUE_HOURS)}灏忔椂`; + } + }) + .catch((err) => this.$message.error(err)); }, // 纭鐐瑰嚮浜嬩欢 @@ -382,13 +441,13 @@ const eventParams = Object.assign({}, this.eventInfoData); delete eventParams.store; basecase - .confirmInspection({ ...eventParams, ...data }) - .then(() => { - this.$message.success("鎿嶄綔鎴愬姛"); - this.getInspectionData(); - this.initEventParams(); - }) - .catch((err) => this.$message.error(err)); + .confirmInspection({ ...eventParams, ...data }) + .then(() => { + this.$message.success("鎿嶄綔鎴愬姛"); + this.getInspectionData(); + this.initEventParams(); + }) + .catch((err) => this.$message.error(err)); }, closeDialog() { @@ -480,14 +539,14 @@ // }); _this.ws - .createCtrl(params) - .then((res) => { - this.$message.success("鍒涘缓鎴愬姛"); - console.log("res", res); - }) - .catch((e) => { - console.log("error;", e); - }); + .createCtrl(params) + .then((res) => { + this.$message.success("鍒涘缓鎴愬姛"); + console.log("res", res); + }) + .catch((e) => { + console.log("error;", e); + }); if (ctrlType == "playback") { const end = new Date(); @@ -558,6 +617,10 @@ return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second; }, }, + beforeDestroy() { + clearInterval(this.timer); + this.timer = null; + }, }; </script> @@ -605,11 +668,12 @@ .sjm-content-left { line-height: 4.8vh; - + .left-form> ::v-deep.el-form-item__label{ + font-size: 16px!important; + } .img-item { display: flex; flex-direction: column; - img { width: 15vw; height: 20vh; @@ -623,6 +687,10 @@ .sjm-content-right { .card-box { + .but-live{ + padding-left: 48px; + line-height: 4.8vh; + } .card-header { padding-left: 48px; line-height: 4.8vh; @@ -646,4 +714,9 @@ color: #4b9bb7; } } + +.map { + height: 488px; + min-width: 460px; +} </style> -- Gitblit v1.8.0