From c208b104011e0bbdc824960ed025b597d081c78f Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期六, 18 六月 2022 01:56:31 +0800
Subject: [PATCH] 摄像机配置: 修复国标刷底图api

---
 src/api/camera.ts                                   |   90 ++--
 src/Pool/VideoRuleData.ts                           |  162 ++++----
 src/components/canvas/index.vue                     |  392 ++++++++++-----------
 src/pages/cameraAccess/components/SeparateRules.vue |  405 ++++++++-------------
 4 files changed, 467 insertions(+), 582 deletions(-)

diff --git a/src/Pool/VideoRuleData.ts b/src/Pool/VideoRuleData.ts
index 22dface..534be1d 100644
--- a/src/Pool/VideoRuleData.ts
+++ b/src/Pool/VideoRuleData.ts
@@ -1,164 +1,160 @@
-import { getCameraInfo,getGB28181CameraInfo } from "@/api/camera";
-import { getAllPolygon } from "@/api/polygon";
-import { getDirDetails, findAllFileByStackId } from "@/api/localVedio";
-import { getCameraSceneRule } from '@/api/scene'
+import { getCameraInfo, getGB28181CameraInfo } from "@/api/camera"
+import { getAllPolygon } from "@/api/polygon"
+import { getDirDetails, findAllFileByStackId } from "@/api/localVedio"
+import { getCameraSceneRule } from "@/api/scene"
 
 export default class VideoRuleData {
-  public selectTask: Array<object>;
-  public rules: Array<object>;
-  public polygonData: Array<object>;
-  public cameraId: string = "";
-  public canvasData: object;
-  public baseImg: string;
-  public cameraName: string;
-  public camearInfo: object;
+  public selectTask: Array<object>
+  public rules: Array<object>
+  public polygonData: Array<object>
+  public cameraId: string = ""
+  public canvasData: object
+  public baseImg: string
+  public cameraName: string
+  public camearInfo: object
 
-  public loading: boolean;
+  public loading: boolean
 
-  public analytics: boolean;
-  public dealWay: boolean;
-  public runServerName: string;
+  public analytics: boolean
+  public dealWay: boolean
+  public runServerName: string
 
-  public resolutionOption: Array<any>;
-  public selectResolution: string;
-  public hasCtrlC: boolean;
+  public resolutionOption: Array<any>
+  public selectResolution: string
+  public hasCtrlC: boolean
+  public gb28181: boolean
 
-  constructor(id: string,isGB:boolean) {
-    this.loading = false;
-    this.baseImg = "";
-    this.cameraId = id ? id : "";
-    this.cameraName = "";
-    this.selectTask = [];
-    this.polygonData = [];
+  constructor(id: string, isGB: boolean) {
+    this.loading = false
+    this.baseImg = ""
+    this.cameraId = id ? id : ""
+    this.cameraName = ""
+    this.selectTask = []
+    this.polygonData = []
     this.canvasData = {
       line: [],
       arrow: [],
       polygon: [],
       rect: []
-    };
+    }
 
-    this.camearInfo = {};
-    this.analytics = false;
-    this.dealWay = false;
-    this.runServerName = "";
-    this.rules = [];
+    this.camearInfo = {}
+    this.analytics = false
+    this.dealWay = false
+    this.runServerName = ""
+    this.rules = []
 
     if (id && id !== "") {
-      this.update(isGB);
+      this.update(isGB)
     }
 
     this.resolutionOption = [
       {
-        value: '1001',
-        label: '1280*720'
+        value: "1001",
+        label: "1280*720"
       },
       {
-        value: '1002',
-        label: '1920*1080'
+        value: "1002",
+        label: "1920*1080"
       },
       {
-        value: '1003',
-        label: '2560*1440'
+        value: "1003",
+        label: "2560*1440"
       }
     ]
-    this.selectResolution = '1002'
+    this.selectResolution = "1002"
     this.hasCtrlC = false
+    this.gb28181 = isGB ? isGB : false
   }
 
   public async update(isGB) {
-    await this.getInfo(isGB);
-    await this.getSceneRule();
-    await this.getPolygon();
+    await this.getInfo(isGB)
+    await this.getSceneRule()
+    await this.getPolygon()
   }
 
   public async getInfo(isGB) {
     // 鍒ゆ柇閫変腑鐨勬槸鎽勫儚鏈鸿繕鏄暟鎹爤
     if (this.cameraId.indexOf("stack") === -1) {
-
       //澶勭悊鍥芥爣鎽勫儚鏈�
-      if(isGB) {
+      if (isGB) {
         try {
-        const rsp: any = await getGB28181CameraInfo(this.cameraId);
-        if (rsp.success) {
-          this.cameraName = rsp.data.name ? rsp.data.name : "";
-        }
-      } catch {
-        this.cameraName = "";
-      }
-      }
-
-      else {
-        try {
-        const rsp: any = await getCameraInfo(this.cameraId);
-        if (rsp.success) {
-          this.cameraName = rsp.data.name ? rsp.data.name : "";
-        }
+          const rsp: any = await getGB28181CameraInfo(this.cameraId)
+          if (rsp.success) {
+            this.cameraName = rsp.data.name ? rsp.data.name : ""
+          }
         } catch {
-          this.cameraName = "";
+          this.cameraName = ""
+        }
+      } else {
+        try {
+          const rsp: any = await getCameraInfo(this.cameraId)
+          if (rsp.success) {
+            this.cameraName = rsp.data.name ? rsp.data.name : ""
+          }
+        } catch {
+          this.cameraName = ""
         }
       }
-
-     
     } else {
-      const rsp: any = await findAllFileByStackId({ stackId: this.cameraId });
+      const rsp: any = await findAllFileByStackId({ stackId: this.cameraId })
       if (rsp.success && rsp.data.dataList.length) {
-        let snapshots = rsp.data.dataList.map(obj => {
-          return obj.snapshot_url;
+        let snapshots = rsp.data.dataList.map((obj) => {
+          return obj.snapshot_url
         })
 
-        this.baseImg = snapshots[0];
+        this.baseImg = snapshots[0]
         // console.log(snapshots)
       }
     }
-
   }
 
   public async getPolygon() {
-    this.polygonData = [];
+    this.polygonData = []
 
-    const rsp: any = await getAllPolygon({ cameraId: this.cameraId });
+    const rsp: any = await getAllPolygon({ cameraId: this.cameraId })
     if (rsp && rsp.success) {
       this.canvasData = {
         line: rsp.data.line,
         arrow: rsp.data.arrow,
         polygon: rsp.data.polygon,
         rect: rsp.data.rect
-      };
+      }
 
       // 鍙鎽勫儚鏈烘暟鎹簳鍥捐繘琛屽鐞�
       if (this.cameraId.indexOf("stack") < 0) {
-        this.baseImg = rsp.data.snapshot_url ? rsp.data.snapshot_url : "";
+        this.baseImg = rsp.data.snapshot_url ? rsp.data.snapshot_url : ""
         if (!this.baseImg) {
-          this.loading = true;
+          this.loading = true
         } else {
-          this.loading = false;
+          this.loading = false
         }
       }
 
-      const newObj = item => {
+      const newObj = (item) => {
         return {
           id: item.id,
           name: item.name,
           defence_state: item.defence_state
-        };
-      };
+        }
+      }
 
-      let line = rsp.data.line.map(newObj);
-      let polygon = rsp.data.polygon.map(newObj);
-      let rect = rsp.data.rect.map(newObj);
+      let line = rsp.data.line.map(newObj)
+      let polygon = rsp.data.polygon.map(newObj)
+      let rect = rsp.data.rect.map(newObj)
 
       if (line.length !== 0 || polygon.length !== 0 || rect.length !== 0) {
-        this.polygonData = [...polygon, ...line, ...rect];
+        this.polygonData = [...polygon, ...line, ...rect]
       }
     }
   }
 
   public async getSceneRule() {
-    const rsp: any = await getCameraSceneRule({ cameraId: this.cameraId });
+    const rsp: any = await getCameraSceneRule({ cameraId: this.cameraId })
     if (rsp && rsp.success) {
       let rspData = rsp.data.taskList ? rsp.data.taskList : []
       this.rules = rsp.data.rules ? rsp.data.rules : []
-      this.camearInfo = rsp.data.cameraInfo ? rsp.data.cameraInfo : {};
+      this.camearInfo = rsp.data.cameraInfo ? rsp.data.cameraInfo : {}
       this.analytics = rsp.data.cameraInfo.run_type !== -1 ? true : false
       this.dealWay = rsp.data.cameraInfo.run_type === 1 ? true : false
       this.runServerName = rsp.data.cameraInfo.runServerName
diff --git a/src/api/camera.ts b/src/api/camera.ts
index e2e07dc..e766328 100644
--- a/src/api/camera.ts
+++ b/src/api/camera.ts
@@ -1,118 +1,119 @@
-import request from "@/scripts/httpRequest";
-import qs from "qs";
-
+import request from "@/scripts/httpRequest"
+import qs from "qs"
 
 export const createCamera = (camera: any) => {
   return request({
     url: "/data/api-v/camera/add",
     method: "post",
     data: camera
-  });
-};
+  })
+}
 
 export const updateCameraInfo = (camera: any) => {
   return request({
     url: "/data/api-v/camera/update",
     method: "put",
     data: camera
-  });
-};
+  })
+}
 
 export const getCameraInfo = (id: string) => {
   return request({
     url: "/data/api-v/camera/show",
     method: "get",
     params: { id: id }
-  });
-};
+  })
+}
 
 export const getGB28181CameraInfo = (id: string) => {
   return request({
     url: "/data/api-v/gb28181/camera/show",
     method: "get",
     params: { cid: id }
-  });
-};
+  })
+}
 
 export const delCamera = (id: string) => {
   return request({
     url: "/data/api-v/camera/del",
     method: "get",
     params: { id: id }
-  });
-};
+  })
+}
 
 export const saveCameraRules = (query: any) => {
   return request({
     url: "/data/api-v/camera/saveTask",
     method: "post",
     data: query
-  });
-};
+  })
+}
 
 export const deleteCameraRules = (query: any) => {
   return request({
     url: "/data/api-v/cameraTaskArgs/deleteByGroup",
     method: "get",
     params: query
-  });
-};
+  })
+}
 
 export const getLinkRules = (query: any) => {
   return request({
     url: "/data/api-v/cameraTaskArgs/getLinkRulesByCameraIds",
     method: "post",
     data: query
-  });
-};
+  })
+}
 
 export const saveLinkRule = (query: any) => {
   return request({
     url: "/data/api-v/cameraTaskArgs/saveLinkRulesByGroup",
     method: "post",
     data: query
-  });
-};
+  })
+}
 
