Jelajahi Sumber

第一次提交

zkl 3 tahun lalu
induk
melakukan
78cc8641b5
9 mengubah file dengan 2219 tambahan dan 73 penghapusan
  1. 14 4
      config/index.js
  2. 1564 26
      package-lock.json
  3. TEMPAT SAMPAH
      src/assets/images/dingwei.png
  4. TEMPAT SAMPAH
      src/assets/images/tianjia.png
  5. TEMPAT SAMPAH
      src/assets/images/zhankai.png
  6. 463 9
      src/components/Index.vue
  7. 103 13
      src/components/UserManger.vue
  8. 25 3
      src/pages/EquipList.vue
  9. 50 18
      src/pages/Monitor.vue

+ 14 - 4
config/index.js

@@ -11,18 +11,28 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/api': {
-        target: 'http://192.168.1.8:8000/',
+      // '/api': {
+      //   // target: 'http://192.168.1.8:8000/',
+      //   target: 'http://192.168.1.123:8007/',
+      //   // target: 'http://192.168.1.4:8000/',//杨
+      //   changeOrigin: true,
+      //   pathRewrite: {
+      //     '^/api': '' //重写接口
+      //   }
+      // },
+      '/': {
+        // target: 'http://192.168.1.8:8000/',
+        target: 'http://192.168.1.123:8005/',
         // target: 'http://192.168.1.4:8000/',//杨
         changeOrigin: true,
         pathRewrite: {
-          '^/api': '' //重写接口
+          '': '' //重写接口
         }
       },
     },
 
     // Various Dev Server settings
-    host: '192.168.1.6', // can be overwritten by process.env.HOST
+    host: '192.168.1.123', // can be overwritten by process.env.HOST
     port: 8000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

File diff ditekan karena terlalu besar
+ 1564 - 26
package-lock.json


TEMPAT SAMPAH
src/assets/images/dingwei.png


TEMPAT SAMPAH
src/assets/images/tianjia.png


TEMPAT SAMPAH
src/assets/images/zhankai.png


+ 463 - 9
src/components/Index.vue

@@ -9,9 +9,7 @@
         />
       </div>
       <!-- 用户 -->
-      <div class="userinfo">
-        欢迎您,{{ username }}
-      </div>
+      <div class="userinfo">欢迎您,{{ username }}</div>
       <!-- 标题 -->
       <div class="sysName">
         <h2 v-if="userinfo.user_header">{{ userinfo.user_header }}</h2>
@@ -27,19 +25,73 @@
     <el-header class="header2" v-show="!flag">
       <h3 v-if="userinfo.user_header">{{ userinfo.user_header }}</h3>
       <h3 v-else>苗情监测应用系统</h3>
-      <div class="site" v-if="userinfo.site">
+      <div class="site" v-if="userinfo.site && flag">
         <i class="iconfont icon-jidi"></i>
         <span>{{ userinfo.site }}</span>
       </div>
       <span class="header_btn" @click="hCheckFun">[展开]</span>
+
+      <!-- <ul class="header_ul" style="margin: -55px 85px 0 0">
+        <li
+          style="padding: 15px 20px 15px 20px; color: #fff; cursor: pointer"
+          @click="headerTitle(index)"
+          :class="{ indexActive: tltIndex == index }"
+          v-for="(item, index) in menuList1"
+          :key="index"
+        >
+          {{ item.purview_name }}
+        </li>
+      </ul> -->
     </el-header>
+
+    <!-- <div style="background: #397b0c" v-show="flag">
+      <ul class="header_ul">
+        <li
+          style="padding: 15px 20px 15px 20px; color: #fff; cursor: pointer"
+          @click="headerTitle(index)"
+          :class="{ indexActive: tltIndex == index }"
+          v-for="(item, index) in menuList1"
+          :key="index"
+        >
+          {{ item.purview_name }}
+        </li>
+      </ul>
+    </div> -->
     <el-container style="overflow: auto">
       <el-aside width="200px">
