智慧安防-安防人员

src/components/common/coreData.vue

@@ -1,4 +1,6 @@
 <script>
+import {requireImg} from "@/utils/requireImg";
+
 export default {
   data() {
     return {
@@ -12,6 +14,7 @@ export default {
     this.resize();
   },
   methods: {
+    requireImg,
     resize() {
       let clientWidth = Math.floor(100 / this.dataList.length) - 2 + "%";
       this.itemWidth = clientWidth;
@@ -40,21 +43,30 @@ export default {
           backgroundColor: ele.isHighLight ? '#e7f5fc' : '',
         }"
       >
-        <div class="coreData-item-title">{{ ele.title }}</div>
-        <template v-if="ele.type === 1"> </template>
+        <div class="coreData-item-title">
+          <span>{{ ele.title }}</span>
+          <div v-if="ele.type === 1 || ele.showStar" style="display: inline-block;background-color: transparent;float: right;margin-right: 2%">
+            <a-avatar :size="28" :src="requireImg('common/star.png')"></a-avatar>
+          </div>
+        </div>
+        <template v-if="ele.type === 1">
+          <div class="coreData-high-content">
+            <span>{{ ele.content }}</span>
+          </div>
+        </template>
         <template v-else>
           <div class="coreData-item-num" v-html="ele.num"></div>
           <div class="coreData-item-unit" v-html="ele.unit"></div>
           <div class="coreData-item-history">
             <div class="coreData-item-historyDesc">
-              <span v-if="ele.historyNum === 0">{{ ele.historyDesc }}持平</span>
-              <span v-else-if="ele.historyNum > 0"
-                >{{ ele.historyDesc }}上升</span
-              >
-              <span v-else-if="ele.historyNum < 0"
-                >{{ ele.historyDesc }}下降</span
-              >
-              <span v-else></span>
+              <span>{{ ele.historyDesc }}</span>
+              <span v-if="!ele.hideTrendDesc">
+                <span v-if="ele.historyNum === 0">持平</span>
+                <span v-else-if="ele.historyNum > 0">上升</span>
+                <span v-else-if="ele.historyNum < 0">下降</span>
+                <span v-else></span>
+              </span>
+
             </div>
             <div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
               {{ Math.abs(ele.historyNum) }}%
@@ -78,8 +90,21 @@ export default {
     background-color: #f7fbff;
     padding: 8px 8px 8px 1.5%;
     border-radius: 5px;
+    .coreData-high-content {
+      margin-top: 4%;
+      width: 60%;
+      color: #4D4D4D;
+      font-size: 15px;
+      max-height: 60px;
+      overflow: hidden;
+      font-weight: bold;
+      letter-spacing: 1px;
+      word-wrap:break-word;
+      word-break:break-all;
+    }
     .coreData-item-title {
       line-height: 30px;
+      color: #B2B2B2;
     }
     .coreData-item-num {
       display: inline-block;
@@ -94,6 +119,7 @@ export default {
     }
     .coreData-item-historyDesc {
       display: inline-block;
+      color: #B2B2B2;
     }
     .coreData-item-historyNum {
       margin-left: 5px;

src/components/dashboard/message/dashboardMsgList.vue

@@ -22,7 +22,7 @@ export default {
   <a-list class="dashboardMsgList" item-layout="horizontal" :data-source="data" :split="false" ref="dashboardMsgList">
     <a-list-item slot="renderItem" slot-scope="item, index">
       <a-row style="width: 100%" justify="start">
-        <a-col :span="5">
+        <a-col :span="6">
           <span v-if="item.isRead">【已阅】</span>
           <span v-else>【待阅】</span>
 
@@ -35,7 +35,7 @@ export default {
         <!--  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>-->
         <!--  <span v-else-if="item.type==3" style="color: #F1934E">③</span>-->
         <!--</a-col>-->
-        <a-col :span="18">
+        <a-col :span="17">
           <div class="msg-content" :style="{width: contentWidth}">
             <span class="msg-content-span" :style="{width: contentWidth}">{{item.msg}}</span>
           </div>

src/components/dashboard/more/space/DataSituation.vue

@@ -86,16 +86,19 @@ export default {
   created() {
   },
   mounted() {
-    let width = document.getElementsByClassName("dataSituation-canvas-border")[0].clientWidth;
-    this.circleHeight = Number(width);
-    let circleWidth = document.getElementsByClassName("dataSituation-canvas-circle")[0].clientWidth;
-    this.circleBgHeight = Number(circleWidth)
-    let canvasWidth = document.getElementsByClassName("dataSituation-canvas")[0].clientWidth;
-    this.canvasHeight = Number(canvasWidth)
-    this.$forceUpdate()
     this.$nextTick(()=>{
+      let width = document.getElementsByClassName("dataSituation-canvas-border")[0].clientWidth;
+      this.circleHeight = Number(width);
+      let canvasWidth = document.getElementsByClassName("dataSituation-canvas")[0].clientWidth;
+      this.canvasHeight = Number(canvasWidth)
+      let circleWidth = document.getElementsByClassName("dataSituation-canvas-circle")[0].clientWidth;
+      this.circleBgHeight = Number(circleWidth)
       this.circleBg = this.colors[this.color].circle
-      this.initChart(this.percent)
+      this.$forceUpdate()
+      let app = this;
+      setTimeout(()=>{
+        app.initChart(this.percent)
+      },50)
     })
 
   },
@@ -121,7 +124,7 @@ export default {
             fontWeight: 'normal',
             align: 'center',
             baseline: 'middle',
-            position: ['50%', '55%']
+            position: ['50%', '50%']
           },
           itemStyle: {
             opacity: 1,
@@ -161,20 +164,16 @@ export default {
     color: #B2B2B2;
   }
   .dataSituation-canvas-border {
-    width: 85%;
+    width: 75%;
     margin: 5% auto;
     position: relative;
     .dataSituation-canvas {
-      width: 75%;
       margin: 0 auto;
-      position: absolute;
-      top: 4%;
-      left: 12%;
     }
     .dataSituation-canvas-circle {
-      width: 82%;
+      width: 100%;
       margin: 0 auto;
-      //padding: 5px;
+      position: absolute;
       border-radius: 50%;
       background-size: 100% 100%;
       animation: roate 3s infinite linear;

src/components/home/ContainerAside.vue

@@ -60,7 +60,7 @@ export default {
         @click="handleClick"
     >
       <template v-for="item in menuList">
-        <a-menu-item  class="menuItem" :key="item.path" :route="item.key" v-if="!item.children">
+        <a-menu-item  class="menuItem" :key="item.path" :route="item.key" v-if="item.meta.hideChild || !item.children">
         <span class="anticon" style="vertical-align: text-top">
           <a-avatar class="function-avatar" shape="square" :size="20" :src="requireImg(item.icon)"></a-avatar>
         </span>

src/components/security/alarm/securityAlarm.vue

@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {}
+</script>

src/components/security/alarm/securityAlarmMap.vue

@@ -1,11 +1,40 @@
 <template>
-
+  <div class="securityAlarmMap">
+    <Card title="地图模式">
+      <div class="securityAlarmMap-query">
+        <a-select v-model="floor">
+          <a-select-option value="1">1F</a-select-option>
+          <a-select-option value="2">2F</a-select-option>
+          <a-select-option value="3">3F</a-select-option>
+          <a-select-option value="4">4F</a-select-option>
+        </a-select>
+      </div>
+    </Card>
+  </div>
 </template>
 
 <script>
-export default {}
+import Card from "@/components/common/card.vue";
+export default {
+  data() {
+    return {
+      floor: 0,
+    }
+  },
+  components: {
+    Card
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
 </script>
 
 <style lang="less" scoped>
-
+.securityAlarmMap {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/security/person/components/securityPersonDuty.vue

@@ -0,0 +1,197 @@
+<script>
+export default {
+  data() {
+    return {
+      frontPeople: [
+        {
+          id: 1,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+        {
+          id: 2,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+        {
+          id: 3,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+        {
+          id: 4,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+      ],
+      securityPeople: [
+        {
+          id: 1,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+        {
+          id: 2,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+        {
+          id: 3,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+        {
+          id: 4,
+          name: '刘玉英',
+          workNum: '31313131',
+          telNum: '18611111111',
+          workArea: '一层大厅前台',
+          img: '',
+        },
+      ]
+    }
+  },
+  components: {},
+  mounted() {
+  },
+  methods: {
+    callback(val) {
+
+    },
+    onSearch() {
+
+    },
+    openMore() {
+      this.$router.push({path: '/security/person/more'})
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="security-person-duty">
+    <a-tabs default-active-key="1" @change="callback">
+      <a-tab-pane key="1" tab="前台人员" force-render>
+        <div class="security-person-duty-content">
+          <div class="security-person-duty-item" v-for="p in frontPeople" :key="p.id">
+            <div class="security-person-duty-item-img">
+              <img width="90%" height="90%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"  />
+            </div>
+            <div class="security-person-duty-item-desc">
+              <div class="security-person-duty-item-desc-text">姓名：{{ p.name }}</div>
+              <div class="security-person-duty-item-desc-text">工号：{{ p.workNum }}</div>
+              <div class="security-person-duty-item-desc-text">联系电话：{{ p.telNum }}</div>
+              <div class="security-person-duty-item-desc-text">工作区域：{{ p.workArea }}</div>
+            </div>
+          </div>
+
+          <div style="position: absolute;bottom: 0;background-color: white;height: 30px;width: 100%">
+            <a-button type="primary" size="small" style="float: right;right: 15px" @click="openMore">更多</a-button>
+          </div>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="安保人员" force-render>
+        <div class="security-person-duty-item" v-for="p in frontPeople" :key="p.id">
+          <div class="security-person-duty-item-img">
+            <img width="90%" height="90%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"  />
+          </div>
+          <div class="security-person-duty-item-desc">
+            <div class="security-person-duty-item-desc-text">姓名：{{ p.name }}</div>
+            <div class="security-person-duty-item-desc-text">工号：{{ p.workNum }}</div>
+            <div class="security-person-duty-item-desc-text">联系电话：{{ p.telNum }}</div>
+            <div class="security-person-duty-item-desc-text">工作区域：{{ p.workArea }}</div>
+          </div>
+        </div>
+      </a-tab-pane>
+      <template #tabBarExtraContent>
+        <a-input-search placeholder="姓名" style="width: 140px" @search="onSearch" />
+      </template>
+    </a-tabs>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+</style>
+
+<style lang="less">
+.security-person-duty {
+  padding: 0 15px;
+  .security-person-duty-content {
+    border: 1px solid #e2e2e2;
+    padding-top: 8px;
+    height: 600px;
+    padding-bottom: 35px;
+    overflow-y: auto;
+  }
+  .security-person-duty-item {
+    width: 90%;
+    height: 160px;
+    border: 1px solid #e2e2e2;
+    padding-top: 2%;
+    padding-left: 5%;
+    margin: 0 auto 8px;
+    border-radius: 12px;
+
+  }
+  .security-person-duty-item-img {
+    display: inline-block;
+    vertical-align: top;
+    width: 40%;
+    height: 150px;
+  }
+  .security-person-duty-item-desc {
+    display: inline-block;
+    vertical-align: top;
+    width: 59%;
+    height: 150px;
+    padding-left: 5%;
+    padding-top: 2%;
+    font-weight: bold;
+    .security-person-duty-item-desc-text {
+      line-height: 30px;
+    }
+  }
+
+
+
+
+  .ant-tabs-ink-bar {
+    visibility: hidden;
+  }
+
+  .ant-tabs-nav {
+    color: #B3B3B3;
+    margin-right: 5px !important;
+  }
+
+  .ant-tabs-nav .ant-tabs-tab {
+    margin: 0;
+  }
+
+  .ant-tabs-nav .ant-tabs-tab-active {
+    color: #333333;
+  }
+}
+</style>

src/components/security/person/components/securityPersonExistChart.vue

@@ -0,0 +1,103 @@
+<script>
+export default {
+  data() {
+    return {
+
+    }
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let defaultOption = {
+        legend: {
+          data: [
+            '人数',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '1%', //默认10%
+          bottom: '20%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时', '16时', '18时', '20时', '22时']
+        },
+        yAxis: [
+          {
+            //name: '人数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [0, 0, 0, 0]
+            },
+          },
+        ],
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            height: 16,
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '人数',
+            data: [35, 71, 51, 32, 28, 66, 42, 42, 87, 34, 88, 45],
+            type: 'line',
+            stack: 'a',
+            yAxisIndex:0,
+            smooth: true,
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            itemStyle: {
+              color: '#62CC97'
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+        ]
+      };
+      //Object.assign(defaultOption, this.option)
+      chart.setOption(defaultOption)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+</style>

src/components/security/person/components/securityPersonGuestChart.vue

@@ -0,0 +1,101 @@
+<template>
+  <div style="width: 100%" class="myChart" ref="myChart" :style="{height: height+'px'}">
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.init()
+    })
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        legend: {
+          data: [
+            '自由人员',
+            '其他人员',
+          ]
+        },
+        grid: {
+          left: '0%', //默认10%
+          right: '0%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['0时', '2时', '4时', '6时', '8时', '10时', '12时']
+        },
+        yAxis: [
+          {
+            name: '人数',
+            type: 'value',
+            position: 'left',
+            axisLine: {
+              show: true,
+            },
+            nameTextStyle: {
+              padding: [10, 0, 10, 0]
+            },
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          textStyle: {
+            color: '#fff',
+            align: 'left',
+            fontSize: 14
+          },
+          axisLine: {//x坐标轴轴线
+            show: true,
+            lineStyle: {//x坐标轴轴线样式
+              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
+            }
+          },
+          backgroundColor: 'rgba(0,0,0,0.8)',
+        },
+        series: [
+          {
+            name: '自由人员',
+            data: [233, 209, 296, 148, 233, 395, 329],
+            type: 'bar',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+          {
+            name: '其他人员',
+            data: [31, 36, 18, 21, 73, 12, 59],
+            type: 'bar',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/components/security/person/securityPerson.vue

@@ -1,11 +1,113 @@
-<template>
+<script>
+import CoreData from "@/components/common/coreData.vue";
+import Card from "@/components/common/card.vue";
+import SecurityPersonDuty from "@/components/security/person/components/securityPersonDuty.vue";
+import SecurityPersonExistChart from "@/components/security/person/components/securityPersonExistChart.vue";
+import SecurityPersonGuestChart from "@/components/security/person/components/securityPersonGuestChart.vue";
 
-</template>
+export default {
+  data() {
+    return {
+      chartShow: false,
+      coreData: [
+        {
+          title: '当天入楼人数',
+          num: 1300,
+          historyDesc: '环比',
+          historyNum: 0.4
+        },
+        {
+          title: '当前楼内人数',
+          num: 1500,
+          historyDesc: '环比',
+          historyNum: 0.4
+        },
+        {
+          title: '今日访客预约数',
+          num: 200,
+          historyDesc: '占比',
+          hideTrendDesc: true,
+          historyNum: 60
+        },
+        {
+          title: '实际到访人数',
+          num: 40,
+          historyDesc: '环比',
+          historyNum: 0.4
+        },
+        {
+          type: 1,
+          title: '值得关注',
+          content: '防控疫情，缩减访客预约'
+        },
+      ]
+    }
+  },
+  components: {
+    Card,
+    CoreData,
+    SecurityPersonDuty,
+    SecurityPersonExistChart,
+    SecurityPersonGuestChart,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.chartShow = true;
+    })
+  },
+  methods: {
 
-<script>
-export default {}
+  }
+}
 </script>
 
-<style lang="less" scoped>
+<template>
+  <div class="iot-security-person" >
+    <div v-show="$route.matched.length<=3">
+      <a-row>
+        <a-col>
+          <Card title="核心指标">
+            <CoreData :data-list="coreData"></CoreData>
+          </Card>
+        </a-col>
+      </a-row>
+      <a-row >
+        <a-col :span="8">
+          <Card title="今日值班情况">
+            <SecurityPersonDuty></SecurityPersonDuty>
+          </Card>
+        </a-col>
+        <a-col :span="16">
+          <div class="iot-security-person-exist">
+            <Card title="保有量">
+              <SecurityPersonExistChart v-if="chartShow" :height="300"></SecurityPersonExistChart>
+            </Card>
+          </div>
+          <div class="iot-security-person-traffic">
+            <Card title="大楼客流量">
+              <SecurityPersonGuestChart v-if="chartShow" :height="300"></SecurityPersonGuestChart>
+            </Card>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+
+    <router-view v-show="$route.matched.length>3" />
+  </div>
+</template>
 
+<style lang="less" scoped>
+.iot-security-person {
+  width: 100%;
+  .iot-security-person-exist {
+    width: 100%;
+    padding: 0 2%;
+    margin-right: 15px;
+  }
+  .iot-security-person-traffic {
+    width: 100%;
+    padding: 0 2%;
+    margin-right: 15px;
+  }
+}
 </style>

src/components/security/person/securityPersonMore.vue

@@ -0,0 +1,163 @@
+<script>
+import TimeRange from "@/components/common/timeRange.vue";
+
+export default {
+  components: {TimeRange},
+  data() {
+    return {
+      showDetail: false,
+      currRecord: {},
+      formData: {},
+      tableData: [{
+        id: 1,
+        name: '123'
+      }],
+      columns: [
+        {
+          title: '图片',
+          dataIndex: "image",
+          key: "image",
+          align: 'center',
+        },
+        {
+          title: '姓名',
+          dataIndex: "name",
+          key: "name",
+          align: 'center',
+        },
+        {
+          title: '人员类型',
+          dataIndex: "type",
+          key: "type",
+          align: 'center',
+        },
+        {
+          title: '工作区域',
+          dataIndex: "area",
+          key: "area",
+          align: 'center',
+        },
+        {
+          title: '值班时段',
+          dataIndex: "duty",
+          key: "duty",
+          align: 'center',
+        },
+        {
+          title: '操作',
+          dataIndex: "operation",
+          key: "operation",
+          width: 120,
+          align: 'center',
+          scopedSlots: { customRender: 'operation' },
+        },
+      ]
+    }
+  },
+  methods: {
+    viewDetail(record) {
+      this.currRecord = JSON.parse(JSON.stringify(record));
+      this.showDetail = true;
+
+    },
+    handleCancel() {
+      this.currRecord = {};
+      this.showDetail = false;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="security-person-more">
+    <div class="security-person-more-query">
+      <a-form-model :model="formData" layout="inline">
+        <a-form-model-item label="人员类型">
+          <a-select v-model="formData.type" placeholder="人员类型" style="width: 130px">
+            <a-select-option value="front">前台人员</a-select-option>
+            <a-select-option value="security">安防人员</a-select-option>
+          </a-select>
+        </a-form-model-item>
+        <a-form-model-item label="值班时段">
+          <TimeRange></TimeRange>
+        </a-form-model-item>
+        <a-form-model-item>
+          <a-button type="primary">重置</a-button>
+          <a-button type="primary">查询</a-button>
+        </a-form-model-item>
+      </a-form-model>
+    </div>
+    <div class="security-person-more-list">
+      <a-table
+          :rowKey="
+      (record, index) => {
+        return index;
+      }
+    "
+          :columns="columns"
+          :data-source="tableData"
+          :pagination="true"
+      >
+        <template #operation="text, record" >
+          <a-button type="link" @click="viewDetail(record)">查看详情</a-button>
+        </template>
+      </a-table>
+    </div>
+
+
+
+    <a-modal class="securityPersonMoreDetail" v-if="showDetail"
+             :visible="true"
+             :width="600"
+             :footer="null"
+             @cancel="handleCancel"
+    >
+      <div>人员详情</div>
+      <a-divider />
+
+      <div style="width: 100%;height: 100%">
+        <div style="width: 40%;display: inline-block">
+          <img width="100%" height="100%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+        </div>
+        <div style="width: 60%;display: inline-block;vertical-align: top">
+          <a-descriptions :column="1" size="small">
+            <a-descriptions-item label="姓名">
+              刘玉英
+            </a-descriptions-item>
+            <a-descriptions-item label="性别">
+              女
+            </a-descriptions-item>
+            <a-descriptions-item label="工号">
+              31313131
+            </a-descriptions-item>
+            <a-descriptions-item label="工作类型">
+              前台人员
+            </a-descriptions-item>
+            <a-descriptions-item label="联系电话">
+              18611111111
+            </a-descriptions-item>
+            <a-descriptions-item label="工作区域">
+              一层大厅前台
+            </a-descriptions-item>
+            <a-descriptions-item label="入职日期">
+              2022年3月1日
+            </a-descriptions-item>
+            <a-descriptions-item label="今日工作时段">
+              上午8:00-12:00 下午13::30-17:30
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.security-person-more {
+  width: 100%;
+  height: auto;
+  .security-person-more-list {
+    margin-top: 15px;
+  }
+}
+</style>

src/router/index.js

@@ -167,13 +167,22 @@ const router = new VueRouter({
             {
               path: '/security/person',
               name: 'securityPerson',
-              meta: {breadcrumb: '安防人员'},
+              meta: {breadcrumb: '安防人员', hideChild: true},
               component: () => import('@/components/security/person/securityPerson.vue'),
+              children: [
+                {
+                  path: '/security/person/more',
+                  name: 'securityPersonMore',
+                  meta: {breadcrumb: '更多'},
+                  component: () => import('@/components/security/person/securityPersonMore.vue'),
+                }
+              ]
             },
             {
               path: '/security/alarm',
               name: 'securityAlarm',
               meta: {breadcrumb: '安消联动'},
+              component: () => import('@/components/security/alarm/securityAlarm.vue'),
               children: [
                 {
                   path: '/security/alarm/map',

src/style/custom.less

@@ -6,9 +6,9 @@
 
 // 菜单颜色
 @menu-dark-color: #000;
-@menu-dark-bg: #d7e7f4;
+@menu-dark-bg: #fff;
 @menu-dark-arrow-color: #000;
-@menu-dark-submenu-bg: #d7e7f4;
+@menu-dark-submenu-bg: #fff;
 @menu-dark-highlight-color: #000;
 @menu-dark-item-active-bg: @primary-color;
 @menu-dark-selected-item-icon-color: white;