新增视频监控

README.md

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-10-24 16:44:39
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2022-11-15 23:11:19
+ * @LastEditTime: 2022-11-16 13:06:18
  * @FilePath: \dcWaterService\README.md
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -25,9 +25,11 @@ npm install gifsicle@5.1.0
 # 启动服务报错node-sass   运行 
 cnpm install node-sass@latest
 
-# 安装
-npm install --save vue-property-decorator
+
+# ts环境配置
+npm install typescript ts-loader --save-dev
 npm install --save vue-class-component
+npm install vue-property-decorator --save-dev
 
 ## 发布
 

public/index.html

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-10-24 16:47:17
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2022-10-25 09:48:31
+ * @LastEditTime: 2022-11-16 13:29:49
  * @FilePath: \dcWaterService\public\index.html
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -14,6 +14,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+   <!-- hk -->
+   <script src="./HikVision/jquery-1.12.4.min.js"></script>
+   <script src="./HikVision/jsencrypt.min.js"></script>
+   <script src="./HikVision/jsWebControl-1.0.0.min.js"></script>
   <title>德昌县智慧水务综合管理平台</title>
 </head>
 

src/views/dcSystem/vmSubsystem/MonitoringCenter/widget.vue

@@ -5,24 +5,14 @@
       <div class="listShowType">
         <span>显示方式：</span>
         <div class="button-group">
-          <el-button
-            size="mini"
-            v-for="item in typeList"
-            :key="item.type"
-            @click="changeShowType(item.type)"
-          >
+          <el-button size="mini" v-for="item in typeList" :key="item.type" @click="changeShowType(item.type)">
             <img :src="currentShowType == item.type ? item.himg : item.img" />
           </el-button>
         </div>
       </div>
     </div>
     <el-tabs v-model="currentActive" @tab-click="tabChange">
-      <el-tab-pane
-        v-for="item in tabItems"
-        :key="item.name"
-        :label="item.label"
-        :name="item.name"
-      >
+      <el-tab-pane v-for="item in tabItems" :key="item.name" :label="item.label" :name="item.name">
         <div class="leftPanel">
           <el-input
             class="searchInput"
@@ -74,227 +64,199 @@
   </div>
 </template>
 
-<script>
-import { typeList } from "../common/settings";
-import HikVideo from "../component/hikVideo.vue";
-import { getCamerList } from "../common/requestapis";
-//视频监控中心
+<script >
+import { typeList } from '../common/settings'
+import HikVideo from '../component/hikVideo.vue'
+import { getCamerList } from '../common/requestapis'
 export default {
-  name: "MonitoringCenter",
-  components: {
-    HikVideo,
-  },
+  name: 'MonitoringCenter', //视频监控中心
+  components: { HikVideo },
   data() {
     return {
       isRound: false,
-      searchDevice: "",
+      searchDevice: '',
       tabItems: [],
-
-      currentActive: "",
-
-      currentShowType: "ninth",
-
+      currentActive: '',
+      currentShowType: 'ninth',
       currentShowNum: 0,
-
       cameraList: [],
-
       cameraShowList: [],
-
       //树参数
       treeData: [],
-
       originalData: [],
-
       defaultcheckedList: [],
-
       defaultProps: {
-        children: "children",
-        label: "label",
+        children: 'children',
+        label: 'label'
       },
-
       //分页参数
       pageparam: {
         current: 1,
         total: 0,
-        size: 9,
+        size: 9
       },
       intervalTime: {
         intervalId: null, //定时器
-        homeInterval: 10000, //间隔时间
-      },
-    };
+        homeInterval: 10000 //间隔时间
+      }
+    }
+  },
+  //computed
+  get typeList() {
+    return typeList
   },
   computed: {
     typeList() {
-      return typeList;
-    },
+      return typeList
+    }
   },
