<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="thawData.length === 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="thawData.length === 2" class="Freezer_left2">
                        <div v-for="(item, index) in thawData" :key="index" class="Freezer_left_databoxs2">
                            <div class="row">
                                <div
                                    v-for="(items, indexs) in item.list.slice(0, 2)"
                                    :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 class="Freezer_left_databoxs_lists2">
                                                {{ items.pressure ? items.pressure.toFixed(2) : '' }} Pa
                                            </div>
                                        </div>
                                        <div class="Freezer_left_databoxs_list2">
                                            温度：
                                            <div class="Freezer_left_databoxs_lists2">
                                                {{ items.temperature ? items.temperature.toFixed(2) : '' }} ℃
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div
                                    v-for="(items, indexs) in item.list.slice(2)"
                                    :key="indexs"
                                    class="Freezer_left_databox2 full-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 class="Freezer_left_databoxs_lists2">
                                                {{ items.pressure ? items.pressure.toFixed(2) : '' }} Pa
                                            </div>
                                        </div>
                                        <div class="Freezer_left_databoxs_list2">
                                            温度：
                                            <div class="Freezer_left_databoxs_lists2">
                                                {{ items.temperature ? items.temperature.toFixed(2) : '' }} ℃
                                            </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 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>
                                </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 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>
                                </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="@/assets/imgs/leaveunused.png" alt="" />
                                        <div>闲置</div>
                                    </div>
                                    <div>
                                        <img src="@/assets/imgs/runinsulation.png" alt="" />
                                        <div>运行</div>
                                    </div>
                                    <div>
                                        <img src="@/assets/imgs/runinsulation.png" 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';
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 = [];
    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 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(() => {
    const date = new Date();
    currentDate.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    currentTime.value = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
});

const coalgasData = ref<any>([]);

const vehicleData = ref<any>([]);

const runningstate = ref<string>('运行中');

const ThawingtemperatureData = ref<any>([]);

const thawData = ref<any>([]);

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 now = new Date();
    currentDate.value = formatDate(now);
    currentTime.value = now.toLocaleTimeString();
};

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);
        const data = ThawingtemperatureDatalength === 3 ? 40 : 15; // 百分比
        let bgImageURL = '';
        if (ThawingtemperatureDatalength === 3) {
            bgImageURL =
                'data:image/png;base64, '; // 替换为您的图片URL
        } else if (ThawingtemperatureDatalength === 2) {
            bgImageURL =
                'data:image/png;base64, ';
        }
        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.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 = [];
    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
                    }
                ],
                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);
        } catch (error) {
            console.error('解析消息失败:', error);
        }
    } else if (topic === 'jd_info') {
        try {
            const data = JSON.parse(message.toString());
            addd(data);
        } catch (error) {
            console.error('解析消息失败:', error);
        }
    } else {
        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]);

                // 检查是否有 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);
            ThawingtemperatureData.value.forEach((item: any, index: any) => {
                initChart(item, index, ThawingtemperatureData.value.length);
            });
        } catch (error) {
            console.error('解析消息失败:', error);
        }
    }
};

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

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

    // 初始化自适应
    handleScreenAuto();
    window.onresize = () => handleScreenAuto();

    // 清除定时器以避免内存泄漏
    onUnmounted(() => {
        clearInterval(interval);
    });
});
</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: 6rem;
                            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: 10rem;
                                    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: 6rem;
                            padding-top: 3.3rem;
                            display: flex;
                            .Freezer_left_databoxs_list2 {
                                display: flex;
                                width: 100%;
                                font-size: 1rem;
                                padding-left: 0.9rem;
                                margin: 0.5rem 0;
                                height: 2.9rem;
                                line-height: 2.9rem;
                                .Freezer_left_databoxs_lists2 {
                                    width: 10rem;
                                    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% 10%;
                                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: 33.33%;
                                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>
