From 64d345c2b1b970d5908f4cbf2fec9be29fb4ac8a Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 16 Aug 2022 16:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E5=B7=A5=E5=9C=B0)=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9B=91=E6=B5=8B=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/areaTree.vue                   | 647 +++++-------------
 .../dataBoard/digitalSite/index.vue           |   5 +-
 .../jlw/digitalSite/centerTop.vue             |  10 +-
 .../digitalSite/components/VideoDialog.vue    | 118 ++++
 4 files changed, 283 insertions(+), 497 deletions(-)
 create mode 100644 src/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue

diff --git a/src/components/areaTree.vue b/src/components/areaTree.vue
index 409a97b6..dc01c5b1 100644
--- a/src/components/areaTree.vue
+++ b/src/components/areaTree.vue
@@ -1,236 +1,130 @@
 <template>
   <div
     class="areaTreeBox"
-    :class="
-      videoType == 1 || modules == 'markingRoom' || modules == 'carManage'
-        ? 'hasVedio'
-        : 'noVideo'
-    "
+    :class="videoType == 1 || modules == 'markingRoom' || modules == 'carManage' ? 'hasVedio' : 'noVideo'"
     id="videoTreeBox"
   >
     <div
       class="areaTreeInner whiteBlock fullHeight"
-      v-show="
-        expandOnoff ||
-        videoType == 1 ||
-        modules == 'markingRoom' ||
-        modules == 'carManage'
-      "
-      :class="$props.styleType ? 'black': ''"
+      v-show="expandOnoff || videoType == 1 || modules == 'markingRoom' || modules == 'carManage'"
+      :class="$props.styleType ? 'black' : ''"
     >
       <div class="pageTitle" v-if="videoType == 1">视频列表</div>
-      <p
-        :class="
-          modules == 'markingRoom' || modules == 'carManage'
-            ? 'pageTitle'
-            : 'treeTitle'
-        "
-        v-else
-      >
+      <p :class="modules == 'markingRoom' || modules == 'carManage' ? 'pageTitle' : 'treeTitle'" v-else>
         查看全部工地
       </p>
       <div class="treeBox">
         <vue-scroll v-if="treeData.length > 0 || videoType != 1">
-          <el-tree
-            :data="treeData"
-            @node-click="handleNodeClick"
-            :props="defaultProps"
-            node-key="itemId"
-            ref="tree"
-          >
+          <el-tree :data="treeData" @node-click="handleNodeClick" :props="defaultProps" node-key="itemId" ref="tree">
             <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span v-show="data.videoName" class="icon-video" :class="data.deviceType == 2 ? 'icon-video2' : ''"> </span>
               <span
-                v-show="data.videoName"
-                class="icon-video"
-                :class="data.deviceType == 2 ? 'icon-video2' : ''"
-              >
-                <!-- <img v-if="data.deviceType==2" src="@/assets/images/icon-video2.png"> -->
-                <!-- <img v-else src="@/assets/images/icon-video.png"> -->
-              </span>
-              <!-- <el-popover v-if="modules=='markingRoom'&&data.projectName"
-                placement="top"
-                width="300"
-                trigger="hover" @show="getMarkRoomDev(data.projectSn)">
-                <el-table :data="markRoomDevList" class="tables" style="min-height:auto" height="130">
-                  <el-table-column property="laboratoryName" label="设备名称"></el-table-column>
-                  <el-table-column
-                    prop="isEnable"
-                    :label="'是否报警'"
-                    align="center"
-                    >
-                    <template slot-scope="scope">{{
-                        $t("message.alarmValueSet.dialog_edit.isEnableArr")[scope.row.isEnable]
-                    }}</template>
-                    </el-table-column>
-                  <el-table-column property="reason" label="禁用原因"></el-table-column>
-                </el-table>
-                <span slot="reference">{{ node.label }}</span>
-              </el-popover> -->
-              <span
-                :class="
-                  data.videoName
-                    ? 'videoName'
-                    : data.projectName
-                    ? 'projectName'
-                    : data.companyType == 2
-                    ? 'companyName2'
-                    : ''
-                "
+                :class="data.videoName ? 'videoName' : data.projectName ? 'projectName' : data.companyType == 2 ? 'companyName2' : ''"
                 >{{ node.label }}</span
               >
-              <span v-show="data.projectNum && videoType == 0"
-                >({{ data.projectNum }})</span
-              >
-              <el-tooltip
-                effect="dark"
-                content="播放项目所有视频"
-                placement="top"
-              >
+              <span v-show="data.projectNum && videoType == 0">({{ data.projectNum }})</span>
+              <el-tooltip effect="dark" content="播放项目所有视频" placement="top">
                 <span
                   class="playAllBtn"
