智慧安防

src/assets/svg/IconCamera.vue

@@ -1,6 +1,6 @@
 <template>
   <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="24" cy="19" r="14" :stroke="color&&stroke!==''?color:'#2ea8e6'" stroke-width="4"
+    <circle cx="24" cy="19" r="14" :stroke="color&&color!==''?color:'#2ea8e6'" stroke-width="4"
             stroke-linecap="round" stroke-linejoin="round"/>
     <circle cx="24" cy="19" r="6" :fill="color&&color!==''?color:'#2ea8e6'" :stroke="color&&color!==''?color:'#2ea8e6'" stroke-width="4"
             stroke-linecap="round"

src/components/common/card.vue

@@ -23,13 +23,12 @@ export default {
 
 <style lang="less" scoped>
 .ioc-card {
+  border-radius: 20px;
   .card_title {
     padding: 10px 0px 10px 15px;
-    //height: 20px;
-    //line-height: 20px;
     font-size: 16px;
-    font-weight: bold;
-    //border-left: 8px solid #98d4f3;
+    font-family: PingFangSC-Bold,serif;
+    color: #333333;
   }
 }
 

src/components/common/coreData.vue

@@ -72,7 +72,7 @@ export default {
 
             </div>
             <div class="coreData-item-historyNum" v-if="!isNaN(ele.historyNum)">
-              {{ Math.abs(ele.historyNum) }}%
+              <span :style="{color: ele.historyNum>0?'red':ele.historyNum<0?'#39E681':''}">{{ Math.abs(ele.historyNum) }}%</span>
             </div>
           </div>
         </template>
@@ -95,7 +95,7 @@ export default {
     border-radius: 5px;
     .coreData-high-content {
       margin-top: 4%;
-      width: 60%;
+      width: 75%;
       color: #4D4D4D;
       font-size: 15px;
       max-height: 60px;
@@ -127,7 +127,6 @@ export default {
     .coreData-item-historyNum {
       margin-left: 5px;
       display: inline-block;
-      color: red;
     }
   }
 }

src/components/dashboard/Dashboard.vue

@@ -87,6 +87,9 @@ export default {
   padding: 0 15px 15px;
   background-color: #f0f2f5;
   overflow-y: auto;
+  div {
+    border-radius: 4px;
+  }
   .dashboard-popFunc {
     margin-right: 15px;
     margin-top: 12px;

src/components/dashboard/message/dashboardMessageCard.vue

@@ -72,6 +72,8 @@ export default {
   }
   .ant-tabs-nav .ant-tabs-tab {
     margin: 0;
+    padding-left: 0 !important;
+    padding-right: 20%;
   }
   .ant-tabs-nav .ant-tabs-tab-active {
     color: #333333;

src/components/dashboard/message/dashboardMsgList.vue

@@ -10,11 +10,9 @@ export default {
   },
   mounted() {
     let width = this.$refs.dashboardMsgList.$el.clientWidth
-    this.contentWidth = width*0.7+'px'
+    this.contentWidth = width * 0.7 + 'px'
   },
-  methods: {
-
-  }
+  methods: {}
 }
 </script>
 
@@ -22,24 +20,36 @@ 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="6">
+        <div style="width: 100%">
           <span v-if="item.isRead">【已阅】</span>
           <span v-else>【待阅】</span>
 
-          <span v-if="item.type==1" style="color: #5495F1">①</span>
-          <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="1">-->
+          <span class="msg-warn" v-if="item.type==1" style="color: #5495F1">①</span>
+          <span class="msg-warn" v-else-if="item.type==2" style="color: #3BC5B0">②</span>
+          <span class="msg-warn" v-else-if="item.type==3" style="color: #F1934E">③</span>
+          <span class="msg-warn" v-else ></span>
+
+          <span class="msg-content-span" >{{ item.msg }}</span>
+        </div>
+
+        <!--<a-col :span="6">-->
+        <!--  <span v-if="item.isRead">【已阅】</span>-->
+        <!--  <span v-else>【待阅】</span>-->
+
         <!--  <span v-if="item.type==1" style="color: #5495F1">①</span>-->
         <!--  <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="17">
-          <div class="msg-content" :style="{width: contentWidth}">
-            <span class="msg-content-span" :style="{width: contentWidth}">{{item.msg}}</span>
-          </div>
-        </a-col>
+        <!--&lt;!&ndash;<a-col :span="1">&ndash;&gt;-->
+        <!--&lt;!&ndash;  <span v-if="item.type==1" style="color: #5495F1">①</span>&ndash;&gt;-->
+        <!--&lt;!&ndash;  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>&ndash;&gt;-->
+        <!--&lt;!&ndash;  <span v-else-if="item.type==3" style="color: #F1934E">③</span>&ndash;&gt;-->
+        <!--&lt;!&ndash;</a-col>&ndash;&gt;-->
+        <!--<a-col :span="17">-->
+        <!--  <div class="msg-content" :style="{width: contentWidth}">-->
+
+        <!--</div>-->
+        <!--</a-col>-->
       </a-row>
       <!--<div class="msg-read">-->
       <!--  -->
@@ -61,25 +71,33 @@ export default {
     line-height: 30px;
     width: 100%;
   }
+
   .msg-read {
     display: inline-block;
     width: 120px !important;
     flex-direction: row;
   }
+
   .msg-type {
     display: inline-block;
     width: 20px;
     flex-direction: row;
     text-align: left;
   }
-  .msg-content {
-    .msg-content-span {
-      vertical-align: top;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: inline-block;
-    }
+
+  .msg-warn {
+    display: inline-block;
+    width: 20px;
+    text-align: left;
+  }
+
+  .msg-content-span {
+    display: inline-block;
+    width: 70%;
+    vertical-align: top;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 </style>

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

@@ -111,7 +111,7 @@ export default {
           type: 'liquidFill',
           data: [num],
           color: [primaryColor],
-          radius: '80%',
+          radius: '75%',
           animationDuration: 800,
           animationDurationUpdate: 500,
           amplitude: '5%',

src/components/dashboard/portrait/dashboardPortrait.vue

@@ -53,7 +53,7 @@ export default {
   <div class="dashboardPortrait">
     <Card title="统计画像">
       <div style="width: 97%;margin: 0 auto">
-        <a-divider style="margin: 10px 0;padding: 0;"></a-divider>
+        <a-divider style="margin: 0 0 10px;padding: 0;"></a-divider>
       </div>
       <div class="dashboardPortrait-select">
         <a-checkable-tag v-model="tagCheck.person" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('person')">

src/components/dashboard/portrait/person/personTrendChart.vue

@@ -9,8 +9,11 @@ export default {
     height: Number,
   },
   mounted() {
+    let app = this;
     this.$nextTick(()=>{
-      this.initChart()
+      setTimeout(()=>{
+        app.initChart()
+      },50)
     })
   },
   methods: {

src/components/dashboard/portrait/personPortrait.vue

@@ -7,38 +7,37 @@ export default {
       coreData: [
         {
           type: 0,
-          title: '月总用水量(m³)',
+          title: '进入大楼(人)',
           num: 2000,
           historyDesc: '同比',
-          historyNum: '0.4'
+          historyNum: 0.4
         },
         {
           type: 0,
-          title: '今日用水总量(m³)',
+          title: '离开大楼(人)',
           num: 200,
           historyDesc: '同比',
-          historyNum: '0.4'
+          historyNum: -0.4
         },
         {
           type: 0,
-          title: '今日用水趋势',
-          num: 30,
-          unit: '%',
+          title: '9点前进入大楼(人)',
+          num: 1800,
           historyDesc: '同比',
-          historyNum: '0.4'
+          historyNum: -0.4
         },
         {
           type: 0,
-          title: '人均用水量(m³)',
+          title: '楼内人员数量(人)',
           num: 80,
-          historyDesc: '环比',
-          historyNum: '0.4'
+          historyDesc: '同比',
+          historyNum: -0.4
         },
         {
           type: 1,
           isHighLight: false,
           title: '值得关注',
-          content: ''
+          content: '本周上班时间持续延后'
         },
       ]
     }

src/components/home/HomeHeader.vue

@@ -105,7 +105,6 @@ export default {
   .systemInfo {
     vertical-align: top;
     color: white;
-    font-weight: bolder;
     letter-spacing: 4px;
     margin-left: 12px;
     .logo {
@@ -119,7 +118,8 @@ export default {
       margin-left: 10px;
       line-height: 60px;
       font-size: 22px;
-      letter-spacing: 6px;
+      letter-spacing: 8px;
+      //font-family: PingFangSC-Bold,serif;
     }
   }
   .project {

src/components/security/alarm/manage/securityAlarmManageCategory.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="myChart" ref="myChart" :style="{height: height+'px'}"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    height: Number
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      let chart = this.$echarts.init(this.$refs.myChart);
+      let options = {
+        color: ['#80B2FF','#FFDF80'],
+        legend: {
+          data: [
+            '告警次数',
+          ]
+        },
+        grid: {
+          left: '2%', //默认10%
+          right: '2%', //默认10%
+          bottom: '0%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          type: 'category',
+          data: ['火焰告警', '烟雾告警', '水浸异常', '设备故障', '违规闯入', '行为异常']
+        },
+        yAxis: [
+          {
+            //name: '告警次数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, 15]
+            },
+          },
+        ],
+        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: [120, 125, 133, 145, 170, 175],
+            type: 'bar',
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            }
+          },
+        ]
+      };
+      chart.setOption(options);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+</style>

src/components/security/alarm/manage/securityAlarmManageDistribute.vue

@@ -0,0 +1,58 @@
+<script>
+export default {
+  data() {
+    return {}
+  },
+  props: {
+    height: Number,
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      let chart = this.$echarts.init(this.$refs.myChart)
+      let option = {
+        color: ['#80D4FF', '#A6A6FF', '#FFB580', '#FFDF80', '#79F2E8'],
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          bottom: 'bottom',
+          icon: 'circle'
+        },
+        series: [
+          {
+            name: '告警次数',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 177, name: '一层' },
+              { value: 150, name: 'B1停车场' },
+              { value: 100, name: 'B2停车场' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<template>
+  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
+</template>
+
+<style lang="less" scoped>
+
+</style>

src/components/security/alarm/manage/securityAlarmManageDistributeMap.vue

@@ -0,0 +1,37 @@
+<template>
+  <div style="width: 100%;height: 500px">
+    <div style="width: 100%;height: 450px">
+      <ImageMap></ImageMap>
+    </div>
+    <div style="width: 100%;height: 50px">
+      <a-radio-group style="margin: 3px auto 3px 33%;" :options="floorOptions" default-value="1" @change="floorChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ImageMap from "@/components/security/alarm/map/imageMap.vue";
+export default {
+  data() {
+    return {
+      floorOptions: [
+        { label: '一层大厅', value: '1' },
+        { label: 'B1停车场', value: 'B1' },
+        { label: 'B2停车场', value: 'B2' },
+      ]
+    }
+  },
+  components: {
+    ImageMap
+  },
+  methods: {
+    floorChange() {
+
+    }
+  }
+}
+</script>
+
+<style lang="less">
+
+</style>

src/components/security/alarm/manage/securityAlarmManageOnlineTrend.vue

@@ -0,0 +1,136 @@
+<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: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            type: 'value',
+            min: 0,
+            max: 100,
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+            axisLabel: {
+              show: true,
+              formatter: '{value}%'
+            }
+          },
+        ],
+        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: [25,35,45,55, 65, 75, 85, 88, 89, 89, 89, 89],
+            type: 'line',
+            smooth: true,
+            //areaStyle: {
+            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            //    offset: 0,
+            //    color: '#A6C9FF' // 0% 处的颜色
+            //  }, {
+            //    offset: 0.8,
+            //    color: '#ffffff' // 100% 处的颜色
+            //  }], false),
+            //},
+            lineStyle: {
+              color: "#5A9BFE",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '水浸设备',
+            data: [20,30,40,50, 60, 70, 80, 82, 85, 87, 88, 89],
+            type: 'line',
+            smooth: true,
+            //areaStyle: {
+            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            //    offset: 0,
+            //    color: '#B0E5CB' // 0% 处的颜色
+            //  }, {
+            //    offset: 0.8,
+            //    color: '#ffffff' // 100% 处的颜色
+            //  }], false),
+            //},
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            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/alarm/manage/securityAlarmManageTrend.vue

@@ -0,0 +1,154 @@
+<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: '15%', //默认60
+          top: '15%',
+          containLabel: true
+          //grid区域是否包含坐标轴的刻度标签
+        },
+        xAxis: {
+          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+        },
+        yAxis: [
+          {
+            name: '次数',
+            type: 'value',
+            nameTextStyle: {
+              padding: [10, 0, 10, -12]
+            },
+          },
+        ],
+        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: [302, 395, 227, 375, 349, 396, 304, 226, 207, 383, 287, 243],
+            type: 'line',
+            smooth: true,
+            //areaStyle: {
+            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            //    offset: 0,
+            //    color: '#A6C9FF' // 0% 处的颜色
+            //  }, {
+            //    offset: 0.8,
+            //    color: '#ffffff' // 100% 处的颜色
+            //  }], false),
+            //},
+            lineStyle: {
+              color: "#5A9BFE",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            }
+          },
+          {
+            name: '重要告警',
+            data: [108, 104, 117, 152, 157, 121, 138, 146, 106, 143, 132, 177],
+            type: 'line',
+            smooth: true,
+            //areaStyle: {
+            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            //    offset: 0,
+            //    color: '#B0E5CB' // 0% 处的颜色
+            //  }, {
+            //    offset: 0.8,
+            //    color: '#ffffff' // 100% 处的颜色
+            //  }], false),
+            //},
+            lineStyle: {
+              color: "#62CC97",
+              width: 1,
+            },
+            emphasis: {
+              scale:1.5
+            },
+          },
+          {
+            name: '紧急告警',
+            data: [40, 15, 59, 18, 33, 31, 31, 26, 34, 26, 28, 40],
+            type: 'line',
+            smooth: true,
+            //areaStyle: {
+            //  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+            //    offset: 0,
+            //    color: '#FFD7AC' // 0% 处的颜色
+            //  }, {
+            //    offset: 0.8,
+            //    color: '#ffffff' // 100% 处的颜色
+            //  }], false),
+            //},
+            lineStyle: {
+              color: "#FDB456",
+              width: 1,
+            },
+            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/alarm/securityAlarmGrid.vue

@@ -1,9 +1,29 @@
 <template>
-
+  <div class="securityAlarmGrid">
+    <Card title="宫格模式">
+      <a-row>
+        <a-col :span="4">
+          <div style="padding-left: 15px">
+            <SecurityDeviceSelect></SecurityDeviceSelect>
+          </div>
+        </a-col>
+        <a-col :span="20">
+          <div></div>
+        </a-col>
+      </a-row>
+    </Card>
+  </div>
 </template>
 
 <script>
-export default {}
+import Card from "@/components/common/card.vue";
+import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";
+
+export default {
+  components: {
+    SecurityDeviceSelect
+  }
+}
 </script>
 
 <style lang="less" scoped>

src/components/security/alarm/securityAlarmInfo.vue

@@ -1,11 +1,191 @@
 <template>
+  <div class="securityAlarmInfo">
+    <a-row style="height: 100%">
+      <a-col :span="6" style="height: 100%">
+        <security-device-select/>
+      </a-col>
+      <a-col :span="18" style="height: 100%;padding: 15px">
+        <div class="securityAlarmInfo-query">
+          <a-form-model layout="inline" :model="formData">
+            <a-form-model-item label="告警类型">
+              <a-select defaultValue="all" style="width: 150px">
+                <a-select-option value="all">全部</a-select-option>
+                <a-select-option value="fumes">烟雾告警</a-select-option>
+                <a-select-option value="fire">火焰告警</a-select-option>
+                <a-select-option value="trespass">非法闯入</a-select-option>
+                <a-select-option value="violation">违规行为</a-select-option>
+              </a-select>
+            </a-form-model-item>
+            <a-form-model-item label="时间范围">
+              <TimeRange></TimeRange>
+            </a-form-model-item>
+            <a-form-model-item label="处理情况">
+              <a-select defaultValue="all" style="width: 120px">
+                <a-select-option value="all">全部</a-select-option>
+                <a-select-option value="finish">已处理</a-select-option>
+                <a-select-option value="todo">待处理</a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-form-model>
+        </div>
+        <div class="securityAlarmInfo-list">
+          <a-table :rowKey="(record, index) => index"
+                   :columns="columns"
+                   :data-source="tableData"
+          >
 
+            <template #level="text">
+              <span v-if="text==0" style="color: #ffbf6b">一般告警</span>
+              <span v-if="text==1" style="color: #d26e64">重要告警</span>
+              <span v-if="text==2" style="color: #b83023">紧急告警</span>
+            </template>
+
+            <template #type="text">
+              <span v-if="text==0" style="color: #ffbf6b">火焰告警</span>
+              <span v-if="text==1" style="color: #d26e64">水浸告警</span>
+              <span v-if="text==2" style="color: #b83023">摄像头告警</span>
+            </template>
+
+            <template #operation="text">
+              <a-button type="link">确认处理</a-button>
+              <a-button type="link" @click="viewDetail">查看详情</a-button>
+            </template>
+          </a-table>
+        </div>
+      </a-col>
+    </a-row>
+
+    <!--告警详情-->
+    <a-modal class="securityPersonMoreDetail" v-if="showDetail"
+             :visible="true"
+             :width="800"
+             :footer="null"
+             @cancel="handleCancel"
+    >
+      <div>告警详情</div>
+      <a-divider />
+
+      <div style="width: 100%;height: 100%">
+        <div style="height: 250px;width: 100%">
+          <img width="100%" height="100%" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
+        </div>
+        <div style="margin-top: 20px">
+          <a-descriptions :column="3" size="small">
+            <a-descriptions-item label="监控点">
+              一层大厅西南角1号球机
+            </a-descriptions-item>
+            <a-descriptions-item label="告警区域">
+              一层大厅西南角
+            </a-descriptions-item>
+            <a-descriptions-item label="告警类型">
+              烟雾告警
+            </a-descriptions-item>
+            <a-descriptions-item label="告警时间">
+              2022-08-01 12:00:00
+            </a-descriptions-item>
+            <a-descriptions-item label="告警级别">
+              紧急告警
+            </a-descriptions-item>
+            <a-descriptions-item label="准确率">
+              98%
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+      </div>
+    </a-modal>
+
+  </div>
 </template>
 
 <script>
-export default {}
+import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";
+import TimeRange from "@/components/common/timeRange.vue";
+
+export default {
+  data() {
+    return {
+      showDetail: false,
+      formData: {},
+      tableData: [
+        {
+          time: '2022-08-01 12:00:00',
+          area: '一层大厅',
+          level: 0,
+          source: '一层大厅东南角1号球机',
+          type: 0,
+        },
+        {
+          time: '2022-08-01 12:00:00',
+          area: '一层大厅',
+          level: 1,
+          source: '一层大厅东南角1号球机',
+          type: 1,
+        },
+        {
+          time: '2022-08-01 12:00:00',
+          area: '一层大厅',
+          level: 2,
+          source: '一层大厅东南角1号球机',
+          type: 2,
+        },
+      ],
+      columns: [
+        {
+          title: '告警时间',
+          dataIndex: 'time',
+          key: 'time'
+        },
+        {
+          title: '告警区域',
+          dataIndex: 'area',
+          key: 'area'
+        },
+        {
+          title: '告警级别',
+          dataIndex: 'level',
+          key: 'level',
+          scopedSlots: { customRender: 'level' },
+        },
+        {
+          title: '告警来源',
+          dataIndex: 'source',
+          key: 'source'
+        },
+        {
+          title: '告警类型',
+          dataIndex: 'type',
+          key: 'type',
+          scopedSlots: { customRender: 'type' },
+        },
+        {
+          title: '操作',
+          dataIndex: 'operation',
+          key: 'operation',
+          minWidth: 220,
+          align: 'center',
+          scopedSlots: { customRender: 'operation' },
+        }
+      ]
+    }
+  },
+  components: {
+    SecurityDeviceSelect,
+    TimeRange,
+  },
+  methods: {
+    viewDetail() {
+      this.showDetail = true;
+    },
+    handleCancel() {
+      this.showDetail = false
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
-
+.securityAlarmInfo {
+  width: 100%;
+  height: 100%;
+}
 </style>

src/components/security/alarm/securityAlarmManage.vue

@@ -1,11 +1,128 @@
 <template>
+  <div class="securityAlarmManage">
+    <div class="securityAlarmManage-query">
+      <Query></Query>
+    </div>
+    <div class="securityAlarmManage-core">
+      <Card title="核心指标">
+        <CoreData :data-list="coreData"></CoreData>
+      </Card>
+    </div>
+    <a-row>
+      <a-col :span="14">
+        <div class="securityAlarmManage-distributeMap">
+          <Card title="告警分布">
+            <SecurityAlarmManageDistributeMap></SecurityAlarmManageDistributeMap>
+          </Card>
+        </div>
+      </a-col>
+      <a-col :span="10">
+        <div class="securityAlarmManage-trend">
+          <Card title="告警趋势">
+            <SecurityAlarmManageTrend :height="450"></SecurityAlarmManageTrend>
+          </Card>
+        </div>
+      </a-col>
+    </a-row>
 
+    <a-row>
+      <a-col :span="8">
+        <div class="securityAlarmManage-distribute">
+          <Card title="楼层告警分布">
+            <SecurityAlarmManageDistribute :height="300"></SecurityAlarmManageDistribute>
+          </Card>
+        </div>
+      </a-col>
+      <a-col :span="8">
+        <div class="securityAlarmManage-onlineTrend">
+          <Card title="设备在线趋势">
+            <SecurityAlarmManageOnlineTrend :height="300"></SecurityAlarmManageOnlineTrend>
+          </Card>
+        </div>
+      </a-col>
+      <a-col :span="8">
+        <div class="securityAlarmManage-category">
+          <Card title="告警分类">
+            <SecurityAlarmManageCategory :height="300"></SecurityAlarmManageCategory>
+          </Card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
 </template>
 
 <script>
-export default {}
+import Query from "@/components/common/query.vue";
+import Card from "@/components/common/card.vue";
+import CoreData from "@/components/common/coreData.vue";
+
+import SecurityAlarmManageDistributeMap from "@/components/security/alarm/manage/securityAlarmManageDistributeMap.vue";
+import SecurityAlarmManageTrend from "@/components/security/alarm/manage/securityAlarmManageTrend.vue";
+import SecurityAlarmManageDistribute from "@/components/security/alarm/manage/securityAlarmManageDistribute.vue";
+import SecurityAlarmManageOnlineTrend from "@/components/security/alarm/manage/securityAlarmManageOnlineTrend.vue";
+import SecurityAlarmManageCategory from "@/components/security/alarm/manage/securityAlarmManageCategory.vue";
+
+export default {
+  data() {
+    return {
+      coreData: [
+        {
+          title: '告警事件',
+          num: 1000,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },{
+          title: '紧急告警事件',
+          num: 500,
+          historyDesc: '同比',
+          historyNum: 0.4
+        },{
+          title: '已处理事件',
+          num: 200,
+          historyDesc: '同比',
+          hideTrend: true,
+          historyNum: 60
+        },{
+          title: '告警最多类型',
+          num: '设备离线',
+          historyDesc: '同比',
+          historyNum: 0.4
+        },{
+          type: 1,
+          title: '值得关注',
+        }
+      ]
+    }
+  },
+  components: {
+    Card,
+    Query,
+    CoreData,
+    SecurityAlarmManageDistributeMap,
+    SecurityAlarmManageTrend,
+    SecurityAlarmManageDistribute,
+    SecurityAlarmManageOnlineTrend,
+    SecurityAlarmManageCategory,
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+}
 </script>
 
 <style lang="less" scoped>
-
+.securityAlarmManage {
+  .securityAlarmManage-distributeMap {
+    width: 100%;
+    padding: 0 15px 15px;
+  }
+  .securityAlarmManage-trend {
+    width: 95%;
+  }
+  .securityAlarmManage-distribute {
+    padding-bottom: 5%;
+  }
+}
 </style>

src/components/security/common/securityDeviceSelect.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="securityDeviceSelect" style="width: 100%;height: 100%">
+    <div class="securityDeviceSelect-title">监控点位</div>
+    <div>
+      <a-input-search style="margin-bottom: 8px" placeholder="Search" @change="onChange"/>
+      <a-tree
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="true"
+          :tree-data="treeData"
+          :show-icon="true"
+          @expand="onExpand"
+      >
+        <template #camera>
+          <span class="anticon"><i-icon-park-outline-camera-two /></span>
+        </template>
+        <template #water>
+          <span class="anticon"><i-icon-park-outline-control /></span>
+        </template>
+
+        <template #title="{ title }">
+                  <span v-if="title.indexOf(searchValue) > -1">
+                    {{ title.substr(0, title.indexOf(searchValue)) }}
+                    <span style="color: #f50">{{ searchValue }}</span>
+                    {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+                  </span>
+          <span v-else>{{ title }}</span>
+        </template>
+      </a-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import Card from "@/components/common/card.vue";
+
+export default {
+  data() {
+    return {
+      expandedKeys: [],
+      oriData: [],
+      treeData: [
+        {
+          title: '一层大厅',
+          key: '1',
+          selectable: false,
+          children: [
+            {
+              title: '大厅正门',
+              key: '1-0',
+              slots: {
+                icon: 'camera',
+              },
+            },
+            {
+              title: '水浸设备1',
+              key: '0-0-1',
+              slots: {
+                icon: 'water',
+              },
+            },
+          ],
+        },
+      ],
+      searchValue: '',
+    }
+  },
+  components: {
+    Card
+  },
+  created() {
+    this.generateList(this.treeData)
+  },
+  methods: {
+    onExpand(expandedKeys) {
+      this.expandedKeys = expandedKeys;
+      this.autoExpandParent = false;
+    },
+    generateList(data) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i];
+        const key = node.key;
+        this.oriData.push({ key, title: key });
+        if (node.children) {
+          this.generateList(node.children);
+        }
+      }
+    },
+    getParentKey(key, tree) {
+      let parentKey;
+      for (let i = 0; i < tree.length; i++) {
+        const node = tree[i];
+        if (node.children) {
+          if (node.children.some(item => item.key === key)) {
+            parentKey = node.key;
+          } else if (this.getParentKey(key, node.children)) {
+            parentKey = this.getParentKey(key, node.children);
+          }
+        }
+      }
+      return parentKey;
+    },
+    onChange(e) {
+      const value = e.target.value;
+      const expandedKeys = this.oriData
+          .map(item => {
+            if (item.title.indexOf(value) > -1) {
+              return this.getParentKey(item.key, this.treeData);
+            }
+            return null;
+          })
+          .filter((item, i, self) => item && self.indexOf(item) === i);
+      Object.assign(this, {
+        expandedKeys,
+        searchValue: value,
+        autoExpandParent: true,
+      });
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.securityDeviceSelect {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #d9d9d9;
+  padding: 15px;
+  border-radius: 6px;
+  .securityDeviceSelect-title {
+
+  }
+}
+</style>

src/components/security/device/securityDevice.vue

@@ -1,11 +1,49 @@
 <template>
+  <div class="securityDevice">
+    <a-row style="height: 100%">
+      <a-col :span="6" style="height: 100%">
+        <SecurityDeviceSelect />
+      </a-col>
+      <a-col :span="18" style="height: 100%">
+        <div class="securityDevice-content">
+          <Card title="可交互设备">
+            <a-divider style="padding: 0;margin: 0;"/>
 
+            <div class="securityDevice-devices">
+              <SecurityDeviceItem />
+              <SecurityDeviceItem />
+              <SecurityDeviceItem />
+              <SecurityDeviceItem />
+            </div>
+          </Card>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
 </template>
 
 <script>
-export default {}
+import Card from "@/components/common/card.vue";
+import SecurityDeviceSelect from "@/components/security/common/securityDeviceSelect.vue";
+import SecurityDeviceItem from "@/components/security/device/securityDeviceItem.vue";
+export default {
+  components: {
+    Card,
+    SecurityDeviceSelect,
+    SecurityDeviceItem,
+  }
+}
 </script>
 
 <style lang="less" scoped>
-
+.securityDevice {
+  width: 100%;
+  height: 100%;
+  .securityDevice-content {
+    height: 100%;
+    border: 1px solid #d9d9d9;
+    margin: 0 15px;
+    border-radius: 5px;
+  }
+}
 </style>

src/components/security/device/securityDeviceItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="securityDeviceItem">
+    <div class="securityDeviceItem-line">设备名称：门禁设备1#</div>
+    <div class="securityDeviceItem-line">设备状态：在线</div>
+    <div class="securityDeviceItem-line">功能交互：</div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.securityDeviceItem {
+  display: inline-block;
+  margin: 15px 20px;
+  width: 300px;
+  height: 150px;
+  border: 1px solid #eeeeee;
+  box-shadow: 5px 0px 5px 0px #4D4D4D;
+  .securityDeviceItem-line {
+    line-height: 25px;
+    margin: 10px;
+  }
+}
+</style>

src/style/common.css

@@ -1,3 +1,7 @@
+* {
+  font-family: PingFangSC-Regular, serif;
+}
+
 .pageContainer-body {
   width: calc(100% - 175px);
   height: 100%;
@@ -21,7 +25,14 @@
   font-family: numberMH;
   src: url(../assets/fonts/Digiface-Regular.ttf);
 }
-
+@font-face {
+  font-family: PingFangSC-Regular;
+  src: url(../assets/fonts/PingFangSC-Regular.ttf);
+}
+@font-face {
+  font-family: PingFangSC-Bold;
+  src: url(../assets/fonts/PingFangSC-Bold.ttf);
+}
 /*滚动条样式*/
 ::-webkit-scrollbar {
   width: 8px;

src/views/HomeView.vue

@@ -43,18 +43,8 @@ export default {
     };
   },
   watch: {
-    fold(val) {
-      let app = this;
-      setTimeout(() => {
-        app.suitHeight();
-      }, 100);
-    },
-    $route() {
-      //this.judgeHideAside();
-    },
   },
   mounted() {
-    this.suitHeight();
     //this.judgeHideAside();
     if (this.$route.matched.length===1) {
       this.$router.push({path: '/dashboard'})
@@ -67,14 +57,6 @@ export default {
         this.asideWidth = 0;
       }
     },
-    suitHeight() {
-      let app = this;
-      this.$nextTick(() => {
-        const height = document.getElementsByClassName("home")[0].clientHeight;
-        app.contentHeight = height - 60 - 24;
-        app.$forceUpdate();
-      });
-    },
   },
 };
 </script>