+        <!-- 选中站点标题 -->
+        <div
+          style="
+            background: #397b0c;
+            line-height: 46px;
+            height: 46px;
+            color: #fff;
+          "
+        >
+          <img
+            style="
+              width: 12px;
+              height: 16px;
+              margin: -3.5px 0 0 12.5%;
+              vertical-align: middle;
+              cursor: pointer;
+            "
+            src="../assets/images/dingwei.png"
+            title="点击获取全部站点名称列表"
+            @click="allSiteListData()"
+            alt=""
+          />
+          <span style="font-size: 13px; margin: 0 0 0 -0.5px">{{
+            siteNameTitle
+          }}</span>
+        </div>
+
         <el-menu
           :default-active="$route.path"
           :collapse-transition="false"
           class="el-menu-vertical-demo"
           :router="isRouter"
+          @select="handleOpen"
           active-text-color="rgb(0, 0, 0)"
         >
           <el-menu-item index="/index/monitor">
@@ -55,14 +107,86 @@
             <span slot="title">用户管理</span>
           </el-menu-item>
         </el-menu>
+
+        <div 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">
+                <img
+                  style="width: 13px; height: 13px; margin: 3px 3px 0 0"
+                  src="../assets/images/zhankai.png"
+                  alt=""
+                />
+                <div style="font-weight: 550; font-size: 14px; margin: 0px 0px 0px 4px;">站点管理</div>
+              </div>
+              <img
+                style="
+                  width: 16px;
+                  height: 16px;
+                  margin: 3px 0 0 0;
+                  cursor: pointer;
+                "
+                src="../assets/images/tianjia.png"
+                alt=""
+                @click="addStation"
+                v-if="userinfo.staff == '1'"
+              />
+            </li>
+
+            <li id="tree">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                @node-click="handleNodeClick"
+                @node-contextmenu="rightClick"
+              ></el-tree>
+            </li>
+          </ul>
+        </div>
       </el-aside>
+
+      <!-- 右键信息 -->
+      <div v-show="menuVisible">
+        <ul id="menuList" class="menu">
+          <li class="menu_item" @click="addrInformation()">增加</li>
+        </ul>
+      </div>
       <el-main>
-        <router-view></router-view>
+        <router-view ref="mychild"></router-view>
       </el-main>
     </el-container>
+
+    <!-- 添加站点 -->
+    <el-dialog
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="新增站点"
+      :visible.sync="addSite"
+      width="25%"
+    >
+      <ul>
+        <li style="margin: 10px 0 0 0">
+          <span>站点名称:</span>
+          <el-input style="width: 49%" v-model="siteName"></el-input>
+        </li>
+        <li style="margin: 10px 0 0 0">
+          <span>站点地址:</span>
+          <el-cascader
+            clearable
+            v-model="siteAddr"
+            :options="options"
+          ></el-cascader>
+        </li>
+      </ul>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="addSite = false">取 消</el-button>
+        <el-button type="primary" @click="addrData()">确 定</el-button>
+      </span>
+    </el-dialog>
   </el-container>
 </template>
 <script>
