关联设备开发

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

@@ -0,0 +1,22 @@
+<template>
+  <!-- 新建或者修改 -->
+  <el-dialog
+    :title="dialogTitle"
+    :visible.sync="visible"
+    width="1300px"
+    @close="close"
+  >
+    <div>123</div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+    };
+  },
+};
+</script>
+<style lang="less" scoped>
+</style>

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

@@ -0,0 +1,183 @@
+<template>
+  <!-- 设备表格 -->
+  <div class="equipment_data">
+    <p>智能感知设备列表</p>
+    <!-- 查询表 -->
+    <div class="equipment_data_search">
+      <el-form :inline="true" :model="search" class="search">
+        <el-form-item>
+          <el-input
+            v-model="search.equipemnt"
+            placeholder="输入设备名称搜索"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-form-item>
+            <el-input
+              v-model="search.ip"
+              placeholder="输入IP名称搜索"
+            ></el-input>
+          </el-form-item>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmit">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmit">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 增删按钮 -->
+    <div class="equipment_data_btn">
+      <el-button v-for="item in btnList" :key="item.value">
+        {{ item.label }}</el-button
+      >
+    </div>
+    <!-- 表格 -->
+    <div class="equipment_data_table">
+      <el-table
+        :cell-style="{ background: 'revert', 'text-align': 'center' }"
+        :header-cell-style="table_header"
+        :data="tableData"
+        height="305"
+        :highlight-current-row="true"
+      >
+        <el-table-column type="selection" width="55"> </el-table-column>
+        <el-table-column
+          v-for="item in tableColumn"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+        ></el-table-column>
+        <el-table-column prop="operation" label="操作">
+          <template slot-scope="scope">
+            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
+              >编辑
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="equipment_data_pagination"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      search: {
+        equipment: "",
+        ip: "",
+      },
+      btnList: [
+        { value: "1", label: "新增" },
+        { value: "2", label: "删除" },
+        { value: "3", label: "导入" },
+        { value: "4", label: "导出" },
+      ],
+      tableColumn: [
+        { prop: "villageName", label: "设备名称" },
+        { prop: "passTimeCn", label: "设备类型" },
+        { prop: "deviceAddress", label: "设备IP" },
+        { prop: "cameraIp", label: "设备经度" },
+        { prop: "imageTypeCn", label: "设备维度" },
+        { prop: "imageTypeCn", label: "进出方向" },
+      ],
+    };
+  },
+  methods: {
+    table_header({ row, rowIndex }) {
+      console.log(row);
+      console.log(rowIndex);
+      return {
+        "text-align": "center",
+        color: "#fff",
+      };
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.equipment_data {
+  p {
+    color: #fff;
+    margin-left: 10px;
+  }
+  .equipment_data_search {
+    margin-left: 12px;
+    /deep/.el-input__inner {
+      border-radius: 0px 0px 0px 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    .el-button {
+      width: 100%;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      border: 1px solid#34e1b3;
+      background: url("~@/assets/companyFile/2121.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .equipment_data_btn {
+    margin-left: 12px;
+    .el-button {
+      width: 70px;
+      height: 35px;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      border: 1px solid#34e1b3;
+      background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+  .equipment_data_table {
+    width: calc(100% - 30px);
+    margin-top: 12px;
+    margin-left: 12px;
+    height: 100%;
+    .el-table,
+    .el-table__expanded-cell {
+      color: #fff;
+      background-color: transparent;
+    }
+    /deep/.el-table {
+      thead {
+        text-align: center;
+        color: #fff;
+        font-weight: 500;
+        background: linear-gradient(to right,#284f49,#2f6363,#233b38) !important;
+        & th {
+          background-color: transparent;
+        }
+        & tr {
+          background-color: transparent;
+        }
+      }
+    }
+    .el-table::before {
+      //去除底部白线
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 0px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,88 @@
+<template>
+  <!-- 关联设备的右侧查询盒子 -->
+  <div class="searchBox_body">
+    <div class="searchBox_img">
+      <div class="searchBox_img_top">
+        <img :src="searchBoxData.src" alt="" />
+      </div>
+      <span>视频监控系统</span>
+    </div>
+    <ul>
+      <li
+        class="searchBox_btn"
+        v-for="item in searchBoxData.btnList"
+        :key="item.value"
+      >
+        <el-button> {{ item.name }} </el-button>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+export default {
+  name: "searchBox",
+  props: {
+    searchBoxData: {},
+  },
+  data() {
+    return {};
+  },
+  created() {},
+};
+</script>
+<style lang="less" scoped>
+.searchBox_body {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .searchBox_img {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 19.8%;
+    height: 53%;
+    padding-top: 8%;
+    padding-left: 3%;
+    color: #fff;
+    text-align: center;
+    font-size: 15px;
+    .searchBox_img_top {
+      width: 78%;
+      height: 100%;
+      margin: 0px auto;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    span {
+      margin-top: 7%;
+    }
+  }
+  ul {
+    width: 70%;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    flex-flow: wrap;
+    padding: 0px 0px 0px 10px;
+  }
+  .searchBox_btn {
+    list-style: none;
+    width: 30%;
+    .el-button {
+      width: 100%;
+      border: 1px solid #4a6072;
+      color: #fff;
+      border-radius: 0px !important;
+      background: #323f43;
+    }
+    .el-button:focus,
+    .el-button:hover {
+      color: #34e1b3;
+      background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+}
+</style>

src/views/systemManagement/correlationEquipment/index.vue

@@ -40,11 +40,22 @@
           <el-divider direction="vertical"></el-divider>
           <!-- 右侧 -->
           <div class="cardBodyRight">
-            <span>设备列表</span>
+            <p>设备列表</p>
             <div class="cardBodyRight_search">
-                <div class="video"></div>
+              <div class="video">
-                <div class="intelligence"></div>
+                <SearchBox
+                  ref="searchBox"
+                  :searchBoxData="searchBox_left_text"
+                ></SearchBox>
+              </div>
+              <div class="intelligence">
+                <SearchBox
+                  ref="searchBox"
+                  :searchBoxData="searchBox_right_text"
+                ></SearchBox>
+              </div>
             </div>
+            <EquipmentTable ref="equipmentTable"></EquipmentTable>
           </div>
         </div>
       </el-card>
@@ -52,12 +63,54 @@
   </div>
 </template>
 <script>
+import SearchBox from "./components/searchBox.vue";
+import EquipmentTable from "./components/equipmentTable.vue";
 export default {
   name: "correlationEquipment",
+  components: {
+    SearchBox,
+    EquipmentTable,
+  },
   data() {
     return {
       searchCompany: "", // 公司搜索
       companyTreeData: [], // 公司单位树
+      searchBox_left_text: {}, // 给子查询盒子传递字符和图片地址
+    };
+  },
+  created() {
+    // 给子查询盒子传递字符和图片地址
+    // 左边盒子
+    this.searchBox_left_text = {
+      src: require("@/assets/companyFile/camera.png"),
+      img_text: "视频监控系统",
+      btnList: [
+        { value: "1", name: "公共区域" },
+        { value: "2", name: "地下车库" },
+        { value: "3", name: "全景监控" },
+        { value: "4", name: "人脸抓拍" },
+        { value: "5", name: "电梯监控" },
+        { value: "6", name: "人体测温" },
+        { value: "7", name: "车辆抓拍" },
+        { value: "8", name: "人脸门禁" },
+        { value: "9", name: "高空抛物" },
+      ],
+    };
+    // 右边盒子
+    this.searchBox_right_text = {
+      src: require("@/assets/companyFile/intelligence.png"),
+      img_text: "智能感知系统",
+      btnList: [
+        { value: "1", name: "车辆抓拍" },
+        { value: "2", name: "人脸抓拍" },
+        { value: "3", name: "门禁设备" },
+        { value: "4", name: "高抛抓拍" },
+        { value: "5", name: "全结构化" },
+        { value: "6", name: "智能烟感" },
+        { value: "7", name: "访客机" },
+        { value: "8", name: "多为设备" },
+        { value: "9", name: "WIFI设备" },
+      ],
     };
   },
 };
@@ -65,7 +118,7 @@ export default {
 <style lang="less" scoped>
 /* card统一样式 */
 .el-card.box-card.is-always-shadow {
-  height: calc(100vh - 158px); /* 控制card布局高度,用于适配 */
+  height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
 }
 /* card统一样式 */
 /deep/.el-card__header {
@@ -74,14 +127,21 @@ export default {
     span {
       font-size: 17px;
       font-weight: 400;
+      color: #fff;
     }
   }
 }
 .main {
+  height: 100%;
+  .el-card.box-card.is-always-shadow {
+    background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+    background-size: 100% 100% !important;
+    border: 0px;
+  }
   .cardBody {
     width: 100%;
     display: flex;
-    height: calc(100vh - 260px);
+    height: calc(100vh - 215px);
     /* 左侧 */
     .cardBodyLeft {
       width: 30%;
@@ -95,6 +155,8 @@ export default {
           width: 90%;
           .el-input__inner {
             border-radius: 4px 0px 0px 4px;
+            background: #3c4b4a;
+            color: #fff;
           }
           /* 查询框点击颜色变化 */
           .el-input__inner:focus,
@@ -106,7 +168,7 @@ export default {
           width: 10%;
           height: 100%;
           border-radius: 0px 4px 4px 0px;
-          background: #1b3736;
+          background: #0e3936;
           text-align: center;
           font-size: 28px;
           cursor: pointer;
@@ -122,13 +184,15 @@ export default {
         }
       }
       .cardBodyLeft_footer {
-        height: 85%;
+        height: 88%;
         .el-tree {
           /* 树形数据过长添加滚动条 */
           height: 100%;
           overflow: auto;
           box-shadow: 5px 5px 10px #126a58;
           border-radius: 4px;
+          background: #293738;
+          color: #fff;
           .node-label {
             /* 树形数据横向过长添加展开 */
             width: 100%;
@@ -156,26 +220,32 @@ export default {
     }
     /* 右侧 */
     .cardBodyRight {
+      p {
+        margin-left: 10px;
+        height: 18px;
+        color: #fff;
+        font-size: 18px;
+      }
       width: 70%;
       height: 100%;
-      background: rgb(230, 223, 236);
+      border-radius: 4px;
+      box-shadow: 5px 5px 10px #126a58;
       .cardBodyRight_search {
         display: flex;
-        justify-content:space-around;
+        justify-content: space-evenly;
         width: 100%;
-        height: 30%;
+        height: 25%;
-        background: #1b3736;
         .video {
-            width: 48%;
+          width: 48%;
-            height: 100%;
+          height: 100%;
-            background: #a1a1a1;
+          background: #3b5153;
-            box-shadow: 5px 5px 10px #126a58;
+          border-radius: 4px;
         }
         .intelligence {
-            width: 48%;
+          width: 48%;
-            height: 100%;
+          height: 100%;
-            background: #a1a1a1;
+          background: #2c4046;
-            box-shadow: 5px 5px 10px #126a58;
+          border-radius: 4px;
         }
       }
     }

src/views/systemManagement/index.vue

@@ -32,12 +32,12 @@ export default {
   .el-aside {
     margin-top: 15px; /* 给左上角logo留空间 -> 后面固定都给15px */
     margin-left: 15px;
-    width: 15% !important; /* 控制侧边导航栏宽度 */
+    width: 13% !important; /* 控制侧边导航栏宽度 */
     height: 100%;
   }
   .el-main {
-    margin: 16px 15px 5px 15px; /* 固定都给15px */
+    margin: 16px 15px 0px 15px; /* 固定都给15px */
-    background: #fff;
+    padding: 0px;
   }
 }
 </style>