掉接口

src/App.vue

@@ -61,7 +61,7 @@
                             class="alarm_statustitle"
                             @click="showAlam(item)"
                         >
-                            {{ item.device }}{{ item.warnName }}
+                            {{ item.warnName }}
                         </div>
                     </div>
                 </div>
@@ -73,11 +73,15 @@
                                 <div class="Freezer_left_databoxs_listboxs">
                                     <div class="Freezer_left_databoxs_list">
                                         压力：
-                                        <div class="Freezer_left_databoxs_lists">{{ items.pressure.toFixed(2) }} Pa</div>
+                                        <div class="Freezer_left_databoxs_lists">
+                                            {{ items.pressure.toFixed(2) }} Pa
+                                        </div>
                                     </div>
                                     <div class="Freezer_left_databoxs_list">
                                         温度：
-                                        <div class="Freezer_left_databoxs_lists">{{ items.temperature.toFixed(2) }} ℃</div>
+                                        <div class="Freezer_left_databoxs_lists">
+                                            {{ items.temperature.toFixed(2) }} ℃
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -95,11 +99,15 @@
                                     <div class="Freezer_left_databoxs_listboxs2">
                                         <div class="Freezer_left_databoxs_list2">
                                             压力：
-                                            <div class="Freezer_left_databoxs_lists2">{{ items.pressure.toFixed(2) }} Pa</div>
+                                            <div class="Freezer_left_databoxs_lists2">
+                                                {{ items.pressure.toFixed(2) }} Pa
+                                            </div>
                                         </div>
                                         <div class="Freezer_left_databoxs_list2">
                                             温度：
-                                            <div class="Freezer_left_databoxs_lists2">{{ items.temperature.toFixed(2) }} ℃</div>
+                                            <div class="Freezer_left_databoxs_lists2">
+                                                {{ items.temperature.toFixed(2) }} ℃
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -114,11 +122,15 @@
                                     <div class="Freezer_left_databoxs_listboxs2">
                                         <div class="Freezer_left_databoxs_list2">
                                             压力：
-                                            <div class="Freezer_left_databoxs_lists2">{{ items.pressure.toFixed(2) }} Pa</div>
+                                            <div class="Freezer_left_databoxs_lists2">
+                                                {{ items.pressure.toFixed(2) }} Pa
+                                            </div>
                                         </div>
                                         <div class="Freezer_left_databoxs_list2">
                                             温度：
-                                            <div class="Freezer_left_databoxs_lists2">{{ items.temperature.toFixed(2) }} ℃</div>
+                                            <div class="Freezer_left_databoxs_lists2">
+                                                {{ items.temperature.toFixed(2) }} ℃
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -219,7 +231,7 @@
                     </div>
                     <div class="Freezer_right" v-if="ThawingtemperatureData.length === 3">
                         <div v-for="(item, index) in ThawingtemperatureData" :key="index" class="Freezer_right_list">
-                            <div class="Freezer_right_listtitle">解冻温度</div>
+                            <div class="Freezer_right_listtitle">{{ item.name }}温度</div>
                             <div class="Freezer_right_listdata">
                                 <div class="Freezer_right_listdata_left">
                                     <div :id="'charts' + index" class="chart-container"></div>
@@ -227,15 +239,15 @@
                                 <div class="Freezer_right_listdata_right">
                                     <div class="Freezer_right_listdata_rightboxs">
                                         <div class="Freezer_right_listdata_rightboxsname">最高温度</div>
-                                        <div>{{ item.highest }}<span style="font-size: 1.1rem">℃</span></div>
+                                        <div>{{ item.max.toFixed(2) }}<span style="font-size: 1.1rem">℃</span></div>
                                     </div>
                                     <div class="Freezer_right_listdata_rightboxs">
                                         <div class="Freezer_right_listdata_rightboxsname">平均温度</div>
-                                        <div>{{ item.average }}<span style="font-size: 1.1rem">℃</span></div>
+                                        <div>{{ item.avg.toFixed(2) }}<span style="font-size: 1.1rem">℃</span></div>
                                     </div>
                                     <div class="Freezer_right_listdata_rightboxs">
                                         <div class="Freezer_right_listdata_rightboxsname">最低温度</div>
-                                        <div>{{ item.minimum }}<span style="font-size: 1.1rem">℃</span></div>
+                                        <div>{{ item.min.toFixed(2) }}<span style="font-size: 1.1rem">℃</span></div>
                                     </div>
                                 </div>
                             </div>
@@ -243,7 +255,7 @@
                     </div>
                     <div class="Freezer_right2" v-else-if="ThawingtemperatureData.length === 2">
                         <div v-for="(item, index) in ThawingtemperatureData" :key="index" class="Freezer_right_list2">
-                            <div class="Freezer_right_listtitle2">解冻温度</div>
+                            <div class="Freezer_right_listtitle2">{{ item.name }}温度</div>
                             <div class="Freezer_right_listdata2">
                                 <div class="Freezer_right_listdata_left2">
                                     <div :id="'charts' + index" class="chart-container2"></div>
