From 8c38a2c9da4a606cd3f29bdf1c5753b8e55b6444 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Wed, 19 Apr 2023 17:49:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js       |  12 ++
 src/views/index.vue    | 416 +++++++++++++++++++++--------------------
 src/views/security.vue |  12 +-
 3 files changed, 241 insertions(+), 199 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 64d99ec..6431fa5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -12,4 +12,16 @@ export const GetLevelAlarm = (params) => {
     return axios.get('api/GetLevelAlarm', {
         params
     })
+};
+//获取昨天、今天报警数量
+export const getSecurityAlarmCount = (params) => {
+    return axios.get('api/GetSecurityAlarmCount', {
+        params
+    })
+};
+//获取报警统计接口
+export const getAlarmStatistics = (params) => {
+    return axios.get('api/GetAlarmStatistics', {
+        params
+    })
 };
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index 4c67b57..a263b68 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -242,7 +242,7 @@
 </template>
 
 <script>
-import { GetLevelAlarm } from "../api/index";
+import { GetLevelAlarm, getAlarmStatistics } from "../api/index";
 export default {
   data() {
     return {
@@ -377,7 +377,7 @@ export default {
     setTimeout(() => {
       this.cameraList = camera;
     }, 1000);
-    this.warnSelect(0)
+    this.warnSelect(0);
   },
   methods: {
     //选中图片
@@ -444,67 +444,51 @@ export default {
     },
     //设备左
     warningOne() {
-      var myChart = this.$echarts.init(document.getElementById("warningOne"));
-      let option = {
-        legend: {
-          show: true,
-          align: "left",
-          x: "45%",
-          orient: "vertical",
-          textStyle: {
-            color: "#fff",
-            fontSize: "0.4rem",
-          },
-          data: [
-            // {
-            //   name: "",
-            //   icon: "",
-            // },
-            {
-              name: "消防报警",
-            },
-          ],
-        },
-        tooltip: {
-          show: true,
-        },
-        grid: {
-          left: "13%",
-          right: "4%",
-          bottom: "15%",
-          top: "17%",
-        },
-        xAxis: {
-          data: ["温感", "烟感", "手动报警"],
-          axisLine: {
+      let data = [];
+      let dataX = []
+      getAlarmStatistics({
+        Type: "消防",
+      }).then((res) => {
+        res.data.data.forEach((item, index) => {
+          data.push(item.Count);
+          dataX.push(item.Name)
+        });
+        var myChart = this.$echarts.init(document.getElementById("warningOne"));
+        let option = {
+          legend: {
             show: true,
-            lineStyle: {
-              color: "rgba(66, 164, 255,0.3)",
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: "0.4rem",
-            // rotate: "45"
-          },
-        },
-        yAxis: [
-          {
-            type: "value",
-            name: "/次",
-            minInterval: 1,
-            nameTextStyle: {
+            align: "left",
+            x: "45%",
+            orient: "vertical",
+            textStyle: {
               color: "#fff",
               fontSize: "0.4rem",
             },
-            // scale: true,
+            data: [
+              // {
+              //   name: "",
+              //   icon: "",
+              // },
+              {
+                name: "消防报警",
+              },
+            ],
+          },
+          tooltip: {
+            show: true,
+          },
+          grid: {
+            left: "13%",
+            right: "4%",
+            bottom: "15%",
+            top: "17%",
+          },
+          xAxis: {
+            data: dataX,
             axisLine: {
               show: true,
               lineStyle: {
-                color: "rgba(66, 164, 255,0.4)",
+                color: "rgba(66, 164, 255,0.3)",
               },
             },
             axisTick: {
@@ -513,119 +497,129 @@ export default {
             axisLabel: {
               color: "#fff",
               fontSize: "0.4rem",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "rgba(66, 164, 255,0.5)",
-              },
+              // rotate: "45"
             },
           },
-        ],
-        series: [
-          {
-            name: "消防报警",
-            type: "bar",
-            barWidth: 20,
-            zlevel: 2,
-            itemStyle: {
-              normal: {
-                color: this.$echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "#01B1FF",
-                    },
-                    {
-                      offset: 1,
-                      color: "#033BFF",
-                    },
-                  ],
-                  false
-                ),
-              },
-            },
-            label: {
-              normal: {
-                show: true,
-                fontSize: "0.4rem",
+          yAxis: [
+            {
+              type: "value",
+              name: "/次",
+              minInterval: 1,
+              nameTextStyle: {
                 color: "#fff",
-                position: "inside",
+                fontSize: "0.4rem",
+              },
+              // scale: true,
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "rgba(66, 164, 255,0.4)",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#fff",
+                fontSize: "0.4rem",
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: "rgba(66, 164, 255,0.5)",
+                },
               },
             },
-            data: [90, 94, 98],
-          },
-        ],
-      };
-      myChart.setOption(option);
+          ],
+          series: [
+            {
+              name: "消防报警",
+              type: "bar",
+              barWidth: 20,
+              zlevel: 2,
+              itemStyle: {
+                normal: {
+                  color: this.$echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "#01B1FF",
+                      },
+                      {
+                        offset: 1,
+                        color: "#033BFF",
+                      },
+                    ],
+                    false
+                  ),
+                },
+              },
+              label: {
+                normal: {
+                  show: true,
+                  fontSize: "0.4rem",
+                  color: "#fff",
+                  position: "inside",
+                },
+              },
+              data: data,
+            },
+          ],
+        };
+        myChart.setOption(option);
+      });
     },
     //设备右
     warningTwo() {
-      var myChart = this.$echarts.init(document.getElementById("warningTwo"));
-      let option = {
-        legend: {
-          show: true,
-          align: "left",
-          x: "45%",
-          orient: "vertical",
-          textStyle: {
-            color: "#fff",
-            fontSize: "0.4rem",
-          },
-          data: [
-            // {
-            //   name: "",
-            //   icon: "",
-            // },
-            {
-              name: "设备报警",
-            },
-          ],
-        },
-        tooltip: {
-          show: true,
-        },
-        grid: {
-          left: "13%",
-          right: "4%",
-          bottom: "15%",
-          top: "17%",
-        },
-        xAxis: {
-          data: ["空调", "照明", "电梯", "太阳灯"],
-          axisLine: {
+      let data = [];
+      let dataX = []
+      getAlarmStatistics({
+        Type: "设备",
+      }).then((res) => {
+        res.data.data.forEach((item, index) => {
+          data.push(item.Count);
+          dataX.push(item.Name)
+        });
+        var myChart = this.$echarts.init(document.getElementById("warningTwo"));
+        let option = {
+          legend: {
             show: true,
-            lineStyle: {
-              color: "rgba(66, 164, 255,0.3)",
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: "#fff",
-            fontSize: "0.4rem",
-            // rotate: "45"
-          },
-        },
-        yAxis: [
-          {
-            type: "value",
-            name: "/次",
-            minInterval: 1,
-            nameTextStyle: {
+            align: "left",
+            x: "45%",
+            orient: "vertical",
+            textStyle: {
               color: "#fff",
               fontSize: "0.4rem",
             },
-            // scale: true,
+            data: [
+              // {
+              //   name: "",
+              //   icon: "",
+              // },
+              {
+                name: "设备报警",
+              },
+            ],
+          },
+          tooltip: {
+            show: true,
+          },
+          grid: {
+            left: "13%",
+            right: "4%",
+            bottom: "15%",
+            top: "17%",
+          },
+          xAxis: {
+            data: dataX,
             axisLine: {
               show: true,
               lineStyle: {
-                color: "rgba(66, 164, 255,0.4)",
+                color: "rgba(66, 164, 255,0.3)",
               },
             },
             axisTick: {
@@ -634,55 +628,81 @@ export default {
             axisLabel: {
               color: "#fff",
               fontSize: "0.4rem",
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "rgba(66, 164, 255,0.5)",
-              },
+              // rotate: "45"
             },
           },
-        ],
-        series: [
-          {
-            name: "设备报警",
-            type: "bar",
-            barWidth: 20,
-            zlevel: 2,
-            itemStyle: {
-              normal: {
-                color: this.$echarts.graphic.LinearGradient(
-                  0,
-                  0,
-                  0,
-                  1,
-                  [
-                    {
-                      offset: 0,
-                      color: "#01B1FF",
-                    },
-                    {
-                      offset: 1,
-                      color: "#033BFF",
-                    },
-                  ],
-                  false
-                ),
-              },
-            },
-            label: {
-              normal: {
-                show: true,
-                fontSize: "0.4rem",
+          yAxis: [
+            {
+              type: "value",
+              name: "/次",
+              minInterval: 1,
+              nameTextStyle: {
                 color: "#fff",
-                position: "inside",
+                fontSize: "0.4rem",
+              },
+              // scale: true,
+              axisLine: {
+                show: true,
+                lineStyle: {
+                  color: "rgba(66, 164, 255,0.4)",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                color: "#fff",
+                fontSize: "0.4rem",
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: "rgba(66, 164, 255,0.5)",
+                },
               },
             },
-            data: [90, 100, 98, 97],
-          },
-        ],
-      };
-      myChart.setOption(option);
+          ],
+          series: [
+            {
+              name: "设备报警",
+              type: "bar",
+              barWidth: 20,
+              zlevel: 2,
+              itemStyle: {
+                normal: {
+                  color: this.$echarts.graphic.LinearGradient(
+                    0,
+                    0,
+                    0,
+                    1,
+                    [
+                      {
+                        offset: 0,
+                        color: "#01B1FF",
+                      },
+                      {
+                        offset: 1,
+                        color: "#033BFF",
+                      },
+                    ],
+                    false
+                  ),
+                },
+              },
+              label: {
+                normal: {
+                  show: true,
+                  fontSize: "0.4rem",
+                  color: "#fff",
+                  position: "inside",
+                },
+              },
+              data: data,
+            },
+          ],
+        };
+        myChart.setOption(option);
+      });
     },
     maintenanceLeft() {
       var myChart = this.$echarts.init(
diff --git a/src/views/security.vue b/src/views/security.vue
index 7a120c0..de6da43 100644
--- a/src/views/security.vue
+++ b/src/views/security.vue
@@ -147,7 +147,7 @@
 </template>
 
 <script>
-import { GetLevelAlarm } from "../api/index";
+import { GetLevelAlarm , getSecurityAlarmCount} from "../api/index";
 export default {
   name: "security",
   data() {
@@ -261,8 +261,17 @@ export default {
     this.getFireWarnList()
     // 获取安防告警
     this.getPoliceList()
+    //获取安防统计今天昨天报警数量
+    this.getAlarmCount()
   },
   methods: {
+    //获取昨天今天的报警数量
+    getAlarmCount(){
+      getSecurityAlarmCount().then((res)=>{
+        this.securityList[4].count = res.data.data.TodayCount
+        this.securityList[5].count = res.data.data.YesterdayCount
+      })
+    },
     videoChange(index) {
       this.warnCameraList.forEach((item, i) => {
         item.icon = require("../assets/images/anFang/video.png");
@@ -321,6 +330,7 @@ export default {
         });
       });
     },
+    
   },
   watch: {},
   components: {},