+import city from "../components/citydata.js";
 export default {
   data() {
     return {
@@ -77,11 +201,95 @@ export default {
       userinfo: {},
       username: "",
       userphoto: "",
+
+      // 站点
+      menuList1: [
+        {
+          purview_name: "苗情监测应用系统",
+          menu: "monitor",
+          parent_perm_id: 1,
+          pur_id: 1,
+        },
+        {
+          purview_name: "设备列表",
+          menu: "list",
+          parent_perm_id: 2,
+          pur_id: 2,
+        },
+        {
+          purview_name: "用户管理",
+          menu: "userManger",
+          parent_perm_id: 3,
+          pur_id: 3,
+        },
+      ],
+      tltIndex: 0,
+      siteName: "", // 站点名称
+      siteAddr: [], // 站点地址
+      options: [],
+      addSite: false,
+      data: [], // 树形插件数据
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+
+      menuVisible: false,
+      operateObj: {}, // 右键点击时获取当前的数据信息
+
+      siteNameTitle: '全 部',
+      req: '', // 站点列表是否显示有无设备的站点
+			equip_type: '' //选中的设备类型
     };
   },
   created: function () {
     this.getuserinfo();
   },
+  mounted() {
+    this.siteListData();
+    if (sessionStorage.getItem("tltIndex")) {
+      this.tltIndex = sessionStorage.getItem("tltIndex");
+    }
+    this.options = city;
+
+
+    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 = ''
+		}
+  },
+  watch: {
+    addSite(val) {
+      if (val == false) {
+        this.siteName = "";
+        this.siteAddr = [];
+        this.operateObj = {};
+      }
+      // else if (val == true) {
+      // 	if (this.operateObj.label) {
+      // 		console.log(this.operateObj)
+
+      // 	} else {
+      // 	}
+      // }
+    },
+    // 监听路由变化,如果变化就将展示选中的站点名称归零为全部
+		$route(to, from) {
+			this.siteNameTitle = '全 部'
+		},
+
+    equip_type(val) {
+			console.log(val)
+			this.siteListData()
+		}
+  },
   methods: {
     hCheckFun() {
       this.flag = !this.flag;
@@ -104,6 +312,212 @@ export default {
         localStorage.setItem("staff", this.userinfo.staff); // 1是admin
       });
     },
+
+    headerTitle(i) {
+      this.tltIndex = i;
+      console.log(i);
+      sessionStorage.setItem("tltIndex", i);
+      this.$router.push("/index/" + this.menuList1[i].menu);
+    },
+
+    // 添加新站点
+    addStation() {
+      this.addSite = true;
+    },
+
+    // 树形插件
+    handleNodeClick(data) {
+      console.log(data);
+      // this.operateObj = data
+      // this.$refs.mychild.getEquipList(data, 1)
+
+      var url = this.$route.path;
+      this.siteNameTitle = data.label
+      url = url.split("/index/", 2);
+      console.log(url);
+      if (url[1] == "monitor") {
+        this.$refs.mychild.getJkList(data, 1);
+      } else {
+        this.$refs.mychild.getList(data, 1);
+      }
+    },
+
+    // 获取站点名称列表
+    siteListData() {
+      this.$axios({
+        method: "GET",
+        url: "site_manage",
+        params: {
+          req: this.req,
+          equip_type: this.equip_type,
+          jk_type: '1'
+        }
+      })
+        .then((res) => {
+          if (res.data) {
+            var data = res.data;
+            var arrList = [];
+            var list = data.forEach((item) => {
+              if (
+                item.self_site_name !== undefined &&
+                item.self_site_name == ""
+              ) {
+              } else {
+                if (item.self_site_name == undefined) {
+                  if (item.child) {
+                    var obj = {};
+                    var a = [];
+                    obj["label"] = item.site_name;
+                    obj["id"] = item.site_id;
+                    for (var j in item.child) {
+                      var obja = {};
+                      obja["label"] = item.child[j].site_name;
+                      obja["id"] = item.child[j].site_id;
+                      if (
+                        item.child[j].child &&
+                        item.child[j].child.length == 0
+                      ) {
+                        obja["children"] = item.child[j].child;
+                      } else if (
+                        item.child[j].child &&
+                        item.child[j].child.length !== 0
+                      ) {
+                        for (var k in item.child[j].child) {
+                          var objb = {};
+                          objb["label"] = item.child[j].child[k].site_name;
+                          objb["id"] = item.child[j].child[k].site_id;
+                        }
+                        obja["children"] = [objb];
+                      }
+                      a.push(obja);
+                      obj["children"] = a;
+                    }
+                  }
+                  arrList.push(obj);
+                } else if (item.self_site_name !== undefined) {
+                }
+              }
+            });
+            this.data = arrList;
+            console.log(arrList);
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    // 树形插件右键点击事件
+    rightClick(MouseEvent, object, Node, element) {
+      console.log(object);
+      this.menuVisible = false; // 先把模态框关死,目的是 第二次或者第n次右键鼠标的时候 它默认的是true
+      this.menuVisible = true; // 显示模态窗口,跳出自定义菜单栏
+      var menu = document.querySelector("#menuList");
+      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件,点击任何位置执行foo方法
+      menu.style.display = "block";
+      menu.style.left = MouseEvent.clientX - 0 + "px";
+      menu.style.top = MouseEvent.clientY - 0 + "px";
+      this.operateObj = object;
+    },
+    foo() {
+      // 取消鼠标监听事件 菜单栏
+      this.menuVisible = false;
+      document.removeEventListener("click", this.foo); // 要及时关掉监听,不关掉的是一个坑,不信你试试,虽然前台显示的时候没有啥毛病,加一个alert你就知道了
+    },
+    // 指定新增
+    addrInformation() {
+      this.addSite = true;
+    },
+
+    addrData() {
+      if (this.siteName == "") {
+        this.$message({
+          message: "未填写站点名称,请填写!",
+          type: "warning",
+          duration: 1500,
+        });
+      } else if (this.siteAddr.length == 0) {
+        this.$message({
+          message: "未填写站点地址,请填写!",
+          type: "warning",
+          duration: 1500,
+        });
+      } else {
+        if (this.siteAddr.length < 3) {
+          var sheng = "";
+          var shi = this.siteAddr[0];
+          var xian = this.siteAddr[1];
+        } else {
+          var sheng = this.siteAddr[0];
+          var shi = this.siteAddr[1];
+          var xian = this.siteAddr[2];
+        }
+        var postData = this.qs.stringify({
+          site_name: this.siteName, // 站点名称
+          site_pro: sheng, // 省
+          site_city: shi, // 市
+          site_area: xian, // 县或区
+          site_parent_id:
+            this.operateObj.id !== undefined ? this.operateObj.id : "", // id
+        });
+        this.$axios({
+          method: "POST",
+          url: "/site_manage",
+          data: postData,
+        })
+          .then((res) => {
+            console.log(res.data);
+            if (res.data.status == 0) {
+              this.$message({
+                message: res.data.msg,
+                type: "success",
+                duration: 1500,
+              });
+              this.addSite = false;
+              this.siteListData();
+            } else {
+              this.$message({
+                message: res.data.msg,
+                type: "error",
+                duration: 1500,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+            this.$message({
+              message: "添加失败请重试!",
+              type: "error",
+              duration: 1500,
+            });
+          });
+      }
+    },
+
+    // 获取到当前点击菜单的数据
+		handleOpen(key, keyPath) {
+			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 = ''
+			}
+		},
+
+    // 点击获取全部站点名称列表
+		allSiteListData() {
+			this.req = ''
+			this.equip_type = ''
+			this.siteListData()
+		},
   },
 };
 </script>
@@ -113,7 +527,7 @@ export default {
   position: relative;
   width: 100%;
   height: 177px !important;
-  border-bottom: 2px solid #272b3a;
+  // border-bottom: 2px solid #272b3a;
   background: #397b0c no-repeat center / 100% 100%
     url(../assets/images/monitor/h_bg.jpg);
   .userinfo {
@@ -172,8 +586,8 @@ export default {
 }
 .site {
   position: absolute;
-  right: 90px;
-  bottom: 10px;
+  right: 8px;
+  top: 33px;
   z-index: 888;
   font-size: 14px;
   color: #ffffff;
@@ -196,7 +610,8 @@ export default {
 }
 
 .el-aside {
-  background: #f0f0f0;
+  // background: #f0f0f0;
+  background: #fff;
   i {
     color: #000;
   }
@@ -221,4 +636,43 @@ export default {
 .el-main {
   padding: 0;
 }
+
+// 新改
+.header_ul {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 85px 0 0;
+}
+
+.indexActive {
+  border-bottom: 2px solid #fff;
+}
+
+#tree {
+  margin: 15px 0 0 0;
+}
+
+// 右键信息
+#menuList {
+  height: 40px;
+  width: 80px;
+  position: absolute;
+  border-radius: 10px;
+  border: 1px solid #d8d6d6;
+  background-color: #fff;
+  z-index: 1;
+  .menu_item {
+    line-height: 20px;
+    text-align: center;
+    margin-top: 10px;
+    cursor: pointer;
+  }
+  li:hover {
+    background-color: #14a478;
+    color: white;
+  }
+  li {
+    font-size: 15px;
+  }
+}
 </style>

+ 103 - 13
src/components/UserManger.vue

@@ -33,7 +33,7 @@
         <el-card class="box-card pad0">
           <div class="img-box">
             <img src="@/assets/images/systemManger/user.png" />
-            <p>{{ item.username }}</p>
+            <p :title="item.username">{{ item.username | ellipsis }}</p>
           </div>
           <div class="detail">
             <p>
@@ -55,20 +55,20 @@
               适配用户
               <span>{{ item.user_have || "无" }}</span>
             </p>
-            <p>
+            <p :title="item.site_name">
               站点名称
-              <span>{{ item.site || "无" }}</span>
+              <span>{{ (item.site_name || "无") | ellipsis }}</span>
             </p>
             <p>
               站点地址
               <span
-                >{{ item.user_pro }} {{ item.user_city }}
-                {{ item.user_area }}</span
+                >{{ item.site_pro }} {{ item.site_city }}
+                {{ item.site_area }}</span
               >
             </p>
-            <p>
+            <p :title="item.user_header">
               系统标题
-              <span>{{ item.user_header || "--" }}</span>
+              <span>{{ (item.user_header || "--") | ellipsis }}</span>
             </p>
             <p>
               logo
@@ -203,7 +203,20 @@
           </el-upload>
         </el-form-item>
         <el-form-item label="站点名称 : ">
-          <el-input maxlength="16" v-model="editUserForm.site"></el-input>
+          <!-- <el-input maxlength="16" v-model="editUserForm.site"></el-input> -->
+          <el-select
+            v-model="editUserForm.site_name"
+            clearable
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in siteNameList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="站点位置 : ">
           <div class="block">
@@ -214,6 +227,7 @@
               :props="props"
               @change="handleChange"
               filterable
+              :disabled="true"
             >
             </el-cascader>
           </div>
@@ -230,6 +244,15 @@
 <script>
 import cityData from "./citydata.js";
 export default {
+  filters: {
+    ellipsis(value) {
+      if (!value) return "";
+      if (value.length > 10) {
+        return value.slice(0, 10) + "...";
+      }
+      return value;
+    },
+  },
   data() {
     var checkMobile = (rule, value, callback) => {
       const regMobile = /^1\d{10}$/;
@@ -325,6 +348,7 @@ export default {
       have_type: "",
       staff: "",
       currusername: "",
+      siteNameList: [], // 站点列表
     };
   },
   computed: {
@@ -339,6 +363,7 @@ export default {
     this.have_type = localStorage.getItem("have_type"); // 0管理员  1用户
     this.staff = localStorage.getItem("staff"); // 1是admin
     this.currusername = localStorage.getItem("username"); // 1是admin
+    this.facilityList();
   },
   methods: {
     getList() {
@@ -360,11 +385,18 @@ export default {
     edit(role) {
       this.editUserForm = JSON.parse(JSON.stringify(role));
       this.editUserDialogVisible = true;
-      this.cityValue = [
-        this.editUserForm.user_pro,
-        this.editUserForm.user_city,
-        this.editUserForm.user_area,
-      ];
+      if (this.editUserForm.site_pro == "") {
+        this.cityValue = [
+          this.editUserForm.site_city,
+          this.editUserForm.site_area,
+        ];
+      } else {
+        this.cityValue = [
+          this.editUserForm.site_pro,
+          this.editUserForm.site_city,
+          this.editUserForm.site_area,
+        ];
+      }
     },
     beforeAvatarUpload(file) {
       console.log(file);
@@ -549,6 +581,64 @@ export default {
     addUserFun() {
       window.location.href = "systemmanage_user_add";
     },
+
+    // 获取站点列表数据
+    facilityList() {
+      this.$axios({
+        method: "GET",
+        url: "/site_manage",
+      })
+        .then((res) => {
+          if (res.data) {
+            var data = res.data;
+            var arrList = [];
+            var nameList = [];
+            var nameListB = [];
+            var list = data.forEach((item) => {
+              var objA = {};
+              objA["label"] = item.site_name;
+              objA["value"] = item.site_name;
+              if (
+                item.self_site_name !== undefined &&
+                item.self_site_name == ""
+              ) {
+              } else {
+                if (item.self_site_name == undefined) {
+                  if (item.child) {
+                    for (var j in item.child) {
+                      var obj = {};
+                      obj["label"] = item.child[j].site_name;
+                      obj["value"] = item.child[j].site_name;
+                      if (
+                        item.child[j].child &&
+                        item.child[j].child.length == 0
+                      ) {
+                      } else if (
+                        item.child[j].child &&
+                        item.child[j].child.length !== 0
+                      ) {
+                        for (var k in item.child[j].child) {
+                          var objB = {}
+                          objB["label"] = item.child[j].child[k].site_name;
+                          objB["value"] = item.child[j].child[k].site_name;
+                          nameListB.push(objB)
+                        }
+                      }
+                      arrList.push(obj);
+                    }
+                  }
+                } else if (item.self_site_name !== undefined) {
+                }
+              }
+              nameList.push(objA);
+            });
+            this.siteNameList = [...nameList, ...arrList, ...nameListB];
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
   },
 };
 </script>

+ 25 - 3
src/pages/EquipList.vue

@@ -25,7 +25,7 @@
         <el-card class="box-card pad0">
           <div class="img-box">
             <img src="@/assets/images/monitor/jkIconOn.png" />
-            <p>{{ item.device_name || "苗情监测设备" }}</p>
+            <p :title="item.device_name">{{ (item.device_name || "苗情监测设备") | ellipsis }}</p>
           </div>
           <div class="detail">
             <p>
@@ -66,6 +66,15 @@
 
 <script>
 export default {
+  filters: {
+    ellipsis(value) {
+			if (!value) return ''
+			if (value.length > 10) {
+				return value.slice(0, 10) + '...'
+			}
+			return value
+		},
+  },
   data() {
     return {
       zanwu: require("@/assets/images/monitor/zanwu.png"),
@@ -76,6 +85,7 @@ export default {
       dataList: [],
       totalNum: 0,
       device_id: "",
+      objData: {},
     };
   },
   created() {
@@ -84,14 +94,26 @@ export default {
   beforeMount() {},
   methods: {
     //获取设备列表
-    getList() {
+    getList(obj, page) {
+      if (obj) {
+        console.log(obj)
+				this.queryInfo.page = page
+				this.objData = obj
+      }
+      var id = ''
+			if (this.objData !== undefined) {
+				id = this.objData.id
+			} else if (obj !== undefined) {
+				id = obj.id
+			}
       this.$axios({
         method: "POST",
         url: "list_camera",
         data: this.qs.stringify({
           f_id: this.queryInfo.f_id,
           page: this.queryInfo.page,
-          equip_type:1
+          equip_type:1,
+          site_id: id
         }),
       }).then((res) => {
         if (res.data.data) {

+ 50 - 18
src/pages/Monitor.vue

@@ -107,14 +107,15 @@
             @click="
               selectEquip(item.device_id, item.jktype, index, item.videotape)
             "
+            :title="item | formatName"
           >
             <span
               :class="['dot', item.status == 1 ? 'onLine' : 'outLine']"
             ></span>
-            {{ item | formatName }}
+            {{ item | formatName | ellipsis }}
           </li>
         </ul>
-        <div class="splitPage" onselectstart="return false">
+        <div class="splitPage" onselectstart="return false" v-if="pageShow">
           <span
             class="arrow el-icon-caret-top"
             @click="splitPage('jian')"
@@ -127,11 +128,7 @@
             @click="splitPage('jia')"
           ></span>
         </div>
-        <div class="direc">
-          <!-- <div
-            @click="configCamera(id, 'takephoto', '')"
-            class="cameraCtr"
-          ></div> -->
+        <!-- <div class="direc">
           <div
             @mousedown="configCamera(id, 'move', 0)"
             @mouseup="stopConfigCamera(id)"
@@ -152,10 +149,10 @@
             @mouseup="stopConfigCamera(id)"
             class="rightCtr"
           ></div>
-        </div>
-        <div class="btnBox">
+        </div> -->
+        <!-- <div class="btnBox">
           <div class="zoom">
-            <!-- 无论插件还是费插件都可以放大缩小 -->
+            无论插件还是费插件都可以放大缩小
             <span
               class="addCtr"
               @mousedown="configCamera(id, 'move', 8)"
@@ -174,7 +171,7 @@
           ></div>
           <div @click="addEquipDialogVisible = true" class="addequip"></div>
           <div @click="fScreenFun()" class="fSBtn1"></div>
-        </div>
+        </div> -->
       </div>
     </div>
     <!-- 拍照 -->
@@ -327,6 +324,9 @@ export default {
         jk_type: "",
         equip_type: 1, //1 苗情 2 可视化
       },
+      objData: {},
+
+      pageShow: true, 
     };
   },
   filters: {
@@ -336,17 +336,49 @@ export default {
         return `${value.device_name}-${value.jktype}`;
       }
     },
+    ellipsis(value) {
+			if (!value) return ''
+			if (value.length > 10) {
+				return value.slice(0, 10) + '...'
+			}
+			return value
+		},
+  },
+  watch: {
+    totalPage(val) {
+      console.log(val)
+      if (val > 1) {
+        this.pageShow = true
+      } else {
+        this.pageShow = false
+      }
+    },
   },
   created() {
     this.getJkList();
   },
   methods: {
     //获取视频列表
-    getJkList() {
+    getJkList(obj, page) {
+      if (obj) {
+        console.log(obj);
+        this.currPage = page;
+        this.objData = obj;
+      }
+      var id = "";
+      if (this.objData !== undefined) {
+        id = this.objData.id;
+      } else if (obj !== undefined) {
+        id = obj.id;
+      }
       this.$axios({
         method: "POST",
         url: "list_camera",
-        data: this.qs.stringify({ page: this.currPage, equip_type: 1 }),
+        data: this.qs.stringify({
+          page: this.currPage,
+          equip_type: 1,
+          site_id: id,
+        }),
       }).then((res) => {
         this.Idlist = res.data.data;
         this.totalPage = Math.ceil(res.data.counts / 12);
@@ -357,7 +389,7 @@ export default {
       this.$axios({
         method: "POST",
         url: "list_camera",
-        data: this.qs.stringify({ page: this.currPage,equip_type: 1  }),
+        data: this.qs.stringify({ page: this.currPage, equip_type: 1, site_id: this.objData.id }),
       }).then((res) => {
         this.Idlist = res.data.data;
       });
@@ -516,8 +548,8 @@ export default {
     //点击视频
     selectVideo(e, i, divName) {
       console.log("外");
-      let current = e.currentTarget.getElementsByClassName("current")[0]
-        .innerHTML;
+      let current =
+        e.currentTarget.getElementsByClassName("current")[0].innerHTML;
       if (current.indexOf("device_id") == -1) {
         this.id = current;
       } else {
@@ -825,11 +857,11 @@ li {
           }
         }
         li.active {
-          color:#fff;
+          color: #fff;
           background: #5aae22;
         }
         li:hover {
-          color:#fff;
+          color: #fff;
           background: #5aae22;
         }
       }