From feaf0a9778879ef211c5587a513ba4cbdabb52d0 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期四, 23 六月 2022 17:42:58 +0800 Subject: [PATCH] bug修复 --- src/pages/cameraAccess/components/SeparateRules.vue | 514 +++++++++++++++++++++++++++----------------------------- 1 files changed, 246 insertions(+), 268 deletions(-) diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue index 6171c5a..19fb894 100644 --- a/src/pages/cameraAccess/components/SeparateRules.vue +++ b/src/pages/cameraAccess/components/SeparateRules.vue @@ -7,7 +7,7 @@ <span> <span class="label">瑙嗛鍒嗘瀽澶勭悊</span> <el-switch - style="margin-left: 10px;" + style="margin-left: 10px" v-model="Camera.analytics" @change="pollEnable" :disabled="!Camera.cameraId" @@ -20,46 +20,58 @@ <toggle-button :value="Camera.dealWay" :width="60" - :labels="{checked: '瀹炴椂', unchecked: '杞'}" - :color="{checked: '#3D68E1', unchecked: '#FF7733', disabled: '#CCCCCC'}" + :labels="{ checked: '瀹炴椂', unchecked: '杞' }" + :color="{ + checked: '#3D68E1', + unchecked: '#FF7733', + disabled: '#CCCCCC' + }" :sync="true" @change="changePoll" /> </div> - <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> - <span - class="label" - >鍒嗚鲸鐜�: {{Camera.resolutionOption.find(o=>o.value === Camera.selectResolution).label}}</span> + <span class="label">澶勭悊鐘舵��: {{ camStatus }}</span> + </div> + <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <span class="label" + >鍒嗚鲸鐜�: + {{ + Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0 + ? "鏈満鍒嗚鲸鐜�" + : `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}` + }}</span + > </div> <div v-if="Camera.analytics" class="flex-box"> - <span class="label">SmartAI鑺傜偣: {{ Camera.runServerName}}</span> + <span class="label">SmartAI鑺傜偣: {{ Camera.runServerName }}</span> </div> <div v-if="Camera.analytics" class="flex-box"> <span class="label">绠楁硶蹇�熼�氶亾</span> <div class="channel flex-box"> - <el-tooltip - effect="dark" - content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" - placement="bottom" - popper-class="atooltip" - > + <el-tooltip effect="dark" content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" placement="bottom" popper-class="atooltip"> <span - style="color:#3D68E1;cursor: pointer;font-size:23px;" + style="color: #3d68e1; cursor: pointer; font-size: 23px" @click="ctrlC" class="iconfont iconfuzhiguize" ></span> </el-tooltip> <el-tooltip effect="dark" - :content="!TreeDataPool.ctrlCameraId?'绮樿创绠楁硶瑙勫垯':`绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`" + :content=" + !TreeDataPool.ctrlCameraId ? '绮樿创绠楁硶瑙勫垯' : `绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}` + " placement="bottom" popper-class="atooltip" > <span - :style="!TreeDataPool.ctrlCameraId?'cursor: not-allowed;font-size:23px;':'color:#3D68E1;font-size:23px;cursor: pointer;'" + :style=" + !TreeDataPool.ctrlCameraId + ? 'cursor: not-allowed;font-size:23px;' + : 'color:#3D68E1;font-size:23px;cursor: pointer;' + " @click="ctrlV" class="iconfont iconniantie ml5" ></span> @@ -74,7 +86,7 @@ <div class="top"> <p class="task-css"> - <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b> + <b style="font-size: 14px; line-height: 18px">鍦烘櫙</b> </p> <div class="clearfix"> <slide-scene :sceneData="Camera.rules"></slide-scene> @@ -83,7 +95,7 @@ :showRealPoll="cameraType === 'camera'" :ShowLocalVedio="cameraType === 'dataStack'" v-if="showSysInfo" - style="margin-top:-10px" + style="margin-top: -10px" /> </div> </div> @@ -96,18 +108,14 @@ <div class="draw-box"> <div class="draw-box-title"> <b style="font-size: 14px">缁樺埗鍖哄煙</b> - <span - class="el-dropdown-link" - @click="drawBaseImg" - style="position: relative;top: 5px; cursor:pointer" - > - <i class="iconfont iconbianji1" style="font-size: 28px; "></i> + <span class="el-dropdown-link" @click="drawBaseImg" style="position: relative; top: 5px; cursor: pointer"> + <i class="iconfont iconbianji1" style="font-size: 28px"></i> </span> </div> - <div style="width:590px;height:16px;"> - <b - style="font-size:14px" - >{{ Camera.camearInfo.alias ? Camera.camearInfo.alias: Camera.camearInfo.name }}</b> + <div style="width: 590px; height: 16px"> + <b style="font-size: 14px">{{ + Camera.camearInfo.alias ? Camera.camearInfo.alias : Camera.camearInfo.name + }}</b> </div> <div class="img-box"> <template v-if="TreeDataPool.treeActiveName == 'camera'"> @@ -126,27 +134,25 @@ :loading="Camera.loading" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" + :isGB28181="Camera.gb28181" @fromCanvas="getCanvasData" @changeLoading="changeLoading" @refresh="refresh" ></polygon-canvas> </template> <template v-else> - <div style="width:100%" v-loading="getStackFileLoading"> + <div style="width: 100%" v-loading="getStackFileLoading"> <swiper ref="swiper" :auto-update="true" :options="canvasSwiperOption" @slideChange="swiperSlideChange" class="swiper-box-container2" - style="width:100%" + style="width: 100%" > <swiper-slide v-for="(data, index) in swipercanvasData" :key="index"> <div> - <b - class="video-title" - style="font-size:14px;margin-top:-10px" - >{{ data.name }}</b> + <b class="video-title" style="font-size: 14px; margin-top: -10px">{{ data.name }}</b> <polygon-canvas class="cavas" ref="canvas" @@ -170,20 +176,12 @@ </div> </swiper-slide> </swiper> - <div - class="swiper-local-prev" - v-show="swipercanvasData.length>1" - @click="prevClick" - > + <div class="swiper-local-prev" v-show="swipercanvasData.length > 1" @click="prevClick"> <div class="icon-btn" slot="button-prev"> <i class="iconfont iconzuo"></i> </div> </div> - <div - class="swiper-local-next" - v-show="swipercanvasData.length>1" - @click="nextClick" - > + <div class="swiper-local-next" v-show="swipercanvasData.length > 1" @click="nextClick"> <div class="icon-btn" slot="button-next"> <i class="iconfont iconyou1"></i> </div> @@ -192,12 +190,16 @@ </template> </div> </div> - <div style="float:left;width:calc(10% - 90px);height:100%;"></div> + <div style="float: left; width: calc(10% - 90px); height: 100%"></div> <div class="time-box" - style="width:calc(90% + 90px - 576px);overflow-x:auto;overflow-y:hidden" + style=" + width: calc(90% + 90px - 576px); + overflow-x: auto; + overflow-y: hidden; + " > - <p style="text-align:left;padding: 10px;box-sizing: border-box"> + <p style="text-align: left; padding: 10px; box-sizing: border-box"> <b style="font-size: 14px">鏃堕棿娈�</b> </p> <time-slider ref="timeSlider" :type="'sep'" /> @@ -217,30 +219,21 @@ </template> <script> -//import { timeSilderData } from "@/mockData/timeSilder"; -import { savePolygon } from "@/api/polygon"; +import { savePolygon } from "@/api/polygon" -import { - pasteRules -} from '@/api/task'; +import { pasteRules } from "@/api/task" +import { getCameraInfo } from "@/api/camera" +import { saveCameraScene } from "@/api/scene" -import { - saveCameraScene, - getCameraSceneRule, -} from '@/api/scene' +import { changeRunType } from "@/api/pollConfig" +import { findAllFileByStackId } from "@/api/localVedio" +import VideoRuleData from "@/Pool/VideoRuleData" -import { changeRunType } from "@/api/pollConfig"; -import { findAllFileByStackId } from "@/api/localVedio"; -import VideoRuleData from "@/Pool/VideoRuleData"; - -import TimeSlider from "./TimeSlider"; -import polygonCanvas from "@/components/canvas"; -//import Sysinfo from "./SystemInfo"; -import Sysinfo from "@/components/subComponents/SystemInfo"; -import SceneRule from "./SceneRule"; -import SlideScene from "./scene/SlideScene"; -import { duration } from 'moment'; - +import TimeSlider from "./TimeSlider" +import polygonCanvas from "@/components/canvas" +import Sysinfo from "@/components/subComponents/SystemInfo" +import SceneRule from "./SceneRule" +import SlideScene from "./scene/SlideScene" export default { components: { @@ -252,14 +245,14 @@ }, directives: { focus: { - inserted: function (el) { - el.querySelector('input').focus() + inserted: function(el) { + el.querySelector("input").focus() } } }, computed: { cameraType() { - return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack" + return this.TreeDataPool.treeActiveName === "camera" ? "camera" : "dataStack" } }, data() { @@ -280,51 +273,33 @@ prevEl: ".swiper-local-prev" } }, - swiperOption: { - slidesPerView: 5, - spaceBetween: 8, - pagination: { - el: ".swiper-pagination", - clickable: true - }, - navigation: { - nextEl: ".swiper-next-border", - prevEl: ".swiper-pre-border" - } - }, tableRuleList: [], - + camStatus: "", cameraId: "", - activeTaskIndex: 0, - activeTaskId: "", - booleanValue: false, showSysInfo: false, showCanvas: true, canvasWidth: 576, canvasHeight: 324, - stackId: '', + stackId: "", swiperIndex: 0, swipercanvasData: [], stackFilesPage: 1, - stackFilesSize: 5, - }; + stackFilesSize: 5 + } }, mounted() { - this.mockAsync(); - this.PollData.statistics(); - + this.PollData.statistics() }, watch: { - 'Camera.cameraId': { + "Camera.cameraId": { handler(n, o) { if (n) { if (this.TreeDataPool.treeActiveName == "dataStack") { - this.stackFilesPage = 1; - this.stackFilesSize = 5; - this.stackId = n; + this.stackFilesPage = 1 + this.stackFilesSize = 5 + this.stackId = n if (this.stackId) { - // console.log('getStackFiles') - this.swipercanvasData = []; + this.swipercanvasData = [] this.getStackFiles() } } @@ -333,168 +308,165 @@ } }, methods: { + getStatus() { + getCameraInfo(this.Camera.cameraId).then((res) => { + if (res.success) { + switch (res.data.status) { + case 0: + this.camStatus = "鏈厤瑙勫垯" + return + case 1: + this.camStatus = "绛夊緟杞澶勭悊" + return + case 2: + this.camStatus = "姝e湪鎵ц鍒嗘瀽澶勭悊" + return + case -1: + this.camStatus = "鍏朵粬鎯呭喌瀵艰嚧鏈鐞�" + return + case -2: + this.camStatus = "鏁呴殰瀵艰嚧鏈鐞�" + return + } + } + }) + }, prevClick() { - // console.log(this.swiperIndex) - // console.log(this.$refs.swiper.swiper.activeIndex) if (this.swiperIndex == 0) { - // console.log('鏈鍒嗛〉鐨勭涓�鏉�') - //璇锋眰涓婁竴椤� if (this.stackFilesPage > 1) { - this.stackFilesPage--; - this.getStackFiles(true); + this.stackFilesPage-- + this.getStackFiles(true) } else { this.$message({ - type: 'info', - message: '褰撳墠宸叉槸绗竴椤�' - }); + type: "info", + message: "褰撳墠宸叉槸绗竴椤�" + }) } - } }, nextClick() { if (this.swiperIndex == this.swipercanvasData.length - 1) { - // console.log('鏈�鍚庝竴寮�,鍔犺浇鏇村') - //璇锋眰涓嬩竴椤� - this.stackFilesPage++; - this.getStackFiles(true); + this.stackFilesPage++ + this.getStackFiles(true) } }, getStackFiles(onClick = false) { - this.getStackFileLoading = true; - let _this = this; - findAllFileByStackId({ name: '', stackId: this.stackId, page: this.stackFilesPage, size: this.stackFilesSize, type: 0 }).then(res => { - if (res && res.success) { - if (res.data.dataList.length > 0) { - this.swipercanvasData = []; - this.swipercanvasData = res.data.dataList.map(item => { - return { - name: item.name, - stackId: item.stack_id, - baseImg: item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf('/') + 1)}` : item.snapshot_url, - type: item.type, - id: item.id, - loading: false + this.getStackFileLoading = true + let _this = this + findAllFileByStackId({ + name: "", + stackId: this.stackId, + page: this.stackFilesPage, + size: this.stackFilesSize, + type: 0 + }) + .then((res) => { + if (res && res.success) { + if (res.data.dataList.length > 0) { + this.swipercanvasData = [] + this.swipercanvasData = res.data.dataList.map((item) => { + return { + name: item.name, + stackId: item.stack_id, + baseImg: + item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf("/") + 1)}` : item.snapshot_url, + type: item.type, + id: item.id, + loading: false + } + }) + this.swiperIndex = 0 + this.$refs.swiper.swiper.activeIndex = 0 + } else { + if (onClick) { + this.$message({ + type: "warning", + message: "宸叉棤鏇村鏁版嵁!" + }) } - }); - this.swiperIndex = 0; - this.$refs.swiper.swiper.activeIndex = 0; - - } else { - if (onClick) { - this.$message({ - type: 'warning', - message: '宸叉棤鏇村鏁版嵁!' - }); } + } else { + this.$message({ + type: "error", + message: "鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!" + }) } - } else { - // console.log(this.swipercanvasData) - this.$message({ - type: 'error', - message: '鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!' - }); - } - this.getStackFileLoading = false; - }).catch(e => { - // console.log(e); - this.getStackFileLoading = false; - }); + this.getStackFileLoading = false + }) + .catch((e) => { + this.getStackFileLoading = false + }) }, swiperSlideChange() { - this.swiperIndex = this.$refs.swiper.swiper.activeIndex; - }, - mockAsync() { - setTimeout(() => { - this.mockSceneData = [ - { scenename: "name1", id: 1, icon: ["iconrenlianjiance", "icongetijingzhi"] }, - { scenename: "name2", id: 2, icon: ["iconchouyan-copy"] }, - { - scenename: "name3", - id: 3, - icon: [ - "iconrenshukouzhao", - "iconchouyan-copy", - "iconrenlianjiance", - "icongetijingzhi" - ] - }, - { - scenename: "name4", - id: 4, - icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"] - }, - { scenename: "name5", id: 5, icon: ["icongetijingzhi"] }, - { scenename: "name6", id: 6, icon: ["iconrenshukouzhao", "icongetijingzhi"] }, - { scenename: "name7", id: 7, icon: ["iconrenlianjiance"] } - ]; - }, 3000) + this.swiperIndex = this.$refs.swiper.swiper.activeIndex }, drawBaseImg() { if (Array.isArray(this.$refs.canvas)) { if (this.$refs.canvas.length > 0) { - this.$refs.canvas[0].showModal(); + this.$refs.canvas[0].showModal() } } else { - this.$refs.canvas.showModal(); + this.$refs.canvas.showModal() } }, getCanvasData(data) { - let polyon = { ...data }; - polyon.camera_id = this.Camera.cameraId; - savePolygon(polyon).then(rsp => { - this.Camera.getPolygon(); + let polyon = { ...data } + polyon.camera_id = this.Camera.cameraId + savePolygon(polyon).then((rsp) => { + this.Camera.getPolygon() //this.Camera.getCameraTask(); - }); + }) }, refresh(url) { this.Camera.baseImg = url }, // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤 - async initCameraData(id) { - this.Camera = new VideoRuleData(); + async initCameraData(id, type) { + this.Camera = new VideoRuleData() if (id && id !== "") { - this.loading = false; - this.Camera.cameraId = id; - await this.Camera.update(); - + this.loading = false + this.Camera.cameraId = id + this.Camera.gb28181 = type === 1 + if (type === 1) { + await this.Camera.update(true) + } else { + await this.Camera.update() + } } - this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id; + this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id this.showSysInfo = true // 鍒ゆ柇姝e湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔� - this.PollData.CameraList.forEach(element => { + this.PollData.CameraList.forEach((element) => { if (element.id === this.Camera.cameraId) { - this.runType = element.run_type; + this.runType = element.run_type } }) - }, saveSceneRule(groupRule) { const payload = { ...groupRule } - payload.cameraIds = [this.Camera.cameraId]; - let _this = this; - saveCameraScene(payload).then(rsp => { + payload.cameraIds = [this.Camera.cameraId] + let _this = this + saveCameraScene(payload).then((rsp) => { if (rsp && rsp.success) { - this.Camera.update(); + this.Camera.update() this.$notify({ type: "success", message: "绛栫暐淇濆瓨鎴愬姛锛�" - }); + }) //鍒锋柊宸︿晶鏍� - _this.$root.$children[0].$children[0].querySearchAsync('camera') - + _this.$root.$children[0].$children[0].querySearchAsync("camera") } - }); + }) }, delScenRule() { - this.Camera.update(); + this.Camera.update() }, changeLoading(params) { this.loading = params - // console.log(this.loading,'changeLoading',params) }, //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊 pollEnable(row) { @@ -512,29 +484,31 @@ val = -1 } if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { - changeRunType({ camera_ids: [this.Camera.cameraId], run_type: val }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - // this.selectCamera(this.TreeDataPool.selectedNode) + changeRunType({ + camera_ids: [this.Camera.cameraId], + run_type: val + }).then((rsp) => { + this.getStatus() + if (rsp && rsp.success) { + this.$notify({ + type: "success", + message: "閰嶇疆鎴愬姛" + }) + } else { + this.$notify({ + type: "error", + message: "閰嶇疆澶辫触" + }) } - ); + this.TreeDataPool.fetchTreeData() + }) } - this.TreeDataPool.fetchTreeData(); - this.PollData.statisticTaskInfo(); + this.PollData.statisticTaskInfo() }, //瀹炴椂銆佽疆璇㈠垏鎹� changePoll(row) { //鍒ゆ柇鏄柊澧炶繕鏄洿鏂� + debugger if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { if (this.PollData.RealTimeSum < this.PollData.channelTotal) { if (row.value) { @@ -542,49 +516,53 @@ } else { this.Camera.dealWay = false } - changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then( - rsp => { + debugger + changeRunType({ + camera_ids: [this.Camera.cameraId], + run_type: this.Camera.dealWay ? 1 : 0 + }).then((rsp) => { + if (rsp && rsp.success) { + this.$notify({ + type: "success", + message: "閰嶇疆鎴愬姛" + }) + } else { + this.$notify({ + type: "error", + message: "閰嶇疆澶辫触" + }) + } + }) + } else { + if (this.Camera.dealWay) { + this.Camera.dealWay = false + debugger + changeRunType({ + camera_ids: [this.Camera.cameraId], + run_type: this.Camera.dealWay ? 1 : 0 + }).then((rsp) => { if (rsp && rsp.success) { this.$notify({ type: "success", message: "閰嶇疆鎴愬姛" - }); + }) } else { this.$notify({ type: "error", message: "閰嶇疆澶辫触" - }); + }) } - } - ); - } else { - if (this.Camera.dealWay) { - this.Camera.dealWay = false - changeRunType({ camera_ids: [this.Camera.cameraId], run_type: this.Camera.dealWay ? 1 : 0 }).then( - rsp => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛" - }); - } else { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触" - }); - } - } - ); + }) } } - this.TreeDataPool.fetchTreeData(); - this.PollData.statisticTaskInfo(); + this.TreeDataPool.fetchTreeData() + this.PollData.statisticTaskInfo() } }, //澶嶅埗 ctrlC() { - this.TreeDataPool.ctrlCameraId = this.Camera.cameraId; - this.TreeDataPool.ctrlCameraName = this.Camera.cameraName; + this.TreeDataPool.ctrlCameraId = this.Camera.cameraId + this.TreeDataPool.ctrlCameraName = this.Camera.cameraName this.$notify({ type: "success", message: "澶嶅埗绠楁硶鎴愬姛锛�" @@ -596,35 +574,35 @@ type: "warning", message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�" }) - return false; + return false } pasteRules({ sourceId: this.TreeDataPool.ctrlCameraId, targetIds: [this.Camera.cameraId] - }).then((res) => { - // console.log(res,'澶嶅埗绠楁硶') - if (res && res.success) { - this.$notify({ - type: "success", - message: "绮樿创绠楁硶鎴愬姛锛�" - }) - this.initCameraData(this.Camera.cameraId) - } else { + }) + .then((res) => { + if (res && res.success) { + this.$notify({ + type: "success", + message: "绮樿创绠楁硶鎴愬姛锛�" + }) + this.initCameraData(this.Camera.cameraId) + } else { + this.$notify({ + type: "error", + message: "绮樿创绠楁硶澶辫触锛�" + }) + } + }) + .catch((err) => { this.$notify({ type: "error", message: "绮樿创绠楁硶澶辫触锛�" }) - } - }).catch(err => { - // console.log(err,'澶嶅埗绠楁硶鎶ラ敊锛�') - this.$notify({ - type: "error", - message: "绮樿创绠楁硶澶辫触锛�" }) - }) - }, + } } -}; +} </script> <style lang="scss"> .el-message--info .el-message__content { -- Gitblit v1.8.0