From 35bc7a5d2c907d2d7ca35f518dd1f96b434068b3 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期二, 08 九月 2020 09:46:33 +0800
Subject: [PATCH] 算力信息展示字段调整,实时监控动态显示区域

---
 src/pages/cameraAccess/components/scene/Editor.vue |    2 -
 src/Pool/TreeData.ts                               |    1 
 src/pages/cameraAccess/components/CameraInfo.vue   |    3 +
 src/components/player/index.vue                    |   80 ++++++++++++++++++++++++++++++++++------
 src/pages/analysisPower/index/App.vue              |    3 +
 src/pages/search/index/App.vue                     |    1 
 6 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/src/Pool/TreeData.ts b/src/Pool/TreeData.ts
index d23f400..a835411 100644
--- a/src/Pool/TreeData.ts
+++ b/src/Pool/TreeData.ts
@@ -96,7 +96,6 @@
   }
 
   setVideoArr(index: number, value: object, vue: any): void {
-    debugger
     vue.$set(this.videoArr, index, value);
     this.activeForceChoose = false;
   }
diff --git a/src/components/player/index.vue b/src/components/player/index.vue
index 8a13ecd..1e5fa58 100644
--- a/src/components/player/index.vue
+++ b/src/components/player/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="video-player">
-    <canvas id="area-canvas" ></canvas>
+    <canvas id="area-canvas" ref="areaCanvas" ></canvas>
     <video ref="videoPlayer" :poster="poster" preload="auto" muted></video>
     <div class="controls">
       <!-- 鍏ㄥ睆 -->
@@ -13,6 +13,7 @@
 import VideoRuleData from "@/Pool/VideoRuleData";
 import TreeDataPool from "@/Pool/TreeData";
 import { getAllPolygon } from "@/api/polygon";
+import polygonCanvas from "@/components/canvas";
 export default {
   name: "CameraPlayer",
   props: {
@@ -42,7 +43,9 @@
       default: false
     }
   },