-export const updateSnapshot = (cameraId: string) => {
+export const updateSnapshot = (cameraId: string, isGB: boolean) => {
+  let api = isGB ? "/data/api-v/gb28181/camera/updateSnapshotUrl" : "/data/api-v/camera/updateSnapshotUrl"
+
   return request({
-    url: "/data/api-v/camera/updateSnapshotUrl",
+    url: api,
     method: "get",
     params: { cameraId: cameraId }
-  });
-};
+  })
+}
 
 export const updateCameraTask = (params: any) => {
   return request({
     url: "/data/api-v/cameraTask/updateCameraTaskStatus",
     method: "post",
     data: params
-  });
-};
+  })
+}
 
 export const updateRuleDefence = (params: any) => {
   return request({
     url: "/data/api-v/cameraTaskArgs/updateDefenceStateByGroup",
     method: "post",
     data: qs.stringify(params)
-  });
-};
+  })
+}
 
 export const updateAlarmLevel = (params: any) => {
   return request({
     url: "/data/api-v/cameraTask/saveAlarmLevelByGroup",
     method: "post",
     data: params
-  });
-};
+  })
+}
 
 export const addCameraTask = (params: any) => {
   return request({
     url: "/data/api-v/cameraTask/addTask",
     method: "post",
     data: qs.stringify(params)
-  });
-};
+  })
+}
 
 // 浜戝彴
 export const ptzControl = (params: any) => {
@@ -120,8 +121,8 @@
     url: "/data/api-v/camera/ptzControl",
     method: "post",
     data: params
-  });
-};
+  })
+}
 //
 //鏌ユ壘鎵�鏈�(澶氳竟褰�)鍖哄煙
 export const findAllPolygons = () => {
@@ -158,7 +159,7 @@
 //鑾峰彇鎽勫儚鏈虹殑鍧愭爣鏍囧畾淇℃伅
 export const getCameraMarks = (query: any) => {
   return request({
-    url: '/data/api-v/camera/coord',
+    url: "/data/api-v/camera/coord",
     method: "get",
     params: query
   })
@@ -167,8 +168,8 @@
 //鏇存柊鎽勫儚鏈虹殑鍧愭爣鏍囧畾淇℃伅
 export const updateCameraMarks = (data: any) => {
   return request({
-    url: '/data/api-v/camera/updateCoord',
-    method: 'post',
+    url: "/data/api-v/camera/updateCoord",
+    method: "post",
     data
   })
 }
@@ -176,8 +177,8 @@
 //淇濆瓨鎽勫儚鏈哄垎缁�
 export const saveCameraGroupInfo = (data: any) => {
   return request({
-    url: '/data/api-v/camera/group/save',
-    method: 'post',
+    url: "/data/api-v/camera/group/save",
+    method: "post",
     data
   })
 }
@@ -185,15 +186,14 @@
 //鏌ヨ鎽勫儚鏈哄垎缁勪俊鎭�
 export const findCameraGroups = () => {
   return request({
-    url: '/data/api-v/camera/group/findAll',
-    method: 'get'
+    url: "/data/api-v/camera/group/findAll",
+    method: "get"
   })
 }
 
 export const delCameraGroup = (groupId: string) => {
   return request({
-    url: '/data/api-v/camera/group/del?groupId=' + groupId,
-    method: 'post'
+    url: "/data/api-v/camera/group/del?groupId=" + groupId,
+    method: "post"
   })
 }
-
diff --git a/src/components/canvas/index.vue b/src/components/canvas/index.vue
index 7e4e217..aec91a9 100644
--- a/src/components/canvas/index.vue
+++ b/src/components/canvas/index.vue
@@ -1,23 +1,21 @@
 <template>
-  <div class="s-cavas" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}">
+  <div class="s-cavas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }">
     <canvas
       ref="myCanvas"
       :width="canvasWidth"
       :height="canvasHeight"
-      :style="`background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`"
+      :style="
+        `background:url(${canvasBg}) center / ${canvasWidth}px ${canvasHeight}px no-repeat; background-size: contain;`
+      "
     ></canvas>
 
     <el-tooltip content="鍒锋柊搴曞浘" placement="bottom" popper-class="atooltip" v-if="isShowRefresh">
       <span class="iconfont icongengxin" @click="refresh"></span>
     </el-tooltip>
-    <p class="tip" :style="disabled ? `display:block;` : `display:none;`">鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�</p>
-    <el-dialog
-      title
-      :visible.sync="visible"
-      width="1150px"
-      append-to-body
-      :before-close="cancelFunc"
-    >
+    <p class="tip" :style="disabled ? `display:block;` : `display:none;`">
+      鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�
+    </p>
+    <el-dialog title :visible.sync="visible" width="1150px" append-to-body :before-close="cancelFunc">
       <canvas-dialog
         ref="bigCanvas"
         :canvasDataToChild="canvasData"
@@ -32,8 +30,8 @@
   </div>
 </template>
 <script>
-import canvasDialog from "./Dialog";
-import { updateSnapshot } from "@/api/camera";
+import canvasDialog from "./Dialog"
+import { updateSnapshot } from "@/api/camera"
 export default {
   name: "myCanvas",
   components: {
@@ -66,7 +64,7 @@
     },
     canvasDataShow: {
       default: () => {
-        return { line: [], rect: [], arrow: [], polygon: [] };
+        return { line: [], rect: [], arrow: [], polygon: [] }
       },
       type: Object
     },
@@ -104,17 +102,16 @@
       if (this.snapshot_url) {
         // 鏁版嵁鏍堣嚜鍔ㄤ笂浼犲鐞�
         if (this.snapshot_url.indexOf("/opt/vasystem") == 0) {
-          return this.snapshot_url.replace("/opt/vasystem", "");
+          return this.snapshot_url.replace("/opt/vasystem", "")
         }
 
         if (this.sourceType == 2) {
-          return `${this.snapshot_url}`;
+          return `${this.snapshot_url}`
         } else {
-          return `/httpImage/${this.snapshot_url}`;
+          return `/httpImage/${this.snapshot_url}`
         }
-
       } else {
-        return this.blackImg;
+        return this.blackImg
       }
     }
   },
