调用车辆信息接口

src/App.vue

@@ -362,7 +362,7 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import * as echarts from 'echarts';
 import useMqtt from '@/utils/useMqtt';
 import moment from 'moment';
-import { listData, selectIotlist } from '@/api/MqttTopic';
+import { listData, selectIotlist, carThawTimeInfolist } from '@/api/MqttTopic';
 const { startMqtt, unsubscribeTopic, unsubscribes } = useMqtt();
 // import Imgstobase64 from '@/components/Imgstobase64.vue';
 const mqttTopics = ref<any>(['warn', 'jd_info']);
@@ -382,6 +382,7 @@ const selectTab = (item: any, index: number) => {
     // 重新启动 MQTT 连接
     startMqtt(mqttTopics.value, handleMqttMessage);
     morenlist.value = item.id;
+    carThawTimeInfo();
     const loading = ElLoading.service({
         lock: true,
         text: 'Loading',
@@ -428,23 +429,7 @@ onMounted(() => {
 
 const coalgasData = ref<any>([]);
 
-const vehicleData = ref<any>([
-    {
-        data: [
-            {
-                trackName: '',
-                departureLocation: '',
-                carNum: '',
-                meterialName: '',
-                meterialWeight: '',
-                warehouseId: null,
-                thawTime: null,
-                runTime: null
-            }
-        ],
-        warehouseId: null
-    }
-]);
+const vehicleData = ref<any>([]);
 
 const runningstate = ref<string>('运行中');
 
@@ -482,7 +467,7 @@ const updateTime = () => {
 const progressbar = (item: any, index: number, ThawingtemperatureDatalength: number) => {
     const chartId = 'chartsjied' + index;
     const chartElement = document.getElementById(chartId);
-    console.log(item, index, ThawingtemperatureDatalength, 'item, index, ThawingtemperatureDatalength');
+    console.log(item, index, 'item, index, ThawingtemperatureDatalength');
     if (chartElement) {
         const myChart = echarts.init(chartElement);
         const option = {
@@ -504,7 +489,7 @@ const progressbar = (item: any, index: number, ThawingtemperatureDatalength: num
                     axisLabel: {
                         textStyle: {
                             color: '#ffffff',
-                            fontSize: '16'
+                            fontSize: '15'
                         }
                     },
                     axisLine: { show: false },
@@ -930,6 +915,7 @@ const uselistData = () => {
                 startMqtt(mqttTopics.value, handleMqttMessage);
                 // usemeterialParamlist(res.data[0].id);
                 morenlist.value = tabsdata.value[0].id;
+                carThawTimeInfo();
                 const loading = ElLoading.service({
                     lock: true,
                     text: 'Loading',
@@ -960,6 +946,66 @@ const uselistData = () => {
 //         });
 // };
 
+const carThawTimeInfo = () => {
+    carThawTimeInfolist()
+        .then((res: any) => {
+            if (res && res.code === 200) {
+                addd(res.data);
+            } else {
+                console.log('获取数据失败');
+            }
+        })
+        .catch((err: any) => {
+            console.log(err);
+        });
+};
+
+const addd = (data: any) => {
+    let matched = false; // 用来标记是否找到匹配项
+    const list = [];
+    data.forEach((item: any) => {
+        if (item.warehouseId === Number(morenlist.value)) {
+            list.push(item);
+            return;
+        }
+    });
+    if (list.length > 0) {
+        vehicleData.value = list;
+        nextTick(() => {
+            vehicleData.value[0].data.forEach((item: any, index: any) => {
+                progressbar(item, index, vehicleData.value[0].data.length);
+            });
+        });
+        matched = true; // 标记找到匹配项
+    }
+
+    // 如果没有匹配项，才清空 vehicleData.value
+    if (!matched) {
+        vehicleData.value = [
+            {
+                data: [
+                    {
+                        trackName: '',
+                        departureLocation: '',
+                        carNum: '',
+                        meterialName: '',
+                        meterialWeight: '',
+                        warehouseId: null,
+                        thawTime: null,
+                        runTime: null
+                    }
+                ],
+                warehouseId: null
+            }
+        ];
+        nextTick(() => {
+            vehicleData.value[0].data.forEach((item: any, index: any) => {
+                progressbar(item, index, vehicleData.value[0].data.length);
+            });
+        });
+    }
+};
+
 // 定义回调函数来处理收到的消息
 const handleMqttMessage = (topic: string, message: any) => {
     // console.log(`收到消息 - 主题: ${topic}, 内容: ${message}`);
@@ -977,56 +1023,7 @@ const handleMqttMessage = (topic: string, message: any) => {
     } else if (topic === 'jd_info') {
         try {
             const data = JSON.parse(message.toString());
-            let matched = false; // 用来标记是否找到匹配项
-            // console.log(data, Number(morenlist.value), 'datadatadata');
-            const list = [];
-            data.forEach((item: any) => {
-                if (item.warehouseId === Number(morenlist.value)) {
-                    list.push(item);
-                    console.log(list, 'vehicleData111111');
-                    // return;
-                }
-            });
-            if (list.length > 0) {
-                vehicleData.value = list;
-                vehicleData.value[0].data.forEach((item: any, index: any) => {
-                    progressbar(item, index, vehicleData.value[0].data.length);
-                });
-                // progressbar(vehicleData.value);
-                console.log(vehicleData.value, 'vehicleData');
-                matched = true; // 标记找到匹配项
-            }
-
-            // 如果没有匹配项，才清空 vehicleData.value
-            if (!matched) {
-                vehicleData.value = [
-                    {
-                        data: [
-                            {
-                                trackName: '',
-                                departureLocation: '',
-                                carNum: '',
-                                meterialName: '',
-                                meterialWeight: '',
-                                warehouseId: null,
-                                thawTime: null,
-                                runTime: null
-                            }
-                        ],
-                        // trackName: '',
-                        // departureLocation: '',
-                        // carNum: '',
-                        // meterialName: '',
-                        // meterialWeight: '',
-                        warehouseId: null
-                        // thawTime: null,
-                        // runTime: null
-                    }
-                ];
-                vehicleData.value[0].data.forEach((item: any, index: any) => {
-                    progressbar(item, index, vehicleData.value[0].data.length);
-                });
-            }
+            addd(data);
         } catch (error) {
             console.error('解析消息失败:', error);
         }
@@ -1075,9 +1072,6 @@ onMounted(() => {
     uselistData();
     // 连接 MQTT
     // startMqtt(mqttTopics.value, handleMqttMessage);
-    vehicleData.value[0].data.forEach((item: any, index: any) => {
-        progressbar(item, index, vehicleData.value[0].data.length);
-    });
 
     // 初始化自适应
     handleScreenAuto();

src/api/MqttTopic.ts

@@ -4,7 +4,8 @@ const MqttTopicApi = {
     query: '/mqtt/query',
     list: '/thaw/list',
     selectIot: '/warn/selectIot',
-    meterialParam: '/behavior/meterialParamByDp'
+    meterialParam: '/behavior/meterialParamByDp',
+    carThawTimeInfo: '/behavior/carThawTimeInfo'
 };
 
 export function querylist(parameter: any) {
@@ -15,6 +16,13 @@ export function querylist(parameter: any) {
     });
 }
 
+export function carThawTimeInfolist() {
+    return service({
+        url: MqttTopicApi.carThawTimeInfo,
+        method: 'get'
+    });
+}
+
 export function listData() {
     return service({
         url: MqttTopicApi.list,