电子围栏联调

src/api/rails/rails.js

@@ -0,0 +1,64 @@
+import request from '@/router/axios';
+
+const baseUrl = process.env.NODE_ENV === 'production' ? 'http://182.139.182.190:60032/prod-api' : 'http://182.139.182.190:60032/prod-api';
+
+//围栏列表
+export const getRailsList = (token, params) => {
+  return request({
+    url: baseUrl + '/api/electronicFence/getRails',
+    method: 'get',
+    headers: {
+      Authorization: token
+    },
+    params: params,
+    authorization: false
+  })
+}
+//围栏详情
+export const railsDetail = (token, id) => {
+  return request({
+    url: baseUrl + '/api/electronicFence/rails/' + id,
+    method: 'get',
+    headers: {
+      Authorization: token
+    },
+    authorization: false
+  })
+}
+//围栏删除
+export const railsDelete = (token, data) => {
+  return request({
+    url: baseUrl + '/api/electronicFence/rails',
+    method: 'delete',
+    headers: {
+      Authorization: token
+    },
+    data: data,
+    authorization: false
+  })
+}
+//围栏新增
+export const railsAdd = (token, data) => {
+  return request({
+    url: baseUrl + '/api/electronicFence/rails',
+    method: 'post',
+    headers: {
+      Authorization: token
+    },
+    data: data,
+    authorization: false
+  })
+}
+//围栏编辑
+export const railsUpdate = (token, data) => {
+  return request({
+    url: baseUrl + '/api/electronicFence/edit',
+    method: 'post',
+    headers: {
+      Authorization: token
+    },
+    data: data,
+    authorization: false
+  })
+}
+

src/router/axios.js

