关联设备右侧设备类型复选框调整

src/views/systemManagement/companyList/components/companyDataDialog.vue

@@ -76,15 +76,13 @@
           </el-form-item>
           <el-form-item label="企业类型" prop="companyTypes">
             <el-checkbox-group v-model="form.companyTypes">
-              <el-checkbox label="剧毒" name="companyTypes"></el-checkbox>
+              <el-checkbox
-              <el-checkbox label="易剧毒" name="companyTypes"></el-checkbox>
+                @change="company_choice($event, item)"
-              <el-checkbox label="易致爆" name="companyTypes"></el-checkbox>
+                v-for="item in checkList"
-              <el-checkbox label="放射源" name="companyTypes"></el-checkbox>
+                :key="item.id"
-              <el-checkbox label="消防重点" name="companyTypes"></el-checkbox>
+                :label="item.label"
-              <el-checkbox label="所管消防" name="companyTypes"></el-checkbox>
+                >{{ item.label }}
-              <el-checkbox label="治安重点" name="companyTypes"></el-checkbox>
+              </el-checkbox>
-              <el-checkbox label="创安单位" name="companyTypes"></el-checkbox>
-              <el-checkbox label="外资合资" name="companyTypes"></el-checkbox>
             </el-checkbox-group>
           </el-form-item>
           <el-form-item label="企业主营范围" prop="businessScope">
@@ -258,6 +256,19 @@ export default {
     return {
       dialogTitle: "",
       visible: false,
+      checkList: [
+        { id: "1", label: "剧毒" },
+        { id: "2", label: "易制毒" },
+        { id: "3", label: "易制爆" },
+        { id: "4", label: "放射源" },
+        { id: "5", label: "消防重点" },
+        { id: "6", label: "所管消防" },
+        { id: "7", label: "治安重点" },
+        { id: "8", label: "创安单位" },
+        { id: "9", label: "外资合资" },
+      ],
+      arr:[],
+      cancel_arr:[],
       // 企业工商信息上半部分
       form: {
         // 企业工商信息上半部分
@@ -342,9 +353,12 @@ export default {
           policeDistrictCn: "",
           policeDistrictCode: "",
           belongingArea: "",
+          companyTypes: [], // 非下拉List, 记录复选框的
+          values: [],
+          id: [],
         };
         this.imageUrl = "";
-        Object.assign(this.form, newForm)
+        Object.assign(this.form, newForm);
       } else if (num === 3) {
         this.dialogTitle = "编辑";
         console.log("item", item);
@@ -357,9 +371,8 @@ export default {
         areaCode: "0",
       };
       common(params).then((res) => {
-        console.log('res1', res);
+        console.log("res1", res);
         this.form.province = res.data;
-        console.log('this.form.province',JSON.stringify(this.form.province));
       });
     },
     // 省下拉选中后，获取市级下拉
@@ -421,21 +434,35 @@ export default {
         this.form.jurisdiction = res.data;
       });
     },
