对车辆信息数据

src/App.vue

@@ -182,36 +182,36 @@
                             <div class="Freezer_middle_centre_title">车辆信息</div>
                             <div v-for="(item, index) in vehicleData" :key="index" class="Freezer_middle_centre_list">
                                 <div class="Freezer_middle_centre_listone one">
-                                    <div class="Freezer_middle_centre_listtitle">{{ item.time ? item.time : '' }}</div>
-                                    <div>停留时间</div>
+                                    <div class="Freezer_middle_centre_listtitle">{{ item.trackName ? item.trackName : '暂无' }}</div>
+                                    <div>轨道名称</div>
                                 </div>
                                 <div class="Freezer_middle_centre_listone one2">
                                     <div class="Freezer_middle_centre_listtitle">
-                                        {{ item.location ? item.location : '' }}
+                                        {{ item.departureLocation ? item.departureLocation : '暂无' }}
                                     </div>
                                     <div>出发地点</div>
                                 </div>
                                 <div class="Freezer_middle_centre_listone one3">
                                     <div class="Freezer_middle_centre_listtitle">
-                                        {{ item.railwaycarriage ? item.railwaycarriage : '' }}
+                                        {{ item.carNum ? item.carNum : '暂无' }}
                                     </div>
-                                    <div>车厢数量</div>
+                                    <div>车厢编号</div>
                                 </div>
-                                <div class="Freezer_middle_centre_listone one4">
+                                <!-- <div class="Freezer_middle_centre_listone one4">
                                     <div class="Freezer_middle_centre_listtitle">
                                         {{ item.watercontent ? item.watercontent : '' }}
                                     </div>
                                     <div>含水量</div>
-                                </div>
+                                </div> -->
                                 <div class="Freezer_middle_centre_listone one5">
                                     <div class="Freezer_middle_centre_listtitle">
-                                        {{ item.Typeofitem ? item.Typeofitem : '' }}
+                                        {{ item.meterialName ? item.meterialName : '暂无' }}
                                     </div>
                                     <div>物品种类</div>
                                 </div>
                                 <div class="Freezer_middle_centre_listone one6">
                                     <div class="Freezer_middle_centre_listtitle">
-                                        {{ item.quality ? item.quality : '' }}
+                                        {{ item.meterialWeight ? item.meterialWeight : '暂无' }}
                                     </div>
                                     <div>货物质量</div>
                                 </div>
@@ -321,21 +321,23 @@ import moment from 'moment';
 import { listData, selectIotlist, meterialParamlist } from '@/api/MqttTopic';
 const { startMqtt, unsubscribeTopic, unsubscribes } = useMqtt();
 // import Imgstobase64 from '@/components/Imgstobase64.vue';
-const mqttTopics = ref<any>(['warn']);
+const mqttTopics = ref<any>(['warn', 'jd_info']);
 const currentDate = ref<string>('');
 const currentTime = ref<string>('');
 const tabsdata = ref<any>([]);
 const activeTab = ref(0);
+const morenlist = ref<string>('');
 
 const selectTab = (item: any, index: number) => {
     activeTab.value = index;
     // 取消订阅之前的 topic
     unsubscribes();
     // 添加当前选中的 topic
-    mqttTopics.value = ['warn', item.topic];
+    mqttTopics.value = ['warn', 'jd_info', item.topic];
     usemeterialParamlist(item.id);
     // 重新启动 MQTT 连接
     startMqtt(mqttTopics.value, handleMqttMessage);
+    morenlist.value = item.id;
 };
 const falog = ref<boolean>(false);
 const tableData = ref<any>();
@@ -376,16 +378,7 @@ onMounted(() => {
 
 const coalgasData = ref<any>([]);
 
-const vehicleData = ref<any>([
-    {
-        time: '8小时',
-        location: '辽宁沈阳',
-        railwaycarriage: '10节',
-        watercontent: '8m³',
-        Typeofitem: '易燃易爆',
-        quality: '1.56吨'
-    }
-]);
+const vehicleData = ref<any>([]);
 
 const runningstate = ref<string>('运行中');
 
@@ -817,7 +810,7 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
                 // }
             ]
         };
-        console.log('bgImageURL', bgImageURL);
+        // console.log('bgImageURL', bgImageURL);
         myChart.setOption(option);
 
         const resizeHandler = () => {
@@ -857,9 +850,10 @@ const uselistData = () => {
         .then((res: any) => {
             if (res && res.code === 200) {
                 tabsdata.value = res.data;
-                mqttTopics.value = ['warn', res.data[0].topic];
+                mqttTopics.value = ['warn', 'jd_info', res.data[0].topic];
                 startMqtt(mqttTopics.value, handleMqttMessage);
                 usemeterialParamlist(res.data[0].id);
+                morenlist.value = tabsdata.value[0].id;
             } else {
                 console.log('获取数据失败');
             }
@@ -898,6 +892,34 @@ const handleMqttMessage = (topic: string, message: any) => {
         } catch (error) {
             console.error('解析消息失败:', error);
         }
+    } else if (topic === 'jd_info') {
+        try {
+            const data = JSON.parse(message.toString());
+            let matched = false; // 用来标记是否找到匹配项
+
+            data.forEach((item: any) => {
+                if (item.warehouseId === Number(morenlist.value)) {
+                    vehicleData.value = [item];
+                    matched = true; // 标记找到匹配项
+                }
+            });
+
+            // 如果没有匹配项，才清空 vehicleData.value
+            if (!matched) {
+                vehicleData.value = [
+                    {
+                        trackName: '',
+                        departureLocation: '',
+                        carNum: '',
+                        meterialName: '',
+                        meterialWeight: '',
+                        warehouseId: null
+                    }
+                ];
+            }
+        } catch (error) {
+            console.error('解析消息失败:', error);
+        }
     } else {
         try {
             const data = JSON.parse(message.toString());
@@ -926,7 +948,7 @@ const handleMqttMessage = (topic: string, message: any) => {
             ThawingtemperatureData.value = data.buttom.map((item: any) => {
                 return item.state;
             });
-            console.log('ThawingtemperatureData', ThawingtemperatureData.value);
+            // console.log('ThawingtemperatureData', ThawingtemperatureData.value);
             ThawingtemperatureData.value.forEach((item: any, index: any) => {
                 initChart(item, index, ThawingtemperatureData.value.length);
             });
@@ -942,7 +964,7 @@ onMounted(() => {
 
     uselistData();
     // 连接 MQTT
-    startMqtt(mqttTopics.value, handleMqttMessage);
+    // startMqtt(mqttTopics.value, handleMqttMessage);
 
     // 初始化自适应
     handleScreenAuto();
@@ -1428,7 +1450,7 @@ body {
                         }
                         .one3 {
                             position: absolute;
-                            left: 17rem;
+                            left: 20rem;
                             top: 1.1rem;
                         }
                         .one4 {