-                  v-show="
-                    videoType == 1 && data.projectName && data.list.length > 0
-                  "
+                  v-show="videoType == 1 && data.projectName && data.list.length > 0"
                   @click.stop="playMutipleVideo(data)"
                 ></span>
               </el-tooltip>
-              <span
-                v-show="data.projectName && modules == 'markingRoom'"
-                class="statusImgBox"
-              >
-                <img
-                  v-show="data.standardDevStopUsingNum != 0"
-                  src="@/assets/images/no_alarm.png"
-                  alt=""
-                  srcset=""
-                />
-                <img
-                  v-show="data.standardDevNotOnline != 0"
-                  src="@/assets/images/offline_alarm.png"
-                  alt=""
-                  srcset=""
-                />
-                <img
-                  v-show="data.standardTemperatureAlarmNum != 0"
-                  src="@/assets/images/temp_alarm.png"
-                  alt=""
-                  srcset=""
-                />
-                <img
-                  v-show="data.standardHumidityAlarmNum != 0"
-                  src="@/assets/images/humi_alarm.png"
-                  alt=""
-                  srcset=""
-                />
+              <span v-show="data.projectName && modules == 'markingRoom'" class="statusImgBox">
+                <img v-show="data.standardDevStopUsingNum != 0" src="@/assets/images/no_alarm.png" alt="" srcset="" />
+                <img v-show="data.standardDevNotOnline != 0" src="@/assets/images/offline_alarm.png" alt="" srcset="" />
+                <img v-show="data.standardTemperatureAlarmNum != 0" src="@/assets/images/temp_alarm.png" alt="" srcset="" />
+                <img v-show="data.standardHumidityAlarmNum != 0" src="@/assets/images/humi_alarm.png" alt="" srcset="" />
               </span>
             </span>
           </el-tree>
         </vue-scroll>
         <div class="placeholderBox" v-else>
-          <img
-            src="@/assets/images/longguang/noData2.png"
-            alt=""
-            srcset=""
-            v-if="company == 'longguang'"
-          />
+          <img src="@/assets/images/longguang/noData2.png" alt="" srcset="" v-if="company == 'longguang'" />
           <img src="@/assets/images/noData2.png" alt="" srcset="" v-else />
-          <p>{{ $t("message.videoManage.empty") }}</p>
+          <p>{{ $t('message.videoManage.empty') }}</p>
         </div>
       </div>
     </div>
     <div
       class="onoffBtn"
       :class="expandOnoff ? 'active' : ''"
-      v-show="
-        videoType == 0 && modules != 'markingRoom' && modules != 'carManage'
-      "
+      v-show="videoType == 0 && modules != 'markingRoom' && modules != 'carManage'"
       @click="expandOnoff = !expandOnoff"
     >
-      <i
-        v-show="expandOnoff"
-        
-        class="el-icon-caret-left"
-      ></i>
-      <span v-show="!expandOnoff" 
-        ><i class="el-icon-caret-right"></i>查看所有工地</span
-      >
+      <i v-show="expandOnoff" class="el-icon-caret-left"></i>
+      <span v-show="!expandOnoff"><i class="el-icon-caret-right"></i>查看所有工地</span>
     </div>
   </div>
 </template>
 <script>
