修改区域列表

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "core-js": "3.6.5",
+    "crypto-js": "^4.1.1",
     "echarts": "^5.2.2",
     "element-ui": "^2.15.6",
     "file-saver": "^2.0.5",

src/api/area.js

@@ -41,3 +41,11 @@ export function deleteDeviceOfArea(areaId, deviceId) {
     method: 'get'
   })
 }
+// 获取设备列表
+export function platformSnList(data) {
+  return request({
+    url: '/admin//third/platform/sn/list',
+    method: 'post',
+    data
+  })
+}

src/views/area/index.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="app-container">
-    <addModal ref="addModel" :machine-list="machineList" @success="modalSuccess" />
+    <addModal ref="addModel" :machine-list="snList" @success="modalSuccess" />
     <!--搜索区-->
-    <el-select v-model="form.zoneId" filterable clearable placeholder="请选择区域" class="input" no-data-text="“选择区域”为空">
+    <el-select
+      v-model="form.zoneId"
+      filterable
+      clearable
+      placeholder="请选择区域"
+      class="input"
+      no-data-text="“选择区域”为空"
+    >
       <el-option
         v-for="(item, index) in areaPreviewList"
         :key="index"
@@ -38,27 +45,76 @@
         :value="item.sn"
       />
     </el-select>
-    <el-button type="primary" icon="el-icon-search" class="margin-left" @click="query">搜索</el-button>
+    <el-button
+      type="primary"
+      icon="el-icon-search"
+      class="margin-left"
+      @click="query"
+      >搜索</el-button
+    >
     <!--主表格-->
     <div class="table-wrap">
       <div class="table-add" @click="handleCreate">
-        <img src="@/icons/images/ic_plus.png">
+        <img src="@/icons/images/ic_plus.png" />
       </div>
       <div v-for="(item, index) in tableData" :key="index" class="table-item">
         <div class="table-item-head">
-          <div class="head-title">{{ item.name }}</div>
-          <div style="flex:auto;" />
-          <el-button type="primary" size="small" round @click="handleUpdate(item)">编辑</el-button>
-          <el-button type="danger" icon="el-icon-delete" size="small" circle plain @click="handleAreaDelete(item)" />
+          <div class="flex">
+            <div class="head-title">{{ item.name }}</div>
+            <div class="tag">
+              <el-tag v-if="item.spiPushMsg" type="success">{{
+                item.spiPushMsg
+              }}</el-tag>
+              <!-- <el-tag v-if="item.zoneType" type="success">{{
+                getAreaDescByType(item.zoneType)
+              }}</el-tag> -->
+            </div>
+          </div>
+          <div>
+            <!-- 跳转到大屏 -->
+            <!-- <el-button
+              type="primary"
+              size="small"
+              round
+              @click="goLargeScreeno(item)"
+              ><i class="el-icon-s-platform"></i
+            ></el-button> -->
+            <el-button
+              type="primary"
+              size="small"
+              round
+              @click="handleUpdate(item)"
+              >编辑</el-button
+            >
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              size="small"
+              circle
+              plain
+              @click="handleAreaDelete(item)"
+            />
+          </div>
         </div>
         <div class="table-item-content">
-          <div v-for="(itemS, indexS) in item.devices" :key="indexS" class="content-item">
+          <div
+            v-for="(itemS, indexS) in item.devices"
+            :key="indexS"
+            class="content-item"
+          >
             <div class="content-item-id">{{ itemS.sn }}</div>
             <div class="content-item-name">{{ itemS.name }}</div>
             <div class="content-item-status">
               <el-tag v-if="itemS.online === 1" type="success">在线</el-tag>
               <el-tag v-else type="info">离线</el-tag>
-              <el-button type="danger" icon="el-icon-close" size="mini" class="content-item-status-delete" circle @click="handleDeviceDelete(item.id, itemS)" />
+              <el-button
+                type="danger"
+                icon="el-icon-close"
+                size="mini"
+                class="content-item-status-delete"
+                circle
+                @click="handleDeviceDelete(item.id, itemS)"
+              />
             </div>
           </div>
         </div>
@@ -77,11 +133,17 @@
 </template>
 
 <script>
