围栏

monitor_ui/src/api/centerMonitor/LabelManagement/setLabel.js

@@ -113,3 +113,10 @@ export function getCameraByIdAndDeviceId(query) {
   })
 }
 
+// rtsp实时预览
+export function getRtsp(channelId) {
+  return request({
+    url: '/center-monitor/DahuaController/startVideo?channelId=' + channelId,
+    method: 'get'
+  })
+}

monitor_ui/src/views/centerMonitor/camera/index.vue

@@ -587,6 +587,41 @@
       </div>
     </el-dialog>
     <haikang-t-v-walls ref="haikangTVWalls"></haikang-t-v-walls>
+
+    <!-- 绘制围栏 -->
+    <el-dialog :title="title" :visible.sync="openDraw" width="1800px" append-to-body :close-on-click-modal="false">
+      <el-row>
+        <el-col :span="4">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              摄像头名称：<span>{{ this.infoDraw.cameraName }}</span>
+            </div>
+            通道名称：
+            <div style="margin-top: 15px"></div>
+            <div v-for="(channel, index) in this.infoDraw.channels" :key="index">
+              <el-button @click="getPresetpoints(channel)">{{ channel.channelName }}</el-button>
+              <div style="margin-top: 15px"></div>
+            </div>
+          </el-card>
+          <div style="margin-top: 15px"></div>
+          <el-card class="box-card" style="height: 500px;overflow: auto">
+            预置点：
+            <div style="margin-top: 15px"></div>
+            <div v-for="(point, index) in this.infoDraw.presetPoints" :key="index">
+              <el-button @click="getDraws(point)">{{ point.presetPointName }}</el-button>
+              <div style="margin-top: 15px"></div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="20">
+          <PolygonDrawer ref="PolygonDrawer" :url="infoDraw.url" :channelId="infoDraw.channelId" />
+        </el-col>
+      </el-row>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="openDraw = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -623,6 +658,9 @@ import DHWs from '@/daHua/lib/DHWs'
 import {
   getHaiKangVideoServer
 } from '@/api/haikang/haikang'
+import PolygonDrawer from './PolygonDrawer.vue'
+import { getPresetPoints, getRtsp } from '@/api/centerMonitor/LabelManagement/setLabel'
+
 
 /** ----------------------------------摄像头预览结束------------------------------------- */
 
@@ -641,7 +679,8 @@ export default {
     aidevicedept,
     aideviceevent,
     ISuperMap,
-    haikangTVWalls
+    haikangTVWalls,
+    PolygonDrawer
   },
   dicts: ['camera_system', 'operator_type', 'camera_factory', 'camera_type', 'camera_use', 'device_status', 'camera_offline_reason', 'convergence_platform'],
   data() {
@@ -910,7 +949,9 @@ export default {
         cameraUse: [
           { required: true, message: '摄像头用途不能为空', trigger: 'blur' }
         ]
-      }
+      },
+      openDraw: false,
+      infoDraw: {}
     }
   },
   activated: function() {
@@ -1180,7 +1221,12 @@ export default {
     },
     //绘制围栏
     drawFence(row) {
-      window.open('http://' + row.cameraIp + ':1036?username=sooka&password=Sooka6688!!')
+      // window.open('http://' + row.cameraIp + ':1036?username=sooka&password=Sooka6688!!')
+      listCamerachannel({cameraId: row.id}).then(response => {
+        this.infoDraw = {cameraName: row.cameraName, channels: response.rows, presetPoints: []};
+        this.openDraw = true
+        this.title = "绘制围栏"
+      });
     },
     /** ----------------------------------摄像头预览开始------------------------------------- */
     preview(row) {
@@ -1963,6 +2009,27 @@ export default {
           that.$modal.warn('设备状态同步失败')
         }
       })
+    },
+    getPresetpoints(channel) {
+      if (channel.channelNum) {
+        this.infoDraw.channelId = channel.channelNum
+        getPresetPoints(channel.channelNum).then(response => {
+          if (response.data.code == 1000) {
+            this.infoDraw.presetPoints = response.data.data.presetPoints
+          }
+        })
+        getRtsp(channel.channelNum).then(response => {
+          this.infoDraw.url = response.data.data.url.split("|")[1] + "?token=" + response.data.data.token
+          console.log(channel.channelNum)
+          console.log(this.infoDraw.url)
+          this.$refs.PolygonDrawer.playReal;
+        })
+      } else {
+        this.$modal.msgSuccess('请先维护通道编号')
+      }
+    },
+    getDraws(point) {
+      console.log(point)
     }
   }
 }