增加4格视频显示，根据登录用户站点默认显示站点

src/components/Index.vue

@@ -101,7 +101,7 @@
           </el-menu-item>
         </el-menu>
 
-        <div style="margin: 13px 0 0 0; width: 95%">
+        <div v-if="isTree" style="margin: 13px 0 0 0; width: 95%">
           <ul>
             <li style="display: flex; justify-content: space-between">
               <div style="display: flex; margin: 0 0 0 5px">
@@ -137,11 +137,15 @@
 
             <li id="tree">
               <el-tree
+                ref="treeRef"
                 :data="data"
                 :props="defaultProps"
+                node-key="id"
+                :current-node-key="firstItem"
                 :default-expand-all="true"
                 @node-click="handleNodeClick"
                 @node-contextmenu="rightClick"
+                highlight-current
               ></el-tree>
             </li>
           </ul>
@@ -193,6 +197,10 @@ import city from "../components/citydata.js";
 export default {
   data() {
     return {
+      siteId: "",
+      isTree: true,
+      firstItem: "",
+      firstShow: true,
       isRouter: true,
       iconObj: {
         20: "iconfont icon-jiankong",
@@ -239,14 +247,15 @@ export default {
       menuVisible: false,
 
       siteNameTitle: "全 部",
-      req: '', // 站点列表是否显示有无设备的站点
-			equip_type: '', //选中的设备类型
+      req: "", // 站点列表是否显示有无设备的站点
+      equip_type: "", //选中的设备类型
 
       dataObj: {
-				flag: true,
-				siteID: null,
-				allList: []
-			},
+        flag: true,
+        siteID: null,
+        allList: [],
+        cid :null
+      },
     };
   },
   created: function () {
@@ -269,6 +278,9 @@ export default {
     },
     // 监听路由变化，如果变化就将展示选中的站点名称归零为全部
     $route(to, from) {
+      if (to.path == "/index/monitor1") {
+        console.log(this.$refs.mychild);
+      }
       this.siteNameTitle = "全 部";
     },
 
@@ -305,7 +317,7 @@ export default {
   methods: {
     hCheckFun() {
       this.flag = !this.flag;
-      this.dataObj.flag = this.flag
+      this.dataObj.flag = this.flag;
     },
     getuserinfo() {
       this.$axios({
@@ -323,6 +335,8 @@ export default {
         this.userinfo = res.data;
         localStorage.setItem("have_type", this.userinfo.have_type); // 0管理员  1用户
         localStorage.setItem("staff", this.userinfo.staff); // 1是admin
+        localStorage.setItem('site_id', this.userinfo.site_id) // 站点id
+				localStorage.setItem('siteName', this.userinfo.site) // 站点name
       });
     },
 
@@ -347,7 +361,7 @@ export default {
         params: {
           req: this.req,
           equip_type: this.equip_type,
-          jk_type: '2',
+          jk_type: "2",
         },
       })
         .then((res) => {
@@ -398,24 +412,53 @@ export default {
             });
             this.data = arrList;
             console.log(arrList);
+            // 默认选中第一个站点
+            // this.siteNameTitle = data[0].child[0].site_name;
+            // this.firstItem = data[0].child[0].site_id;
+            if(localStorage.getItem('siteName')=='超级管理员'){
+							this.siteNameTitle = "瑞通集团总站"
+						}else{
+							this.siteNameTitle = localStorage.getItem('siteName');
+						}
+						this.firstItem = localStorage.getItem('site_id');
+            let data = {};
+						this.treeIterator(arrList,res => {
+							if(res.id==this.firstItem){
+								data = res
+							}
+						})
+            this.$nextTick(() => {
+              this.$refs.treeRef.setCurrentKey(this.firstItem);
+              // const childrenItem = arrList[0].children[0];
+              const childrenItem = data;
+              if (this.firstShow) {
+                this.handleNodeClick(childrenItem);
+                this.firstShow = false;
+              }
+            });
           }
         })
         .catch((err) => {
           console.log(err);
         });
     },
-
+  treeIterator(tree, func) {
+			let node, curTree = [...tree]
+			while ((node = curTree.shift())) {
+			func(node)
+			node.children && curTree.push(...node.children)
+			}
+		},
     // 树形插件
     handleNodeClick(data) {
-      console.log(data);
       // this.operateObj = data
-
       var url = this.$route.path;
+      this.siteId = data.id;
       this.siteNameTitle = data.label;
       url = url.split("/index/", 2);
       if (url[1] == "monitor1") {
         this.$refs.mychild.getJkList(data, 1);
-        this.$refs.mychild.$data.siteVal = ''
+        this.$refs.mychild.$data.siteVal = "";
         this.$refs.mychild.plotList(data, 1);
       } else {
         this.$refs.mychild.getList(data, 1);
@@ -512,25 +555,37 @@ export default {
     },
 
     // 获取到当前点击菜单的数据
-		handleOpen(key, keyPath) {
-			var data = key
-			var typeIndex = data.split('/index/')
-			if (typeIndex[1] == 'monitor1') {
-				// 性诱测报
-				this.req = 'hide'
-				this.equip_type = '6'
-			} else {
-				this.req = ''
-				this.equip_type = ''
-			}
-		},
+    handleOpen(key, keyPath) {
+      this.isTree = true;
+      var data = key;
+      var typeIndex = data.split("/index/");
+      if (typeIndex[1] == "monitor1") {
+        // 性诱测报
+        this.req = "hide";
+        this.equip_type = "6";
+        this.siteId = this.firstItem;
+        console.log(localStorage.getItem('site_id')=="0");
+        if(localStorage.getItem('site_id')=="0"){
+          this.dataObj.cid = '';
+        }else{
+          this.dataObj.cid = this.siteId;
+        }
+        
+      } else if (typeIndex[1] == "userManger1") {
+        console.log(this.$refs.mychild);
+        this.isTree = false;
+      } else {
+        this.req = "";
+        this.equip_type = "";
+      }
+    },
 
-		// 点击获取全部站点名称列表
-		allSiteListData() {
-			this.req = ''
-			this.equip_type = ''
-			this.siteListData()
-		},
+    // 点击获取全部站点名称列表
+    allSiteListData() {
+      this.req = "";
+      this.equip_type = "";
+      this.siteListData();
+    },
   },
 };
 </script>

src/pages/Monitor.vue

@@ -119,7 +119,7 @@
       <div class="nav-box">
         <!-- <div style="border: 1px solid #fff; background: #fff;"></div> -->
         <ul class="viewLists">
-          <li class="select-veido">
+          <!-- <li class="select-veido">
             <el-select
               v-model="siteVal"
               clearable
@@ -136,7 +136,7 @@
               >
               </el-option>
             </el-select>
-          </li>
+          </li> -->
 
           <li
             v-for="(item, index) in Idlist"
@@ -188,7 +188,7 @@
             class="rightCtr"
           ></div>
         </div> -->
-        <div class="btnBox" style="margin: 50px 0 0 0;">
+        <div class="btnBox" style="margin: 50px 0 0 0">
           <!-- <div class="zoom">
             无论插件还是费插件都可以放大缩小
             <span
@@ -275,7 +275,7 @@
       </div>
     </el-dialog>
     <!-- 添加设备 -->
-     <el-dialog
+    <el-dialog
       title="添加设备"
       :visible.sync="addEquipDialogVisible"
       width="400px"
@@ -308,11 +308,17 @@
         <el-button @click="addEquipDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="addEquipSubm">确定</el-button>
       </div>
-    </el-dialog> 
+    </el-dialog>
   </div>
 </template>
 <script>
 export default {
+  props: {
+    flag: {
+      type: Object,
+      default: () => {},
+    },
+  },
   data() {
     return {
       currPage: 1, //当前分页
@@ -379,33 +385,53 @@ export default {
       // }
       if (value.device_name) {
         if (value.device_name.length > 8) {
-          return `${value.device_name.slice(0, 8)}-${value.jktype}` + "...";
+          console.log(`${value.device_name.slice(0, 8)}...-${value.jktype}`);
+          return `${value.device_name.slice(0, 8)}...-${value.jktype}`;
+        }else{
+           return `${value.device_name}-${value.jktype}`;
         }
       }
     },
   },
   created() {
-    this.getJkList();
-    this.plotList("");
+    // if (this.objData && this.objData.id) {
+    //   console.log(this.objData);
+    //   this.getJKList();
+    // }
+    // this.plotList("");
   },
   watch: {
     siteVal(val) {
-      console.log("11111111111111",val);
-      if (val !== '') {
-        this.addrPolt = true
+      if (val !== "") {
+        this.addrPolt = true;
       } else {
-        this.addrPolt = false
-        this.plotData = {}
-        this.getJkList()
+        this.addrPolt = false;
+        this.plotData = {};
+        this.getJkList();
       }
-    }
+    },
+    flag: {
+      handler: function (val) {
+        console.log("valllllllllllllllllllll",val);
+        if (val.cid) {
+          const data = {
+            id: val.cid,
+          };
+          this.getJkList(data, 1)
+        }else if(val.cid === ''){
+          console.log('else',val);
+          this.getJkList()
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
 
   methods: {
     //获取视频列表
     getJkList(obj, page) {
       // this.Idlist = []
-      console.log(obj);
       if (obj) {
         console.log(obj);
         this.currPage = page;
@@ -426,13 +452,14 @@ export default {
           equip_type: 2,
           site_id: id,
           page_size: 12,
-          plot_id: this.plotData.plot_id !== undefined ? this.plotData.plot_id : '',
+          plot_id:
+            this.plotData.plot_id !== undefined ? this.plotData.plot_id : "",
         }),
       }).then((res) => {
-        console.log(res);
+        console.log(res.data.counts);
         this.Idlist = res.data.data;
-        console.log(this.Idlist)
-        this.totalPage = Math.ceil(res.data.counts / 19);
+        console.log(this.Idlist);
+        this.totalPage = Math.ceil(res.data.counts / 12);
         this.initMonitor(); //进入页面默认1屏都显示视频
       });
     },
@@ -448,7 +475,7 @@ export default {
         }),
       }).then((res) => {
         this.Idlist = res.data.data;
-        this.initMonitor()
+        this.initMonitor();
       });
     },
     //视频分页
@@ -524,10 +551,10 @@ export default {
     //分屏默认显示视频
     initMonitor() {
       this.id = this.Idlist[0].device_id; //第一台设备id
-      console.log("IdlistIdlistIdlistIdlist",this.Idlist);
+      console.log("IdlistIdlistIdlistIdlist", this.Idlist);
       this.videotape = this.Idlist[0].videotape; //第一台是否有回放
       this.divName = "my-video1"; //第一台选中
-      console.log("divNamedivName",this.divName);
+      console.log("divNamedivName", this.divName);
       this.selected = 1; //第一台选中
       for (let item = 1; item < this.divNum + 1; item++) {
         if (this.Idlist[item - 1]) {
@@ -728,12 +755,12 @@ export default {
     },
     // 进入分配设备界面
     taskFacility() {
-        this.$router.push({
-          path: `/index/addList`,
-          query: {
-            plotData: JSON.stringify(this.plotData),
-          },
-        });
+      this.$router.push({
+        path: `/index/addList`,
+        query: {
+          plotData: JSON.stringify(this.plotData),
+        },
+      });
     },
 
     // 地块列表展示
@@ -751,19 +778,19 @@ export default {
         .then((res) => {
           console.log(res);
           if (res.data) {
-          	this.equipList = res.data
-            var data = res.data
-            this.plotDataArr = data
-            var list = []
+            this.equipList = res.data;
+            var data = res.data;
+            this.plotDataArr = data;
+            var list = [];
             for (var i = 0; i < data.length; i++) {
-              var obj = {}
-              obj['value'] = data[i].plot_id
-              obj['label'] = data[i].plot_name
-              obj['equip_count'] = data[i].equip_count
-              list.push(obj)
+              var obj = {};
+              obj["value"] = data[i].plot_id;
+              obj["label"] = data[i].plot_name;
+              obj["equip_count"] = data[i].equip_count;
+              list.push(obj);
             }
-            console.log(list)
-            this.options = list
+            console.log(list);
+            this.options = list;
           }
         })
         .catch((err) => {
@@ -775,12 +802,12 @@ export default {
     plotVal(data) {
       for (var i = 0; i < this.plotDataArr.length; i++) {
         if (data == this.plotDataArr[i].plot_id) {
-          this.plotData = this.plotDataArr[i]
-          console.log(this.plotData)
-          this.getJkList()
+          this.plotData = this.plotDataArr[i];
+          console.log(this.plotData);
+          this.getJkList();
         }
       }
-    }
+    },
   },
   destroyed() {
     for (let item in this.videoObj) {
@@ -952,10 +979,9 @@ li {
         // height: 50%;
         height: 442px;
         overflow: auto;
-        padding: 0;
+        padding: 20px 0px 0px;
         li {
           padding-left: 25px;
-          padding-right: 25px;
           line-height: 34px;
           cursor: pointer;
           .viewPhoto {