@@ -133,17 +130,17 @@
       c: null,
       ctx: null,
       visible: false,
-      baseImg: undefined,
+      baseImg: undefined
       //showProportion: 1.666
-    };
+    }
   },
   watch: {
     loading: {
       handler(newVal, oldVal) {
         // console.log(newVal,'loading')
         if (newVal) {
-          this.baseImg = "";
-          this.refresh();
+          this.baseImg = ""
+          this.refresh()
         }
       },
       deep: true
@@ -151,11 +148,11 @@
     canvasDataShow: {
       handler(newVal, oldVal) {
         // console.log(newVal, "canvasDataShow newVal");
-        this.canvasData.line = newVal.line;
-        this.canvasData.rect = newVal.rect;
-        this.canvasData.arrow = newVal.arrow;
-        this.canvasData.polygon = newVal.polygon;
-        this.clickSelect(this.canvasData);
+        this.canvasData.line = newVal.line
+        this.canvasData.rect = newVal.rect
+        this.canvasData.arrow = newVal.arrow
+        this.canvasData.polygon = newVal.polygon
+        this.clickSelect(this.canvasData)
       },
       deep: true
     }
@@ -163,156 +160,139 @@
   mounted() {
     this.$nextTick(() => {
       // this.c = document.querySelector("#" + this.divId);
-      this.c = this.$refs.myCanvas;
-      this.ctx = this.c.getContext("2d");
-      this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow));
-      this.clickSelect(this.canvasData);
-    });
+      this.c = this.$refs.myCanvas
+      this.ctx = this.c.getContext("2d")
+      this.canvasData = JSON.parse(JSON.stringify(this.canvasDataShow))
+      this.clickSelect(this.canvasData)
+    })
   },
   methods: {
     // 鑾峰彇canvas搴曞浘
     async getCanvasPic() {
       // this.$emit('changeBaseImg',this.currentCameraId)
-      this.$emit('changeLoading', true)
+      this.$emit("changeLoading", true)
       if (this.currentCameraId) {
-        let _this = this;
-        await updateSnapshot(this.currentCameraId)
-          .then(res => {
+        let _this = this
+        await updateSnapshot(this.currentCameraId, this.isGB28181)
+          .then((res) => {
             if (res.data.cameraId === _this.currentCameraId) {
-              this.baseImg = res.data.snapshotUrl;
-              this.$emit('refresh', res.data.snapshotUrl, _this.currentCameraId)
+              this.baseImg = res.data.snapshotUrl
+              this.$emit("refresh", res.data.snapshotUrl, _this.currentCameraId)
               this.$forceUpdate()
               this.$notify({
                 type: "success",
                 message: "搴曞浘宸插埛鏂�"
-              });
+              })
             }
           })
-          .catch(err => {
+          .catch((err) => {
             this.$notify({
               type: "error",
               message: "搴曞浘鍒锋柊澶辫触"
-            });
-          });
-        this.$emit('changeLoading', false)
+            })
+          })
+        this.$emit("changeLoading", false)
       }
     },
     showModal() {
       // console.log(this.canvasData, "鐐瑰嚮缁樺埗鐨勬椂鍊欎紶閫掕繃鍘荤殑鏁版嵁");
-      this.visible = true;
+      this.visible = true
       this.$nextTick(() => {
         // this.$refs.bigCanvas.delCursor = {}
       })
-
     },
     cancelFunc() {
-      this.visible = false;
-      this.$refs.bigCanvas.cancel();
+      this.visible = false
+      this.$refs.bigCanvas.cancel()
       // console.log("鍏抽棴浜�");
     },
     handleOk() {
       // 鍒ゆ柇鍥惧舰鐨勫悕瀛楁槸鍚﹂噸澶�
       // console.log("ok");
-      this.$refs.bigCanvas.changeType('0')
-      let repeatName = this.isRepeat();
+      this.$refs.bigCanvas.changeType("0")
+      let repeatName = this.isRepeat()
       if (repeatName !== "") {
         this.$notify({
           type: "error",
           message: repeatName + "鍥惧舰鍚嶇О閲嶅锛岃鏇存锛�"
-        });
-        return;
+        })
+        return
       }
       this.$notify({
         type: "success",
         message: "宸蹭繚瀛樼粯鍒讹紒"
-      });
+      })
       // 姣忔淇濆瓨鍏抽棴妯℃�佺獥鏃堕兘瑕佹妸妯℃�佺獥鐨勬暟鎹啓鍒扮埗缁勪欢閲屾潵
-      this.canvasData = this.$refs.bigCanvas.canvasData;
+      this.canvasData = this.$refs.bigCanvas.canvasData
       // 椤轰究鐢╁埌鏇村灞傚幓
-      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData);
+      this.$emit("fromCanvas", this.$refs.bigCanvas.canvasData)
       // console.log("浣犲ソ", this.canvasData);
 