@@ -72,9 +72,9 @@ axios.interceptors.response.use(res => {
   //如果在白名单里则自行catch逻辑处理
   if (statusWhiteList.includes(status)) return Promise.reject(res);
   //如果是401则跳转到登录页面
-  if (status === 401 && message.indexOf('/system/dict/data/type/node_type') < 0 && message.indexOf('/system/dict/data/type/device_status') < 0 && message.indexOf('/api/bizDevice/list') < 0) store.dispatch('FedLogOut').then(() => router.push({path: '/login'}));
+  if (status === 401 && message.indexOf('/api/electronicFence') < 0 && message.indexOf('/system/dict/data/type/node_type') < 0 && message.indexOf('/system/dict/data/type/device_status') < 0 && message.indexOf('/api/bizDevice/list') < 0) store.dispatch('FedLogOut').then(() => router.push({path: '/login'}));
   // 如果请求为非200否者默认统一处理
-  if (status !== 200 && message.indexOf('/system/dict/data/type/node_type') < 0 && message.indexOf('/system/dict/data/type/device_status') < 0 && message.indexOf('/api/bizDevice/list') < 0) {
+  if (status !== 200 && message.indexOf('/api/electronicFence') < 0 && message.indexOf('/system/dict/data/type/node_type') < 0 && message.indexOf('/system/dict/data/type/device_status') < 0 && message.indexOf('/api/bizDevice/list') < 0) {
     Message({
       message: message,
       type: 'error'

src/views/rails/list.vue

@@ -0,0 +1,387 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" :page.sync="page"
+      :permission="permissionList" @search-change="searchChange" @search-reset="searchReset"
+      @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="primary" size="small" icon="el-icon-plus" plain @click="rowAdd">新增
+        </el-button>
+      </template>
+      <template #menu="{ row, index }">
+        <el-button type="text" icon="el-icon-view" size="small" @click="rowView(row)">详情
+        </el-button>
+        <el-button type="text" icon="el-icon-edit" size="small" @click="rowEdit(row)">编辑
+        </el-button>
+        <el-button type="text" icon="el-icon-delete" size="small" @click="rowDel(row)">删除
+        </el-button>
+      </template>
+    </avue-crud>
+    <!-- 新增 编辑 详情 -->
+    <el-dialog :title="title" :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false"
+      :close-on-press-escape="false" width="800px">
+      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="80px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="建筑ID" prop="buildId">
+              <el-input v-model="addForm.buildId" placeholder="请输入建筑ID" :disabled="type == 'view'" maxlength="10" />
+            </el-form-item>
+            <el-form-item label="围栏名称" prop="name">
+              <el-input v-model="addForm.name" placeholder="请输入围栏名称" :disabled="type == 'view'" maxlength="30" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="楼层" prop="floorNo">
+              <el-input v-model="addForm.floorNo" placeholder="请输入楼层" :disabled="type == 'view'" maxlength="10" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="围栏点位">
+          <div style="">
+            <el-button @click="addPoint" type="text" icon="el-icon-plus" size="small" style="float:right;" v-if="type != 'view'">新增</el-button>
+          </div>
+          <el-table class="table_box" :data="addForm.points" tooltip-effect="dark" border style="width: 100%">
+            <!-- <el-table-column label="id">
+              <template slot-scope="{row,$index}">
+                <el-form-item :prop="`points.${$index}.id`" label-width="0" :rules="rules.id">
+                  <el-input v-model="row.id" placeholder="请输入id" :disabled="type == 'view'" maxlength="10" />
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="围栏id">
+              <template slot-scope="{row,$index}">
+                <el-form-item :prop="`points.${$index}.railId`" label-width="0" :rules="rules.railId">
+                  <el-input v-model="row.railId" placeholder="请输入围栏id" :disabled="type == 'view'" maxlength="10" />
+                </el-form-item>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="坐标x">
+              <template slot-scope="{row,$index}">
+                <el-form-item :prop="`points.${$index}.x`" label-width="0" :rules="rules.x">
+                  <el-input v-model="row.x" placeholder="请输入坐标x" :disabled="type == 'view'" maxlength="10" />
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="坐标y">
+              <template slot-scope="{row,$index}">
+                <el-form-item :prop="`points.${$index}.y`" label-width="0" :rules="rules.x">
+                  <el-input v-model="row.y" placeholder="请输入坐标y" :disabled="type == 'view'" maxlength="10" />
+                </el-form-item>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="100" v-if="type != 'view'">
+              <template slot-scope="{row,$index}">
+                <el-button type="text" size="small" v-if="$index > 0" @click="deletePoint($index)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button v-if="type != 'view'" type="primary" @click="submitForm" :loading="submitLoading">确认</el-button>
+      </div>
+    </el-dialog>
+  </basic-container>
+</template>
+
+<script>
+import { bizLogin } from "@/api/wirelessintrusion/wirelessintrusion";
+import { getRailsList, railsDelete, railsAdd, railsUpdate } from "@/api/rails/rails";
+import { mapGetters } from "vuex";
+import { dateFormat } from "../../util/date"
+
+export default {
+  data() {
+    return {
+      addForm: {
+        points: []
+      },
+      rules: {
+        buildId: [
+          { required: true, message: '请输入建筑id', trigger: 'blur' },
+        ],
+        floorNo: [
+          { required: true, message: '请输入楼层', trigger: 'blur' },
+        ],
+        name: [
+          { required: true, message: '请输入围栏名称', trigger: 'blur' },
+        ],
+        // id: [
+        //   { required: true, message: '请输入id', trigger: 'blur' },
+        // ],
+        // railId: [
+        //   { required: true, message: '请输入围栏id', trigger: 'blur' },
+        // ],
+        x: [
+          { required: true, message: '请输入坐标x', trigger: 'blur' },
+        ],
+        y: [
+          { required: true, message: '请输入坐标y', trigger: 'blur' },
+        ]
+      },
+      dialogVisible: false,
+      title: '围栏新增',
+      type: 'add',
+      query: {},
+      loading: true,
+      page: {
+        size: 10,
+        current: 1,
+        total: 0
+      },
+      option: {
+        height: 'auto',
+        calcHeight: 30,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        selection: false,
+        viewBtn: false,
+        delBtn: false,
+        dialogClickModal: false,
+        column: [
+          {
+            label: "围栏名称",
+            prop: "name",
+            search: true,
+            slot: true,
+          },
+          {
+            label: "建筑 id",
+            prop: "buildId",
+          },
+          {
+            label: "楼层",
+            prop: "floorNo",
+          },
+          {
+            label: "中心点",
+            prop: "centerPoint",
+          },
+          {
+            label: "创建时间",
+            prop: "createTime",
+            formatter: (data, value) => {
+              return dateFormat(new Date(data.createTime))
+            }
+          },
+          {
+            label: "更新时间",
+            prop: "updateTime",
+            formatter: (data, value) => {
+              return dateFormat(new Date(data.updateTime))
+            }
+          }
+        ]
+      },
+      data: [],
+      submitLoading: false,
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+    permissionList() {
+      return {
+        addBtn: false,
+        viewBtn: false,
+        delBtn: true,
+        editBtn: false
+      };
+    },
+  },
+  methods: {
+    //查看详情
+    rowView(row) {
+      this.addForm = row;
+      this.title = '围栏详情';
+      this.type = 'view';
+      this.dialogVisible = true;
+      this.$refs.addForm.resetFields();
+    },
+    //新增
+    rowAdd(row) {
+      this.addForm = {
+        points: [{ "x": 0, "y": 0 }]
+      };
+      this.title = '围栏新增';
+      this.type = 'add';
+      this.dialogVisible = true;
+      this.$refs.addForm.resetFields();
+    },
+    //编辑
+    rowEdit(row) {
+      this.addForm = row;
+      this.title = '围栏编辑';
+      this.type = 'edit';
+      this.dialogVisible = true;
+      this.$refs.addForm.resetFields();
+    },
+    //保存
+    submitForm() {
+      this.$refs['addForm'].validate((valid) => {
+        if (valid) {
+          let token = window.sessionStorage.getItem('bizToken');
+          if (token == 'undefined' || !token) {
+            return;
+          }
+          this.submitLoading = true;
+          console.log(this.addForm.id)
+          if (this.addForm.id != undefined) {
+            railsUpdate(token, this.addForm ).then(res => {
+              this.submitLoading = false;
+              if (res.data.code == 401) {
+                window.sessionStorage.removeItem('bizToken');
+                bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res2 => {
+                  window.sessionStorage.setItem('bizToken', res2.data.data.token);
+                  this.submitForm();
+                })
+              }
+              else if (res.data.status == 200) {
+                this.dialogVisible = false;
+                this.onLoad(this.page);
+                this.$message({
+                  type: "success",
+                  message: "操作成功!"
+                });
+              }
+            }, err => {
+              this.submitLoading = false;
+            })
+          } else {
+            railsAdd(token, this.addForm ).then(res => {
+              this.submitLoading = false;
+              if (res.data.code == 401) {
+                window.sessionStorage.removeItem('bizToken');
+                bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res2 => {
+                  window.sessionStorage.setItem('bizToken', res2.data.data.token);
+                  this.submitForm();
+                })
+              }
+              else if (res.data.status == 200) {
+                this.dialogVisible = false;
+                this.onLoad(this.page);
+                this.$message({
+                  type: "success",
+                  message: "操作成功!"
+                });
+              }
+            }, err => {
+              this.submitLoading = false;
+            })
+          }
+        }
+      })
+    },
+    //增加坐标集合
+    addPoint() {
+      this.addForm.points.push({ "x": 0, "y": 0 });
+    },
+    //删除坐标集合
+    deletePoint(index) {
+      this.addForm.points.splice(index, 1);
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          let token = window.sessionStorage.getItem('bizToken');
+          if (token == 'undefined' || !token) {
+            return;
+          }
+          railsDelete(token, { "buildId": row.buildId, "railIds": [row.id] }).then(res => {
+            if (res.data.code == 401) {
+              window.sessionStorage.removeItem('bizToken');
+              bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res2 => {
+                window.sessionStorage.setItem('bizToken', res2.data.data.token);
+                this.rowDel(row);
+              })
+            }
+          });
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        });
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.current = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    currentChange(current) {
+      this.page.current = current;
+    },
+    sizeChange(size) {
+      this.page.size = size;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      console.log(page)
+      let token = window.sessionStorage.getItem('bizToken');
+      if (token == 'undefined' || !token) {
+        bizLogin({ appKey: 'Arf7bd4f26', appSecret: 'kb207044c8' }).then(res => {
+          window.sessionStorage.setItem('bizToken', res.data.data.token);
+          this.loading = true;
+          getRailsList(res.data.data.token, Object.assign(params, this.query, { current: page.currentPage, size: page.pageSize })).then(res2 => {
+            this.loading = false;
+            if (res2.data.code == 401) {
+              window.sessionStorage.removeItem('bizToken');
+              this.onLoad(this.page);
+            }
+            else {
+              const data = res2.data;
+              this.page.total = data.total;
+              this.data = data.records;
+            }
+          }, err => {
+            this.loading = false;
+          });
+        })
+      }
+      else {
+        this.loading = true;
+        getRailsList(token, Object.assign(params, this.query, { current: page.currentPage, size: page.pageSize })).then(res2 => {
+          this.loading = false;
+          if (res2.data.code == 401) {
+            window.sessionStorage.removeItem('bizToken');
+            this.onLoad(this.page);
+          }
+          else {
+            const data = res2.data;
+            this.page.total = data.total;
+            this.data = data.records;
+          }
+        }, err => {
+          this.loading = false;
+        });
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.el-table {
+  width: 100% !important;
+  border: 1px solid #D6D8DF;
+}
+
+.el-table th.el-table__cell {
+  background: #F7F8FA;
+}
+</style>