|
@@ -318,7 +318,7 @@ import { onMounted, onUnmounted, ref } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import * as echarts from 'echarts';
|
|
import useMqtt from '@/utils/useMqtt';
|
|
import useMqtt from '@/utils/useMqtt';
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
-import { listData, selectIotlist, meterialParamlist } from '@/api/MqttTopic';
|
|
|
|
|
|
+import { listData, selectIotlist } from '@/api/MqttTopic';
|
|
const { startMqtt, unsubscribeTopic, unsubscribes } = useMqtt();
|
|
const { startMqtt, unsubscribeTopic, unsubscribes } = useMqtt();
|
|
// import Imgstobase64 from '@/components/Imgstobase64.vue';
|
|
// import Imgstobase64 from '@/components/Imgstobase64.vue';
|
|
const mqttTopics = ref<any>(['warn', 'jd_info']);
|
|
const mqttTopics = ref<any>(['warn', 'jd_info']);
|
|
@@ -334,7 +334,7 @@ const selectTab = (item: any, index: number) => {
|
|
unsubscribes();
|
|
unsubscribes();
|
|
// 添加当前选中的 topic
|
|
// 添加当前选中的 topic
|
|
mqttTopics.value = ['warn', 'jd_info', item.topic];
|
|
mqttTopics.value = ['warn', 'jd_info', item.topic];
|
|
- usemeterialParamlist(item.id);
|
|
|
|
|
|
+ // usemeterialParamlist(item.id);
|
|
// 重新启动 MQTT 连接
|
|
// 重新启动 MQTT 连接
|
|
startMqtt(mqttTopics.value, handleMqttMessage);
|
|
startMqtt(mqttTopics.value, handleMqttMessage);
|
|
morenlist.value = item.id;
|
|
morenlist.value = item.id;
|
|
@@ -465,7 +465,11 @@ const progressbar = (datalist: any) => {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
barWidth: 20,
|
|
barWidth: 20,
|
|
- data: [datalist.jdTime === null ? 0 : Number(datalist.jdTime).toFixed(2)],
|
|
|
|
|
|
+ data: [
|
|
|
|
+ datalist[0].runTime === null || datalist[0].thawTime === ''
|
|
|
|
+ ? 0
|
|
|
|
+ : Number(datalist[0].runTime).toFixed(2)
|
|
|
|
+ ],
|
|
label: {
|
|
label: {
|
|
show: true,
|
|
show: true,
|
|
position: 'insideTop',
|
|
position: 'insideTop',
|
|
@@ -481,7 +485,11 @@ const progressbar = (datalist: any) => {
|
|
type: 'bar',
|
|
type: 'bar',
|
|
barWidth: 20,
|
|
barWidth: 20,
|
|
barGap: '-100%',
|
|
barGap: '-100%',
|
|
- data: [datalist.runTime === null ? 10 : Number(datalist.runTime).toFixed(2)],
|
|
|
|
|
|
+ data: [
|
|
|
|
+ datalist[0].thawTime === null || datalist[0].thawTime === ''
|
|
|
|
+ ? 10
|
|
|
|
+ : Number(datalist[0].thawTime).toFixed(2)
|
|
|
|
+ ],
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
color: {
|
|
color: {
|
|
@@ -505,7 +513,10 @@ const progressbar = (datalist: any) => {
|
|
show: true,
|
|
show: true,
|
|
position: 'right',
|
|
position: 'right',
|
|
formatter() {
|
|
formatter() {
|
|
- const total = datalist.runTime === null ? 0 : Number(datalist.runTime).toFixed(2); // 假设总条数为20
|
|
|
|
|
|
+ const total =
|
|
|
|
+ datalist[0].thawTime === null || datalist[0].thawTime === ''
|
|
|
|
+ ? 0
|
|
|
|
+ : Number(datalist[0].thawTime).toFixed(2); // 假设总条数为20
|
|
return `${total}h`;
|
|
return `${total}h`;
|
|
},
|
|
},
|
|
fontSize: 16,
|
|
fontSize: 16,
|
|
@@ -852,7 +863,7 @@ const uselistData = () => {
|
|
tabsdata.value = res.data;
|
|
tabsdata.value = res.data;
|
|
mqttTopics.value = ['warn', 'jd_info', res.data[0].topic];
|
|
mqttTopics.value = ['warn', 'jd_info', res.data[0].topic];
|
|
startMqtt(mqttTopics.value, handleMqttMessage);
|
|
startMqtt(mqttTopics.value, handleMqttMessage);
|
|
- usemeterialParamlist(res.data[0].id);
|
|
|
|
|
|
+ // usemeterialParamlist(res.data[0].id);
|
|
morenlist.value = tabsdata.value[0].id;
|
|
morenlist.value = tabsdata.value[0].id;
|
|
} else {
|
|
} else {
|
|
console.log('获取数据失败');
|
|
console.log('获取数据失败');
|
|
@@ -863,20 +874,20 @@ const uselistData = () => {
|
|
});
|
|
});
|
|
};
|
|
};
|
|
|
|
|
|
-const usemeterialParamlist = (item: any) => {
|
|
|
|
- const meterialId = Number(item);
|
|
|
|
- meterialParamlist(meterialId)
|
|
|
|
- .then((res: any) => {
|
|
|
|
- if (res && res.code === 200) {
|
|
|
|
- progressbar(res.data);
|
|
|
|
- } else {
|
|
|
|
- console.log('获取数据失败');
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- .catch((err: any) => {
|
|
|
|
- console.log(err);
|
|
|
|
- });
|
|
|
|
-};
|
|
|
|
|
|
+// const usemeterialParamlist = (item: any) => {
|
|
|
|
+// const meterialId = Number(item);
|
|
|
|
+// meterialParamlist(meterialId)
|
|
|
|
+// .then((res: any) => {
|
|
|
|
+// if (res && res.code === 200) {
|
|
|
|
+// progressbar(res.data);
|
|
|
|
+// } else {
|
|
|
|
+// console.log('获取数据失败');
|
|
|
|
+// }
|
|
|
|
+// })
|
|
|
|
+// .catch((err: any) => {
|
|
|
|
+// console.log(err);
|
|
|
|
+// });
|
|
|
|
+// };
|
|
|
|
|
|
// 定义回调函数来处理收到的消息
|
|
// 定义回调函数来处理收到的消息
|
|
const handleMqttMessage = (topic: string, message: any) => {
|
|
const handleMqttMessage = (topic: string, message: any) => {
|
|
@@ -900,6 +911,8 @@ const handleMqttMessage = (topic: string, message: any) => {
|
|
data.forEach((item: any) => {
|
|
data.forEach((item: any) => {
|
|
if (item.warehouseId === Number(morenlist.value)) {
|
|
if (item.warehouseId === Number(morenlist.value)) {
|
|
vehicleData.value = [item];
|
|
vehicleData.value = [item];
|
|
|
|
+ progressbar(vehicleData.value);
|
|
|
|
+ console.log(vehicleData.value, 'vehicleData');
|
|
matched = true; // 标记找到匹配项
|
|
matched = true; // 标记找到匹配项
|
|
}
|
|
}
|
|
});
|
|
});
|
|
@@ -913,9 +926,12 @@ const handleMqttMessage = (topic: string, message: any) => {
|
|
carNum: '',
|
|
carNum: '',
|
|
meterialName: '',
|
|
meterialName: '',
|
|
meterialWeight: '',
|
|
meterialWeight: '',
|
|
- warehouseId: null
|
|
|
|
|
|
+ warehouseId: null,
|
|
|
|
+ thawTime: null,
|
|
|
|
+ runTime: null
|
|
}
|
|
}
|
|
];
|
|
];
|
|
|
|
+ progressbar(vehicleData.value);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
} catch (error) {
|
|
console.error('解析消息失败:', error);
|
|
console.error('解析消息失败:', error);
|