-      this.clickSelect(this.canvasData);
-      this.visible = false;
+      this.clickSelect(this.canvasData)
+      this.visible = false
     },
     // 鍥炴樉cavas鏁版嵁
     // 鐐瑰嚮閫変腑鍙樿壊 灏嗗綋鍓嶉〉闈㈡墍鏈夎矾寰勯噸缁樺垽鏂綋鍓嶉紶鏍囩殑鍧愭爣鍦ㄥ摢涓浘褰㈠唴 濡傛灉涓嶄紶鍧愭爣鍙傛暟灏辨槸鍥炴樉鐨勬柟娉�
     clickSelect(e) {
-      this.ctx.clearRect(0, 0, this.c.width, this.c.height);
-      let _this = this; // 闆嗗悎涓亶鍘嗛渶瑕佸皢this杞瓨涓�涓嬩娇鐢�
-      _this.canvasData.line.forEach(function (v, i) {
-        _this.ctx.strokeStyle = "yellow";
-        _this.ctx.beginPath();
-        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
-        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
-        _this.ctx.stroke();
-        _this.showRemarks(
-          v.location[0].x / _this.showProportion,
-          v.location[0].y / _this.showProportion,
-          v.name
-        );
-        _this.c.style.cursor = "default";
+      this.ctx.clearRect(0, 0, this.c.width, this.c.height)
+      let _this = this // 闆嗗悎涓亶鍘嗛渶瑕佸皢this杞瓨涓�涓嬩娇鐢�
+      _this.canvasData.line.forEach(function(v, i) {
+        _this.ctx.strokeStyle = "yellow"
+        _this.ctx.beginPath()
+        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
+        _this.ctx.stroke()
+        _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
+        _this.c.style.cursor = "default"
         if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) {
           // 濡傛灉浼犲叆浜嗕簨浠跺潗鏍囷紝灏辩敤isPointInStroke鍒ゆ柇涓�涓�
           // 濡傛灉褰撳墠鐜瑕嗙洊浜嗚鍧愭爣锛屽氨灏嗗浘褰㈢殑index鏀惧埌鏁扮粍閲�
           // 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
-          _this.type = "0";
-          _this.delCursor.type = "1";
-          _this.delCursor.index = i;
+          _this.type = "0"
+          _this.delCursor.type = "1"
+          _this.delCursor.index = i
           // 灏嗗綋鍓嶅厓绱犳爣绾�
-          _this.ctx.strokeStyle = "red";
-          _this.ctx.beginPath();
-          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
-          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
-          _this.ctx.stroke();
-          _this.showRemarks(
-            v.location[0].x / _this.showProportion,
-            v.location[0].y / _this.showProportion,
-            v.name
-          );
-          _this.c.style.cursor = "pointer";
+          _this.ctx.strokeStyle = "red"
+          _this.ctx.beginPath()
+          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
+          _this.ctx.stroke()
+          _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
+          _this.c.style.cursor = "pointer"
         }
-      });
-      _this.canvasData.rect.forEach(function (v, i) {
-        _this.ctx.strokeStyle = "yellow";
-        _this.ctx.beginPath();
-        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
-        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
-        _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion);
-        _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion);
-        _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
-        _this.ctx.stroke();
-        _this.showRemarks(
-          v.location[0].x / _this.showProportion,
-          v.location[0].y / _this.showProportion,
-          v.name
-        );
-        _this.c.style.cursor = "default";
+      })
+      _this.canvasData.rect.forEach(function(v, i) {
+        _this.ctx.strokeStyle = "yellow"
+        _this.ctx.beginPath()
+        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+        _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
+        _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion)
+        _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion)
+        _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+        _this.ctx.stroke()
+        _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
+        _this.c.style.cursor = "default"
         if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) {
           // 濡傛灉浼犲叆浜嗕簨浠跺潗鏍囷紝灏辩敤isPointInStroke鍒ゆ柇涓�涓�
           // 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
-          _this.type = "0";
-          _this.delCursor.type = "2";
-          _this.delCursor.index = i;
+          _this.type = "0"
+          _this.delCursor.type = "2"
+          _this.delCursor.index = i
           // 灏嗗綋鍓嶅厓绱犳爣绾�
-          _this.ctx.strokeStyle = "red";
-          _this.ctx.beginPath();
-          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
-          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion);
-          _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion);
-          _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion);
-          _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
-          _this.ctx.stroke();
-          _this.showRemarks(
-            v.location[0].x / _this.showProportion,
-            v.location[0].y / _this.showProportion,
-            v.name
-          );
-          _this.c.style.cursor = "pointer";
+          _this.ctx.strokeStyle = "red"
+          _this.ctx.beginPath()
+          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+          _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
+          _this.ctx.lineTo(v.location[2].x / _this.showProportion, v.location[2].y / _this.showProportion)
+          _this.ctx.lineTo(v.location[3].x / _this.showProportion, v.location[3].y / _this.showProportion)
+          _this.ctx.lineTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
+          _this.ctx.stroke()
+          _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
+          _this.c.style.cursor = "pointer"
         }
-      });
-      _this.canvasData.arrow.forEach(function (v, i) {
-        _this.ctx.strokeStyle = "yellow";
+      })
+      _this.canvasData.arrow.forEach(function(v, i) {
+        _this.ctx.strokeStyle = "yellow"
         // _this.ctx.beginPath()
         // _this.ctx.moveTo(v.location[0].x / 2, v.location[0].y / 2)
         // _this.ctx.lineTo(v.location[1].x / 2, v.location[1].y / 2)
@@ -326,22 +306,18 @@
           20,
           30,
           "yellow"
-        ); // 缁樺埗鏂规硶
-        _this.showRemarks(
-          v.location[0].x / _this.showProportion,
-          v.location[0].y / _this.showProportion,
-          v.name
-        );
-        _this.c.style.cursor = "default";
+        ) // 缁樺埗鏂规硶
+        _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
+        _this.c.style.cursor = "default"
         if (e && _this.ctx.isPointInStroke(e.offsetX, e.offsetY)) {
           // 濡傛灉浼犲叆浜嗕簨浠跺潗鏍囷紝灏辩敤isPointInStroke鍒ゆ柇涓�涓�
           // 濡傛灉褰撳墠鐜瑕嗙洊浜嗚鍧愭爣锛屽氨灏嗗浘褰㈢殑index鏀惧埌鏁扮粍閲�
           // 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
-          _this.type = "0";
-          _this.delCursor.type = "4";
-          _this.delCursor.index = i;
+          _this.type = "0"
+          _this.delCursor.type = "4"
+          _this.delCursor.index = i
           // 灏嗗綋鍓嶅厓绱犳爣绾�
-          _this.ctx.strokeStyle = "red";
+          _this.ctx.strokeStyle = "red"
           //   _this.ctx.beginPath()
           //   _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
           //   _this.ctx.lineTo(v.location[1].x / _this.showProportion, v.location[1].y / _this.showProportion)
@@ -355,66 +331,62 @@
             20,
             30,
             "red"
-          ); // 缁樺埗鏂规硶
-          _this.showRemarks(
-            v.location[0].x / _this.showProportion,
-            v.location[0].y / _this.showProportion,
-            v.name
-          );
-          _this.c.style.cursor = "pointer";
+          ) // 缁樺埗鏂规硶
+          _this.showRemarks(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion, v.name)
+          _this.c.style.cursor = "pointer"
         }
-      });
-      _this.canvasData.polygon.forEach(function (v, i) {
+      })
+      _this.canvasData.polygon.forEach(function(v, i) {
         if (v.location.length === 0) {
-          return;
+          return
         }
-        _this.ctx.strokeStyle = "yellow";
-        _this.ctx.beginPath();
-        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
+        _this.ctx.strokeStyle = "yellow"
+        _this.ctx.beginPath()
+        _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
         for (let i = 1; i < v.location.length; i++) {
-          _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion);
+          _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion)
         }
