第一次提交

config/index.js

@@ -10,13 +10,14 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/api': {
+      '/': {
         // target: 'http://192.168.1.8:8000/',
         // target: 'http://192.168.1.112:8005/',
-        target: 'http://192.168.1.105:8000/',
+        // target: 'http://192.168.1.106:8000/',
+        target: 'http://192.168.1.123:8005/',
         changeOrigin: true,
         pathRewrite: {
-          '^/api': '' //重写接口
+          '/': '' //重写接口
         }
       },
     },

src/components/Index.vue

@@ -4,23 +4,19 @@
       <div v-if="userinfo.logo">
         <img
           :src="userinfo.logo"
-          alt=""
+          alt=""jktype
           style="position: absolute; left: 20px; top: 20px; max-width: 250px"
         />
       </div>
       <!-- 用户 -->
-      <div class="userinfo">
-       欢迎您，{{ username }}
-      </div>
+      <div class="userinfo">欢迎您，{{ username }}</div>
       <!-- 标题 -->
       <div class="sysName">
-        <h2 v-if="userinfo.user_header">{{ userinfo.user_header}}</h2>
+        <h2 v-if="userinfo.user_header">{{ userinfo.user_header }}</h2>
         <h2 v-else>可视农业应用系统</h2>
-        <p>
-          Agricultural Visualization Monitoring System
-        </p>
+        <p>Agricultural Visualization Monitoring System</p>
       </div>
-      <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>
@@ -29,19 +25,66 @@
     <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">
-        <i class="iconfont icon-jidi"></i>
-        <span>{{ userinfo.site }}</span>
-      </div>
+
+      <!-- <ul class="header_ul" style="margin: -55.5px 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> -->
       <span class="header_btn" @click="hCheckFun">[展开]</span>
     </el-header>
+
+    <!-- <div style="background: #474e60" 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: #242527;
+            line-height: 46px;
+            height: 46px;
+            color: #fff;
+          "
+        >
+          <img
+            style="
+              width: 12px;
+              height: 16px;
+              margin: -3.5px 0 0 11.5%;
+              vertical-align: middle;
+            "
+            src="../assets/images/dingwei.png"
+            alt=""
+          />
+          <span style="font-size: 13px; margin: 0 0 0 1.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(57, 249, 190)"
         >
           <el-menu-item index="/index/monitor1">
@@ -57,14 +100,95 @@
             <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;
+                    color: #fff;
+                    font-size: 13px;
+                    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" :flag="dataObj"></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 {
@@ -79,16 +203,108 @@ export default {
       userinfo: {},
       username: "",
       userphoto: "",
+      menuList1: [
+        {
+          purview_name: "可视农业应用系统",
+          menu: "monitor1",
+          parent_perm_id: 1,
+          pur_id: 1,
+        },
+        {
+          purview_name: "设备列表",
+          menu: "list1",
+          parent_perm_id: 2,
+          pur_id: 2,
+        },
+        {
+          purview_name: "用户管理",
+          menu: "userManger1",
+          parent_perm_id: 3,
+          pur_id: 3,
+        },
+      ],
+
+      // 站点
+      tltIndex: 0,
+      addSite: false,
+      siteName: "", // 站点名称
+      siteAddr: [], // 站点地址
+      options: [],
+      data: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      menuVisible: false,
+
+      siteNameTitle: "全 部",
+      req: '', // 站点列表是否显示有无设备的站点
+			equip_type: '', //选中的设备类型
+
+      dataObj: {
+				flag: true,
+				siteID: null,
+				allList: []
+			},
     };
   },
   created: function () {
     this.getuserinfo();
   },
+  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();
+    },
+  },
   computed: {},
