调整

src/layout/components/Navbar.vue

@@ -182,12 +182,16 @@ export default {
   },
   mounted() {
     msgAlarmWebAlarm().then((res) => {
-      let data = res.data.webAlarm;
+      if(res.code==200){
+        let data = res.data.webAlarm;
       if (data.length > 0) {
         data.forEach((element) => {
           this.$store.commit("app/warningSocketAdd", element);
         });
       }
+      }else{
+      }
+      
     });
   },
   methods: {

src/layout/index.vue

@@ -10,27 +10,9 @@
     <div class="main-container">
       <app-main />
     </div>
-
-    <el-dialog width="30%" v-for="(item, index) in warningSocketList" :visible.sync="item.show"
+    <!-- <el-dialog width="30%" v-for="(item, index) in warningSocketList" :visible.sync="item.show"
       :top="100 + index * 40 + 'px'" class="0" title="报警信息提示" :show-close="false" :close-on-click-modal="false">
-      <!-- <div style="display: flex;align-items: center;">
-        <img style="width: 70px;height: 70px;margin-right: 15px;" :src="warningSocket.data.imageUrls">
-        <div>
-          <div> {{ warningSocket.data.railwayName }}</div>
-          <div style="padding: 2px 10px;margin-top: 5px;border-radius: 5px;display: flex;">
-            <div style="margin-right: 10px;">{{ warningSocket.data.alarmTime }}</div>
-            <div style="margin-right: 10px;">{{ warningSocket.data.releasedTime }}</div>
-            <div style="margin-right: 10px;">{{ warningSocket.data.alarmType == 1 ? '泥石流' : '' }}</div>
-            <div style="margin-right: 15px;">{{ warningSocket.data.lineDirStr }}</div>
-            <div style="margin-right: 15px;">里程位置{{ warningSocket.data.alarmMile }}</div>
-            <div style="margin-right: 15px;">里程范围 {{ warningSocket.data.beginMile }}</div>
-          </div>
-        </div>
-      </div> -->
-
       <div class="warning-view">
-        <!-- <el-image style="color:cornflowerblue" class="warning-image" cursor:pointer :src="item.imageUrls[0]"
-          :preview-src-list="item.imageUrls" fit="contain"></el-image> -->
         <img style="width: 200px; margin-right: 15px" :src="item.data.imageUrls && item.data.imageUrls[0]" />
         <div class="warning-content">
           <div class="text-base text-1">
@@ -47,11 +29,6 @@
             <span>{{ item.data.lineDirStr }},</span>
             <span>里程位置{{ item.data.alarmMile }}</span>
           </div>
-
-          <!-- <div class="text-base"></div> -->
-          <!-- <div class="text-base">行别：</div> -->
-
-          <!-- <div class="text-base">经度纬度：54,345,65.235</div> -->
           <div class="text-base">{{ item.data.alarmTime }}</div>
         </div>
       </div>
@@ -64,7 +41,36 @@
           我知道了
         </div>
       </span>
-    </el-dialog>
+    </el-dialog> -->
+
+    <div
+    id="close"
+      class="warnDialog"
+    >
+      <div>
+        <div class="closeBtn" @click="toClose">
+          <i class="el-icon-close"></i>
+        </div>
+        <div class="warnTitle">
+          <img
+            width="16"
+            height="16"
+            src="@/assets/warnTitleIcon.png/"
+            alt=""
+          >
+          未解除报警个数：<span class="warnNum" id="warnNum">{{ this.warnNum }}</span>
+        </div>
+        <div style="margin-top:10px;color:#fff">
+          最新报警时间：<span id="warnTime">{{ this.getNewerTime }}</span>
+        </div>
+        <el-button
+          type="primary"
+          size="small"
+          style="margin-top: 10px; float: right; pointer-events: all"
+          @click="showWarn"
+        >查看详细信息</el-button>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -73,9 +79,10 @@ import { Navbar, Sidebar, AppMain } from "./components";
 import Breadcrumb from "@/components/Breadcrumb";
 import ResizeMixin from "./mixin/ResizeHandler";
 import Socket from "@/socket/socket";
-import { msgAlarmRead } from "@/api/alarmList";
+import { msgAlarmRead,msgAlarmWebAlarm,msgAlarmList } from "@/api/alarmList";
 import { sdkGetMessage } from "@/api/sdk";
 import store from "@/store";
+import router from '@/router'
 
 export default {
   name: "Layout",
@@ -93,6 +100,14 @@ export default {
       }
     },
   },
