提交

src/router/index.js

@@ -74,6 +74,11 @@ const routes = [
                 name: 'correlationEquipment',
                 component: () => import('@/views/systemManagement/correlationEquipment'),
               },
+              {
+                path: 'correlationEquipment2',
+                name: 'correlationEquipment2',
+                component: () => import('@/views/systemManagement/correlationEquipment2'),
+              },
               // 企业名单
               {
                 path: 'companyList',

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

@@ -239,7 +239,16 @@
       </div>
     </div>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="saveFormData()">确 定</el-button>
+      <el-button
+        @click="
+          saveFormData(
+            'commerceMessage_form',
+            'commerceMessage_form_two',
+            'company_position_form'
+          )
+        "
+        >确 定</el-button
+      >
       <el-button @click="closeForm">取 消</el-button>
     </div>
   </el-dialog>
@@ -251,7 +260,7 @@ import {
   postCompanyList,
   putCompanyList,
 } from "@/api/systemManagement";
-import defaultImage from "@/assets/companyFile/default.png";  
+import defaultImage from "@/assets/companyFile/default.png";
 export default {
   name: "CompanyDataDialog",
   data() {
@@ -310,33 +319,39 @@ export default {
         belongingArea: "",
       },
       imageUrl: "",
-      upUrl: `http://${window.location.host}/zhapi/safety/system/enterpriseList`, // 图片上传地址 
+      // upUrl: `http://${window.location.host}/zhapi/safety/system/enterpriseList`,
+      upUrl: 'http://192.168.0.188:8888/zhapi/safety/system/enterpriseList', 
       upheaders: {
         Authorization: localStorage.getItem("AuthorizationToken"),
       },
-      rules:{
+      rules: {
         companyName: [
           { required: true, message: "请选择企业", trigger: "change" },
         ],
-        companyTypes:[
+        companyTypes: [
-          { type: 'array', required: true, message: '请至少选择一个企业类型', trigger: 'change' }
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个企业类型",
+            trigger: "change",
+          },
         ],
-        provinceName:[
+        provinceName: [
           { required: true, message: "请选择省份名称", trigger: "change" },
         ],
-        cityName:[
+        cityName: [
           { required: true, message: "请选择城市名称", trigger: "change" },
         ],
-        areaName:[
+        areaName: [
           { required: true, message: "请选择区县名称", trigger: "change" },
         ],
-        blockName:[
+        blockName: [
           { required: true, message: "请选择街道/乡镇名称", trigger: "change" },
         ],
-        streetName:[
+        streetName: [
           { required: true, message: "请选择社区/村名称", trigger: "change" },
         ],
-      }
+      },
     };
   },
   created() {
@@ -378,10 +393,10 @@ export default {
           policeDistrictCn: "",
           policeDistrictCode: "",
           belongingArea: "",
-          companyType:'',
+          companyType: "",
           companyTypes: [], // 非下拉List, 记录复选框的
           values: [],
-          id: '',
+          id: "",
         };
         this.imageUrl = "";
         Object.assign(this.form, newForm);
@@ -477,39 +492,58 @@ export default {
       }
     },
     // 确定数据
-    async saveFormData() {
+    saveFormData(formName1, formName2, formName3) {
-      delete this.form.city
+      this.$refs[formName1].validate((valid1) => {
-      delete this.form.community
+        if (valid1) {
-      delete this.form.companyTypes
+          this.$refs[formName2].validate((valid2) => {
-      delete this.form.county
+            if (valid2) {
-      delete this.form.township
+              this.$refs[formName3].validate((valid3) => {
-      delete this.form.jurisdiction
+                if (valid3) {
-      delete this.form.province
+                  delete this.form.city;
-      delete this.form.values
+                  delete this.form.community;
-      const params = this.form;
+                  // delete this.form.companyTypes;
-      console.log("this.form3", this.form);
+                  delete this.form.county;
-      if (this.dialogTitle === "新建") {
+                  delete this.form.township;
-        await postCompanyList(params).then((res) => {
+                  delete this.form.jurisdiction;
-          console.log(res);
+                  delete this.form.province;
-          this.$message.success("新建成功");
+                  delete this.form.values;
-          this.visible = false;
+                  const params = this.form;
-        });
+                  console.log("this.form3", this.form);
-      } else if (this.dialogTitle === "编辑") {
+                  if (this.dialogTitle === "新建") {
-      //   const params_again = {
+                    postCompanyList(params).then((res) => {
-      //   // pageSize: this.pageSize,
+                      console.log(res);
-      //   // pageNum: this.pageNum,
+                      this.$message.success("新建成功");
-      //   companyName: this.searchCompany, // 查询框条件
+                      this.visible = false;
-      // };
+                      this.$emit("back");
-      //   await getCompanyList(params_again).then(res=>{
+                    });
-      //     console.log('res_again',res);
+                  } else if (this.dialogTitle === "编辑") {
-      //   })
+                    //   const params_again = {
-        await putCompanyList(params).then((res) => {
+                    //   // pageSize: this.pageSize,
-          console.log(res);
+                    //   // pageNum: this.pageNum,
-          this.$message.success("编辑成功");
+                    //   companyName: this.searchCompany, // 查询框条件
-          this.visible = false;
+                    // };
-        });
+                    //   await getCompanyList(params_again).then(res=>{
-      }
+                    //     console.log('res_again',res);
-      this.$emit("back");
+                    //   })
+                    putCompanyList(params).then((res) => {
+                      console.log(res);
+                      this.$message.success("编辑成功");
+                      this.visible = false;
+                      this.$emit("back");
+                    });
+                  }
+                } else {
+                  this.$message.warning("请填入必填项");
+                }
+              }); // 视频通道信息必填验证
+            } else {
+              this.$message.warning("请填入必填项");
+            }
+          }); // 视频通道信息必填验证
+        } else {
+          this.$message.warning("请填入必填项");
+        }
+      }); // 设备基础必填验证
     },
     handleAvatarSuccess(res, file) {
       console.log("resimg", res);
@@ -669,7 +703,7 @@ export default {
       font-size: 28px;
       position: relative;
       color: #8c939d;
-      width: 220px; 
+      width: 220px;
       height: 220px;
       background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important;
       background-size: 40% 40% !important;

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

@@ -0,0 +1,339 @@
+<template>
+  <!-- 视频设备、智能设备查询 -->
+  <div class="search_box">
+    <div class="box_title">设备列表</div>
+    <div class="search_check">
+      <!-- 视频设备查询条件 -->
+      <div class="video_check">
+        <div class="video_btn">
+          <el-button class="video_button" @click="video_all_check">
+            <img :src="video_btn_img_src" alt="" />
+          </el-button>
+          <div class="video_text">{{ video_text }}</div>
+        </div>
+        <el-checkbox-group v-model="video_checkgroup">
+          <el-checkbox
+            class="video_checks"
+            v-for="item in video_btn_list"
+            :key="item.value"
+            :label="item.name"
+            @change="video_check_search($event, item.value)"
+          >
+            {{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+      <!-- 智能设备查询条件 -->
+      <div class="perception_check">
+        <div class="perception_btn">
+          <el-button class="perception_button" @click="perception_all_check">
+            <img :src="perception_btn_img_src" alt="" />
+          </el-button>
+          <div class="perception_text">{{ perception_text }}</div>
+        </div>
+        <el-checkbox-group v-model="perception_checkgroup">
+          <el-checkbox
+            class="perception_checks"
+            v-for="item in perception_btn_list"
+            :key="item.value"
+            :label="item.name"
+            @change="perception_check_search($event, item.value)"
+          >
+            {{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
+export default {
+  name: "SearchBox",
+  props: {
+    only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
+  },
+  data() {
+    return {
+      video_checkgroup: [], // 视频设备复选框双向绑定
+      deviceVideoSubTypes: [], // 视频设备点击查询添加参数
+      video_btn_list: [
+        { value: 1, name: "公共区域", type: "1" },
+        { value: 2, name: "地下车库", type: "1" },
+        { value: 3, name: "全景监控", type: "1" },
+        { value: 5, name: "人脸抓拍", type: "1" },
+        { value: 6, name: "电梯监控", type: "1" },
+        { value: 7, name: "人体测温", type: "1" },
+        { value: 8, name: "车辆抓拍", type: "1" },
+        { value: 9, name: "人脸门禁", type: "1" },
+        { value: 4, name: "高空抛物", type: "1" },
+      ],
+      video_btn_img_src: require("@/assets/companyFile/camera03.png"),
+      video_text: "视频监控设备",
+      perception_checkgroup: [], // 智能设备复选框双向绑定
+      devicePerceptionSubTypes: [], // 智能设备点击查询添加参数
+      perception_btn_list: [
+        { value: 2, name: "车辆抓拍", type: "2" },
+        { value: 1, name: "人脸抓拍", type: "2" },
+        { value: 3, name: "门禁设备", type: "2" },
+        { value: 4, name: "高抛抓拍", type: "2" },
+        { value: 6, name: "全结构化", type: "2" },
+        { value: 7, name: "智能烟感", type: "2" },
+        { value: 8, name: "访客机", type: "2" },
+        { value: 10, name: "多维设备", type: "2" },
+        { value: 11, name: "WIFI设备", type: "2" },
+      ],
+      perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
+      perception_text: "智能感知设备",
+      check_push_table_data: {}, // 复选框查询的表格数据传递给表格
+    };
+  },
+  methods: {
+    clear_search_list() {
+      this.video_checkgroup = []; // 视频设备复选框清空
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.deviceVideoSubTypes = []; // 视频设备复选框清空
+      this.devicePerceptionSubTypes = []; // 智能查询参数清空
+      delete this.only_params.deviceVideoSubType;
+      delete this.only_params.devicePerceptionSubType;
+    },
+    // 视频设备按钮查全部
+    video_all_check() {
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.video_checkgroup = []; // 视频设备复选框清空
+      delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+      this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部
+      getVideoList(this.only_params).then((res) => {
+        console.log("res_video", res);
+        this.check_push_table_data = res;
+        let data_params = {
+          data: this.check_push_table_data,
+          params: this.only_params,
+        };
+        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+      });
+    },
+    // 智能设备按钮查全部
+    perception_all_check() {
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.video_checkgroup = []; // 视频设备复选框清空
+      delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+      this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部
+      getVideoList(this.only_params).then((res) => {
+        console.log("res_video", res);
+        this.check_push_table_data = res;
+        let data_params = {
+          data: this.check_push_table_data,
+          params: this.only_params,
+        };
+        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+      });
+    },
+    // 视频设备复选查询
+    video_check_search(e, value) {
+      if (e) {
+        // 点击
+        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+        this.perception_checkgroup = []; //智能设备复选框清空
+        this.devicePerceptionSubTypes = []; // 智能查询参数清空
+        this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
+        this.only_params.deviceVideoSubType =
+          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+        getVideoList(this.only_params).then((res) => {
+          console.log("res_video", res);
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      } else {
+        // 取消
+        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+        this.perception_checkgroup = []; //智能设备复选框清空
+        this.devicePerceptionSubTypes = []; // 智能查询参数清空
+        this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
+          (item) => item != value
+        ); // 收集视频类型查询入参
+        this.only_params.deviceVideoSubType =
+          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+        getVideoList(this.only_params).then((res) => {
+          console.log("res_video", res);
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      }
+    },
+    // 智能设备复选查询
+    perception_check_search(e, value) {
+      if (e) {
+        // 点击
+        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+        this.video_checkgroup = []; // 视频设备复选框清空
+        this.deviceVideoSubTypes = []; // 视频设备复选框清空
+        this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
+        this.only_params.devicePerceptionSubType =
+          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+        getPerceptionList(this.only_params).then((res) => {
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      } else {
+        // 取消
+        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+        this.video_checkgroup = []; // 视频设备复选框清空
+        this.deviceVideoSubTypes = []; // 视频设备复选框清空
+        this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
+          (item) => item != value
+        ); // 收集智能类型查询入参
+        this.only_params.devicePerceptionSubType =
+          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+        getPerceptionList(this.only_params).then((res) => {
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.search_box {
+  margin: 0 auto;
+  margin-top: 1vh;
+  width: 63vw;
+  height: 24vh;
+  //   border: 0.1px solid #485f6c;
+  .box_title {
+    width: 63vw;
+    height: 2vh;
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  .search_check {
+    margin-top: 1vh;
+    width: 63vw;
+    height: 20vh;
+    // border: 0.1px solid #485f6c;
+    display: flex;
+    justify-content: space-between;
+    // 视频设备复选框盒子
+    .video_check {
+      width: 31vw;
+      height: 20vh;
+      border: 0.1px solid #485f6c;
+      display: flex;
+      color: #fff;
+      text-align: center;
+      // 按钮区域
+      .video_btn {
+        width: 7vw;
+        height: 20vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .video_button {
+          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+          background-size: 100% 100% !important;
+          width: 5vw;
+          height: 10vh;
+          margin: 0px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 0px;
+          img {
+            width: 1.8vw;
+            height: 3.6vh;
+          }
+        }
+        .video_button:focus,
+        .video_button:hover {
+          filter: brightness(170%);
+        }
+      }
+    }
+    // 智能设备复选框盒子
+    .perception_check {
+      width: 31vw;
+      height: 20vh;
+      border: 0.1px solid #485f6c;
+      display: flex;
+      color: #fff;
+      text-align: center;
+      // 按钮区域
+      .perception_btn {
+        width: 7vw;
+        height: 20vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .perception_button {
+          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+          background-size: 100% 100% !important;
+          width: 5vw;
+          height: 10vh;
+          margin: 0px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 0px;
+          img {
+            width: 1.8vw;
+            height: 3.6vh;
+          }
+        }
+        .perception_button:focus,
+        .perception_button:hover {
+          filter: brightness(170%);
+        }
+      }
+    }
+  }
+  /deep/.el-checkbox-group {
+    width: 24vw;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: wrap;
+    padding: 20px 5px 0px 5px;
+    .el-checkbox {
+      width: 30%;
+      height: 4vh;
+      text-align: center;
+      line-height: 4vh;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+      margin-right: 0px;
+      .el-checkbox__label {
+        color: #fff;
+        padding-left: 0px;
+      }
+    }
+    .el-checkbox.is-checked {
+      background: #495461;
+      border-radius: 0px;
+      border: 1px solid;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+    .el-checkbox__inner {
+      display: none;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,339 @@
+<template>
+  <!-- 视频设备、智能设备查询 -->
+  <div class="search_box">
+    <div class="box_title">设备列表</div>
+    <div class="search_check">
+      <!-- 视频设备查询条件 -->
+      <div class="video_check">
+        <div class="video_btn">
+          <el-button class="video_button" @click="video_all_check">
+            <img :src="video_btn_img_src" alt="" />
+          </el-button>
+          <div class="video_text">{{ video_text }}</div>
+        </div>
+        <el-checkbox-group v-model="video_checkgroup">
+          <el-checkbox
+            class="video_checks"
+            v-for="item in video_btn_list"
+            :key="item.value"
+            :label="item.name"
+            @change="video_check_search($event, item.value)"
+          >
+            {{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+      <!-- 智能设备查询条件 -->
+      <div class="perception_check">
+        <div class="perception_btn">
+          <el-button class="perception_button" @click="perception_all_check">
+            <img :src="perception_btn_img_src" alt="" />
+          </el-button>
+          <div class="perception_text">{{ perception_text }}</div>
+        </div>
+        <el-checkbox-group v-model="perception_checkgroup">
+          <el-checkbox
+            class="perception_checks"
+            v-for="item in perception_btn_list"
+            :key="item.value"
+            :label="item.name"
+            @change="perception_check_search($event, item.value)"
+          >
+            {{ item.name }}</el-checkbox
+          >
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getVideoList, getPerceptionList } from "@/api/correlationEquipment";
+export default {
+  name: "SearchBox",
+  props: {
+    only_params: {}, // 主页传来的查询入参，会在本页面添加更多查询入参
+  },
+  data() {
+    return {
+      video_checkgroup: [], // 视频设备复选框双向绑定
+      deviceVideoSubTypes: [], // 视频设备点击查询添加参数
+      video_btn_list: [
+        { value: 1, name: "公共区域", type: "1" },
+        { value: 2, name: "地下车库", type: "1" },
+        { value: 3, name: "全景监控", type: "1" },
+        { value: 5, name: "人脸抓拍", type: "1" },
+        { value: 6, name: "电梯监控", type: "1" },
+        { value: 7, name: "人体测温", type: "1" },
+        { value: 8, name: "车辆抓拍", type: "1" },
+        { value: 9, name: "人脸门禁", type: "1" },
+        { value: 4, name: "高空抛物", type: "1" },
+      ],
+      video_btn_img_src: require("@/assets/companyFile/camera03.png"),
+      video_text: "视频监控设备",
+      perception_checkgroup: [], // 智能设备复选框双向绑定
+      devicePerceptionSubTypes: [], // 智能设备点击查询添加参数
+      perception_btn_list: [
+        { value: 2, name: "车辆抓拍", type: "2" },
+        { value: 1, name: "人脸抓拍", type: "2" },
+        { value: 3, name: "门禁设备", type: "2" },
+        { value: 4, name: "高抛抓拍", type: "2" },
+        { value: 6, name: "全结构化", type: "2" },
+        { value: 7, name: "智能烟感", type: "2" },
+        { value: 8, name: "访客机", type: "2" },
+        { value: 10, name: "多维设备", type: "2" },
+        { value: 11, name: "WIFI设备", type: "2" },
+      ],
+      perception_btn_img_src: require("@/assets/companyFile/intelligence02.png"),
+      perception_text: "智能感知设备",
+      check_push_table_data: {}, // 复选框查询的表格数据传递给表格
+    };
+  },
+  methods: {
+    clear_search_list() {
+      this.video_checkgroup = []; // 视频设备复选框清空
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.deviceVideoSubTypes = []; // 视频设备复选框清空
+      this.devicePerceptionSubTypes = []; // 智能查询参数清空
+      delete this.only_params.deviceVideoSubType;
+      delete this.only_params.devicePerceptionSubType;
+    },
+    // 视频设备按钮查全部
+    video_all_check() {
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.video_checkgroup = []; // 视频设备复选框清空
+      delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+      this.only_params.deviceVideoSubType = ""; // 按钮查视频设备的全部
+      getVideoList(this.only_params).then((res) => {
+        console.log("res_video", res);
+        this.check_push_table_data = res;
+        let data_params = {
+          data: this.check_push_table_data,
+          params: this.only_params,
+        };
+        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+      });
+    },
+    // 智能设备按钮查全部
+    perception_all_check() {
+      this.perception_checkgroup = []; //智能设备复选框清空
+      this.video_checkgroup = []; // 视频设备复选框清空
+      delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+      this.only_params.devicePerceptionSubType = ""; // 按钮查智能设备的全部
+      getVideoList(this.only_params).then((res) => {
+        console.log("res_video", res);
+        this.check_push_table_data = res;
+        let data_params = {
+          data: this.check_push_table_data,
+          params: this.only_params,
+        };
+        this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+      });
+    },
+    // 视频设备复选查询
+    video_check_search(e, value) {
+      if (e) {
+        // 点击
+        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+        this.perception_checkgroup = []; //智能设备复选框清空
+        this.devicePerceptionSubTypes = []; // 智能查询参数清空
+        this.deviceVideoSubTypes.push(value); // 收集视频类型查询入参
+        this.only_params.deviceVideoSubType =
+          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+        getVideoList(this.only_params).then((res) => {
+          console.log("res_video", res);
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      } else {
+        // 取消
+        delete this.only_params.devicePerceptionSubType; // 删除智能查询携带的入参
+        this.perception_checkgroup = []; //智能设备复选框清空
+        this.devicePerceptionSubTypes = []; // 智能查询参数清空
+        this.deviceVideoSubTypes = this.deviceVideoSubTypes.filter(
+          (item) => item != value
+        ); // 收集视频类型查询入参
+        this.only_params.deviceVideoSubType =
+          this.deviceVideoSubTypes.toString(); // 这个入参可能会有变化
+        getVideoList(this.only_params).then((res) => {
+          console.log("res_video", res);
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      }
+    },
+    // 智能设备复选查询
+    perception_check_search(e, value) {
+      if (e) {
+        // 点击
+        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+        this.video_checkgroup = []; // 视频设备复选框清空
+        this.deviceVideoSubTypes = []; // 视频设备复选框清空
+        this.devicePerceptionSubTypes.push(value); // 收集智能类型查询入参
+        this.only_params.devicePerceptionSubType =
+          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+        getPerceptionList(this.only_params).then((res) => {
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      } else {
+        // 取消
+        delete this.only_params.deviceVideoSubType; // 删除视频查询携带的入参
+        this.video_checkgroup = []; // 视频设备复选框清空
+        this.deviceVideoSubTypes = []; // 视频设备复选框清空
+        this.devicePerceptionSubTypes = this.devicePerceptionSubTypes.filter(
+          (item) => item != value
+        ); // 收集智能类型查询入参
+        this.only_params.devicePerceptionSubType =
+          this.devicePerceptionSubTypes.toString(); // 这个入参可能会有变化
+        getPerceptionList(this.only_params).then((res) => {
+          this.check_push_table_data = res;
+          let data_params = {
+            data: this.check_push_table_data,
+            params: this.only_params,
+          };
+          this.$emit("push_data_to_table", data_params); // 传给父亲，再转给兄弟Table
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.search_box {
+  margin: 0 auto;
+  margin-top: 1vh;
+  width: 63vw;
+  height: 24vh;
+  //   border: 0.1px solid #485f6c;
+  .box_title {
+    width: 63vw;
+    height: 2vh;
+    color: #fff;
+    text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+  }
+  .search_check {
+    margin-top: 1vh;
+    width: 63vw;
+    height: 20vh;
+    // border: 0.1px solid #485f6c;
+    display: flex;
+    justify-content: space-between;
+    // 视频设备复选框盒子
+    .video_check {
+      width: 31vw;
+      height: 20vh;
+      border: 0.1px solid #485f6c;
+      display: flex;
+      color: #fff;
+      text-align: center;
+      // 按钮区域
+      .video_btn {
+        width: 7vw;
+        height: 20vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .video_button {
+          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+          background-size: 100% 100% !important;
+          width: 5vw;
+          height: 10vh;
+          margin: 0px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 0px;
+          img {
+            width: 1.8vw;
+            height: 3.6vh;
+          }
+        }
+        .video_button:focus,
+        .video_button:hover {
+          filter: brightness(170%);
+        }
+      }
+    }
+    // 智能设备复选框盒子
+    .perception_check {
+      width: 31vw;
+      height: 20vh;
+      border: 0.1px solid #485f6c;
+      display: flex;
+      color: #fff;
+      text-align: center;
+      // 按钮区域
+      .perception_btn {
+        width: 7vw;
+        height: 20vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .perception_button {
+          background: url("~@/assets/companyFile/btn08.png") no-repeat !important;
+          background-size: 100% 100% !important;
+          width: 5vw;
+          height: 10vh;
+          margin: 0px auto;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: 0px;
+          img {
+            width: 1.8vw;
+            height: 3.6vh;
+          }
+        }
+        .perception_button:focus,
+        .perception_button:hover {
+          filter: brightness(170%);
+        }
+      }
+    }
+  }
+  /deep/.el-checkbox-group {
+    width: 24vw;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: wrap;
+    padding: 20px 5px 0px 5px;
+    .el-checkbox {
+      width: 30%;
+      height: 4vh;
+      text-align: center;
+      line-height: 4vh;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+      margin-right: 0px;
+      .el-checkbox__label {
+        color: #fff;
+        padding-left: 0px;
+      }
+    }
+    .el-checkbox.is-checked {
+      background: #495461;
+      border-radius: 0px;
+      border: 1px solid;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+    .el-checkbox__inner {
+      display: none;
+    }
+  }
+}
+</style>

src/views/systemManagement/correlationEquipment2/index.vue

@@ -0,0 +1,325 @@
+<template>
+  <!-- 关联设备 -->
+  <el-card class="box-card">
+    <div class="topZS"></div>
+    <div class="bottomZS"></div>
+    <div slot="header" class="clearfix">
+      <span>关联设备</span>
+    </div>
+    <div class="cardBody">
+      <div class="left_tree">
+        <div class="left_search">
+          <el-input
+            class="left_search_input"
+            placeholder="输入企业名称搜索"
+            v-model="search_company"
+          >
+          </el-input>
+          <div class="left_search_button" @click="search_com()">
+            <i class="el-icon-search"></i>
+          </div>
+        </div>
+        <!-- 公司树数据 -->
+        <div class="cardBodyLeft_footer">
+          <el-tree
+            ref="company_tree"
+            :data="company_tree_data"
+            :props="defaultProps"
+            @node-click="handle_node_click"
+            node-key="subAreaCode"
+            :default-expand-all="defaultExpandAll"
+          >
+            <span
+              slot-scope="{ node }"
+              :title="node.label"
+              class="el-tree-node__label node-label"
+            >
+              {{ node.label }}
+            </span>
+          </el-tree>
+        </div>
+      </div>
+      <div class="right">
+        <SearchBox
+          ref="searchBox"
+          :only_params="only_params"
+          @push_data_to_table="push_data_to_table"
+        ></SearchBox>
+        <!-- 右下方表格区域 -->
+        <div class="right_table">
+          <EquipmentTable
+            ref="equipmentTable"
+            :push_table_data="push_table_data"
+          ></EquipmentTable>
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+  <script>
+import { getAllData, getVideoList } from "@/api/correlationEquipment";
+import SearchBox from "./components/searchBox";
+import EquipmentTable from "./components/equipmentTable";
+export default {
+  name: "correlationEquipment2",
+  components: {
+    SearchBox,
+    EquipmentTable,
+  },
+  data() {
+    return {
+      search_company: "",
+      company_tree_data: [], // 公司单位树
+      defaultProps: {
+        children: "children",
+        label: "areaName",
+      },
+      defaultExpandAll: true, // 控制公司树默认展开
+      only_params: {}, // 此为最终查询参数 一直查到表格查询
+      push_table_data: {}, // 传给右下方表格的数据
+    };
+  },
+  created() {
+    this.only_params = {
+      pageSize: 5,
+      pageNum: 1,
+    };
+    // 页面打开默认宁波查询
+    getAllData({ areaName: "宁波" }).then((res) => {
+      console.log("resning", res);
+      // 树形赋值
+      this.company_tree_data = res.data;
+      console.log("this.company_tree_data", this.company_tree_data);
+      // 与此同时，要展示右下方的表格数据
+      // 页面展开默认视频设备表格
+      getVideoList(this.only_params).then((res) => {
+        console.log("resVideoList", res.rows); //res.rows  res.total
+        // 传给右下方表格数据
+        this.push_table_data = res;
+        let data_params = {
+          data: this.push_table_data,
+          params: this.only_params,
+        };
+        this.push_data_to_table(data_params);
+      });
+    });
+  },
+  methods: {
+    // 企业名称放大镜查询
+    // 支持模糊查询
+    search_com() {
+      getAllData({
+        areaName: this.search_company === "" ? "宁波" : this.search_company,
+      })
+        .then((res) => {
+          // 树形赋值
+          this.company_tree_data = res.data;
+          console.log("this.company_tree_data", this.company_tree_data);
+        })
+        .catch((err) => {
+          console.log("err", err);
+          this.$message.warning("查询失败,请输入正确查询条件");
+          this.company_tree_data = ""; // 清空树数据
+        });
+    },
+    handle_node_click(data) {
+      console.log("data123", data);
+      // 视频查询List
+      // 把视频和智能的已选标签清空
+      //   this.searchBox_right_text.company_types = [];
+      //   this.searchBox_left_text.company_types = [];
+      // 点击树数据时携带公司名查视频全部 点击就切回查视频设备
+      this.only_params = {
+        pageSize: 5,
+        pageNum: 1,
+        companyId: data.subAreaCode, // 按选中公司名字检索视频设备数据
+        // deviceVideoSubType: "1,2,3,4,5,6,7,8,9",
+      };
+      this.$refs.searchBox.clear_search_list();
+      getVideoList(this.only_params).then((res) => {
+        console.log("resVideoList", res.rows);
+        this.push_table_data = res;
+        let data_params = {
+          data: this.push_table_data,
+          params: this.only_params,
+        };
+        this.push_data_to_table(data_params);
+      });
+    },
+    push_data_to_table(data_params) {
+      this.$refs.equipmentTable.obtain_table_data(data_params);
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  border: 0px;
+  height: 88.5vh; /* 控制card布局高度,用于适配 */
+  position: relative;
+  background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+  background-size: 100% 100% !important;
+}
+/* card统一样式 */
+/deep/.el-card__header {
+  border-bottom: 1px solid #a1a1a1 !important;
+  .clearfix {
+    span {
+      font-size: 17px;
+      font-weight: 400;
+      color: #fff;
+      text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+    }
+  }
+}
+.cardBody {
+  display: flex;
+  justify-content: space-between;
+  .left_tree {
+    width: 20vw;
+    height: 78vh;
+    border: 0.1px solid #485f6c;
+    background: linear-gradient(#314241, #1b2929, #121e1d);
+    .left_search {
+      display: flex;
+      margin-top: 5%;
+      margin-left: 5%;
+      width: 90%;
+      height: 40px;
+      .left_search_input ::v-deep {
+        /* 查询框 */
+        width: 87%;
+        .el-input__inner {
+          border-radius: 4px 0px 0px 4px;
+          background: #3c4b4a;
+          color: #fff;
+        }
+        /* 查询框点击颜色变化 */
+        .el-input__inner:focus,
+        .el-input__inner:hover {
+          border-color: #1b3736;
+        }
+      }
+      .left_search_button {
+        width: 13%;
+        height: 100%;
+        border-radius: 0px 4px 4px 0px;
+        background: #0e3936;
+        text-align: center;
+        font-size: 28px;
+        cursor: pointer;
+        .el-icon-search {
+          color: #fff;
+          padding: 12% 0;
+        }
+      }
+      .left_search_button:focus,
+      .left_search_button:hover {
+        /* 放大镜点击特效 */
+        background: #126a58;
+      }
+    }
+    .cardBodyLeft_footer {
+      width: 90%;
+      margin-left: 5%;
+      margin-top: 3vh;
+      height: 69vh;
+      .el-tree {
+        /* 树形数据过长添加滚动条 */
+        height: 65vh;
+        overflow: auto;
+        // box-shadow: 5px 5px 10px #126a58;
+        border-radius: 4px;
+        //   background: #293738;
+        background: rgba(0, 0, 0, 0);
+        border: 0.1px solid #485f6c;
+        color: #fff !important;
+        /deep/.el-tree-node__content {
+          height: 50px;
+        }
+        .el-tree-node__label.node-label {
+          display: flex;
+          font-size: 16px;
+        }
+        /* 去掉树形数据前面的三角形 */
+        /deep/.el-icon-caret-right:before {
+          content: "";
+        }
+        .node-label {
+          /* 树形数据横向过长添加展开 */
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        /* hover节点时的背景颜色 */
+        ::v-deep .el-tree-node__content:hover {
+          background: #495461;
+          color: #fff;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+        /* 节点选中的背景颜色 */
+        ::v-deep .el-tree-node:focus > .el-tree-node__content {
+          background: #495461;
+          color: #fff;
+          text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
+        }
+      }
+      // 没有展开且有子节点
+      .el-tree /deep/ .el-icon-caret-right:before {
+        background: url("~@/assets/companyFile/add.png") no-repeat;
+        content: "";
+        display: block;
+        width: 23px;
+        height: 23px;
+        font-size: 23px;
+        background-size: 23px;
+      }
+      // 已经展开且有子节点
+      .el-tree
+        /deep/
+        .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+        background: url("~@/assets/companyFile/add.png") no-repeat;
+        content: "";
+        display: block;
+        width: 23px;
+        height: 23px;
+        font-size: 23px;
+        background-size: 23px;
+      }
+      // 没有子节点 minus
+      .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
+        background: url("~@/assets/companyFile/minus.png") no-repeat;
+        content: "";
+        display: block;
+        width: 23px;
+        height: 23px;
+        font-size: 23px;
+        background-size: 23px;
+      }
+      .el-tree::-webkit-scrollbar {
+        width: 9px;
+        background-color: #5e666a;
+        border-radius: 4px;
+      }
+      .el-tree::-webkit-scrollbar-thumb {
+        width: 8px;
+        background-color: #3c4b4a;
+        border-radius: 4px;
+      }
+    }
+  }
+  .right {
+    width: 64vw;
+    height: 78vh;
+    border: 0.1px solid #485f6c;
+    .right_table {
+      margin-top: 1vh;
+      width: 64vw;
+      height: 52vh;
+      //   border: 0.1px solid #485f6c;
+    }
+  }
+}
+</style>

src/views/systemManagement/safeIndex/components/indexmassageOne.vue

@@ -220,6 +220,7 @@ export default {
 /deep/.text_levelform.el-form {
   width: 32.5vw;
   margin-top: 2vh;
+  height: 14vh;
   display: flex;
   flex-wrap: wrap;
   .el-form-item {

src/views/systemManagement/safeIndex/components/indexmassageThree.vue

@@ -213,7 +213,7 @@ export default {
           // if 在这里从请求回的数据里拿回关键字段判别两种表格中的一种
           if (this.table_num === "1") {
             this.is_flag = true;
-            if (res.data.calculationRule === null) {
+            if (res.data.calculationRule === null||res.data.calculationRule === '') {
               this.tableData_all = [];
               this.save_flag = "1"; // 后台未传数据，通知待保存选择接口
             } else {
@@ -259,7 +259,6 @@ export default {
           getWarnTable({ safeRuleId: this.safeRuleId }).then((res) => {
             console.log("reswarn", res);
             this.tableData_warn = res.data;
-            this.tableData_warn[0].color = "red";
           });
         }
       );

src/views/systemManagement/safeIndex/components/indexmassageTwo.vue

@@ -201,6 +201,7 @@ export default {
 /deep/.text_levelform.el-form {
   width: 32.5vw;
   margin-top: 2vh;
+  height: 14vh;
   display: flex;
   flex-wrap: wrap;
   .el-form-item {