设备列表

src/components/device-door/comps/device-door-crud.vue

@@ -0,0 +1,429 @@
+<template>
+  <div>
+    <div style="display:flex;margin:6px;flex-wrap: wrap;overflow: hidden">
+      <el-tag size="mini" style="margin:4px" class="animate__animated animate__fadeInLeft animate__faster" @close="close(item)" closable v-for="(item,index) in selectionList" :key="index">{{item.name}}</el-tag>
+    </div>
+    <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">
+        <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%">
+            <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="warning">离线</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>
+  </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";
+  import {deepClone} from "@/util/util.js"
+  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: false,
+          searchMenuSpan: 6,
+          border: true,
+          index: true,
+          viewBtn: false,
+          delBtn: false,
+          selection: true,
+          reserveSelection: true,
+          menu: false,
+          addBtn: false,
+          align: 'center',
+          menuAlign: 'center',
+          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",
+              hide: true,
+              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: "所属区域",
+              hide: true,
+              prop: "residentialId",
+              dicFlag: true,
+              type: "select",
+              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: "residentialName",
+              width: 160,
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "所属楼栋",
+              prop: "buildingName",
+              width: 100,
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "所属单元",
+              prop: "unitName",
+              width: 100,
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "所属楼层",
+              width: 100,
+              prop: "floorName",
+              editDisplay: false,
+              addDisplay: false
+            },
+            {
+              label: "安装位置",
+              prop: "address",
+              width: 160,
+              overHidden: true,
+              rules: [{
+                required: true,
+                message: "请输入安装位置",
+                trigger: "blur"
+              }]
+            },
+            {
+              label: "最近心跳",
+              hide: true,
+              width: 130,
+              prop: "heartbeatTime"
+            },
+            {
+              label: "设备状态",
+              prop: "deviceStatus",
+              type: "select",
+              width: 100,
+              dicUrl: "/api/blade-system/dict-biz/dictionary?code=face_device_status",
+              props: {
+                label: 'dictValue',
+                value: 'dictKey'
+              },
+              dataType: "number",
+              display: false,
+              slot: true
+            }
+
+          ]
+        },
+        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;
+          }
+        },
+      }
+    },
+    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();
+      },
+      close(data){
+        let arr=[]
+        this.selectionList.forEach((item,index)=>{
+          if (data.id==item.id) {
+            arr.push(item)
+            this.selectionList.splice(index,1)
+          }
+        })
+        console.log(this.selectionList);
+        this.$refs.crud.toggleSelection(arr);
+      },
+      currentChange(currentPage) {
+        this.page.currentPage = currentPage;
+      },
+      sizeChange(pageSize) {
+        this.page.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoad(this.page, this.query);
+      },
+      fetchList(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;
+        })
+      },
+      onLoad(page, params = {}) {
+        this.fetchList(page, params)
+      }
+    }
+  };
+</script>
+
+<style>
+</style>

