|
|
@@ -69,7 +69,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="Freezer_boxs">
|
|
|
- <div v-if="thawData.length === 3" class="Freezer_left">
|
|
|
+ <div v-if="numlist === 3" class="Freezer_left">
|
|
|
<div v-for="(item, index) in thawData" :key="index" class="Freezer_left_databoxs">
|
|
|
<div v-for="(items, indexs) in item.list" :key="indexs" class="Freezer_left_databox">
|
|
|
<div class="Freezer_left_databox_title">{{ items.name ? items.name : '' }}</div>
|
|
|
@@ -90,49 +90,77 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="thawData.length === 2" class="Freezer_left2">
|
|
|
- <div v-for="(item, index) in thawData" :key="index" class="Freezer_left_databoxs2">
|
|
|
- <div class="row">
|
|
|
+ <div v-if="numlist === 2" class="Freezer_left2">
|
|
|
+ <div class="Freezer_left_databoxs2">
|
|
|
+ <div v-if="thawData && thawData.one && thawData.one.length > 0" class="row">
|
|
|
<div
|
|
|
- v-for="(items, indexs) in item.list.slice(0, 2)"
|
|
|
+ v-for="(items, indexs) in thawData.one"
|
|
|
:key="indexs"
|
|
|
class="Freezer_left_databox2 half-width"
|
|
|
>
|
|
|
<div class="Freezer_left_databox_title2">{{ items.name ? items.name : '' }}</div>
|
|
|
<div class="Freezer_left_databoxs_listboxs2">
|
|
|
- <div class="Freezer_left_databoxs_list2">
|
|
|
- 压力：
|
|
|
+ <div v-for="(j, i) in items.data" :key="i" class="Freezer_left_databoxs_list2">
|
|
|
+ {{ j.param ? j.param : '' }}：
|
|
|
<div class="Freezer_left_databoxs_lists2">
|
|
|
- {{ items.pressure ? items.pressure.toFixed(2) : '' }} Pa
|
|
|
+ {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="Freezer_left_databoxs_list2">
|
|
|
- 温度：
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="thawData && thawData.two" class="row">
|
|
|
+ <div class="Freezer_left_databox2 full-width">
|
|
|
+ <div class="Freezer_left_databox_title2">
|
|
|
+ {{ thawData.two.name ? thawData.two.name : '' }}
|
|
|
+ </div>
|
|
|
+ <div class="Freezer_left_databoxs_listboxs2">
|
|
|
+ <div
|
|
|
+ v-for="(j, i) in thawData.two.data"
|
|
|
+ :key="i"
|
|
|
+ class="Freezer_left_databoxs_list2"
|
|
|
+ >
|
|
|
+ {{ j.param ? j.param : '' }}：
|
|
|
<div class="Freezer_left_databoxs_lists2">
|
|
|
- {{ items.temperature ? items.temperature.toFixed(2) : '' }} ℃
|
|
|
+ {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="row">
|
|
|
+ </div>
|
|
|
+ <div class="Freezer_left_databoxs2">
|
|
|
+ <div v-if="thawData && thawData.three.length > 0" class="row">
|
|
|
<div
|
|
|
- v-for="(items, indexs) in item.list.slice(2)"
|
|
|
+ v-for="(items, indexs) in thawData.three"
|
|
|
:key="indexs"
|
|
|
- class="Freezer_left_databox2 full-width"
|
|
|
+ class="Freezer_left_databox2 half-width"
|
|
|
>
|
|
|
<div class="Freezer_left_databox_title2">{{ items.name ? items.name : '' }}</div>
|
|
|
<div class="Freezer_left_databoxs_listboxs2">
|
|
|
- <div class="Freezer_left_databoxs_list2">
|
|
|
- 压力：
|
|
|
+ <div v-for="(j, i) in items.data" :key="i" class="Freezer_left_databoxs_list2">
|
|
|
+ {{ j.param ? j.param : '' }}：
|
|
|
<div class="Freezer_left_databoxs_lists2">
|
|
|
- {{ items.pressure ? items.pressure.toFixed(2) : '' }} Pa
|
|
|
+ {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="Freezer_left_databoxs_list2">
|
|
|
- 温度：
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="thawData && thawData.four" class="row">
|
|
|
+ <div class="Freezer_left_databox2 full-width">
|
|
|
+ <div class="Freezer_left_databox_title2">
|
|
|
+ {{ thawData.four.name ? thawData.four.name : '' }}
|
|
|
+ </div>
|
|
|
+ <div class="Freezer_left_databoxs_listboxs2">
|
|
|
+ <div
|
|
|
+ v-for="(j, i) in thawData.four.data"
|
|
|
+ :key="i"
|
|
|
+ class="Freezer_left_databoxs_list2"
|
|
|
+ >
|
|
|
+ {{ j.param ? j.param : '' }}：
|
|
|
<div class="Freezer_left_databoxs_lists2">
|
|
|
- {{ items.temperature ? items.temperature.toFixed(2) : '' }} ℃
|
|
|
+ {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -145,17 +173,9 @@
|
|
|
<div v-for="(item, index) in coalgasData" :key="index" class="Freezer_middle_topdataboxs">
|
|
|
<div class="Freezer_middle_topdataboxs_title">{{ item.name ? item.name : '' }}</div>
|
|
|
<div class="Freezer_middle_topdataboxs_listboxs">
|
|
|
- <div class="Freezer_middle_topdataboxs_list">
|
|
|
- 压力:
|
|
|
- <div>{{ item.pressure ? item.pressure.toFixed(3) : '' }} pa</div>
|
|
|
- </div>
|
|
|
- <div class="Freezer_middle_topdataboxs_list">
|
|
|
- 温度:
|
|
|
- <div>{{ item.temperature ? item.temperature.toFixed(3) : '' }} ℃</div>
|
|
|
- </div>
|
|
|
- <div class="Freezer_middle_topdataboxs_list">
|
|
|
- 流量:
|
|
|
- <div>{{ item.flow ? item.flow.toFixed(3) : '' }} ℃</div>
|
|
|
+ <div v-for="(j, i) in item.data" :key="i" class="Freezer_middle_topdataboxs_list">
|
|
|
+ {{ j.param ? j.param : '' }}:
|
|
|
+ <div>{{ j.value ? j.value.toFixed(3) : '' }} {{ j.unit ? j.unit : '' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -164,17 +184,9 @@
|
|
|
<div v-for="(item, index) in coalgasData" :key="index" class="Freezer_middle_topdataboxs2">
|
|
|
<div class="Freezer_middle_topdataboxs_title2">{{ item.name ? item.name : '' }}</div>
|
|
|
<div class="Freezer_middle_topdataboxs_listboxs2">
|
|
|
- <div class="Freezer_middle_topdataboxs_list2">
|
|
|
- 压力:
|
|
|
- <div>{{ item.pressure ? item.pressure.toFixed(3) : '' }} pa</div>
|
|
|
- </div>
|
|
|
- <div class="Freezer_middle_topdataboxs_list2">
|
|
|
- 温度:
|
|
|
- <div>{{ item.temperature ? item.temperature.toFixed(3) : '' }} ℃</div>
|
|
|
- </div>
|
|
|
- <div class="Freezer_middle_topdataboxs_list2">
|
|
|
- 流量:
|
|
|
- <div>{{ item.flow ? item.flow.toFixed(3) : '' }} ℃</div>
|
|
|
+ <div v-for="(j, i) in item.data" :key="i" class="Freezer_middle_topdataboxs_list2">
|
|
|
+ {{ j.param ? j.param : '' }}:
|
|
|
+ <div>{{ j.value ? j.value.toFixed(3) : '' }} {{ j.unit ? j.unit : '' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -227,11 +239,11 @@
|
|
|
<div class="Freezer_middle_belowdataboxs_title">运行状态</div>
|
|
|
<div class="Freezer_middle_belowdataboxs_list">
|
|
|
<div>
|
|
|
- <img src="@/assets/imgs/leaveunused.png" alt="" />
|
|
|
+ <img :src="runStatuslist === 1 ? leaveunused : runInsulation" alt="" />
|
|
|
<div>闲置</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <img src="@/assets/imgs/runinsulation.png" alt="" />
|
|
|
+ <img :src="runStatuslist === 0 ? leaveUnused : runInsulation" alt="" />
|
|
|
<div>运行</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -284,7 +296,7 @@
|
|
|
</div>
|
|
|
<div v-else-if="ThawingtemperatureData.length === 2" class="Freezer_right2">
|
|
|
<div v-for="(item, index) in ThawingtemperatureData" :key="index" class="Freezer_right_list2">
|
|
|
- <div class="Freezer_right_listtitle2">{{ item.name ? item.name : '' }}温度</div>
|
|
|
+ <div class="Freezer_right_listtitle2">{{ item.name ? item.name : '' }}</div>
|
|
|
<div class="Freezer_right_listdata2">
|
|
|
<div class="Freezer_right_listdata_left2">
|
|
|
<div :id="'charts' + index" class="chart-container2"></div>
|
|
|
@@ -327,6 +339,8 @@ import * as echarts from 'echarts';
|
|
|
import useMqtt from '@/utils/useMqtt';
|
|
|
import moment from 'moment';
|
|
|
import { listData, selectIotlist, carThawTimeInfolist } from '@/api/MqttTopic';
|
|
|
+import runInsulation from '@/assets/imgs/runinsulation.png';
|
|
|
+import leaveUnused from '@/assets/imgs/leaveunused.png';
|
|
|
const { startMqtt, unsubscribeTopic, unsubscribes } = useMqtt();
|
|
|
// import Imgstobase64 from '@/components/Imgstobase64.vue';
|
|
|
const mqttTopics = ref<any>(['warn', 'jd_info']);
|
|
|
@@ -342,7 +356,8 @@ const selectTab = (item: any, index: number) => {
|
|
|
unsubscribes();
|
|
|
// 清空数据
|
|
|
coalgasData.value = [];
|
|
|
- thawData.value = [];
|
|
|
+ thawData.value = {};
|
|
|
+ numlist.value = null;
|
|
|
ThawingtemperatureData.value = [];
|
|
|
// 添加当前选中的 topic
|
|
|
mqttTopics.value = ['warn', 'jd_info', item.topic];
|
|
|
@@ -364,7 +379,7 @@ const alarmdata = ref<any>([]);
|
|
|
const falogTitle = ref<string>('');
|
|
|
|
|
|
const handleResize = () => handleScreenAuto();
|
|
|
-const interval = ref<number | null>(null);
|
|
|
+const interval = ref<any>(null);
|
|
|
|
|
|
const showAlam = (item: any) => {
|
|
|
selectIotlist(item.id)
|
|
|
@@ -399,12 +414,14 @@ onMounted(() => {
|
|
|
const coalgasData = ref<any>([]);
|
|
|
|
|
|
const vehicleData = ref<any>([]);
|
|
|
+const runStatuslist = ref<any>(0);
|
|
|
|
|
|
const runningstate = ref<string>('运行中');
|
|
|
|
|
|
const ThawingtemperatureData = ref<any>([]);
|
|
|
|
|
|
-const thawData = ref<any>([]);
|
|
|
+const thawData = ref<any>({});
|
|
|
+const numlist = ref<any>(null);
|
|
|
|
|
|
const pauseCarousel = () => {
|
|
|
const container = document.querySelector('.alarm_statustitle_container');
|
|
|
@@ -946,6 +963,9 @@ const carThawTimeInfo = () => {
|
|
|
const addd = (data: any) => {
|
|
|
let matched = false; // 用来标记是否找到匹配项
|
|
|
const list = [];
|
|
|
+ console.log(data, 'res.data');
|
|
|
+ runStatuslist.value = data[0].runStatus;
|
|
|
+ console.log(runStatuslist.value, 'res.data');
|
|
|
data.forEach((item: any) => {
|
|
|
if (item.warehouseId === Number(morenlist.value)) {
|
|
|
list.push(item);
|
|
|
@@ -978,6 +998,7 @@ const addd = (data: any) => {
|
|
|
runTime: null
|
|
|
}
|
|
|
],
|
|
|
+ runStatus: 0,
|
|
|
warehouseId: null
|
|
|
}
|
|
|
];
|
|
|
@@ -1010,6 +1031,7 @@ const handleMqttMessage = (topic: string, message: any) => {
|
|
|
} else if (topic === 'jd_info') {
|
|
|
try {
|
|
|
const data = JSON.parse(message.toString());
|
|
|
+ console.log(data, 'datadatadata');
|
|
|
addd(data);
|
|
|
} catch (error) {
|
|
|
console.error('解析消息失败:', error);
|
|
|
@@ -1018,34 +1040,38 @@ const handleMqttMessage = (topic: string, message: any) => {
|
|
|
try {
|
|
|
const data = JSON.parse(message.toString());
|
|
|
coalgasData.value = data.top;
|
|
|
- // console.log(data, 'data');
|
|
|
+ ThawingtemperatureData.value = data.right;
|
|
|
+ if (ThawingtemperatureData.value.length > 0) {
|
|
|
+ ThawingtemperatureData.value.forEach((item: any, index: any) => {
|
|
|
+ initChart(item, index, ThawingtemperatureData.value.length);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ numlist.value = data.num;
|
|
|
+ thawData.value = data.left;
|
|
|
|
|
|
- thawData.value = data.buttom.map((buttomItem: any) => {
|
|
|
- // 处理 middleVo
|
|
|
- const middleVoList = buttomItem.middleVo.flatMap((middleVo: any) => [middleVo.fan, ...middleVo.home]);
|
|
|
+ // thawData.value = data.buttom.map((buttomItem: any) => {
|
|
|
+ // // 处理 middleVo
|
|
|
+ // const middleVoList = buttomItem.middleVo.flatMap((middleVo: any) => [middleVo.fan, ...middleVo.home]);
|
|
|
|
|
|
- // 检查是否有 middleVos
|
|
|
- let middleVosList = [];
|
|
|
- if (buttomItem.middleVos && Array.isArray(buttomItem.middleVos)) {
|
|
|
- // 处理 middleVos
|
|
|
- middleVosList = buttomItem.middleVos.flatMap((middleVos: any) => [
|
|
|
- middleVos.fan,
|
|
|
- ...middleVos.home
|
|
|
- ]);
|
|
|
- }
|
|
|
+ // // 检查是否有 middleVos
|
|
|
+ // let middleVosList = [];
|
|
|
+ // if (buttomItem.middleVos && Array.isArray(buttomItem.middleVos)) {
|
|
|
+ // // 处理 middleVos
|
|
|
+ // middleVosList = buttomItem.middleVos.flatMap((middleVos: any) => [
|
|
|
+ // middleVos.fan,
|
|
|
+ // ...middleVos.home
|
|
|
+ // ]);
|
|
|
+ // }
|
|
|
|
|
|
- // 合并 middleVo 和 middleVos 的结果
|
|
|
- const flattenedList = [...middleVoList, ...middleVosList];
|
|
|
+ // // 合并 middleVo 和 middleVos 的结果
|
|
|
+ // const flattenedList = [...middleVoList, ...middleVosList];
|
|
|
|
|
|
- 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);
|
|
|
- });
|
|
|
+ // return { list: flattenedList };
|
|
|
+ // });
|
|
|
+ // ThawingtemperatureData.value = data.buttom.map((item: any) => {
|
|
|
+ // return item.state;
|
|
|
+ // });
|
|
|
+ // // console.log('ThawingtemperatureData', ThawingtemperatureData.value);
|
|
|
} catch (error) {
|
|
|
console.error('解析消息失败:', error);
|
|
|
}
|
|
|
@@ -1352,8 +1378,8 @@ body {
|
|
|
}
|
|
|
.Freezer_left_databoxs_listboxs2 {
|
|
|
width: 100%;
|
|
|
- height: 6rem;
|
|
|
- padding-top: 1.5rem;
|
|
|
+ height: 10rem;
|
|
|
+ // padding-top: 1.5rem;
|
|
|
.Freezer_left_databoxs_list2 {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
@@ -1363,7 +1389,7 @@ body {
|
|
|
height: 2.9rem;
|
|
|
line-height: 2.9rem;
|
|
|
.Freezer_left_databoxs_lists2 {
|
|
|
- width: 10rem;
|
|
|
+ width: 7rem;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
color: #41ffbf;
|
|
|
@@ -1391,19 +1417,22 @@ body {
|
|
|
}
|
|
|
.Freezer_left_databoxs_listboxs2 {
|
|
|
width: 100%;
|
|
|
- height: 6rem;
|
|
|
- padding-top: 3.3rem;
|
|
|
+ height: 10rem;
|
|
|
+ padding-top: 0.5rem;
|
|
|
display: flex;
|
|
|
+ flex-wrap: wrap; /* 允许换行 */
|
|
|
+ justify-content: space-between; /* 让两列均匀分布 */
|
|
|
.Freezer_left_databoxs_list2 {
|
|
|
display: flex;
|
|
|
- width: 100%;
|
|
|
- font-size: 1rem;
|
|
|
+ width: 50%;
|
|
|
+ font-size: 0.9rem;
|
|
|
padding-left: 0.9rem;
|
|
|
margin: 0.5rem 0;
|
|
|
height: 2.9rem;
|
|
|
line-height: 2.9rem;
|
|
|
+ box-sizing: border-box;
|
|
|
.Freezer_left_databoxs_lists2 {
|
|
|
- width: 10rem;
|
|
|
+ width: 7rem;
|
|
|
height: 100%;
|
|
|
text-align: center;
|
|
|
color: #41ffbf;
|
|
|
@@ -1498,7 +1527,7 @@ body {
|
|
|
flex-wrap: wrap;
|
|
|
.Freezer_middle_topdataboxs_list2 {
|
|
|
width: 50%;
|
|
|
- padding: 0% 10%;
|
|
|
+ padding: 0% 6%;
|
|
|
height: 3.6rem;
|
|
|
line-height: 3.6rem;
|
|
|
font-size: 1rem;
|
LiuShu_0203