-  mounted() {},
+  mounted() {
+    if (sessionStorage.getItem("tltIndex")) {
+      this.tltIndex = sessionStorage.getItem("tltIndex");
+    }
+    this.siteListData();
+    this.options = city;
+
+    var url = this.$route.path;
+    url = url.split("/index", 2);
+    if (url[1] == "/xycb") {
+      sessionStorage.setItem("tltIndex", 0);
+      this.tltIndex = 0;
+    }
+
+    // 获取当前点击的设备类型
+    if (url[1] == "/monitor1") {
+      // 性诱测报
+      this.req = "hide";
+      this.equip_type = "6";
+    } else {
+      this.req = "";
+      this.equip_type = "";
+    }
+  },
   methods: {
     hCheckFun() {
       this.flag = !this.flag;
+      this.dataObj.flag = this.flag
     },
     getuserinfo() {
       this.$axios({
@@ -108,6 +324,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;
+      this.operateObj = {};
+    },
+
+    // 站点名称列表
+    siteListData() {
+      this.$axios({
+        method: "GET",
+        url: "site_manage",
+        params: {
+          req: this.req,
+          equip_type: this.equip_type,
+          jk_type: '2',
+        },
+      })
+        .then((res) => {
+          console.log(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);
+        });
+    },
+
+    // 树形插件
+    handleNodeClick(data) {
+      console.log(data);
+      // this.operateObj = data
+
+      var url = this.$route.path;
+      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.plotList(data, 1);
+      } else {
+        this.$refs.mychild.getList(data, 1);
+      }
+    },
+
+    // 树形插件右键点击事件
+    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() {
+      console.log(this.operateObj.id);
+      console.log(this.operateObj);
+      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] == 'monitor1') {
+				// 性诱测报
+				this.req = 'hide'
+				this.equip_type = '6'
+			} else {
+				this.req = ''
+				this.equip_type = ''
+			}
+		},
+
+		// 点击获取全部站点名称列表
+		allSiteListData() {
+			this.req = ''
+			this.equip_type = ''
+			this.siteListData()
+		},
   },
 };
 </script>
@@ -170,8 +592,8 @@ export default {
 }
 .site {
   position: absolute;
-  right: 90px;
-  bottom: 10px;
+  right: 8px;
+  top: 30px;
   z-index: 888;
   font-size: 14px;
   color: #ffffff;
@@ -217,4 +639,54 @@ export default {
   padding: 0;
   background-color: #f6f6f6;
 }
+
+// 新改
+.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;
+  div {
+    background: #474e60;
+  }
+}
+
+.el-tree {
+  // color: #fff !important;
+  color: #8c8989 !important;
+}
+.el-tree-node__content:hover {
+  background-color: #55575a !important;
+}
+
+// 右键信息
+#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>

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>
               系统标题