-        _this.ctx.closePath();
-        _this.ctx.stroke();
+        _this.ctx.closePath()
+        _this.ctx.stroke()
         _this.showRemarks(
           v.location[v.location.length - 1].x / _this.showProportion,
           v.location[v.location.length - 1].y / _this.showProportion,
           v.name
-        );
-        _this.c.style.cursor = "default";
+        )
+        _this.c.style.cursor = "default"
         if (e && _this.ctx.isPointInPath(e.offsetX, e.offsetY)) {
           // 濡傛灉浼犲叆浜嗕簨浠跺潗鏍囷紝灏辩敤isPointInStroke鍒ゆ柇涓�涓�
           // 濡傛灉褰撳墠鐜瑕嗙洊浜嗚鍧愭爣锛屽氨灏嗗浘褰㈢殑index鏀惧埌鏁扮粍閲�
           // 褰撻紶鏍囩Щ鍏ヤ箣鍚庡皢褰撳墠鐨勬ā寮忓垏鎹负閫変腑妯″紡
-          _this.type = "0";
-          _this.delCursor.type = "5";
-          _this.delCursor.index = i;
+          _this.type = "0"
+          _this.delCursor.type = "5"
+          _this.delCursor.index = i
           // 灏嗗綋鍓嶅厓绱犳爣绾�
-          _this.ctx.strokeStyle = "red";
-          _this.ctx.beginPath();
-          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion);
+          _this.ctx.strokeStyle = "red"
+          _this.ctx.beginPath()
+          _this.ctx.moveTo(v.location[0].x / _this.showProportion, v.location[0].y / _this.showProportion)
           for (let i = 1; i < v.location.length; i++) {
-            _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion);
+            _this.ctx.lineTo(v.location[i].x / _this.showProportion, v.location[i].y / _this.showProportion)
           }
-          _this.ctx.closePath();
-          _this.ctx.stroke();
+          _this.ctx.closePath()
+          _this.ctx.stroke()
           _this.showRemarks(
             v.location[v.location.length - 1].x / _this.showProportion,
             v.location[v.location.length - 1].y / _this.showProportion,
             v.name
-          );
-          _this.c.style.cursor = "pointer";
+          )
+          _this.c.style.cursor = "pointer"
         }
-      });
+      })
     },
     // 鍥炴樉鍥惧舰澶囨敞
     showRemarks(x, y, remarks) {
-      this.ctx.moveTo(x, y - 10); // 鍥犱负鏀惧ぇ涔嬪悗鏄痽-20锛屾墍浠ョ缉灏忕増鐨勪负y-10
-      this.ctx.fillStyle = "green"; // 璁剧疆濉厖棰滆壊涓虹豢鑹�
-      this.ctx.font = '10px "寰蒋闆呴粦"'; // 璁剧疆瀛椾綋
-      this.ctx.textBaseline = "bottom"; // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
-      this.ctx.textAlign = "left"; // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
-      this.ctx.fillText(remarks, x, y - 10); // 濉厖鏂囧瓧
+      this.ctx.moveTo(x, y - 10) // 鍥犱负鏀惧ぇ涔嬪悗鏄痽-20锛屾墍浠ョ缉灏忕増鐨勪负y-10
+      this.ctx.fillStyle = "green" // 璁剧疆濉厖棰滆壊涓虹豢鑹�
+      this.ctx.font = '10px "寰蒋闆呴粦"' // 璁剧疆瀛椾綋
+      this.ctx.textBaseline = "bottom" // 璁剧疆瀛椾綋搴曠嚎瀵归綈缁樺埗鍩虹嚎
+      this.ctx.textAlign = "left" // 璁剧疆瀛椾綋瀵归綈鐨勬柟寮�
+      this.ctx.fillText(remarks, x, y - 10) // 濉厖鏂囧瓧
     },
     // 绠ご缁樺埗鍑芥暟
     drawArrow(ctx, fromX, fromY, toX, toY, theta, headlen, width, color) {
@@ -425,86 +397,86 @@
       // headlen锛氫笁瑙掓枩杈归暱搴�
       // width锛氱澶寸嚎瀹藉害
       // color锛氱澶撮鑹�
-      theta = typeof theta !== "undefined" ? theta : 30;
-      headlen = typeof theta !== "undefined" ? headlen : 10;
-      width = typeof width !== "undefined" ? width : 1;
-      color = typeof color !== "undefined" ? color : "yellow";
+      theta = typeof theta !== "undefined" ? theta : 30
+      headlen = typeof theta !== "undefined" ? headlen : 10
+      width = typeof width !== "undefined" ? width : 1
+      color = typeof color !== "undefined" ? color : "yellow"
       // 璁$畻鍚勮搴﹀拰瀵瑰簲鐨凱2,P3鍧愭爣
-      let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
-      let angle1 = ((angle + theta) * Math.PI) / 180;
-      let angle2 = ((angle - theta) * Math.PI) / 180;
-      let topX = headlen * Math.cos(angle1);
-      let topY = headlen * Math.sin(angle1);
-      let botX = headlen * Math.cos(angle2);
-      let botY = headlen * Math.sin(angle2);
+      let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI
+      let angle1 = ((angle + theta) * Math.PI) / 180
+      let angle2 = ((angle - theta) * Math.PI) / 180
+      let topX = headlen * Math.cos(angle1)
+      let topY = headlen * Math.sin(angle1)
+      let botX = headlen * Math.cos(angle2)
+      let botY = headlen * Math.sin(angle2)
 
-      ctx.save();
-      ctx.beginPath();
-      let arrowX = fromX - topX;
-      let arrowY = fromY - topY;
-      ctx.moveTo(arrowX, arrowY);
-      ctx.moveTo(fromX, fromY);
-      ctx.lineTo(toX, toY);
-      arrowX = toX + topX;
-      arrowY = toY + topY;
-      ctx.moveTo(arrowX, arrowY);
-      ctx.lineTo(toX, toY);
-      arrowX = toX + botX;
-      arrowY = toY + botY;
-      ctx.lineTo(arrowX, arrowY);
-      ctx.strokeStyle = color;
-      ctx.lineWidth = width;
-      ctx.stroke();
-      ctx.restore();
+      ctx.save()
+      ctx.beginPath()
+      let arrowX = fromX - topX
+      let arrowY = fromY - topY
+      ctx.moveTo(arrowX, arrowY)
+      ctx.moveTo(fromX, fromY)
+      ctx.lineTo(toX, toY)
+      arrowX = toX + topX
+      arrowY = toY + topY
+      ctx.moveTo(arrowX, arrowY)
+      ctx.lineTo(toX, toY)
+      arrowX = toX + botX
+      arrowY = toY + botY
+      ctx.lineTo(arrowX, arrowY)
+      ctx.strokeStyle = color
+      ctx.lineWidth = width
+      ctx.stroke()
+      ctx.restore()
     },
     async refresh() {
       // console.log(this.loading,'鍒锋柊搴曞浘',this.snapshot_url)
       if (!this.currentCameraId) {
-        return false;
+        return false
       }
       // await this.$emit('changeLoading', true)
-      this.getCanvasPic();
+      this.getCanvasPic()
     },
     // 鍒ゆ柇鍥惧舰鍚嶇О鏄惁閲嶅
     isRepeat() {
-      let _this = this; // 闆嗗悎涓亶鍘嗛渶瑕佸皢this杞瓨涓�涓嬩娇鐢�
-      let nameArray = [];
+      let _this = this // 闆嗗悎涓亶鍘嗛渶瑕佸皢this杞瓨涓�涓嬩娇鐢�
+      let nameArray = []
       for (const v of _this.$refs.bigCanvas.canvasData.line) {
         for (const item of nameArray) {
           if (v.name === item) {
-            return v.name;
+            return v.name
           }
         }
-        nameArray.push(v.name);
+        nameArray.push(v.name)
       }
       for (const v of _this.$refs.bigCanvas.canvasData.arrow) {
         for (const item of nameArray) {
           if (v.name === item) {
-            return v.name;
+            return v.name
           }
         }
-        nameArray.push(v.name);
+        nameArray.push(v.name)
       }
       for (const v of _this.$refs.bigCanvas.canvasData.rect) {
         for (const item of nameArray) {
           if (v.name === item) {
-            return v.name;
+            return v.name
           }
         }
-        nameArray.push(v.name);
+        nameArray.push(v.name)
       }
       for (const v of _this.$refs.bigCanvas.canvasData.polygon) {
         for (const item of nameArray) {
           if (v.name === item) {
-            return v.name;
+            return v.name
           }
         }
-        nameArray.push(v.name);
+        nameArray.push(v.name)
       }
-      return "";
+      return ""
     }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
 canvas {
diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue
index ed6295b..19fb894 100644
--- a/src/pages/cameraAccess/components/SeparateRules.vue
+++ b/src/pages/cameraAccess/components/SeparateRules.vue
@@ -15,11 +15,7 @@
             </span>
           </div>
 
-          <div
-            v-if="Camera.analytics"
-            class="flex-box"
-            v-show="cameraType === 'camera'"
-          >
+          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
             <span class="label">澶勭悊鏂瑰紡</span>
             <toggle-button
               :value="Camera.dealWay"
@@ -28,29 +24,20 @@
               :color="{
                 checked: '#3D68E1',
                 unchecked: '#FF7733',
-                disabled: '#CCCCCC',
+                disabled: '#CCCCCC'
               }"
               :sync="true"
               @change="changePoll"
             />
           </div>
