From f96e393e62b4c7496f7ace44b6aa5abb69ae58df Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 11 九月 2023 21:54:55 +0800 Subject: [PATCH] bug修改 --- src/views/intelligentPatrol/studyJudge/index.vue | 357 ++++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 266 insertions(+), 91 deletions(-) diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue index d7d3595..9c9c348 100644 --- a/src/views/intelligentPatrol/studyJudge/index.vue +++ b/src/views/intelligentPatrol/studyJudge/index.vue @@ -1,52 +1,106 @@ <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, 'playerWin')" - >瀹炴椂棰勮</el-button - > - <el-button - size="small" - @click="createVideo(currentEvent, 'playerWin')" - >褰曞儚鍥炴斁</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" :key="item.id" > <span>鎶ヨ鍥剧墖</span> - <img :src="item" /> + <!-- <img :src="item" /> --> + <el-image style="width:240px" :src="item" :preview-src-list="[item]"> </el-image> <span v-if="index === 0" >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span > </div> <div class="img-item" v-for="item in imageList" :key="item.id"> - <img :src="item" /> + <!-- <img :src="item" /> --> + <el-image style="width:240px" :src="item" :preview-src-list="[item]"> </el-image> </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> @@ -56,21 +110,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" @@ -169,13 +223,15 @@ <el-dialog :visible.sync="dialogCreate" title="鏌ョ湅瑙嗛" - width="80%" v-show="dialogCreate" :before-close="handleClose2" > <div class="dom" style="width: 100%; height: 600px; position: relative"> <div id="dom1" class="dom1"></div> </div> + </el-dialog> + <el-dialog :visible.sync="isShowTable" title="鎶ヨ淇℃伅" width="1200px"> + <inspection-table /> </el-dialog> </div> </template> @@ -187,19 +243,21 @@ 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"; +import MyMap from "@/components/map/leafletMap.vue"; export default { - components: { MyDispatch }, + components: { MyDispatch, MyMap }, created() { - this.getInspectionData(); + if (this.info) { + this.currentEvent = this.info; + this.loadData(); + } else { + this.getInspectionData(); + } this.initEventParams(); - basecase - .getInspectionCountData() - .then((res) => { - this.countData = res; - }) - .catch((err) => this.$message.error(err)); - + this.getInspectionCount(); getStoreInfoList({ current: 1, size: 100 }) .then(({ list }) => { this.storeList = list; @@ -222,6 +280,11 @@ }) .catch((err) => this.$message.error(err)); }, + mounted() { + this.timer = setInterval(() => { + this.getInspectionCount(); + }, 1000 * 60 * 15); + }, data() { const validateCarNumber = (rule, value, callback) => { if (value) { @@ -235,6 +298,8 @@ } }; return { + isShowTable: false, + timer: null, countData: { study: 0, review: 0, @@ -243,7 +308,7 @@ currentEvent: {}, stateList: [ { - id: 2, + id: 10, label: "涓婃姤", }, { @@ -304,9 +369,26 @@ crtHeight: 600, domId: "dom1", ctrl: "ctrl1", + playType: "live", + point: null, + mark: null, + zoom: null, }; }, methods: { + getInspectionCount() { + basecase + .getInspectionCountData({ + showLoading: false, + }) + .then((res) => { + this.countData = res; + }) + .catch((err) => this.$message.error(err)); + }, + openDialogTable() { + this.isShowTable = true; + }, pageChange(type) { if (type === "next") { this.currentPage += 1; @@ -317,35 +399,59 @@ }, getInspectionData() { + let data = { + current: this.currentPage, + pageSize: 1, + videoId: this.seachData.videoId, + }; + if (this.seachData.alarmTime) { + data.beginTime = this.seachData.alarmTime[0]; + data.endTime = this.seachData.alarmTime[1]; + } + if (this.seachData.gradeId) { + data.gradeId = this.seachData.gradeId[1]; + } 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)}灏忔椂`; + .getInspectionData(data) + .then(({ records, total }) => { + this.countData.review = total; + if (records.length > 0) { + this.currentEvent = records[0]; + this.loadData(); + } else { + this.currentEvent = {}; + this.$message("褰撳墠鏌ヨ鏉′欢鏃犳暟鎹�"); } }) .catch((err) => this.$message.error(err)); }, - + loadData() { + this.point = { + x: this.currentEvent.longitude, + y: this.currentEvent.latitude, + }; + this.zoom = 18; + this.mark = { title: this.currentEvent.address }; + if (this.currentEvent?.picData) { + this.imageList = this.currentEvent.picData + .split(",") + .map((item) => `${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${item}`); + // this.imageList =['https://www.shutterstock.com/image-photo/grandmother-holding-grandson-her-lap-600w-1954531321.jpg','https://www.shutterstock.com/image-photo/grandmother-holding-grandson-her-lap-600w-1954531321.jpg'] + } + 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)}灏忔椂`; + } + }, // 纭鐐瑰嚮浜嬩欢 handleConfirm() { this.$refs.currentEvent.validate((flag) => { @@ -421,8 +527,8 @@ if (res) { // 杩炴帴瀹㈡埛绔垚鍔� this.ws.login({ - loginIp: "183.245.159.161", - loginPort: "8282", + loginIp: "172.28.194.180", + loginPort: "7902", userName: "suichang", userPwd: "a12345677", https: 1, @@ -450,6 +556,7 @@ }); }, createVideo(item, ctrlType) { + this.playType = ctrlType; const DHWsInstance = DHWs.getInstance(); this.ws = DHWsInstance; console.log(this.ws); @@ -465,10 +572,10 @@ const params = [ { // ctrlType: "realMonitorUI", - ctrlType: ctrlType, + ctrlType: "playerWin", ctrlCode: this.ctrl, ctrlProperty: { - displayMode: 1, + displayMode: ctrlType == "playback" ? 2 : 1, splitNum: 1, channelList: [{ channelId: item.videoCode }], }, @@ -477,6 +584,11 @@ }, ]; this.setPos(); + + // _this.ws.on("createCtrlResult", (res) => { + // console.warn(res); + // }); + _this.ws .createCtrl(params) .then((res) => { @@ -486,12 +598,30 @@ .catch((e) => { console.log("error;", e); }); - _this.ws.on("createCtrlResult", (res) => { - console.warn(res); - }); + + if (ctrlType == "playback") { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 1); + + let beginTime = _this.formatDate(start); + let endTime = _this.formatDate(end); + const params = [ + { + ctrlCode: this.ctrl, + array: [ + { + beginTime: beginTime, + endTime: endTime, + channelId: item.videoCode, + }, + ], + }, + ]; + _this.ws.openCtrlRecord(params); + } }, 1000); }, - destroy() { // 璋冪敤閿�姣佹帶浠舵帴鍙� if (!this.isLogin) { @@ -520,7 +650,33 @@ window.fireEvent("onresize"); } }, + + // 鏃堕棿鎴宠浆 yyyy-MM-dd HH:mm:ss + formatDate(inputTime) { + var date = new Date(inputTime); + var y = date.getFullYear(); + var m = date.getMonth() + 1; + m = m < 10 ? "0" + m : m; + var d = date.getDate(); + d = d < 10 ? "0" + d : d; + var h = date.getHours(); + h = h < 10 ? "0" + h : h; + var minute = date.getMinutes(); + var second = date.getSeconds(); + minute = minute < 10 ? "0" + minute : minute; + second = second < 10 ? "0" + second : second; + return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second; + }, + resetAll() { + this.seachData = {}; + }, }, + beforeDestroy() { + clearInterval(this.timer); + this.timer = null; + }, + + props: ["info", "seachData"], }; </script> @@ -568,11 +724,16 @@ .sjm-content-left { line-height: 4.8vh; - + .count-data-span { + cursor: pointer; + color: #66b1ff; + } + .left-form > ::v-deep.el-form-item__label { + font-size: 16px !important; + } .img-item { display: flex; flex-direction: column; - img { width: 15vw; height: 20vh; @@ -583,9 +744,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; @@ -597,7 +764,7 @@ .el-form { ::v-deep .el-form-item { - margin-bottom: 5px; + margin-bottom: 15px; } ::v-deep .el-form-item__label { @@ -609,4 +776,12 @@ color: #4b9bb7; } } + +.map { + height: 100%; + min-width: 460px; +} +.header { + line-height: normal; +} </style> -- Gitblit v1.8.0