+  data(){
+    return{
+      warnVisible: false,
+      warnNum: 0,
+      getNewerTime:'',
+      warningSocketList: null,
+    }
+  },
   computed: {
     isHome() {
       return this.$route.path == "/dashboard";
@@ -121,10 +136,82 @@ export default {
       warningSocketList: [],
     };
   },
+  created(){
+    this.$eventBus.$on('customEvent', () => {
+        // 执行需要触发的方法
+        this.getWtsAlarm()
+    });
+  },
   mounted() {
+    this.getWtsAlarm()
     this.startWebSocket();
   },
   methods: {
+   getWtsAlarm(){
+      const params = {
+      pageNum: 1,
+      pageSize: 100000000,
+      isRelease: '2'
+    }
+    msgAlarmList(params).then((res) => {
+      const timeArray = res.data.records.map(item =>
+        item.alarmTime
+      )
+      // 获取当前时间
+      const currentTime = new Date()
+
+      // 初始化最近时间为数组中的第一个时间
+      let closestTime = new Date(timeArray[0])
+      let timeDiff = Math.abs(currentTime - closestTime)
+
+      // 遍历数组中的时间，找到离当前时间最近的时间
+      timeArray.forEach(timeStr => {
+        const time = new Date(timeStr.replace(/-/g, '/').replace(' ', 'T'))
+        const diff = Math.abs(currentTime - time)
+        if (diff < timeDiff) {
+          closestTime = time
+          timeDiff = diff
+        }
+      })
+      if (res.data.records.length > 0) {
+        // this.warnVisible = true
+        
+        this.warnNum = res.data.records.length
+      this.getNewerTime= this.getTime(closestTime)
+      const closeBox = document.getElementById('close');
+        closeBox.style.display='block'
+        document.getElementById('warnNum').textContent=this.warnNum
+        document.getElementById('warnTime').textContent=this.getNewerTime
+        if (document.querySelector('#audio')) {
+          const audio = document.querySelector('#audio')
+          audio.muted = false
+          audio.play()
+        } else {
+          var audio = document.createElement('audio')
+          audio.setAttribute('id', 'audio')
+          audio.src = './video.mp3'
+          document.body.append(audio)
+          audio.play()
+
+          setTimeout(() => {
+            document.body.removeChild(audio)
+          }, 3000)
+        }
+      }
+    })
+    },
+    getTime(data){
+      const date = new Date(data);
+
+// 获取年、月、日、时、分、秒
+const year = date.getFullYear();
+const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
+const day = String(date.getDate()).padStart(2, '0');
+const hours = String(date.getHours()).padStart(2, '0');
+const minutes = String(date.getMinutes()).padStart(2, '0');
+const seconds = String(date.getSeconds()).padStart(2, '0');
+return  `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+    },
     handleClickOutside() {
       this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
     },
@@ -141,30 +228,28 @@ export default {
 
             resolve();
           },
-          "socket-message": (res) => {
+          "socket-message": async(res) => {
             console.log("Socket接受信息", res);
             if (res.code == 110) {
               // this.warningSocket.show = true
               // this.warningSocket.data = res.data
               // console.log(this.warningSocket.data)
-
+               await msgAlarmWebAlarm().then((res) => {
+                this.warnNum =res.data.webAlarmNum
+                }
+              )
+              this.getWtsAlarm()
+              // this.warnVisible = true
+              const closeBox = document.getElementById('close');
+        closeBox.style.display='block'
+        document.getElementById('warnNum').textContent=this.warnNum
+        document.getElementById('warnTime').textContent=this.getNewerTime
               this.warningSocketList.push({
                 show: true,
                 data: res.data,
               });
 
-              if (document.querySelector('audio')) {
-                document.querySelector("audio").play()
-              } else {
-                var audio = document.createElement("audio")
-                audio.src = './video.mp3'
-                document.body.append(audio)
-                audio.play()
-
-                setTimeout(() => {
-                  document.body.removeChild(audio)
-                }, 3000)
-              }
+              
               this.$store.state.app.warningSocket.list.push(res.data);
               this.$store.state.app.warningSocket.list = JSON.parse(
                 JSON.stringify(this.$store.state.app.warningSocket.list)
@@ -216,6 +301,18 @@ export default {
       this.warningSocketList[index].show = false;
       this.warningSocketList.splice(index, 1);
     },
+    showWarn() {
+      if (this.$route.path === '/list') {
+        window.refreshList()
+      } else router.push({ path: '/list', query: { zhangtai: '2' }})
+    },
+    toClose(){
+      const close = document.getElementById('close');
+      console.log(close,'vvvvv');
+      close.style.display='none'
+      // this.warnVisible=false
+      // alert(this.warnVisible)
+    }
   },
 };
 </script>
@@ -225,7 +322,6 @@ export default {
 @import "~@/styles/variables.scss";
 
 .nav-header {
-  background: red;
   width: 100%;
   height: 50px;
 }
@@ -360,4 +456,45 @@ export default {
     }
   }
 }
+.warnDialog {
+  display: block;
+  height: 130px;
+  width: 350px;
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  padding: 20px;
+  z-index: 999;
+  box-shadow: 0px 2px 12px 1px #0b285b;
+        border-radius: 12px;
+  background: linear-gradient(
+            183deg,
+            #2766dd 0%,
+            #0d2855 53%,
+            #041a3a 100%
+        );
+  .warnTitle {
+      width: 212px;
+      height: 32px;
+      line-height: 32px;
+      padding-left: 8px;
+      color: #fff;
+      background: url(../assets/warnTitle.png) center / 100%;
+  }
+  .warnNum {
+      padding: 0 6px;
+      font-weight: 400;
+      font-size: 20px;
+      color: #f00404;
+      cursor: pointer;
+  }
+}
+.closeBtn{
+  position:absolute;
+  top:12px;
+  right:12px;
+  color:#fff;
+  cursor: pointer;
+  z-index: 999;
+}
 </style>

src/main.js

@@ -20,6 +20,8 @@ import "./assets/fonts/iconfont.css";
 import hevueImgPreview from "hevue-img-preview";
 
 Vue.use(hevueImgPreview);
+// 创建事件总线
+Vue.prototype.$eventBus = new Vue();
 
 /**
  * If you don't want to use mock-server

src/views/account/locomotiveMsg/index.vue

@@ -115,6 +115,7 @@ export default {
     return {
       uploadDialog: false,
       fileList: [],
+      getEnds:'',
       addVehicleData: {
         dialogVisible: false
       },
@@ -147,6 +148,7 @@ export default {
   methods: {
     mountSaveBtn(payload) {
       let params = {
+        ends:this.getEnds,
         vehicleCode: payload.vehicleCode,
         terminalCode: payload.terminalCode
       }
@@ -454,7 +456,8 @@ export default {
       let params = {
         id: payload.data.id,
         vehicleCode: payload.data.vehicleCode,
-        vehicleName: payload.data.vehicleName,
+        vehicleType: payload.data.vehicleType,
+        ends: payload.data.ends,
         remark: payload.data.remark
       }
       vehicleUpdate(params).then(res => {
@@ -474,6 +477,7 @@ export default {
       })
     },
     openList(row) {
+      this.getEnds=row.ends
       this.mountListData.dialogVisible = true,
         this.mountListData.vehicleCode = row.vehicleCode
     }

src/views/alarmInformation/index.vue

@@ -507,6 +507,11 @@ export default {
     this.dataType("sys_line_dir");
     this.dataType("sys_alarm_type");
     this.dataType("sys_mileage");
+    if(this.$route.query.zhangtai){
+      this.isLock = "2";
+    this.msgAlarmList();
+    }
+    
   },
   methods: {
     detailsBtn(row) {