-          <div
-            v-if="Camera.analytics"
-            class="flex-box"
-            v-show="cameraType === 'camera'"
-          >
+          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
             <span class="label">澶勭悊鐘舵��: {{ camStatus }}</span>
           </div>
-          <div
-            v-if="Camera.analytics"
-            class="flex-box"
-            v-show="cameraType === 'camera'"
-          >
+          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
             <span class="label"
               >鍒嗚鲸鐜�:
               {{
-                Camera.camearInfo.resolution_width == 0 ||
-                Camera.camearInfo.resolution_height == 0
+                Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0
                   ? "鏈満鍒嗚鲸鐜�"
                   : `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}`
               }}</span
@@ -64,12 +51,7 @@
           <div v-if="Camera.analytics" class="flex-box">
             <span class="label">绠楁硶蹇�熼�氶亾</span>
             <div class="channel flex-box">
-              <el-tooltip
-                effect="dark"
-                content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯"
-                placement="bottom"
-                popper-class="atooltip"
-              >
+              <el-tooltip effect="dark" content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" placement="bottom" popper-class="atooltip">
                 <span
                   style="color: #3d68e1; cursor: pointer; font-size: 23px"
                   @click="ctrlC"
@@ -79,9 +61,7 @@
               <el-tooltip
                 effect="dark"
                 :content="
-                  !TreeDataPool.ctrlCameraId
-                    ? '绮樿创绠楁硶瑙勫垯'
-                    : `绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`
+                  !TreeDataPool.ctrlCameraId ? '绮樿创绠楁硶瑙勫垯' : `绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`
                 "
                 placement="bottom"
                 popper-class="atooltip"
@@ -128,19 +108,13 @@
           <div class="draw-box">
             <div class="draw-box-title">
               <b style="font-size: 14px">缁樺埗鍖哄煙</b>
-              <span
-                class="el-dropdown-link"
-                @click="drawBaseImg"
-                style="position: relative; top: 5px; cursor: pointer"
-              >
+              <span class="el-dropdown-link" @click="drawBaseImg" style="position: relative; top: 5px; cursor: pointer">
                 <i class="iconfont iconbianji1" style="font-size: 28px"></i>
               </span>
             </div>
             <div style="width: 590px; height: 16px">
               <b style="font-size: 14px">{{
-                Camera.camearInfo.alias
-                  ? Camera.camearInfo.alias
-                  : Camera.camearInfo.name
+                Camera.camearInfo.alias ? Camera.camearInfo.alias : Camera.camearInfo.name
               }}</b>
             </div>
             <div class="img-box">
@@ -160,6 +134,7 @@
                   :loading="Camera.loading"
                   :canvasWidth="canvasWidth"
                   :canvasHeight="canvasHeight"
+                  :isGB28181="Camera.gb28181"
                   @fromCanvas="getCanvasData"
                   @changeLoading="changeLoading"
                   @refresh="refresh"
@@ -175,16 +150,9 @@
                     class="swiper-box-container2"
                     style="width: 100%"
                   >
-                    <swiper-slide
-                      v-for="(data, index) in swipercanvasData"
-                      :key="index"
-                    >
+                    <swiper-slide v-for="(data, index) in swipercanvasData" :key="index">
                       <div>
-                        <b
-                          class="video-title"
-                          style="font-size: 14px; margin-top: -10px"
-                          >{{ data.name }}</b
-                        >
+                        <b class="video-title" style="font-size: 14px; margin-top: -10px">{{ data.name }}</b>
                         <polygon-canvas
                           class="cavas"
                           ref="canvas"
@@ -208,20 +176,12 @@
                       </div>
                     </swiper-slide>
                   </swiper>
-                  <div
-                    class="swiper-local-prev"
-                    v-show="swipercanvasData.length > 1"
-                    @click="prevClick"
-                  >
+                  <div class="swiper-local-prev" v-show="swipercanvasData.length > 1" @click="prevClick">
                     <div class="icon-btn" slot="button-prev">
                       <i class="iconfont iconzuo"></i>
                     </div>
                   </div>
-                  <div
-                    class="swiper-local-next"
-                    v-show="swipercanvasData.length > 1"
-                    @click="nextClick"
-                  >
+                  <div class="swiper-local-next" v-show="swipercanvasData.length > 1" @click="nextClick">
                     <div class="icon-btn" slot="button-next">
                       <i class="iconfont iconyou1"></i>
                     </div>
@@ -259,21 +219,21 @@
 </template>
 
 <script>
-import { savePolygon } from "@/api/polygon";
+import { savePolygon } from "@/api/polygon"
 
-import { pasteRules } from "@/api/task";
-import { getCameraInfo } from "@/api/camera";
-import { saveCameraScene } from "@/api/scene";
+import { pasteRules } from "@/api/task"
+import { getCameraInfo } from "@/api/camera"
+import { saveCameraScene } from "@/api/scene"
 
-import { changeRunType } from "@/api/pollConfig";
-import { findAllFileByStackId } from "@/api/localVedio";
-import VideoRuleData from "@/Pool/VideoRuleData";
+import { changeRunType } from "@/api/pollConfig"
+import { findAllFileByStackId } from "@/api/localVedio"
+import VideoRuleData from "@/Pool/VideoRuleData"
 
