修改

package-lock.json

@@ -12611,6 +12611,11 @@
       "resolved": "https://registry.npmmirror.com/vue-axios/download/vue-axios-2.1.5.tgz",
       "integrity": "sha1-GvS/EhjtcTCcdq+zjQ9oPjEsJKc="
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npm.taobao.org/vue-count-to/download/vue-count-to-1.0.13.tgz",
+      "integrity": "sha1-PnVz6m5kwrKXL2TgoqsuI8dZD/M="
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -38,6 +38,7 @@
     "three": "^0.128.0",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.2",
+    "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.7.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.1"

src/views/accesscontrolmng/comps/control.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="page">
+    <div class="container">
+      <div class="container-left animate__animated animate__faster animate__zoomIn">
+        <more title="安防布控" nomore></more>
+        <div style="position: relative;padding-top: 1rem;">
+          <img src="/img/test/safe.png" class="img">
+
+          <div class="search-body animate__animated  animate__zoomIn">
+            <el-input v-model="input" prefix-icon="el-icon-search" suffix-icon="el-icon-camera-solid"
+              placeholder="请输入姓名"></el-input>
+            <div class="btn" @click="searchClick(0)" id="searchId0" style="background-color: #3B8FF4;">
+              抓拍记录
+            </div>
+            <div class="btn" @click="searchClick(1)" id="searchId1" style="background-color: #F47B3B;">
+              人员轨迹
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="container-right animate__animated animate__faster animate__fadeInRight">
+        <more title="今日布控预警"></more>
+
+        <div class="card-box" v-for="(item,index) in 4" :key="index">
+          <div class="left center">
+            <div class="left-data">
+              <div>张**</div>
+              <div>抓拍次数：22</div>
+              <div>相似度：99.2%</div>
+            </div>
+          </div>
+
+          <div class="right center">
+            <div class="face">
+
+              <el-image style="width: 5rem; height: 5rem" src="/img/test/face.png"
+                :preview-src-list="['/img/test/face.png']">
+              </el-image>
+
+
+              <div class="center">
+                <img src="/img/safe/vs.png" style="width: 1.25rem;height: 1.25rem;padding: 0 1.25rem;">
+              </div>
+
+              <el-image style="width: 5rem; height: 5rem" src="/img/test/face.png"
+                :preview-src-list="['/img/test/face.png']">
+              </el-image>
+            </div>
+            <div class="func">
+              <div class="center" style="margin-right: 0.625rem;cursor: pointer;">
+                <img src="/img/safe/tp.png" style="width: 1rem;height: 1rem;margin-right: 0.25rem;">
+                抓拍记录
+              </div>
+              <div class="center" style="cursor: pointer;"><img src="/img/safe/xdgz.png"
+                  style="width: 1rem;height: 1rem;margin-right: 0.25rem;">行动轨迹</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    },
+    methods: {
+      searchClick(index) {
+        let id = '#searchId' + index
+        this.$animateCss(id, 'animate__pulse  ')
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .search-body {
+    position: absolute;
+    top: 2.5rem;
+    left: 40px;
+    width: 40%;
+    height: 2.5rem;
+    line-height: 2.5rem;
+    background-color: #FFFFFF;
+    display: flex;
+
+    .btn {
+      cursor: pointer;
+      color: #FFFFFF;
+      font-size: 0.6rem;
+      width: 6.5rem;
+      text-align: center;
+    }
+  }
+
+  /deep/ .el-input__inner {
+    border-radius: 0 !important;
+  }
+
+  /deep/ .el-input__inner:hover {
+    border: none;
+  }
+
+  .page {
+    box-sizing: border-box;
+    margin-top: 0.625rem;
+    background-color: #FFFFFF;
+    padding: 1.25rem 0 1.25rem 1.25rem;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .container {
+    display: flex;
+
+
+    .container-left {
+      width: 70%;
+
+      .img {
+        width: 100%;
+        height: 50rem;
+      }
+    }
+
+    .container-right {
+      width: 30%;
+      padding: 0 1.5rem 1.5rem;
+    }
+  }
+
+  .card-box {
+    margin-top: 1.25rem;
+    padding: 18px 0;
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      color: #333333;
+      font-size: 0.85rem;
+      width: 45%;
+      display: flex;
+      flex-direction: column;
+
+      .left-data {
+        div:first-child {
+          font-weight: 800;
+          font-size: 1rem;
+          padding-bottom: 1rem;
+        }
+      }
+
+
+    }
+
+    .right {
+      width: 55%;
+      display: flex;
+      flex-direction: column;
+
+      .face {
+        display: flex;
+
+        img {
+          width: 5rem;
+          height: 5rem;
+        }
+      }
+
+      .func {
+        color: #3B8FF4;
+        font-size: 0.875rem;
+        display: flex;
+        padding-top: 0.8rem;
+
+        div:first-child {
+          padding-right: 0.625rem;
+        }
+      }
+    }
+
+
+  }
+</style>

src/views/accesscontrolmng/comps/func-list.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div class="list">
+      <div class="card animate__animated animate__faster animate__fadeInDown" style="width: 31.4rem;height: 12rem;"
+        v-for="(item,index) in list" :key="index">
+        <div class="data-top">
+          <div class="left">
+            <div class="center">
+              <img :src="item.icon">
+            </div>
+            <div class="left-data">
+              <div>{{item.name}}</div>
+              <div style="display: flex;">
+                <count-to :startVal='0' :endVal='item.total' :duration='3500'></count-to>
+                <div
+                  style="font-size: 0.875rem;margin-left: 0.2rem;display: flex;justify-content:center;flex-direction: column;">
+                  <label v-text="index==2?'人':'个'"></label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <el-button size="mini" @click="add(item,index)" :id="'id'+index"
+              style="background-color: #FFFFFF;color: #3b8ff4;" type="primary" plain round>
+              <i class="el-icon-plus"></i>
+              新增
+            </el-button>
+          </div>
+        </div>
+
+        <div class="data-bottom">
+          <div class="data-box" v-for="(item1,index1) in item.data" :key="index1">
+            <div>{{item1.label}}</div>
+            <div>
+              <count-to :startVal='0' :endVal='item.value' :duration='2000'></count-to>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import countTo from 'vue-count-to'
+  export default {
+    components: {
+      countTo
+    },
+    data() {
+      return {
+        list: [{
+            icon: '/img/safe/jksb.png',
+            name: '监控设备',
+            total: 23,
+            data: [{
+                label: '在线',
+                value: 22
+              },
+              {
+                label: '离线',
+                value: 8
+              },
+              {
+                label: '告警',
+                value: 2
+              }
+            ]
+          },
+          {
+            icon: '/img/safe/bkd.png',
+            name: '布控点',
+            total: 28,
+            data: [{
+                label: '抓拍人脸',
+                value: 2335
+              },
+              {
+                label: '抓拍视频',
+                value: 6524
+              },
+              {
+                label: '触发告警',
+                value: 3254
+              }
+            ]
+          },
+          {
+            icon: '/img/safe/bkrs.png',
+            name: '布控人数',
+            total: 23,
+            data: [{
+                label: '告警人数',
+                value: 75
+              },
+              {
+                label: '今日告警',
+                value: 56
+              },
+              {
+                label: '总告警',
+                value: 523
+              }
+            ]
+          }
+        ],
+      };
+    },
+    created() {
+
+    },
+    methods: {
+      add(item, index) {
+        let id = '#id' + index
+        this.$animateCss(id, 'animate__heartBeat')
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .symbol {
+    font-size: 0.6em;
+    color: #666666;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 0.4rem;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .list {
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      height: 16rem;
+      width: 31.25rem;
+      padding: 1.25rem;
+      background-color: #FFFFFF;
+
+
+      .data-top {
+        height: 55%;
+        display: flex;
+        padding: 1rem;
+        padding-bottom: 1.8rem;
+        justify-content: space-between;
+
+        .left {
+          display: flex;
+
+          img {
+            width: 66px;
+            height: 66px;
+            border-radius: 50%;
+          }
+
+
+          .left-data {
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            flex-direction: column;
+            margin-left: 0.625rem;
+
+            div:first-child {
+              font-weight: 800;
+              color: #333333;
+              font-size: 1.2rem;
+            }
+
+            div:last-child {
+              margin-top: 0.375rem;
+              color: #666666;
+              font-weight: 300;
+              font-size: 1.4rem;
+            }
+          }
+
+        }
+
+        .right {
+          display: flex;
+          justify-content: flex-end;
+          flex-direction: column;
+        }
+
+      }
+
+
+      .data-bottom {
+        height: 45%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 1.35rem;
+
+        .data-box {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          div:first-child {
+            font-size: 0.9rem;
+            color: #999999;
+          }
+
+          div:last-child {
+            padding-top: 0.1rem;
+            font-size: 1.2rem;
+            color: #333;
+            font-weight: 800;
+          }
+        }
+      }
+    }
+
+
+  }
+</style>

src/views/accesscontrolmng/comps/video-list.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInUp">
+    <more title="视频巡检"></more>
+
+    <div style="display: flex;justify-content: center;margin-top: 1.4rem;">
+      <div class="video-list" v-for="(item,index) in 4" :key="index">
+        <div class="top">
+          摄像头00{{index + 1}}
+        </div>
+        <div style="height: 100%;position: relative;">
+          <img src="/img/test/video.png" >
+
+          <div style="position: absolute;left: calc(50% - 25px);bottom: calc(50% - 25px);">
+            <i class="el-icon-video-play" style="color: #FFFFFF;font-size: 50px;font-weight: 300;"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    box-sizing: border-box;
+    margin-top: 0.625rem;
+    background-color: #FFFFFF;
+    padding: 1.25rem;
+  }
+
+
+  .video-list{
+    margin: 0 1rem;
+    width: 350px;
+    background-color: #F5F5F5;
+    display: flex;
+    flex-direction: column;
+
+    .top{
+      display: flex;
+      justify-content: center;
+      font-weight: 800;
+      font-size:0.875rem;
+      color: #333;
+      padding:10px;
+    }
+
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/accesscontrolmng/doordevice.vue

@@ -1,403 +1,35 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page="page"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               v-model="form"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.facedevice_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-      </template>
-      <template slot="menu" slot-scope="{row}">
-        <el-button @click="openDoor(row)" size="small" type="text">远程开门</el-button>
-      </template>
-      <template slot="mapSelectForm" slot-scope="scope">
-        <!-- <avue-map v-model="scope.row.mapSelect"></avue-map> -->
-        <div>
-          <el-button @click="mapVisible = true">选择地址</el-button>
-
-          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible"
-                     title="编辑地址" width="80%">
-            <!--            <customAvueMap v-if="mapVisible" v-model="scope.row.mapSelect"></customAvueMap>-->
-            <editPolygonMap v-if="mapVisible" :editForm.sync="scope.row" :region.sync="scope.row.address" :latitude.sync="scope.row.latitude" :longitude.sync="scope.row.longitude" :visible.sync="mapVisible"></editPolygonMap>
-          </el-dialog>
+  <div>
+    <el-row>
+      <el-col :span="24">
+        <div style="box-sizing: border-box;margin:0 0.625rem 0.625rem">
+          <func-list></func-list>
+          <control></control>
+          <video-list></video-list>
         </div>
-      </template>
-      <template slot="residentialId" slot-scope="scope">{{scope.row.residentialName}}</template>
-      <template slot="residentialIdForm" slot-scope="scope">
-        <select-dialog-residential :id="form.residentialId" :name="form.residentialName" :callback="selectCallback"></select-dialog-residential>
-      </template>
-      <template slot="deviceStatus" slot-scope="{row}">
-        <el-tag v-if="row.deviceStatus === 0" type="info">离线</el-tag>
-        <el-tag v-if="row.deviceStatus === 1" type="success">在线</el-tag>
-        <el-tag v-if="row.deviceStatus === 2" type="danger">异常</el-tag>
-      </template>
-    </avue-crud>
-  </basic-container>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-import {getList, getDetail, add, update, remove, remoteOpenDoor} from "../../api/device/doordevice.js";
-import {mapGetters} from "vuex";
-import customAvueMap from "../../components/residential/customAvueMap.vue"
-import editPolygonMap from "../../components/residential/editPolygonMap.vue";
-import SelectDialogResidential from "../../components/select-dialog/select-dialog-residential";
-export default {
-  components:{
-    SelectDialogResidential,
-    customAvueMap,editPolygonMap
-  },
-  data() {
-    return {
-      mapVisible:false,
-      form: {},
-      query: {},
-      loading: true,
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-      selectionList: [],
-      option: {
-        height:'auto',
-        calcHeight: 60,
-        tip: false,
-        searchShow: true,
-        searchMenuSpan: 6,
-        border: true,
-        index: true,
-        viewBtn: false,
-        delBtn: true,
-        selection: true,
-        dialogClickModal: false,
-        menuWidth:350,
-        column: [
-          {
-            label: "设备名称",
-            prop: "name",
-            search: true,
-            overHidden: true,
-            rules: [{
-              required: true,
-              message: "请输入名称",
-              trigger: "blur"
-            }]
-          },
-          {
-            label:'',
-            prop:'mapSelect',
-            viewDisplay: false,
-            formslot: true,
-            hide: true,
-          },
-          {
-            label: "经度",
-            prop: "longitude",
-            width: 100,
-            overHidden: true,
-            hide:true,
-            rules: [{
-              required: true,
-              message: "请输入经度",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "纬度",
-            prop: "latitude",
-            width: 100,
-            overHidden: true,
-            hide:true,
-            rules: [{
-              required: true,
-              message: "请输入纬度",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "设备序列号",
-            prop: "macAddress",
-            width: 200,
-            rules: [{
-              required: true,
-              message: "请输入Mac编码",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "设备厂商",
-            prop: "deviceFactory",
-            type: "select",
-            dicUrl: "/api/blade-system/dict-biz/dictionary?code=door_device_factory",
-            props:{
-              label: "dictValue",
-              value: "dictKey"
-            },
-            width: 135,
-            rules: [{
-              required: true,
-              message: "请选择设备厂商",
-              trigger: "blur"
-            }],
-            hide: true
-          },
-          // {
-          //   label: "所属园区",
-          //   prop: "agencyName",
-          //   editDisplay:false,
-          //   addDisplay:false
-          // },
-          {
-            label: "所属区域",
-            prop: "residentialId",
-            dicFlag: true,
-            type: "select",
-            search: true,
-            searchFilterable: true,
-            slot: true,
-            formslot: true,
-            dataType: "number",
-            dicUrl: "/api/cyzh-community/residential/list?size=500&name={{key}}",
-            dicFormatter:(res)=>{
-              return res.data.records;//返回字典的层级结构
-            },
-            props: {
-              label: "name",
-              value: "id"
-            },
-            rules: [{
-              required: true,
-              message: "请选择所属区域",
-              trigger: "change"
-            }],
-          },
-          {
-            label: "具体地址",
-            prop: "address",
-            width: 350,
-            search: true,
-            overHidden: true,
-            rules: [{
-              required: true,
-              message: "请输入具体地址",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "设备状态",
-            prop: "deviceStatus",
-            type: "select",
-            dicUrl:"/api/blade-system/dict-biz/dictionary?code=face_device_status",
-            props: {
-              label: 'dictValue',
-              value: 'dictKey'
-            },
-            dataType: "number",
-            display: false,
-            slot: true
-          },
-          {
-            label: "最近心跳",
-            prop: "heartbeatTime"
-          }
-        ]
-      },
-      data: []
-    };
-  },
-  computed: {
-    ...mapGetters(["permission"]),
-    permissionList() {
+  import control from "./comps/control.vue"
+  import funcList from './comps/func-list.vue'
+  import videoList from './comps/video-list.vue'
+  export default {
+    components: {
+      control,
+      funcList,
+      videoList
+    },
+    data() {
       return {
-        addBtn: this.vaildData(this.permission.doordevice_add, false),
-        viewBtn: this.vaildData(this.permission.doordevice_view, false),
-        delBtn: this.vaildData(this.permission.doordevice_delete, false),
-        editBtn: this.vaildData(this.permission.doordevice_edit, false)
-      };
-    },
-    ids() {
-      let ids = [];
-      this.selectionList.forEach(ele => {
-        ids.push(ele.id);
-      });
-      return ids.join(",");
-    }
-  },
-
-  watch: {
-    'form.mapSelect': {
-      handler: function(value) {
-        if (!value){
-          return
-        }else{
-          this.form.longitude = this.form.mapSelect.longitude;
-          this.form.latitude = this.form.mapSelect.latitude;
-        }
-      },
-    }
-  },
 
-  created() {
-    const tenantType = localStorage.getItem("tenantType");
-    if (tenantType == 0){
-      this.findObject(this.option.column, 'residentialId').label = "所属区域";
-      this.findObject(this.option.column, 'residentialId').rules[0].message = "请选择所属区域";
-      // this.option.column[2].label = "所属区域"
-    }else if (tenantType == 1){
-      // this.option.column[2].label = "所属区域"
-      this.findObject(this.option.column, 'residentialId').label = "所属区域";
-      this.findObject(this.option.column, 'residentialId').rules[0].message = "请选择所属区域";
-    }
-  },
-
-  methods: {
-    openDoor(row){
-      remoteOpenDoor(row.id, true).then(res =>{
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-      });
-    },
-    selectCallback(row){
-      this.form.latitude = row.latitude;
-      this.form.longitude = row.longitude;
-      this.form.address = row.address;
-      this.form.residentialId = row.id;
-      this.form.residentialName = row.name;
-    },
-    rowSave(row, done, loading) {
-      add(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        loading();
-        window.console.log(error);
-      });
-    },
-    rowUpdate(row, index, done, loading) {
-      update(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        loading();
-        console.log(error);
-      });
-    },
-    rowDel(row) {
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(row.id);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        });
-    },
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning("请选择至少一条数据");
-        return;
-      }
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(this.ids);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          this.$refs.crud.toggleSelection();
-        });
-    },
-    beforeOpen(done, type) {
-      if (["edit", "view"].includes(type)) {
-        getDetail(this.form.id).then(res => {
-          this.form = res.data.data;
-        });
-      }
-      done();
-    },
-    searchReset() {
-      this.query = {};
-      this.onLoad(this.page);
-    },
-    searchChange(params, done) {
-      this.query = params;
-      this.page.currentPage = 1;
-      this.onLoad(this.page, params);
-      done();
-    },
-    selectionChange(list) {
-      this.selectionList = list;
-    },
-    selectionClear() {
-      this.selectionList = [];
-      this.$refs.crud.toggleSelection();
-    },
-    currentChange(currentPage){
-      this.page.currentPage = currentPage;
-    },
-    sizeChange(pageSize){
-      this.page.pageSize = pageSize;
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query);
-    },
-    onLoad(page, params = {}) {
-      this.loading = true;
-      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-        const data = res.data.data;
-        this.page.total = data.total;
-        this.data = data.records;
-        this.loading = false;
-        this.selectionClear();
-      });
+      };
     }
-  }
-};
+  };
 </script>
 
-<style>
+<style lang="scss" scoped>
+
 </style>

src/views/accesscontrolmng/doordevice1.vue

@@ -0,0 +1,403 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.facedevice_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+      </template>
+      <template slot="menu" slot-scope="{row}">
+        <el-button @click="openDoor(row)" size="small" type="text">远程开门</el-button>
+      </template>
+      <template slot="mapSelectForm" slot-scope="scope">
+        <!-- <avue-map v-model="scope.row.mapSelect"></avue-map> -->
+        <div>
+          <el-button @click="mapVisible = true">选择地址</el-button>
+
+          <el-dialog :append-to-body="true" :close-on-click-modal="false" :modal-append-to-body="false" :visible.sync="mapVisible"
+                     title="编辑地址" width="80%">
+            <!--            <customAvueMap v-if="mapVisible" v-model="scope.row.mapSelect"></customAvueMap>-->
+            <editPolygonMap v-if="mapVisible" :editForm.sync="scope.row" :region.sync="scope.row.address" :latitude.sync="scope.row.latitude" :longitude.sync="scope.row.longitude" :visible.sync="mapVisible"></editPolygonMap>
+          </el-dialog>
+        </div>
+      </template>
+      <template slot="residentialId" slot-scope="scope">{{scope.row.residentialName}}</template>
+      <template slot="residentialIdForm" slot-scope="scope">
+        <select-dialog-residential :id="form.residentialId" :name="form.residentialName" :callback="selectCallback"></select-dialog-residential>
+      </template>
+      <template slot="deviceStatus" slot-scope="{row}">
+        <el-tag v-if="row.deviceStatus === 0" type="info">离线</el-tag>
+        <el-tag v-if="row.deviceStatus === 1" type="success">在线</el-tag>
+        <el-tag v-if="row.deviceStatus === 2" type="danger">异常</el-tag>
+      </template>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+import {getList, getDetail, add, update, remove, remoteOpenDoor} from "../../api/device/doordevice.js";
+import {mapGetters} from "vuex";
+import customAvueMap from "../../components/residential/customAvueMap.vue"
+import editPolygonMap from "../../components/residential/editPolygonMap.vue";
+import SelectDialogResidential from "../../components/select-dialog/select-dialog-residential";
+export default {
+  components:{
+    SelectDialogResidential,
+    customAvueMap,editPolygonMap
+  },
+  data() {
+    return {
+      mapVisible:false,
+      form: {},
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selectionList: [],
+      option: {
+        height:'auto',
+        calcHeight: 60,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: false,
+        delBtn: true,
+        selection: true,
+        dialogClickModal: false,
+        menuWidth:350,
+        column: [
+          {
+            label: "设备名称",
+            prop: "name",
+            search: true,
+            overHidden: true,
+            rules: [{
+              required: true,
+              message: "请输入名称",
+              trigger: "blur"
+            }]
+          },
+          {
+            label:'',
+            prop:'mapSelect',
+            viewDisplay: false,
+            formslot: true,
+            hide: true,
+          },
+          {
+            label: "经度",
+            prop: "longitude",
+            width: 100,
+            overHidden: true,
+            hide:true,
+            rules: [{
+              required: true,
+              message: "请输入经度",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "纬度",
+            prop: "latitude",
+            width: 100,
+            overHidden: true,
+            hide:true,
+            rules: [{
+              required: true,
+              message: "请输入纬度",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设备序列号",
+            prop: "macAddress",
+            width: 200,
+            rules: [{
+              required: true,
+              message: "请输入Mac编码",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设备厂商",
+            prop: "deviceFactory",
+            type: "select",
+            dicUrl: "/api/blade-system/dict-biz/dictionary?code=door_device_factory",
+            props:{
+              label: "dictValue",
+              value: "dictKey"
+            },
+            width: 135,
+            rules: [{
+              required: true,
+              message: "请选择设备厂商",
+              trigger: "blur"
+            }],
+            hide: true
+          },
+          // {
+          //   label: "所属园区",
+          //   prop: "agencyName",
+          //   editDisplay:false,
+          //   addDisplay:false
+          // },
+          {
+            label: "所属区域",
+            prop: "residentialId",
+            dicFlag: true,
+            type: "select",
+            search: true,
+            searchFilterable: true,
+            slot: true,
+            formslot: true,
+            dataType: "number",
+            dicUrl: "/api/cyzh-community/residential/list?size=500&name={{key}}",
+            dicFormatter:(res)=>{
+              return res.data.records;//返回字典的层级结构
+            },
+            props: {
+              label: "name",
+              value: "id"
+            },
+            rules: [{
+              required: true,
+              message: "请选择所属区域",
+              trigger: "change"
+            }],
+          },
+          {
+            label: "具体地址",
+            prop: "address",
+            width: 350,
+            search: true,
+            overHidden: true,
+            rules: [{
+              required: true,
+              message: "请输入具体地址",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设备状态",
+            prop: "deviceStatus",
+            type: "select",
+            dicUrl:"/api/blade-system/dict-biz/dictionary?code=face_device_status",
+            props: {
+              label: 'dictValue',
+              value: 'dictKey'
+            },
+            dataType: "number",
+            display: false,
+            slot: true
+          },
+          {
+            label: "最近心跳",
+            prop: "heartbeatTime"
+          }
+        ]
+      },
+      data: []
+    };
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList() {
+      return {
+        addBtn: this.vaildData(this.permission.doordevice_add, false),
+        viewBtn: this.vaildData(this.permission.doordevice_view, false),
+        delBtn: this.vaildData(this.permission.doordevice_delete, false),
+        editBtn: this.vaildData(this.permission.doordevice_edit, false)
+      };
+    },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    }
+  },
+
+  watch: {
+    'form.mapSelect': {
+      handler: function(value) {
+        if (!value){
+          return
+        }else{
+          this.form.longitude = this.form.mapSelect.longitude;
+          this.form.latitude = this.form.mapSelect.latitude;
+        }
+      },
+    }
+  },
+
+  created() {
+    const tenantType = localStorage.getItem("tenantType");
+    if (tenantType == 0){
+      this.findObject(this.option.column, 'residentialId').label = "所属区域";
+      this.findObject(this.option.column, 'residentialId').rules[0].message = "请选择所属区域";
+      // this.option.column[2].label = "所属区域"
+    }else if (tenantType == 1){
+      // this.option.column[2].label = "所属区域"
+      this.findObject(this.option.column, 'residentialId').label = "所属区域";
+      this.findObject(this.option.column, 'residentialId').rules[0].message = "请选择所属区域";
+    }
+  },
+
+  methods: {
+    openDoor(row){
+      remoteOpenDoor(row.id, true).then(res =>{
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+      });
+    },
+    selectCallback(row){
+      this.form.latitude = row.latitude;
+      this.form.longitude = row.longitude;
+      this.form.address = row.address;
+      this.form.residentialId = row.id;
+      this.form.residentialName = row.name;
+    },
+    rowSave(row, done, loading) {
+      add(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        window.console.log(error);
+      });
+    },
+    rowUpdate(row, index, done, loading) {
+      update(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        console.log(error);
+      });
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        });
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.$refs.crud.toggleSelection();
+        });
+    },
+    beforeOpen(done, type) {
+      if (["edit", "view"].includes(type)) {
+        getDetail(this.form.id).then(res => {
+          this.form = res.data.data;
+        });
+      }
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange(currentPage){
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize){
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    }
+  }
+};
+</script>
+
+<style>
+</style>

src/views/businessmng/agencymng/agency.vue

@@ -7,6 +7,8 @@
         <grid-list></grid-list>
         <!-- 业务管理 -->
         <operation></operation>
+
+
         <div style="display: flex;width: 100%;">
           <!-- 通行记录 -->
           <access-records></access-records>
@@ -20,14 +22,10 @@
           <energy style="word-break: 40%;"></energy>
         </div>
       </el-col>
-
-
       <!-- 右容器 -->
       <el-col :span="6">
         <work-order></work-order>
       </el-col>
-
-
     </el-row>
   </div>
 </template>
@@ -39,7 +37,7 @@
   import accessRecords from './comps/access_records.vue'
   import device from './comps/device.vue'
   import airQuality from './comps/air_quality.vue'
-  import energy from  './comps/energy.vue'
+  import energy from './comps/energy.vue'
   export default {
     components: {
       gridList,

src/views/businessmng/agencymng/comps/air_quality.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page animate__animated animate__faster animate__fadeInUp">
     <more title="空气质量检测"></more>
     <div class="area-box">
       <div class="area">
@@ -35,7 +35,7 @@
 
 <script>
   import * as echarts from 'echarts';
-  import more from "./more.vue"
+  import more from "@/components/more.vue"
   export default {
     components: {
       more

src/views/businessmng/agencymng/comps/device.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page animate__animated animate__faster animate__fadeInUp">
     <more title="设备管理"></more>
     <div class="card">
       <div class="item" style="margin-right: 0;width: 44%;" v-for="(item,index) in list" :key="index">
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-  import more from "./more.vue"
+  import more from "@/components/more.vue"
   export default {
     components: {
       more

src/views/businessmng/agencymng/comps/energy.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="page">
+  <div class="page animate__animated animate__faster animate__fadeInUp">
     <more title="能耗统计"></more>
     <tab></tab>
-    <div class="full">
+    <div style="height: 25rem;margin-top: 1.25rem;width: 100%;">
       <div class="full" id="energyCharts"></div>
     </div>
   </div>
@@ -11,7 +11,7 @@
 <script>
   import tab from "./tab.vue"
   import * as echarts from 'echarts';
-  import more from "./more.vue"
+  import more from "@/components/more.vue"
   export default {
     components: {
       more,

src/views/businessmng/agencymng/comps/grid_list.vue

@@ -1,10 +1,9 @@
 <template>
   <!-- 宫格功能 -->
   <div style="margin: 0.625rem;margin-top: 0;">
-    <div class="my-grid">
+    <div class="my-grid animate__animated animate__faster animate__fadeInDown">
       <div @click="selected(item,index)" :id="'id'+index" class="item" v-for="(item,index) in list" :key="index">
-        <img :src="item.icon" class="animate__animated animate__faster"
-         :class="activedIndex == index ? 'animate__heartBeat': ''">
+        <img :src="item.icon" >
         <label>{{item.name}}</label>
       </div>
     </div>

src/views/businessmng/agencymng/comps/operation.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="background-color: #FFFFFF;height: 300px;margin: 10px;">
+  <div style="background-color: #FFFFFF;height: 300px;margin: 10px;" class="animate__animated animate__faster animate__fadeInLeft">
     <div style="display: flex;width: 100%;height: 100%;">
       <!-- 左布局 -->
       <div style="padding: 1.1rem;width: calc(48% - 10px);">
@@ -40,7 +40,7 @@
 
 <script>
   import * as echarts from 'echarts';
-  import more from "./more.vue"
+  import more from "@/components/more.vue"
   export default {
     components: {
       more

src/views/businessmng/agencymng/comps/tab.vue

@@ -1,11 +1,13 @@
 <template>
-  <div>
+  <div :style="tabStyle">
     <!-- 胶囊标签 -->
     <div style="display: flex;justify-content: center;padding-top: 0.625rem;">
       <div class="tab-container">
-        <div @click="select(index)" v-for="(item,index) in list" :key="index" class="tab"
-          :class="{'actived':activedIndex==item.value,'tab-left':index == 0,'tab-right':index==(list.length - 1)}">
-          <div class="animate__animated animate__faster" :class="activedIndex==item.value?'animate__heartBeat':''">{{item.label}}</div>
+        <div @click="select(item,index)" v-for="(item,index) in list" :key="index" class="tab"
+          :class="{'actived':activedIndex==index,'tab-left':index == 0,'tab-right':index==(list.length - 1)}">
+          <div class="animate__animated animate__faster" :class="activedIndex==index?'animate__heartBeat':''">
+            {{item.label}}
+          </div>
         </div>
       </div>
     </div>
@@ -15,32 +17,58 @@
 <script>
   export default {
     name: '',
+    props: {
+      color: {
+        type: String,
+        default: '#3B8FF4'
+      },
+      width: {
+        type: String,
+        default: '3rem'
+      },
+      height: {
+        type: String,
+        default: '1.75rem'
+      },
+      list: {
+        type: Array,
+        default: () => {
+          return [{
+              label: '水',
+              value: 0
+            },
+            {
+              label: '电',
+              value: 1
+            },
+            {
+              label: '燃气',
+              value: 2
+            },
+            {
+              label: '热能',
+              value: 3
+            }
+          ]
+        }
+      },
+    },
     data() {
       return {
         activedIndex: 0,
-        list: [{
-            label: '水',
-            value: 0
-          },
-          {
-            label: '电',
-            value: 1
-          },
-          {
-            label: '燃气',
-            value: 2
-          },
-          {
-            label: '热能',
-            value: 3
-          }
-        ]
       };
     },
-    methods:{
-      select(index) {
+    computed: {
+      tabStyle: {
+        get() {
+          return `--color:${this.color};--width:${this.width};--height:${this.height}`
+        }
+      }
+    },
+    methods: {
+      select(item, index) {
         this.activedIndex = index
-        this.$emit('click', index)
+        this.$emit('click', item)
       }
     }
   };
@@ -49,30 +77,29 @@
 <style lang="scss" scoped>
   .tab-container {
     cursor: pointer;
-    color: #3B8FF4;
+    color: var(--color);
+    height: var(--height);
+    line-height: var(--height);
     display: flex;
     justify-content: center;
-    height: 28px;
     font-size: 12px;
     overflow: hidden;
-    line-height: 28px;
 
     .tab {
       overflow: hidden;
-      border: 1px solid #3B8FF4;
+      width: var(--width);
+      color: var(--color);
+      border: 1px solid var(--color);
       border-right: none;
-      width: 3rem;
       text-align: center;
       display: flex;
       justify-content: center;
-      color: #3B8FF4;
 
       &:last-child {
-        border-right: 1px solid #3B8FF4;
+        border-right: 1px solid var(--color);
       }
     }
 
-
     .tab-left {
       border-radius: 80px 0 0 80px;
     }
@@ -82,7 +109,7 @@
     }
 
     .actived {
-      background-color: #3B8FF4;
+      background-color: var(--color);
       color: #FFFFFF;
     }
   }

src/views/businessmng/agencymng/comps/work_order.vue

@@ -1,27 +1,17 @@
 <template>
-  <div style="background-color: #FFFFFF;padding: 1rem;">
+  <div style="background-color: #FFFFFF;padding: 1rem;" class="animate__animated animate__faster animate__fadeInRight">
     <more title="工单管理"></more>
     <!-- 胶囊标签 -->
-    <div style="display: flex;justify-content: center;padding-top: 0.625rem;">
-      <div class="tab-container">
-        <div @click="select(0)"  :class="workOrderIndex==0?'actived':''" class="tab tab-left">
-          <div class="animate__animated animate__faster" :class="workOrderIndex==0?'animate__heartBeat':''">设备工单</div>
-        </div>
-        <div @click="select(1)" :class="workOrderIndex==1?'actived':''" class="tab tab-right">
-          <div class="animate__animated animate__faster" :class="workOrderIndex==1?'animate__heartBeat':''">保修工单</div>
-        </div>
-      </div>
-    </div>
+    <tab :list="tabList" width="5rem" height="1.875rem"></tab>
     <!-- 工单列表 -->
-    <div style="padding-top: 0.5rem;">
+    <div style="padding-top: 0.8rem;">
       <div class="card" v-for="(item,index) in 12" :key="index">
         <div class="left">
           <div class="title">电梯一级告警</div>
           <el-tag style="border-radius: 10px;" size="mini">未处理</el-tag>
         </div>
-
         <div class="right">
-          <el-tag style="border-radius: 10px;margin-bottom: 0.4rem;"  size="mini" type="danger">设备告警</el-tag>
+          <el-tag style="border-radius: 10px;margin-bottom: 0.4rem;" size="mini" type="danger">设备告警</el-tag>
           <div style="font-size: 0.75rem;">2021-03-15 22:40</div>
         </div>
       </div>
@@ -31,21 +21,28 @@
 </template>
 
 <script>
-  import more from "./more.vue"
+  import tab from './tab.vue'
+  import more from "@/components/more.vue"
   export default {
-    components:{
+    components: {
+      tab,
       more
     },
     data() {
       return {
-        workOrderIndex: 0
+        tabList: [{
+            label: '设备工单',
+            value: 0
+          },
+          {
+            label: '保修工单',
+            value: 1
+          }
+        ]
       };
     },
     methods: {
-      select(index) {
-        this.workOrderIndex = index
-        this.$emit('click', index)
-      }
+
     }
   };
 </script>
@@ -56,13 +53,13 @@
     background-color: #F5F5F5;
     display: flex;
     justify-content: space-between;
-    margin:15px 5px;
+    margin: 15px 5px;
     padding: 15px;
 
     .left {
       text-align: left;
 
-      .title{
+      .title {
         font-size: 0.8rem;
         font-weight: 800;
         color: #000000;
@@ -73,39 +70,4 @@
       text-align: right;
     }
   }
-
-  .tab-container {
-    cursor: pointer;
-    color: #3B8FF4;
-    display: flex;
-    justify-content: center;
-    width: 160px;
-    height: 30px;
-    font-size: 12px;
-    overflow: hidden;
-    line-height: 30px;
-
-    .tab {
-      overflow: hidden;
-      border: 1px solid #3B8FF4;
-      width: 50%;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      color: #3B8FF4;
-    }
-
-    .tab-left {
-      border-radius: 80px 0 0 80px;
-    }
-
-    .tab-right {
-      border-radius: 0 80px 80px 0;
-    }
-
-    .actived {
-      background-color: #3B8FF4;
-      color: #FFFFFF;
-    }
-  }
 </style>

src/views/guestmng/comps/function_list.vue

@@ -0,0 +1,82 @@
+<template>
+  <!-- 宫格功能 -->
+  <div class="page animate__animated animate__faster animate__fadeInDown">
+    <div class="list">
+      <div @click="select(item,index)" class="item" :style="'background: url('+item.icon+')  no-repeat  center/cover;'"
+        v-for="(item,index) in list" :key="index">
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        activedIndex: 0,
+        list:[
+          {
+            icon:'/img/test/czry.png'
+          },
+          {
+            icon:'/img/test/jrfk.png'
+          },
+          {
+            icon:'/img/test/fwry.png'
+          },
+          {
+            icon:'/img/test/twzc.png'
+          }
+        ]
+      };
+    },
+    methods: {
+      select(item,index){
+        this.$animateCss(id,'animate__pulse')
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    box-sizing: border-box;
+  }
+
+  .bg-img {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+
+  .list {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+
+
+
+    .item {
+      width: 18.8rem;
+      height: 9rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      text-align: center;
+
+      img {
+        width: 3.2rem;
+        height: 3.2rem;
+      }
+
+      label {
+        margin-top: 0.625rem;
+        color: #333333;
+        font-size: 0.75rem;
+      }
+    }
+
+  }
+</style>

src/views/guestmng/comps/today_visitor.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInRight">
+    <more title="今日访客"></more>
+    <div class="card" v-for="(item,index) in 10" :key="index">
+      <div class="card-left">
+        <div class="center">
+          <img src="/img/test/face.png">
+        </div>
+        <div class="data">
+          <div>张**</div>
+          <div>体温36.2℃</div>
+        </div>
+      </div>
+      <div class="card-center">
+        23:00-12:00
+      </div>
+      <div class="card-right">
+        逗留:56:00
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    background-color: #FFFFFF;
+    padding: 1.2rem;
+    box-sizing: border-box;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f5f5f5;
+    padding: 0.68rem 1.4rem;
+    margin-top: 1rem;
+
+    .card-center,
+    .card-right {
+      color: #333333;
+      font-size: 0.875rem;
+    }
+
+    .card-left {
+      display: flex;
+
+      img {
+        width: 3rem;
+        height: 3rem;
+        border-radius: 50%;
+        margin-right: 0.625rem;
+      }
+
+      .data {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        flex-direction: column;
+        text-align: left;
+
+        div:first-child {
+          color: #333333;
+          font-weight: 800;
+          font-size: 0.93rem;
+        }
+
+        div:last-child {
+          margin-top: 0.16rem;
+          color: #999999;
+          font-weight: 400;
+          font-size: 0.8rem;
+        }
+      }
+    }
+  }
+</style>

src/views/guestmng/guestrecordmng.vue

@@ -1,459 +1,44 @@
 <template>
-  <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :permission="permissionList"
-               :before-open="beforeOpen"
-               v-model="form"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @on-load="onLoad">
-      <template slot="menuLeft">
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.guestrecord_delete"
-                   @click="handleDelete">删 除
-        </el-button>
-      </template>
-      <template slot="checkState" slot-scope="scope">
-        <el-tag v-if="scope.row.checkState===0" type="info">待审核</el-tag>
-        <el-tag v-if="scope.row.checkState===1" type="success">审核通过</el-tag>
-        <el-tag v-if="scope.row.checkState===2" type="danger">审核不通过</el-tag>
-      </template>
-      <template slot="registerSource" slot-scope="{row}">
-        <el-tag v-if="row.registerSource===1">小程序</el-tag>
-        <el-tag v-if="row.registerSource===2">管理后台</el-tag>
-        <el-tag v-if="row.registerSource===3">访客机</el-tag>
-      </template>
-      <template slot="menu" slot-scope="{row}">
-        <el-button size="mini" type="text" icon="el-icon-setting">
-          <el-dropdown>
-            <span class="el-dropdown-link">
-              更多<i class="el-icon-arrow-down el-icon--right"></i>
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item style="color: limegreen" type="text" @click.native="pushFace(row)" icon="el-icon-sort-down">人脸下发</el-dropdown-item>
-              <el-dropdown-item style="color: red" type="text" @click.native="deleteFace(row)" icon="el-icon-sort-up">人脸禁用</el-dropdown-item>
-            </el-dropdown-menu>
-
-          </el-dropdown>
-        </el-button>
-      </template>
-    </avue-crud>
-  </basic-container>
+  <div class="page">
+    <el-row>
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0;">
+          <functionList></functionList>
+        </div>
+      </el-col>
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <today-visitor></today-visitor>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-  import {getList, getDetail, add, update, remove, pushGuestFace, deleteGuestFace} from "@/api/estate/guestrecord";
-  import {mapGetters} from "vuex";
-
+  import functionList from "./comps/function_list.vue"
+  import todayVisitor from "./comps/today_visitor.vue"
   export default {
+    components: {
+      functionList,
+      todayVisitor
+    },
     data() {
       return {
-        form: {},
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        selectionList: [],
-        option: {
-          menuWidth: 300,
-          height:'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          addBtn:true,
-          delBtn:true,
-          viewBtn: true,
-          selection: true,
-          dialogClickModal: false,
-          column: [
-            {
-              label: "预约开始时间",
-              prop: "beginTime",
-              type: "datetime",
-              width: 130,
-              format: "yyyy-MM-dd HH:mm:ss",
-              valueFormat: "yyyy-MM-dd HH:mm:ss"
-            },
-            {
-              label: "预约结束时间",
-              prop: "endTime",
-              type: "datetime",
-              width: 130,
-              format: "yyyy-MM-dd HH:mm:ss",
-              valueFormat: "yyyy-MM-dd HH:mm:ss"
-            },
-            {
-              label: "登记来源",
-              prop: "registerSource",
-              slot: true,
-              editDisplay: false,
-              addDisplay:false,
-            },
-            {
-              label: "访客姓名",
-              prop: "guestName",
-              search: true,
-              rules: [{
-                required: true,
-                message: "请输入访客名称",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "访客手机号",
-              prop: "guestTel",
-              labelWidth: 100,
-              rules: [{
-                required: true,
-                message: "请输入访客手机号",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "证件号码",
-              prop: "guestIdcard",
-              hide: true,
-              rules: [{
-                required: false,
-                message: "请输入证件号码",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "拜访园区",
-              prop: "agencyId",
-              cascaderItem: ['enterpriseId'],
-              type: "select",
-              remote: true,
-              hide: true,
-              search: true,
-              viewDisplay: false,
-              dicUrl: "/api/cyzh-community/agency/list",
-              dicFormatter:(res)=>{
-                return res.data.records;//返回字典的层级结构
-              },
-              props: {
-                label: "name",
-                value: "id"
-              },
-              rules: [{
-                required: true,
-                message: "请选择拜访园区",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "拜访企业",
-              prop: "enterpriseId",
-              type: "select",
-              search: true,
-              hide: true,
-              viewDisplay: false,
-              dicUrl: "/api/cyzh-enterprise/enterprise/list?agencyId={{key}}",
-              dicFormatter:(res)=>{
-                return res.data.records;//返回字典的层级结构
-              },
-              // dicFlag: false,
-              filterable: true,
-              props: {
-                label: "enterpriseName",
-                value: "id"
-              },
-              rules: [{
-                required: true,
-                message: "请选择拜访企业",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "拜访园区",
-              prop: "agencyName",
-              editDisplay: false,
-              addDisplay: false,
-            },
-            {
-              label: "拜访企业",
-              prop: "enterpriseName",
-              editDisplay: false,
-              addDisplay: false,
-            },
-            {
-              label: "审核状态",
-              prop: "checkState",
-              slot: true,
-              type:'select',
-              addDisplay: false,
-              dicData:[
-                {
-                  label:'待审核',
-                  value:0,
-                  color:'red'
-                },{
-                  label:'审核通过',
-                  value:1
-                },{
-                  label:'审核不通过',
-                  value:2
-                }
-              ]
-            },
-            {
-              label: "审核意见",
-              prop: "opinion",
-              hide: true,
-              editDisplay: false,
-              addDisplay: false
-            },
-            {
-              label: "访客事由",
-              prop: "guestReason",
-              type: 'textarea',
-              rules: [{
-                required: false,
-                message: "请输入访问缘由",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "访客人脸",
-              prop: "imageUri",
-              type: "upload",
-              width: 150,
-              listType: 'picture-img',
-              propsHttp: {
-                res: "data",
-                url: "link"
-              },
-              action: "/api/blade-resource/oss/endpoint/put-file",
-              rules: [{
-                required: false,
-                message: "请上传访客人脸",
-                trigger: "blur"
-              }]
-            },
-          ]
-        },
-        data: []
+
       };
-    },
-    computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          addBtn: this.vaildData(this.permission.guestrecord_add, false),
-          viewBtn: this.vaildData(this.permission.guestrecord_view, false),
-          delBtn: this.vaildData(this.permission.guestrecord_delete, false),
-          editBtn: this.vaildData(this.permission.guestrecord_edit, false)
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      }
-    },
-    created() {
-      const tenantType = localStorage.getItem("tenantType");
-      if (tenantType == 0){
-        let findObject1 = this.findObject(this.option.column, "agencyName");
-        let findObject2 = this.findObject(this.option.column, "residentialName");
-        let findObject3 = this.findObject(this.option.column, "buildingName");
-        let findObject4 = this.findObject(this.option.column, "unitName");
-        let findObject5 = this.findObject(this.option.column, "floorName");
-        let findObject6 = this.findObject(this.option.column, "roomName");
-        let findObject7 = this.findObject(this.option.column, "enterpriseName");
-        findObject1.label = "拜访园区";
-        findObject2.label = "拜访小区";
-        findObject3.hide = false;findObject3.viewDisplay = true;
-        findObject4.hide = false;findObject4.viewDisplay = true;
-        findObject5.hide = false;findObject5.viewDisplay = true;
-        findObject6.hide = false;findObject6.viewDisplay = true;
-        findObject7.hide = true;
-      }else if (tenantType == 1){
-        let findObject1 = this.findObject(this.option.column, "agencyName");
-        let findObject2 = this.findObject(this.option.column, "residentialName");
-        let findObject3 = this.findObject(this.option.column, "enterpriseName");
-        let findObject4 = this.findObject(this.option.column, "buildingName");
-        let findObject5 = this.findObject(this.option.column, "unitName");
-        let findObject6 = this.findObject(this.option.column, "floorName");
-        let findObject7 = this.findObject(this.option.column, "roomName");
-        findObject1.label = "拜访园区";
-        findObject2.label = "拜访区域";
-        findObject3.hide = false;
-        findObject4.hide = true;findObject4.viewDisplay = false;
-        findObject5.hide = true;findObject5.viewDisplay = false;
-        findObject6.hide = true;findObject6.viewDisplay = false;
-        findObject7.hide = true;findObject7.viewDisplay = false;
-      }
-    },
-    methods: {
-      pushFace(row){
-        //下发人脸到测温系统和设备
-        pushGuestFace(row).then(res => {
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        })
-      },
-      deleteFace(row){
-        this.$confirm("确定禁用人脸吗?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return deleteGuestFace(row);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      rowSave(row, done, loading) {
-        row.agencyName = row.$agencyId;
-        row.enterpriseName = row.$enterpriseId;
-        row.checkState = 1;
-        row.registerSource = 2;
-        add(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          window.console.log(error);
-        });
-      },
-      rowUpdate(row, index, done, loading) {
-        row.agencyName = row.$agencyId;
-        row.enterpriseName = row.$enterpriseId;
-        row.registerSource = 2;
-        update(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          console.log(error);
-        });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
-          getDetail(this.form.id).then(res => {
-            this.form = res.data.data;
-          });
-        }
-        done();
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      currentChange(currentPage){
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize){
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.loading = true;
-        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
-        });
-      }
     }
   };
 </script>
 
-<style>
+<style lang="scss">
+  .page {
+    background-color: #F5F5F5;
+    height: 100%;
+    margin-bottom: 1.9rem;
+  }
+
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
 </style>

src/views/guestmng/guestrecordmng1.vue

@@ -0,0 +1,459 @@
+<template>
+  <basic-container>
+    <avue-crud :option="option"
+               :table-loading="loading"
+               :data="data"
+               :page.sync="page"
+               :permission="permissionList"
+               :before-open="beforeOpen"
+               v-model="form"
+               ref="crud"
+               @row-update="rowUpdate"
+               @row-save="rowSave"
+               @row-del="rowDel"
+               @search-change="searchChange"
+               @search-reset="searchReset"
+               @selection-change="selectionChange"
+               @current-change="currentChange"
+               @size-change="sizeChange"
+               @refresh-change="refreshChange"
+               @on-load="onLoad">
+      <template slot="menuLeft">
+        <el-button type="danger"
+                   size="small"
+                   icon="el-icon-delete"
+                   plain
+                   v-if="permission.guestrecord_delete"
+                   @click="handleDelete">删 除
+        </el-button>
+      </template>
+      <template slot="checkState" slot-scope="scope">
+        <el-tag v-if="scope.row.checkState===0" type="info">待审核</el-tag>
+        <el-tag v-if="scope.row.checkState===1" type="success">审核通过</el-tag>
+        <el-tag v-if="scope.row.checkState===2" type="danger">审核不通过</el-tag>
+      </template>
+      <template slot="registerSource" slot-scope="{row}">
+        <el-tag v-if="row.registerSource===1">小程序</el-tag>
+        <el-tag v-if="row.registerSource===2">管理后台</el-tag>
+        <el-tag v-if="row.registerSource===3">访客机</el-tag>
+      </template>
+      <template slot="menu" slot-scope="{row}">
+        <el-button size="mini" type="text" icon="el-icon-setting">
+          <el-dropdown>
+            <span class="el-dropdown-link">
+              更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item style="color: limegreen" type="text" @click.native="pushFace(row)" icon="el-icon-sort-down">人脸下发</el-dropdown-item>
+              <el-dropdown-item style="color: red" type="text" @click.native="deleteFace(row)" icon="el-icon-sort-up">人脸禁用</el-dropdown-item>
+            </el-dropdown-menu>
+
+          </el-dropdown>
+        </el-button>
+      </template>
+    </avue-crud>
+  </basic-container>
+</template>
+
+<script>
+  import {getList, getDetail, add, update, remove, pushGuestFace, deleteGuestFace} from "@/api/estate/guestrecord";
+  import {mapGetters} from "vuex";
+
+  export default {
+    data() {
+      return {
+        form: {},
+        query: {},
+        loading: true,
+        page: {
+          pageSize: 10,
+          currentPage: 1,
+          total: 0
+        },
+        selectionList: [],
+        option: {
+          menuWidth: 300,
+          height:'auto',
+          calcHeight: 30,
+          tip: false,
+          searchShow: true,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          addBtn:true,
+          delBtn:true,
+          viewBtn: true,
+          selection: true,
+          dialogClickModal: false,
+          column: [
+            {
+              label: "预约开始时间",
+              prop: "beginTime",
+              type: "datetime",
+              width: 130,
+              format: "yyyy-MM-dd HH:mm:ss",
+              valueFormat: "yyyy-MM-dd HH:mm:ss"
+            },
+            {
+              label: "预约结束时间",
+              prop: "endTime",
+              type: "datetime",
+              width: 130,
+              format: "yyyy-MM-dd HH:mm:ss",
+              valueFormat: "yyyy-MM-dd HH:mm:ss"
+            },
+            {
+              label: "登记来源",
+              prop: "registerSource",
+              slot: true,
+              editDisplay: false,
+              addDisplay:false,
+            },
+            {
+              label: "访客姓名",
+              prop: "guestName",
+              search: true,
+              rules: [{
+                required: true,
+                message: "请输入访客名称",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "访客手机号",
+              prop: "guestTel",
+              labelWidth: 100,
+              rules: [{
+                required: true,
+                message: "请输入访客手机号",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "证件号码",
+              prop: "guestIdcard",
+              hide: true,
+              rules: [{
+                required: false,
+                message: "请输入证件号码",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "拜访园区",
+              prop: "agencyId",
+              cascaderItem: ['enterpriseId'],
+              type: "select",
+              remote: true,
+              hide: true,
+              search: true,
+              viewDisplay: false,
+              dicUrl: "/api/cyzh-community/agency/list",
+              dicFormatter:(res)=>{
+                return res.data.records;//返回字典的层级结构
+              },
+              props: {
+                label: "name",
+                value: "id"
+              },
+              rules: [{
+                required: true,
+                message: "请选择拜访园区",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "拜访企业",
+              prop: "enterpriseId",
+              type: "select",
+              search: true,
+              hide: true,
+              viewDisplay: false,
+              dicUrl: "/api/cyzh-enterprise/enterprise/list?agencyId={{key}}",
+              dicFormatter:(res)=>{
+                return res.data.records;//返回字典的层级结构
+              },
+              // dicFlag: false,
+              filterable: true,
+              props: {
+                label: "enterpriseName",
+                value: "id"
+              },
+              rules: [{
+                required: true,
+                message: "请选择拜访企业",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "拜访园区",
+              prop: "agencyName",
+              editDisplay: false,
+              addDisplay: false,
+            },
+            {
+              label: "拜访企业",
+              prop: "enterpriseName",
+              editDisplay: false,
+              addDisplay: false,
+            },
+            {
+              label: "审核状态",
+              prop: "checkState",
+              slot: true,
+              type:'select',
+              addDisplay: false,
+              dicData:[
+                {
+                  label:'待审核',
+                  value:0,
+                  color:'red'
+                },{
+                  label:'审核通过',
+                  value:1
+                },{
+                  label:'审核不通过',
+                  value:2
+                }
+              ]
+            },
+            {
+              label: "审核意见",
+              prop: "opinion",
+              hide: true,
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "访客事由",
+              prop: "guestReason",
+              type: 'textarea',
+              rules: [{
+                required: false,
+                message: "请输入访问缘由",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "访客人脸",
+              prop: "imageUri",
+              type: "upload",
+              width: 150,
+              listType: 'picture-img',
+              propsHttp: {
+                res: "data",
+                url: "link"
+              },
+              action: "/api/blade-resource/oss/endpoint/put-file",
+              rules: [{
+                required: false,
+                message: "请上传访客人脸",
+                trigger: "blur"
+              }]
+            },
+          ]
+        },
+        data: []
+      };
+    },
+    computed: {
+      ...mapGetters(["permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.guestrecord_add, false),
+          viewBtn: this.vaildData(this.permission.guestrecord_view, false),
+          delBtn: this.vaildData(this.permission.guestrecord_delete, false),
+          editBtn: this.vaildData(this.permission.guestrecord_edit, false)
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    created() {
+      const tenantType = localStorage.getItem("tenantType");
+      if (tenantType == 0){
+        let findObject1 = this.findObject(this.option.column, "agencyName");
+        let findObject2 = this.findObject(this.option.column, "residentialName");
+        let findObject3 = this.findObject(this.option.column, "buildingName");
+        let findObject4 = this.findObject(this.option.column, "unitName");
+        let findObject5 = this.findObject(this.option.column, "floorName");
+        let findObject6 = this.findObject(this.option.column, "roomName");
+        let findObject7 = this.findObject(this.option.column, "enterpriseName");
+        findObject1.label = "拜访园区";
+        findObject2.label = "拜访小区";
+        findObject3.hide = false;findObject3.viewDisplay = true;
+        findObject4.hide = false;findObject4.viewDisplay = true;
+        findObject5.hide = false;findObject5.viewDisplay = true;
+        findObject6.hide = false;findObject6.viewDisplay = true;
+        findObject7.hide = true;
+      }else if (tenantType == 1){
+        let findObject1 = this.findObject(this.option.column, "agencyName");
+        let findObject2 = this.findObject(this.option.column, "residentialName");
+        let findObject3 = this.findObject(this.option.column, "enterpriseName");
+        let findObject4 = this.findObject(this.option.column, "buildingName");
+        let findObject5 = this.findObject(this.option.column, "unitName");
+        let findObject6 = this.findObject(this.option.column, "floorName");
+        let findObject7 = this.findObject(this.option.column, "roomName");
+        findObject1.label = "拜访园区";
+        findObject2.label = "拜访区域";
+        findObject3.hide = false;
+        findObject4.hide = true;findObject4.viewDisplay = false;
+        findObject5.hide = true;findObject5.viewDisplay = false;
+        findObject6.hide = true;findObject6.viewDisplay = false;
+        findObject7.hide = true;findObject7.viewDisplay = false;
+      }
+    },
+    methods: {
+      pushFace(row){
+        //下发人脸到测温系统和设备
+        pushGuestFace(row).then(res => {
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        })
+      },
+      deleteFace(row){
+        this.$confirm("确定禁用人脸吗?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return deleteGuestFace(row);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      rowSave(row, done, loading) {
+        row.agencyName = row.$agencyId;
+        row.enterpriseName = row.$enterpriseId;
+        row.checkState = 1;
+        row.registerSource = 2;
+        add(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          window.console.log(error);
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        row.agencyName = row.$agencyId;
+        row.enterpriseName = row.$enterpriseId;
+        row.registerSource = 2;
+        update(row).then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          loading();
+          console.log(error);
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoad(this.page);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDetail(this.form.id).then(res => {
+            this.form = res.data.data;
+          });
+        }
+        done();
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoad(this.page);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.page.currentPage = 1;
+        this.onLoad(this.page, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      currentChange(currentPage){
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize){
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      onLoad(page, params = {}) {
+        this.loading = true;
+        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+          const data = res.data.data;
+          this.page.total = data.total;
+          this.data = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      }
+    }
+  };
+</script>
+
+<style>
+</style>