From 790b7d84ce3cb83252715cd2e451a695795695e5 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 16:55:33 +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/App.vue                |   5 +-
 src/api/index.js           |  13 +-
 src/views/alarm.vue        | 267 ++++++++++++--------------------
 src/views/court.vue        |   2 +-
 src/views/energySaving.vue | 301 +++++++++++++++++++++++--------------
 src/views/index.vue        | 147 ++++++++++++------
 src/views/security.vue     |  58 ++++++-
 vue.config.js              |   2 +-
 8 files changed, 448 insertions(+), 347 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index aaeffd9..1cad55c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,10 +7,11 @@
       <div class="middle">南京江北新区人民法院智慧运营平台</div>
       <div class="right">
         <div class="quit">
-          <img
+          <!-- <img
             src="./assets/images/quit.png"
             style="width: 3%; height: 37%"
-          />
+            @click="goPage"
+          /> -->
         </div>
         <!-- <div class="storey">
           <div
diff --git a/src/api/index.js b/src/api/index.js
index 541c60e..64d99ec 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -7,10 +7,9 @@ import axios from 'axios'
 // 设置请求头参数 common 为设置所有的接口  post为设置post请求的接口
 // axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
 
-
-// 
-// export const getFindlist = (params) => {
-//     return axios.get('api/services/svBuildingInfo/findlist', {
-//         params
-//     })
-// };
\ No newline at end of file
+//根据等级获取报警数据
+export const GetLevelAlarm = (params) => {
+    return axios.get('api/GetLevelAlarm', {
+        params
+    })
+};
\ No newline at end of file
diff --git a/src/views/alarm.vue b/src/views/alarm.vue
index 0b14edf..8a38d89 100644
--- a/src/views/alarm.vue
+++ b/src/views/alarm.vue
@@ -19,8 +19,8 @@
                 <div style="margin-top: 2%">
                   报警原因:<span class="spancolor">{{
                     "「" + item.cause + "」"
-                  }}</span
-                  ><span>{{ item.content }}</span>
+                  }}</span>
+                  <!-- <span>{{ item.content }}</span> -->
                 </div>
                 <div style="margin-top: 2%; float: left">
                   风险等级:<span class="spancolor">{{
@@ -50,8 +50,8 @@
                 <div style="margin-top: 2%">
                   报警原因:<span class="spancolor">{{
                     "「" + item.cause + "」"
-                  }}</span
-                  ><span>{{ item.content }}</span>
+                  }}</span>
+                  <!-- <span>{{ item.content }}</span> -->
                 </div>
                 <div style="margin-top: 2%; float: left">
                   风险等级:<span class="spancolor">{{
@@ -84,7 +84,8 @@
                 报警原因:<span class="spancolor">{{
                   "「" + item.cause + "」"
                 }}</span
-                ><span>{{ item.content }}</span>
+                >
+                <!-- <span>{{ item.content }}</span> -->
               </div>
               <div style="margin-top: 2%; float: left">
                 风险等级:<span class="spancolor">{{
@@ -100,179 +101,17 @@
 </template>
 
 <script>
+import { GetLevelAlarm } from "../api/index";
 export default {
   name: "court",
   data() {
     return {
       //报警数组 一级
-      warnList1: [
-        {
-          id: "1",
-          icon: require("../assets/images/warnRed.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "一级",
-        },
-        {
-          id: "2",
-          icon: require("../assets/images/warnRed.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "一级",
-        },
-        {
-          id: "3",
-          icon: require("../assets/images/warnRed.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "一级",
-        },
-        {
-          id: "4",
-          icon: require("../assets/images/warnRed.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "一级",
-        },
-        {
-          id: "5",
-          icon: require("../assets/images/warnRed.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "一级",
-        },
-        {
-          id: "6",
-          icon: require("../assets/images/warnRed.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "一级",
-        },
-      ],
+      warnList1: [],
       //报警数组 二级
-      warnList2: [
-        {
-          id: "1",
-          icon: require("../assets/images/warnOrange.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "二级",
-        },
-        {
-          id: "2",
-          icon: require("../assets/images/warnOrange.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "二级",
-        },
-        {
-          id: "3",
-          icon: require("../assets/images/warnOrange.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "二级",
-        },
-        {
-          id: "4",
-          icon: require("../assets/images/warnOrange.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "二级",
-        },
-        {
-          id: "5",
-          icon: require("../assets/images/warnOrange.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "二级",
-        },
-        {
-          id: "6",
-          icon: require("../assets/images/warnOrange.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "二级",
-        },
-      ],
+      warnList2: [],
       //报警数组 三级
-      warnList3: [
-        {
-          id: "1",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "2",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "3",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "4",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "5",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "6",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "7",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-        {
-          id: "8",
-          icon: require("../assets/images/warnBlue.png"),
-          time: "2023年03月18日 15:26:08",
-          cause: "机房02机箱",
-          content: "发生事故",
-          risk: "三级",
-        },
-      ],
+      warnList3: [],
       courtList: [
         {
           name: "空闲中",
@@ -294,8 +133,78 @@ export default {
       houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
     };
   },
-  mounted() {},
-  methods: {},
+  mounted() {
+   
+    // console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222');
+    //一级告警
+    this.getFirstAlarm();
+    //二级告警
+    this.getSecondAlarm();
+    //三级告警
+    this.getThirdAlarm();
+  },
+  methods: {
+    //获取一级告警
+    getFirstAlarm() {
+      GetLevelAlarm({
+        AlarmLevel: "1",
+        DeviceTypes:''
+      }).then((res) => {
+        this.warnList1 = Object.keys(res.data.data).map((item, index) => {
+          if (res.data.data[index].AlarmLevel == 1) {
+            res.data.data[index].AlarmLevel = "一级";
+          }
+          return {
+            id: index+1,
+            icon: require("../assets/images/warnRed.png"),
+            time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            cause: res.data.data[index].AlarmName,
+            risk: res.data.data[index].AlarmLevel,
+          };
+        });
+      });
+    },
+    //获取二级告警
+    getSecondAlarm() {
+      GetLevelAlarm({
+        AlarmLevel: "2",
+        DeviceTypes:''
+      }).then((res) => {
+        this.warnList2 = Object.keys(res.data.data).map((item, index) => {
+          if (res.data.data[index].AlarmLevel == 2) {
+            res.data.data[index].AlarmLevel = "二级";
+          }
+          return {
+            id: index + 1,
+            icon: require("../assets/images/warnOrange.png"),
+            time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            cause: res.data.data[index].AlarmName,
+            risk: res.data.data[index].AlarmLevel,
+          };
+        });
+      });
+    },
+    //获取三级告警
+    getThirdAlarm() {
+      GetLevelAlarm({
+        AlarmLevel: "3",
+        DeviceTypes:''
+      }).then((res) => {
+        this.warnList3 = Object.keys(res.data.data).map((item, index) => {
+          if (res.data.data[index].AlarmLevel == 3) {
+            res.data.data[index].AlarmLevel = "三级";
+          }
+          return {
+            id: index + 1,
+            icon: require("../assets/images/warnBlue.png"),
+            time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            cause: res.data.data[index].AlarmName,
+            risk: res.data.data[index].AlarmLevel,
+          };
+        });
+      });
+    },
+  },
   watch: {},
   components: {},
 };
@@ -370,6 +279,10 @@ export default {
             line-height: 2;
             .warnArrayBox {
               margin-left: 3%;
+              display: flex;
+              flex-wrap: wrap;
+              flex-direction: column;
+              align-items: flex-start;
               span {
                 margin: 0.5rem;
               }
@@ -443,6 +356,10 @@ export default {
             // display: flex;
             //   flex-direction: column;
             //   align-items: flex-start;
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            align-items: flex-start;
             margin-left: 3%;
             span {
               margin: 0.5rem;
@@ -524,6 +441,10 @@ export default {
           // display: flex;
           //   flex-direction: column;
           //   align-items: flex-start;
+          display: flex;
+          flex-wrap: wrap;
+          flex-direction: column;
+          align-items: flex-start;
           margin-left: 3%;
           span {
             margin: 0.5rem;
diff --git a/src/views/court.vue b/src/views/court.vue
index 6656946..6821925 100644
--- a/src/views/court.vue
+++ b/src/views/court.vue
@@ -817,7 +817,7 @@ export default {
           flex-direction: column;
           align-items: center;
           height: 61%;
-          width: 13%;
+          width: 14%;
           .blueHouse {
             background: url(../assets/images/blueHouse.png) no-repeat;
             background-size: 100% 100%;
diff --git a/src/views/energySaving.vue b/src/views/energySaving.vue
index fded276..2883c85 100644
--- a/src/views/energySaving.vue
+++ b/src/views/energySaving.vue
@@ -21,14 +21,19 @@
               {{ item.name }}
             </div>
           </div> -->
-        <el-carousel class="equipment" :autoplay="true" trigger="click" :interval="10000">
+        <el-carousel
+          class="equipment"
+          :autoplay="true"
+          trigger="click"
+          :interval="10000"
+        >
           <el-carousel-item
             v-for="(item, index) in equipmentList1"
             :key="index"
             class="equipmentEnergy"
           >
-          <div v-for="(i,k) in item" :key="k" class="equipmentEnergyChild">
-            <div class="equipmentList">
+            <div v-for="(i, k) in item" :key="k" class="equipmentEnergyChild">
+              <div class="equipmentList">
                 <span>{{ i.count }}</span>
                 <span style="color: rgb(225, 177, 25); font-size: 0.4rem"
                   >KWH</span
@@ -37,8 +42,7 @@
               <div class="equipmentName">
                 {{ i.name }}
               </div>
-          </div>
-              
+            </div>
           </el-carousel-item>
         </el-carousel>
       </div>
@@ -178,113 +182,114 @@
 </template>
 
 <script>
+import { GetLevelAlarm } from "../api/index";
 export default {
   name: "energySaving",
   data() {
     return {
       equipmentList: [
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-        
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-        
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
-            {
-              name: "热回收机组1",
-              count: "28.4",
-              value: "",
-            },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
+        {
+          name: "热回收机组1",
+          count: "28.4",
+          value: "",
+        },
       ], //设备用能数据
       equipmentBtnList: [
         {
@@ -338,19 +343,19 @@ export default {
         {
           name: "今日发电量",
           icon: require("../assets/images/jieNengImg/energy.png"),
-          count: "35.2",
+          count: "",
           unit: "kWh",
         },
         {
           name: "总发电量",
           icon: require("../assets/images/jieNengImg/energy.png"),
-          count: "35.2",
+          count: "",
           unit: "kWh",
         },
         {
           name: "有功功率",
           icon: require("../assets/images/jieNengImg/power.png"),
-          count: "35.2",
+          count: "",
           unit: "kWh",
         },
         {
@@ -362,7 +367,7 @@ export default {
         {
           name: "运行时间",
           icon: require("../assets/images/jieNengImg/runTime.png"),
-          count: "35.2",
+          count: "",
           unit: "h",
         },
         {
@@ -373,16 +378,17 @@ export default {
         },
       ],
       equipmentShow: false,
-      equipmentList1:[],
+      equipmentList1: [],
     };
   },
   mounted() {
-    for (let i = 0; i < this.equipmentList.length; i+=8) {
-        this.equipmentList1.push(this.equipmentList.slice(i,i+8))
+    for (let i = 0; i < this.equipmentList.length; i += 8) {
+      this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
     }
     this.calculateEcharts();
     this.calculateEchartsTwo();
     window.createMqtt = this.createMqtt();
+    this.changeWarn(0)
   },
   methods: {
     //mqtt订阅数据
@@ -422,6 +428,68 @@ export default {
     //预警点击
     changeWarn(index) {
       this.equipmentBtnAc = index;
+      if (index == 0) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "电梯",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      } else if (index == 1) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "光伏",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      } else if (index == 2) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "VRV",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      } else if (index == 3) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "恒温恒湿",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      } else if (index == 4) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "热回收",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      }
+    },
+    //更新预警数据
+    upWainData(res) {
+      this.warnList = Object.keys(res.data.data).map((item, index) => {
+        if (res.data.data[index].AlarmLevel == 1) {
+          res.data.data[index].AlarmLevel = "一级";
+        } else if (res.data.data[index].AlarmLevel == 2) {
+          res.data.data[index].AlarmLevel = "二级";
+        } else if (res.data.data[index].AlarmLevel == 3) {
+          res.data.data[index].AlarmLevel = "三级";
+        }
+        return {
+          id: index + 1,
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: this.$moment(res.data.data[index].AlarmTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          ),
+          case: res.data.data[index].AlarmName,
+          grade: res.data.data[index].AlarmLevel,
+        };
+      });
     },
     calculateEcharts() {
       let imgSrc = "/img/car.png";
@@ -880,7 +948,7 @@ export default {
           height: 100%;
           width: 100%;
         }
-        /deep/ .el-carousel__indicators--horizontal{
+        /deep/ .el-carousel__indicators--horizontal {
           display: none;
         }
         .equipmentEnergy {
@@ -890,7 +958,7 @@ export default {
           // animation: 10s wordsLoop linear infinite normal;
           display: flex;
           flex-wrap: wrap;
-          .equipmentEnergyChild{
+          .equipmentEnergyChild {
             width: 25%;
             height: 50%;
             .equipmentList {
@@ -912,7 +980,6 @@ export default {
               color: #fff;
             }
           }
-          
         }
       }
       ::-webkit-scrollbar {
diff --git a/src/views/index.vue b/src/views/index.vue
index fc9a82a..4c67b57 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -79,6 +79,7 @@
                   flex-direction: column;
                   align-items: flex-start;
                   margin-left: 3%;
+                  width:100%
                 "
               >
                 <span>报警时间:{{ item.time }}</span>
@@ -87,11 +88,11 @@
                     display: flex;
                     justify-content: space-between;
                     margin-top: 2%;
+                    width:100%
                   "
                 >
                   <span>报警原因:{{ item.cause }}</span>
-                  <span style="position: relative; left: 50%"
-                    >风险等级:{{ item.risk }}</span
+                  <span style="margin-right:5%">风险等级:{{ item.risk }}</span
                   >
                 </div>
               </div>
@@ -241,10 +242,11 @@
 </template>
 
 <script>
+import { GetLevelAlarm } from "../api/index";
 export default {
   data() {
     return {
-      dateData:'',//日期选择
+      dateData: "", //日期选择
       wisdomList: [
         {
           name: "空闲中",
@@ -320,7 +322,7 @@ export default {
           value: "2",
         },
       ],
-      selectDate:'',
+      selectDate: "",
       dateOptions: [
         {
           label: "年",
@@ -335,55 +337,110 @@ export default {
           value: "3",
         },
       ],
-      cameraList: [
-        {
-          icon: require("../assets/images/camera.png"),
-          video:'video/video.html?src='
-        },
-        {
-          icon: require("../assets/images/camera.png"),
-          video:'video/video.html?src='
-        },
-        {
-          icon: require("../assets/images/camera.png"),
-          video:'video/video.html?src='
-        },
-        {
-          icon: require("../assets/images/camera.png"),
-          video:'video/video.html?src='
-        },
-      ], //摄像
-      cameraBig:'',
-      cameraBigShow:false,
+      cameraList: [], //摄像
+      cameraBig: "",
+      cameraBigShow: false,
     };
   },
   mounted() {
-    let that = this
+    let that = this;
     this.warningOne();
     this.warningTwo();
     this.maintenanceLeft();
     this.maintenanceRight();
     this.energyEcharts();
     window.createMqtt = this.createMqtt();
-     window.addEventListener("message", function (e){
-       let val = e.data.val
-       if (val != null) {
-         that.changeCamera('video/video.html?src='+e.data.val)
-       }
-     })
+    window.addEventListener("message", function (e) {
+      let val = e.data.val;
+      if (val != null) {
+        that.changeCamera("video/video.html?src=" + e.data.val);
+      }
+    });
+    let camera = [
+      {
+        icon: require("../assets/images/camera.png"),
+        video: "video/video.html?src=",
+      },
+      {
+        icon: require("../assets/images/camera.png"),
+        video: "video/video.html?src=",
+      },
+      {
+        icon: require("../assets/images/camera.png"),
+        video: "video/video.html?src=",
+      },
+      {
+        icon: require("../assets/images/camera.png"),
+        video: "video/video.html?src=",
+      },
+    ];
+    setTimeout(() => {
+      this.cameraList = camera;
+    }, 1000);
+    this.warnSelect(0)
   },
   methods: {
     //选中图片
     changeCamera(path) {
-      this.cameraBig = path
-      this.cameraBigShow = true
+      this.cameraBig = path;
+      this.cameraBigShow = true;
     },
-    closeCamer(){
-      this.cameraBigShow = false
+    closeCamer() {
+      this.cameraBigShow = false;
     },
     //报警选中
     warnSelect(index) {
       this.warnBtnAc = index;
+      if (index == 0) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      } else if (index == 1) {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "门禁,视频监控",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      } else {
+        let params = {
+          AlarmLevel: "",
+          DeviceTypes: "VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗",
+        };
+        GetLevelAlarm(params).then((res) => {
+          this.upWainData(res);
+        });
+      }
+    },
+    //更新报警信息
+    upWainData(res) {
+      let icon = null;
+      this.warnList = Object.keys(res.data.data).map((item, index) => {
+        if (res.data.data[index].AlarmLevel == 1) {
+          res.data.data[index].AlarmLevel = "一级";
+          icon = require("../assets/images/warnRed.png");
+        } else if (res.data.data[index].AlarmLevel == 2) {
+          res.data.data[index].AlarmLevel = "二级";
+          icon = require("../assets/images/warnOrange.png");
+        } else if (res.data.data[index].AlarmLevel == 3) {
+          res.data.data[index].AlarmLevel = "三级";
+          icon = require("../assets/images/warnBlue.png");
+        }
+        return {
+          id: index + 1,
+          icon: icon,
+          time: this.$moment(res.data.data[index].AlarmTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          ),
+          cause: res.data.data[index].AlarmName,
+          risk: res.data.data[index].AlarmLevel,
+        };
+      });
     },
     //设备左
     warningOne() {
@@ -1344,13 +1401,13 @@ export default {
           align-items: center;
         }
       }
-      .pickerChange{
+      .pickerChange {
         width: 23%;
         height: 10%;
         position: absolute;
         top: 22%;
         right: 35%;
-         /deep/ .el-select {
+        /deep/ .el-select {
           width: 100%;
           height: 100%;
           border-radius: 15px;
@@ -1434,21 +1491,21 @@ export default {
   width: 47.4%;
   height: 50%;
   border: 5px solid #01b0ca;
-  .close{
+  .close {
     width: 4%;
     height: 8%;
     z-index: 999;
     position: absolute;
-    top:1%;
-    right:1%;
+    top: 1%;
+    right: 1%;
     background: url("../assets/images/close.png") no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
   }
-  .remoteControl{
+  .remoteControl {
     width: 15%;
     height: 27%;
-    position:absolute;
+    position: absolute;
     bottom: 2%;
     right: 2%;
     background: url("../assets/images/control.png") no-repeat;
@@ -1458,10 +1515,10 @@ export default {
     justify-content: space-around;
     align-items: center;
   }
-  .remoteControl1{
-     width: 15%;
+  .remoteControl1 {
+    width: 15%;
     height: 27%;
-    position:absolute;
+    position: absolute;
     bottom: 2%;
     right: 2%;
     display: flex;
diff --git a/src/views/security.vue b/src/views/security.vue
index 32b0104..7a120c0 100644
--- a/src/views/security.vue
+++ b/src/views/security.vue
@@ -147,6 +147,7 @@
 </template>
 
 <script>
+import { GetLevelAlarm } from "../api/index";
 export default {
   name: "security",
   data() {
@@ -255,7 +256,12 @@ export default {
       ],
     };
   },
-  mounted() {},
+  mounted() {
+    //获取消防告警
+    this.getFireWarnList()
+    // 获取安防告警
+    this.getPoliceList()
+  },
   methods: {
     videoChange(index) {
       this.warnCameraList.forEach((item, i) => {
@@ -265,6 +271,56 @@ export default {
         index
       ].icon = require("../assets/images/anFang/videoAc.png");
     },
+    //获取火灾报警、
+    getFireWarnList(){
+      let params = {
+        AlarmLevel: "",
+        DeviceTypes:'消防'
+      }
+      GetLevelAlarm(params).then((res) => {
+        let icon = null
+        this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
+          if (res.data.data[index].Status == 1) {
+            res.data.data[index].Status = "未处理";
+            icon = require("../assets/images/jieNengImg/warnWhite.png")
+          }else{
+            res.data.data[index].Status = "已处理";
+            icon = require("../assets/images/jieNengImg/warnBlue.png")
+          }
+          return {
+            icon: icon,
+            time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            position: res.data.data[index].DeviceType,
+            status: res.data.data[index].AlarmLevel,
+          };
+        });
+      });
+    },
+    //获取安防报警、
+    getPoliceList(){
+      let params = {
+        AlarmLevel: "",
+        DeviceTypes:'门禁,视频监控'
+      }
+      GetLevelAlarm(params).then((res) => {
+        let icon = null
+        this.policeList = Object.keys(res.data.data).map((item, index) => {
+          if (res.data.data[index].Status == 1) {
+            res.data.data[index].Status = "未处理";
+            icon = require("../assets/images/jieNengImg/warnWhite.png")
+          }else{
+            res.data.data[index].Status = "已处理";
+            icon = require("../assets/images/jieNengImg/warnBlue.png")
+          }
+          return {
+            icon: icon,
+            time: this.$moment(res.data.data[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            content: res.data.data[index].DeviceType,
+            status: res.data.data[index].AlarmLevel,
+          };
+        });
+      });
+    },
   },
   watch: {},
   components: {},
diff --git a/vue.config.js b/vue.config.js
index ad6c1e1..eb2c0cc 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -15,7 +15,7 @@ module.exports = {
       // port: 8989, // 开发服务器运行端口号
       proxy: {
           '/api': { //代理的名字
-              target:'http://122.51.103.65:8002/ecs-server',
+              target:'http://172.16.1.253:12308/api/',
               ws: true,
               changeOrigin: true,
               pathRewrite:{