20230422

src/App.vue

@@ -29,8 +29,9 @@
     <div class="menu">
       <div class="menuList">
         <div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index,item.name)" :class="{menuAc : menuAc == index}">
-          <img :src="item.icon"  :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/>
-          <div style="font-size: 0.55rem">{{ item.name }}</div>
+          <!-- <img :src="item.icon"  :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/> -->
+          <img :src="item.icon"  :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'85%'}"/>
+          <div style="font-size: 0.55rem;margin-top: 5%;">{{ item.name }}</div>
         </div>
       </div>
     </div>

src/main.js

@@ -43,11 +43,11 @@ window.PubScribe = function (topic, _callback,) {
   if (client == null) {
     client = mqtt.createConnect(() => {
       //客户端订阅主题
-      client.subscribe(['/SC/pub/uwb', '/SC/pub/env'], {
+      client.subscribe(['FirstLevel','SecondLevel','ThirdLevel'], {
         qos: 0
       }, (err) => {
         if (!err) {
-          console.log("订阅成功0", ['/SC/pub/uwb', '/SC/pub/env']);
+          console.log("订阅成功0", ['FirstLevel','SecondLevel','ThirdLevel']);
         } else {
           console.log('订阅失败');
         }
@@ -63,21 +63,78 @@ window.PubScribe = function (topic, _callback,) {
       });
     });
   } else {
-    if (topic != null) {
-      console.log("topic", topic)
-      currentTopics = topic;
-      client.subscribe(currentTopics, {
-        qos: 0
-      }, (err) => {
-        if (!err) {
-          console.log("订阅成功1");
-        } else {
-          console.log('消息订阅失败！')
-        }
-      });
-    }
+    // if (topic != null) {
+    //   console.log("topic", topic)
+    //   currentTopics = topic;
+    //   client.subscribe(currentTopics, {
+    //     qos: 0
+    //   }, (err) => {
+    //     if (!err) {
+    //       console.log("订阅成功1");
+    //     } else {
+    //       console.log('消息订阅失败！')
+    //     }
+    //   });
+    // }
   }
 }
+window.PubScribe(null,realInfo);
+window.alarmAllLevel = []
+window.alarmFirstLevel = []
+window.alarmSecondLevel = []
+window.alarmThirdLevel = []
+function realInfo(topic, message) {
+      switch (topic) {
+        // 接收托片
+        case "FirstLevel":
+          try {
+            // window.alarmFirstLevel= []
+            const utf8decoder = new TextDecoder();
+            const u8arr = new Uint8Array(message);
+            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+            console.log("msg", msg);
+            
+            for (let i = 0; i < msg.length; i++) {
+                window.alarmFirstLevel.splice(0,window.alarmFirstLevel.length);
+                window.alarmFirstLevel.push(msg[i])
+            }
+            // window.alarmFirstLevel= msg
+            // alarmAllLevel
+        //消防，电梯、动环系统
+          } catch (error) {}
+          console.log(error);
+          break;
+           case "SecondLevel":
+          try {
+            const utf8decoder = new TextDecoder();
+            const u8arr = new Uint8Array(message);
+            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+            console.log("msg", msg);
+            for (let i = 0; i < msg.length; i++) {
+                window.alarmSecondLevel.splice(0,window.alarmSecondLevel.length);
+                window.alarmSecondLevel.push(msg[i])
+            }
+          } catch (error) {}
+          console.log(error);
+          break;
+          case "ThirdLevel":
+          try {
+            const utf8decoder = new TextDecoder();
+            const u8arr = new Uint8Array(message);
+            const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+            const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+            console.log("msg", msg);
+            for (let i = 0; i < msg.length; i++) {
+                window.alarmThirdLevel.splice(0,window.alarmThirdLevel.length);
+                window.alarmThirdLevel.push(msg[i])
+            }
+          } catch (error) {}
+          console.log(error);
+          break;
+      }
+    }
 new Vue({
   router,
   render: h => h(App)

src/utils/mqttConfig.js

@@ -33,9 +33,11 @@ class mqttHandle {
      */
     createConnect(onConnected) {
         //配置链接
+        // console.log("connectUrl",connectUrl)
         const { host, port, endpoint, ...options } = this.connect;
         console.log("this.connect.host", this.connect.host)
-        const connectUrl = 'ws://138.227.111.141:8083/mqtt';
+        // const connectUrl = 'ws://138.227.111.141:8083/mqtt';
+        const connectUrl = 'ws://172.16.1.253:1884/mqtt';
         // const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
         // if (!client.connected) {
         //     client.on('connect', function () {

src/views/alarm.vue

@@ -10,7 +10,7 @@
             :key="index"
           >
             <div class="warnArray">
-              <span>{{ item.id }}</span>
+              <!-- <span>{{ item.id }}</span> -->
               <img :src="item.icon" style="width: 7%; margin-left: 3%" />
               <div class="warnArrayBox">
                 <div style="margin-top: 2%; float: left">
@@ -41,7 +41,7 @@
             :key="index"
           >
             <div class="warnArray">
-              <span>{{ item.id }}</span>
+              <!-- <span>{{ item.id }}</span> -->
               <img :src="item.icon" style="width: 7%; margin-left: 3%" />
               <div class="warnArrayBox">
                 <div style="margin-top: 2%; float: left">
@@ -74,7 +74,7 @@
           :key="index"
         >
           <div class="warnArray">
-            <span>{{ item.id }}</span>
+            <!-- <span>{{ item.id }}</span> -->
             <img :src="item.icon" style="width: 7%; margin-left: 3%" />
             <div class="warnArrayBox">
               <div style="margin-top: 2%; float: left">
@@ -102,6 +102,7 @@
 
 <script>
 import { GetLevelAlarm } from "../api/index";
+
 export default {
   name: "court",
   data() {
@@ -131,10 +132,16 @@ export default {
         },
       ], // 智慧法庭小房子
       houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
+       alarmFirstLevel:[],
+      alarmSecondLevel:[],
+      alarmThirdLevel:[],
     };
   },
   mounted() {
-   
+    window.alarmFirstLevel =  this.alarmFirstLevel
+    window.alarmSecondLevel= this.alarmSecondLevel 
+    window.alarmThirdLevel= this.alarmThirdLevel 
+    // window.createMqtt = this.createMqtt();
     // console.log(this.$moment('2023-04-03T10:05:31').format("YYYY-MM-DD HH:mm:ss"),'ssssss222222');
     //一级告警
     this.getFirstAlarm();
@@ -142,8 +149,34 @@ export default {
     this.getSecondAlarm();
     //三级告警
     this.getThirdAlarm();
+    // 
+    
   },
+        watch: {
+     alarmFirstLevel(val) {
+       
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmFirstLevel",val)
+      if(val.length!=0){
+        this.upmqttData(val) 
+      }
+      
+    },
+     alarmSecondLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmSecondLevel",val)
+      this.upmqttData(val) 
+    },
+     alarmThirdLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmThirdLevel",val)
+      this.upmqttData(val) 
+    },
+     },
   methods: {
+ 
+
+
     //获取一级告警
     getFirstAlarm() {
       GetLevelAlarm({
@@ -204,8 +237,41 @@ export default {
         });
       });
     },
+         //获取mqtt数据
+     upmqttData(val) {
+        let icon = null;
+      var warnListMqtt = []
+      warnListMqtt = Object.keys(val).map((item, index) => {
+       if (val[index].AlarmLevel == 1) {
+          val[index].AlarmLevel = "一级";
+          icon = require("../assets/images/warnRed.png");
+        } else if (val[index].AlarmLevel == 2) {
+          val[index].AlarmLevel = "二级";
+          icon = require("../assets/images/warnOrange.png");
+        } else if (val[index].AlarmLevel == 3) {
+          val[index].AlarmLevel = "三级";
+          icon = require("../assets/images/warnBlue.png");
+        }
+          return {
+            id: index + 1,
+            icon:icon,
+            time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            cause: val[index].AlarmName,
+            risk: val[index].AlarmLevel,
+          };
+      });
+      console.log("warnListMqtt",warnListMqtt)
+       for (let i = 0; i < warnListMqtt.length; i++) {
+            if(warnListMqtt[i].risk=='三级'){
+             this.warnList3.splice(0,0,warnListMqtt[i]);
+            }else if(warnListMqtt[i].risk=='二级'){
+             this.warnList2.splice(0,0,warnListMqtt[i]);
+            } if(warnListMqtt[i].risk=='一级'){
+             this.warnList1.splice(0,0,warnListMqtt[i]);
+            } 
+        }
+    }, 
   },
-  watch: {},
   components: {},
 };
 </script>
@@ -242,7 +308,7 @@ export default {
         background: url("../assets/images/title.png") no-repeat;
         background-size: 100% 100%;
         color: #fff;
-        font-size: 0.7rem;
+        font-size: 0.9rem;
         display: flex;
         align-items: center;
         padding-left: 12%;
@@ -317,7 +383,7 @@ export default {
       background: url("../assets/images/title.png") no-repeat;
       background-size: 100% 100%;
       color: #fff;
-      font-size: 0.7rem;
+      font-size: 0.9rem;
       display: flex;
       align-items: center;
       padding-left: 12%;
@@ -402,7 +468,7 @@ export default {
     background: url("../assets/images/title.png") no-repeat;
     background-size: 100% 100%;
     color: #fff;
-    font-size: 0.7rem;
+    font-size: 0.9rem;
     display: flex;
     align-items: center;
     padding-left: 12%;
@@ -476,7 +542,7 @@ export default {
   background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   padding-left: 5%;

src/views/energySaving.vue

@@ -26,7 +26,7 @@
           class="equipment"
           :autoplay="true"
           trigger="click"
-          :interval="10000"
+          :interval="7000"
         >
           <el-carousel-item
             v-for="(item, index) in equipmentList1"
@@ -189,6 +189,7 @@ import {
   getRealData,
   getAreaList,
 } from "../api/index";
+import mqtt from "mqtt"; // mqtt协议
 export default {
   name: "energySaving",
   data() {
@@ -385,9 +386,17 @@ export default {
       ],
       equipmentShow: false,
       equipmentList1: [],
+        alarmFirstLevel:[],
+      alarmSecondLevel:[],
+      alarmThirdLevel:[],
     };
   },
   mounted() {
+     this.getMqttData()
+      window.alarmSecondLevel= this.alarmSecondLevel 
+      window.alarmThirdLevel= this.alarmThirdLevel 
+     window.alarmAllLevel= this.alarmAllLevel
+      this.changeWarn(0);
     //轮播八个一页
     for (let i = 0; i < this.equipmentList.length; i += 8) {
       this.equipmentList1.push(this.equipmentList.slice(i, i + 8));
@@ -396,10 +405,31 @@ export default {
     this.getQOQ()
     this.getYOY()
     this.calculateEchartsTwo();
-    window.createMqtt = this.createMqtt();
-    this.changeWarn(0);
+    // window.createMqtt = this.createMqtt();
+   
     this.getAllDevicesInfo();
   },
+      watch: {
+     alarmFirstLevel(val) {
+       
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmFirstLevel",val)
+      if(val.length!=0){
+        this.upmqttData(val) 
+      }
+      
+    },
+     alarmSecondLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmSecondLevel",val)
+      this.upmqttData(val) 
+    },
+     alarmThirdLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmThirdLevel",val)
+      this.upmqttData(val) 
+    },
+     },
   methods: {
     //获取能耗计量环比分析
     getQOQ() {
@@ -528,24 +558,121 @@ export default {
       this.calculateEcharts(res.data.data.values);
       })
     },
-    //mqtt订阅数据
-    createMqtt() {
-      //创建链接，接收数据
-      let topicSends = ["device/publish/FB80"];
-      window.PubScribe(topicSends, this.realInfo);
+    // //mqtt订阅数据
+    // createMqtt() {
+    //   //创建链接，接收数据
+    //   let topicSends = ["device/publish/FB80"];
+    // //   let topicSends = ["FirstLevel"];
+    //   window.PubScribe(topicSends, this.realInfo);
+    // },
+    // /** 实时数据分类 */
+   
+
+    //  realInfo(topic, message) {
+    //   let that = this;
+    //   switch (topic) {
+    //     // 接收托片
+    //     case "device/publish/FB80":
+    //       try {
+    //         const utf8decoder = new TextDecoder();
+    //         const u8arr = new Uint8Array(message);
+    //         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+    //         const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+    //         console.log("msg", msg);
+    //         if (msg.params.设备运行状态 == 1) {
+    //           msg.params.设备运行状态 = "正常";
+    //         } else {
+    //           msg.params.设备运行状态 = "异常";
+    //         }
+    //         that.sunList[0].count = msg.params.光伏逆变器日发电量;
+    //         that.sunList[1].count = msg.params.光伏逆变器总发电量;
+    //         that.sunList[2].count = msg.params.有功功率;
+    //         that.sunList[3].count = msg.params.设备运行状态;
+    //         that.sunList[4].count = msg.params.机器总运行时间;
+    //         that.sunList[5].count = msg.params.警告信息;
+    //       } catch (error) {}
+    //       console.log(error);
+    //       break;
+    //        case "FirstLevel":
+    //       try {
+    //           console.log("message", message);
+    //         const utf8decoder = new TextDecoder();
+    //         const u8arr = new Uint8Array(message);
+    //         const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
+    //         const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
+    //         console.log("msg", msg);
+    
+    //       } catch (error) {}
+    //       console.log(error);
+    //       break;
+    //   }
+    // },
+    getMqttData(){
+         this.getDataByMqtt(
+          "ws://138.227.111.141:8083/mqtt",
+          "device/publish/FB80",
+        );
     },
-    /** 实时数据分类 */
-    realInfo(topic, message) {
-      let that = this;
-      switch (topic) {
-        // 接收托片
-        case "device/publish/FB80":
-          try {
+          // mqtt订阅（独立）
+    getDataByMqtt(url, topic) {
+      const clientId = "test_id_" + String(new Date().getTime()); // 用户名
+      const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
+      const options = {
+        // 配置
+        // 测试：订阅本机IP
+        // host: host,
+        // port: port,
+
+        keepalive: 60, // 心跳时间，默认60s，设置为0禁用
+        username: 'test',  // 用户名（可选）
+        password: 1234,  // 密码（可选）
+        clientId: clientId, // 客户端ID，默认随机生成
+        protocolId: "MQTT",
+        protocolVersion: 4,
+        clean: true, // false在离线时接收QoS1和2的消息
+        reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
+        connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
+        will: {
+          // 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
+          topic: topic, // 要发布的主题
+          payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
+          qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
+          retain: false, // 保留标志
+        },
+      };
+      if (this.mqttClient == undefined) {
+        this.mqttClient = mqtt.connect(host, options); // 连接
+        // const client = mqtt.connect(host, options); // 连接
+        // const client = mqtt.connect(host)  // 连接
+        // 错误回调
+        this.mqttClient.on("error", (err) => {
+          // console.log("[MQTT-TEST] 连接错误：", this.models[cIdNum].cName);
+          this.mqttClient.end();
+        });
+        // 重连回调
+        this.mqttClient.on("reconnect", () => {
+          console.log("[MQTT-TEST] 重连中……");
+        });
+        // 连接回调
+        this.mqttClient.on("connect", () => {
+          // console.log(
+          //   "[MQTT-TEST] 已连接的客户端ID: " + this.models[cIdNum].cName
+          // );
+        });
+        // 接收回调
+        this.mqttClient.on("message", (topic, message, packet) => {
+          console.log(
+            `[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`,
+            new Date());
+          // 解析后端数据
+          let that = this;
+          if (topic.indexOf("device/publish/FB80") != -1) {
             const utf8decoder = new TextDecoder();
             const u8arr = new Uint8Array(message);
             const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
             const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
             console.log("msg", msg);
+            console.log("msg", msg);
             if (msg.params.设备运行状态 == 1) {
               msg.params.设备运行状态 = "正常";
             } else {
@@ -557,10 +684,13 @@ export default {
             that.sunList[3].count = msg.params.设备运行状态;
             that.sunList[4].count = msg.params.机器总运行时间;
             that.sunList[5].count = msg.params.警告信息;
-          } catch (error) {}
-          console.log(error);
-          break;
+          } else if (topic.indexOf("InConvoyor") != -1) {
+           
+          } 
+        });
       }
+      // 订阅
+      this.mqttClient.subscribe(topic, { qos: 0 });
     },
     //获取所有设备信息
     getAllDevicesInfo() {
@@ -846,6 +976,36 @@ export default {
           this.upWainData(res);
         });
       }
+    },
+      //获取mqtt数据
+     upmqttData(val) {
+      let icon = null;
+      var warnListMqtt = []
+      warnListMqtt = Object.keys(val).map((item, index) => {
+        if (val[index].AlarmLevel == 1) {
+          val[index].AlarmLevel = "一级";
+        } else if (val[index].AlarmLevel == 2) {
+          val[index].AlarmLevel = "二级";
+        } else if (val[index].AlarmLevel == 3) {
+          val[index].AlarmLevel = "三级";
+        }
+        return {
+          id: index + 1,
+          icon: require("../assets/images/jieNengImg/warnRed.png"),
+          time: this.$moment(val[index].AlarmTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          ),
+          case: val[index].AlarmName,
+          grade: val[index].AlarmLevel,
+          DeviceTypes:val[index].DeviceTypes,
+        };
+      });
+      console.log("warnListMqtt",warnListMqtt)
+       for (let i = 0; i < warnListMqtt.length; i++) {
+                if(warnListMqtt[i].DeviceTypes==this.warnList[0].DeviceTypes){
+                    this.warnList.splice(0,0,warnListMqtt[i]);
+                }       
+        }
     },
     //更新预警数据
     upWainData(res) {
@@ -865,6 +1025,7 @@ export default {
           ),
           case: res.data.data[index].AlarmName,
           grade: res.data.data[index].AlarmLevel,
+          DeviceTypes:res.data.data[index].DeviceTypes,
         };
       });
     },
@@ -942,12 +1103,12 @@ export default {
               name: {
                 padding: [0, 10, 0, 8],
                 color: "auto",
-                fontSize: "0.7rem",
+                fontSize: "0.9rem",
               },
               percent: {
                 padding: [0, 0, 0, 8],
                 color: "auto",
-                fontSize: "0.7rem",
+                fontSize: "0.9rem",
               },
             },
           },
@@ -1095,7 +1256,7 @@ export default {
         legend: {
           show: true,
           data: ["同期", "本期", "同比"],
-          textStyle: { fontSize: "0.7rem", color: "#ffffff" },
+          textStyle: { fontSize: "0.9rem", color: "#ffffff" },
         },
         tooltip: {
           trigger: "axis",
@@ -1114,7 +1275,7 @@ export default {
           axisLabel: {
             interval: 0,
             show: true,
-            fontSize: "0.7rem",
+            fontSize: "0.9rem",
             color: "#ffffff",
             fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
           },
@@ -1125,7 +1286,7 @@ export default {
             axisTick: { show: false },
             axisLabel: {
               show: true,
-              fontSize: "0.7rem",
+              fontSize: "0.9rem",
               color: "#ffffff",
               fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
               formatter: "{value}%",
@@ -1137,7 +1298,7 @@ export default {
             axisTick: { show: false },
             axisLabel: {
               show: true,
-              fontSize: "0.7rem",
+              fontSize: "0.9rem",
               color: "#ffffff",
               fontFamily: "SourceHanSansCN-Normal, SourceHanSansCN",
               formatter: "{value} %",
@@ -1481,7 +1642,7 @@ export default {
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   padding-left: 12%;
@@ -1508,7 +1669,7 @@ export default {
       margin-left: 4%;
       margin-top: 3%;
       .equipmentList {
-        width: 100%%;
+        width: 100%;
         height: 80%;
         background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
         background-size: 100% 100%;

src/views/index.vue

@@ -10,14 +10,14 @@
               v-for="(item, index) in wisdomList"
               :key="index"
             >
-              <div style="color: #fff; font-size: 0.6rem">{{ item.name }}</div>
+              <div style="color: #fff; font-size: 0.7rem">{{ item.name }}</div>
               <div
                 :class="houseList[index]"
                 style="
                   width: 100%;
                   height: 100%;
                   color: #fff;
-                  font-size: 0.6rem;
+                  font-size: 0.7rem;
                 "
               >
                 {{ item.count }}
@@ -30,7 +30,7 @@
               v-for="(item, index) in wisdomMonArr"
               :key="index"
             >
-              <div style="width: 100%">
+              <div style="width: 100%;font-size: 0.6rem;">
                 <span>{{ item.name }}:</span>
                 <span style="color: rgb(225, 177, 25); margin-left: 5%">{{
                   item.count
@@ -240,7 +240,7 @@
       </div>
       </div>
     </div>
-  </div>
+  <!-- </div> -->
 </template>
 
 <script>
@@ -352,17 +352,25 @@ export default {
       cameraBig: "",
       cameraBigShow: false,
       buildingList: [],
+      alarmAllLevel:[],
+      alarmFirstLevel:[],
+      alarmSecondLevel:[],
+      alarmThirdLevel:[],
     };
   },
   mounted() {
     let that = this;
+   window.alarmFirstLevel =  this.alarmFirstLevel
+     window.alarmSecondLevel= this.alarmSecondLevel 
+      window.alarmThirdLevel= this.alarmThirdLevel 
+     window.alarmAllLevel= this.alarmAllLevel 
     this.warningOne();
     this.warningTwo();
     this.maintenanceLeft();
     this.maintenanceRight();
     // this.energyEcharts();
     this.selectDataList(this.selectDate);
-    window.createMqtt = this.createMqtt();
+    // window.createMqtt = this.createMqtt();
     window.addEventListener("message", function (e) {
       let val = e.data.val;
       if (val != null) {
@@ -394,6 +402,33 @@ export default {
     //获取建筑id
     this.getBuildingData();
   },
+    watch: {
+    alarmAllLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmAllLevel",val)
+      this.upmqttData(val) 
+    },
+
+     alarmFirstLevel(val) {
+       
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmFirstLevel",val)
+      if(val.length!=0){
+        this.upmqttData(val) 
+      }
+      
+    },
+     alarmSecondLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmSecondLevel",val)
+      this.upmqttData(val) 
+    },
+     alarmThirdLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmThirdLevel",val)
+      this.upmqttData(val) 
+    },
+     },
   methods: {
     //获取建筑Id
     getBuildingData() {
@@ -579,7 +614,7 @@ export default {
           DeviceTypes: "",
         };
         GetLevelAlarm(params).then((res) => {
-          this.upWainData(res);
+          this.upWainData(res.data.data);
         });
       } else if (index == 1) {
         let params = {
@@ -587,7 +622,7 @@ export default {
           DeviceTypes: "门禁,视频监控",
         };
         GetLevelAlarm(params).then((res) => {
-          this.upWainData(res);
+          this.upWainData(res.data.data);
         });
       } else {
         let params = {
@@ -595,35 +630,67 @@ export default {
           DeviceTypes: "VRV,机房,消防,电梯,恒温恒湿,热回收,环境,光伏,能耗",
         };
         GetLevelAlarm(params).then((res) => {
-          this.upWainData(res);
+          this.upWainData(res.data.data);
         });
       }
     },
     //更新报警信息
-    upWainData(res) {
+    upWainData(val) {
       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 = "一级";
+      this.warnList = Object.keys(val).map((item, index) => {
+        if (val[index].AlarmLevel == 1) {
+          val[index].AlarmLevel = "一级";
           icon = require("../assets/images/warnRed.png");
-        } else if (res.data.data[index].AlarmLevel == 2) {
-          res.data.data[index].AlarmLevel = "二级";
+        } else if (val[index].AlarmLevel == 2) {
+          val[index].AlarmLevel = "二级";
           icon = require("../assets/images/warnOrange.png");
-        } else if (res.data.data[index].AlarmLevel == 3) {
-          res.data.data[index].AlarmLevel = "三级";
+        } else if (val[index].AlarmLevel == 3) {
+          val[index].AlarmLevel = "三级";
           icon = require("../assets/images/warnBlue.png");
         }
         return {
           id: index + 1,
           icon: icon,
-          time: this.$moment(res.data.data[index].AlarmTime).format(
+          time: this.$moment(val[index].AlarmTime).format(
             "YYYY-MM-DD HH:mm:ss"
           ),
-          cause: res.data.data[index].AlarmName,
-          risk: res.data.data[index].AlarmLevel,
+          cause: val[index].AlarmName,
+           DeviceType: val[index].DeviceType,
+          risk: val[index].AlarmLevel,
         };
       });
     },
+    //获取mqtt数据
+     upmqttData(val) {
+      let icon = null;
+      var warnListMqtt = []
+      warnListMqtt = Object.keys(val).map((item, index) => {
+        if (val[index].AlarmLevel == 1) {
+          val[index].AlarmLevel = "一级";
+          icon = require("../assets/images/warnRed.png");
+        } else if (val[index].AlarmLevel == 2) {
+          val[index].AlarmLevel = "二级";
+          icon = require("../assets/images/warnOrange.png");
+        } else if (val[index].AlarmLevel == 3) {
+          val[index].AlarmLevel = "三级";
+          icon = require("../assets/images/warnBlue.png");
+        }
+        return {
+          id: index + 1,
+          icon: icon,
+          time: this.$moment(val[index].AlarmTime).format(
+            "YYYY-MM-DD HH:mm:ss"
+          ),
+          cause: val[index].AlarmName,
+          DeviceType: val[index].DeviceType,
+          risk: val[index].AlarmLevel,
+        };
+      });
+      console.log("warnListMqtt",warnListMqtt)
+       for (let i = 0; i < warnListMqtt.length; i++) {
+                this.warnList.splice(0,0,warnListMqtt[i]);
+        }
+    },
     //设备左
     warningOne() {
       let data = [];
@@ -644,7 +711,7 @@ export default {
             orient: "vertical",
             textStyle: {
               color: "#fff",
-              fontSize: "0.4rem",
+              fontSize: "0.6rem",
             },
             data: [
               // {
@@ -678,7 +745,7 @@ export default {
             },
             axisLabel: {
               color: "#fff",
-              fontSize: "0.4rem",
+              fontSize: "0.6rem",
               // rotate: "45"
             },
           },
@@ -689,7 +756,7 @@ export default {
               minInterval: 1,
               nameTextStyle: {
                 color: "#fff",
-                fontSize: "0.4rem",
+                fontSize: "0.6rem",
               },
               // scale: true,
               axisLine: {
@@ -703,7 +770,7 @@ export default {
               },
               axisLabel: {
                 color: "#fff",
-                fontSize: "0.4rem",
+                fontSize: "0.6rem",
               },
               splitLine: {
                 show: true,
@@ -743,7 +810,7 @@ export default {
               label: {
                 normal: {
                   show: true,
-                  fontSize: "0.4rem",
+                  fontSize: "0.6rem",
                   color: "#fff",
                   position: "inside",
                 },
@@ -775,7 +842,7 @@ export default {
             orient: "vertical",
             textStyle: {
               color: "#fff",
-              fontSize: "0.4rem",
+              fontSize: "0.6rem",
             },
             data: [
               // {
@@ -809,7 +876,7 @@ export default {
             },
             axisLabel: {
               color: "#fff",
-              fontSize: "0.4rem",
+              fontSize: "0.6rem",
               // rotate: "45"
             },
           },
@@ -820,7 +887,7 @@ export default {
               minInterval: 1,
               nameTextStyle: {
                 color: "#fff",
-                fontSize: "0.4rem",
+                fontSize: "0.6rem",
               },
               // scale: true,
               axisLine: {
@@ -834,7 +901,7 @@ export default {
               },
               axisLabel: {
                 color: "#fff",
-                fontSize: "0.4rem",
+                fontSize: "0.6rem",
               },
               splitLine: {
                 show: true,
@@ -874,7 +941,7 @@ export default {
               label: {
                 normal: {
                   show: true,
-                  fontSize: "0.4rem",
+                  fontSize: "0.6rem",
                   color: "#fff",
                   position: "inside",
                 },
@@ -941,7 +1008,7 @@ export default {
             rich: {
               a: {
                 color: "#fff",
-                fontSize: "0.5rem",
+                fontSize: "0.6rem",
                 padding: [0, 10, 0, 0],
               },
               b: {
@@ -977,7 +1044,7 @@ export default {
                 textStyle: {
                   align: "center",
                   baseline: "middle",
-                  fontSize: "0.5rem",
+                  fontSize: "0.6rem",
                   fontWeight: "100",
                   color: "#fff",
                 },
@@ -1049,7 +1116,7 @@ export default {
             rich: {
               a: {
                 color: "#fff",
-                fontSize: "0.5rem",
+                fontSize: "0.6rem",
                 padding: [0, 10, 0, 0],
               },
               b: {
@@ -1085,7 +1152,7 @@ export default {
                 textStyle: {
                   align: "center",
                   baseline: "middle",
-                  fontSize: "0.5rem",
+                  fontSize: "0.6rem",
                   fontWeight: "100",
                   color: "#fff",
                 },
@@ -1140,7 +1207,7 @@ export default {
           textStyle: {
             //文字样式
             color: "#b4c9d1",
-            fontSize: "0.5rem",
+            fontSize: "0.6rem",
           },
           top: "4%",
           // left: "13%",
@@ -1171,7 +1238,7 @@ export default {
             },
             axisLabel: {
               color: "#fff",
-              fontSize: "0.5rem",
+              fontSize: "0.6rem",
             },
             //x轴线
             splitLine: {
@@ -1192,7 +1259,7 @@ export default {
             nameTextStyle: {
               //y轴上方单位的颜色
               color: "#fff",
-              fontSize: "0.5rem",
+              fontSize: "0.6rem",
             },
             type: "value",
             axisTick: {
@@ -1214,7 +1281,7 @@ export default {
             },
             axisLabel: {
               color: "#fff",
-              fontSize: "0.5rem",
+              fontSize: "0.6rem",
             },
           },
         ],
@@ -1401,7 +1468,7 @@ export default {
       }
     }
     .leftTwo {
-      height: 25%;
+      height: 30%;
       width: 100%;
       .warning {
         height: calc(100% - 25%);
@@ -1690,7 +1757,7 @@ export default {
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.7rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   padding-left: 12%;

src/views/operationMaintenance.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
       <div class="workCount">
-        <div style="font-size: 0.8rem">本月工单数</div>
+        <div style="font-size: 0.9rem">本月工单数</div>
         <div id="workOrderEcharts"></div>
       </div>
       <div class="workList">
@@ -250,7 +250,7 @@ export default {
             label: {
               show: true,
               color: "#fff",
-              fontSize: "0.8rem",
+              fontSize: "0.9rem",
               fontWeight: 600,
               backgroundColor: "rgba(0, 0, 0, 0)",
             },
@@ -337,7 +337,7 @@ export default {
               show: true,
               textStyle: {
                 color: "#FFFFFF",
-                fontSize: "0.8rem",
+                fontSize: "0.9rem",
               },
               position: "top",
               formatter: function (p) {
@@ -389,10 +389,11 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      font-size: 0.7rem;
       .todayCount {
         background: url(../assets/images/gongDan/gongDanBack.png) no-repeat;
         background-size: 100% 100%;
-        width: 62%;
+        width: 75%;
         height: 82%;
         color: #fff;
         display: flex;
@@ -556,7 +557,7 @@ export default {
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   padding-left: 12%;

src/views/security.vue

@@ -3,8 +3,8 @@
     <div class="left">
       <div class="leftOne">
         <div class="title">安防统计数据</div>
-        <div class="security">
-          <img src="../assets/images/anFangAc.png" class="securityImg"/>
+        <!-- <div class="security"> -->
+          <!-- <img src="../assets/images/anFangAc.png" class="securityImg"/>
           <div class="securitySupervision">安防监管</div>
           <div class="securityCount">
             <div
@@ -15,9 +15,48 @@
               <span>{{ item.name }}</span>
               <span>{{ item.count }}</span>
             </div>
-            <!-- <img src="../"/> -->
+
           </div>
-        </div>
+           <img src="../assets/images/anFangAc.png" class="securityImg"/>
+          <div class="securitySupervision">安防监管</div>
+          <div class="securityCount">
+            <div
+              class="securityList"
+              v-for="(item, index) in securityList"
+              :key="index"
+            >
+              <span>{{ item.name }}</span>
+              <span>{{ item.count }}</span>
+            </div>
+          </div> -->
+              <el-carousel
+          class="security"
+          :autoplay="true"
+          trigger="click"
+          :interval="7000"
+        >
+          <el-carousel-item
+            v-for="(item, index) in securityList"
+            :key="index"
+            class="equipmentEnergy"
+          >
+           <img src="../assets/images/anFangAc.png" class="securityImg"/>
+           <!-- <div class="securitySupervision">安防监管</div> -->
+            <div class="securitySupervision">{{item.tit}}</div>
+          <div class="securityCount">
+            <div
+              class="securityList"
+              v-for="(i, k) in item.security"
+              :key="k"
+            >
+              <span>{{ i.name }}</span>
+              <span>{{ i.count }}</span>
+            </div>
+          </div>
+          </el-carousel-item>
+        </el-carousel>
+        <!-- </div> -->
+         
       </div>
       <div class="leftTwo">
         <div class="title" style="height: 8%">预警视频监控联动</div>
@@ -123,7 +162,7 @@
                 "
                 >设备内容:<span
                   style="color: rgb(0, 255, 255); margin-left: 5%"
-                  >{{ item.content }}</span
+                  >{{ item.position }}</span
                 ></span
               >
               <span
@@ -154,6 +193,8 @@ export default {
     return {
       securityList: [
         {
+        tit:'摄像头监管',
+        security:[{
           name: "",
           count: "",
         },
@@ -162,21 +203,52 @@ export default {
           count: "609",
         },
         {
-          name: "在线数量",
+          name: "摄像头在线数量",
           count: "602",
         },
         {
-          name: "离线数量",
+          name: "摄像头离线数量",
           count: "7",
         },
         {
-          name: "报警数",
+          name: "摄像头报警数",
           count: "0",
         },
         {
-          name: "昨日报警数",
+          name: "摄像头昨日报警数",
           count: "0",
         },
+        ]  
+        },
+        {
+        tit:'门禁监管',
+        security:[{
+          name: "",
+          count: "",
+        },
+        {
+          name: "门禁总数",
+          count: "609",
+        },
+        {
+          name: "门禁在线数量",
+          count: "602",
+        },
+        {
+          name: "门禁离线数量",
+          count: "7",
+        },
+        {
+          name: "门禁今日报警数",
+          count: "0",
+        },
+        {
+          name: "门禁昨日报警数",
+          count: "0",
+        },
+        ]  
+        }
+        
       ],
       warnCameraList: [
         {
@@ -229,31 +301,34 @@ export default {
           id: "1",
           icon: require("../assets/images/anFang/exclamatory.png"),
           time: "2023年03月12日 15:45:10",
-          content: "306门禁故障",
+          position: "306门禁故障",
           status: "已解除",
         },
         {
           id: "2",
           icon: require("../assets/images/anFang/exclamatory.png"),
           time: "2023年03月12日 15:45:10",
-          content: "201门禁故障",
+          position: "201门禁故障",
           status: "已解除",
         },
         {
           id: "3",
           icon: require("../assets/images/anFang/exclamatory.png"),
           time: "2023年03月12日 15:45:10",
-          content: "206门禁故障",
+          position: "206门禁故障",
           status: "已解除",
         },
         {
           id: "4",
           icon: require("../assets/images/anFang/exclamatory.png"),
           time: "2023年03月12日 15:45:10",
-          content: "106门禁故障",
+          position: "106门禁故障",
           status: "已解除",
         },
       ],
+      alarmFirstLevel:[],
+      alarmSecondLevel:[],
+      alarmThirdLevel:[],
     };
   },
   mounted() {
@@ -263,13 +338,37 @@ export default {
     this.getPoliceList()
     //获取安防统计今天昨天报警数量
     this.getAlarmCount()
+    window.alarmFirstLevel =  this.alarmFirstLevel
+    window.alarmSecondLevel= this.alarmSecondLevel 
+    window.alarmThirdLevel= this.alarmThirdLevel 
   },
+      watch: {
+     alarmFirstLevel(val) {
+       
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmFirstLevel",val)
+      if(val.length!=0){
+        this.upmqttData(val) 
+      }
+      
+    },
+     alarmSecondLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmSecondLevel",val)
+      this.upmqttData(val) 
+    },
+     alarmThirdLevel(val) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      console.log("alarmThirdLevel",val)
+      this.upmqttData(val) 
+    },
+     },
   methods: {
     //获取昨天今天的报警数量
     getAlarmCount(){
       getSecurityAlarmCount().then((res)=>{
-        this.securityList[4].count = res.data.data.TodayCount
-        this.securityList[5].count = res.data.data.YesterdayCount
+        this.securityList[0].security[4].count = res.data.data.TodayCount
+        this.securityList[0].security[5].count = res.data.data.YesterdayCount
       })
     },
     videoChange(index) {
@@ -289,7 +388,7 @@ export default {
       GetLevelAlarm(params).then((res) => {
         let icon = null
         this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
-          if (res.data.data[index].Status == 1) {
+          if (res.data.data[index].Status == 0) {
             res.data.data[index].Status = "未处理";
             icon = require("../assets/images/jieNengImg/warnWhite.png")
           }else{
@@ -299,8 +398,11 @@ export default {
           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,
+            DeviceType: res.data.data[index].DeviceType,
+            // position: res.data.data[index].DeviceType,
+            position: res.data.data[index].AlarmName,
+            // status: res.data.data[index].AlarmLevel,
+            status: res.data.data[index].Status,
           };
         });
       });
@@ -314,7 +416,7 @@ export default {
       GetLevelAlarm(params).then((res) => {
         let icon = null
         this.policeList = Object.keys(res.data.data).map((item, index) => {
-          if (res.data.data[index].Status == 1) {
+          if (res.data.data[index].Status == 0) {
             res.data.data[index].Status = "未处理";
             icon = require("../assets/images/jieNengImg/warnWhite.png")
           }else{
@@ -324,21 +426,59 @@ export default {
           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,
+            DeviceType: res.data.data[index].DeviceType,
+              position: res.data.data[index].AlarmName,
+            // status: res.data.data[index].AlarmLevel,
+            status: res.data.data[index].Status,
           };
         });
       });
     },
-    
+      //获取mqtt数据
+     upmqttData(val) {
+    let icon = null
+      var warnListMqtt = []
+      warnListMqtt = Object.keys(val).map((item, index) => {
+        if (val[index].Status == 0) {
+            val[index].Status = "未处理";
+            icon = require("../assets/images/jieNengImg/warnWhite.png")
+          }else{
+            val[index].Status = "已处理";
+            icon = require("../assets/images/jieNengImg/warnBlue.png")
+          }
+        if (val[index].AlarmLevel == 1) {
+          val[index].AlarmLevel = "一级";
+        } else if (val[index].AlarmLevel == 2) {
+          val[index].AlarmLevel = "二级";
+        } else if (val[index].AlarmLevel == 3) {
+          val[index].AlarmLevel = "三级";
+        }
+          return {
+            icon: icon,
+            time: this.$moment(val[index].AlarmTime).format("YYYY-MM-DD HH:mm:ss"),
+            position: val[index].AlarmName,
+            DeviceType: val[index].DeviceType,
+            status: val[index].Status,
+          };
+      });
+      console.log("warnListMqtt",warnListMqtt)
+       for (let i = 0; i < warnListMqtt.length; i++) {
+            if(warnListMqtt[i].AlarmLevel=='三级'){
+             this.policeList.splice(0,0,warnListMqtt[i]);
+              this.getAlarmCount()
+            }
+            if(warnListMqtt[i].DeviceType=='消防'){
+             this.fireWarnList.splice(0,0,warnListMqtt[i]);
+            }   
+        }
+    }, 
   },
-  watch: {},
   components: {},
 };
 </script>
 
 <style lang="less" scoped>
-@fontsize: 0.7rem;
+@fontsize: 0.9rem;
 .securityMain {
   width: 100%;
   height: 100%;
@@ -375,6 +515,13 @@ export default {
         justify-content: flex-end;
         flex-wrap: wrap;
         position: relative;
+         /deep/ .el-carousel__container {
+          height: 100%;
+          width: 100%;
+        }
+        /deep/ .el-carousel__indicators--horizontal {
+          display: none;
+        }
         .securityImg{
           position: absolute;
           left:10%;
@@ -386,6 +533,7 @@ export default {
           background-size: 100% 100%;
           color: #fff;
           font-size: @fontsize;
+          margin-left: 50%;
         }
         .securityCount {
           width: 100%;
@@ -526,7 +674,7 @@ export default {
   background: url("../assets/images/title.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   padding-left: 12%;
@@ -538,7 +686,7 @@ export default {
   background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
   background-size: 100% 100%;
   color: #fff;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
   padding-left: 5%;

vue.config.js

@@ -30,6 +30,14 @@ module.exports = {
                 '^/ecs-server':'',
             }
         },
+        '/video': { //代理的名字
+            target:'http://172.16.1.253:12308/api/',
+            ws: true,
+            changeOrigin: true,
+            pathRewrite:{
+                '^/video':'',
+            }
+        },
       }
   },
 //   css: {