From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/cameraAccess/components/LinkageRule.vue | 149 +++++++++++++++++++++++++++++-------------------- 1 files changed, 88 insertions(+), 61 deletions(-) diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue index 604283f..490536a 100644 --- a/src/pages/cameraAccess/components/LinkageRule.vue +++ b/src/pages/cameraAccess/components/LinkageRule.vue @@ -1,17 +1,13 @@ <template> <div class="s-linkage-rules"> - <div class="top"> + <!-- <div class="top"> <p style="text-align:left;margin-bottom: 14px;"> - <b style="font-size: 14px;line-height: 18px;">宸查�夌畻娉�</b> + <b style="font-size: 14px;line-height: 18px;">鍦烘櫙</b> </p> - - <div class="clearfix"> + <div class="clearfix" style="min-width:1570px;"> <div class="slide-scene"> - <span class="task-tip" v-if="tableRuleList.length == 0 ">鏆傛棤绠楁硶锛岃鍦ㄧ嫭绔嬭鍒欎腑閫夋嫨绠楁硶</span> <slide-scene :sceneData="tableRuleList"></slide-scene> </div> - <!-- <slide-scene :sceneData="Camera.rules"></slide-scene> --> - <!-- 绯荤粺淇℃伅 --> <div class="top-right"> <sysinfo v-if="showSysInfo" @@ -21,8 +17,29 @@ /> </div> </div> + </div>--> + <div class="top"> + <p class="task-css"> + <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b> + </p> + <div class="clearfix"> + <slide-scene :sceneData="tableRuleList"></slide-scene> + <div class="top-right"> + <sysinfo + v-if="showSysInfo" + style="margin-top: -10px;" + :ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'" + :showRealPoll="this.TreeDataPool.treeActiveName == 'camera'" + /> + <!-- <sysinfo + :showRealPoll="cameraType === 'camera'" + :ShowLocalVedio="cameraType === 'dataStack'" + v-if="showSysInfo" + style="margin-top:-10px" + />--> + </div> + </div> </div> - <div class="bottom"> <div class="devide"></div> <div class="bottom-right"> @@ -57,6 +74,7 @@ :currentCameraId="data.cameraId" @changeLoading="changeLoading" @fromCanvas="getCanvasData" + @refresh="refresh" ></polygon-canvas> </swiper-slide> </swiper> @@ -91,6 +109,7 @@ :tableRuleList="tableRuleList" :onSaveScene="saveSceneRule" @delete-rule="showRules" + v-loading="loadingRuleList" ></scene-rule> </div> </div> @@ -121,26 +140,13 @@ }, computed: { selectedCameraIds() { - let ids = []; - if (this.TreeDataPool.treeActiveName == 'dataStack') { - if (this.TreeDataPool.checkedLocalVedio.length > 0) { - ids = this.TreeDataPool.checkedLocalVedio.map(i => { - return i.id; - }) - - } - } else { - if (this.TreeDataPool.selectedNodes.length > 0) { - ids = this.TreeDataPool.selectedNodes; - } - } - - return ids; + return this.TreeDataPool.selectedNodes; } }, data() { return { loading: false, + loadingRuleList: false, Carmeras: [], Camera: new VideoRuleData(), tasksTable: {}, @@ -171,7 +177,8 @@ prevEl: ".pre-border" } }, - showSysInfo: false + showSysInfo: false, + requestSeq: "" }; }, watch: { @@ -190,17 +197,12 @@ initCameraData() { this.$nextTick(() => { this.Carmeras = []; - this.loading = false; - this.showSysInfo = true - if (this.TreeDataPool.treeActiveName == 'dataStack') { - this.TreeDataPool.checkedLocalVedio.forEach(camera => { - this.Carmeras.push(new VideoRuleData(camera.id)); - }); - } else { - this.TreeDataPool.selectedNodes.forEach(camera => { - this.Carmeras.push(new VideoRuleData(camera)); - }); - } + this.showSysInfo = true; + + this.selectedCameraIds.forEach(cid => { + this.Carmeras.push(new VideoRuleData(cid)); + }); + this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id; this.showRules(); }) @@ -219,14 +221,36 @@ } this.swipercanvasData = swipers; }, + refresh(url, id) { + this.swipercanvasData.forEach(data => { + if (data.cameraId == id) { + data.baseImg = url; + } + }) + //this.Camera.baseImg = url + }, getCanvasData() { }, + newUid() { + + let originStr = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"; + let originChar = "0123456789abcdef"; + let len = originChar.length; + return originStr.replace(/x/g, function (match) { + return originChar.charAt(Math.floor(Math.random() * len)); + }); + }, showRules() { this.tableRuleList = []; if (this.selectedCameraIds.length > 0) { + this.loadingRuleList = true; + let seq = this.newUid(); + this.requestSeq = seq; + getLinkSceneRule({ cameraIds: this.selectedCameraIds }).then( rsp => { - if (rsp && rsp.success) { + this.loadingRuleList = false; + if (rsp && rsp.success && seq === this.requestSeq) { this.tableRuleList = rsp.data; @@ -237,19 +261,30 @@ } // this.TreeDataPool.fetchTreeData(); } - ); + ).catch(() => { + this.loadingRuleList = false; + }); } - }, saveSceneRule(groupRule) { const payload = { ...groupRule } + if (!payload.rules) { + this.$message({ + type: "warning", + message: "瑙勫垯鍙傛暟鏈夎" + }); + + return + } + payload.cameraIds = this.selectedCameraIds; saveLinkScene(payload).then(rsp => { if (rsp && rsp.success) { //this.Camera.update(); this.initCameraData(); + // this.showRules(); this.$notify({ type: "success", message: "浠诲姟淇濆瓨鎴愬姛锛�" @@ -263,7 +298,7 @@ }).catch(err => { this.$message({ type: "error", - message: "淇濆瓨澶辫触锛�" + err.data + message: "淇濆瓨澶辫触锛�" }); }); }, @@ -277,30 +312,27 @@ .s-linkage-rules { width: 100%; //height: 100%; - padding: 13px 0 20px; + //padding: 13px 0 20px; position: relative; - .devide{ + .devide { height: 10px; - background: #E9EBF2; + background: #e9ebf2; } .top { width: 100%; padding: 10px 20px; box-sizing: border-box; - top: 0; .swiper-box { height: 100%; float: left; - width: 48%; + width: 46%; margin-top: -10px; position: relative; } .swiper-container { position: initial; min-width: 472px; - width: 80%; - - // height: 124px; + width: 86%; } .swiper-slide { position: relative; @@ -339,10 +371,6 @@ backdrop-filter: blur(1px) brightness(100%); display: none; } - - // @media screen and(max-width: 1280px) { - // max-width: 110px; - // } @media screen and(max-width: 1440px) { max-width: 110px; } @@ -386,8 +414,14 @@ float: right; width: 54%; height: 144px; - .card-box{ - width: 54%!important; + .card-box { + width: 54% !important; + } + .eCharts-box { + width: 45%; + canvas { + width: 98% !important; + } } } .task-css { @@ -398,7 +432,7 @@ .bottom { width: 100%; - + margin-bottom: 20px; .bottom-side { height: 100%; width: 250px; @@ -551,13 +585,6 @@ } .add-btn:hover { color: #2249b4; - } - .task-tip { - font-family: PingFangSC-Regular; - font-size: 12px; - color: #cccccc; - margin-top: 10%; - margin-left: 38%; } } </style> -- Gitblit v1.8.0