From c99cad106ef5be9f818e45d385dfdcec29ce19e5 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 03 十二月 2020 16:52:24 +0800
Subject: [PATCH] 修复绘制多边形撤销错误的bug
---
src/pages/cameraAccess/components/LinkageRule.vue | 106 +++++++++++++++++++++++++++++++---------------------
1 files changed, 63 insertions(+), 43 deletions(-)
diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue
index f34535c..57a7fa9 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>
@@ -108,7 +124,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";
@@ -192,7 +209,7 @@
this.$nextTick(() => {
this.Carmeras = [];
this.loading = false;
- this.showSysInfo = true
+ this.showSysInfo = true;
if (this.TreeDataPool.treeActiveName == 'dataStack') {
this.TreeDataPool.checkedLocalVedio.forEach(camera => {
this.Carmeras.push(new VideoRuleData(camera.id));
@@ -219,6 +236,14 @@
});
}
this.swipercanvasData = swipers;
+ },
+ refresh(url,id) {
+ this.swipercanvasData.forEach(data=>{
+ if(data.cameraId == id){
+ data.baseImg = url;
+ }
+ })
+ //this.Camera.baseImg = url
},
getCanvasData() { },
showRules() {
@@ -277,26 +302,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 +362,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 +403,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 +423,7 @@
.bottom {
width: 100%;
- height: calc(100% - 190px);
- position: absolute;
- top: 190px;
+ margin-bottom: 20px;
.bottom-side {
height: 100%;
width: 250px;
@@ -419,14 +449,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 {
@@ -551,13 +577,7 @@
.add-btn:hover {
color: #2249b4;
}
- .task-tip {
- font-family: PingFangSC-Regular;
- font-size: 12px;
- color: #cccccc;
- margin-top: 10%;
- margin-left: 38%;
- }
+
}
</style>
<style lang="scss" scoped>
--
Gitblit v1.8.0