默认站点视频增加4格

src/components/Index.vue

@@ -108,7 +108,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">
@@ -117,7 +117,15 @@
                   src="../assets/images/zhankai.png"
                   alt=""
                 />
-                <div style="font-weight: 550; font-size: 14px; margin: 0px 0px 0px 4px;">站点管理</div>
+                <div
+                  style="
+                    font-weight: 550;
+                    font-size: 14px;
+                    margin: 0px 0px 0px 4px;
+                  "
+                >
+                  站点管理
+                </div>
               </div>
               <img
                 style="
@@ -132,13 +140,17 @@
                 v-if="userinfo.staff == '1'"
               />
             </li>
-
             <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>
@@ -152,7 +164,7 @@
         </ul>
       </div>
       <el-main>
-        <router-view ref="mychild"></router-view>
+        <router-view ref="mychild" :siteId="firstItem"></router-view>
       </el-main>
     </el-container>
 
@@ -190,6 +202,9 @@ import city from "../components/citydata.js";
 export default {
   data() {
     return {
+      isTree:true,
+      firstItem: "",
+      firstShow: true,
       isRouter: true,
       iconObj: {
         20: "iconfont icon-jiankong",
@@ -237,9 +252,9 @@ export default {
       menuVisible: false,
       operateObj: {}, // 右键点击时获取当前的数据信息
 
-      siteNameTitle: '全 部',
-      req: '', // 站点列表是否显示有无设备的站点
-			equip_type: '' //选中的设备类型
+      siteNameTitle: "全 部",
+      req: "", // 站点列表是否显示有无设备的站点
+      equip_type: "", //选中的设备类型
     };
   },
   created: function () {
@@ -252,18 +267,17 @@ export default {
     }
     this.options = city;
 
-
-    var url = this.$route.path
-		url = url.split('/index', 2)
+    var url = this.$route.path;
+    url = url.split("/index", 2);
     // 获取当前点击的设备类型
-		if (url[1] == '/monitor') {
-			// 性诱测报
-			this.req = 'hide'
-			this.equip_type = '6'
-		} else {
-			this.req = ''
-			this.equip_type = ''
-		}
+    if (url[1] == "/monitor") {
+      // 性诱测报
+      this.req = "hide";
+      this.equip_type = "6";
+    } else {
+      this.req = "";
+      this.equip_type = "";
+    }
   },
   watch: {
     addSite(val) {
@@ -281,14 +295,14 @@ export default {
       // }
     },
     // 监听路由变化，如果变化就将展示选中的站点名称归零为全部
-		$route(to, from) {
-			this.siteNameTitle = '全 部'
-		},
+    $route(to, from) {
+      this.siteNameTitle = "全 部";
+    },
 
     equip_type(val) {
-			console.log(val)
-			this.siteListData()
-		}
+      console.log(val);
+      this.siteListData();
+    },
   },
   methods: {
     hCheckFun() {
@@ -310,6 +324,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
       });
     },
 
@@ -327,12 +343,11 @@ export default {
 
     // 树形插件
     handleNodeClick(data) {
-      console.log(data);
       // this.operateObj = data
       // this.$refs.mychild.getEquipList(data, 1)
 
       var url = this.$route.path;
-      this.siteNameTitle = data.label
+      this.siteNameTitle = data.label;
       url = url.split("/index/", 2);
       console.log(url);
       if (url[1] == "monitor") {
@@ -350,12 +365,13 @@ export default {
         params: {
           req: this.req,
           equip_type: this.equip_type,
-          jk_type: '1'
-        }
+          jk_type: "1",
+        },
       })
         .then((res) => {
           if (res.data) {
             var data = res.data;
+            console.log("数据数据", this.firstItem, res.data);
             var arrList = [];
             var list = data.forEach((item) => {
               if (
@@ -400,13 +416,43 @@ 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)
+			}
+		},
     // 树形插件右键点击事件
     rightClick(MouseEvent, object, Node, element) {
       console.log(object);
@@ -494,30 +540,34 @@ export default {
       }
     },
 
-    // 获取到当前点击菜单的数据
-		handleOpen(key, keyPath) {
-			var data = key
-			var typeIndex = data.split('/index/')
-			if (typeIndex[1] == 'monitor') {
-				// 性诱测报
-				// this.req = 'hide'
-				// this.equip_type = '4'
+    // 获取到当前点击菜单的数据userManger
+    handleOpen(key, keyPath) {
+        this.isTree = true;
+      var data = key;
+      var typeIndex = data.split("/index/");
+      if (typeIndex[1] == "monitor") {
+        // 性诱测报
+        // this.req = 'hide'
+        // this.equip_type = '4'
 
         // 苗情
-				this.req = 'hide'
-				this.equip_type = '6'
-			} else {
-				this.req = ''
-				this.equip_type = ''
-			}
-		},
+        this.req = "hide";
+        this.equip_type = "6";
+      } else if(typeIndex[1]=='userManger'){
+        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

@@ -17,6 +17,7 @@
               videoItem: true,
               a1: divNum == 1,
               a2: divNum == 2,
+              a4: divNum == 4,
               a9: divNum == 9,
               a12: divNum == 12,
               selected: count == selected,
@@ -89,6 +90,10 @@
             @click="splitView(2)"
           ></span>
           <span
+            :class="divNum == 4 ? 'sp4 sp' : 'sp04 sp'"
+            @click="splitView(4)"
+          ></span>
+          <span
             :class="divNum == 9 ? 'sp2 sp' : 'sp02 sp'"
             @click="splitView(9)"
           ></span>
@@ -107,7 +112,7 @@
             @click="
               selectEquip(item.device_id, item.jktype, index, item.videotape)
             "
-            :title="item | formatName"
+            :title="item | formatNametitle"
           >
             <span
               :class="['dot', item.status == 1 ? 'onLine' : 'outLine']"
@@ -128,7 +133,7 @@
             @click="splitPage('jia')"
           ></span>
         </div>
-         <!-- <div class="direc">
+        <!-- <div class="direc">
           <div
             @mousedown="configCamera(id, 'move', 0)"
             @mouseup="stopConfigCamera(id)"
@@ -150,7 +155,7 @@
             class="rightCtr"
           ></div>
         </div>  -->
-         <div class="btnBox">
+        <div class="btnBox">
           <!-- <div class="zoom">
              无论插件还是费插件都可以放大缩小 
             <span
@@ -169,9 +174,13 @@
             class="playBack"
             @click="playBackDialogVisible = true"
           ></div>
-          <div @click="addEquipDialogVisible = true" class="addequip" style="padding-top:20px"></div>
+          <div
+            @click="addEquipDialogVisible = true"
+            class="addequip"
+            style="padding-top: 20px"
+          ></div>
           <div @click="fScreenFun()" class="fSBtn1"></div>
-        </div> 
+        </div>
       </div>
     </div>
     <!-- 拍照 -->
@@ -326,36 +335,57 @@ export default {
       },
       objData: {},
 
-      pageShow: true, 
+      pageShow: true,
     };
   },
   filters: {
-    formatName: function (value) {
+    formatNametitle: function (value) {
+      // 设备名字
+      return `${value.device_name}.-${value.jktype}`;
+    },
+    formatName: (value) => {
+      console.log(value);
       //设备名字
       if (value.device_name) {
-        return `${value.device_name}.-${value.jktype}`;
+        let nametitle = value.device_name;
+        if (nametitle.length > 8) {
+          nametitle = nametitle.slice(0, 8) + "...";
+        }else{
+          nametitle = nametitle;
+        }
+        return `${nametitle}-${value.jktype}`;
       }
     },
     ellipsis(value) {
-			if (!value) return ''
-			if (value.length > 10) {
-				return value.slice(0, 10) + '...'
-			}
-			return value
-		},
+      if (!value) return "";
+      if (value.length > 14) {
+        return value.slice(0, 14);
+      }
+      return value;
+    },
+  },
+  props: {
+    siteId: {
+      type: Number
+    },
   },
   watch: {
     totalPage(val) {
-      console.log(val)
       if (val > 1) {
-        this.pageShow = true
+        this.pageShow = true;
       } else {
-        this.pageShow = false
+        this.pageShow = false;
       }
     },
+    siteId: {
+      handler(val) {
+        this.getJkList({ id: val }, 1);
+      },
+      immediate: true,
+    },
   },
   created() {
-    this.getJkList();
+    // this.getJkList();
   },
   methods: {
     //获取视频列表
@@ -378,10 +408,10 @@ export default {
           page: this.currPage,
           equip_type: 1,
           site_id: id,
-          page_size: 12
+          page_size: 12,
         }),
       }).then((res) => {
-        console.log("苗情苗情",res);
+        console.log("苗情苗情", res);
         this.Idlist = res.data.data;
         this.totalPage = Math.ceil(res.data.counts / 12);
         this.initMonitor(); //进入页面默认1屏都显示视频
@@ -391,7 +421,12 @@ export default {
       this.$axios({
         method: "POST",
         url: "list_camera",
-        data: this.qs.stringify({ page: this.currPage, equip_type: 1, site_id: this.objData.id, page_size: 12}),
+        data: this.qs.stringify({
+          page: this.currPage,
+          equip_type: 1,
+          site_id: this.objData.id,
+          page_size: 12,
+        }),
       }).then((res) => {
         this.Idlist = res.data.data;
       });
@@ -774,6 +809,10 @@ li {
           width: 50%;
           height: 100%;
         }
+        .a4 {
+          width: 50%;
+          height: 50%;
+        }
         .a9 {
           width: 33.3%;
           height: 33.3%;
@@ -807,6 +846,9 @@ li {
         .sp03 {
           background: url(../assets/images/monitor/12.png);
         }
+        .sp04 {
+          background: url(../assets/images/monitor/4.png);
+        }
         .sp0 {
           background: url(../assets/images/monitor/11.png);
         }
@@ -819,6 +861,9 @@ li {
         .sp3 {
           background: url(../assets/images/monitor/122.png);
         }
+        .sp4 {
+          background: url(../assets/images/monitor/23.png);
+        }
       }
     }
     .nav-box {
@@ -827,9 +872,10 @@ li {
       color: #000;
       font-size: 14px;
       .viewLists {
-        height: 50%;
+        // height: 50%;
+        height: 442px;
         overflow: auto;
-        padding: 0;
+        padding: 20px 0px 0px;
         li {
           padding-left: 25px;
           padding-right: 25px;