@@ -251,15 +263,15 @@
                                 <div class="Freezer_right_listdata_right2">
                                     <div class="Freezer_right_listdata_rightboxs2">
                                         <div class="Freezer_right_listdata_rightboxsname2">最高温度</div>
-                                        <div>{{ item.highest }}<span style="font-size: 1.1rem">℃</span></div>
+                                        <div>{{ item.max.toFixed(3) }}<span style="font-size: 1.1rem">℃</span></div>
                                     </div>
                                     <div class="Freezer_right_listdata_rightboxs2">
                                         <div class="Freezer_right_listdata_rightboxsname2">平均温度</div>
-                                        <div>{{ item.average }}<span style="font-size: 1.1rem">℃</span></div>
+                                        <div>{{ item.avg.toFixed(3) }}<span style="font-size: 1.1rem">℃</span></div>
                                     </div>
                                     <div class="Freezer_right_listdata_rightboxs2">
                                         <div class="Freezer_right_listdata_rightboxsname2">最低温度</div>
-                                        <div>{{ item.minimum }}<span style="font-size: 1.1rem">℃</span></div>
+                                        <div>{{ item.min.toFixed(3) }}<span style="font-size: 1.1rem">℃</span></div>
                                     </div>
                                     <!-- <Imgstobase64 /> -->
                                 </div>
@@ -276,7 +288,7 @@ import { onMounted, onUnmounted, ref } from 'vue';
 import * as echarts from 'echarts';
 import useMqtt from '@/utils/useMqtt';
 import moment from 'moment';
-import { listData } from '@/api/MqttTopic';
+import { listData, selectIotlist, meterialParamlist } from '@/api/MqttTopic';
 const { startMqtt, unsubscribeTopic, unsubscribes } = useMqtt();
 // import Imgstobase64 from '@/components/Imgstobase64.vue';
 const mqttTopics = ref<any>(['warn']);