-              <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_name"></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: {
@@ -338,6 +362,9 @@ 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() {
@@ -359,11 +386,25 @@ 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
+				]
+			}
+
+      // this.cityValue = [
+      //   this.editUserForm.user_pro,
+      //   this.editUserForm.user_city,
+      //   this.editUserForm.user_area,
+      // ];
     },
     beforeAvatarUpload(file) {
       console.log(file);
@@ -516,6 +557,7 @@ export default {
     },
     //修改用户信息提交
     editUserSubm() {
+      console.log(this.editUserForm)
       this.$refs.editUserFormRef.validate((valid) => {
         if (!valid) return;
         this.$axios({
@@ -547,6 +589,67 @@ export default {
     addUserFun() {
       window.location.href = "systemmanage_user_add";
     },
+
+    // 获取站点列表数据
+		facilityList() {
+			this.$axios({
+				method: 'GET',
+				url: '/site_manage'
+			})
+				.then((res) => {
+          console.log(res.data)
+					if (res.data) {
+						var data = res.data
+						var arrList = []
+						var nameList = []
+						var nameListA = []
+						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
+                        // console.log(obj)
+											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
+                          nameListA.push(objB)
+												}
+											}
+											arrList.push(obj)
+										}
+									}
+								} else if (item.self_site_name !== undefined) {
+								}
+							}
+							nameList.push(objA)
+						})
+						this.siteNameList = [...nameList, ...arrList, ...nameListA]
+					}
+				})
+				.catch((err) => {
+					console.log(err)
+				})
+		}
   },
 };
 </script>

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>
@@ -68,6 +68,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"),
@@ -86,14 +95,27 @@ 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:2
+          equip_type: 2,
+          site_id: id
         }),
       }).then((res) => {
         if (res.data.data) {
@@ -126,7 +148,7 @@ export default {
               }),
             }).then((res) => {
               if (res.data == 0) {
-                this.getList() ;
+                this.getList();
                 this.$message({
                   type: "success",
                   message: "修改成功",
@@ -156,8 +178,12 @@ export default {
 </script>
 
 <style lang='less' scoped>
-.red{color:red}
-.green{color:#5aae22}
+.red {
+  color: red;
+}
+.green {
+  color: #5aae22;
+}
 .search-box {
   .el-input {
     width: 200px;

src/pages/Monitor.vue

@@ -43,7 +43,7 @@
               Idlist[count - 1]
             }}</span>
             <div class="vedio_btn_control">
-              <div class="direc">
+              <!-- <div class="direc">
                 <div
                   @click.stop="configCamera(oneId, 'takephoto', '')"
                   class="cameraCtr"
@@ -70,7 +70,7 @@
                 ></div>
               </div>
               <div class="zoom">
-                <!-- 无论插件还是费插件都可以放大缩小 -->
+                无论插件还是费插件都可以放大缩小
                 <span
                   class="addCtr"
                   @mousedown.stop="configCamera(oneId, 'move', 8)"
@@ -81,7 +81,7 @@
                   @mousedown.stop="configCamera(oneId, 'move', 9)"
                   @mouseup="stopConfigCamera(oneId)"
                 ></span>
-              </div>
+              </div> -->
             </div>
             <i
               @click.stop="oneFullFun($event, count)"
@@ -117,7 +117,27 @@
         </div>
       </div>
       <div class="nav-box">
+        <!-- <div style="border: 1px solid #fff; background: #fff;"></div> -->
         <ul class="viewLists">
+          <li class="select-veido">
+            <el-select
+              v-model="siteVal"
+              clearable
+              placeholder="请选择"
+              @change="plotVal($event)"
+              size="mini"
+            >
+              <el-option
+              :title=" '当前地块下的设备总数：' + item.equip_count"
+                v-for="item in options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </li>
+
           <li
             v-for="(item, index) in Idlist"
             :key="index"
@@ -146,11 +166,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)"
@@ -171,10 +187,10 @@
             @mouseup="stopConfigCamera(id)"
             class="rightCtr"
           ></div>
-        </div>
-        <div class="btnBox">
-          <div class="zoom">
-            <!-- 无论插件还是费插件都可以放大缩小 -->
+        </div> -->
+        <div class="btnBox" style="margin: 50px 0 0 0;">
+          <!-- <div class="zoom">
+            无论插件还是费插件都可以放大缩小
             <span
               class="addCtr"
               @mousedown="configCamera(id, 'move', 8)"
@@ -185,13 +201,13 @@
               @mousedown="configCamera(id, 'move', 9)"
               @mouseup="stopConfigCamera(id)"
             ></span>
-          </div>
-          <div
+          </div> -->
+          <!-- <div
             v-show="videotape == 1"
             class="playBack"
             @click="playBackDialogVisible = true"
-          ></div>
-          <div @click="addEquipDialogVisible = true" class="addequip"></div>
+          ></div> -->
+          <div @click="taskFacility"  v-show="addrPolt" class="addequip"></div>
           <div @click="fScreenFun()" class="fSBtn1"></div>
         </div>
       </div>
@@ -258,7 +274,7 @@
       </div>
     </el-dialog>
     <!-- 添加设备 -->
-    <el-dialog
+    <!-- <el-dialog
       title="添加设备"
       :visible.sync="addEquipDialogVisible"
       width="400px"
@@ -291,7 +307,7 @@
         <el-button @click="addEquipDialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="addEquipSubm">确定</el-button>
       </div>
-    </el-dialog>
+    </el-dialog> -->
   </div>
 </template>
 <script>
@@ -317,7 +333,7 @@ export default {
       html: "", //插件播放内容
       picUrl: "", //视频拍照地址
       playBackDialogVisible: false,
-      addEquipDialogVisible: false,
+      // addEquipDialogVisible: false,
       fScreen: false, //默认多个监控非全屏
       oneFScreen: false, //单个监控全屏状态
       btnFlag: true, //全屏按钮显示控制
@@ -344,8 +360,14 @@ export default {
       addEquipForm: {
         device_id: "",
         jk_type: "",
-        equip_type:2,//1 苗情 2 可视化
+        equip_type: 2, //1 苗情 2 可视化
       },
+      objData: {},
+      options: [],
+      siteVal: "",
+      plotDataArr: [], // 地块原始数据数组
+      plotData: {},
+      addrPolt: false, // 设备分配判断
     };
   },
   filters: {
@@ -356,25 +378,59 @@ export default {
       // }
       if (value.device_name) {
         if (value.device_name.length > 8) {
-          return (`${value.device_name.slice(0, 8)}-${value.jktype}`) + "..."
+          return `${value.device_name.slice(0, 8)}-${value.jktype}` + "...";
         }
       }
     },
   },
   created() {
     this.getJkList();
+    this.plotList("");
+  },
+  watch: {
+    siteVal(val) {
+      if (val !== '') {
+        this.addrPolt = true
+      } else {
+        this.addrPolt = false
+        this.plotData = {}
+        this.getJkList()
+      }
+    }
   },
+
   methods: {
     //获取视频列表
-    getJkList() {
+    getJkList(obj, page) {
+      // this.Idlist = []
+      console.log(obj);
+      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:2 }),
+        data: this.qs.stringify({
+          page: this.currPage,
+          equip_type: 2,
+          site_id: id,
+          page_size: 19,
+          plot_id: this.plotData.plot_id !== undefined ? this.plotData.plot_id : '',
+        }),
       }).then((res) => {
-        console.log(res)
+        console.log(res);
         this.Idlist = res.data.data;
-        this.totalPage = Math.ceil(res.data.counts / 12);
+        console.log(this.Idlist)
+        this.totalPage = Math.ceil(res.data.counts / 19);
         this.initMonitor(); //进入页面默认1屏都显示视频
       });
     },
@@ -382,7 +438,12 @@ export default {
       this.$axios({
         method: "POST",
         url: "list_camera",
-        data: this.qs.stringify({ page: this.currPage,equip_type:2 }),
+        data: this.qs.stringify({
+          page: this.currPage,
+          equip_type: 2,
+          site_id: this.objData.id,
+          page_size: 19,
+        }),
       }).then((res) => {
         this.Idlist = res.data.data;
       });
@@ -464,15 +525,15 @@ export default {
       this.divName = "my-video1"; //第一台选中
       this.selected = 1; //第一台选中
       for (let item = 1; item < this.divNum + 1; item++) {
-        if (this.Idlist[item-1]) {
+        if (this.Idlist[item - 1]) {
           console.log(item);
           //避免右侧监控数量少于divNum
           this.$axios({
             url: "addr_camera",
             method: "POST",
             data: this.qs.stringify({
-              device_id: this.Idlist[item-1].device_id,
-              jk_type: this.Idlist[item-1].jktype,
+              device_id: this.Idlist[item - 1].device_id,
+              jk_type: this.Idlist[item - 1].jktype,
             }),
           }).then((res) => {
             var data = eval("(" + res.data + ")");
@@ -482,7 +543,7 @@ export default {
               let playHtml = `<video id="videoitem${item}"
 								 style='width: 100%;height: 100%;' src="${hlsHdSrc}" autoplay  poster='' muted controls playsInline  webkit-playsinline>
                  </video>`;
-                 console.log("my-video" + item);
+              console.log("my-video" + item);
               document.getElementById("my-video" + item).innerHTML = playHtml;
               this.$nextTick(() => {
                 this.videoObj["videoitem" + item] = new EZUIKit.EZUIPlayer(
@@ -529,7 +590,7 @@ export default {
     //点击分屏
     splitView(num) {
       this.divNum = num;
-      console.log(num)
+      console.log(num);
       console.log(this.videoObj);
       for (let item in this.videoObj) {
         console.log(item);
@@ -542,8 +603,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 {
@@ -660,6 +721,61 @@ export default {
         });
       });
     },
+    // 进入分配设备界面
+    taskFacility() {
+        this.$router.push({
+          path: `/index/addList`,
+          query: {
+            plotData: JSON.stringify(this.plotData),
+          },
+        });
+    },
+
+    // 地块列表展示
+    plotList(data) {
+      var postData = this.qs.stringify({
+        site_id: data.id !== undefined ? data.id : "",
+        page: this.currPage,
+        req: "jk",
+      });
+      this.$axios({
+        method: "POST",
+        url: "/plot_view",
+        data: postData,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.data) {
+          	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)
+            }
+            console.log(list)
+            this.options = list
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+
+    // 选择地块
+    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()
+        }
+      }
+    }
   },
   destroyed() {
     for (let item in this.videoObj) {
@@ -828,7 +944,8 @@ li {
       color: #fff;
       font-size: 14px;
       .viewLists {
-        height: 50%;
+        // height: 50%;
+        height: 75%;
         overflow: auto;
         padding: 0;
         li {
@@ -888,8 +1005,8 @@ li {
         height: 160px;
         margin: 10px auto;
         // position: relative;
-        background: url(../assets/images/monitor/direction-btn.png)
-					no-repeat center;
+        background: url(../assets/images/monitor/direction-btn.png) no-repeat
+          center;
         background-size: contain;
         & > div {
           position: absolute;
@@ -949,24 +1066,23 @@ li {
           }
         }
         .playBack {
-          background: url(../assets/images/monitor/playback-btn.png)
-						no-repeat center;
+          background: url(../assets/images/monitor/playback-btn.png) no-repeat
+            center;
         }
         .playtype0 {
-          background: url(../assets/images/monitor/playtype0.png)
-						no-repeat center;
+          background: url(../assets/images/monitor/playtype0.png) no-repeat
+            center;
         }
         .playtype1 {
-          background: url(../assets/images/monitor/playtype1.png)
-						no-repeat center;
+          background: url(../assets/images/monitor/playtype1.png) no-repeat
+            center;
         }
         .addequip {
           background: url(../assets/images/monitor/addequip.png) no-repeat
-						center;
+            center;
         }
         .fSBtn1 {
-          background: url(../assets/images/monitor/fS.png) no-repeat
-						center;
+          background: url(../assets/images/monitor/fS.png) no-repeat center;
           position: relative;
         }
       }
@@ -987,8 +1103,8 @@ li {
       width: 100px;
       height: 100px;
       margin: 10px auto;
-      background: url(../assets/images/monitor/direction-btn.png)
-				no-repeat center;
+      background: url(../assets/images/monitor/direction-btn.png) no-repeat
+        center;
       background-size: contain;
       & > div {
         position: absolute;
@@ -1037,4 +1153,21 @@ li {
     }
   }
 }
+
+// .select-veido>>>.el-input--small .el-input__inner {
+//     background: none;
+// }
+
+//   .select-veido>>>.el-input__inner {
+
+//    border: 0;
+
+// }
+</style>
+
+<style lang="less">
+//  改变elementui 选择器的背景颜色
+/deep/ .el-input--medium {
+  background: none;
+}
 </style>

src/pages/addList.vue

@@ -0,0 +1,452 @@
+<template>
+  <div style="cursor: default; margin: 43px 0 0 0">
+    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
+      <el-breadcrumb-item>分配设备</el-breadcrumb-item>
+    </el-breadcrumb> -->
+
+    <el-breadcrumb
+      separator-class="el-icon-arrow-right"
+      :class="
+        'el-icon-arrow-right ' + (flag.flag == false ? 'breadcrumb_tab' : '')
+      "
+    >
+      <el-breadcrumb-item :to="{ path: '/index/monitor1' }"
+        >可视化监控</el-breadcrumb-item
+      >
+      <el-breadcrumb-item>监控设备列表</el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="search-box">
+      <div class="filter-box">
+        <!-- <el-select
+          size="small"
+          v-model="type"
+          @change="equipCheck()"
+          clearable
+          placeholder="请选择设备类型"
+        >
+          <el-option
+            v-for="item in typelist"
+            :key="item.id"
+            :label="item.type_name"
+            :value="item.id"
+          ></el-option>
+        </el-select> -->
+        <el-input
+          style="cursor: pointer"
+          size="small"
+          clearable
+          placeholder="请输入设备ID"
+          @change="equipCheck()"
+          v-model="equipId"
+        >
+          <i slot="suffix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+        <!-- <el-date-picker
+          style="cursor: pointer"
+          size="small"
+          v-model="timeRange"
+          @change="DateChange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker> -->
+      </div>
+      <div>
+        <el-button type="primary" @click="allSel" size="mini">{{
+          text
+        }}</el-button>
+        <el-button type="primary" @click="distSubm" size="mini"
+          >确定分配</el-button
+        >
+      </div>
+    </div>
+    <el-row :gutter="10">
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="12"
+        :lg="6"
+        :xl="4"
+        v-for="(item, index) in dataList"
+        :key="index"
+      >
+        <el-card
+          @click.native="itemFun(item)"
+          :class="['box-card', item.checked ? 'selected' : '']"
+        >
+          <el-checkbox
+            :ref="'checkboxRef'"
+            v-model="item.checked"
+            @click.native="stopDefault($event)"
+          ></el-checkbox>
+          <div class="img-box">
+            <template>
+              <img
+                src="
+                  http://www.hnyfwlw.com:8006/bigdata_pc/equipdistribute/6.png
+                "
+              />
+            </template>
+            <p>{{ item.equip_id }}</p>
+          </div>
+
+          <div class="detail">
+            <p :title="item.device_name">
+              设备名称
+              <span>{{ (item.device_name || "无") | ellipsis }}</span>
+            </p>
+            <p>
+              设备类型
+              <span>监控</span>
+            </p>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!-- 暂无数据 -->
+    <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
+      <img
+        src="../../static/zanwu.png"
+        alt
+        class="expertDiagnosis_referral_units_notImg"
+        style="margin: 0 0 0 40%;"
+      />
+    </div>
+    <div class="userTip">
+      *注：以上所选设备分配给地块：{{ plotData.plot_name }}
+    </div>
+    <el-pagination
+      v-if="dataList.length > 0"
+      background
+      :page-size="12"
+      layout="prev, pager, next"
+      :current-page="page"
+      :total="totalNum"
+      @current-change="changePage"
+    ></el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    flag: {
+      flag: Boolean,
+      siteID: Number,
+    },
+  },
+  filters: {
+    ellipsis(value) {
+      if (!value) return "";
+      if (value.length > 10) {
+        return value.slice(0, 10) + "...";
+      }
+      return value;
+    },
+  },
+  data() {
+    return {
+      //   uid: this.$route.params.id,
+      timeRange: "",
+      equipId: "",
+      begin: "",
+      end: "",
+      type: "",
+      dataList: [
+        // {
+        //   device_id: "863488051768862",
+        //   d_id: 3496,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1631520530,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488051768854",
+        //   d_id: 2576,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628642269,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488051788209",
+        //   d_id: 2568,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628589756,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488050791832",
+        //   d_id: 2543,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628556791,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "863488050813255",
+        //   d_id: 2519,
+        //   device_user: 248,
+        //   device_type_id: 2,
+        //   device_name: "杀虫灯",
+        //   creat_time: 1628497598,
+        //   device_location: "内蒙古自治区乌海市乌达区",
+        // },
+        // {
+        //   device_id: "860675044919049",
+        //   d_id: 2893,
+        //   device_user: 0,
+        //   device_type_id: 15,
+        //   device_name: "",
+        //   creat_time: 0,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "868626048758018",
+        //   d_id: 3018,
+        //   device_user: 0,
+        //   device_type_id: 15,
+        //   device_name: "",
+        //   creat_time: 0,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "868626048828316",
+        //   d_id: 3019,
+        //   device_user: 0,
+        //   device_type_id: 15,
+        //   device_name: "",
+        //   creat_time: 0,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "867435059487181",
+        //   d_id: 2980,
+        //   device_user: 0,
+        //   device_type_id: 14,
+        //   device_name: "色诱测报灯",
+        //   creat_time: 1630296976,
+        //   device_location: "",
+        // },
+        // {
+        //   device_id: "03832004",
+        //   d_id: 4069,
+        //   device_user: 0,
+        //   device_type_id: 10,
+        //   device_name: "",
+        //   creat_time: 1632900214,
+        //   device_location: "河南省郑州市金水区",
+        // },
+        // {
+        //   device_id: "03194571",
+        //   d_id: 4066,
+        //   device_user: 0,
+        //   device_type_id: 10,
+        //   device_name: "",
+        //   creat_time: 1632897651,
+        //   device_location: "河南省郑州市金水区",
+        // },
+        // {
+        //   device_id: "03870746",
+        //   d_id: 4065,
+        //   device_user: 0,
+        //   device_type_id: 10,
+        //   device_name: "",
+        //   creat_time: 1632896603,
+        //   device_location: "河南省郑州市金水区",
+        // },
+      ],
+      own_device: [],
+      device_ids: [], //选中的所有设备ID
+      page: 1,
+      totalNum: 0,
+      equipID: [],
+      text: "全选",
+      typelist: [], //该用户帐下所有的设备类型
+      plotData: {},
+    };
+  },
+  mounted() {
+    this.plotData = JSON.parse(this.$route.query.plotData);
+    this.getList();
+    // this.equipmenttypelist()
+  },
+  methods: {
+    getList() {
+      this.$axios({
+        method: "get",
+        url: "/plot_equip",
+        params: {
+          page_size: 12,
+          equip_id: this.equipId,
+          plot_id: this.plotData.plot_id,
+          page: this.page,
+          equip_type: "jk",
+        },
+      }).then((res) => {
+        console.log(res.data);
+        if (res.data.scd_list) {
+          let data = res.data.scd_list;
+          this.dataList = data.map((item) => {
+            item.checked = item.own != 0; //device_user=0代表待分配
+            return item;
+          });
+          this.own_device = res.data.own_list;
+          this.totalNum = res.data.count;
+        }
+      });
+    },
+    DateChange(val) {
+      if (this.timeRange) {
+        this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
+        this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
+        this.page = 1;
+        this.getList();
+      } else {
+        this.begin = "";
+        this.end = "";
+        this.getList();
+      }
+    },
+    changePage(val) {
+      this.page = val;
+      this.getList();
+    },
+    distSubm() {
+      this.dataList.forEach((item) => {
+        if (item.checked == true) {
+          this.device_ids.push(item.d_id);
+        } else {
+          for (let i = 0; i < this.own_device.length; i++) {
+            if (item.d_id == this.own_device[i]) {
+              this.own_device.splice(i, 1);
+            }
+          }
+        }
+      });
+      this.device_ids = this.device_ids.concat(this.own_device);
+      this.device_ids = [...new Set(this.device_ids)]; //数组去重
+
+      this.$axios({
+        method: "POST",
+        url: "/plot_equip",
+        data: this.qs.stringify({
+          device_ids: this.device_ids.join(","),
+          plot_id: this.plotData.plot_id,
+          equip_type: "jk",
+        }),
+      }).then((res) => {
+        console.log(res.data);
+        if (res.data == "分配成功") {
+          this.$message.success("分配设备成功！");
+        }
+        this.device_ids = [];
+      });
+    },
+    equipCheck() {
+      this.page = 1;
+      this.getList();
+    },
+    stopDefault(e) {
+      e.stopPropagation();
+    },
+    itemFun(item) {
+      item.checked = !item.checked;
+    },
+    allSel() {
+      if (this.text == "全选") {
+        this.text = "取消全选";
+        this.dataList = this.dataList.map((item) => {
+          item.checked = true;
+          return item;
+        });
+      } else {
+        this.text = "全选";
+        this.dataList = this.dataList.map((item) => {
+          item.checked = false;
+          return item;
+        });
+      }
+    },
+    equipmenttypelist() {
+      this.$axios({
+        method: "POST",
+        url: "/api/api_gateway?method=home.homes.user_device_type",
+      }).then((res) => {
+        this.typelist = res.data.data;
+        var obj = {
+          id: 0,
+          type_name: "全部",
+        };
+        this.typelist.unshift(obj);
+        console.log(this.typelist);
+      });
+    },
+  },
+};
+</script>
+
+<style lang='less' scoped>
+.search-box {
+  display: flex;
+  justify-content: flex-left;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  .filter-box > div {
+    margin-right: 15px;
+  }
+  .el-input {
+    width: 200px;
+  }
+  .el-date-editor--daterange {
+    width: 222px;
+  }
+}
+.el-card.selected {
+  border: 1px solid #14a478;
+}
+.el-card {
+  box-sizing: border-box;
+  .img-box {
+    text-align: center;
+    border-bottom: 1px solid #eee;
+    padding: 15px 0;
+    img {
+      height: 45px;
+    }
+    p {
+      font-size: 14px;
+      font-weight: 800;
+      margin-top: 10px;
+    }
+  }
+  .detail {
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+    p {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      line-height: 34px;
+      color: #666;
+      padding: 0 0px;
+    }
+  }
+}
+.userTip {
+  text-align: left;
+  font-size: 14px;
+}
+
+.breadcrumb_tab {
+  top: 60px !important;
+}
+</style>

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 const Login = () => import('@/components/Login')
 const Index = () => import('@/components/Index')
 const Monitor = () => import('@/pages/Monitor')
+const addList = () => import('@/pages/addList')
 const EquipList = () => import('@/pages/EquipList')
 const UserManger = () => import('@/components/UserManger')
 Vue.use(Router)
@@ -32,6 +33,10 @@ export default new Router({
           path: 'userManger1',
           component: UserManger
         },
+        {
+          path: 'addList',
+          component: addList,
+        },
       ]
     },