+  //watch
   watch: {
-    searchDevice(nVal, oVal) {
-      this.$refs[`tree${this.currentActive}`][0].filter(nVal);
+    searchDevice() {
+      this.$refs[`tree${this.currentActive}`][0].filter(val)
     },
-    isRound(nVal, oVal) {
-      nVal ? this.dataRefreh() : this.clear();
+    isRound(val) {
+      val ? this.dataRefreh() : this.clear()
     },
-    currentShowType(nVal, oVal) {
-      switch (nVal) {
-        case this.typeList[0].type:
-          this.currentShowNum = 1;
-          break;
-        case this.typeList[1].type:
-          this.currentShowNum = 4;
-          break;
-        case this.typeList[2].type:
-          this.currentShowNum = 9;
-          break;
-      }
+    currentShowType: {
+      handler(val) {
+        switch (val) {
+          case this.typeList[0].type:
+            this.currentShowNum = 1
+            break
+          case this.typeList[1].type:
+            this.currentShowNum = 4
+            break
+          case this.typeList[2].type:
+            this.currentShowNum = 9
+            break
+        }
+      },
+      immediate: true
     },
-    cameraList(nVal, oVal) {
-      this.pageparam.total = nVal.length
+    cameraList(val) {
+      this.pageparam.total = val.length
       //显示数量改变
-       this.cameraShowList = this.cameraList.filter((e, i) => i < this.currentShowNum)
+      this.cameraShowList = this.cameraList.filter((e, i) => i < this.currentShowNum)
     }
   },
+
   mounted() {
-    this.getCameras({ current: 1, size: 999 });
+    this.getCameras({ current: 1, size: 999 })
   },
   methods: {
     //tab切换时，相关参数重置
     tabChange(tab) {
-      this.currentShowType = "ninth";
-      this.currentActive = tab.name;
+      this.currentShowType = 'ninth'
+      this.currentActive = tab.name
       this.pageparam = {
         current: 1,
         total: 0,
-        size: 9,
-      };
-      tab.name !== "all"
+        size: 9
+      }
+      tab.name !== 'all'
         ? this.initialDisplay(
             this.originalData.filter((e) => e.belongStatusName == tab.name),
             false
           )
-        : this.initialDisplay(this.originalData, true);
+        : this.initialDisplay(this.originalData, true)
     },
     //树形列表过滤查找
     filterNode(value, data) {
-      if (!value) return true;
-      return data.label.indexOf(value) !== -1;
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
     },
     changeShowType(type) {
-      this.currentShowType = type;
+      this.currentShowType = type
     },
     async getCameras(params) {
-      const res = await getCamerList(params);
-      const result = res.result.result.records;
-      this.originalData = result;
-      this.initialDisplay(this.originalData, true);
+      const res = await getCamerList(params)
+      const result = res.result.records
+      this.originalData = result
+      this.initialDisplay(this.originalData, true)
     },
     //初始显示
     initialDisplay(data, isShowAll) {
-      console.log(data, isShowAll);
-      this.cameraList = data;
-      this.pageparam.total = data.length;
+      this.cameraList = data
+      this.pageparam.total = data.length
       this.defaultcheckedList = data.map((i) => {
-        return i.id;
-      });
-      this.createTreeStructure([...data], isShowAll);
+        return i.id
+      })
+      this.createTreeStructure([...data], isShowAll)
     },
     //树结构生成
     createTreeStructure(data, isShowAll) {
-      const length = data.length;
-      let tree = [{ id: -1, label: "全部", children: [] }],
-        tietms = [];
+      const length = data.length
+      let tree = [{ id: -1, label: '全部', children: [] }],
+        tietms = []
       for (let index = 0; index < length; index++) {
-        const item = data[index];
-        const existItem = tree[0].children.find(
-          (e) => e.label === item.belongStatusName
-        );
+        const item = data[index]
+        const existItem = tree[0].children.find((e) => e.label === item.belongStatusName)
         if (!existItem) {
           tree[0].children.push({
             id: index,
             label: item.belongStatusName,
-            children: [
-              {
-                id: index,
-                label: item.waterName,
-                children: [{ ...item, label: item.name }],
-              },
-            ],
-          });
+            children: [{ id: index, label: item.waterName, children: [{ ...item, label: item.name }] }]
+          })
           //tab栏新建类别
-          tietms.push({
-            label: item.belongStatusName,
-            name: item.belongStatusName,
-            num: 1,
-          });
+          tietms.push({ label: item.belongStatusName, name: item.belongStatusName, num: 1 })
         } else {
           //tab栏类别数量统计
-          tietms.find((e) => e.label == item.belongStatusName).num++;
-          const existChildrenItem = existItem.children.find(
-            (e) => e.label === item.waterName
-          );
+          tietms.find((e) => e.label == item.belongStatusName).num++
+          const existChildrenItem = existItem.children.find((e) => e.label === item.waterName)
           if (!existChildrenItem) {
-            existItem.children.push({
-              id: index,
-              label: item.waterName,
-              children: [{ ...item, label: item.name }],
-            });
+            existItem.children.push({ id: index, label: item.waterName, children: [{ ...item, label: item.name }] })
           } else {
-            existChildrenItem.children.push({ ...item, label: item.name });
+            existChildrenItem.children.push({ ...item, label: item.name })
           }
         }
       }
       if (isShowAll) {
-        this.tabItems = tietms;
-        this.tabItems.unshift({ label: `全部`, name: "all", num: length });
+        this.tabItems = tietms
+        this.tabItems.unshift({ label: `全部`, name: 'all', num: length })
         this.tabItems = this.tabItems.map((i) => {
-          return { label: i.label + "(" + i.num + ")", name: i.name };
-        });
-        this.currentActive = this.tabItems[0].name;
-        this.treeData = tree;
+          return { label: i.label + '(' + i.num + ')', name: i.name }
+        })
+        this.currentActive = this.tabItems[0].name
+        this.treeData = tree
       } else {
-        this.treeData = tree[0].children;
+        this.treeData = tree[0].children
       }
     },
     handleCheckChange(current, checkedData) {
-      this.cameraList = checkedData.checkedNodes.filter(
-        (item) => !item.children
-      );
+      this.cameraList = checkedData.checkedNodes.filter((item) => !item.children)
     },
     handleCurrentChange(currentPage) {
-      this.pageparam.current = currentPage;
-      this.pageChange();
+      this.pageparam.current = currentPage
+      this.pageChange()
     },
     pageChange() {
       this.cameraShowList = this.cameraList.slice(
         (this.pageparam.current - 1) * this.currentShowNum,
         this.pageparam.current * this.currentShowNum
-      );
+      )
     },
     //数据刷新
     dataRefreh() {
       if (this.intervalTime.intervalId != null) {
-        return;
+        return
       }
       this.intervalTime.intervalId = setInterval(() => {
-        if (
-          this.pageparam.current >=
-          this.$refs[`pagination${this.currentActive}`][0].pageSize
-        ) {
-          this.pageparam.current = 1;
+        if (this.pageparam.current >= this.$refs[`pagination${this.currentActive}`][0].pageSize) {
+          this.pageparam.current = 1
         } else {
-          this.pageparam.current += 1;
+          this.pageparam.current += 1
         }
-        this.pageChange();
-      }, this.intervalTime.homeInterval);
+        this.pageChange()
+      }, this.intervalTime.homeInterval)
     },
     //清除定时器
     clear() {
-      clearInterval(this.intervalTime.intervalId); //清除计时器
-      this.intervalTime.intervalId = null; //设置为null
-    },
-  },
-};
+      clearInterval(this.intervalTime.intervalId) //清除计时器
+      this.intervalTime.intervalId = null //设置为null
+    }
+  }
+}
 </script>
 
 <style lang='scss' scoped>