@@ -300,14 +312,24 @@ const alarmdata = ref<any>([]);
 const falogTitle = ref<string>('');
 
 const showAlam = (item: any) => {
-    falogTitle.value = item.thawName;
-    const formattedItem = {
-        ...item,
-        createTime: moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
-    };
-    tableData.value = [formattedItem];
-    progressbars(item);
-    falog.value = true;
+    selectIotlist(item.id)
+        .then((res: any) => {
+            if (res && res.code === 200) {
+                falogTitle.value = res.data.thawName;
+                const formattedItem = {
+                    ...res.data,
+                    createTime: moment(res.data.createTime).format('YYYY-MM-DD HH:mm:ss')
+                };
+                tableData.value = [formattedItem];
+                progressbars(res.data.warnEchars);
+                falog.value = true;
+            } else {
+                console.log('获取数据失败');
+            }
+        })
+        .catch((err: any) => {
+            console.log(err);
+        });
 };
 
 const closeModal = () => {
@@ -335,11 +357,7 @@ const vehicleData = ref<any>([
 
 const runningstate = ref<string>('运行中');
 
-const ThawingtemperatureData = ref<any>([
-    { highest: '84', average: '23', minimum: '11' },
-    { highest: '84', average: '23', minimum: '11' },
-    { highest: '84', average: '23', minimum: '11' }
-]);
+const ThawingtemperatureData = ref<any>([]);
 
 const thawData = ref<any>([]);
 
@@ -370,7 +388,7 @@ const updateTime = () => {
     currentTime.value = now.toLocaleTimeString();
 };
 
-const progressbar = () => {
+const progressbar = (datalist: any) => {
     const chartElement = document.getElementById('chartss');
     if (chartElement) {
         const myChart = echarts.init(chartElement);
@@ -421,7 +439,7 @@ const progressbar = () => {
                         }
                     },
                     barWidth: 20,
-                    data: [10],
+                    data: [datalist.toFixed(2)],
                     label: {
                         show: true,
                         position: 'insideTop',
@@ -437,7 +455,7 @@ const progressbar = () => {
                     type: 'bar',
                     barWidth: 20,
                     barGap: '-100%',
-                    data: [20],
+                    data: [40],
                     itemStyle: {
                         normal: {
                             color: {
@@ -461,7 +479,7 @@ const progressbar = () => {
                         show: true,
                         position: 'right',
                         formatter(params: any) {
-                            const total = 20; // 假设总条数为20
+                            const total = 40; // 假设总条数为20
                             return `${total}h`;
                         },
                         fontSize: 16,
@@ -489,15 +507,15 @@ const progressbar = () => {
 };
 
 const progressbars = (datas: any) => {
-    if (!datas || !datas.warnEchars) {
-        console.error('Invalid datas object or warnEchars is missing:', datas);
-        return;
-    }
+    // if (!datas || !datas.warnEchars) {
+    //     console.error('Invalid datas object or warnEchars is missing:', datas);
+    //     return;
+    // }
     // 打印原始时间戳数组
     // console.log(datas.warnEchars.echarsTime, '原始时间戳数组');
     const time = [];
     // 将时间戳数组转换为格式化的日期时间字符串数组
-    datas.warnEchars.echarsTime.forEach((item: any) => {
+    datas.echarsTime.forEach((item: any) => {
         const formattedTimeArray = parseInt(item);
         time.push(moment(formattedTimeArray).format('YYYY-MM-DD HH:mm:ss'));
     });
@@ -510,6 +528,18 @@ const progressbars = (datas: any) => {
     if (chartElement) {
         const myChart = echarts.init(chartElement);
         const option = {
+            toolbox: {
+                left: 'center',
+                itemSize: 25,
+                top: 55,
+                feature: {
+                    dataZoom: {
+                        yAxisIndex: 'none'
+                        // icon: '此处需要svg坐标路径path'
+                    },
+                    restore: {}
+                }
+            },
             grid: {
                 top: '4%',
                 bottom: '7%',
@@ -517,7 +547,6 @@ const progressbars = (datas: any) => {
                 right: '4%'
             },
             color: ['#FF0000'],
-
             tooltip: {
                 trigger: 'axis'
             },
@@ -533,14 +562,14 @@ const progressbars = (datas: any) => {
                 x: 'center',
                 type: 'value',
                 axisLabel: {
-                    color: '#fff' // X轴字体颜色
+                    color: '#fff' // Y轴字体颜色
                 }
             },
             series: [
                 {
-                    name: '销量',
+                    name: '',
                     type: 'line',
-                    data: datas.warnEchars.echarsValue
+                    data: datas.echarsValue
                 }
             ]
         };
@@ -817,6 +846,7 @@ const handleMqttMessage = (topic: string, message: any) => {
                 alarmdata.value.shift();
             }
             alarmdata.value.push(data);
+            // console.log(alarmdata.value, 'alarmdata.value');
         } catch (error) {
             console.error('解析消息失败:', error);
         }
@@ -824,6 +854,8 @@ const handleMqttMessage = (topic: string, message: any) => {
         try {
             const data = JSON.parse(message.toString());
             coalgasData.value = data.top;
+            // console.log(data, 'data');
+
             thawData.value = data.buttom.map((buttomItem: any) => {
                 // 处理 middleVo
                 const middleVoList = buttomItem.middleVo.flatMap((middleVo: any) => [middleVo.fan, ...middleVo.home]);
@@ -843,6 +875,13 @@ const handleMqttMessage = (topic: string, message: any) => {
 
                 return { list: flattenedList };
             });
+            ThawingtemperatureData.value = data.buttom.map((item: any) => {
+                return item.state;
+            });
+            console.log('ThawingtemperatureData', ThawingtemperatureData.value);
+            ThawingtemperatureData.value.forEach((item: any, index: any) => {
+                initChart(item, index, ThawingtemperatureData.value.length);
+            });
         } catch (error) {
             console.error('解析消息失败:', error);
         }
@@ -852,10 +891,19 @@ const handleMqttMessage = (topic: string, message: any) => {
 onMounted(() => {
     updateTime(); // 初始化时立即更新一次时间
     const interval = setInterval(updateTime, 1000);
-    progressbar();
-    ThawingtemperatureData.value.forEach((item, index) => {
-        initChart(item, index, ThawingtemperatureData.value.length);
-    });
+    const meterialId = 1;
+    meterialParamlist(meterialId)
+        .then((res: any) => {
+            if (res && res.code === 200) {
+                console.log(res.data, 'res.data');
+                progressbar(res.data);
+            } else {
+                console.log('获取数据失败');
+            }
+        })
+        .catch((err: any) => {
+            console.log(err);
+        });
 
     uselistData();
     // 连接 MQTT
@@ -1485,7 +1533,8 @@ body {
                                     color: #fff;
                                 }
                                 div {
-                                    font-size: 1.8rem;
+                                    margin-top: 0.2rem;
+                                    font-size: 1.4rem;
                                     font-weight: 600;
                                     color: #f3da00;
                                 }
@@ -1553,9 +1602,10 @@ body {
                                     color: #fff;
                                 }
                                 div {
-                                    font-size: 1.8rem;
+                                    font-size: 1.5rem;
                                     font-weight: 600;
                                     color: #f3da00;
+                                    margin-top: 0.2rem;
                                 }
                             }
                         }

src/api/MqttTopic.ts

@@ -2,7 +2,9 @@ import service from '@/http/request';
 
 const MqttTopicApi = {
     query: '/mqtt/query',
-    list: '/thaw/list'
+    list: '/thaw/list',
+    selectIot: '/warn/selectIot',
+    meterialParam: '/behavior/meterialParam'
 };
 
 export function querylist(parameter: any) {
@@ -20,3 +22,19 @@ export function listData(parameter: any) {
         params: parameter
     });
 }
+
+export function selectIotlist(id: number) {
+    return service({
+        url: MqttTopicApi.selectIot,
+        method: 'get',
+        params: { id }
+    });
+}
+
+export function meterialParamlist(meterialId: number) {
+    return service({
+        url: MqttTopicApi.meterialParam,
+        method: 'get',
+        params: { meterialId }
+    });
+}