src/components/device-door/device-door.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="page">
+    <el-dialog title="设备列表" :visible.sync="deviceShow" center :append-to-body="true" :modal-append-to-body="true" width="55%">
+      <div class="dialog">
+        <!-- 区域begin -->
+        <div class="classify" style="display:flex">
+          <div class="center classify_title" >区域：</div>
+          <el-button size="mini" @click="clickResidential(-1)" style="border-radius: 4px;margin-right:10px"
+            :type="residentialActiveId==-1?'primary':''">全部
+          </el-button>
+
+          <el-button-group style="display: flex">
+            <el-button @click="clickResidential(item.id)" v-for="(item,index) in residentialList" :key="index"
+              size="mini" style="border-radius: 0px" :type="residentialActiveId==item.id?'primary':''">{{item.name}}
+            </el-button>
+          </el-button-group>
+        </div>
+        <!-- 区域end -->
+
+        <!-- 楼栋begin -->
+        <div class="classify" v-if="$isNotEmpty(buildingList)">
+          <span class="center classify_title">楼栋：</span>
+
+          <el-button size="mini" @click="clickBuilding(-1)" style="border-radius: 4px;margin-right:10px"
+            :type="buildingActiveId==-1?'primary':''">全部
+          </el-button>
+
+          <el-button-group>
+            <el-button @click="clickBuilding(item.id)" v-for="(item,index) in buildingList" :key="index" size="mini"
+              style="border-radius: 0px" :type="buildingActiveId==item.id?'primary':''">{{item.name}}
+            </el-button>
+          </el-button-group>
+        </div>
+        <!-- 楼栋end -->
+
+        <!-- 单元begin -->
+        <div class="classify" v-if="$isNotEmpty(unitList)">
+          <span class="center classify_title">单元：</span>
+
+          <el-button size="mini" @click="clickUnit(-1)" style="border-radius: 4px;margin-right:10px"
+            :type="unitActiveId==-1?'primary':''">全部
+          </el-button>
+
+          <el-button-group>
+            <el-button @click="clickUnit(item.id)" v-for="(item,index) in unitList" :key="index" size="mini"
+              style="border-radius: 0px" :type="unitActiveId==item.id?'primary':''">{{item.name}}
+            </el-button>
+          </el-button-group>
+        </div>
+        <!-- 单元end -->
+
+        <!-- 楼层begin -->
+        <div class="classify" v-if="$isNotEmpty(floorList)">
+          <div class="center classify_title">楼层：</div>
+
+            <el-button size="mini" @click="clickFloor(-1)" style="border-radius: 4px;margin-right:10px;"
+              :type="floorActiveId==-1?'primary':''">全部
+            </el-button>
+
+          <el-button-group>
+            <el-button @click="clickFloor(item.id)" v-for="(item,index) in floorList" :key="index" size="mini"
+              style="border-radius: 0px" :type="floorActiveId==item.id?'primary':''">{{item.name}}
+            </el-button>
+          </el-button-group>
+        </div>
+        <!-- 楼层end -->
+
+        <!-- 设备 -->
+        <device-door-crud ref="deviceDoorCrud"></device-door-crud>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import {
+    getList as getResidentialList
+  } from "@/api/community/residential.js"
+  import {
+    getList as getBuildingList
+  } from "@/api/community/building.js"
+  import {
+    getList as getUnitlList
+  } from "@/api/community/unit.js"
+  import {
+    getList as getFloorList
+  } from "@/api/community/floor.js"
+  import {
+    getList as getDoordeviceList
+  } from "@/api/device/doordevice.js"
+  import {
+    deepClone
+  } from "@/util/util.js"
+  import deviceDoorCrud from "./comps/device-door-crud.vue"
+  export default {
+    name: '',
+    components: {
+      deviceDoorCrud
+    },
+    data() {
+      return {
+        current:1,
+        size:10,
+
+        deviceShow: true,
+        //区域
+        residentialActiveId: -1,
+        residentialList: [],
+        // 楼栋
+        buildingActiveId: -1,
+        buildingList: [],
+        //单元
+        unitActiveId: -1,
+        unitList: [],
+        //楼层
+        floorActiveId: -1,
+        floorList: []
+      };
+    },
+    created() {
+      this.fetchResidentialList()
+    },
+    watch: {
+      dataChange: {
+        handler(params) {
+          Object.keys(params).forEach(item => {
+            if (params[item] == -1) {
+              delete params[item]
+            }
+          })
+          let page = {
+            pageSize: this.size,
+            currentPage: this.current,
+          }
+          this.$refs.deviceDoorCrud.fetchList(page, params)
+        },
+        deep: true,
+      }
+    },
+    computed: {
+      dataChange() {
+        return {
+          residentialId: this.residentialActiveId,
+          buildingId: this.buildingActiveId,
+          unitId: this.unitActiveId,
+          floorId: this.floorActiveId
+        }
+      },
+    },
+    methods: {
+      //获取区域
+      async fetchResidentialList() {
+        let res = await getResidentialList(this.current, 5)
+        let records = res.data.data.records
+        this.residentialList = records
+      },
+      //获取楼栋
+      async fetchBuildingList(params) {
+        let res = await getBuildingList(this.current, this.size, params)
+        let records = res.data.data.records
+        this.buildingList = records
+      },
+      //获取单元
+      async fetchUnitlList(params) {
+        let res = await getUnitlList(this.current,this.size, params)
+        let records = res.data.data.records
+        this.unitList = records
+      },
+      //获取楼层
+      async fetchFloorlList(params) {
+        let res = await getFloorList(this.current,500, params)
+        let records = res.data.data.records
+        this.floorList= records
+      },
+      //点击区域
+      clickResidential(id) {
+        if (this.residentialActiveId == id) {
+          return
+        }
+        this.residentialActiveId = id
+        this.resetData1()
+        let params = {
+          residentialId: id
+        }
+        this.fetchBuildingList(params)
+      },
+      //点击楼栋
+      clickBuilding(id) {
+        if (this.buildingActiveId == id) {
+          return
+        }
+        this.buildingActiveId = id
+        this.resetData2()
+        let params = {
+          residentialId: this.residentialActiveId,
+          buildingId: id
+        }
+        this.fetchUnitlList(params)
+      },
+      //点击单元
+      clickUnit(id) {
+        if (this.unitActiveId == id) {
+          return
+        }
+        this.unitActiveId = id
+        this.resetData3()
+        let params = {
+          residentialId: this.residentialActiveId,
+          buildingId: this.buildingActiveId,
+          unitId: id,
+        }
+        this.fetchFloorlList(params)
+      },
+      //点击楼层
+      clickFloor(id) {
+        if (this.floorActiveId == id) {
+          return
+        }
+        this.floorActiveId = id
+      },
+      // 重置数据
+      resetData1() {
+        this.buildingActiveId = -1
+        this.buildingList = []
+        this.unitActiveId = -1
+        this.unitList = []
+        this.floorActiveId = -1
+        this.floorList = []
+      },
+      resetData2() {
+        this.unitActiveId = -1
+        this.unitList = []
+        this.floorActiveId = -1
+        this.floorList = []
+      },
+      resetData3() {
+        this.floorActiveId = -1
+        this.floorList = []
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  * {
+    box-sizing: border-box;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .dialog {
+    margin-top: -10px;
+    background-color: #fff;
+  }
+
+  .classify {
+    flex-wrap: nowrap;
+    overflow: scroll;
+    display: flex;
+    padding: 5px;
+  }
+
+  .classify_title {
+    width:50px;
+    margin-right: 20px;
+    font-weight: 600;
+    color: #333333;
+    font-size: 14px;
+  }
+</style>

src/components/device-list.vue

@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <div class="cation-content">
+      <div style="height:50px"></div> <!-- 可以删除 -->
+      <div class="cation-middle">
+        <dl class="cation-list">
+          <dt>分类</dt>
+          <dd>
+            <a href="#" rel="" name="mode" class="all on">全部</a>
+            <a href="#" rel="服装鞋包" name="mode" class="default">服装鞋包</a>
+            <a href="#" rel="家电数码" name="mode" class="default">家电数码</a>
+            <a href="#" rel="英文外贸" name="mode" class="default">英文外贸</a>
+            <a href="#" rel="综合通用" name="mode" class="default">综合通用</a>
+            <a href="#" rel="食品保健" name="mode" class="default">食品保健</a>
+            <a href="#" rel="团购模板" name="mode" class="default">团购模板</a>
+            <a href="#" rel="美容护肤" name="mode" class="default">美容护肤</a>
+            <a href="#" rel="珠宝饰品" name="mode" class="default">珠宝饰品</a>
+            <a href="#" rel="鲜花礼品" name="mode" class="default">鲜花礼品</a>
+            <a href="#" rel="童装母婴" name="mode" class="default">童装母婴</a>
+          </dd>
+        </dl>
+        <dl class="cation-list">
+          <dt>主题</dt>
+          <dd>
+            <a href="#" rel="" name="theme" class="all on">全部</a>
+            <a href="#" rel="古典雅致" name="theme" class="default">古典雅致</a>
+            <a href="#" rel="可爱温馨" name="theme" class="default">可爱温馨</a>
+            <a href="#" rel="时尚简约" name="theme" class="default">时尚简约</a>
+            <a href="#" rel="潮流酷炫" name="theme" class="default">潮流酷炫</a>
+            <a href="#" rel="节日庆典" name="theme" class="default">节日庆典</a>
+          </dd>
+        </dl>
+        <dl class="cation-list">
+          <dt>色系</dt>
+          <dd>
+            <a href="#" rel="" name="system" class="all on">全部</a>
+            <a href="#" rel="多彩" name="system" class="default">多彩</a>
+            <a href="#" rel="橙色" name="system" class="default">橙色</a>
+            <a href="#" rel="粉色" name="system" class="default">粉色</a>
+            <a href="#" rel="红色" name="system" class="default">红色</a>
+            <a href="#" rel="绿色" name="system" class="default">绿色</a>
+            <a href="#" rel="蓝色" name="system" class="default">蓝色</a>
+            <a href="#" rel="黑色" name="system" class="default">黑色</a>
+          </dd>
+        </dl>
+        <dl class="cation-list">
+          <dt>价格</dt>
+          <dd>
+            <a href="#" rel="" name="price" class="all on">全部</a>
+            <a href="#" rel="2000 - 6000" name="price" class="default">2000 - 6000</a>
+            <a href="#" rel="6000 - 10000" name="price" class="default">6000 - 10000 </a>
+            <a href="#" rel="10000 - 14000" name="price" class="default">10000 - 14000 </a>
+            <a href="#" rel="18000 - 22000" name="price" class="default">18000 - 22000</a>
+            <a href="#" rel="26000 - 30000" name="price" class="default">26000 - 30000</a>
+          </dd>
+        </dl>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  /* 公共样式表css */
+  html,
+  body {
+    color: #333;
+    margin: 0;
+    height: 100%;
+  }
+
+  * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  img {
+    border: 0;
+  }
+
+  body {
+    background-color: #E8E8E8;
+    color: #666;
+  }
+
+  html,
+  body,
+  div,
+  dl,
+  dt,
+  dd,
+  ol,
+  ul,
+  li,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  blockquote,
+  pre,
+  button,
+  fieldset,
+  form,
+  input,
+  legend,
+  textarea,
+  th,
+  td {
+    margin: 0;
+    padding: 0;
+  }
+
+  a {
+    text-decoration: none;
+    color: #08acee;
+  }
+
+  button {
+    outline: 0;
+  }
+
+  img {
+    border: 0;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    outline: none;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  a {
+    color: #666;
+  }
+
+  a:hover {
+    color: #eee;
+  }
+
+  .clearfix::after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+  }
+
+  .clearfix {}
+
+  /* 必要布局样式css */
+  .cation-content {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 0;
+  }
+
+  .cation-middle {
+    line-height: 48px;
+    background: #fff;
+    padding: 10px 20px 10px 30px;
+    font-size: 14px;
+  }
+
+  .cation-list {
+    overflow: hidden;
+  }
+
+  .cation-list dt {
+    float: left;
+    width: 64px;
+    font-weight: 700;
+    line-height: 48px;
+    position: relative;
+    color: #333;
+  }
+
+  :before,
+  :after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  .cation-list dt:after {
+    content: "";
+    position: absolute;
+    right: 12px;
+    top: 22px;
+    border: 1px solid #333;
+    border-width: 0 1px 1px 0;
+    width: 4px;
+    height: 4px;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+  }
+
+  .cation-list dd {
+    border-bottom: 1px dotted #e0e0e0;
+    margin-left: 64px;
+    overflow: hidden;
+  }
+
+  .cation-list dd a {
+    color: #8d8d91;
+    font-size: 14px;
+    line-height: 14px;
+    height: 14px;
+    float: left;
+    border-right: 1px solid #e0e0e0;
+    padding: 0 18px;
+    margin: 17px 0;
+  }
+
+  .cation-list dd a.on,
+  .cation-list a:hover {
+    color: #fc8080;
+  }
+
+  .cation-list dd a:last-child {
+    border-right: 0 none;
+  }
+
+  .cation-list:last-of-type dd {
+    border-bottom: 0 none;
+  }
+</style>

src/views/dashboard/parkingmng/parkingmng1.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="body">
-    <el-row>
-      <!-- 左容器 -->
-      <el-col :span="18">
-        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0rem;">
-          <paking-layout></paking-layout>
-          <paking-capture></paking-capture>
-          <paking-charts></paking-charts>
-        </div>
-      </el-col>
-      <!-- 右容器 -->
-      <el-col :span="6">
-        <parking-statistics></parking-statistics>
-        <paking-data></paking-data>
-      </el-col>
-    </el-row>
-
-    <div style="height: 1.25rem;"></div>
-  </div>
-</template>
-
-<script>
-  import pakingCharts from "./comps/paking-charts.vue"
-  import pakingCapture from "./comps/paking-capture.vue"
-  import pakingData from './comps/parking-data.vue'
-  import parkingStatistics from "./comps/parking-statistics.vue"
-  import pakingLayout from "./comps/paking-layout.vue"
-  export default {
-    components: {
-      pakingCharts,
-      pakingCapture,
-      pakingData,
-      pakingLayout,
-      parkingStatistics
-    },
-    data() {
-      return {
-
-      };
-    }
-  };
-</script>
-
-<style>
-  .avue-main {
-    background-color: #F5F5F5 !important;
-  }
-</style>
-
-<style lang="scss" scoped>
-  .body {
-    background-color: #F5F5F5;
-    height: 100%;
-    margin-bottom: 1.9rem;
-  }
-</style>

src/views/dashboard/smartoperationcenter/smartoperationcenter - 副本.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="body">
+    <el-row>
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0;">
+
+          <grid-list></grid-list>
+
+          <agency-info></agency-info>
+
+          <div class="my-layout">
+            <div class="layout">
+              <access-records></access-records>
+            </div>
+            <div class="layout">
+              <device></device>
+            </div>
+          </div>
+
+          <div class="my-layout">
+            <div class="layout">
+              <air-quality></air-quality>
+            </div>
+            <div class="layout">
+              <energy></energy>
+            </div>
+          </div>
+
+        </div>
+      </el-col>
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <work-order></work-order>
+      </el-col>
+    </el-row>
+
+    <div style="height: 1.25rem;"></div>
+  </div>
+</template>
+
+<script>
+  import agencyInfo from "./comps/agency_info.vue"
+  import gridList from "./comps/grid_list.vue"
+  import workOrder from './comps/work_order.vue'
+  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'
+  export default {
+    components: {
+      agencyInfo,
+      gridList,
+      workOrder,
+      accessRecords,
+      device,
+      airQuality,
+      energy
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style>
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
+</style>
+
+<style lang="scss" scoped>
+  .body {
+    box-sizing: border-box;
+    background-color: #F5F5F5;
+    height: 100%;
+  }
+
+  .my-layout {
+    margin-top: 0.625rem;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    .layout {
+      width: calc(50% - 5px);
+    }
+  }
+</style>

src/views/dashboard/smartoperationcenter/smartoperationcenter.vue

@@ -1,91 +1,23 @@
 <template>
-  <div class="body">
-    <el-row>
-      <!-- 左容器 -->
-      <el-col :span="18">
-        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0;">
-
-          <grid-list></grid-list>
-
-          <agency-info></agency-info>
-
-          <div class="my-layout">
-            <div class="layout">
-              <access-records></access-records>
-            </div>
-            <div class="layout">
-              <device></device>
-            </div>
-          </div>
-
-          <div class="my-layout">
-            <div class="layout">
-              <air-quality></air-quality>
-            </div>
-            <div class="layout">
-              <energy></energy>
-            </div>
-          </div>
-
-        </div>
-      </el-col>
-      <!-- 右容器 -->
-      <el-col :span="6">
-        <work-order></work-order>
-      </el-col>
-    </el-row>
-
-    <div style="height: 1.25rem;"></div>
+  <div style="">
+    <device-door></device-door>
   </div>
 </template>
 
 <script>
-  import agencyInfo from "./comps/agency_info.vue"
-  import gridList from "./comps/grid_list.vue"
-  import workOrder from './comps/work_order.vue'
-  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'
-  export default {
-    components: {
-      agencyInfo,
-      gridList,
-      workOrder,
-      accessRecords,
-      device,
-      airQuality,
-      energy
-    },
-    data() {
-      return {
-
-      };
-    }
-  };
-</script>
-
-<style>
-  .avue-main {
-    background-color: #F5F5F5 !important;
+  import deviceDoor from "@/components/device-door/device-door.vue"
+export default {
+  components:{
+    deviceDoor
+  },
+  data() {
+    return {
+
+    };
   }
-</style>
+};
+</script>
 
 <style lang="scss" scoped>
-  .body {
-    box-sizing: border-box;
-    background-color: #F5F5F5;
-    height: 100%;
-  }
-
-  .my-layout {
-    margin-top: 0.625rem;
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
 
-    .layout {
-      width: calc(50% - 5px);
-    }
-  }
 </style>

src/views/smartaccess/comps/face-card.vue

@@ -147,8 +147,8 @@
     </div>
 
 
-    <div class="pagination" v-if="total>size">
-      <el-pagination background layout="prev, pager, next" :page-size="size" :total="total"
+    <div class="pagination" v-if="pageCount>=current">
+      <el-pagination background layout="prev, pager, next" :page-size="size" :page-count="pageCount"
         @current-change="currentChange">
       </el-pagination>
     </div>
@@ -215,7 +215,7 @@
 
         current: 1,
         size: 17,
-        total: 0,
+        pageCount: 0,
         list: [],
         dataList: [{
             label: '待审核',
@@ -458,7 +458,7 @@
         }
         data = (await getSnapList(this.current, this.size, params)).data.data
         this.list = data.records
-        this.total = data.total
+        this.pageCount = data.pages
         this.loading = false
       },
       //获取服务人员列表
@@ -476,7 +476,7 @@
           data = (await getServerList(this.current, this.size, params)).data.data
         }
         this.list = data.records
-        this.total = data.total
+        this.pageCount = data.pages
         this.loading = false
       },
       //获取访客人员列表
@@ -495,7 +495,7 @@
           data = (await getGuestList(this.current, this.size, params)).data.data
         }
         this.list = data.records
-        this.total = data.total
+        this.pageCount = data.pages
         this.loading = false
       },
       //获取常驻人员数据列表
@@ -514,7 +514,7 @@
           data = (await getStaffList(this.current, this.size, params)).data.data
         }
         this.list = data.records
-        this.total = data.total
+        this.pageCount = data.pages
         this.loading = false
       }
     }