thaw-largescreen/src/App.vue

<template>
    <!-- <router-view></router-view> -->
    <div class="screen-root">
        <div id="screen" class="screen">
            <!-- 弹框 -->
            <div v-show="falog" class="modal-overlay">
                <div class="modal">
                    <div class="modal-header">
                        <div>{{ falogTitle ? falogTitle : '' }}</div>
                        <span class="close-button" @click="closeModal">&times;</span>
                    </div>
                    <div class="modal-body">
                        <div class="modal_body_top">
                            <el-table :data="tableData" style="width: 100%" border>
                                <el-table-column prop="device" label="报警设备" align="center" />
                                <el-table-column prop="warnName" label="报警名称" align="center" />
                                <el-table-column prop="warnType" label="报警类型" align="center">
                                    <template #default="{ row }">
                                        <!-- :style="{ color: row.warnType === 'UP' ? '#67c23a' : '#bd1b22' }" -->
                                        <span>
                                            {{ row.warnType === '1' ? '上限' : '下限' }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="currentValue" label="当前数值" align="center" />
                                <el-table-column prop="limitValue" label="界限值" align="center" />
                                <el-table-column prop="createTime" label="报警时间" align="center" />
                            </el-table>
                        </div>
                        <div class="modal_body_xia">
                            <div id="chartstow"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Freezer_top">
                <!-- 标题 -->
                <div class="Freezer_top_title">解冻库大数据可视化平台</div>
                <!-- tabs切换 列表 -->
                <div class="Freezer_top_tabs">
                    <div
                        v-for="(item, index) in tabsdata"
                        :key="index"
                        class="Freezer_top_tabstitle"
                        :class="{ active: activeTab === index }"
                        @click="selectTab(item, index)"
                    >
                        {{ item.thawName ? item.thawName : '' }}
                    </div>
                </div>
                <!-- 当前时间 -->
                <div class="Freezer_top_time">
                    {{ currentDate ? currentDate : '' }} {{ currentTime ? currentTime : '' }}
                </div>
            </div>
            <!-- 内容 -->
            <div class="Freezer_content">
                <!-- 报警状态 -->
                <div class="alarm_status" @mouseover="pauseCarousel" @mouseleave="startCarousel">
                    <div class="alarm_statustitle_container">
                        <div
                            v-for="(item, index) in alarmdata"
                            :key="index"
                            class="alarm_statustitle"
                            @click="showAlam(item)"
                        >
                            {{ item.warnName ? item.warnName : '' }}
                        </div>
                    </div>
                </div>
                <div class="Freezer_boxs">
                    <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>
                                <div class="Freezer_left_databoxs_listboxs">
                                    <div class="Freezer_left_databoxs_list">
                                        压力：
                                        <div class="Freezer_left_databoxs_lists">
                                            {{ items.pressure ? items.pressure.toFixed(2) : '' }} Pa
                                        </div>
                                    </div>
                                    <div class="Freezer_left_databoxs_list">
                                        温度：
                                        <div class="Freezer_left_databoxs_lists">
                                            {{ items.temperature ? items.temperature.toFixed(2) : '' }} ℃
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <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 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 v-for="(j, i) in items.data" :key="i" class="Freezer_left_databoxs_list2">
                                            {{ j.param ? j.param : '' }}：
                                            <div class="Freezer_left_databoxs_lists2">
                                                {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
                                            </div>
                                        </div>
                                    </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">
                                                {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Freezer_left_databoxs2">
                            <div v-if="thawData && thawData.three.length > 0" class="row">
                                <div
                                    v-for="(items, indexs) in thawData.three"
                                    :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 v-for="(j, i) in items.data" :key="i" class="Freezer_left_databoxs_list2">
                                            {{ j.param ? j.param : '' }}：
                                            <div class="Freezer_left_databoxs_lists2">
                                                {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
                                            </div>
                                        </div>
                                    </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">
                                                {{ j.value ? j.value.toFixed(2) : '' }} {{ j.unit ? j.unit : '' }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="Freezer_middle">
                        <div v-if="coalgasData.length === 2" class="Freezer_middle_top">
                            <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 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>
                        </div>
                        <div v-if="coalgasData.length === 1" class="Freezer_middle_top2">
                            <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 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>
                        </div>
                        <div class="Freezer_middle_centre">
                            <div class="Freezer_middle_centre_title">车辆信息</div>
                            <el-carousel
                                v-if="vehicleData.length > 0 && vehicleData[0].data.length > 0"
                                :interval="2000"
                                :autoplay="true"
                                :pause-on-hover="false"
                                class="Freezer_middle_centre_list"
                            >
                                <el-carousel-item v-for="(item, index) in vehicleData[0].data" :key="index">
                                    <div class="Freezer_middle_centre_listone one">
                                        <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.departureLocation ? item.departureLocation : '暂无' }}
                                        </div>
                                        <div>出发地点</div>
                                    </div>
                                    <div class="Freezer_middle_centre_listone one3">
                                        <div class="Freezer_middle_centre_listtitle">
                                            {{ item.carNum ? item.carNum : '暂无' }}
                                        </div>
                                        <div>车厢编号</div>
                                    </div>
                                    <div class="Freezer_middle_centre_listone one5">
                                        <div class="Freezer_middle_centre_listtitle">
                                            {{ item.meterialName ? item.meterialName : '暂无' }}
                                        </div>
                                        <div>物品种类</div>
                                    </div>
                                    <div class="Freezer_middle_centre_listone one6">
                                        <div class="Freezer_middle_centre_listtitle">
                                            {{ item.meterialWeight ? item.meterialWeight : '暂无' }}
                                        </div>
                                        <div>货物质量</div>
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="Freezer_middle_below">
                            <div class="Freezer_middle_belowdataboxs">
                                <div class="Freezer_middle_belowdataboxs_title">运行状态</div>
                                <div class="Freezer_middle_belowdataboxs_list">
                                    <div>
                                        <img :src="runStatuslist === 1 ? leaveunused : runInsulation" alt="" />
                                        <div>闲置</div>
                                    </div>
                                    <div>
                                        <img :src="runStatuslist === 0 ? leaveUnused : runInsulation" alt="" />
                                        <div>运行</div>
                                    </div>
                                </div>
                            </div>
                            <div class="Freezer_middle_belowdataboxs2">
                                <div class="Freezer_middle_belowdataboxs2_title">解冻时长</div>
                                <div
                                    v-if="vehicleData.length > 0 && vehicleData[0].data.length > 0"
                                    class="Freezer_middle_belowdataboxs2_chartss"
                                >
                                    <div v-for="(item, index) in vehicleData[0].data" :key="index">
                                        <div :id="'chartsjied' + index" class="chartss"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="ThawingtemperatureData.length === 3" class="Freezer_right">
                        <div v-for="(item, index) in ThawingtemperatureData" :key="index" class="Freezer_right_list">
                            <div class="Freezer_right_listtitle">{{ item.name ? item.name : '' }}温度</div>
                            <div class="Freezer_right_listdata">
                                <div class="Freezer_right_listdata_left">
                                    <div :id="'charts' + index" class="chart-container"></div>
                                </div>
                                <div class="Freezer_right_listdata_right">
                                    <div class="Freezer_right_listdata_rightboxs">
                                        <div class="Freezer_right_listdata_rightboxsname">最高温度</div>
                                        <div>
                                            {{ item.max ? 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.avg ? 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.min ? item.min.toFixed(2) : ''
                                            }}<span style="font-size: 1.1rem">℃</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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_listdata2">
                                <div class="Freezer_right_listdata_left2">
                                    <div :id="'charts' + index" class="chart-container2"></div>
                                </div>
                                <div class="Freezer_right_listdata_right2">
                                    <div class="Freezer_right_listdata_rightboxs2">
                                        <div class="Freezer_right_listdata_rightboxsname2">最高温度</div>
                                        <div>
                                            {{ item.max ? 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.avg ? 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.min ? item.min.toFixed(3) : ''
                                            }}<span style="font-size: 1.1rem">℃</span>
                                        </div>
                                    </div>
                                    <!-- <Imgstobase64 /> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
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']);
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();
    // 清空数据
    coalgasData.value = [];
    thawData.value = {};
    numlist.value = null;
    ThawingtemperatureData.value = [];
    // 添加当前选中的 topic
    mqttTopics.value = ['warn', 'jd_info', item.topic];
    // usemeterialParamlist(item.id);
    // 重新启动 MQTT 连接
    startMqtt(mqttTopics.value, handleMqttMessage);
    morenlist.value = item.id;
    carThawTimeInfo();
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)'
    });
    loading.close();
};
const falog = ref<boolean>(false);
const tableData = ref<any>();
const alarmdata = ref<any>([]);
const falogTitle = ref<string>('');