@@ -351,7 +313,7 @@ export default {
     .el-tabs__item {
       background: unset !important;
     }
-    .el-tabs__content > div[role="tabpanel"] {
+    .el-tabs__content > div[role='tabpanel'] {
       display: flex;
       padding: 10px;
     }

src/views/dcSystem/vmSubsystem/common/requestapis.js

@@ -2,7 +2,7 @@
  * @Author: tengmingxue 1473375109@qq.com
  * @Date: 2022-11-15 23:15:11
  * @LastEditors: tengmingxue 1473375109@qq.com
- * @LastEditTime: 2022-11-15 23:39:38
+ * @LastEditTime: 2022-11-16 13:24:35
  * @FilePath: \dcWaterService\src\views\dcSystem\vmSubsystem\common\requestapis.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -11,7 +11,7 @@ const getCamera = '212022032200016'//中台 => 摄像头列表
 //中台调用
 export function callInterface(data) {
     return request({
-        url: 'dc/interfacemanage/callInterface',
+        url: '/dc/interfacemanage/callInterface',
         method: 'post',
         data: data
     })
@@ -19,4 +19,4 @@ export function callInterface(data) {
 //摄像头列表
 export function getCamerList(params) {
     return callInterface({ code: getCamera, parameter: params })
-}
+}

src/views/dcSystem/vmSubsystem/common/requestapis.ts

@@ -0,0 +1,22 @@
+/*
+ * @Author: tengmingxue 1473375109@qq.com
+ * @Date: 2022-11-16 10:33:42
+ * @LastEditors: tengmingxue 1473375109@qq.com
+ * @LastEditTime: 2022-11-16 14:58:36
+ * @FilePath: \dcWaterService\src\views\dcSystem\vmSubsystem\common\requestapis.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import request from '@/utils/request'
+const getCamera = '212022032200016'//中台 => 摄像头列表
+//中台调用
+export function callInterface(data) {
+    return request({
+        url: 'dc/interfacemanage/callInterface',
+        method: 'post',
+        data: data
+    })
+}
+//摄像头列表
+export function getCamerList(params) {
+    return callInterface({ code: getCamera, parameter: params })
+}

src/views/dcSystem/vmSubsystem/common/settings.ts

@@ -0,0 +1,16 @@
+const singleImg = require('../images/single.png')
+const fourthImg = require('../images/fourth.png')
+// const sixthImg = require('../images/sixth.png')
+const ninthImg = require('../images/ninth.png')
+
+const singleImgH = require('../images/singleH.png')
+const fourthImgH = require('../images/fourthH.png')
+// const sixthImgH = require('../images/sixthH.png')
+const ninthImgH = require('../images/ninthH.png')
+
+export const typeList = [
+    { type: 'single', img: singleImg, himg: singleImgH },
+    { type: 'fourth', img: fourthImg, himg: fourthImgH },
+    // { type: 'sixth', img: sixthImg, himg: sixthImgH },
+    { type: 'ninth', img: ninthImg, himg: ninthImgH },
+]

src/views/dcSystem/vmSubsystem/component/hikVideo.vue

@@ -6,156 +6,152 @@
     element-loading-spinner="el-icon-loading"
   >
     <div id="playMain" class="playMain">
-      <div
-        :id="`playWnd${videoPanelId}`"
-        class="playWnd"
-        :ref="`playWnd${this.videoPanelId}`"
-      ></div>
+      <div :id="`playWnd${videoPanelId}`" class="playWnd" :ref="`playWnd${this.videoPanelId}`"></div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-const WebControl = window.WebControl;
-const JSEncrypt = window.JSEncrypt;
-//视频监控中心
+<script >
+const WebControl = window.WebControl
+const JSEncrypt = window.JSEncrypt
 export default {
-  name: "hikVideo",
+  name: 'hikVideo',
+  props: {
+    videoPanelId: {},
+    showNum: {},
+    cameraList: {}
+  },
+  watch: {
+    cameraList() {
+      this.initPlugin()
+    },
+    showNum(val) {
+      switch (val) {
+        case 'single':
+          this.initparam.layout = '1x1'
+          break
+        case 'fourth':
+          this.initparam.layout = '2x2'
+          break
+        case 'ninth':
+          this.initparam.layout = '3x3'
+          break
+      }
+      this.initPlugin()
+    }
+  },
   data() {
     return {
-      videoPanelId: "",
-      showNum: "",
-      cameraList: [],
       loading: true,
+
+      //视频播放插件参数
       initparam: {
-        appKey: "26361415",
-        secret: "12hp9GRlHu1BkL09nL0Q",
-        apiIp: "183.255.30.6",
+        appKey: '26361415',
+        secret: '12hp9GRlHu1BkL09nL0Q',
+        apiIp: '183.255.30.6',
         apiPort: 10443,
         isLive: 0,
-        layout: "3x3",
+        layout: '3x3'
       },
-      cameraIndexCode: "",
+      cameraIndexCode: '',
       oWebControl: null,
-      settingId: "",
+      settingId: '',
       initCount: 0,
-      pubKey: "",
-    };
-  },
-  watch: {
-    cameraList(nVal, oVal) {
-      this.initPlugin();
-    },
-    showNum(nVal, oVal) {
-      switch (nVal) {
-        case "single":
-          this.initparam.layout = "1x1";
-          break;
-        case "fourth":
-          this.initparam.layout = "2x2";
-          break;
-        case "ninth":
-          this.initparam.layout = "3x3";
-          break;
-      }
-      this.initPlugin();
-    },
+      pubKey: ''
+    }
   },
+  //computed
+
   computed: {
     playWnd() {
-      return this.$refs[`playWnd${this.videoPanelId}`];
-    },
+      return this.$refs[`playWnd${this.videoPanelId}`]
+    }
   },
   mounted() {
-    this.initPlugin();
+    this.initPlugin()
   },
   methods: {
     //初始化插件
     initPlugin() {
-      this.destroyWnd();
-      const that = this;
-      this.settingId = this.videoPanelId;
+      this.destroyWnd()
+      const that = this
+      this.settingId = this.videoPanelId
       this.oWebControl = new WebControl({
-        szPluginContainer: "playWnd" + that.settingId, // 指定容器id
+        szPluginContainer: 'playWnd' + that.settingId, // 指定容器id
         iServicePortStart: 15900, // 指定起止端口号，建议使用该值
         iServicePortEnd: 15909,
-        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
+        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
         cbConnectSuccess: () => {
-          that.initCount = 0;
+          that.initCount = 0
           // ----------创建WebControl实例成功 启动插件---------
           // ---------------2.JS_StartService-----------------
           // 创建WebControl实例成功
           that.oWebControl
-            .JS_StartService("window", {
+            .JS_StartService('window', {
               // WebControl实例创建成功后需要启动服务
-              dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
+              dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死
             })
             .then(
               () => {
                 // 启动插件服务成功
-                that.oWebControl.JS_SetWindowControlCallback({});
+                that.oWebControl.JS_SetWindowControlCallback({})
                 //JS_CreateWnd创建视频播放窗口，宽高可设定
                 that.oWebControl
-                  .JS_CreateWnd(
-                    "playWnd" + that.settingId,
-                    that.playWnd.offsetWidth,
-                    that.playWnd.offsetHeight
-                  )
+                  .JS_CreateWnd('playWnd' + that.settingId, that.playWnd.offsetWidth, that.playWnd.offsetHeight)
                   .then(() => {
-                    this.oWebControl.JS_HideWnd();
-                    this.init();
-                  });
+                    this.oWebControl.JS_HideWnd()
+                    this.init()
+                  })
               },
               function () {
                 // 启动插件服务失败
-                console.log("JS_CreateWnd error");
+                console.log('JS_CreateWnd error')
               }
-            );
+            )
         },
         cbConnectError: () => {
           // 创建WebControl实例失败
-          that.oWebControl = null;
-          WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
-          that.initCount++;
+          that.oWebControl = null
+          WebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数，采用wakeup来启动程序
+          that.initCount++
           if (that.initCount < 3) {
             setTimeout(() => {
-              that.initPlugin(); // 重新创建播放实例
-            }, 3000);
+              that.initPlugin() // 重新创建播放实例
+            }, 3000)
           } else {
-            window.open("/HikVision/plugin/VideoWebPlugin.exe", "_blank");
+            window.open('/HikVision/plugin/VideoWebPlugin.exe', '_blank')
             // $('#playWnd').html('插件启动失败，请检查插件是否安装！')
-            this.$message("插件启动失败，请检查插件是否安装！");
+            this.$message('插件启动失败，请检查插件是否安装！')
           }
         },
         cbConnectClose: () => {
           //bNormalClose
           // 异常断开：bNormalClose = false
           // JS_Disconnect正常断开：bNormalClose = true
-          this.oWebControl = null;
-        },
-      });
+          this.oWebControl = null
+        }
+      })
     },
     //初始化
     init() {
       this.getPubKey(() => {
-        var appkey = this.initparam.appKey; //综合安防管理平台提供的appkey，必填
-        var secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret，必填
-        var ip = this.initparam.apiIp; //综合安防管理平台IP地址，必填
-        var playMode = this.initparam.isLive; //初始播放模式：0-预览，1-回放
-        var port = this.initparam.apiPort; //综合安防管理平台端口，若启用HTTPS协议，默认443
-        var snapDir = ""; //抓图存储路径
-        var videoDir = ""; //紧急录像或录像剪辑存储路径
-        var layout = this.initparam.layout; //playMode指定模式的布局
-        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
-        var encryptedFields = "secret"; //加密字段，默认加密领域为secret
-        var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
-        var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
-        var buttonIDs =
-          "0,1,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
+        var appkey = this.initparam.appKey //综合安防管理平台提供的appkey，必填
+        var secret = this.setEncrypt(this.initparam.secret) //综合安防管理平台提供的secret，必填
+        var ip = this.initparam.apiIp //综合安防管理平台IP地址，必填
+        var playMode = this.initparam.isLive //初始播放模式：0-预览，1-回放
+        var port = this.initparam.apiPort //综合安防管理平台端口，若启用HTTPS协议，默认443
+        var snapDir = '' //抓图存储路径
+        var videoDir = '' //紧急录像或录像剪辑存储路径
+        var layout = this.initparam.layout //playMode指定模式的布局
+        var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
+        var encryptedFields = 'secret' //加密字段，默认加密领域为secret
+        var showToolbar = 0 //是否显示工具栏，0-不显示，非0-显示
+        var showSmart = 1 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
+        var buttonIDs = '0,1,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
         this.oWebControl
           .JS_RequestInterface({
             //通用请求响应接口
-            funcName: "init", // 功能标识
+            funcName: 'init', // 功能标识
             argument: JSON.stringify({
               appkey: appkey, //API网关提供的appkey
               secret: secret, //API网关提供的secret
@@ -169,48 +165,45 @@ export default {
               encryptedFields: encryptedFields, //加密字段
               showToolbar: showToolbar, //是否显示工具栏
               showSmart: showSmart, //是否显示智能信息
-              buttonIDs: buttonIDs, //自定义工具条按钮
+              buttonIDs: buttonIDs //自定义工具条按钮
               //              toolBarButtonIDs:toolBarButtonIDs//自定义工具条按钮字符串
               //              name:name//无效
-            }),
+            })
           })
           .then(() => {
             // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
-            this.oWebControl.JS_Resize(
-              this.playWnd.offsetWidth,
-              this.playWnd.offsetHeight
-            );
+            this.oWebControl.JS_Resize(this.playWnd.offsetWidth, this.playWnd.offsetHeight)
             if (this.initparam.isLive == 0) {
-              this.videoPreview();
+              this.videoPreview()
             } else {
-              this.startPlayback(); //初始化后开启回放
+              this.startPlayback() //初始化后开启回放
             }
-            this.oWebControl.JS_ShowWnd();
-          });
-      });
+            this.oWebControl.JS_ShowWnd()
+          })
+      })
     },
     //获取公钥
     getPubKey(callback) {
-      const that = this;
+      const that = this
       that.oWebControl
         .JS_RequestInterface({
-          funcName: "getRSAPubKey",
+          funcName: 'getRSAPubKey',
           argument: JSON.stringify({
-            keyLength: 1024,
-          }),
+            keyLength: 1024
+          })
         })
         .then(function (oData) {
           if (oData.responseMsg.data) {
-            that.pubKey = oData.responseMsg.data;
-            callback();
+            that.pubKey = oData.responseMsg.data
+            callback()
           }
-        });
+        })
     },
     //RSA加密
     setEncrypt(value) {
-      var encrypt = new JSEncrypt();
-      encrypt.setPublicKey(this.pubKey);
-      return encrypt.encrypt(value);
+      var encrypt = new JSEncrypt()
+      encrypt.setPublicKey(this.pubKey)
+      return encrypt.encrypt(value)
     },
     /**
      * @description 预览视频
@@ -220,30 +213,27 @@ export default {
       this.cameraList.forEach((item, index) => {
         this.startPreview({
           cameraIndexCode: item.code,
-          wndId: index + 1,
-        }); //初始化后开启预览
-      });
+          wndId: index + 1
+        }) //初始化后开启预览
+      })
 
       // 自定义缩放
-      window.addEventListener("resize", () => {
-        this.oWebControl.JS_Resize(
-          this.playWnd.offsetWidth,
-          this.playWnd.offsetHeight
-        );
-      });
+      window.addEventListener('resize', () => {
+        this.oWebControl.JS_Resize(this.playWnd.offsetWidth, this.playWnd.offsetHeight)
+      })
     },
     //视频“预览”功能
     startPreview(cameraparam) {
-      let streamMode = 0; //主子码流标识：0-主码流，1-子码流
-      let transMode = 1; //传输协议：0-UDP，1-TCP
-      let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
-      let wndId = cameraparam.wndId; //播放窗口序号（在2x2以上布局下可指定播放窗口）  -1
+      let streamMode = 0 //主子码流标识：0-主码流，1-子码流
+      let transMode = 1 //传输协议：0-UDP，1-TCP
+      let gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用
+      let wndId = cameraparam.wndId //播放窗口序号（在2x2以上布局下可指定播放窗口）  -1
       //去除cameraIndexCode内前后的空格
-      let cameraIndexCode = cameraparam.cameraIndexCode.replace(/(^\s*)/g, ""); //获取输入的监控点编号值，必填
-      cameraIndexCode = cameraparam.cameraIndexCode.replace(/(\s*$)/g, "");
+      let cameraIndexCode = cameraparam.cameraIndexCode.replace(/(^\s*)/g, '') //获取输入的监控点编号值，必填
+      cameraIndexCode = cameraparam.cameraIndexCode.replace(/(\s*$)/g, '')
       this.oWebControl
         .JS_RequestInterface({
-          funcName: "startPreview",
+          funcName: 'startPreview',
           argument: JSON.stringify({
             cameraIndexCode: cameraIndexCode,
             streamMode: streamMode,
@@ -251,29 +241,29 @@ export default {
             gpuMode: gpuMode,
             wndId: wndId,
             ezvizDirect: 0,
-            cascade: 1,
-          }),
+            cascade: 1
+          })
         })
-        .then(function (oData) {});
+        .then(function (oData) {})
     },
     //视频“回放”功能
     startPlayback() {
-      var startTimeStamp = new Date().getTime();
-      var endTimeStamp = startTimeStamp + 60 * 60 * 24 * 1000 - 1;
-      let recordLocation = 1; //录像存储类型 0-中心存储 1-设备存储
-      let streamMode = 0; //主子码流标识：0-主码流，1-子码流
-      let transMode = 1; //传输协议：0-UDP，1-TCP
-      let gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
+      var startTimeStamp = new Date().getTime()
+      var endTimeStamp = startTimeStamp + 60 * 60 * 24 * 1000 - 1
+      let recordLocation = 1 //录像存储类型 0-中心存储 1-设备存储
+      let streamMode = 0 //主子码流标识：0-主码流，1-子码流
+      let transMode = 1 //传输协议：0-UDP，1-TCP
+      let gpuMode = 0 //是否启用GPU硬解，0-不启用，1-启用
       //      let wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
       //      let cameraIndexCode = this.cameraIndexCode; //获取输入的监控点编号值，必填
-      let cameraIndexCode = this.cameraIndexCode; //获取输入的监控点编号值，必填
+      let cameraIndexCode = this.cameraIndexCode //获取输入的监控点编号值，必填
 
       //去除cameraIndexCode内前后的空格
-      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
-      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
+      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')
+      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')
 
       this.oWebControl.JS_RequestInterface({
-        funcName: "startPlayback",
+        funcName: 'startPlayback',
         argument: JSON.stringify({
           cameraIndexCode: cameraIndexCode, //监控点编号
           recordLocation: recordLocation, // 录像存储类型
@@ -282,29 +272,30 @@ export default {
           gpuMode: gpuMode, //是否开启GPU硬解
           //          wndId: wndId, //可指定播放窗口
           startTimeStamp: Math.floor(startTimeStamp / 1000).toString(), //录像查询开始时间戳，单位：秒
-          endTimeStamp: Math.floor(endTimeStamp / 1000).toString(), //录像结束开始时间戳，单位：秒
-        }),
-      });
+          endTimeStamp: Math.floor(endTimeStamp / 1000).toString() //录像结束开始时间戳，单位：秒
+        })
+      })
     },
 
     // 销毁插件
     destroyWnd() {
       if (this.oWebControl) {
-        this.oWebControl.JS_HideWnd();
+        this.oWebControl.JS_HideWnd()
         this.oWebControl
           .JS_DestroyWnd({
-            funcName: "destroyeWnd",
+            funcName: 'destroyeWnd'
           })
           .then(function (oData) {
-            console.log("销毁成功");
-          });
+            console.log('销毁成功')
+          })
       }
-    },
-    beforeDestroy() {
-      this.destroyWnd();
-    },
+    }
   },
-};
+
+  beforeDestroy() {
+    this.destroyWnd()
+  }
+}
 </script>
 
 <style lang='scss' scoped>

vue.config.js

@@ -40,21 +40,7 @@ module.exports = {
         pathRewrite: {
           '^/backstage': ''
         }
-      },
-      '/api': {
-        target: 'http://183.255.30.6:8087', //hk视频接口代理
-        changeOrigin: true,
-        pathRewrite: {
-          '^/api': ''
-        }
-      },
-      '/': {
-        target: 'http://192.168.2.238:2111', // 后台接口地址
-        changeOrigin: true,
-        pathRewrite: {
-          '^/': ''
-        }
-      },
+      }
     }
     // before: require('./mock/mock-server.js')
   },