-import { getstandardDevListApi } from "@/assets/js/api/markingRoom";
-import {
-  getComapnyStatisticsListApi,
-  getComapnyVideoListApi,
-  getComapnyParentNameApi,
-} from "@/assets/js/api/company/project";
-import { getVideoItemInfoApi } from "@/assets/js/api/equipmentCenter/cameraList";
+import { getstandardDevListApi } from '@/assets/js/api/markingRoom'
+import { getComapnyStatisticsListApi, getComapnyVideoListApi, getComapnyParentNameApi } from '@/assets/js/api/company/project'
+import { getVideoItemInfoApi } from '@/assets/js/api/equipmentCenter/cameraList'
 export default {
-  props: ["videoType", "modules", "activeLive","styleType",'videoSn'],
+  props: ['videoType', 'modules', 'activeLive', 'styleType', 'videoSn'],
   data() {
     return {
       treeData: [],
       defaultProps: {
-        children: "list",
-        label: "name",
+        children: 'list',
+        label: 'name'
       },
       expandOnoff: false,
-      searchsn: "",
+      searchsn: '',
       videoList: [],
       expandKeys: [],
       numIndex: 1, //用于不用账号登录左边组织机构的点击
       markRoomDevList: [],
-      company: "",
-    };
+      company: ''
+    }
   },
   mounted() {
-    this.company = COMPANY;
-    this.loadData();
+    this.company = COMPANY
+    this.loadData()
   },
   methods: {
     getMarkRoomDev(sn) {
-      getstandardDevListApi({ projectSn: sn }).then((res) => {
-        this.markRoomDevList = res.result;
-      });
+      getstandardDevListApi({ projectSn: sn }).then(res => {
+        this.markRoomDevList = res.result
+      })
     },
     loadData() {
       console.log(isDockingToWoer)
       console.log(this.$props.videoSn)
-      if(this.$props.videoSn){
+      if (this.$props.videoSn) {
         this.searchsn = this.$props.videoSn
         console.log(this.searchsn)
-      }else{
-          if(isDockingToWoer) {
-          this.searchsn = this.$store.state.projectSn;
-
+      } else {
+        if (isDockingToWoer) {
+          this.searchsn = this.$store.state.projectSn
         } else {
-          var backArr = this.$store.state.mapBackArr;
+          var backArr = this.$store.state.mapBackArr
 
           switch (Number(this.$store.state.userInfo.accountType)) {
             case 2:
-              this.searchsn = this.$store.state.userInfo.headquartersSn;
-              this.numIndex = 2;
+              this.searchsn = this.$store.state.userInfo.headquartersSn
+              this.numIndex = 2
 
-              break;
+              break
             case 3:
-              this.searchsn = this.$store.state.userInfo.sn;
-              this.numIndex = 3;
-              break;
+              this.searchsn = this.$store.state.userInfo.sn
+              this.numIndex = 3
+              break
             case 4:
-              this.searchsn = this.$store.state.userInfo.sn;
-              this.numIndex = 4;
-              break;
+              this.searchsn = this.$store.state.userInfo.sn
+              this.numIndex = 4
+              break
             case 7:
-              this.searchsn = this.$store.state.userInfo.sn;
-              this.numIndex = 5;
-              break;
+              this.searchsn = this.$store.state.userInfo.sn
+              this.numIndex = 5
+              break
           }
           if (this.videoType == 1 && backArr.length > 0) {
-            this.searchsn = backArr[backArr.length - 1].sn;
+            this.searchsn = backArr[backArr.length - 1].sn
           }
-          if (this.$route.path.indexOf("/project/") != -1) {
-            this.searchsn = this.$store.state.projectSn;
-
+          if (this.$route.path.indexOf('/project/') != -1) {
+            this.searchsn = this.$store.state.projectSn
           }
         }
       }
@@ -246,373 +140,152 @@ export default {
       getComapnyStatisticsListApi({
         sn: this.searchsn,
         videoType: this.videoType,
-        standardType: this.modules == "markingRoom" ? 1 : 0,
-      }).then((res) => {
+        standardType: this.modules == 'markingRoom' ? 1 : 0
+      }).then(res => {
         console.log('-----tree')
         this.treeData = res.result.companyList
           ? res.result.companyList
           : res.result.projectList
           ? res.result.projectList
-          : res.result.videoList;
-        console.log('this.$route.path',this.$route.path)
+          : res.result.videoList
+        console.log('this.$route.path', this.$route.path)
         console.log(this.treeData)
 
-        if (this.$route.path.indexOf("dataBoard/digitalSite") == -1) {
-          console.log("areaTree.vue传递设备列表数据");
-          this.$emit("playParams", this.treeData);
+        if (this.$route.path.indexOf('dataBoard/digitalSite') == -1) {
+          console.log('areaTree.vue传递设备列表数据')
+          this.$emit('playParams', this.treeData)
           console.log(this.treeData)
         }
-        if (this.$route.path.indexOf("/firm/towerManage") != -1) {
-          this.$emit("getTreeData", this.treeData);
+        if (this.$route.path.indexOf('/firm/towerManage') != -1) {
+          this.$emit('getTreeData', this.treeData)
         }
         if (this.activeLive) {
-          // console.log(this.activeLive,this.treeData)
-          this.treeData.forEach((item) => {
+          this.treeData.forEach(item => {
             if (this.activeLive.devSn == item.serialNumber) {
-              this.handleNodeClick(item);
-              // console.log(item.id)
+              this.handleNodeClick(item)
               this.$nextTick(() => {
-                this.$refs["tree"].setCurrentKey(item.itemId.toString());
-              });
+                this.$refs['tree'].setCurrentKey(item.itemId.toString())
+              })
             }
-          });
+          })
         }
-        // console.log(this.activeLive,this.treeData)
-        // if(this.treeData.length>0){
-        //   this.expandKeys.push(this.treeData[0].id)
-        // }
-      });
+      })
     },
     //获取视频播放url
     getVideo(itemId, videoType, item) {
       //videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
       //playType 播放方式，1高清RTMP,2流畅RTMP,3高清HLS,4流畅HLS,5高清轻量级插件，6流畅轻量级插件
       getVideoItemInfoApi({
-        itemId: itemId,
-      }).then((res) => {
-        var result = res.result;
-        var url = "";
+        itemId: itemId
+      }).then(res => {
+        var result = res.result
+        var url = ''
 
         if (videoType == 1) {
           switch (Number(result.projectVideoConfig.playType)) {
             case 1:
-              url = result.videoInfo.rtmpHd;
-              break;
+              url = result.videoInfo.rtmpHd
+              break
             case 2:
-              url = result.videoInfo.rtmp;
-              break;
+              url = result.videoInfo.rtmp
+              break
             case 3:
-              url = result.videoInfo.hdFlvAddress;
-              break;
+              url = result.videoInfo.hdFlvAddress
+              break
             case 4:
-              url = result.videoInfo.flvAddress;
-              break;
+              url = result.videoInfo.flvAddress
+              break
             case 5:
-              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`;
-              break;
+              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.hd.live`
+              break
             case 6:
-              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
-              break;
+              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
+              break
             default:
-              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`;
-              break;
+              url = `ezopen://open.ys7.com/${result.videoInfo.deviceSerial}/${result.videoInfo.channelNo}.live`
+              break
           }
-          this.$emit("playParams", [
+          this.$emit('playParams', [
             {
               accessToken: result.accessToken,
               url: url,
               videoType: videoType,
-              playType: result.projectVideoConfig.playType,
-            },
-          ]);
+              playType: result.projectVideoConfig.playType
+            }
+          ])
         }
         if (videoType == 2) {
           // url=`imou://open.lechange.com/${item.serialNumber}/${item.channelId}/1?streamId=1`
           // this.$emit('playParams',{accessToken:result.accessToken,url:url,videoType:item.videoType})
-          this.$emit("playParams", [
+          this.$emit('playParams', [
             {
               accessToken: result.accessToken,
               url: item.liveRadioUrl,
-              videoType: item.videoType,
-            },
-          ]);
+              videoType: item.videoType
+            }
+          ])
         }
         // if(videoType==3){
         //   item.date = new Date()
         //   this.$emit('playParams',[item])
         // }
         // console.log('视频播放url',url)
-      });
+      })
     },