+ 
   computed: {
+
     poster() {
       return "/images/player/player_poster.gif?t=" + Math.random()
     }
@@ -52,23 +55,35 @@
       wfs: {},
       wfsId: 0,
       Camera: new VideoRuleData(),
+      showCanvas: true,
       canvasData: {
         line: [],
         rect: [], // {id:'uuid', name: '鐭╁舰1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }
         arrow: [],
         polygon: []
       },
-      showProportion: 1.71,
+      showProportion: 3.65,
       canvas: null,
       ctx: null
     };
   },
   watch: {
-    "TreeDataPool.selectedNode": function(node){
-      debugger;
-      this.initCanvas(node);
-      
-    },
+    // "TreeDataPool.selectedNode": async function(node){
+    //   if(node){
+    //     console.log('TreeDataPool.selectedNode')
+    //     console.log(node)
+    //     //this.Camera.cameraId = node.id;
+    //     const res = await getAllPolygon({cameraId: node.id});
+
+    //     this.canvasData.line = res.data.line;
+    //     this.canvasData.rect = res.data.rect;
+    //     this.canvasData.arrow = res.data.arrow;
+    //     this.canvasData.polygon = res.data.polygon;
+    //     console.log(this.canvasData)
+    //     this.clickSelect(this.canvasData);
+    //   }
+    // },
+ 
     rtspUrl: function (newVal, oldVal) {
       if (newVal !== oldVal) {
         if (this.wfs.config) {
@@ -325,13 +340,21 @@
       this.ctx.textAlign = "left"; // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
       this.ctx.fillText(remarks, x, y - 10); // 濉厖鏂囧瓧
     },
-    
+    getCanvasData(data) {
+      let polyon = { ...data };
+      polyon.camera_id = this.Camera.cameraId;
+      savePolygon(polyon).then(rsp => {
+        this.Camera.getPolygon();
+        this.Camera.getCameraTask();
+      });
+    },
     async initCanvas(id){
       
-      this.canvas = document.querySelector("#area-canvas");
+      //this.canvas = document.querySelector("#area-canvas");
+      this.canvas = this.$refs.areaCanvas;
       this.ctx = this.canvas.getContext("2d");
 
-      // this.Camera.getPolygon();
+      // this.Camera.getPolygon();x:758,y:280
       // console.log(this.Camera.canvasData);
       const rsp = await getAllPolygon({ cameraId: id });
       debugger
@@ -339,18 +362,41 @@
         this.canvasData = {
           line: rsp.data.line,
           arrow: rsp.data.arrow,
-          polygon: rsp.data.polygon,
+          polygon: [{id:'uuid', name: '澶氳竟褰�1', location: [{ x: 735, y: 155 }, { x: 830, y: 156 }, { x: 809, y: 351 }, { x: 809, y: 364 }, { x: 753, y: 396 }, { x: 755, y: 520 },{ x: 706, y: 524 },{ x: 722, y: 392 },{x:758,y:280},{ x: 735, y: 155 }] }],
           //rect: rsp.data.rect
           rect: [{id:'uuid', name: '鐭╁舰1', location: [{ x: 20, y: 30 }, { x: 20, y: 60 }, { x: 100, y: 60 }, { x: 100, y: 30 }] }]
         };
       }
       debugger
       this.clickSelect(this.canvasData);
+    },
+    async initArea(){
+      console.log('init')
+      const res = await getAllPolygon({cameraId: this.TreeDataPool.selectedNode.id});
+      this.canvasData.line = res.data.line;
+      this.canvasData.rect = res.data.rect;
+      this.canvasData.arrow = res.data.arrow;
+      this.canvasData.polygon = res.data.polygon;
+      console.log(this.canvasData)
+      // this.canvasData = {
+      //     line: [],
+      //     arrow: [],
+      //     polygon: [{id:'uuid', name: '澶氳竟褰�1', location: [{ x: 735, y: 155 }, { x: 830, y: 156 }, { x: 809, y: 351 }, { x: 809, y: 364 }, { x: 753, y: 396 }, { x: 755, y: 520 },{ x: 706, y: 524 },{ x: 722, y: 392 },{x:758,y:280},{ x: 735, y: 155 }] }],
+      //     //rect: rsp.data.rect
+      //     rect: []
+      //   };
+      this.clickSelect(this.canvasData);
     }
   },
   mounted() {
     this.clickStart();
-
+    this.$nextTick(()=>{
+      this.canvas = this.$refs.areaCanvas;
+      this.ctx = this.canvas.getContext("2d");
+      this.ctx.lineWidth = '1'
+      this.initArea()
+     
+    })
   },
   beforeDestroy() {
     this.wfs.destroy();
@@ -368,6 +414,16 @@
   top: 0;
   left: 0;
 }
+// .cavas{
+//   width: 100%;
+//   height: 100%;
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   canvas{
+//     background: transparent!important;
+//   }
+// }
 video {
   object-fit: fill;
   width: 100%;
diff --git a/src/pages/analysisPower/index/App.vue b/src/pages/analysisPower/index/App.vue
index 9aef803..283f740 100644
--- a/src/pages/analysisPower/index/App.vue
+++ b/src/pages/analysisPower/index/App.vue
@@ -267,7 +267,8 @@
     initFormData() {
       this.formData = {
         totalChanle: this.PollData.channelTotal,
-        realTime: this.PollData.RealTimeSum,
+        //realTime: this.PollData.RealTimeSum,
+        realTime: this.PollData.RealTimeValidCount,
         pollEnable: this.PollData.Enabled,
         pollPeriod: this.PollData.Config.poll_period,
         polling: this.PollData.PollChannelTotal,
diff --git a/src/pages/cameraAccess/components/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue
index 24b9f41..660f2cd 100644
--- a/src/pages/cameraAccess/components/CameraInfo.vue
+++ b/src/pages/cameraAccess/components/CameraInfo.vue
@@ -146,7 +146,8 @@
                 <li style="width:100%">
                   <info-card
                     style="width:100%;min-width: 440px"
-                    :realtime="PollData.RealTimeSum"
+                   
+                    :realtime="PollData.RealTimeValidCount"
                     :polling="PollData.PollValidCount"
                     :dataStack="PollData.stackChannelCount"
                   ></info-card>
diff --git a/src/pages/cameraAccess/components/scene/Editor.vue b/src/pages/cameraAccess/components/scene/Editor.vue
index bc9295c..189afe5 100644
--- a/src/pages/cameraAccess/components/scene/Editor.vue
+++ b/src/pages/cameraAccess/components/scene/Editor.vue
@@ -352,7 +352,6 @@
   watch: {
     Cameras: {
       handler(n, o) {
-        debugger
         let polygon = []
         let cameras = [...n]
 
@@ -372,7 +371,6 @@
 
           this.allPolygonData = polygon
           //娣诲姞鍦烘櫙鍒濆鍖栧尯鍩熼�夐」涓�'鍏ㄩ儴鍖哄煙'
-          debugger
           // if (polygon.length > 0 && this.ruleList == '') {
           //   this.polygonObj = polygon[0]
           //   this.sdkGroup[0].polygonObj = JSON.parse(
diff --git a/src/pages/search/index/App.vue b/src/pages/search/index/App.vue
index 4e50107..238f4fd 100644
--- a/src/pages/search/index/App.vue
+++ b/src/pages/search/index/App.vue
@@ -85,6 +85,7 @@
   bottom: 0;
   left: 0;
   padding: 16px;
+  padding-top: 8px;
   overflow-x: hidden;
 }
 .resize-bar {

--
Gitblit v1.8.0