-import { getAreaPageList, getAreaList, deleteArea, deleteDeviceOfArea } from '@/api/area'
-import { getFaceDeviceList } from '@/api/old_api_pengwenbing'
-import tableMixins from '@/mixins/tableMixins'
-import Pagination from '@/components/Pagination'
-import AddModal from './modal/AddModal.vue'
+import {
+  getAreaPageList,
+  getAreaList,
+  deleteArea,
+  deleteDeviceOfArea,
+  platformSnList,
+} from "@/api/area";
+import { getFaceDeviceList } from "@/api/old_api_pengwenbing";
+import tableMixins from "@/mixins/tableMixins";
+import Pagination from "@/components/Pagination";
+import AddModal from "./modal/AddModal.vue";
 
 export default {
   components: { Pagination, AddModal },
@@ -91,259 +153,306 @@ export default {
       form: {
         zoneId: null,
         adminId: null,
-        sn: null
+        sn: null,
       },
       areaPreviewList: [],
       // 设备列表_搜索
-      machineList: []
-    }
+      machineList: [],
+      showSearch: false,
+      snList: [],
+    };
   },
   methods: {
     initData() {
-      this.form.adminId = this.$store.getters.adminId
-      this.getAreaList()
-      this.getFaceDeviceList()
-      this.getTableList()
+      this.form.adminId = this.$store.getters.adminId;
+      this.getAreaList();
+      this.getFaceDeviceList();
+      this.getTableList();
+    },
+    getAreaDescByType(type) {
+      if (!type) {
+        return "";
+      }
+      const areaType = this.areaTypeList.find((item) => item.type === type);
+      if (!areaType) {
+        return "";
+      }
+      return areaType.desc || "";
     },
     // 返回所有的区域列表概览
     async getAreaList() {
       try {
-        const result = await getAreaList(this.form)
-        this.areaPreviewList = result.data
+        const result = await getAreaList(this.form);
+        this.areaPreviewList = result.data;
       } catch (e) {
-        console.log(e)
-        this.areaPreviewList = []
+        console.log(e);
+        this.areaPreviewList = [];
       }
     },
     // 获取设备列表-搜索
     getFaceDeviceList() {
       getFaceDeviceList().then((res) => {
-        this.machineList = res.data
-      })
+        this.machineList = res.data;
+      });
+    },
+    // 获取设备列表-添加/编辑
+    getSnList(id) {
+      if (id) {
+        this.form.zoneId = id;
+      }
+      platformSnList(this.form).then((res) => {
+        this.snList = res.data;
+        this.form.zoneId = null;
+      });
     },
     // 获取表格数据
     async getTableList() {
-      this.tableLoading = true
+      this.tableLoading = true;
       try {
-        const result = await getAreaPageList(this.getFilterParams())
-        this.setDataList(result.data)
+        const result = await getAreaPageList(this.getFilterParams());
+        this.setDataList(result.data);
       } catch (e) {
-        console.log(e)
+        console.log(e);
       } finally {
-        this.tableLoading = false
+        this.tableLoading = false;
       }
     },
     // 获取筛选信息
     query() {
-      this.clearPageParams()
-      this.getTableList()
+      this.clearPageParams();
+      this.getTableList();
     },
     // 增加筛选条件
     transformFilterForm() {
-      return this.form
+      return this.form;
     },
     modalSuccess(isEdit) {
       if (!isEdit) {
-        this.clearPageParams()
+        this.clearPageParams();
       }
-      this.getTableList()
+      this.getTableList();
     },
     handleCreate() {
-      this.$refs.addModel.open()
+      this.getSnList();
+      this.$refs.addModel.open();
     },
     handleUpdate(row) {
-      this.$refs.addModel.open(Object.assign({}, row))
+      console.log(row);
+      this.$refs.addModel.open(Object.assign({}, row));
+      this.getSnList(row.id);
     },
     handleAreaDelete(row) {
-      const that = this
-      this.$confirm('确定要删除此区域吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      const that = this;
+      this.$confirm("确定要删除此区域吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
         showClose: false,
-        type: 'warning',
-        beforeClose: async(action, instance, done) => {
-          if (action === 'confirm') {
-            instance.confirmButtonLoading = true
-            instance.cancelButtonLoading = true
-            instance.confirmButtonText = '提交中...'
+        type: "warning",
+        beforeClose: async (action, instance, done) => {
+          if (action === "confirm") {
+            instance.confirmButtonLoading = true;
+            instance.cancelButtonLoading = true;
+            instance.confirmButtonText = "提交中...";
             try {
-              await deleteArea(row.id)
+              await deleteArea(row.id);
               this.$message({
-                type: 'success',
-                message: '删除成功!'
-              })
-              that.getAreaList()
-              that.getTableList()
+                type: "success",
+                message: "删除成功!",
+              });
+              that.getAreaList();
+              that.getTableList();
             } catch (e) {
               // this.$message({
               //   type: 'error',
               //   message: '删除失败!'
               // })
             } finally {
-              done()
+              done();
               setTimeout(() => {
-                instance.confirmButtonLoading = false
-                instance.cancelButtonLoading = false
-              }, 300)
+                instance.confirmButtonLoading = false;
+                instance.cancelButtonLoading = false;
+              }, 300);
             }
           } else {
-            done()
+            done();
           }
-        }
-      }).then(() => {}).catch(() => {})
+        },
+      })
+        .then(() => {})
+        .catch(() => {});
     },
     handleDeviceDelete(areaId, row) {
-      const that = this
-      this.$confirm('确定要解绑此设备吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      const that = this;
+      this.$confirm("确定要解绑此设备吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
         showClose: false,
-        type: 'warning',
-        beforeClose: async(action, instance, done) => {
-          if (action === 'confirm') {
-            instance.confirmButtonLoading = true
-            instance.cancelButtonLoading = true
-            instance.confirmButtonText = '提交中...'
+        type: "warning",
+        beforeClose: async (action, instance, done) => {
+          if (action === "confirm") {
+            instance.confirmButtonLoading = true;
+            instance.cancelButtonLoading = true;
+            instance.confirmButtonText = "提交中...";
             try {
-              await deleteDeviceOfArea(areaId, row.sn)
+              await deleteDeviceOfArea(areaId, row.sn);
               this.$message({
-                type: 'success',
-                message: '解绑成功!'
-              })
-              that.getTableList()
+                type: "success",
+                message: "解绑成功!",
+              });
+              that.getTableList();
             } catch (e) {
               // this.$message({
               //   type: 'error',
               //   message: '解绑失败!'
               // })
             } finally {
-              done()
+              done();
               setTimeout(() => {
-                instance.confirmButtonLoading = false
-                instance.cancelButtonLoading = false
-              }, 300)
+                instance.confirmButtonLoading = false;
+                instance.cancelButtonLoading = false;
+              }, 300);
             }
           } else {
-            done()
+            done();
           }
-        }
-      }).then(() => {}).catch(() => {})
-    }
-  }
-}
+        },
+      })
+        .then(() => {})
+        .catch(() => {});
+    },
+    goLargeScreeno(item) {
+      let id = window.btoa(item.id);
+      window.location.href =
+        "http://localhost:8080/otis-omc/back/#/Home?zoneDeviceRId=" + id;
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-  .table{
-    margin-top: 15px;
-  }
-  .flex {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  .margin-left {
-    margin: 10px 0 0 10px;
-  }
-  .input {
-    width: 200px;
-  }
-  ::-webkit-scrollbar{
-    width: 6px;
-    height: 6px;
-    background-color: #F1F2F5;
-  }
+.table {
+  margin-top: 15px;
+}
+.flex {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.margin-left {
+  margin: 10px 0 0 10px;
+}
+.input {
+  width: 200px;
+}
+.input1 {
+  width: 160px;
+}
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: #f1f2f5;
+}
 
-::-webkit-scrollbar-thumb{
-  background-color:#BFC6D4;
+::-webkit-scrollbar-thumb {
+  background-color: #bfc6d4;
   border-radius: 10px;
 }
-::-webkit-scrollbar-track{
+::-webkit-scrollbar-track {
   background-color: transparent;
 }
-  .table-wrap {
+.table-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  & > div {
+    margin-top: 28px;
+    margin-left: 1%;
+    min-width: 375px;
+    width: 32%;
+    height: 256px;
+    flex: none;
+    overflow: hidden;
+    border: 1px solid #e3e9f8;
+    border-radius: 8px;
+  }
+  & > div:nth-of-type(3n + 1) {
+    margin-left: 0;
+  }
+  .table-add {
     display: flex;
-    flex-wrap: wrap;
-    & > div {
-      margin-top: 28px;
-      margin-left: 1%;
-      min-width: 375px;
-      width: 32%;
-      height: 256px;
-      flex: none;
-      overflow: hidden;
-      border: 1px solid #E3E9F8;
-      border-radius: 8px;
-    }
-    & > div:nth-of-type(3n+1) {
-      margin-left: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: #f8faff;
+    cursor: pointer;
+    & img {
+      width: 80px;
+      height: 80px;
     }
-    .table-add {
+  }
+  .table-item {
+    display: flex;
+    flex-direction: column;
+    .table-item-head {
+      width: 100%;
+      height: 62px;
       display: flex;
-      justify-content: center;
+      justify-content: space-between;
       align-items: center;
-      background-color: #F8FAFF;
-      cursor: pointer;
-      & img {
-        width: 80px;
-        height: 80px;
+      padding: 0 14px 0 20px;
+      background-color: #e3ebff57;
+      .head-title {
+        font-size: 20px;
+        color: #1b55ab;
       }
     }
-    .table-item {
-      display: flex;
-      flex-direction: column;
-      .table-item-head {
-        width: 100%;
-        height: 62px;
+    .tag {
+      flex: left;
+      text-align: center;
+      margin-left: 10px;
+    }
+    .table-item-content {
+      width: 100%;
+      padding: 0 12px;
+      height: calc(256px - 62px);
+      overflow: auto;
+      .content-item {
+        margin-top: 12px;
+        padding: 4px 6px;
         display: flex;
         align-items: center;
-        padding: 0 14px 0 20px;
-        background-color: #E3EBFF57;
-        .head-title {
-          font-size: 20px;
-          color: #1B55AB;
+        font-size: 14xp;
+        color: #606266;
+        &:last-of-type {
+          margin-bottom: 12px;
         }
-      }
-      .table-item-content {
-        width: 100%;
-        padding: 0 12px;
-        height: calc(256px - 62px);
-        overflow: auto;
-        .content-item {
-          margin-top: 12px;
-          padding: 4px 6px;
+        &:hover {
+          background-color: #f5f8ff;
+          border-radius: 5px;
+          .content-item-status .content-item-status-delete {
+            visibility: visible;
+          }
+        }
+        .content-item-id {
+          flex: none;
+        }
+        .content-item-name {
+          flex: auto;
+          margin-left: 20px;
+        }
+        .content-item-status {
+          flex: none;
           display: flex;
           align-items: center;
-          font-size: 14xp;
-          color: #606266;
-          &:last-of-type {
-            margin-bottom: 12px;
-          }
-          &:hover {
-            background-color: #F5F8FF;
-            border-radius: 5px;
-            .content-item-status .content-item-status-delete {
-              visibility: visible;
-            }
-          }
-          .content-item-id {
-            width: 160px;
-            flex: none;
-          }
-          .content-item-name {
-            flex: auto;
-          }
-          .content-item-status {
-            flex: none;
-            display: flex;
-            align-items: center;
-            .content-item-status-delete {
-              margin-left: 15px;
-              visibility: hidden;
-              padding: 3px !important;
-            }
+          .content-item-status-delete {
+            margin-left: 15px;
+            visibility: hidden;
+            padding: 3px !important;
           }
         }
       }
     }
   }
+}
+.el-icon-s-platform,
+.el-icon-search {
+  font-weight: 600;
+}
 </style>

src/views/area/modal/AddModal.vue

@@ -7,21 +7,40 @@
     :destroy-on-close="false"
     :close-on-click-modal="false"
   >
-    <el-form ref="form" :rules="rules" :model="form" label-position="left" label-width="100px">
-      <el-form-item prop="id" style="margin-bottom: 0;">&nbsp;</el-form-item>
+    <el-form
+      ref="form"
+      :rules="rules"
+      :model="form"
+      label-position="left"
+      label-width="130px"
+    >
+      <el-form-item prop="id" style="margin-bottom: 0">&nbsp;</el-form-item>
       <el-form-item label="区域名称" prop="name" required>
         <el-input v-model="form.name" placeholder="请输入区域名称" />
       </el-form-item>
       <el-form-item label="绑定设备" prop="snJson" required>
-        <el-select v-model="form.snJson" class="filter-item" placeholder="请选择设备进行绑定" clearable multiple filterable>
-          <el-option v-for="(item, index) in machineList" :key="index" :label="item.sn" :value="item.sn" />
+        <el-select
+          v-model="form.snJson"
+          class="filter-item"
+          placeholder="请选择设备进行绑定"
+          clearable
+          multiple
+          filterable
+        >
+          <el-option
+            v-for="(item, index) in machineList"
+            :key="index"
+            :label="item"
+            :value="item"
+          />
         </el-select>
       </el-form-item>
+      <el-form-item label="行星云推送消息" prop="spiPushMsg">
+        <el-input v-model="form.spiPushMsg" placeholder="请输入行星云推送消息" />
+      </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">
-        取消
-      </el-button>
+      <el-button @click="visible = false"> 取消 </el-button>
       <el-button type="primary" :loading="submitLoading" @click="submit">
         确定
       </el-button>
@@ -30,84 +49,99 @@
 </template>
 
 <script>
-import { addOrUpdate } from '@/api/area'
+import { addOrUpdate } from "@/api/area";
 
 export default {
   props: {
     machineList: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     return {
       form: {
         id: null,
         name: null,
-        snJson: null
+        snJson: null,
+        spiPushMsg: null,
       },
       rules: {
         name: [
-          { required: true, whitespace: true, message: '不能为空!', trigger: ['change', 'blur'] }
+          {
+            required: true,
+            whitespace: true,
+            message: "不能为空!",
+            trigger: ["change", "blur"],
+          },
         ],
         snJson: [
-          { required: true, type: 'array', message: '不能为空!', trigger: ['change', 'blur'] }
-        ]
+          {
+            required: true,
+            type: "array",
+            message: "不能为空!",
+            trigger: ["change", "blur"],
+          },
+        ],
       },
       visible: false,
       submitLoading: false,
-      isEdit: false
-    }
+      isEdit: false,
+    };
   },
   methods: {
     open(obj) {
-      this.visible = true
-      this.submitLoading = false
+      this.visible = true;
+      this.submitLoading = false;
       this.$nextTick(() => {
-        this.$refs.form.resetFields()
+        this.$refs.form.resetFields();
         if (obj && Object.keys(obj).length > 0) {
-          this.form.id = obj.id
-          this.form.name = obj.name
+          this.form.id = obj.id;
+          this.form.name = obj.name;
+          this.form.spiPushMsg = obj.spiPushMsg;
           if (obj.snJson) {
-            this.form.snJson = obj.snJson.split(',')
+            this.form.snJson = obj.snJson.split(",");
           } else {
-            this.form.snJson = null
+            this.form.snJson = null;
           }
-          this.isEdit = true
+          this.isEdit = true;
         } else {
-          this.isEdit = false
+          this.isEdit = false;
         }
-      })
+      });
     },
     submit(e) {
-      e.preventDefault()
-      this.$refs.form.validate(async(valid) => {
+      e.preventDefault();
+      this.$refs.form.validate(async (valid) => {
         if (!valid) {
-          return false
+          return false;
         }
         if (this.submitLoading) {
-          return
+          return;
         }
         if (this.form.snJson && this.form.snJson.length > 0) {
-          this.form.snJson = this.form.snJson.join(',')
+          this.form.snJson = this.form.snJson.join(",");
         } else {
-          this.form.snJson = null
+          this.form.snJson = null;
         }
-        this.submitLoading = true
+        this.submitLoading = true;
         try {
-          await addOrUpdate({ ...this.form, adminId: this.$store.getters.adminId })
-          this.visible = false
-          this.$emit('success', this.isEdit)
+          await addOrUpdate({
+            ...this.form,
+            adminId: this.$store.getters.adminId,
+          });
+          this.visible = false;
+          this.$emit("success", this.isEdit);
         } catch (e) {
-          this.$refs.form.resetFields()
-          console.info('add', e)
+          this.$refs.form.resetFields();
+          console.info("add", e);
         } finally {
-          this.submitLoading = false
+          this.submitLoading = false;
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style scoped>