|
|
@@ -1,46 +1,61 @@
|
|
|
<template>
|
|
|
- <div class="warnPageClass">
|
|
|
- <div class="messagePageClass">
|
|
|
- <div class="titleBg">
|
|
|
- <div class="titleFont">设备告警</div>
|
|
|
- </div>
|
|
|
- <div class="divContent">
|
|
|
- <div style="padding-left: 1vw;max-height: 30vh;overflow-y: scroll;" class="tableClass">
|
|
|
- <div v-for="(item, index) in messageList" style="margin-top:20px;">
|
|
|
- <div
|
|
|
- style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
|
|
|
- <div>
|
|
|
- <img v-if="item.type == 1" src="@/assets/images/home/Rectangle8.png" />
|
|
|
- <img v-if="item.type == 2" src="@/assets/images/home/Rectangle8(1).png" />
|
|
|
- </div>
|
|
|
- <div class="contentClass">{{ item.content }}</div>
|
|
|
- <div class="timeClass">{{ item.time }}</div>
|
|
|
- </div>
|
|
|
- <el-divider />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="warnPageClass">
|
|
|
+ <div class="messagePageClass">
|
|
|
+ <div class="titleBg">
|
|
|
+ <div class="titleFont">设备告警</div>
|
|
|
+ </div>
|
|
|
+ <div class="divContent">
|
|
|
+ <div style="padding-left: 1vw;max-height: 30vh;overflow-y: scroll;" class="tableClass">
|
|
|
+ <div v-for="(item, index) in messageList" style="margin-top:20px;" :key="index">
|
|
|
+ <div style="display: flex;flex-direction: row;justify-content: space-around;align-items: center;">
|
|
|
+ <div>
|
|
|
+ <img v-if="item.type == 1" src="@/assets/images/home/Rectangle8.png" />
|
|
|
+ <img v-if="item.type == 2" src="@/assets/images/home/Rectangle8(1).png" />
|
|
|
+ </div>
|
|
|
+ <div class="contentClass">{{ item.content }}</div>
|
|
|
+ <div class="timeClass">{{moment(item.time).format("MM/DD HH:mm") }}</div>
|
|
|
</div>
|
|
|
+ <el-divider />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- <div class="title">告警信息</div>-->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- <div class="title">告警信息</div>-->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup name="CarInfo" lang="ts">
|
|
|
+import { offlinelist } from '@/api/gpsData';
|
|
|
+import moment from 'moment';
|
|
|
+
|
|
|
+const messageList = ref([]);
|
|
|
+
|
|
|
+const getList = () => {
|
|
|
+ offlinelist().then(res => {
|
|
|
+ let msg: any[] = [];
|
|
|
+ Object.keys(res).forEach(i => {
|
|
|
+ let d = res[i];
|
|
|
+ if (d["station"].indexOf("闽") != -1) {
|
|
|
+ d["type"] = 1;
|
|
|
+ d["content"] = d["station"] + "Gps离线,请及时处理!";
|
|
|
+ } else {
|
|
|
+ d["type"] = 2;
|
|
|
+ d["content"] = d["station"] + "快递柜离线,请及时处理!";
|
|
|
+ }
|
|
|
+ msg.push(res[i]);
|
|
|
+ })
|
|
|
+ //排序
|
|
|
+ msg = msg.sort((a, b) => {
|
|
|
+ return moment(a.time).unix() - moment(b.time).unix();
|
|
|
+ })
|
|
|
+ messageList.value = msg;
|
|
|
+
|
|
|
+ })
|
|
|
+};
|
|
|
|
|
|
-const messageList = ref([{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 2 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 2 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 2 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 },
|
|
|
-{ carNum: '闽JY3013', content: '闽J-Y3013GPS已离线,请及时处理。', station: '铁湖站', time: '5/10 17:26', type: 1 }
|
|
|
-]);
|
|
|
|
|
|
onMounted(() => {
|
|
|
- // getList();
|
|
|
+ getList();
|
|
|
});
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|