diff --git a/public/static/config/basicConfig.js b/public/static/config/basicConfig.js
index a823462..7ce013b 100644
--- a/public/static/config/basicConfig.js
+++ b/public/static/config/basicConfig.js
@@ -69,6 +69,12 @@ var CONFIGITEM = {
           { channelId: '37028528001321820196' },
           { channelId: '37028528001321820201' }
         ],
+        channelAreaList: [
+          '37020220001321113922'
+        ],
+        channelsArea: [
+          { channelId: '37020220001321113922'},
+        ],
         name_32:
           'General_DSS-LightWeight-Client_x86_V2.1.0.2110.R.20211106.exe',
         url_32:
diff --git a/src/views/pages/areaMonitor/components/VideoControlPlay.vue b/src/views/pages/areaMonitor/components/VideoControlPlay.vue
new file mode 100644
index 0000000..289d472
--- /dev/null
+++ b/src/views/pages/areaMonitor/components/VideoControlPlay.vue
@@ -0,0 +1,291 @@
+<!--
+ * @Author: hisense.wuhongjian
+ * @Date: 2021-08-09 15:54:31
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-01-14 21:24:55
+ * @Description: 视频播放组件
+-->
+<template>
+  <div class="video-play">
+    <div id="dom2" class="dh-view" />
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    ws: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    channelIds: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    channelList: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    splitNum: {
+      type: Number,
+      default: 4,
+    },
+  },
+  data() {
+    return {
+      // ws: DHWsInstance1,
+      showConfigVideoFlag: false,
+      activePanel: "key1",
+      isLogin: false,
+      loginType: "1",
+      loginIp: _global.config.loginInfo.loginIp,
+      userName: _global.config.loginInfo.userName,
+      userPwd: _global.config.loginInfo.userPwd,
+      loginPort: _global.config.loginInfo.loginPort,
+      // ctrlType: 'realMonitorUI', // 带监控树
+      ctrlType: "playerWin", // 带监控树
+      ctrlList: [
+        {
+          value: "ctrl1",
+          label: "控件1",
+        },
+        {
+          value: "ctrl2",
+          label: "控件2",
+        },
+        {
+          value: "ctrl3",
+          label: "控件3",
+        },
+      ],
+      splitList: [
+        {
+          value: 1,
+          label: "1 * 1",
+        },
+        
+        {
+          value: 4,
+          label: "2 * 2",
+        },
+        {
+          value: 9,
+          label: "3 * 3",
+        },
+      ],
+      displayModeList: [
+        {
+          value: 1,
+          label: "播放器预览模式",
+        },
+        {
+          value: 2,
+          label: "播放器回放模式",
+        },
+      ],
+      ctrl: "ctrl2",
+      // splitNum: 4,
+      displayMode: 1,
+      displayTimeRange: [],
+      recordPath: "C:\\DSS LightWeight\\DSS LightWeight Client\\Record\\",
+      downloadName: "",
+      downTimeRange: [],
+      downloadFormat: 0,
+      downloadFormatList: [
+        {
+          value: 0,
+          label: "dav",
+        },
+        {
+          value: 1,
+          label: "avi",
+        },
+        {
+          value: 2,
+          label: "mp4",
+        },
+      ],
+      downloadSource: 3,
+      downloadSourceList: [
+        {
+          value: 3,
+          label: "中心录像",
+        },
+        {
+          value: 2,
+          label: "设备录像",
+        },
+      ],
+      showDownloadStreamType: false,
+      downloadStreamType: 1,
+      downloadStreamTypeList: [
+        {
+          value: 1,
+          label: "主码流",
+        },
+        {
+          value: 2,
+          label: "辅码流",
+        },
+        {
+          value: 3,
+          label: "三码流",
+        },
+      ],
+      downloadIsShow: true,
+      downloadIsShowList: [
+        {
+          value: true,
+          label: "是",
+        },
+        {
+          value: false,
+          label: "否",
+        },
+      ],
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {
+    //  this.login();
+    console.log("数组是否有变化", this.channelList);
+    setTimeout(() => {
+      this.create();
+    }, 1000);
+  },
+  destroyed() {
+    console.log('销毁前钩子');
+    this.destroy();
+  },
+  activated(){
+    setTimeout(() => {
+      this.create();
+    }, 1000);
+  },
+  deactivated(){
+    this.destroy();
+  },
+  methods: {
+    /**
+     * @description: 打开视频配置弹窗
+     * @param {*}
+     * @return {*}
+     */
+    configVideo() {
+      console.log("打开视频配置弹窗");
+      // this.showConfigVideoFlag = true;
+      this.$emit("videoSetting", true);
+    },
+    refreshVideo() {
+      this.$emit("refreshVideo", true);
+    },
+    loginOut() {
+      this.ws.logout({
+        loginIp: _global.config.loginInfo.loginIp,
+      });
+    },
+    create() {
+      const params = [
+        {
+          ctrlType: this.ctrlType,
+          ctrlCode: this.ctrl,
+          ctrlProperty: {
+            displayMode: this.displayMode,
+            splitNum: this.splitNum,
+            channelList: this.channelList,
+          },
+          visible: true,
+          domId: "dom2",
+        },
+      ];
+      this.ws.createCtrl(params);
+      this.ws.on("createCtrlResult", (res) => {
+        console.info("插件返回信息12345", res);
+        // this.realTimeVideo();
+      });
+    },
+    login() {
+      // 调用登录接口
+      this.ws.login({
+        loginIp: _global.config.loginInfo.loginIp,
+        loginPort: _global.config.loginInfo.loginPort,
+        userName: _global.config.loginInfo.userName,
+        userPwd: _global.config.loginInfo.userPwd,
+        // userPwd: this.loginType == "1" ? this.userPwd : "",
+        // token: this.loginType == "2" ? this.token : "",
+      });
+      this.ws.on("loginState", (res) => {
+        this.isLogin = res;
+        if (res) {
+          console.info("登陆成功");
+          this.activePanel = "key2";
+          // this.create();
+        } else {
+          console.info("登陆失败");
+        }
+      });
+    },
+    setVisible() {
+      // 调用设置控件显隐接口
+      if (!this.isLogin) {
+        // this.$message.info("正在登陆客户端，请稍等......");
+        return false;
+      }
+      const params = [
+        {
+          ctrlCode: this.ctrl,
+          visible: !this.ws.ctrls.find((i) => {
+            if (i.ctrlCode === this.ctrl) {
+              return i;
+            }
+          }).visible,
+        },
+      ];
+      this.ws.setCtrlVisible(params);
+    },
+    realTimeVideo() {
+      const params = {
+        ctrlCode: this.ctrl,
+        channelIds: this.channelIds,
+      };
+      console.log("已监听到变化,替换播放内容", params);
+      this.ws.openCtrlPreview(params);
+    },
+    destroy() {
+      // 调用销毁控件接口
+      // if (!this.isLogin) {
+      //   this.$message.info("正在登陆客户端，请稍等......");
+      //   return false;
+      // }
+      const ctrls = this.ws.ctrls.map((i) => {
+        if (i.ctrlCode === this.ctrl) {
+          return i.ctrlCode;
+        }
+      });
+      console.log("销毁的插件名称", ctrls);
+      this.ws.destroyCtrl(ctrls);
+    },
+  },
+};
+</script>
+<style lang="scss">
+.video-play {
+  width: 100%;
+  height: 100%;
+  border: solid 1px #2ab1e9;
+  .dh-view {
+    width: 100%;
+    height: 100%;
+    background: darkgrey;
+  }
+}
+</style>
diff --git a/src/views/pages/areaMonitor/components/VideoListLeft.vue b/src/views/pages/areaMonitor/components/VideoListLeft.vue
index 51e2a2f..4a6962f 100644
--- a/src/views/pages/areaMonitor/components/VideoListLeft.vue
+++ b/src/views/pages/areaMonitor/components/VideoListLeft.vue
@@ -17,7 +17,10 @@
             </span>
       </div>
       <div class="video-List">
-        <video-play v-if="openVideo" :channel-id="channelCode"></video-play>
+        <video-control-play  
+          :ws="ws"
+          :channel-ids="channelIds"
+          :channel-list="channelList"></video-control-play>
   
       </div>
     </div>
@@ -25,23 +28,36 @@
    
   </div>
 </template>
-    <script>
+<script>
+const DHWsInstance = DHWs.getInstance({
+  reConnectCount: 2,
+  connectionTimeout: 30 * 1000,
+  messageEvents: {
+    loginState() {
+      console.log('aaaa');
+    }
+  }
+});
 import bus from "@/views/layout/bus";
 import * as echarts from "echarts";
 import VideoPlay from './VideoPlay'
+import VideoControlPlay from './VideoControlPlay'
 
 export default {
   data() {
     return {
+      ws: DHWsInstance,
       openVideo:true,
       channelCode: ['37020220001321113922'],
+      channelIds: _global.config.loginInfo.channelAreaList || ['37020220001321113922'], // 字符串数组
+      channelList: _global.config.loginInfo.channelsArea ||  [{ channelId: '37020220001321113922' }],
       videoVisible: false,
     };
   },
-  components: {VideoPlay},
+  components: {VideoPlay,VideoControlPlay},
   created() {},
   mounted() {
-  
+    this.login();
   },
   methods: {
     //打开视频列表
@@ -49,6 +65,75 @@ export default {
       this.videoVisible=!this.videoVisible
       this.$emit("IsShowLideoVisible",this.videoVisible);
     },
+    // 视频插件相关函数
+    login() {
+      // 调用登录接口
+      this.ws.detectConnectQt().then(res => {
+        if (res) {
+          // 连接客户端成功
+          this.ws.login({
+            loginIp: _global.config.loginInfo.loginIp,
+            loginPort: _global.config.loginInfo.loginPort,
+            userName: _global.config.loginInfo.userName,
+            userPwd: _global.config.loginInfo.userPwd,
+            https: 1
+          });
+          this.$message.info('登录中...');
+          this.ws.on('loginState', res => {
+            // this.isLogin = res;
+            if (res) {
+              this.$message.success('登录成功');
+              // this.activePanel = 'key2';
+            } else {
+              this.$message.info('登录失败');
+            }
+          });
+        } else {
+          // 连接客户端失败
+          // this.$message.info('请重新安装客户端');
+          this.$confirm('未检测到相关视频插件，是否进行下载？', '提示', {
+            customClass: 'fire3-message-box',
+            confirmButtonClass: 'fire3-button',
+            cancelButtonClass: 'fire3-button',
+            confirmButtonText: '下载',
+            cancelButtonText: '取消',
+            type: 'warning'
+          })
+            .then(() => {
+              const agent = this.getPCNum();
+              if (agent === 32) {
+                // 64位操作系统
+                this.downloadFile(
+                  _global.config.loginInfo.name_32,
+                  _global.config.loginInfo.url_32
+                );
+              } else {
+                // 32位操作系统
+                this.downloadFile(
+                  _global.config.loginInfo.name_64,
+                  _global.config.loginInfo.url_64
+                );
+              }
+            })
+            .catch(() => {});
+        }
+      });
+    },
+    downloadFile(name, url) {
+      const alink = document.createElement('a');
+      alink.download = name;// 文件名,大部分浏览器兼容,IE10及以下不兼容
+      alink.href = url;// 创建 url地址
+      alink.click(); // 自动点击
+    },
+     getPCNum() {
+      const agent = navigator.userAgent.toLowerCase();
+      if (agent.indexOf('win32') >= 0 || agent.indexOf('wow32') >= 0) {
+        return 32;
+      }
+      if (agent.indexOf('win64') >= 0 || agent.indexOf('wow64') >= 0) {
+        return 64;
+      }
+    }
  
 
   },