const handleResize = () => handleScreenAuto();
const interval = ref<any>(null);

const showAlam = (item: any) => {
    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'),
                    currentValue: res.data.currentValue.toFixed(3)
                };
                tableData.value = [formattedItem];
                progressbars(res.data.warnEchars);
                falog.value = true;
            } else {
                console.log('获取数据失败');
            }
        })
        .catch((err: any) => {
            console.log(err);
        });
};

const closeModal = () => {
    falog.value = false;
};

onMounted(() => {
    updateTime();
});

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 numlist = ref<any>(null);

const pauseCarousel = () => {
    const container = document.querySelector('.alarm_statustitle_container');
    if (container) {
        container.style.animationPlayState = 'paused';
    }
};

const startCarousel = () => {
    const container = document.querySelector('.alarm_statustitle_container');
    if (container) {
        container.style.animationPlayState = 'running';
    }
};

const formatDate = (date: Date): string => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};

const updateTime = () => {
    const date = new Date();
    const padZero = (num) => (num < 10 ? `0${num}` : num);
    currentDate.value = `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())}`;
    currentTime.value = `${padZero(date.getHours())}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`;
};

const progressbar = (item: any, index: number, ThawingtemperatureDatalength: number) => {
    const chartId = 'chartsjied' + index;
    const chartElement = document.getElementById(chartId);
    console.log(item, index, 'item, index, ThawingtemperatureDatalength');
    if (chartElement) {
        const myChart = echarts.init(chartElement);
        const option = {
            grid: {
                top: 0,
                bottom: 0,
                left: '28%',
                right: '17%'
            },
            xAxis: {
                show: false,
                type: 'value',
                boundaryGap: [0, 0]
            },
            yAxis: [
                {
                    type: 'category',
                    data: [item.trackName ? item.trackName : '暂无数据'],
                    axisLabel: {
                        padding: [0, 4, 0, 0],
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '15'
                        }
                    },
                    axisLine: { show: false },
                    axisTick: [
                        {
                            show: false
                        }
                    ]
                }
            ],
            series: [
                {
                    name: '金额',
                    type: 'bar',
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 30,
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#4be3d5' },
                                    { offset: 1, color: '#2aa47d' }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    barWidth: 20,
                    data: [item.runTime === null || item.thawTime === '' ? 0 : Number(item.runTime).toFixed(2)],
                    label: {
                        show: true,
                        position: 'insideTop',
                        formatter(params: { value: any }) {
                            return `${params.value}h`;
                        },
                        fontSize: 15,
                        color: '#fff'
                    }
                },
                {
                    name: '背景',
                    type: 'bar',
                    barWidth: 20,
                    barGap: '-100%',
                    data: [item.thawTime === null || item.thawTime === '' ? 10 : Number(item.thawTime).toFixed(2)],
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#061f40' },
                                    { offset: 0.2, color: '#0a4b89' },
                                    { offset: 0.8, color: '#0b4b89' },
                                    { offset: 1, color: '#0e569e' }
                                ],
                                global: false // 缺省为 false
                            },
                            barBorderRadius: 30
                        }
                    },
                    label: {
                        show: true,
                        position: 'right',
                        formatter() {
                            const total =
                                item.thawTime === null || item.thawTime === '' ? 0 : Number(item.thawTime).toFixed(2); // 假设总条数为20
                            return `${total}h`;
                        },
                        fontSize: 15,
                        color: '#fff'
                    }
                }
            ]
        };
        myChart.setOption(option);

        const resizeHandler = () => {
            myChart.setOption(option);
            console.log('试图变化了');
            myChart.resize();
        };

        window.addEventListener('resize', resizeHandler);

        // 在组件卸载时移除事件监听器
        onUnmounted(() => {
            window.removeEventListener('resize', resizeHandler);
            myChart.dispose();
        });
    }
};

