大屏接口对接-device alarm

src/components/MineMonitor/LeftDeviceStatus.vue

@@ -8,7 +8,7 @@
       <div v-for="item in deviceStatusList" :key="item.id" class="status-item">
         <div :class="['percent', item.color]">{{ item.onlinePercent }}%</div>
         <div class="right-content">
-          <div class="name">{{ item.type }}</div>
+          <div class="name">{{ item.name }}</div>
           <div class="detail">
             <span class="online">在线: {{ item.online }}</span
             ><br />

src/components/MineMonitor/RightTodayAlarm.vue

@@ -48,8 +48,8 @@
           </dt>
           <template v-for="(item, index) in vehicleData" :key="index">
             <dd class="list-item" :class="getItemClass(item)">
-              <span>{{ item.vehicleOrDriver }}</span>
-              <span>{{ item.plateNumber }}</span>
+              <span>{{ item.driver }}</span>
+              <span>{{ item.licensePlate }}</span>
               <span>{{ item.alarmType }}</span>
               <span class="time-cell">
                 <div class="date-part">{{ item.alarmTime.split(' ')[0] }}</div>
@@ -72,8 +72,8 @@
           </dt>
           <template v-for="(item, index) in boundaryData" :key="index">
             <dd class="list-item" :class="getItemClass(item)">
-              <span>{{ item.personOrVehicle }}</span>
-              <span>{{ item.cardOrPlate }}</span>
+              <span>{{ item.driver }}</span>
+              <span>{{ item.licensePlate }}</span>
               <span class="time-cell">
                 <div class="date-part">{{ item.boundaryTime.split(' ')[0] }}</div>
                 <div class="time-part">{{ item.boundaryTime.split(' ')[1] }}</div>
@@ -97,7 +97,7 @@
           <template v-for="(item, index) in monitorData" :key="index">
             <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.equipname }}</span>
-              <span>{{ item.value }}</span>
+              <span>{{ item.value }}{{ item.unit }}</span>
               <span>{{ item.alarmlevel }}</span>
               <span class="time-cell">
                 <div class="date-part">{{ item.time.split(' ')[0] }}</div>
@@ -112,7 +112,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import { getSosList, getCarAlarmList, getFenceLogList, getOnlineAlarmList } from '@/api/index-dp';
  import {
   useMessage
@@ -120,13 +120,6 @@ import { getSosList, getCarAlarmList, getFenceLogList, getOnlineAlarmList } from
 
 const message = useMessage();
 
-// 定义tabs
-const tabs = ref([
-  { name: 'SOS报警', count: 0 },
-  { name: '车辆报警', count: 3 },
-  { name: '越界开采', count: 4 },
-  { name: '在线监测', count: 4 }
-])
 
 // 激活的tab索引
 const activeTab = ref(0)
@@ -171,8 +164,8 @@ const fetchSosData = async () => {
   const response = await getSosList();
     console.log(response, 'SOS报警列表')
   
-  if (response.data.status == 200) {
-    sosData.value = response.data.recordList || []
+  if (response.data.code == 200) {
+    sosData.value = response.data.data || []
   } else {
     message.error(response.data.msg)
   }
@@ -203,6 +196,15 @@ const fetchMonitorData = async () => {
 }
 
 
+// 定义tabs 使用computed使其具有响应性
+const tabs = computed(() => [
+  { name: 'SOS报警', count: sosData.value.length },
+  { name: '车辆报警', count: vehicleData.value.length },
+  { name: '越界开采', count: boundaryData.value.length }, 
+  { name: '在线监测', count: monitorData.value.length }
+])
+
+
 
 
 
@@ -478,7 +480,7 @@ background-size: cover;
   }
    &.status-hongse {
     span {
-      color: #FF852B;
+      color: #FF2C2C;
     }
   }
 }