-import TimeSlider from "./TimeSlider";
-import polygonCanvas from "@/components/canvas";
-import Sysinfo from "@/components/subComponents/SystemInfo";
-import SceneRule from "./SceneRule";
-import SlideScene from "./scene/SlideScene";
+import TimeSlider from "./TimeSlider"
+import polygonCanvas from "@/components/canvas"
+import Sysinfo from "@/components/subComponents/SystemInfo"
+import SceneRule from "./SceneRule"
+import SlideScene from "./scene/SlideScene"
 
 export default {
   components: {
@@ -281,21 +241,19 @@
     polygonCanvas,
     Sysinfo,
     SceneRule,
-    SlideScene,
+    SlideScene
   },
   directives: {
     focus: {
-      inserted: function (el) {
-        el.querySelector("input").focus();
-      },
-    },
+      inserted: function(el) {
+        el.querySelector("input").focus()
+      }
+    }
   },
   computed: {
     cameraType() {
-      return this.TreeDataPool.treeActiveName === "camera"
-        ? "camera"
-        : "dataStack";
-    },
+      return this.TreeDataPool.treeActiveName === "camera" ? "camera" : "dataStack"
+    }
   },
   data() {
     return {
@@ -308,15 +266,15 @@
         grabCursor: true,
         pagination: {
           el: ".swiper-pagination",
-          type: "fraction",
+          type: "fraction"
         },
         navigation: {
           nextEl: ".swiper-local-next",
-          prevEl: ".swiper-local-prev",
-        },
+          prevEl: ".swiper-local-prev"
+        }
       },
       tableRuleList: [],
-      camStatus:'',
+      camStatus: "",
       cameraId: "",
       showSysInfo: false,
       showCanvas: true,
@@ -326,29 +284,28 @@
       swiperIndex: 0,
       swipercanvasData: [],
       stackFilesPage: 1,
-      stackFilesSize: 5,
-    };
+      stackFilesSize: 5
+    }
   },
   mounted() {
-    this.mockAsync();
-    this.PollData.statistics();
+    this.PollData.statistics()
   },
   watch: {
     "Camera.cameraId": {
       handler(n, o) {
         if (n) {
           if (this.TreeDataPool.treeActiveName == "dataStack") {
-            this.stackFilesPage = 1;
-            this.stackFilesSize = 5;
-            this.stackId = n;
+            this.stackFilesPage = 1
+            this.stackFilesSize = 5
+            this.stackId = n
             if (this.stackId) {
-              this.swipercanvasData = [];
-              this.getStackFiles();
+              this.swipercanvasData = []
+              this.getStackFiles()
             }
           }
         }
-      },
-    },
+      }
+    }
   },
   methods: {
     getStatus() {
@@ -356,336 +313,296 @@
         if (res.success) {
           switch (res.data.status) {
             case 0:
-              this.camStatus = "鏈厤瑙勫垯";
-              return 
+              this.camStatus = "鏈厤瑙勫垯"
+              return
             case 1:
-              this.camStatus = "绛夊緟杞澶勭悊";
-              return 
+              this.camStatus = "绛夊緟杞澶勭悊"
+              return
             case 2:
-              this.camStatus = "姝e湪鎵ц鍒嗘瀽澶勭悊";
-              return 
+              this.camStatus = "姝e湪鎵ц鍒嗘瀽澶勭悊"
+              return
             case -1:
-              this.camStatus = "鍏朵粬鎯呭喌瀵艰嚧鏈鐞�";
+              this.camStatus = "鍏朵粬鎯呭喌瀵艰嚧鏈鐞�"
               return
             case -2:
-              this.camStatus = "鏁呴殰瀵艰嚧鏈鐞�";
+              this.camStatus = "鏁呴殰瀵艰嚧鏈鐞�"
               return
           }
         }
-      });
+      })
     },
     prevClick() {
       if (this.swiperIndex == 0) {
         if (this.stackFilesPage > 1) {
-          this.stackFilesPage--;
-          this.getStackFiles(true);
+          this.stackFilesPage--
+          this.getStackFiles(true)
         } else {
           this.$message({
             type: "info",
-            message: "褰撳墠宸叉槸绗竴椤�",
-          });
+            message: "褰撳墠宸叉槸绗竴椤�"
+          })
         }
       }
     },
     nextClick() {
       if (this.swiperIndex == this.swipercanvasData.length - 1) {
-        this.stackFilesPage++;
-        this.getStackFiles(true);
+        this.stackFilesPage++
+        this.getStackFiles(true)
       }
     },
     getStackFiles(onClick = false) {
-      this.getStackFileLoading = true;
-      let _this = this;
+      this.getStackFileLoading = true
+      let _this = this
       findAllFileByStackId({
         name: "",
         stackId: this.stackId,
         page: this.stackFilesPage,
         size: this.stackFilesSize,
-        type: 0,
+        type: 0
       })
         .then((res) => {
           if (res && res.success) {
             if (res.data.dataList.length > 0) {
-              this.swipercanvasData = [];
+              this.swipercanvasData = []
               this.swipercanvasData = res.data.dataList.map((item) => {
                 return {
                   name: item.name,
                   stackId: item.stack_id,
                   baseImg:
-                    item.type == 2
-                      ? `/files/${item.path.substr(
-                          item.path.lastIndexOf("/") + 1
-                        )}`
-                      : item.snapshot_url,
+                    item.type == 2 ? `/files/${item.path.substr(item.path.lastIndexOf("/") + 1)}` : item.snapshot_url,
                   type: item.type,
                   id: item.id,
-                  loading: false,
-                };
-              });
-              this.swiperIndex = 0;
-              this.$refs.swiper.swiper.activeIndex = 0;
+                  loading: false
+                }
+              })
+              this.swiperIndex = 0
+              this.$refs.swiper.swiper.activeIndex = 0
             } else {
               if (onClick) {
                 this.$message({
                   type: "warning",
-                  message: "宸叉棤鏇村鏁版嵁!",
-                });
+                  message: "宸叉棤鏇村鏁版嵁!"
+                })
               }
             }
           } else {
             this.$message({
               type: "error",
-              message: "鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!",
-            });
+              message: "鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!"
+            })
           }