-    // handleNodeClick(data) {
-    //   console.log(data);
-    //   if (this.videoType == 1) {
-    //     //用于企业级视频监控页面
-    //     if (data.videoName) {
-    //       if (data.videoType == 3) {
-    //         data.date = new Date();
-    //         this.$emit("playParams", [data]);
-    //       } else {
-    //         this.getVideo(data.itemId, data.videoType, data);
-    //       }
-    //     }
-    //   } else {
-    //     var sn1 = data.projectSn ? data.projectSn : data.companySn;
-    //     var parentName = "",
-    //       parentSn = "";
-    //     // if (sn1) {
-    //     var array = this.treeData;
-    //     for (let i = 0; i < array.length; i++) {
-    //       const element = array[i];
-    //       var onoff = this.setBackArrData(sn1, element, this.numIndex);
-    //       if (onoff) {
-    //         return;
-    //       }
-    //       if (this.$store.state.userInfo.accountType == 2) {
-    //         parentName = element.companyName;
-    //         parentSn = element.companySn;
-    //       }
-
-    //       if (element.list) {
-    //         var arr2 = element.list;
-    //         for (let j = 0; j < arr2.length; j++) {
-    //           const item2 = arr2[j];
-    //           var onoff = this.setBackArrData(
-    //             sn1,
-    //             item2,
-    //             this.numIndex + 1,
-    //             parentName,
-    //             parentSn
-    //           );
-    //           if (onoff) {
-    //             return;
-    //           }
-    //           if (item2.list) {
-    //             var arr3 = item2.list;
-    //             //账号类型为2时执行
-    //             console.log("账号类型为2时执行");
-    //             for (let k = 0; k < arr3.length; k++) {
-    //               const item3 = arr3[k];
-    //               var onoff = this.setBackArrData(
-    //                 sn1,
-    //                 item3,
-    //                 this.numIndex + 2,
-    //                 parentName,
-    //                 parentSn
-    //               );
-    //               if (onoff) {
-    //                 return;
-    //               }
-    //               //  if (item3.list) {
-    //               //    console.log("8888888888");
-    //               //     var arr4 = item3.list;
-    //               //     //账号类型为2时执行
-    //               //     // console.log("账号类型为2时执行");
-    //               //     for (let k = 0; k < arr4.length; k++) {
-    //               //       const item4 = arr4[k];
-    //               //       if(item2.companyType==4){
-    //               //         parentName=element.companyName
-    //               //         parentSn=element.companySn
-    //               //       }
-    //               //       var onoff2 = this.setBackArrData(
-    //               //         sn1,
-    //               //         item4,
-    //               //         this.numIndex + 2,
-    //               //         parentName,
-    //               //         parentSn
-    //               //       );
-    //               //       if (onoff2) {
-    //               //         return;
-    //               //       }
-
-    //               //     }
-    //               //   } else if (item3.projectName) {
-    //               //     console.log("777777777");
-
-    //               //     var onoff3 = this.setBackArrData(
-    //               //       sn1,
-    //               //       item3,
-    //               //       this.numIndex + 3,
-    //               //       parentName,
-    //               //       parentSn
-    //               //     );
-    //               //     if (onoff3) {
-    //               //       return;
-    //               //     }
-    //               //   }
-    //             }
-    //           } else if (item2.projectName) {
-    //             console.log("账号类型为3时执行");
-    //             // if(item2.companyType==5){
-    //             //     parentName=element.companyName
-    //             //     parentSn=element.companySn
-    //             //   }
-    //             var onoff = this.setBackArrData(
-    //               sn1,
-    //               item2,
-    //               this.numIndex + 3,
-    //               parentName,
-    //               parentSn
-    //             );
-    //             if (onoff) {
-    //               return;
-    //             }
-    //           }
-    //         }
-    //       } else if (element.projectName) {
-    //         //账号类型为4时执行
-    //         console.log("账号类型为4时执行");
-    //         var onoff = this.setBackArrData(
-    //           sn1,
-    //           element,
-    //           this.numIndex + 3,
-    //           parentName,
-    //           parentSn
-    //         );
-    //         if (onoff) {
-    //           return;
-    //         }
-    //       }
-    //     }
-    //     // }
-
-    //     //这里是用于只点击项目生效
-    //     // if (data.projectSn) {
-    //     // var array = this.treeData;
-    //     // for (let i = 0; i < array.length; i++) {
-    //     //   const element = array[i];
-    //     //   if (element.list) {
-    //     //     var arr2 = element.list;
-    //     //     for (let j = 0; j < arr2.length; j++) {
-    //     //       const item2 = arr2[j];
-    //     //       if (item2.list) {
-    //     //         var arr3 = item2.list;
-    //     //         //账号类型为2时执行
-    //     //         console.log("账号类型为2时执行");
-    //     //         for (let k = 0; k < arr3.length; k++) {
-    //     //           const item3 = arr3[k];
-    //     //           if (item3.projectSn == data.projectSn) {
-    //     //             var arr5 = [];
-    //     //             arr5.push({
-    //     //               sn: array[i].companySn,
-    //     //               name: array[i].name,
-    //     //             });
-    //     //             arr5.push({ sn: arr2[j].companySn, name: arr2[j].name });
-    //     //             arr5.push({ sn: arr3[k].projectSn, name: arr3[k].name });
-    //     //             this.$store.commit("setMapBackArr", arr5);
-    //     //             this.$parent.initData();
-    //     //           }
-    //     //         }
-    //     //       } else if (item2.projectName) {
-    //     //         console.log("账号类型为3时执行");
-    //     //         //账号类型为3时执行
-    //     //         if (data.projectSn == item2.projectSn) {
-    //     //           var backArr = this.$store.state.mapBackArr;
-    //     //           backArr = backArr.splice(0, 1);
-    //     //           backArr.push({ name: element.name, sn: element.companySn });
-    //     //           backArr.push({ name: item2.name, sn: item2.projectSn });
-    //     //           this.$store.commit("setMapBackArr", backArr);
-    //     //           this.$parent.initData();
-    //     //         }
-    //     //       }
-    //     //     }
-    //     //   } else if (element.projectName) {
-    //     //     //账号类型为4时执行
-    //     //     console.log("账号类型为4时执行");
-    //     //     if (data.projectSn == element.projectSn) {
-    //     //       var backArr = this.$store.state.mapBackArr;
-    //     //       backArr = backArr.splice(0, 2);
-    //     //       backArr.push({ name: data.name, sn: data.projectSn });
-    //     //       this.$store.commit("setMapBackArr", backArr);
-    //     //       this.$parent.initData();
-    //     //     }
-    //     //   }
-    //     // }
-    //     // }
-    //   }
-    // },
     handleNodeClick(data) {
-      console.log(data,this.videoType, '5555');
+      console.log(data, this.videoType, '5555')
       let companyType = data.companyType
       if (this.videoType == 1) {
         //用于企业级视频监控页面
         if (data.videoName) {
           if (data.videoType == 3) {
-            data.date = new Date();
-            this.$emit("playParams", [data]);
+            data.date = new Date()
+            this.$emit('playParams', [data])
           } else {
-            this.getVideo(data.itemId, data.videoType, data);
+            this.getVideo(data.itemId, data.videoType, data)
           }
         }
       } else {
-        let sn1 = data.projectSn ? data.projectSn : data.companySn;
+        let sn1 = data.projectSn ? data.projectSn : data.companySn
         getComapnyParentNameApi({
-          sn: sn1,
-        }).then((res) => {
-          let backArr = [];
-          let data = res.result;
+          sn: sn1
+        }).then(res => {
+          let backArr = []
+          let data = res.result
           console.log(res)
           backArr.push({
             name: data.firstCompanyName,
-            sn: data.firstCompanySn,
-          });
+            sn: data.firstCompanySn
+          })
           if (data.secondCompanyName) {
             backArr.push({
               name: data.secondCompanyName,
-              sn: data.secondCompanySn,
-            });
+              sn: data.secondCompanySn
+            })
           }
           if (data.thirdCompanyName) {
             backArr.push({
               name: data.thirdCompanyName,
-              sn: data.thirdCompanySn,
-            });
+              sn: data.thirdCompanySn
+            })
           }
           if (data.projectName) {
-            backArr.push({ name: data.projectName, sn: data.projectSn });
+            backArr.push({ name: data.projectName, sn: data.projectSn })
           }