+    company_choice(e, item) { 
+      // this.form.companyType是后台传送过来的字符串，我们需要转成数组
+      const company_arr = this.form.companyType.split(",") 
+      if (e) {
+        this.arr.push(item.id); 
+        company_arr.concat(this.arr) // 已选中的，和本次点击选中的
+        const new_arr = Array.from(new Set(company_arr.concat(this.arr))) // 去重
+        const sort_arr = new_arr.sort() // 重新排序
+        this.form.companyType = sort_arr.toString() 
+      } else {
+        company_arr.filter(val =>val != item.id) // 点击取消选中复选框时删除对应的
+        this.form.companyType = company_arr.filter(val =>val != item.id).toString() 
+      }
+    },
     // 确定数据
     saveFormData() {
       const params = this.form;
-      console.log("this.form", this.form);
+      console.log("this.form3", this.form);
       if (this.dialogTitle === "新建") {
         postCompanyList(params).then((res) => {
           console.log(res);
-            this.$message.success("新建成功");
+          this.$message.success("新建成功");
-            this.visible = false;
+          this.visible = false;
         });
       } else if (this.dialogTitle === "编辑") {
         putCompanyList(params).then((res) => {
           console.log(res);
-            this.$message.success("编辑成功");
+          this.$message.success("编辑成功");
-            this.visible = false;
+          this.visible = false;
         });
       }
       this.$emit("back");

src/views/systemManagement/correlationEquipment/components/equipmentTable.vue

@@ -141,6 +141,7 @@ export default {
     return {
       table_title: "视频监控设备列表", // 表格主题
       display_search: true, // 判断展示对应查询项
+      search_params_table: {}, // 承接传过来的表格查询入参
       search: {
         equipment: "",
         ip: "",
@@ -168,8 +169,8 @@ export default {
       ],
       // 智能表头
       tableColumn_preception: [
-        { prop: "deviceName", label: "设备名称",width: "270" },
+        { prop: "deviceName", label: "设备名称", width: "270" },
-        { prop: "devicePerceptionParentTypeCn", label: "设备类型" },
+        { prop: "devicePerceptionSubTypeCn", label: "设备类型" },
         { prop: "deviceIp", label: "设备IP" },
         // { prop: "longitude", label: "设备经度" },
         // { prop: "latitude", label: "设备维度" },
@@ -192,6 +193,7 @@ export default {
         this.tableColumn = this.tableColumn_preception;
       }
       this.pushTableData = data.pushTableData;
+      this.search_params_table = data.search_params;
     });
   },
   methods: {
@@ -204,12 +206,8 @@ export default {
         deviceName: this.search.equipment,
       };
       getPerceptionList(val).then((res) => {
-        if (res.code === 200) {
+        // res.row传给右下方表格数据
-          // res.row传给右下方表格数据
+        this.pushTableData = res.rows;
-          this.pushTableData = res.rows;
-        } else {
-          this.$message.warning("查询智能感知设备列表失败");
-        }
       });
     },
     reset() {
@@ -237,13 +235,10 @@ export default {
         deviceIp: this.search.equipemnt_ip,
         deviceName: this.search.equipment,
       };
+      Object.assign(val, this.search_params_table);
       getVideoList(val).then((res) => {
-        if (res.code === 200) {
+        // res.row传给右下方表格数据
-          // res.row传给右下方表格数据
+        this.pushTableData = res.rows;
-          this.pushTableData = res.rows;
-        } else {
-          this.$message.warning("查询视频监控设备列表失败");
-        }
       });
     },
     resetVideo() {
@@ -254,14 +249,14 @@ export default {
       const val = {
         pageSize: 4,
         pageNum: 1,
+        gbsChannelNo: this.search.channel_code,
+        deviceIp: this.search.equipemnt_ip,
+        deviceName: this.search.equipment,
       };
+      Object.assign(val, this.search_params_table);
       getVideoList(val).then((res) => {
-        if (res.code === 200) {
           // res.row传给右下方表格数据
           this.pushTableData = res.rows;
-        } else {
-          this.$message.warning("查询视频监控设备列表失败");
-        }
       });
     },
     openDialog(num, row) {
@@ -280,7 +275,7 @@ export default {
         if (this.table_title === "视频监控设备列表") {
           this.$refs.addVideoDialog.open(num, row);
         } else if (this.table_title === "智能感知设备列表") {
-          this.$refs.addPerceptionDialog.open(num,row);
+          this.$refs.addPerceptionDialog.open(num, row);
         }
       } else if (num === "3") {
         // 导入弹窗
@@ -288,14 +283,13 @@ export default {
       } else if (num === "4") {
         // 导出弹窗
         this.$refs.deriveDialog.open();
-      }
+      } else if (num === "5") {
-      else if (num === "5") {
         // 编辑弹窗
         console.log("rowww", row);
         if (this.table_title === "视频监控设备列表") {
           this.$refs.addVideoDialog.open(num, row);
         } else if (this.table_title === "智能感知设备列表") {
-          this.$refs.addPerceptionDialog.open(num,row);
+          this.$refs.addPerceptionDialog.open(num, row);
         }
       }
     },

src/views/systemManagement/correlationEquipment/components/searchBox.vue

@@ -2,9 +2,12 @@
   <!-- 关联设备的右侧查询盒子 -->
   <div class="searchBox_body">
     <div class="searchBox_img">
-      <div class="searchBox_img_top">
+      <el-button
+        class="searchBox_img_top"
+        @click="change_types(searchBoxData.typesAll)"
+      >
         <img :src="searchBoxData.src" alt="" />
-      </div>
+      </el-button>
       <span>{{ searchBoxData.img_text }}</span>
     </div>
     <el-checkbox-group v-model="searchBoxData.company_types">
@@ -12,7 +15,7 @@
         class="searchBox_btn"
         v-for="item in searchBoxData.btnList"
         :key="item.value"
-        @change="sendClearList(item.type, item.value)"
+        @change="sendClearList($event, item.type, item.value)"
         :label="item.name"
         name="type"
       >
@@ -34,50 +37,155 @@ export default {
       pushValue: {
         title: "",
         pushTableData: [],
+        search_params:{}, // 最新的查询入参
       },
+      types_params_list: [], // 选中视频企业类型对应的id
+      per_types_params_list: [], // 选中智能企业类型对应的id
     };
   },
   created() {},
   methods: {
-    async sendClearList(item, value) {
+    async sendClearList(e, item, value) {
+      if (e) {
+        // 单点确定要查询的时候
+        // 复选框单独点击时查询表格数据
+        this.$emit("clearList"); // 先执行清空邻复选框
+        // 切换表格标题
+        console.log("item123", item);
+        if (item === "1") {
+          this.types_params_list.push(value);
+          this.pushValue.title = "视频监控设备列表";
+          // 根据企业标签查询视频数据
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            deviceVideoSubTypes: "",
+          };
+          this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
+          await getVideoList(this.pushValue.search_params).then((res) => {
+            console.log("resVideoList1", res.rows);
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        } else if (item === "2") {
+          this.per_types_params_list.push(value);
+          this.pushValue.title = "智能感知设备列表";
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            devicePerceptionSubTypes: "",
+          };
+          this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
+            .sort()
+            .toString();
+          await getPerceptionList(this.pushValue.search_params).then((res) => {
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        }
+        bus.$emit("send", this.pushValue);
+        console.log("value", value);
+      } else {
+        // 复选框单独点击时查询表格数据
+        console.log("e1111", e);
+        this.$emit("clearList"); // 先执行清空邻复选框
+        // 切换表格标题
+        console.log("item123", item);
+        if (item === "1") {
+          console.log("this.types_params_list2", this.types_params_list);
+          console.log("value", value);
+          this.types_params_list = this.types_params_list.filter(
+            (val) => val != value
+          ); // 取消选中的标签查询
+          console.log("this.types_params_list3", this.types_params_list);
+          this.pushValue.title = "视频监控设备列表";
+          // 根据企业标签查询视频数据
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            deviceVideoSubTypes: "",
+          };
+          this.pushValue.search_params.deviceVideoSubTypes = this.types_params_list.sort().toString();
+          await getVideoList(this.pushValue.search_params).then((res) => {
+            console.log("resVideoList1", res.rows);
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        } else if (item === "2") {
+          this.per_types_params_list = this.per_types_params_list.filter(
+            (item) => item != value
+          );
+          this.pushValue.title = "智能感知设备列表";
+          this.pushValue.search_params = {
+            pageSize: 4,
+            pageNum: 1,
+            devicePerceptionSubTypes: "",
+          };
+          this.pushValue.search_params.devicePerceptionSubTypes = this.per_types_params_list
+            .sort()
+            .toString();
+          await getPerceptionList(this.pushValue.search_params).then((res) => {
+            // res.row传给右下方表格数据
+            this.pushValue.pushTableData = res.rows;
+          });
+        }
+        bus.$emit("send", this.pushValue);
+      }
+    },
+    async change_types(num) {
+      // 标签按钮左侧图标点击
       this.$emit("clearList"); // 先执行清空邻复选框
-      // 切换表格标题
+      this.types_params_list = []; // 点击按钮全查的时候，要让单点查询的记录清空掉
-      if (item === "1") {
+      this.per_types_params_list = [];
+      this.searchBoxData.company_types = [];
+      if (num === "1") {
+        // 视频监控全标签查
         this.pushValue.title = "视频监控设备列表";
-        // 根据企业标签查询视频数据
+        this.pushValue.search_params = {
-        const val = {
           pageSize: 4,
           pageNum: 1,
-          deviceVideoSubType: value,
+          deviceVideoSubTypes: "1,2,3,4,5,6,7,8,9",
         };
-        await getVideoList(val).then((res) => {
+        await getVideoList(this.pushValue.search_params).then((res) => {
-          if (res.code === 200) {
+          console.log("resVideoList1", res.rows);
-            console.log("resVideoList1", res.rows);
+          // res.row传给右下方表格数据
-            // res.row传给右下方表格数据
+          this.pushValue.pushTableData = res.rows;
-            this.pushValue.pushTableData = res.rows;
-          } else {
-            this.$message.warning("查询视频监控设备列表失败");
-          }
         });
-      } else if (item === "2") {
+      } else if (num === "2") {
+        console.log("num123", num);
+        // 智能感知全标签查
         this.pushValue.title = "智能感知设备列表";
-        const val = {
+        this.pushValue.search_params = {
           pageSize: 4,
           pageNum: 1,
-          devicePerceptionSubType: value,
+          devicePerceptionSubTypes: "1,2,3,4,6,7,8,10,11",
         };
-        await getPerceptionList(val).then((res) => {
+        await getPerceptionList(this.pushValue.search_params).then((res) => {
-          if (res.code === 200) {
+          // res.row传给右下方表格数据
-            // res.row传给右下方表格数据
+          this.pushValue.pushTableData = res.rows;
-            this.pushValue.pushTableData = res.rows;
-          } else {
-            this.$message.warning("查询智能感知设备列表失败");
-          }
         });
       }
       bus.$emit("send", this.pushValue);
-      console.log("value", value);
+      // const types_arr = this.searchBoxData.btnList.map((item) => ({
-      // deviceVideoSubType
+      //   name: item.name,
+      // }));
+      // const types_text = types_arr.map((item) => item.name);
+      // console.log("types_text", types_text);
+      // console.log(
+      //   "this.searchBoxData.company_types",
+      //   this.searchBoxData.company_types.length
+      // );
+      // // 全选或者全不选操作
+      // if (this.searchBoxData.company_types.length === 9) {
+      //   this.searchBoxData.company_types = []; // 置空，全不选
+      // } else if (
+      //   this.searchBoxData.company_types.length != 0 &&
+      //   this.searchBoxData.company_types.length != 9
+      // ) {
+      //   this.searchBoxData.company_types = types_text; // 没全选，则全选
+      // } else if (this.searchBoxData.company_types.length === 0) {
+      //   this.searchBoxData.company_types = types_text; // 没选，也全选
+      // }
     },
   },
 };
@@ -91,22 +199,30 @@ export default {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    width: 19.8%;
+    width: 22%;
-    height: 53%;
+    height: 100%;
-    padding-top: 8%;
-    padding-left: 3%;
     color: #fff;
     text-align: center;
     font-size: 15px;
     .searchBox_img_top {
-      width: 78%;
+      background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
-      height: 100%;
+      background-size: 100% 100% !important;
+      width: 5vw;
+      height: 10vh;
       margin: 0px auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 0px;
       img {
-        width: 100%;
+        width: 1.8vw;
-        height: 100%;
+        height: 3.6vh;
       }
     }
+    .searchBox_img_top:focus,
+    .searchBox_img_top:hover {
+      filter: brightness(170%);
+    }
     span {
       margin-top: 7%;
     }

src/views/systemManagement/correlationEquipment/index.vue

@@ -25,7 +25,6 @@
                 <i class="el-icon-search"></i>
               </div>
             </div>
-            <el-divider></el-divider>
             <!-- 公司树数据 -->
             <div class="cardBodyLeft_footer">
               <el-tree
@@ -41,6 +40,20 @@
                   :title="node.label"
                   class="el-tree-node__label node-label"
                 >
+                  <span>
+                    <img
+                      v-if="companyTreeData.children && companyTreeData.children.length > 0"
+                      src="@/assets/companyFile/add.png"
+                      style="width: 20px; height: 20px"
+                      alt
+                    />
+                    <img
+                      v-else
+                      src="@/assets/companyFile/minus.png"
+                      style="width: 20px; height: 20px"
+                      alt
+                    />
+                  </span>
                   {{ node.label }}
                 </span>
               </el-tree>
@@ -107,7 +120,7 @@ export default {
     };
     getAllData(params).then((res) => {
       if (res.code === 200) {
-        console.log("res", res);
+        console.log("resning", res);
         // 树形赋值
         this.companyTreeData = res.data;
         console.log("this.companyTreeData1", this.companyTreeData);
@@ -130,37 +143,39 @@ export default {
     // 给子查询盒子传递字符和图片地址
     // 左边盒子
     this.searchBox_left_text = {
-      src: require("@/assets/companyFile/camera.png"),
+      src: require("@/assets/companyFile/camera03.png"),
       img_text: "视频监控设备",
       btnList: [
-        { value: "1", name: "公共区域", type: "1" },
+        { value: 1, name: "公共区域", type: "1" },
-        { value: "2", name: "地下车库", type: "1" },
+        { value: 2, name: "地下车库", type: "1" },
-        { value: "3", name: "全景监控", type: "1" },
+        { value: 3, name: "全景监控", type: "1" },
-        { value: "5", name: "人脸抓拍", type: "1" },
+        { value: 5, name: "人脸抓拍", type: "1" },
-        { value: "6", name: "电梯监控", type: "1" },
+        { value: 6, name: "电梯监控", type: "1" },
-        { value: "7", name: "人体测温", type: "1" },
+        { value: 7, name: "人体测温", type: "1" },
-        { value: "8", name: "车辆抓拍", type: "1" },
+        { value: 8, name: "车辆抓拍", type: "1" },
-        { value: "9", name: "人脸门禁", type: "1" },
+        { value: 9, name: "人脸门禁", type: "1" },
-        { value: "4", name: "高空抛物", type: "1" },
+        { value: 4, name: "高空抛物", type: "1" },
       ],
       company_types: [],
+      typesAll: "1",
     };
     // 右边盒子
     this.searchBox_right_text = {
-      src: require("@/assets/companyFile/intelligence.png"),
+      src: require("@/assets/companyFile/intelligence02.png"),
       img_text: "智能感知设备",
       btnList: [
-        { value: "2", name: "车辆抓拍", type: "2" },
+        { value: 2, name: "车辆抓拍", type: "2" },
-        { value: "1", name: "人脸抓拍", type: "2" },
+        { value: 1, name: "人脸抓拍", type: "2" },
-        { value: "3", name: "门禁设备", type: "2" },
+        { value: 3, name: "门禁设备", type: "2" },
-        { value: "4", name: "高抛抓拍", type: "2" },
+        { value: 4, name: "高抛抓拍", type: "2" },
-        { value: "6", name: "全结构化", type: "2" },
+        { value: 6, name: "全结构化", type: "2" },
-        { value: "7", name: "智能烟感", type: "2" },
+        { value: 7, name: "智能烟感", type: "2" },
-        { value: "8", name: "访客机", type: "2" },
+        { value: 8, name: "访客机", type: "2" },
-        { value: "10", name: "多维设备", type: "2" },
+        { value: 10, name: "多维设备", type: "2" },
-        { value: "11", name: "WIFI设备", type: "2" },
+        { value: 11, name: "WIFI设备", type: "2" },
       ],
       company_types: [],
+      typesAll: "2",
     };
   },
   methods: {
@@ -287,7 +302,8 @@ export default {
         }
       }
       .cardBodyLeft_footer {
-        height: 71.7vh;
+        margin-top: 3vh;
+        height: 71vh;
         .el-tree {
           /* 树形数据过长添加滚动条 */
           height: 100%;
@@ -297,7 +313,6 @@ export default {
           background: #293738;
           color: #fff !important;
           /deep/.el-tree-node__content {
-            border: 0.5px dashed white;
             height: 50px;
           }
           .el-tree-node__label.node-label {
@@ -356,8 +371,8 @@ export default {
       .cardBodyRight_search {
         display: flex;
         justify-content: space-evenly;
-        width: 100%;
+        width: 63vw;
-        height: 25%;
+        height: 20vh;
         .video {
           width: 48%;
           height: 100%;
@@ -367,7 +382,7 @@ export default {
         .intelligence {
           width: 48%;
           height: 100%;
-          background: #2c4046;
+          background: #3b5153;
           border-radius: 4px;
         }
       }