-          this.getStackFileLoading = false;
+          this.getStackFileLoading = false
         })
         .catch((e) => {
-          this.getStackFileLoading = false;
-        });
+          this.getStackFileLoading = false
+        })
     },
     swiperSlideChange() {
-      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
-    },
-    mockAsync() {
-      setTimeout(() => {
-        this.mockSceneData = [
-          {
-            scenename: "name1",
-            id: 1,
-            icon: ["iconrenlianjiance", "icongetijingzhi"],
-          },
-          { scenename: "name2", id: 2, icon: ["iconchouyan-copy"] },
-          {
-            scenename: "name3",
-            id: 3,
-            icon: [
-              "iconrenshukouzhao",
-              "iconchouyan-copy",
-              "iconrenlianjiance",
-              "icongetijingzhi",
-            ],
-          },
-          {
-            scenename: "name4",
-            id: 4,
-            icon: ["iconchouyan-copy", "iconrenlianjiance", "icongetijingzhi"],
-          },
-          { scenename: "name5", id: 5, icon: ["icongetijingzhi"] },
-          {
-            scenename: "name6",
-            id: 6,
-            icon: ["iconrenshukouzhao", "icongetijingzhi"],
-          },
-          { scenename: "name7", id: 7, icon: ["iconrenlianjiance"] },
-        ];
-      }, 3000);
+      this.swiperIndex = this.$refs.swiper.swiper.activeIndex
     },
     drawBaseImg() {
       if (Array.isArray(this.$refs.canvas)) {
         if (this.$refs.canvas.length > 0) {
-          this.$refs.canvas[0].showModal();
+          this.$refs.canvas[0].showModal()
         }
       } else {
-        this.$refs.canvas.showModal();
+        this.$refs.canvas.showModal()
       }
     },
     getCanvasData(data) {
-      let polyon = { ...data };
-      polyon.camera_id = this.Camera.cameraId;
+      let polyon = { ...data }
+      polyon.camera_id = this.Camera.cameraId
       savePolygon(polyon).then((rsp) => {
-        this.Camera.getPolygon();
+        this.Camera.getPolygon()
         //this.Camera.getCameraTask();
-      });
+      })
     },
     refresh(url) {
-      this.Camera.baseImg = url;
+      this.Camera.baseImg = url
     },
     // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤
     async initCameraData(id, type) {
-      this.Camera = new VideoRuleData();
-
-      console.log("121212");
-      console.log(type);
+      this.Camera = new VideoRuleData()
 
       if (id && id !== "") {
-        this.loading = false;
-        this.Camera.cameraId = id;
+        this.loading = false
+        this.Camera.cameraId = id
+        this.Camera.gb28181 = type === 1
         if (type === 1) {
-          await this.Camera.update(true);
+          await this.Camera.update(true)
         } else {
-          await this.Camera.update();
+          await this.Camera.update()
         }
       }
 
-      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
-      this.showSysInfo = true;
+      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id
+      this.showSysInfo = true
       // 鍒ゆ柇姝e湪鎵ц瀹炴椂鎴栬�呰疆璇换鍔�
       this.PollData.CameraList.forEach((element) => {
         if (element.id === this.Camera.cameraId) {
-          this.runType = element.run_type;
+          this.runType = element.run_type
         }
-      });
+      })
     },
 
     saveSceneRule(groupRule) {
-      const payload = { ...groupRule };
-      payload.cameraIds = [this.Camera.cameraId];
-      let _this = this;
+      const payload = { ...groupRule }
+      payload.cameraIds = [this.Camera.cameraId]
+      let _this = this
       saveCameraScene(payload).then((rsp) => {
         if (rsp && rsp.success) {
-          this.Camera.update();
+          this.Camera.update()
           this.$notify({
             type: "success",
-            message: "绛栫暐淇濆瓨鎴愬姛锛�",
-          });
+            message: "绛栫暐淇濆瓨鎴愬姛锛�"
+          })
           //鍒锋柊宸︿晶鏍�
 
-          _this.$root.$children[0].$children[0].querySearchAsync("camera");
+          _this.$root.$children[0].$children[0].querySearchAsync("camera")
         }
-      });
+      })
     },
     delScenRule() {
-      this.Camera.update();
+      this.Camera.update()
     },
     changeLoading(params) {
-      this.loading = params;
+      this.loading = params
     },
     //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
     pollEnable(row) {
-      let val = 0;
+      let val = 0
       if (row) {
         if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
-          this.Camera.dealWay = true;
-          val = 1;
+          this.Camera.dealWay = true
+          val = 1
         } else {
-          this.Camera.dealWay = false;
-          val = 0;
+          this.Camera.dealWay = false
+          val = 0
         }
       } else {
-        this.Camera.dealWay = false;
-        val = -1;
+        this.Camera.dealWay = false
+        val = -1
       }
       if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
         changeRunType({
           camera_ids: [this.Camera.cameraId],
-          run_type: val,
+          run_type: val
         }).then((rsp) => {
           this.getStatus()
           if (rsp && rsp.success) {
             this.$notify({
               type: "success",
-              message: "閰嶇疆鎴愬姛",
-            });
+              message: "閰嶇疆鎴愬姛"
+            })
           } else {
             this.$notify({
               type: "error",
-              message: "閰嶇疆澶辫触",
-            });
+              message: "閰嶇疆澶辫触"
+            })
           }
-          this.TreeDataPool.fetchTreeData();
-        });
+          this.TreeDataPool.fetchTreeData()
+        })
       }
-      this.PollData.statisticTaskInfo();
+      this.PollData.statisticTaskInfo()
     },
     //瀹炴椂銆佽疆璇㈠垏鎹�
     changePoll(row) {
       //鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
-      debugger;
+      debugger
       if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
         if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
           if (row.value) {
-            this.Camera.dealWay = true;
+            this.Camera.dealWay = true
           } else {
-            this.Camera.dealWay = false;
+            this.Camera.dealWay = false
           }
-          debugger;
+          debugger
           changeRunType({
             camera_ids: [this.Camera.cameraId],
-            run_type: this.Camera.dealWay ? 1 : 0,
+            run_type: this.Camera.dealWay ? 1 : 0
           }).then((rsp) => {
             if (rsp && rsp.success) {
               this.$notify({
                 type: "success",
-                message: "閰嶇疆鎴愬姛",
-              });
+                message: "閰嶇疆鎴愬姛"
+              })
             } else {
               this.$notify({
                 type: "error",
-                message: "閰嶇疆澶辫触",
-              });
+                message: "閰嶇疆澶辫触"
+              })
             }
-          });
+          })
         } else {
           if (this.Camera.dealWay) {
-            this.Camera.dealWay = false;
-            debugger;
+            this.Camera.dealWay = false
+            debugger
             changeRunType({
               camera_ids: [this.Camera.cameraId],
-              run_type: this.Camera.dealWay ? 1 : 0,
+              run_type: this.Camera.dealWay ? 1 : 0
             }).then((rsp) => {
               if (rsp && rsp.success) {
                 this.$notify({
                   type: "success",
-                  message: "閰嶇疆鎴愬姛",
-                });
+                  message: "閰嶇疆鎴愬姛"
+                })
               } else {
                 this.$notify({
                   type: "error",
-                  message: "閰嶇疆澶辫触",
-                });
+                  message: "閰嶇疆澶辫触"
+                })
               }
-            });
+            })
           }
         }
-        this.TreeDataPool.fetchTreeData();
-        this.PollData.statisticTaskInfo();
+        this.TreeDataPool.fetchTreeData()
+        this.PollData.statisticTaskInfo()
       }
     },
     //澶嶅埗
     ctrlC() {
-      this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
-      this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
+      this.TreeDataPool.ctrlCameraId = this.Camera.cameraId
+      this.TreeDataPool.ctrlCameraName = this.Camera.cameraName
       this.$notify({
         type: "success",
-        message: "澶嶅埗绠楁硶鎴愬姛锛�",
-      });
+        message: "澶嶅埗绠楁硶鎴愬姛锛�"
+      })
     },
     ctrlV() {
       if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
         this.$notify({
           type: "warning",
-          message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�",
-        });
-        return false;
+          message: "涓嶈兘绮樿创鏈憚鍍忔満鐨勭畻娉曞埌鏈憚鍍忔満锛�"
+        })
+        return false
       }
       pasteRules({
         sourceId: this.TreeDataPool.ctrlCameraId,
-        targetIds: [this.Camera.cameraId],
+        targetIds: [this.Camera.cameraId]
       })
         .then((res) => {
           if (res && res.success) {
             this.$notify({
               type: "success",
-              message: "绮樿创绠楁硶鎴愬姛锛�",
-            });
-            this.initCameraData(this.Camera.cameraId);
+              message: "绮樿创绠楁硶鎴愬姛锛�"
+            })
+            this.initCameraData(this.Camera.cameraId)
           } else {
             this.$notify({
               type: "error",
-              message: "绮樿创绠楁硶澶辫触锛�",
-            });
+              message: "绮樿创绠楁硶澶辫触锛�"
+            })
           }
         })
         .catch((err) => {
           this.$notify({
             type: "error",
-            message: "绮樿创绠楁硶澶辫触锛�",
-          });
-        });
-    },
-  },
-};
+            message: "绮樿创绠楁硶澶辫触锛�"
+          })
+        })
+    }
+  }
+}
 </script>
 <style lang="scss">
 .el-message--info .el-message__content {

--
Gitblit v1.8.0