const progressbars = (datas: any) => {
    // if (!datas || !datas.warnEchars) {
    //     console.error('Invalid datas object or warnEchars is missing:', datas);
    //     return;
    // }
    // 打印原始时间戳数组
    // console.log(datas.warnEchars.echarsTime, '原始时间戳数组');
    const time = [];
    // 将时间戳数组转换为格式化的日期时间字符串数组
    datas.echarsTime.forEach((item: any) => {
        const formattedTimeArray = parseInt(item);
        time.push(moment(formattedTimeArray).format('YYYY-MM-DD HH:mm:ss'));
    });

    // 打印转换后的时间字符串数组
    // console.log(time, '格式化后的时间字符串数组');

    const chartElement = document.getElementById('chartstow');

    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%',
                left: '5%',
                right: '4%'
            },
            color: ['#FF0000'],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#fff' // X轴字体颜色
                },
                data: time
            },
            yAxis: {
                x: 'center',
                type: 'value',
                axisLabel: {
                    color: '#fff' // Y轴字体颜色
                }
            },
            series: [
                {
                    name: '',
                    type: 'line',
                    data: datas.echarsValue
                }
            ]
        };

        myChart.setOption(option);

        const resizeHandler = () => {
            myChart.setOption(option);
            console.log('试图变化了');
            myChart.resize();
        };

        window.addEventListener('resize', resizeHandler);

        // 在组件卸载时移除事件监听器
        onUnmounted(() => {
            window.removeEventListener('resize', resizeHandler);
            myChart.dispose();
        });
    }
};

