系统配置-策略配置，设备管理-设备配置50%

package-lock.json

@@ -13,6 +13,7 @@
         "dayjs": "^1.11.7",
         "element-ui": "^2.15.13",
         "js-cookie": "^3.0.1",
+        "qs": "^6.11.1",
         "unplugin-vue-components": "^0.24.1",
         "vue": "^2.7.14",
         "vue-router": "^3.5.1",
@@ -3752,6 +3753,21 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/body-parser/node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/bonjour-service": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/bonjour-service/-/bonjour-service-1.1.0.tgz",
@@ -3858,7 +3874,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -5624,6 +5639,21 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/express/node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -5937,7 +5967,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
       "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -6104,7 +6133,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -8011,8 +8039,7 @@
     "node_modules/object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
@@ -9287,15 +9314,17 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dev": true,
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
+      "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
       "dependencies": {
         "side-channel": "^1.0.4"
       },
       "engines": {
         "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/query-string": {
@@ -10020,7 +10049,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -15201,6 +15229,15 @@
           "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         }
       }
     },
@@ -15295,7 +15332,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -16714,6 +16750,15 @@
           "resolved": "https://registry.npmmirror.com/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         }
       }
     },
@@ -16962,7 +17007,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
       "integrity": "sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -17097,8 +17141,7 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-value": {
       "version": "1.0.0",
@@ -18610,8 +18653,7 @@
     "object-inspect": {
       "version": "1.12.3",
       "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.12.3.tgz",
-      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
-      "dev": true
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g=="
     },
     "object-keys": {
       "version": "1.1.1",
@@ -19558,10 +19600,9 @@
       "dev": true
     },
     "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
-      "dev": true,
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
+      "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
       "requires": {
         "side-channel": "^1.0.4"
       }
@@ -20147,7 +20188,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",

package.json

@@ -12,6 +12,7 @@
     "dayjs": "^1.11.7",
     "element-ui": "^2.15.13",
     "js-cookie": "^3.0.1",
+    "qs": "^6.11.1",
     "unplugin-vue-components": "^0.24.1",
     "vue": "^2.7.14",
     "vue-router": "^3.5.1",

src/api/deviceManagement/api.js

@@ -0,0 +1,21 @@
+import {
+    get,
+    post,
+    postform
+} from '../../utils/requestMethod'
+
+// 获取设备类型列表
+const getDeviceTypeList = () => {
+    return get('/device/device_type');
+}
+
+// 添加设备类型
+const addNewDeviceType = (data) => {
+    return postform('/device/device_type', data);
+}
+
+export default {
+    getDeviceTypeList,
+    addNewDeviceType
+}
+

src/api/systemConfig/api.js

@@ -0,0 +1,12 @@
+import {
+    get,
+    post
+} from '../../utils/requestMethod'
+// 获取menu
+const getFloorList = () => {
+    return get('/strategy');
+}
+export default {
+    getFloorList,
+}
+

src/components/Dropdown/index.vue

@@ -1,47 +1,56 @@
 <template>
-    <el-dropdown trigger="click" class="custom-tree-menu" size="small">
-        <i class="el-icon-more rotate " />
-        <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item v-for='(item, index) in events' :key="index" :divided="index > 0"
-                @click.native="clickMenu(item)">
-                {{ item.label }}
-            </el-dropdown-item>
-        </el-dropdown-menu>
-    </el-dropdown>
+  <el-dropdown
+    trigger="click"
+    class="custom-tree-menu"
+    size="small"
+  >
+    <i class="el-icon-more rotate " />
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+        v-for='(item, index) in events'
+        :key="index"
+        :divided="index > 0"
+        @click.native="clickMenu($event,item)"
+      >
+        {{ item.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
 </template>
 <script>
 export default {
-    props: {
-        events: {
-            type: Array
-        },
-        data: {
-            type: Object
-        }
+  props: {
+    events: {
+      type: Array,
     },
-    methods: {
-        clickMenu(item) {
-            this.$emit('itemClick',item.funcName, this.data);
-        }
-    }
-}
+    data: {
+      type: Object,
+    },
+  },
+  methods: {
+    clickMenu(event, item) {
+      event.stopPropagation();
+      this.$emit("itemClick", item.funcName, this.data);
+    },
+  },
+};
 </script>
 <style lang="less" scoped>
 .el-icon-more:before {
-    content: "\E794";
-    color: #c0c4cc;
-    font-size: 16px;
+  content: "\E794";
+  color: #c0c4cc;
+  font-size: 16px;
 }
 
 .rotate {
-    cursor: pointer;
-    margin-left: 5px;
-    transform: rotate(90deg);
-    vertical-align: bottom;
+  cursor: pointer;
+  margin-left: 5px;
+  transform: rotate(90deg);
+  vertical-align: bottom;
 
-    &:focus {
-        border-radius: 2em;
-        background-color: rgba(130, 132, 138, 0.2);
-    }
+  &:focus {
+    border-radius: 2em;
+    background-color: rgba(130, 132, 138, 0.2);
+  }
 }
 </style>

src/components/Dropdown/index2.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dropdown
+    :trigger="'hover'"
+    class="custom-tree-menu"
+    size="small"
+  >
+    <i class="el-icon-more rotate " />
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+        v-for='(item, index) in events'
+        :key="index"
+        :divided="index > 0"
+        @click.native="clickMenu($event,item)"
+      >
+        {{ item.label }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script>
+export default {
+  props: {
+    events: {
+      type: Array,
+    },
+    data: {
+      type: Object,
+    },
+  },
+  methods: {
+    clickMenu(event, item) {
+      this.$emit("itemClick", item.funcName, this.data);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.el-icon-more:before {
+  content: "\E794";
+  color: #c0c4cc;
+  font-size: 16px;
+}
+
+.rotate {
+  cursor: pointer;
+  margin-left: 5px;
+  transform: rotate(90deg);
+  vertical-align: bottom;
+
+  &:focus {
+    border-radius: 2em;
+    background-color: rgba(130, 132, 138, 0.2);
+  }
+}
+</style>

src/utils/requestMethod.js

@@ -1,4 +1,5 @@
 import request from '@/utils/request'
+import qs from 'qs'
 import user from '@/store/modules/user';
 
 function get(url, params) {
@@ -20,7 +21,7 @@ function get(url, params) {
   });
 }
 
-function getFile(url,params){
+function getFile(url, params) {
   return new Promise((resolve, reject) => {
     request({
       method: "GET",
@@ -59,6 +60,59 @@ function post(url, data) {
       });
   });
 }
+function postform(url, data) {
+  // return new Promise((resolve, reject) => {
+  //   request({
+  //     method: "POST",
+  //     url,
+  //     data: data,
+  //     headers: {
+  //       token: user.state.token,
+  //       "Content-Type": "multipart/form-data;",
+  //     },
+  //   })
+  //     .then((res) => {
+  //       resolve(res);
+  //     })
+  //     .catch((err) => {
+  //       reject(err);
+  //     });
+  // });
+
+  return new Promise((resolve, reject) => {
+    request({
+      method: 'POST',
+      url,
+      data: qs.stringify(data),
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded;'
+      }
+    }).then(res => {
+      resolve(res)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+function postFile(url, data) {
+  return new Promise((resolve, reject) => {
+    request({
+      method: 'POST',
+      url,
+      data: data,
+      contentType: false,
+      processData: false,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      }
+    }).then(res => {
+      resolve(res)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
 
 function put(url, data) {
   return new Promise((resolve, reject) => {
@@ -128,5 +182,7 @@ export {
   post,
   put,
   del,
-  delform
+  delform,
+  postform,
+  postFile
 }

src/views/deviceManagement/deviceConfig.vue

@@ -8,43 +8,47 @@
         suffix-icon="el-icon-search"
       >
       </el-input>
-      <el-tree
-        ref="tree"
-        :data="data"
-        :props="defaultProps"
-        node-key="id"
-        default-expand-all
-        :filter-node-method="filterNode"
-        @node-click="handleNodeClick"
-      >
-        <span slot-scope="{ node, data }">
-          <!-- <el-image :src="data.url"></el-image> -->
-          <span style="padding-left: 10px; vertical-align: text-bottom">{{
+      <div class="tree_container">
+        <el-tree
+          ref="tree"
+          :data="deviceTypeList"
+          :props="defaultProps"
+          node-key="id"
+          default-expand-all
+          :filter-node-method="filterNode"
+          @node-click="handleNodeClick"
+        >
+          <span slot-scope="{ node, data }">
+            <!-- <el-image :src="data.url"></el-image> -->
+            <span style="padding-left: 10px; vertical-align: text-bottom">{{
             node.label
           }}</span>
-          <span class="operate_btns">
-            <dropdown
-              :events="data.id ? menuEvents : subMenuEvents"
-              :data="{ node, data }"
-              @itemClick="dropDownClick"
-            ></dropdown>
+            <span class="operate_btns">
+              <dropdown
+                :events="data.id ? menuEvents : subMenuEvents"
+                :data="{ node, data }"
+                @itemClick="dropDownClick"
+              ></dropdown>
+            </span>
           </span>
-        </span>
-      </el-tree>
+        </el-tree>
+      </div>
       <el-button
         class="newDevice"
         @click="newDeviceType()"
-        style="color: #fff; background: #3da0d6"
-        ><i class="el-icon-s-order"></i>新建设备类别</el-button
-      >
+      ><i class="el-icon-s-order"></i>新建设备类别</el-button>
     </div>
     <div class="right-pane">
       <div class="right-pane-inner">
         <div class="top">
-          <el-button @click="addDevice()" class="add-btn">添加设备</el-button>
-          <el-button @click="dataImport()" class="import-btn"
-            >批量导入</el-button
-          >
+          <el-button
+            @click="addDevice()"
+            class="add-btn"
+          >添加设备</el-button>
+          <el-button
+            @click="dataImport()"
+            class="import-btn"
+          >批量导入</el-button>
           <!-- <el-button @click="batchDelete" class="delete-btn"
             >批量删除</el-button
           > -->
@@ -73,22 +77,53 @@
             height="500"
             @selection-change="handleSelectionChange"
           >
-            <el-table-column type="selection" width="50"> </el-table-column>
-            <el-table-column type="index" width="80" label="序号">
+            <el-table-column
+              type="selection"
+              width="50"
+            > </el-table-column>
+            <el-table-column
+              type="index"
+              width="80"
+              label="序号"
+            >
             </el-table-column>
-            <el-table-column prop="deviceName" label="设备名称">
+            <el-table-column
+              prop="deviceName"
+              label="设备名称"
+            >
             </el-table-column>
-            <el-table-column prop="deviceID" label="设备ID"> </el-table-column>
-            <el-table-column prop="deviceUse" label="设备用途">
+            <el-table-column
+              prop="deviceID"
+              label="设备ID"
+            > </el-table-column>
+            <el-table-column
+              prop="deviceUse"
+              label="设备用途"
+            >
             </el-table-column>
-            <el-table-column prop="devicePosition" label="设备位置">
+            <el-table-column
+              prop="devicePosition"
+              label="设备位置"
+            >
             </el-table-column>
-            <el-table-column prop="deviceLife" label="设备使用年限">
+            <el-table-column
+              prop="deviceLife"
+              label="设备使用年限"
+            >
             </el-table-column>
-            <el-table-column prop="company" label="设备单位"> </el-table-column>
-            <el-table-column prop="deviceRespon" label="设备责任人">
+            <el-table-column
+              prop="company"
+              label="设备单位"
+            > </el-table-column>
+            <el-table-column
+              prop="deviceRespon"
+              label="设备责任人"
+            >
             </el-table-column>
-            <el-table-column prop="operation" label="操作">
+            <el-table-column
+              prop="operation"
+              label="操作"
+            >
               <template slot-scope="scope">
                 <el-button
                   v-show="scope.row.deviceID == null ? false : true"
@@ -96,16 +131,14 @@
                   type="text"
                   @click="deviceEdit"
                   style="color: #2ea8e6"
-                  >编辑</el-button
-                >
+                >编辑</el-button>
                 <el-button
                   v-show="scope.row.deviceID == null ? false : true"
                   size="mini"
                   type="text"
                   style="color: #2ea8e6"
                   @click="deviceDelete(scope.row)"
-                  >删除</el-button
-                >
+                >删除</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -116,7 +149,12 @@
       </div>
     </div>
     <!--弹窗-->
-    <NewDeviceType ref="newDevice"></NewDeviceType>
+    <NewDeviceType
+      ref="newDevice"
+      v-bind="{
+      update:getDeviceTypeList
+    }"
+    ></NewDeviceType>
     <addDevice ref="addDevice"></addDevice>
     <dataImport ref="dataImport"></dataImport>
     <deviceEdit ref="deviceEdit"></deviceEdit>
@@ -131,6 +169,8 @@ import dataImport from "./messageDailog/dataImport";
 import addDevice from "./messageDailog/addDevice";
 import deviceEdit from "./messageDailog/deviceEdit";
 import dropdown from "@/components/Dropdown/index";
+
+import api from "@/api/deviceManagement/api";
 export default {
   components: {
     checkbox,
@@ -149,15 +189,15 @@ export default {
       form: {
         typeName: "",
       },
-      data: [
-        {
-          id: 1,
-          label: "A设备",
-        },
-        {
-          id: 2,
-          label: "B设备",
-        },
+      deviceTypeList: [
+        // {
+        //   id: 1,
+        //   label: "A设备",
+        // },
+        // {
+        //   id: 2,
+        //   label: "B设备",
+        // },
       ],
       defaultProps: {
         children: "children",
@@ -223,12 +263,28 @@ export default {
       },
     };
   },
+  mounted() {
+    this.getDeviceTypeList();
+  },
   watch: {
     filterText(val) {
       this.$refs.tree.filter(val);
     },
   },
   methods: {
+    getDeviceTypeList() {
+      let that = this;
+      api
+        .getDeviceTypeList()
+        .then((result) => {
+          that.deviceTypeList = result.data.data.map(function (item) {
+            item.label = item.type_name;
+            return item;
+          });
+        })
+        .catch((err) => {});
+    },
+
     searchTypeEvent() {},
     dropDownClick() {},
     getTableData(val) {},
@@ -278,54 +334,61 @@ export default {
   .left-pane {
     width: 300px;
     padding: 15px;
-    height: calc(100% - 30px);
-
-    .el-tree {
+    height: calc(100% - 31px);
+    .tree_container {
+      height: calc(100% - 101px);
       margin-top: 10px;
-      height: calc(98% - 30px);
-      background-color: #fafafa;
+      margin-bottom: 10px;
+      overflow: hidden;
+      overflow-y: auto;
+      .el-tree {
+        height: 100%;
+        background-color: #fafafa;
 
-      /deep/.el-tree-node__content {
-        align-items: center;
-        height: 30px;
-        cursor: pointer;
-        font-size: 16px;
-        position: relative;
-        color: #999999;
-        padding-top: 10px;
-        padding-left: 30px !important;
+        /deep/.el-tree-node__content {
+          align-items: center;
+          height: 30px;
+          cursor: pointer;
+          font-size: 16px;
+          position: relative;
+          color: #999999;
+          padding-top: 10px;
+          padding-left: 30px !important;
 
-        .operate_btns {
-          position: absolute;
-          right: 20px;
-          display: none;
-        }
+          .operate_btns {
+            position: absolute;
+            right: 20px;
+            display: none;
+          }
 
-        &:hover,
-        :focus-within {
-          background-color: #f7fbff;
+          &:hover,
+          :focus-within {
+            background-color: #f7fbff;
 
-          .operate_btns {
-            display: inline;
+            .operate_btns {
+              display: inline;
+            }
           }
         }
-      }
 
-      /deep/.el-tree-node__children {
-        .el-tree-node__content {
-          padding-left: 60px !important;
+        /deep/.el-tree-node__children {
+          .el-tree-node__content {
+            padding-left: 60px !important;
+          }
         }
       }
     }
-  }
-  .newDevice {
-    position: relative;
-    bottom: 50px;
-    width: 250px;
-    text-align: center;
-    font-size: 16px;
-    color: #fff;
-    background: #3da0d6;
+    .newDevice {
+      position: relative;
+      // bottom: 50px;
+      width: 250px;
+      text-align: center;
+      font-size: 16px;
+      color: #fff;
+      background: #3da0d6;
+      margin-left: 24px;
+      color: #fff; 
+    }
   }
 
   .right-pane {

src/views/deviceManagement/messageDailog/addDevice.vue

@@ -37,20 +37,34 @@
             style="width: 100%"
             @selection-change="handleSelectionChange"
           >
-            <el-table-column type="selection" width="50"> </el-table-column>
-            <el-table-column prop="deviceID" label="设备ID"> </el-table-column>
-            <el-table-column prop="devicePosition" label="设备位置">
+            <el-table-column
+              type="selection"
+              width="50"
+            > </el-table-column>
+            <el-table-column
+              prop="deviceID"
+              label="设备ID"
+            > </el-table-column>
+            <el-table-column
+              prop="devicePosition"
+              label="设备位置"
+            >
             </el-table-column>
           </el-table>
         </div>
       </div>
-      <div slot="footer" class="dialog-footer">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button
           @click="dialogVisible = false"
           style="background: #2ea8e6; color: #fff"
-          >取消</el-button
-        >
-        <el-button type="primary" style="background: #2ea8e6">确认</el-button>
+        >取消</el-button>
+        <el-button
+          type="primary"
+          style="background: #2ea8e6"
+        >确认</el-button>
       </div>
     </el-dialog>
   </div>
@@ -113,17 +127,16 @@ export default {
 <style lang="less" scoped>
 .container {
   height: 400px;
-  width: 95%;
-  // margin-left: 2.5%;
+  width: calc(100% - 40px);
   border: 0.5px solid rgb(247, 245, 243);
-  // margin-top: 20px;
   display: flex;
-
+  padding: 0 0;
+  margin: 20px 20px;
   .leftpane {
-    width: 100px;
+    width: 120px;
 
     .el-tree {
-      width: 110px;
+      width: 120px;
       height: 100%;
       background-color: rgb(247, 245, 243);
     }
@@ -131,8 +144,9 @@ export default {
 
   .rightpane {
     .search {
-      width: 250.8px;
+      width: 224.8px;
       margin-left: 60px;
+      margin-top: 10px;
 
       /deep/.el-input__inner {
         height: 35px;
@@ -140,7 +154,7 @@ export default {
     }
 
     .el-table {
-      margin-top: 20px;
+      margin-top: 10px;
       width: 95% !important;
       margin-left: 5%;
       border: 1px solid #f0f2f2;
@@ -200,13 +214,11 @@ export default {
   width: 280px;
 }
 
-
 /deep/.el-dialog__header {
-    padding-bottom:0;
-    color:#333333;
+  padding-bottom: 0;
+  color: #333333;
 }
 
-
 /deep/.el-dialog__headerbtn {
   font-size: 25px;
 }

src/views/deviceManagement/messageDailog/dataImport.vue

@@ -5,19 +5,23 @@
       class="dialog"
       title="批量导入数据"
       :visible.sync="dialogVisible"
+      :before-close="close"
       width="375px"
       left
     >
       <el-divider></el-divider>
       <div class="batch-import-step">
-        <el-steps direction="vertical" :active="1">
+        <el-steps
+          direction="vertical"
+          :active="1"
+        >
           <el-step title="下载 Excel 模板">
             <template slot="description">
               <div
                 style="line-height: 30px; cursor: pointer; font-size: 14px"
                 @click="downloadTemplate"
               >
-                点击下载《A设备导入模板》
+                点击下载《某设备导入模板》
               </div>
             </template>
           </el-step>
@@ -30,14 +34,18 @@
           v-model="input"
           placeholder="文件名称"
           style="position: absolute; left: 25px; top: 10px; width: 220px"
+          disabled
         ></el-input>
         <el-upload
-          :action="action"
+          :action="''"
           style="position: absolute; right: -6px; top: -14px"
+          :accept="'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
+          :before-upload="beforeUploadBeforeExcel"
         >
-          <el-button type="primary" style="background: #2ea8e6"
-            >选择文件</el-button
-          >
+          <el-button
+            type="primary"
+            style="background: #2ea8e6"
+          >选择文件</el-button>
         </el-upload>
       </div>
       <!-- <el-timeline>
@@ -61,18 +69,19 @@
         <el-timeline-item>上传已编辑好的 Excel 模板</el-timeline-item>
       </el-timeline> -->
 
-      <div slot="footer" class="dialog-footer">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button
-          @click="dialogVisible = false"
+          @click="close"
           style="background: #2ea8e6; color: #fff"
-          >取消</el-button
-        >
+        >取消</el-button>
         <el-button
           type="primary"
           style="background: #2ea8e6"
           @click="confirmEvent"
-          >确认</el-button
-        >
+        >确认</el-button>
       </div>
     </el-dialog>
   </div>
@@ -84,7 +93,6 @@ export default {
     return {
       dialogVisible: false,
       input: "",
-      action: "",
       steps: [
         {
           content: "下载 Excel 模板",
@@ -102,7 +110,30 @@ export default {
     confirmEvent() {
       console.log("确认导入");
     },
-    downloadTemplate() {},
+    downloadTemplate() {
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.setAttribute("target", "_blank");
+      /*
+       * download的属性是HTML5新增的属性
+       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
+       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
+       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
+       */
+      a.setAttribute("download", "某设备导入模板.xls");
+      a.href = "/static/data/某设备导入模板.xls";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    },
+    beforeUploadBeforeExcel(file) {
+      console.log(arguments);
+      this.input = file.name;
+    },
+    close() {
+      this.dialogVisible = false;
+      this.input = "";
+    },
   },
 };
 </script>

src/views/deviceManagement/messageDailog/newDeviceType.vue

@@ -9,23 +9,42 @@
       left
     >
       <el-divider></el-divider>
-      <el-form label-position="left" label-width="80px">
-        <el-form-item :model="form.typeName" label="类别名称：">
+      <el-form
+        label-position="left"
+        label-width="80px"
+      >
+        <el-form-item
+          :model="form.typeName"
+          label="类别名称："
+        >
           <el-input v-model="value"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false" type="primary"
-          >取消</el-button
-        >
-        <el-button type="primary" @click="addType">确认</el-button>
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          @click="dialogVisible = false"
+          type="primary"
+        >取消</el-button>
+        <el-button
+          type="primary"
+          @click="addType"
+        >确认</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import api from "@/api/deviceManagement/api";
 export default {
+  props: {
+    getDeviceTypeList: {
+      type: Function,
+    },
+  },
   data() {
     return {
       value: "",
@@ -36,7 +55,27 @@ export default {
     };
   },
   methods: {
-    addType() {},
+    addType() {
+      let that = this;
+      api
+        .addNewDeviceType({
+          id: "",
+          name: this.value,
+        })
+        .then((result) => {
+          if (result.data.code == 0) {
+            that.$message.success("类别添加成功!");
+            that.dialogVisible = false;
+            // 刷新列表
+            that.getDeviceTypeList();
+          } else {
+            that.$message.error("类别添加失败!");
+          }
+        })
+        .catch((err) => {
+          that.$message.error("类别添加失败!");
+        });
+    },
   },
 };
 </script>
@@ -50,7 +89,6 @@ export default {
 }
 
 .el-form {
-
   .el-form-item {
     margin-inline: 20px;
     // margin-bottom: 0;

src/views/systemManagement/strategyConfiguration/index.vue

@@ -1,56 +1,94 @@
 <template>
-    <div class="container">
-        <div class="header">
-            <el-button ref="buttonFocus">智慧会议</el-button>
-            <el-button>智慧能源</el-button>
-            <el-button>智慧安防</el-button>
-        </div>
-        <smartMeeting></smartMeeting>
+  <div class="container">
+    <div class="header">
+      <el-menu
+        :default-active="activeIndex"
+        class="el-menu-demo"
+        mode="horizontal"
+        @select="handleSelect"
+      >
+        <el-menu-item index="1">
+          <el-button round>智慧会议</el-button>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <el-button round>智慧能源</el-button>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <el-button round>智慧安防</el-button>
+        </el-menu-item>
+      </el-menu>
     </div>
+    <smartMeeting v-if="activeIndex=='1'"></smartMeeting>
+    <smartEnergy v-if="activeIndex=='2'"></smartEnergy>
+    <smartSecurity v-if="activeIndex=='3'"></smartSecurity>
+  </div>
+
 </template>
 
 <script>
-import smartMeeting from './smartMeeting'
+import smartMeeting from "./smartMeeting";
+import smartEnergy from "./smartEnergy";
+import smartSecurity from "./smartSecurity";
+
 export default {
-    components: { smartMeeting },
-    data() {
-        return {}
+  components: {
+    smartMeeting,
+    smartEnergy,
+    smartSecurity,
+  },
+  data() {
+    return {
+      activeIndex: "1",
+    };
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      this.activeIndex = key;
     },
-    mounted(){
-        this.$refs.buttonFocus.$el.focus();
-    }
-}
+  },
+  mounted() {
+    // this.$refs.buttonFocus.$el.focus();
+  },
+};
 </script>
 <style lang="less" scoped>
 .container {
-    position: relative;
-    height: 100%;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
-    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+  position: relative;
+  height: 100%;
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  text-align: center;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 }
 
 .header {
-    text-align: left;
-    padding: 15px;
-    font-size: 25px;
-    margin-left: 15px;
-
-    .el-button {
-        width: 100px;
-        height: 35px;
-        line-height: 20px;
-        border-radius: 20px;
-        background-color: #FFFFFF;
-        color: #C8C8C8;
-        font-size: 14px;
-        text-align: center;
-        padding: 5px;
-        &:focus{
-            background-color: #2EA8E6;
-            color: #FFFFFF;
-        }
+  text-align: left;
+  padding: 15px;
+  padding-left: 0px;
+  font-size: 30px;
+  .el-menu-item {
+    font-size: 16px;
+  }
+  .el-menu.el-menu--horizontal {
+    border-bottom: 0px solid #e6e6e6;
+    .el-menu-item {
+      border-bottom: 0px;
+      padding-left: 10px;
+      padding-right: 10px;
+      .el-button {
+        color: #606266;
+        border-color: #ebebeb;
+        border: 1px solid #ebebeb;
+      }
+    }
+    > .el-menu-item.is-active {
+      border-bottom: 0px;
+      .el-button {
+        color: #ffffff;
+        border-color: #2ea8e6;
+        background-color: #2ea8e6;
+      }
     }
+  }
 }
 </style>

src/views/systemManagement/strategyConfiguration/smartEnergy.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="content">
+    敬请期待
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scope>
+.content {
+  width: 100%;
+  height: calc(100% - 90px);
+}
+</style> 

src/views/systemManagement/strategyConfiguration/smartMeeting.vue

@@ -1,229 +1,354 @@
 <template>
-    <div class="sub-container">
-        <div class="left-pane">
-            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
-            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
-                :filter-node-method="filterNode" @node-click="handleNodeClick">
-                <span slot-scope="{node,data}">
-                    <el-image :src="data.url"></el-image>
-                    <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
-                    <span class="operate_btns">
-                        <dropdown :events="data.id ? menuEvents : subMenuEvents" :data="{ node, data }"
-                            @itemClick="dropDownClick"></dropdown>
-                    </span>
-                </span>
-            </el-tree>
-        </div>
-        <div class="right-pane">
-            <div>
-                <p class="info">选择设备</p>
-            </div>
-            <div style="display: flex; margin-left: 20px; height: 80%;">
-                <div>
-                    <el-tree :data="data1" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
-                        @node-click="handleNodeClick">
-                    </el-tree>
-                    <el-tree :data="data2" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
-                        @node-click="handleNodeClick">
-                    </el-tree>
-                </div>
-                <div style="margin-left: 200px">
-                    <el-tree :data="data3" :default-checked-keys="[1]" :props="defaultProps" show-checkbox node-key="id"
-                        @node-click="handleNodeClick">
-                    </el-tree>
-                    <el-tree :data="data4" :props="defaultProps" show-checkbox node-key="id" @node-click="handleNodeClick">
-                    </el-tree>
-                </div>
-            </div>
-            <div class="bottom">
-                <el-button class="delete_btn">删除</el-button>
-                <el-button>更新默认配置</el-button>
-                <el-button>更新可配置设备</el-button>
-            </div>
-        </div>
+  <div class="sub-container">
+    <div class="left-pane">
+      <el-input
+        placeholder="请输入关键字"
+        suffix-icon="el-icon-search"
+        v-model="filterText"
+      ></el-input>
+      <div class="tree_container">
+        <el-tree
+          ref="tree"
+          :data="floorList"
+          :props="defaultProps"
+          node-key="id"
+          default-expand-all
+          :filter-node-method="filterNode"
+          @node-click="handleNodeClick"
+        >
+          <span slot-scope="{node,data}">
+            <el-image :src="data.url"></el-image>
+            <span
+              style="padding-left: 10px; vertical-align: text-bottom;"
+              :title="node.label"
+            >{{ node.label }}</span>
+            <span class="operate_btns">
+              <!-- <dropdown
+              :events="data.id ? menuEvents : subMenuEvents"
+              :data="{ node, data }"
+            ></dropdown> -->
+              <!-- @itemClick="dropDownClick($event)" -->
+            </span>
+          </span>
+        </el-tree>
+      </div>
+
+    </div>
+    <div class="right-pane">
+      <div v-if="selectedFloor!=null">
+        <el-breadcrumb
+          class="info"
+          separator-class="el-icon-arrow-right"
+          v-if="Object.getOwnPropertyNames(selectedFloor).length>0"
+        >
+          <el-breadcrumb-item>{{selectedFloor.floor}}F</el-breadcrumb-item>
+          <el-breadcrumb-item>{{selectedFloor.label}}</el-breadcrumb-item>
+          <el-breadcrumb-item>选择设备</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div v-if="deviceConfig.length > 0">
+        <el-row>
+          <el-col :span="12">
+            <el-checkbox v-model="deviceConfig[0].checked">{{deviceConfig[0].label}}</el-checkbox>
+            <div class="mark"></div>
+          </el-col>
+          <el-col :span="12">
+            <el-checkbox v-model="deviceConfig[1].checked">{{deviceConfig[1].label}}</el-checkbox>
+            <div class="mark"></div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-checkbox v-model="deviceConfig[2].checked">{{deviceConfig[2].label}}</el-checkbox>
+            <div class="mark"></div>
+          </el-col>
+          <el-col :span="12">
+            <el-checkbox v-model="deviceConfig[3].checked">{{deviceConfig[3].label}}</el-checkbox>
+            <div class="mark"></div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="bottom">
+        <el-button
+          class="delete_btn"
+          @click="deletePZ"
+        >删除</el-button>
+        <!-- <el-button @click="updateDefaultConfig">更新默认配置</el-button> -->
+        <el-button @click="updateDevice">更新可配置设备</el-button>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import dropdown from '@/components/Dropdown/index';
+import dropdown from "@/components/Dropdown/index2";
+import api from "@/api/systemConfig/api";
+
+import louceng from "@/assets/tree/strategy/louceng@3x.png";
+import huiyishi from "@/assets/tree/strategy/huiyishi@3x.png";
+
 export default {
-    components: {
-        dropdown
+  components: {
+    dropdown,
+  },
+  data() {
+    return {
+      filterText: "",
+      floorList: [],
+      deviceConfig: [],
+      selectedFloor: null,
+      menuEvents: [{ label: "新建", funcName: "addNode" }],
+      subMenuEvents: [
+        { label: "新建", funcName: "addNode" },
+        { label: "上移", funcName: "moveUp" },
+        { label: "下移", funcName: "moveDown" },
+        { label: "编辑", funcName: "editNode" },
+        { label: "删除", funcName: "removeNode" },
+      ],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
     },
-    data() {
-        return {
-            filterText: '',
-            data: [
-                {
-                    id: 1,
-                    label: '3F',
-                    url: require('@/assets/tree/strategy/louceng@3x.png'),
-                    children: [{
-                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
-                        label: '301会议室',
-                    }, {
-                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
-                        label: '302会议室'
-                    }, {
-                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
-                        label: '303会议室'
-                    }]
-                },
-                {
-                    id: 2,
-                    label: '4F',
-                    url: require('@/assets/tree/strategy/louceng@3x.png'),
-                    children: [{
-                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
-                        label: '401会议室',
-                    }, {
-                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
-                        label: '402会议室'
-                    }, {
-                        url: require('@/assets/tree/strategy/huiyishi@3x.png'),
-                        label: '403会议室'
-                    }]
-                }
-            ],
-            data1: [{
-                id: 1,
-                label: '闸机系统-人脸门禁设备',
-                children: [{
-
-                }]
-            }],
-            data2: [{
-                id: 1,
-                label: '能源系统-灯光控制设备',
-                children: [{
-
-                }]
-            }],
-            data3: [{
-                id: 1,
-                label: '能源系统-空调控制设备',
-                children: [{
-
-                }]
-            }],
-            data4: [{
-                label: '能源系统-灯光控制设备',
-                children: [{
-
-                }]
-            }],
-            menuEvents: [
-                { label: '新建', funcName: 'addNode' }
-            ],
-            subMenuEvents: [
-                { label: '新建', funcName: 'addNode' },
-                { label: '上移', funcName: 'moveUp' },
-                { label: '下移', funcName: 'moveDown' },
-                { label: '编辑', funcName: 'editNode' },
-                { label: '删除', funcName: 'removeNode' }
-            ],
-            defaultProps: {
-                children: 'children',
-                label: 'label'
+  },
+  methods: {
+    getList() {
+      let that = this;
+      api
+        .getFloorList()
+        .then((result) => {
+          let obj = [];
+          for (const key in result.data.data) {
+            if (Object.hasOwnProperty.call(result.data.data, key)) {
+              const ele = result.data.data[key];
+              let children = ele.map(function (str) {
+                return {
+                  floor: key,
+                  url: huiyishi,
+                  label: str,
+                };
+              });
+              obj.push({
+                id: key,
+                label: key + "F",
+                url: louceng,
+                children: children,
+              });
             }
-        }
+          }
+          that.floorList = obj;
+        })
+        .catch((err) => {});
     },
-    watch: {
-        filterText(val) {
-            this.$refs.tree.filter(val);
-        }
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
     },
-    methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
+    handleNodeClick(data) {
+      if (!data.floor) return;
+      let arr = [
+        {
+          label: "闸机系统-人脸门禁设备",
+          checked: true,
         },
-        handleNodeClick(data) {
-
+        {
+          label: "能源系统-灯光控制设备",
+          checked: true,
+        },
+        {
+          label: "能源系统-空调控制设备",
+          checked: true,
         },
-        dropDownClick(funcName, data) {
+        {
+          label: "能源系统-灯光控制设备",
+          checked: false,
+        },
+      ];
+      arr.map(function (item) {
+        item.checked = parseInt(Math.random() * 10) % 2 == 0 ? true : false;
+        return item;
+      });
+      this.deviceConfig = arr;
+      this.selectedFloor = data;
+    },
+    // dropDownClick(event, funcName, data) {
+    //   event.stopPropagation();
+    // },
 
-        }
-    }
-}
+    updateDefaultConfig() {},
+    updateDevice() {
+      let that = this;
+      const loading = this.$loading({
+        lock: true,
+        text: "更新中，请稍后！",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+        customClass: "systemConfigLoading",
+      });
+      setTimeout(() => {
+        loading.close();
+        that.deviceConfig = JSON.parse(JSON.stringify(that.deviceConfig));
+      }, 2000);
+    },
+    deletePZ() {
+      this.$confirm("此操作将删除该会议室配置, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
 .sub-container {
-    position: relative;
-    height: calc(100% - 65px);
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    color: rgba(16, 16, 16, 1);
-    font-size: 14px;
-    text-align: center;
-    display: flex;
-    //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
-
-    .left-pane {
-        width: 300px;
-        padding: 15px;
-        height: calc(100% - 30px);
-
-        .el-tree {
-            margin-top: 10px;
-            height: calc(98% - 30px);
-            background-color: #FAFAFA;
-
-            /deep/.el-tree-node__content {
-                align-items: center;
-                height: 30px;
-                cursor: pointer;
-                font-size: 16px;
-                position: relative;
-                color: #999999;
-                padding-top: 10px;
-                padding-left: 30px !important;
-
-                .operate_btns {
-                    position: absolute;
-                    right: 20px;
-                    display: none;
-                }
-
-                &:hover,
-                :focus-within {
-                    background-color: #f7fbff;
-
-                    .operate_btns {
-                        display: inline;
-                    }
-                }
-            }
+  position: relative;
+  width: 100%;
+  height: calc(100% - 90px);
+  line-height: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: center;
+  display: inline-block;
+  vertical-align: top;
+  //box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
+
+  .left-pane {
+    width: 300px;
+    padding: 15px;
+    height: calc(100% - 30px);
+    display: inline-block;
+
+    .tree_container {
+      overflow: hidden;
+      overflow-y: auto;
+      height: calc(98% - 30px);
+      .el-tree {
+        margin-top: 10px;
+        background-color: #fafafa;
+
+        /deep/.el-tree-node__content {
+          align-items: center;
+          height: 30px;
+          cursor: pointer;
+          font-size: 16px;
+          position: relative;
+          color: #999999;
+          padding-top: 10px;
+          padding-left: 5px !important;
 
-            /deep/.el-tree-node__children {
-                .el-tree-node__content {
-                    padding-left: 60px !important;
-                }
+          .operate_btns {
+            position: absolute;
+            right: 20px;
+            display: none;
+          }
+
+          &:hover,
+          :focus-within {
+            background-color: #f7fbff;
+
+            .operate_btns {
+              display: inline;
             }
+          }
         }
-    }
 
-    .right-pane {
-        .info {
-            text-align: left;
-            padding: 10px;
-            font-size: 25px;
+        /deep/.el-tree-node__children {
+          .el-tree-node__content {
+            padding-left: 60px !important;
+          }
         }
+      }
     }
-    .bottom{
-        .el-button{
-            width: 200px;
-            height: 30px;
-            color: #fff; 
-            padding: 3px;
-            margin-left: 50px;
-            font-size: 14px;
-            background: #3da0d6;
+  }
+
+  .right-pane {
+    display: inline-block;
+    vertical-align: top;
+    width: calc(100% - 330px);
+    height: 100%;
+    min-width: 600px;
+    position: relative;
+    .info {
+      text-align: left;
+      padding: 10px;
+      font-size: 25px;
+      margin-bottom: 30px;
+    }
+    .el-row {
+      text-align: left;
+      padding-left: 60px;
+      box-sizing: border-box;
+      .el-col {
+        margin-bottom: 20px;
+        .mark {
+          width: 92px;
+          height: 92px;
+          margin-top: 10px;
+          margin-left: 42px;
         }
-        .delete_btn{
-                background: #B3B3B3;
-            }
+      }
+
+      &:nth-child(1) .el-col:nth-child(1) .mark {
+        background: url("~@/assets/systemConfig/rlmj.png") center center / 100%
+          100% no-repeat;
+      }
+      &:nth-child(1) .el-col:nth-child(2) .mark {
+        background: url("~@/assets/systemConfig/dgkz.png") center center / 100%
+          100% no-repeat;
+      }
+
+      &:nth-child(2) .el-col:nth-child(1) .mark {
+        background: url("~@/assets/systemConfig/ktkz.png") center center / 100%
+          100% no-repeat;
+      }
+      &:nth-child(2) .el-col:nth-child(2) .mark {
+        background: url("~@/assets/systemConfig/xfxt.png") center center / 100%
+          100% no-repeat;
+      }
+    }
+  }
+  .bottom {
+    width: 100%;
+    position: absolute;
+    bottom: 0px;
+    .el-button {
+      width: 200px;
+      height: 30px;
+      color: #fff;
+      padding: 3px;
+      margin-left: 50px;
+      font-size: 14px;
+      background: #3da0d6;
+      &:first-child {
+        margin-left: 0px;
+      }
+    }
+    .delete_btn {
+      background: #b3b3b3;
     }
+  }
 }
 </style>

src/views/systemManagement/strategyConfiguration/smartSecurity.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="content">
+    敬请期待
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scope>
+.content {
+  width: 100%;
+  height: calc(100% - 90px);
+}
+</style> 

vue.config.js

@@ -18,8 +18,15 @@ module.exports = defineConfig({
   devServer:{
     port:8080,
     proxy:{
+      // '/api':{
+      //     target:'http://121.43.55.7:5000',
+      //     changeOrigin:true,
+      //     pathRewrite:{
+      //       '^/api':''
+      //     }
+      // }
       '/api':{
-          target:'http://121.43.55.7:5000',
+          target:'http://192.168.3.32:5000',
           changeOrigin:true,
           pathRewrite:{
             '^/api':''