-          if(!companyType){
-            backArr[backArr.length-1].isProject = true
+          if (!companyType) {
+            backArr[backArr.length - 1].isProject = true
           }
-          console.log(companyType,backArr)
-          this.$store.commit("setMapBackArr", backArr);
-          this.$parent.initData();
-        });
+          console.log(companyType, backArr)
+          this.$store.commit('setMapBackArr', backArr)
+          this.$parent.initData()
+        })
       }
     },
-    // setBackArrData(sn1, data, index, parentName, parentSn) {
-    //   // sn1是点击的sn
-    //   var sn2 = data.projectSn ? data.projectSn : data.companySn;
-
-    //   if (sn1 == sn2) {
-    //     var backArr = this.$store.state.mapBackArr;
-    //     if (parentName) {
-    //       backArr = [];
-    //       backArr.push({ name: parentName, sn: parentSn });
-    //     }
-    //     if (data.projectSn) {
-    //       backArr = backArr.splice(0, 1);
-    //       backArr.push({ name: data.companyName, sn: data.companySn });
-    //     } else {
-    //       // 
-    //       if (backArr.length >= data.companyType - 1) {
-    //         backArr = backArr.splice(0, data.companyType - 2);
-    //       }
-    //     }
-
-    //     backArr.push({ name: data.name, sn: sn2 });
-    //     this.$store.commit("setMapBackArr", backArr);
-    //     this.$parent.initData();
-    //     return true;
-    //   } else {
-    //     return false;
-    //   }
-    // },
     playMutipleVideo(data) {
-      this.$emit("playParams", data.list);
-    },
-  },
-};
+      this.$emit('playParams', data.list)
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
 .treeTitle {
@@ -671,11 +344,9 @@ export default {
         color: #5181f6;
         // font-weight: bold;
         .icon-video {
-          background: url("../assets/images/icon-video-blue.png") center center
-            no-repeat;
+          background: url('../assets/images/icon-video-blue.png') center center no-repeat;
           &.icon-video2 {
-            background: url("../assets/images/icon-video2-blue.png") center
-              center no-repeat;
+            background: url('../assets/images/icon-video2-blue.png') center center no-repeat;
           }
         }
       }
@@ -771,11 +442,11 @@ export default {
   width: 14px;
   height: 20px;
   display: inline-block;
-  background: url("../assets/images/icon-video.png") center center no-repeat;
+  background: url('../assets/images/icon-video.png') center center no-repeat;
   // background-size: 14px auto ;
   vertical-align: top;
   &.icon-video2 {
-    background: url("../assets/images/icon-video2.png") center center no-repeat;
+    background: url('../assets/images/icon-video2.png') center center no-repeat;
   }
 }
 .playAllBtn {
@@ -788,10 +459,9 @@ export default {
   right: 0;
   top: 50%;
   transform: translateY(-50%);
-  background: url("../assets/images/icon-play.png") center center no-repeat;
+  background: url('../assets/images/icon-play.png') center center no-repeat;
   &:hover {
-    background: url("../assets/images/icon-play-blue.png") center center
-      no-repeat;
+    background: url('../assets/images/icon-play-blue.png') center center no-repeat;
   }
 }
 .statusImgBox {
@@ -811,74 +481,70 @@ export default {
       color: #5181f6;
       // font-weight: bold;
       .icon-video {
-        background: url("../assets/images/longguang/icon-video-blue.png") center
-          center no-repeat !important;
+        background: url('../assets/images/longguang/icon-video-blue.png') center center no-repeat !important;
         &.icon-video2 {
-          background: url("../assets/images/longguang/icon-video2-blue.png")
-            center center no-repeat !important;
+          background: url('../assets/images/longguang/icon-video2-blue.png') center center no-repeat !important;
         }
       }
     }
   }
   .playAllBtn {
-      &:hover {
-        background: url("../assets/images/longguang/icon-watch-video.png") center center
-          no-repeat !important;
-      }
+    &:hover {
+      background: url('../assets/images/longguang/icon-watch-video.png') center center no-repeat !important;
+    }
   }
 }
 // 以下为龙光大屏video组件引入此组件时的样式
 .black {
-    float: left;
-    background-color: #011536 !important;
-    color: white !important;
-    height: calc(100% - 70px);
-  .pageTitle{
+  float: left;
+  background-color: #011536 !important;
+  color: white !important;
+  height: calc(100% - 70px);
+  .pageTitle {
     box-sizing: border-box;
     padding: 5px 10px;
     margin-bottom: 20px;
     background-color: #021330;
     height: 20px;
     line-height: 10px;
-    &::before{
+    &::before {
       background-color: #fff;
     }
     font-size: 18px;
   }
-  .treeBox{
+  .treeBox {
     background-color: #021330 !important;
     position: relative;
   }
-  .companyName2{
-    color:#fff;
+  .companyName2 {
+    color: #fff;
     font-weight: 100 !important;
     font-size: 15px;
-    font-family: '黑体', '微软雅黑', "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif !important;
+    font-family: '黑体', '微软雅黑', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif !important;
   }
-  .custom-tree-node{
-    color:#fff;
+  .custom-tree-node {
+    color: #fff;
   }
   .areaTreeBox {
-    /deep/ .el-tree-node__expand-icon{
+    /deep/ .el-tree-node__expand-icon {
       color: #fff !important;
     }
-    /deep/ .el-tree-node__content{
+    /deep/ .el-tree-node__content {
       color: #fff !important;
-      
     }
   }
   .icon-video {
-    background: url("../assets/images/icon-video-white.png") center center no-repeat;
+    background: url('../assets/images/icon-video-white.png') center center no-repeat;
     // background-size: 14px auto ;
     vertical-align: top;
     &.icon-video2 {
-      background: url("../assets/images/icon-video2.png") center center no-repeat;
+      background: url('../assets/images/icon-video2.png') center center no-repeat;
     }
   }
   .projectName:hover {
-    color:#5181f6;
+    color: #5181f6;
     &::before {
-      content: "";
+      content: '';
       display: inline-block;
       background-color: #fff;
       width: 1.5%;
@@ -886,13 +552,13 @@ export default {
       position: absolute;
       top: 0%;
       left: 0%;
-      background-color:#5181f6;
+      background-color: #5181f6;
     }
   }
-  .custom-tree-node:hover{
-    color:#5181f6;
+  .custom-tree-node:hover {
+    color: #5181f6;
     &::before {
-      content: "";
+      content: '';
       display: inline-block;
       background-color: #fff;
       width: 1.5%;
@@ -900,9 +566,8 @@ export default {
       position: absolute;
       top: 0%;
       left: 0%;
-      background-color:#5181f6;
+      background-color: #5181f6;
     }
-    
   }
 }
 </style>
diff --git a/src/views/projectAdmin/dataBoard/digitalSite/index.vue b/src/views/projectAdmin/dataBoard/digitalSite/index.vue
index 28f95426..e91b7413 100644
--- a/src/views/projectAdmin/dataBoard/digitalSite/index.vue
+++ b/src/views/projectAdmin/dataBoard/digitalSite/index.vue
@@ -2592,7 +2592,6 @@ export default {
       this.afterAnalysisDataInfo = ''
       this.showBoltDetails = false
       this.showVideoDialog = false
-      // this.activeLiveData = ""
       this.playList = []
       this.selectList = []
       console.log(this.playList)
@@ -2902,11 +2901,9 @@ export default {
           this.showHeight = 0
           break
         case 4:
-          // this.activeLiveData = {}
-          console.log(item)
+          console.log(item, '老子操')
           this.activeLiveData = item
           this.showVideoDialog = true
-          // this.playList = []
           console.log(this.videoList, 'video')
           this.videoList.forEach(element => {
             if (element.devSn == item.devSn) {
diff --git a/src/views/projectAdmin/jlw/digitalSite/centerTop.vue b/src/views/projectAdmin/jlw/digitalSite/centerTop.vue
index 354563b2..3faa90ed 100644
--- a/src/views/projectAdmin/jlw/digitalSite/centerTop.vue
+++ b/src/views/projectAdmin/jlw/digitalSite/centerTop.vue
@@ -10,6 +10,7 @@
       ></div>
       <FaceGageDialog v-if="faceGateDialog" :close="() => (faceGateDialog = false)" :data="faceGateData" />
       <EnvironmentDialog v-if="environmentDialog" :data="environmentInfo" :close="() => (environmentDialog = false)" />
+      <VideoDialog v-if="videoDialog" :close="() => (videoDialog = false)" />
     </div>
     <div class="tabs">
       <div class="tab" :class="{ checked: index === tabIndex }" v-for="(tab, index) in tabs" :key="index" @click="changeTab(index)">
@@ -24,10 +25,11 @@ import Card from '../components/Card.vue'
 import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
 import FaceGageDialog from './components/FaceGageDialog.vue'
 import EnvironmentDialog from './components/EnvironmentDialog.vue'
+import VideoDialog from './components/VideoDialog.vue'
 import { selectWorkerAttendanceByDevApi } from '@/assets/js/api/dataBoard'
 import { getRealTimeDustNoiseDataApi } from '@/assets/js/api/environmentManage'
 export default {
-  components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog },
+  components: { Card, JNestedRingChart, FaceGageDialog, EnvironmentDialog, VideoDialog },
   props: {
     title: {
       type: String,
@@ -57,7 +59,8 @@ export default {
         ufaceDev: { deviceState: 1 }
       },
       environmentDialog: false,
-      environmentInfo: {}
+      environmentInfo: {},
+      videoDialog: false
     }
   },
   methods: {
@@ -73,6 +76,9 @@ export default {
         case 'environment':
           this.environmentDialog = true
           break
+        case 'video':
+          this.videoDialog = true
+          break
         default:
           break
       }
diff --git a/src/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue b/src/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue
new file mode 100644
index 00000000..be05a787
--- /dev/null
+++ b/src/views/projectAdmin/jlw/digitalSite/components/VideoDialog.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-dialog title="视频监测" :visible="true" :modal-append-to-body="false" width="95%" top="0vh" class="videoDialog" @close="close">
+    <div class="pointDialog_l">
+      <div class="pointDialogContent">
+        <AreaTree @playParams="getPlayParams" :activeLive="activeLiveData" :videoType="1"></AreaTree>
+        <VideoModule
+          class="playVideoBox playVideoBox2"
+          :class="{ isIframe: isIframe }"
+          :value="playList"
+          :type="'1x1'"
+          :displayBottomMod="true"
+          :winNumBer="9"
+          :autoplay="false"
+          :showCaptrue="false"
+          :showControl="false"
+          :showPlayback="false"
+          :hiddenSelectBox="true"
+          :scrrenPosition="0"
+        ></VideoModule>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import AreaTree from '@/components/areaTree'
+import VideoModule from '@/components/videoModule/videoModule'
+export default {
+  components: { AreaTree, VideoModule },
+  props: {
+    close: {
+      type: Object,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      videoList: [],
+      playList: [],
+      activeLiveData: { devSn: '' }
+    }
+  },
+  methods: {
+    getPlayParams(data) {
+      console.log(data, '大罗勒密河')
+      if (!this.showVideoDialog) {
+        this.videoList = data
+      } else {
+        this.playList = data
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.videoDialog {
+  overflow: inherit;
+  .pointDialog_l {
+    width: 100%;
+    height: 800px;
+    padding-top: 1px;
+    background-size: 100% 100%;
+    z-index: 3;
+    .pointDialogContent {
+      margin: 40px 70px;
+      height: calc(100% - 80px);
+      /deep/.areaTreeInner {
+        background-color: transparent;
+        text-align: left;
+        padding: 0;
+        height: 100%;
+        width: 224px;
+        margin-right: 25px;
+        border: 1px solid rgba(26, 76, 90, 1);
+        .pageTitle {
+          display: none;
+        }
+        .treeBox {
+          background-color: transparent;
+          height: 100%;
+        }
+        .el-tree {
+          color: white;
+        }
+      }
+    }
+  }
+}
+.el-dialog__wrapper {
+  /deep/ .el-dialog {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0px;
+    .el-dialog__body {
+      background: #262d47;
+    }
+    .el-dialog__header {
+      text-align: center;
+      background: #262d47;
+      .el-dialog__title {
+        color: #6ce9f0;
+        font-size: 17px;
+        font-weight: 900;
+        .el-dialog__headerbtn {
+          .el-dialog__close {
+            color: #262d47;
+          }
+        }
+      }
+      .el-dialog__title::before {
+        background: #262d47;
+      }
+    }
+  }
+}
+</style>