const initChart = (item: string, index: number, ThawingtemperatureDatalength: number) => {
    const chartId = 'charts' + index;
    const chartElement = document.getElementById(chartId);

    if (chartElement) {
        // const myChart = echarts.init(chartElement);
        let myChart = echarts.getInstanceByDom(chartElement);
        if (myChart) {
            myChart.dispose();
        }
        myChart = echarts.init(chartElement);
        const data = ThawingtemperatureDatalength === 3 ? 40 : 15; // 百分比
        let bgImageURL = '';
        if (ThawingtemperatureDatalength === 3) {
            bgImageURL =
                'data:image/png;base64,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'; // 替换为您的图片URL
        } else if (ThawingtemperatureDatalength === 2) {
            bgImageURL =
                'data:image/png;base64,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';
        }
        const option = {
            grid: {
                top: '25%',
                bottom: ThawingtemperatureDatalength === 3 ? '30%' : '25%',
                // left: '25%',
                right: '0%'
            },
            tooltip: {
                trigger: 'none'
            },
            xAxis: {
                data: ['百分比'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#e54035'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            },
            graphic: {
                elements: [
                    {
                        type: 'image',
                        z: 30,
                        style: {
                            image: bgImageURL,
                            width: 104,
                            height: ThawingtemperatureDatalength === 3 ? 123 : 216
                        },
                        left: ThawingtemperatureDatalength === 3 ? '11%' : '16%',
                        // top: '20%'
                        top: ThawingtemperatureDatalength === 3 ? '20%' : '21.5%'
                    }
                ]
            },
            series: [
                {
                    name: '最上层立体圆',
                    type: 'pictorialBar',
                    symbolSize: [78, 20],
                    symbolOffset: [0, -20],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: '#053c70',
                            opacity: 0
                        }
                    },
                    data: [
                        {
                            value: 100,
                            symbolPosition: 'end'
                        }
                    ]
                },
                {
                    name: '中间立体圆',
                    type: 'pictorialBar',
                    symbolSize: [78, 20],
                    symbolOffset: [0, -10],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    { offset: 0, color: '#179fd3' }, // 左边是蓝色
                                    { offset: 0.4, color: '#1675c1' }, // 中间是粉色
                                    { offset: 0.6, color: '#1675c1' }, // 中间是粉色
                                    { offset: 1, color: '#19a4cc' } // 右边是绿色
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    data: [
                        {
                            value: data,
                            symbolPosition: 'end'
                        }
                    ]
                },
                {
                    name: '最底部立体圆',
                    type: 'pictorialBar',
                    symbolSize: [78, 20],
                    symbolOffset: [0, 10],
                    z: 12,
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    { offset: 0, color: '#179fd3' }, // 左边是蓝色
                                    { offset: 0.4, color: '#1675c1' }, // 中间是粉色
                                    { offset: 0.6, color: '#1675c1' }, // 中间是粉色
                                    { offset: 1, color: '#19a4cc' } // 右边是绿色
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    data: [100 - data]
                },
                {
                    // 底部立体柱
                    stack: '1',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 0,
                                colorStops: [
                                    { offset: 0, color: '#179fd3' }, // 左边是蓝色
                                    { offset: 0.4, color: '#1675c1' }, // 中间是粉色
                                    { offset: 0.6, color: '#1675c1' }, // 中间是粉色
                                    { offset: 1, color: '#19a4cc' } // 右边是绿色
                                ],
                                global: false // 缺省为 false
                            },
                            opacity: 1
                        }
                    },
                    silent: true,
                    barWidth: 78,
                    barGap: '-100%', // Make series be overlap
                    data: [data]
                }
                // {
                //   // 上部立体柱
                //   stack: '1',
                //   type: 'bar',
                //   itemStyle: {
                //     normal: {
                //       color: '#36405E',
                //       opacity: 0.8
                //     }
                //   },
                //   silent: true,
                //   barWidth: 78,
                //   barGap: '-100%', // Make series be overlap
                //   data: [100 - data]
                // }
            ]
        };
        // console.log('bgImageURL', bgImageURL);
        myChart.setOption(option);

        const resizeHandler = () => myChart.resize();
        window.addEventListener('resize', resizeHandler);
        onUnmounted(() => {
            window.removeEventListener('resize', resizeHandler);
            myChart.dispose();
        });

        // const resizeHandler = () => {
        //     myChart.setOption(option);
        //     console.log('试图变化了');
        //     myChart.resize();
        // };

        // window.addEventListener('resize', resizeHandler);

        // // 在组件卸载时移除事件监听器
        // onUnmounted(() => {
        //     window.removeEventListener('resize', resizeHandler);
        //     myChart.dispose();
        // });
    }
};

const handleScreenAuto = (): void => {
    const designDraftWidth = 1680; // 设计稿的宽度
    const designDraftHeight = 1050; // 设计稿的高度
    // const designDraftWidth = 1920; // 设计稿的宽度
    // const designDraftHeight = 1080; // 设计稿的高度

    // 根据屏幕的变化适配的比例
    const scale =
        document.documentElement.clientWidth / document.documentElement.clientHeight <
        designDraftWidth / designDraftHeight
            ? document.documentElement.clientWidth / designDraftWidth
            : document.documentElement.clientHeight / designDraftHeight;

    // 缩放比例
    const screen = document.querySelector('#screen') as HTMLElement;
    screen.style.transform = `scale(${scale}) translate(-50%, -50%)`;
};

