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 | 174 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 101 insertions(+), 73 deletions(-)
diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue
index f34535c..490536a 100644
--- a/src/pages/cameraAccess/components/LinkageRule.vue
+++ b/src/pages/cameraAccess/components/LinkageRule.vue
@@ -1,32 +1,47 @@
<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>
+ <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"
- style="margin-left: 25px;margin-top: -10px;"
+ style="margin-top: -10px;"
:ShowLocalVedio="this.TreeDataPool.treeActiveName !== 'camera'"
:showRealPoll="this.TreeDataPool.treeActiveName == 'camera'"
/>
</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
- style="width: calc(100% + 80px);height: 10px;background-color: #E9EBF2;p;position:relative;left:-50px"
- ></div>
+ <div class="devide"></div>
<div class="bottom-right">
<div class="draw-and-time-box">
<div class="draw-box">
@@ -59,6 +74,7 @@
:currentCameraId="data.cameraId"
@changeLoading="changeLoading"
@fromCanvas="getCanvasData"
+ @refresh="refresh"
></polygon-canvas>
</swiper-slide>
</swiper>
@@ -93,6 +109,7 @@
:tableRuleList="tableRuleList"
:onSaveScene="saveSceneRule"
@delete-rule="showRules"
+ v-loading="loadingRuleList"
></scene-rule>
</div>
</div>
@@ -108,7 +125,8 @@
import VideoRuleData from "@/Pool/VideoRuleData";
import polygonCanvas from "@/components/canvas";
import TimeSlider from "./TimeSlider";
-import Sysinfo from "./SystemInfo"
+//import Sysinfo from "./SystemInfo"
+import Sysinfo from "@/components/subComponents/SystemInfo";
import SceneRule from "./SceneRule";
import SlideScene from "./scene/SlideScene";
@@ -122,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: {},
@@ -172,7 +177,8 @@
prevEl: ".pre-border"
}
},
- showSysInfo: false
+ showSysInfo: false,
+ requestSeq: ""
};
},
watch: {
@@ -191,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();
})
@@ -220,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;
@@ -238,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: "浠诲姟淇濆瓨鎴愬姛锛�"
@@ -264,7 +298,7 @@
}).catch(err => {
this.$message({
type: "error",
- message: "淇濆瓨澶辫触锛�" + err.data
+ message: "淇濆瓨澶辫触锛�"
});
});
},
@@ -277,26 +311,28 @@
<style lang="scss">
.s-linkage-rules {
width: 100%;
- height: 100%;
+ //height: 100%;
+ //padding: 13px 0 20px;
position: relative;
+ .devide {
+ height: 10px;
+ background: #e9ebf2;
+ }
.top {
width: 100%;
- height: 174px;
- position: relative;
- top: 0;
+ padding: 10px 20px;
+ box-sizing: border-box;
.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;
@@ -335,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;
}
@@ -380,8 +412,17 @@
}
.top-right {
float: right;
- width: 52%;
+ width: 54%;
height: 144px;
+ .card-box {
+ width: 54% !important;
+ }
+ .eCharts-box {
+ width: 45%;
+ canvas {
+ width: 98% !important;
+ }
+ }
}
.task-css {
text-align: left;
@@ -391,9 +432,7 @@
.bottom {
width: 100%;
- height: calc(100% - 190px);
- position: absolute;
- top: 190px;
+ margin-bottom: 20px;
.bottom-side {
height: 100%;
width: 250px;
@@ -419,14 +458,10 @@
}
}
.bottom-right {
- width: calc(100% + 30px);
- height: 100%;
- float: left;
- overflow: auto;
- padding: 10px 0px;
+ padding: 10px 20px 20px;
box-sizing: border-box;
.draw-and-time-box {
- height: 430px;
+ height: 410px;
width: 100%;
.draw-box,
.time-box {
@@ -550,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