首页 接口联调提交

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/FocusedMonitoring/index.vue

@@ -14,13 +14,13 @@
       </div>
       <div class="monitor-item">
         <p>
-          <span class="abnormal">0</span>
-          <span>/0</span>
+          <span class="abnormal">{{ trafficIncidents[0] }}</span>
+          <span>/{{ trafficIncidents[1] }}</span>
         </p>
         <div>交通事件</div>
       </div>
       <div class="monitor-item">
-        <span>0</span>
+        <span>{{ constructionSection }}</span>
         <span class="unit">处</span>
         <div>施工路段</div>
       </div>
@@ -34,7 +34,7 @@
         <div>异常设备</div>
       </div>
       <div class="monitor-item">
-        <span>13</span>
+        <span>{{ perceiveEvent }}</span>
         <div>感知事件</div>
       </div>
       <div class="monitor-item">
@@ -46,11 +46,53 @@
 </template>
 <script>
 import Bg2 from "@screen/components/Decorations/bg-2.vue"
+import request from "@/utils/request";
 
 export default {
   name: "FocusedMonitoring",
   components: {
     Bg2
+  },
+  data() {
+    return {
+      trafficIncidents: [0, 0],
+      constructionSection: 0,
+      perceiveEvent: 0,
+    }
+  },
+  created() {
+    Promise.allSettled([
+      // 交通事件, 施工路段
+      request({
+        url: `/business/trafficIncidents/getKeyData`,
+        method: "get",
+      }),
+      // 感知事件
+      request({
+        url: `/perceivedEvents/warning/warningTotal`,
+        method: "post",
+        data: {}
+      }),
+    ])
+      .then(([trafficIncidents, perceiveEvent]) => {
+        if (trafficIncidents.status === 'fulfilled' && trafficIncidents.value.code == 200) {
+          const data = trafficIncidents.value.data;
+
+          this.trafficIncidents = [
+            data.processing || 0,
+            data.total || 0
+          ];
+
+          this.constructionSection = data.construction || 0
+        }
+
+        if (perceiveEvent.status === 'fulfilled' && perceiveEvent.value.code == 200) {
+          const data = trafficIncidents.value.data;
+
+          this.perceiveEvent = data.number || 0;
+        }
+
+      })
   }
 }
 </script>