From a3f357e8a60443b74b64c7479113c68eb35ce1f5 Mon Sep 17 00:00:00 2001 From: ZZJ <10913410+zzj2100@user.noreply.gitee.com> Date: 星期五, 15 七月 2022 19:44:57 +0800 Subject: [PATCH] 控制轮询 --- src/pages/cameraAccess/components/SeparateRules.vue | 503 +++++++++++++++++++++++++++++-------------------------- 1 files changed, 268 insertions(+), 235 deletions(-) diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue index 6171c5a..fe51cc4 100644 --- a/src/pages/cameraAccess/components/SeparateRules.vue +++ b/src/pages/cameraAccess/components/SeparateRules.vue @@ -2,12 +2,12 @@ <div class="s-separate-rules"> <div class="ai"> <div class="check-area"> - <div class="ai-select"> + <div class="ai-select" v-if="TreeDataPool.selectedNode.type !== 'MENU'"> <div v-show="cameraType === 'camera'"> <span> <span class="label">瑙嗛鍒嗘瀽澶勭悊</span> <el-switch - style="margin-left: 10px;" + style="margin-left: 10px" v-model="Camera.analytics" @change="pollEnable" :disabled="!Camera.cameraId" @@ -15,26 +15,50 @@ </span> </div> - <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'"> + <div + v-if="Camera.analytics && isShowPolling === 'show'" + class="flex-box" + v-show="cameraType === 'camera'" + > <span class="label">澶勭悊鏂瑰紡</span> <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> + <div + v-if="Camera.analytics" + class="flex-box" + v-show="cameraType === 'camera'" + > + <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"> @@ -47,19 +71,27 @@ 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 +106,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 +115,7 @@ :showRealPoll="cameraType === 'camera'" :ShowLocalVedio="cameraType === 'dataStack'" v-if="showSysInfo" - style="margin-top:-10px" + style="margin-top: -10px" /> </div> </div> @@ -99,15 +131,17 @@ <span class="el-dropdown-link" @click="drawBaseImg" - style="position: relative;top: 5px; cursor:pointer" + style="position: relative; top: 5px; cursor: pointer" > - <i class="iconfont iconbianji1" style="font-size: 28px; "></i> + <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 +160,32 @@ :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"> + <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> + style="font-size: 14px; margin-top: -10px" + >{{ data.name }}</b + > <polygon-canvas class="cavas" ref="canvas" @@ -172,7 +211,7 @@ </swiper> <div class="swiper-local-prev" - v-show="swipercanvasData.length>1" + v-show="swipercanvasData.length > 1" @click="prevClick" > <div class="icon-btn" slot="button-prev"> @@ -181,7 +220,7 @@ </div> <div class="swiper-local-next" - v-show="swipercanvasData.length>1" + v-show="swipercanvasData.length > 1" @click="nextClick" > <div class="icon-btn" slot="button-next"> @@ -192,12 +231,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,17 +260,11 @@ </template> <script> -//import { timeSilderData } from "@/mockData/timeSilder"; import { savePolygon } from "@/api/polygon"; -import { - pasteRules -} from '@/api/task'; - -import { - saveCameraScene, - getCameraSceneRule, -} from '@/api/scene' +import { pasteRules } from "@/api/task"; +import { getCameraInfo } from "@/api/camera"; +import { saveCameraScene } from "@/api/scene"; import { changeRunType } from "@/api/pollConfig"; import { findAllFileByStackId } from "@/api/localVedio"; @@ -235,12 +272,9 @@ 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'; - export default { components: { @@ -248,22 +282,25 @@ polygonCanvas, Sysinfo, SceneRule, - SlideScene + SlideScene, }, directives: { focus: { inserted: function (el) { - el.querySelector('input').focus() - } - } + el.querySelector("input").focus(); + }, + }, }, computed: { cameraType() { - return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack" - } + return this.TreeDataPool.treeActiveName === "camera" + ? "camera" + : "dataStack"; + }, }, data() { return { + isShowPolling: sessionStorage.getItem("isShowPolling"), mockSceneData: [], loading: false, Camera: new VideoRuleData(), @@ -273,36 +310,21 @@ grabCursor: true, pagination: { el: ".swiper-pagination", - type: "fraction" + type: "fraction", }, navigation: { nextEl: ".swiper-local-next", - prevEl: ".swiper-local-prev" - } - }, - swiperOption: { - slidesPerView: 5, - spaceBetween: 8, - pagination: { - el: ".swiper-pagination", - clickable: true + prevEl: ".swiper-local-prev", }, - 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, @@ -310,12 +332,10 @@ }; }, mounted() { - this.mockAsync(); this.PollData.statistics(); - }, watch: { - 'Camera.cameraId': { + "Camera.cameraId": { handler(n, o) { if (n) { if (this.TreeDataPool.treeActiveName == "dataStack") { @@ -323,38 +343,53 @@ this.stackFilesSize = 5; this.stackId = n; if (this.stackId) { - // console.log('getStackFiles') this.swipercanvasData = []; - this.getStackFiles() + this.getStackFiles(); } } } - } - } + }, + }, }, 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); } else { this.$message({ - type: 'info', - message: '褰撳墠宸叉槸绗竴椤�' + type: "info", + message: "褰撳墠宸叉槸绗竴椤�", }); } - } }, nextClick() { if (this.swiperIndex == this.swipercanvasData.length - 1) { - // console.log('鏈�鍚庝竴寮�,鍔犺浇鏇村') - //璇锋眰涓嬩竴椤� this.stackFilesPage++; this.getStackFiles(true); } @@ -362,74 +397,65 @@ 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.swiperIndex = 0; - this.$refs.swiper.swiper.activeIndex = 0; - - } else { - if (onClick) { - this.$message({ - type: 'warning', - message: '宸叉棤鏇村鏁版嵁!' + 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: "宸叉棤鏇村鏁版嵁!", + }); + } } + } 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) - }, drawBaseImg() { + if (!this.Camera.cameraId) { + this.$notify({ + type: "warning", + message: "璇峰厛閫夋嫨鎽勫儚鏈�", + }); + return; + } if (Array.isArray(this.$refs.canvas)) { if (this.$refs.canvas.length > 0) { this.$refs.canvas[0].showModal(); @@ -441,51 +467,53 @@ getCanvasData(data) { let polyon = { ...data }; polyon.camera_id = this.Camera.cameraId; - savePolygon(polyon).then(rsp => { + savePolygon(polyon).then((rsp) => { this.Camera.getPolygon(); //this.Camera.getCameraTask(); }); }, refresh(url) { - this.Camera.baseImg = url + this.Camera.baseImg = url; }, // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤 - async initCameraData(id) { + async initCameraData(id, type) { this.Camera = new VideoRuleData(); if (id && id !== "") { this.loading = false; this.Camera.cameraId = id; - await this.Camera.update(); - + 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.showSysInfo = true + 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; } - }) - + }); }, saveSceneRule(groupRule) { - const payload = { ...groupRule } + const payload = { ...groupRule }; payload.cameraIds = [this.Camera.cameraId]; let _this = this; - saveCameraScene(payload).then(rsp => { + saveCameraScene(payload).then((rsp) => { if (rsp && rsp.success) { this.Camera.update(); this.$notify({ type: "success", - message: "绛栫暐淇濆瓨鎴愬姛锛�" + message: "绛栫暐淇濆瓨鎴愬姛锛�", }); //鍒锋柊宸︿晶鏍� - _this.$root.$children[0].$children[0].querySearchAsync('camera') - + _this.$root.$children[0].$children[0].querySearchAsync("camera"); } }); }, @@ -493,88 +521,93 @@ this.Camera.update(); }, changeLoading(params) { - this.loading = params - // console.log(this.loading,'changeLoading',params) + this.loading = params; }, //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊 pollEnable(row) { - let val = 0 + let val = 0; if (row) { if (this.PollData.RealTimeSum < this.PollData.channelTotal) { - this.Camera.dealWay = true - val = 1 + this.Camera.dealWay = true; + val = 1; } else { - this.Camera.dealWay = false - val = 0 + this.Camera.dealWay = false; + val = 0; } } else { - this.Camera.dealWay = false - val = -1 + this.Camera.dealWay = false; + 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(); }, //瀹炴椂銆佽疆璇㈠垏鎹� changePoll(row) { //鍒ゆ柇鏄柊澧炶繕鏄洿鏂� + debugger; if (this.Camera.cameraId && this.Camera.cameraId !== undefined) { if (this.PollData.RealTimeSum < this.PollData.channelTotal) { if (row.value) { - this.Camera.dealWay = true + this.Camera.dealWay = true; } else { - this.Camera.dealWay = false + 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: "閰嶇疆鎴愬姛" + message: "閰嶇疆鎴愬姛", }); } else { this.$notify({ type: "error", - message: "閰嶇疆澶辫触" + 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(); @@ -587,43 +620,43 @@ this.TreeDataPool.ctrlCameraName = this.Camera.cameraName; this.$notify({ type: "success", - message: "澶嶅埗绠楁硶鎴愬姛锛�" - }) + message: "澶嶅埗绠楁硶鎴愬姛锛�", + }); }, ctrlV() { if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) { this.$notify({ type: "warning", - message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�" - }) + message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�", + }); 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 { + targetIds: [this.Camera.cameraId], + }) + .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: "绮樿创绠楁硶澶辫触锛�" - }) - }) + message: "绮樿创绠楁硶澶辫触锛�", + }); + }); }, - } + }, }; </script> <style lang="scss"> -- Gitblit v1.8.0