const uselistData = () => {
    listData()
        .then((res: any) => {
            if (res && res.code === 200) {
                tabsdata.value = res.data;
                mqttTopics.value = ['warn', 'jd_info', res.data[0].topic];
                startMqtt(mqttTopics.value, handleMqttMessage);
                // usemeterialParamlist(res.data[0].id);
                morenlist.value = tabsdata.value[0].id;
                carThawTimeInfo();
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                loading.close();
            } 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 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 = [];
    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);
            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
                    }
                ],
                runStatus: 0,
                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}`);
    // 假设消息内容是一个 JSON 字符串
    if (topic === 'warn') {
        try {
            const data = JSON.parse(message.toString());
            // if (alarmdata.value.length >= 10) {
            //     alarmdata.value.shift();
            // }
            // alarmdata.value.push(data);
            if (alarmdata.value.length >= 10) {
                alarmdata.value.splice(0, alarmdata.value.length - 10);
            }
            alarmdata.value.push(data);
        } catch (error) {
            console.error('解析消息失败:', error);
        }
    } else if (topic === 'jd_info') {
        try {
            const data = JSON.parse(message.toString());
            console.log(data, 'datadatadata');
            addd(data);
        } catch (error) {
            console.error('解析消息失败:', error);
        }
    } else {
        try {
            const data = JSON.parse(message.toString());
            coalgasData.value = data.top;
            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]);

            //     // 检查是否有 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];

            //     return { list: flattenedList };
            // });
            // ThawingtemperatureData.value = data.buttom.map((item: any) => {
            //     return item.state;
            // });
            // // console.log('ThawingtemperatureData', ThawingtemperatureData.value);
        } catch (error) {
            console.error('解析消息失败:', error);
        }
    }
};

onMounted(() => {
    updateTime(); // 初始化时立即更新一次时间
    interval.value = setInterval(updateTime, 1000);

    uselistData();
    // 连接 MQTT
    // startMqtt(mqttTopics.value, handleMqttMessage);

    // 初始化自适应
    handleScreenAuto();
    window.onresize = () => handleScreenAuto();
    window.addEventListener('resize', handleResize);

    // 清除定时器以避免内存泄漏
    // onUnmounted(() => {
    //     clearInterval(interval);
    // });
});
onUnmounted(() => {
    clearInterval(interval.value as number);
    window.removeEventListener('resize', handleResize);
    unsubscribes();
    // unsubscribeTopic();
});
</script>
<style scope lang="less">
#app {
    height: 100vh;
}
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.screen-root {
    height: 100%;
    width: 100%;
}
#screen {
    position: relative;
    width: 1680px;
    height: 1050px;
    // width: 1920px;
    // height: 1080px;
    transform-origin: 0 0;
    transition: transform 0.3s ease;
}

.screen {
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        color: #fff;
        .modal {
            width: 75%;
            height: 67%;
            background: url('@/assets/imgs/falogimgs.png') no-repeat;
            background-position: center center;
            background-size: contain;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 1.2rem;
            width: 100%;
            height: 3.5rem;
            line-height: 4rem;
            padding: 0rem 2rem;
            .close-button {
                cursor: pointer;
                font-size: 1.6rem;
            }
        }

        .modal-body {
            text-align: center;
            width: 100%;
            height: 32.9rem;
            .modal_body_top {
                width: 100%;
                height: 10rem;
                padding: 1.5rem 2rem;
            }
            .modal_body_xia {
                width: 100%;
                height: 22rem;
                padding: 0rem 2rem;
                #chartstow {
                    width: 74rem;
                    height: 28rem;
                }
            }
        }
    }
    display: inline-block;
    transform-origin: 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    // background: url('@/assets/imgs/baijingimgs.jpg') no-repeat;
    background: url('@/assets/imgs/bjsimgs2.jpg') no-repeat;
    background-position: center center;
    background-size: contain;
    color: #fff;
    overflow: auto;
    .Freezer_top {
        width: 100%;
        // height: 9.5vh;
        // padding: 3.1vh 7vw 2vh 7vw;
        height: 5.7rem;
        padding: 2.2rem 6rem 0.7rem 6rem;
        display: flex;
        .Freezer_top_title {
            margin-left: 2.5rem;
            width: 19.2rem;
            height: 85%;
            margin-top: 0.3rem;
            background: url(/src/assets/imgs/basemap_title.png) no-repeat;
            background-position: center center;
            background-size: contain;
            text-align: center;
            font-size: 1.2rem;
            color: #00befe;
            line-height: 2.4rem;
        }
        .Freezer_top_tabs {
            margin: 0vh 2rem 0vh 4rem;
            width: 49rem;
            height: 100%;
            display: flex;
            justify-content: space-around;
            .Freezer_top_tabstitle {
                width: 5.5rem;
                height: 100%;
                text-align: center;
                font-size: 0.8rem;
                line-height: 2.8rem;
                background: url('@/assets/imgs/coldstorage_tabs.png') no-repeat;
                background-position: center center;
                background-size: contain;
                cursor: pointer;
                &.active {
                    color: red !important; // 选中时文字颜色变为红色
                    font-size: 1.1rem;
                    font-weight: 600;
                }
            }
        }
        .Freezer_top_time {
            width: 15rem;
            height: 100%;
            font-size: 1.2rem;
            line-height: 2.8rem;
            padding-left: 2.5rem;
            color: #00befe;
        }
    }
    .Freezer_content {
        width: 100%;
        // height: 61.7rem;
        height: 59.7rem;
        // padding: 1.5rem 3rem 0.5rem 3rem;
        padding: 1.5rem 2.5rem 0.5rem 2.5rem;
        .alarm_status {
            width: 100%;
            height: 4rem;
            background: url('@/assets/imgs/imgs2/alarm_imgs.png') no-repeat;
            background-position: center center;
            background-size: contain;
            overflow: hidden;
            position: relative;
            .alarm_statustitle_container {
                display: flex;
                position: absolute;
                animation: scrolltext 30s linear infinite; // 10秒为一个周期，可以根据需要调整
                width: fit-content;
                .alarm_statustitle {
                    float: left;
                    width: 15rem;
                    height: 98%;
                    margin: 0.03rem 1rem;
                    background: url(/src/assets/imgs/imgs2/alarm.png) no-repeat;
                    background-position: center center;
                    background-size: contain;
                    text-align: center;
                    font-size: 1.2rem;
                    line-height: 4rem;
                }
            }
        }
        .Freezer_boxs {
            width: 100%;
            // height: 56rem;
            height: 53rem;
            padding: 0.5rem 0;
            display: flex;
            .Freezer_left {
                width: 29.5%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                .Freezer_left_databoxs {
                    width: 100%;
                    height: 16rem;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    .Freezer_left_databox {
                        width: 33.33%;
                        height: 8rem;
                        background: url('@/assets/imgs/imgs2/lfetboxsimgs.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_left_databox_title {
                            width: 100%;
                            height: 2rem;
                            line-height: 2rem;
                            // padding-top: 0.2rem;
                            text-align: center;
                            font-size: 1.09rem;
                            font-weight: 600;
                        }
                        .Freezer_left_databoxs_listboxs {
                            width: 100%;
                            height: 6rem;
                            padding-top: 0.3rem;
                            .Freezer_left_databoxs_list {
                                display: flex;
                                width: 100%;
                                font-size: 0.9rem;
                                padding-left: 1.4rem;
                                margin: 0.5rem 0;
                                height: 1.9rem;
                                line-height: 1.9rem;
                                .Freezer_left_databoxs_lists {
                                    width: 4.5rem;
                                    height: 100%;
                                    text-align: center;
                                    color: #41ffbf;
                                    background: url('@/assets/imgs/datalistimgs.png') no-repeat;
                                    background-position: center center;
                                    background-size: contain;
                                }
                            }
                        }
                    }
                }
            }
            .Freezer_left2 {
                width: 29.5%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                .row {
                    display: flex;
                    flex-wrap: wrap;
                    // margin-bottom: 10px;
                }
                .Freezer_left_databoxs2 {
                    width: 100%;
                    height: 26.7rem;
                    // display: flex;
                    // flex-direction: column;
                    // justify-content: space-between;
                    // background: palegoldenrod;
                    .Freezer_left_databox2.half-width {
                        width: 50%;
                        height: 13rem;
                        background: url('@/assets/imgs/imgs22/lfetboxsimgs2.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_left_databox_title2 {
                            width: 100%;
                            height: 2rem;
                            line-height: 2rem;
                            padding-top: 0.35rem;
                            text-align: center;
                            font-size: 1.09rem;
                            font-weight: 600;
                        }
                        .Freezer_left_databoxs_listboxs2 {
                            width: 100%;
                            height: 10rem;
                            // padding-top: 1.5rem;
                            .Freezer_left_databoxs_list2 {
                                display: flex;
                                width: 100%;
                                font-size: 0.9rem;
                                padding-left: 1rem;
                                margin: 0.5rem 0;
                                height: 2.9rem;
                                line-height: 2.9rem;
                                .Freezer_left_databoxs_lists2 {
                                    width: 7rem;
                                    height: 100%;
                                    text-align: center;
                                    color: #41ffbf;
                                    background: url('@/assets/imgs/datalistimgs2.png') no-repeat;
                                    background-position: center center;
                                    background-size: contain;
                                }
                            }
                        }
                    }
                    .Freezer_left_databox2.full-width {
                        width: 100%;
                        height: 13rem;
                        background: url('@/assets/imgs/imgs22/lfetboxsimgs3.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_left_databox_title2 {
                            width: 100%;
                            height: 2rem;
                            line-height: 2rem;
                            padding-top: 0.35rem;
                            text-align: center;
                            font-size: 1.09rem;
                            font-weight: 600;
                        }
                        .Freezer_left_databoxs_listboxs2 {
                            width: 100%;
                            height: 10rem;
                            padding-top: 0.5rem;
                            display: flex;
                            flex-wrap: wrap; /* 允许换行 */
                            justify-content: space-between; /* 让两列均匀分布 */
                            .Freezer_left_databoxs_list2 {
                                display: flex;
                                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: 7rem;
                                    height: 100%;
                                    text-align: center;
                                    color: #41ffbf;
                                    background: url('@/assets/imgs/datalistimgs2.png') no-repeat;
                                    background-position: center center;
                                    background-size: contain;
                                }
                            }
                        }
                    }
                }
            }
            .Freezer_middle {
                width: 40%;
                height: 100%;
                margin: 0vh 0.5%;
                .Freezer_middle_top {
                    width: 100%;
                    height: 11.3rem;
                    display: flex;
                    justify-content: space-between;
                    .Freezer_middle_topdataboxs {
                        height: 100%;
                        width: 49.5%;
                        // background: url('@/assets/imgs/imgs22/furnacedisplaybox.png') no-repeat;
                        background: url('@/assets/imgs/imgs2/rundefrost.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_middle_topdataboxs_title {
                            width: 100%;
                            height: 2.6rem;
                            line-height: 2.6rem;
                            font-size: 1.2rem;
                            font-weight: 600;
                            // padding-top: 0.25rem;
                            padding-left: 1.5rem;
                        }
                        .Freezer_middle_topdataboxs_listboxs {
                            width: 100%;
                            height: 8rem;
                            padding: 0.5rem 0.6rem;
                            display: flex;
                            flex-wrap: wrap;
                            .Freezer_middle_topdataboxs_list {
                                width: 50%;
                                padding: 0% 2.5%;
                                height: 3.6rem;
                                line-height: 3.6rem;
                                font-size: 1rem;
                                display: flex;
                                div {
                                    margin-left: 0.3rem;
                                    height: 100%;
                                    width: 5.6rem;
                                    text-align: center;
                                    background: url('@/assets/imgs/datadisplay.png') no-repeat;
                                    background-position: center center;
                                    background-size: contain;
                                    color: #41ffbf;
                                }
                            }
                        }
                    }
                }
                .Freezer_middle_top2 {
                    width: 100%;
                    // height: 11rem;
                    height: 11.6rem;
                    display: flex;
                    justify-content: space-between;
                    .Freezer_middle_topdataboxs2 {
                        height: 100%;
                        width: 100%;
                        background: url('@/assets/imgs/imgs2/furnacedisplaybox2.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_middle_topdataboxs_title2 {
                            width: 100%;
                            height: 2.6rem;
                            line-height: 2.6rem;
                            font-size: 1.2rem;
                            font-weight: 600;
                            // padding-top: 0.25rem;
                            padding-left: 1.5rem;
                        }
                        .Freezer_middle_topdataboxs_listboxs2 {
                            width: 100%;
                            height: 8rem;
                            // padding: 0.5rem 1rem;
                            padding: 0.5rem 0rem;
                            display: flex;
                            flex-wrap: wrap;
                            .Freezer_middle_topdataboxs_list2 {
                                width: 50%;
                                padding: 0% 6%;
                                height: 3.6rem;
                                line-height: 3.6rem;
                                font-size: 1rem;
                                display: flex;
                                div {
                                    margin-left: 0.3rem;
                                    height: 100%;
                                    width: 9rem;
                                    text-align: center;
                                    background: url('@/assets/imgs/datadisplay2.png') no-repeat;
                                    background-position: center center;
                                    background-size: contain;
                                    color: #41ffbf;
                                }
                            }
                        }
                    }
                }
                .Freezer_middle_centre {
                    width: 100%;
                    // height: 31rem;
                    height: 28.2rem;
                    background: url('@/assets/imgs/imgs2/vehicles.png') no-repeat;
                    background-position: center center;
                    background-size: contain;
                    margin: 0.5rem 0;
                    padding: 0 0.5rem;
                    .Freezer_middle_centre_title {
                        width: 100%;
                        height: 3.3rem;
                        // padding-top: 0.55rem;
                        padding-left: 1.3rem;
                        line-height: 3.3rem;
                        font-size: 1.2rem;
                        font-weight: 600;
                    }
                    .Freezer_middle_centre_list:hover .el-carousel__arrow {
                        display: none;
                    }

                    .el-carousel__arrow {
                        display: none;
                    }
                    .Freezer_middle_centre_list {
                        width: 100%;
                        height: 25rem;
                        position: relative;
                        background: url('@/assets/imgs/123.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .el-carousel__indicators--horizontal {
                            display: none;
                        }
                        .Freezer_middle_centre_listone {
                            text-align: center;
                            .Freezer_middle_centre_listtitle {
                                font-size: 1.8rem;
                                font-weight: 600;
                                color: #41ffbf;
                            }
                            div {
                                font-size: 1.1rem;
                                padding-top: 0.6rem;
                            }
                        }
                        .one {
                            position: absolute;
                            left: 1.7rem;
                            top: 12rem;
                        }
                        .one2 {
                            position: absolute;
                            left: 6.1rem;
                            top: 5.3rem;
                        }
                        .one3 {
                            position: absolute;
                            left: 16rem;
                            top: 1.1rem;
                        }
                        .one4 {
                            position: absolute;
                            left: 25rem;
                            top: 1.1rem;
                        }
                        .one5 {
                            position: absolute;
                            left: 26.1rem;
                            top: 5.3rem;
                        }
                        .one6 {
                            position: absolute;
                            left: 32.5rem;
                            top: 12rem;
                        }
                    }
                }
                .Freezer_middle_below {
                    width: 100%;
                    height: 11.3rem;
                    display: flex;
                    justify-content: space-between;
                    // background: palegreen;
                    .Freezer_middle_belowdataboxs {
                        height: 100%;
                        width: 49.5%;
                        background: url('@/assets/imgs/imgs2/rundefrost.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_middle_belowdataboxs_title {
                            width: 100%;
                            height: 2.6rem;
                            line-height: 2.6rem;
                            font-size: 1.2rem;
                            font-weight: 600;
                            // padding-top: 0.1rem;
                            padding-left: 1.5rem;
                        }
                        .Freezer_middle_belowdataboxs_list {
                            width: 100%;
                            height: 8rem;
                            display: flex;
                            font-size: 1rem;
                            padding: 0rem 0.5rem;
                            div {
                                display: flex;
                                width: 50%;
                                height: 100%;
                                justify-content: center;
                                align-items: center;
                                img {
                                    width: 1.8rem;
                                    height: 1.8rem;
                                    margin-right: 0.5rem;
                                }
                            }
                        }
                    }
                    .Freezer_middle_belowdataboxs2 {
                        height: 100%;
                        width: 49.5%;
                        background: url('@/assets/imgs/imgs2/rundefrost.png') no-repeat;
                        background-position: center center;
                        background-size: contain;
                        .Freezer_middle_belowdataboxs2_title {
                            width: 100%;
                            height: 2.6rem;
                            line-height: 2.6rem;
                            font-size: 1.2rem;
                            font-weight: 600;
                            // padding-top: 0.1rem;
                            padding-left: 1.5rem;
                        }
                        .Freezer_middle_belowdataboxs2_chartss {
                            width: 100%;
                            height: 8rem;
                            display: flex; // 使用flexbox布局
                            flex-direction: column; // 竖向排列，使每个div独占一行

                            div {
                                width: 100%; // 独占一行
                                min-height: 0; /* 修复内容溢出导致的布局问题 */
                                flex: 1; // 平均分配高度
                                display: flex; // 确保子元素内部内容也是flex布局
                                align-items: center; // 垂直居中

                                .chartss {
                                    width: 100%;
                                    height: 100%;
                                    // background: palegoldenrod;
                                }
                            }
                        }
                    }
                }
            }
            .Freezer_right {
                width: 29.5%;
                // height: 98.2%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                .Freezer_right_list {
                    width: 100%;
                    height: 16rem;
                    background: url('@/assets/imgs/imgs2/thawingtemperature.png') no-repeat;
                    background-position: center center;
                    background-size: contain;
                    .Freezer_right_listtitle {
                        width: 100%;
                        height: 2.6rem;
                        line-height: 2.6rem;
                        font-size: 1.2rem;
                        font-weight: 600;
                        // padding-top: 0.35rem;
                        padding-left: 1.5rem;
                        // background: paleturquoise;
                    }
                    .Freezer_right_listdata {
                        width: 100%;
                        height: 13rem;
                        display: flex;
                        .Freezer_right_listdata_left {
                            width: 25%;
                            height: 100%;
                            .chart-container {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .Freezer_right_listdata_right {
                            width: 75%;
                            height: 100%;
                            display: flex;
                            justify-content: space-around;
                            padding-right: 1rem;
                            align-items: center;
                            .Freezer_right_listdata_rightboxs {
                                width: 6.2rem;
                                height: 5rem;
                                text-align: center;
                                background: url('@/assets/imgs/thawingtemperaturetitle.png') no-repeat;
                                background-position: center center;
                                background-size: contain;
                                .Freezer_right_listdata_rightboxsname {
                                    font-size: 1.1rem;
                                    padding-top: 0.7rem;
                                    padding-bottom: 0.3rem;
                                    font-weight: 500;
                                    color: #fff;
                                }
                                div {
                                    margin-top: 0.2rem;
                                    font-size: 1.4rem;
                                    font-weight: 600;
                                    color: #f3da00;
                                }
                            }
                        }
                    }
                }
            }
            .Freezer_right2 {
                width: 29.5%;
                height: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                .Freezer_right_list2 {
                    width: 100%;
                    height: 26.3rem;
                    background: url('@/assets/imgs/imgs22/thawingtemperature2.png') no-repeat;
                    background-position: center center;
                    background-size: contain;
                    .Freezer_right_listtitle2 {
                        width: 100%;
                        height: 2.6rem;
                        line-height: 2.6rem;
                        font-size: 1.2rem;
                        font-weight: 600;
                        padding-top: 0.4rem;
                        padding-left: 2rem;
                        // background: paleturquoise;
                    }
                    .Freezer_right_listdata2 {
                        width: 100%;
                        height: 23rem;
                        display: flex;
                        .Freezer_right_listdata_left2 {
                            width: 35%;
                            height: 100%;
                            // background: palegoldenrod;
                            .chart-container2 {
                                width: 100%;
                                height: 100%;
                                padding-left: 20%;
                            }
                        }
                        .Freezer_right_listdata_right2 {
                            width: 65%;
                            height: 100%;
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-around;
                            padding: 1.5rem 0rem;
                            align-items: center;
                            .Freezer_right_listdata_rightboxs2 {
                                width: 14rem;
                                height: 5rem;
                                text-align: center;
                                background: url('@/assets/imgs/thawingtemperaturetitle2.png') no-repeat;
                                background-position: center center;
                                background-size: contain;
                                .Freezer_right_listdata_rightboxsname2 {
                                    font-size: 1.1rem;
                                    padding-top: 0.7rem;
                                    padding-bottom: 0.3rem;
                                    font-weight: 500;
                                    color: #fff;
                                }
                                div {
                                    font-size: 1.5rem;
                                    font-weight: 600;
                                    color: #f3da00;
                                    margin-top: 0.2rem;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// 定义滚动动画
@keyframes scrolltext {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>