布局比例修改以及添加tab页面切换动画效果等其他细节修改

.eslintrc-auto-import.json

@@ -88,6 +88,7 @@
     "onWatcherCleanup": true,
     "useId": true,
     "useModel": true,
-    "useTemplateRef": true
+    "useTemplateRef": true,
+    "ElLoading": true
   }
 }

src/App.vue

@@ -53,6 +53,7 @@
                     {{ currentDate ? currentDate : '' }} {{ currentTime ? currentTime : '' }}
                 </div>
             </div>
+            <!-- 内容 -->
             <div class="Freezer_content">
                 <!-- 报警状态 -->
                 <div class="alarm_status" @mouseover="pauseCarousel" @mouseleave="startCarousel">
@@ -180,9 +181,51 @@
                         </div>
                         <div class="Freezer_middle_centre">
                             <div class="Freezer_middle_centre_title">车辆信息</div>
-                            <div v-for="(item, index) in vehicleData" :key="index" class="Freezer_middle_centre_list">
+                            <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 v-for="(item, index) in vehicleData" :key="index" class="Freezer_middle_centre_list">
                                 <div class="Freezer_middle_centre_listone one">
-                                    <div class="Freezer_middle_centre_listtitle">{{ item.trackName ? item.trackName : '暂无' }}</div>
+                                    <div class="Freezer_middle_centre_listtitle">
+                                        {{ item.trackName ? item.trackName : '暂无' }}
+                                    </div>
                                     <div>轨道名称</div>
                                 </div>
                                 <div class="Freezer_middle_centre_listone one2">
@@ -197,12 +240,6 @@
                                     </div>
                                     <div>车厢编号</div>
                                 </div>
-                                <!-- <div class="Freezer_middle_centre_listone one4">
-                                    <div class="Freezer_middle_centre_listtitle">
-                                        {{ item.watercontent ? item.watercontent : '' }}
-                                    </div>
-                                    <div>含水量</div>
-                                </div> -->
                                 <div class="Freezer_middle_centre_listone one5">
                                     <div class="Freezer_middle_centre_listtitle">
                                         {{ item.meterialName ? item.meterialName : '暂无' }}
@@ -215,7 +252,7 @@
                                     </div>
                                     <div>货物质量</div>
                                 </div>
-                            </div>
+                            </div> -->
                         </div>
                         <div class="Freezer_middle_below">
                             <div class="Freezer_middle_belowdataboxs">
@@ -237,7 +274,14 @@
                             </div>
                             <div class="Freezer_middle_belowdataboxs2">
                                 <div class="Freezer_middle_belowdataboxs2_title">解冻时长</div>
-                                <div id="chartss"></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>
@@ -338,6 +382,12 @@ const selectTab = (item: any, index: number) => {
     // 重新启动 MQTT 连接
     startMqtt(mqttTopics.value, handleMqttMessage);
     morenlist.value = item.id;
+    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>();
@@ -378,7 +428,23 @@ onMounted(() => {
 
 const coalgasData = ref<any>([]);
 
-const vehicleData = ref<any>([]);
+const vehicleData = ref<any>([
+    {
+        data: [
+            {
+                trackName: '',
+                departureLocation: '',
+                carNum: '',
+                meterialName: '',
+                meterialWeight: '',
+                warehouseId: null,
+                thawTime: null,
+                runTime: null
+            }
+        ],
+        warehouseId: null
+    }
+]);
 
 const runningstate = ref<string>('运行中');
 
@@ -413,16 +479,17 @@ const updateTime = () => {
     currentTime.value = now.toLocaleTimeString();
 };
 
-const progressbar = (datalist: any) => {
-    const chartElement = document.getElementById('chartss');
-    console.log(datalist, 'datalist');
+const progressbar = (item: any, index: number, ThawingtemperatureDatalength: number) => {
+    const chartId = 'chartsjied' + index;
+    const chartElement = document.getElementById(chartId);
+    console.log(item, index, ThawingtemperatureDatalength, 'item, index, ThawingtemperatureDatalength');
     if (chartElement) {
         const myChart = echarts.init(chartElement);
         const option = {
             grid: {
                 top: 0,
                 bottom: 0,
-                left: '8%',
+                left: '17%',
                 right: '17%'
             },
             xAxis: {
@@ -433,7 +500,13 @@ const progressbar = (datalist: any) => {
             yAxis: [
                 {
                     type: 'category',
-                    data: [''],
+                    data: [item.trackName],
+                    axisLabel: {
+                        textStyle: {
+                            color: '#ffffff',
+                            fontSize: '16'
+                        }
+                    },
                     axisLine: { show: false },
                     axisTick: [
                         {
@@ -465,11 +538,7 @@ const progressbar = (datalist: any) => {
                         }
                     },
                     barWidth: 20,
-                    data: [
-                        datalist[0].runTime === null || datalist[0].thawTime === ''
-                            ? 0
-                            : Number(datalist[0].runTime).toFixed(2)
-                    ],
+                    data: [item.runTime === null || item.thawTime === '' ? 0 : Number(item.runTime).toFixed(2)],
                     label: {
                         show: true,
                         position: 'insideTop',
@@ -485,11 +554,7 @@ const progressbar = (datalist: any) => {
                     type: 'bar',
                     barWidth: 20,
                     barGap: '-100%',
-                    data: [
-                        datalist[0].thawTime === null || datalist[0].thawTime === ''
-                            ? 10
-                            : Number(datalist[0].thawTime).toFixed(2)
-                    ],
+                    data: [item.thawTime === null || item.thawTime === '' ? 10 : Number(item.thawTime).toFixed(2)],
                     itemStyle: {
                         normal: {
                             color: {
@@ -514,9 +579,7 @@ const progressbar = (datalist: any) => {
                         position: 'right',
                         formatter() {
                             const total =
-                                datalist[0].thawTime === null || datalist[0].thawTime === ''
-                                    ? 0
-                                    : Number(datalist[0].thawTime).toFixed(2); // 假设总条数为20
+                                item.thawTime === null || item.thawTime === '' ? 0 : Number(item.thawTime).toFixed(2); // 假设总条数为20
                             return `${total}h`;
                         },
                         fontSize: 16,
@@ -580,7 +643,7 @@ const progressbars = (datas: any) => {
             grid: {
                 top: '4%',
                 bottom: '7%',
-                left: '4%',
+                left: '5%',
                 right: '4%'
             },
             color: ['#FF0000'],
@@ -693,7 +756,7 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
                             width: 104,
                             height: ThawingtemperatureDatalength === 3 ? 123 : 216
                         },
-                        left: ThawingtemperatureDatalength === 3 ? '16%' : '20.4%',
+                        left: ThawingtemperatureDatalength === 3 ? '11%' : '16%',
                         // top: '20%'
                         top: ThawingtemperatureDatalength === 3 ? '20%' : '21.5%'
                     }
@@ -841,8 +904,10 @@ const initChart = (item: string, index: number, ThawingtemperatureDatalength: nu
 };
 
 const handleScreenAuto = (): void => {
-    const designDraftWidth = 1920; // 设计稿的宽度
-    const designDraftHeight = 1080; // 设计稿的高度
+    const designDraftWidth = 1680; // 设计稿的宽度
+    const designDraftHeight = 1050; // 设计稿的高度
+    // const designDraftWidth = 1920; // 设计稿的宽度
+    // const designDraftHeight = 1080; // 设计稿的高度
 
     // 根据屏幕的变化适配的比例
     const scale =
@@ -865,6 +930,12 @@ const uselistData = () => {
                 startMqtt(mqttTopics.value, handleMqttMessage);
                 // usemeterialParamlist(res.data[0].id);
                 morenlist.value = tabsdata.value[0].id;
+                const loading = ElLoading.service({
+                    lock: true,
+                    text: 'Loading',
+                    background: 'rgba(0, 0, 0, 0.7)'
+                });
+                loading.close();
             } else {
                 console.log('获取数据失败');
             }
@@ -907,31 +978,54 @@ const handleMqttMessage = (topic: string, message: any) => {
         try {
             const data = JSON.parse(message.toString());
             let matched = false; // 用来标记是否找到匹配项
-
+            // console.log(data, Number(morenlist.value), 'datadatadata');
+            const list = [];
             data.forEach((item: any) => {
                 if (item.warehouseId === Number(morenlist.value)) {
-                    vehicleData.value = [item];
-                    progressbar(vehicleData.value);
-                    console.log(vehicleData.value, 'vehicleData');
-                    matched = true; // 标记找到匹配项
+                    list.push(item);
+                    console.log(list, 'vehicleData111111');
+                    // return;
                 }
             });
+            if (list.length > 0) {
+                vehicleData.value = list;
+                vehicleData.value[0].data.forEach((item: any, index: any) => {
+                    progressbar(item, index, vehicleData.value[0].data.length);
+                });
+                // progressbar(vehicleData.value);
+                console.log(vehicleData.value, 'vehicleData');
+                matched = true; // 标记找到匹配项
+            }
 
             // 如果没有匹配项，才清空 vehicleData.value
             if (!matched) {
                 vehicleData.value = [
                     {
-                        trackName: '',
-                        departureLocation: '',
-                        carNum: '',
-                        meterialName: '',
-                        meterialWeight: '',
-                        warehouseId: null,
-                        thawTime: null,
-                        runTime: null
+                        data: [
+                            {
+                                trackName: '',
+                                departureLocation: '',
+                                carNum: '',
+                                meterialName: '',
+                                meterialWeight: '',
+                                warehouseId: null,
+                                thawTime: null,
+                                runTime: null
+                            }
+                        ],
+                        // trackName: '',
+                        // departureLocation: '',
+                        // carNum: '',
+                        // meterialName: '',
+                        // meterialWeight: '',
+                        warehouseId: null
+                        // thawTime: null,
+                        // runTime: null
                     }
                 ];
-                progressbar(vehicleData.value);
+                vehicleData.value[0].data.forEach((item: any, index: any) => {
+                    progressbar(item, index, vehicleData.value[0].data.length);
+                });
             }
         } catch (error) {
             console.error('解析消息失败:', error);
@@ -981,6 +1075,9 @@ onMounted(() => {
     uselistData();
     // 连接 MQTT
     // startMqtt(mqttTopics.value, handleMqttMessage);
+    vehicleData.value[0].data.forEach((item: any, index: any) => {
+        progressbar(item, index, vehicleData.value[0].data.length);
+    });
 
     // 初始化自适应
     handleScreenAuto();
@@ -1012,8 +1109,10 @@ body {
 }
 #screen {
     position: relative;
-    width: 1920px;
-    height: 1080px;
+    width: 1680px;
+    height: 1050px;
+    // width: 1920px;
+    // height: 1080px;
     transform-origin: 0 0;
     transition: transform 0.3s ease;
 }
@@ -1032,8 +1131,8 @@ body {
         z-index: 1000;
         color: #fff;
         .modal {
-            width: 65%;
-            height: 65%;
+            width: 75%;
+            height: 67%;
             background: url('@/assets/imgs/falogimgs.png') no-repeat;
             background-position: center center;
             background-size: contain;
@@ -1075,14 +1174,13 @@ body {
             }
         }
     }
-    // width: 1920px;
-    // height: 1080px;
     display: inline-block;
     transform-origin: 0 0;
     position: absolute;
     top: 50%;
     left: 50%;
-    background: url('@/assets/imgs/basemaps.jpg') no-repeat;
+    // 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;
@@ -1092,28 +1190,29 @@ body {
         // height: 9.5vh;
         // padding: 3.1vh 7vw 2vh 7vw;
         height: 5.7rem;
-        padding: 2.2rem 9rem 0.7rem 9rem;
+        padding: 2.2rem 6rem 0.7rem 6rem;
         display: flex;
         .Freezer_top_title {
             margin-left: 2.5rem;
             width: 19.2rem;
-            height: 100%;
+            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.3rem;
+            font-size: 1.2rem;
             color: #00befe;
-            line-height: 2.8rem;
+            line-height: 2.4rem;
         }
         .Freezer_top_tabs {
-            margin: 0vh 5rem 0vh 4rem;
-            width: 57rem;
+            margin: 0vh 2rem 0vh 4rem;
+            width: 49rem;
             height: 100%;
             display: flex;
             justify-content: space-around;
             .Freezer_top_tabstitle {
-                width: 6.5rem;
+                width: 5.5rem;
                 height: 100%;
                 text-align: center;
                 font-size: 1.1rem;
@@ -1123,27 +1222,31 @@ body {
                 background-size: contain;
                 cursor: pointer;
                 &.active {
-                    color: #00befe !important; // 选中时文字颜色变为红色
+                    color: red !important; // 选中时文字颜色变为红色
+                    font-size: 1.25rem;
+                    font-weight: 600;
                 }
             }
         }
         .Freezer_top_time {
-            width: 14rem;
+            width: 15rem;
             height: 100%;
-            font-size: 1.3rem;
+            font-size: 1.2rem;
             line-height: 2.8rem;
-            padding-left: 1rem;
+            padding-left: 2.5rem;
             color: #00befe;
         }
     }
     .Freezer_content {
         width: 100%;
-        height: 61.7rem;
-        padding: 1.5rem 3rem 0.5rem 3rem;
+        // 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/alarm_imgs.png') no-repeat;
+            background: url('@/assets/imgs/imgs2/alarm_imgs.png') no-repeat;
             background-position: center center;
             background-size: contain;
             overflow: hidden;
@@ -1158,7 +1261,7 @@ body {
                     width: 15rem;
                     height: 98%;
                     margin: 0.03rem 1rem;
-                    background: url(/src/assets/imgs/alarm.png) no-repeat;
+                    background: url(/src/assets/imgs/imgs2/alarm.png) no-repeat;
                     background-position: center center;
                     background-size: contain;
                     text-align: center;
@@ -1169,12 +1272,13 @@ body {
         }
         .Freezer_boxs {
             width: 100%;
-            height: 56rem;
+            // height: 56rem;
+            height: 53rem;
             padding: 0.5rem 0;
             display: flex;
             .Freezer_left {
                 width: 29.5%;
-                height: 98.2%;
+                height: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 align-content: space-between;
@@ -1187,14 +1291,14 @@ body {
                     .Freezer_left_databox {
                         width: 33.33%;
                         height: 8rem;
-                        background: url('@/assets/imgs/lfetboxsimgs.png') no-repeat;
+                        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;
+                            // padding-top: 0.2rem;
                             text-align: center;
                             font-size: 1.09rem;
                             font-weight: 600;
@@ -1207,7 +1311,7 @@ body {
                                 display: flex;
                                 width: 100%;
                                 font-size: 0.9rem;
-                                padding-left: 1.9rem;
+                                padding-left: 1.4rem;
                                 margin: 0.5rem 0;
                                 height: 1.9rem;
                                 line-height: 1.9rem;
@@ -1227,18 +1331,18 @@ body {
             }
             .Freezer_left2 {
                 width: 29.5%;
-                height: 98.2%;
+                height: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 align-content: space-between;
                 .row {
                     display: flex;
                     flex-wrap: wrap;
-                    margin-bottom: 10px;
+                    // margin-bottom: 10px;
                 }
                 .Freezer_left_databoxs2 {
                     width: 100%;
-                    height: 26rem;
+                    height: 26.7rem;
                     // display: flex;
                     // flex-direction: column;
                     // justify-content: space-between;
@@ -1246,7 +1350,7 @@ body {
                     .Freezer_left_databox2.half-width {
                         width: 50%;
                         height: 13rem;
-                        background: url('@/assets/imgs/lfetboxsimgs2.png') no-repeat;
+                        background: url('@/assets/imgs/imgs22/lfetboxsimgs2.png') no-repeat;
                         background-position: center center;
                         background-size: contain;
                         .Freezer_left_databox_title2 {
@@ -1266,7 +1370,7 @@ body {
                                 display: flex;
                                 width: 100%;
                                 font-size: 0.9rem;
-                                padding-left: 1.9rem;
+                                padding-left: 1rem;
                                 margin: 0.5rem 0;
                                 height: 2.9rem;
                                 line-height: 2.9rem;
@@ -1285,7 +1389,7 @@ body {
                     .Freezer_left_databox2.full-width {
                         width: 100%;
                         height: 13rem;
-                        background: url('@/assets/imgs/lfetboxsimgs3.png') no-repeat;
+                        background: url('@/assets/imgs/imgs22/lfetboxsimgs3.png') no-repeat;
                         background-position: center center;
                         background-size: contain;
                         .Freezer_left_databox_title2 {
@@ -1306,7 +1410,7 @@ body {
                                 display: flex;
                                 width: 100%;
                                 font-size: 1rem;
-                                padding-left: 1.9rem;
+                                padding-left: 0.9rem;
                                 margin: 0.5rem 0;
                                 height: 2.9rem;
                                 line-height: 2.9rem;
@@ -1330,13 +1434,14 @@ body {
                 margin: 0vh 0.5%;
                 .Freezer_middle_top {
                     width: 100%;
-                    height: 11rem;
+                    height: 11.3rem;
                     display: flex;
                     justify-content: space-between;
                     .Freezer_middle_topdataboxs {
                         height: 100%;
                         width: 49.5%;
-                        background: url('@/assets/imgs/furnacedisplaybox.png') no-repeat;
+                        // 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 {
@@ -1345,13 +1450,13 @@ body {
                             line-height: 2.6rem;
                             font-size: 1.2rem;
                             font-weight: 600;
-                            padding-top: 0.25rem;
+                            // padding-top: 0.25rem;
                             padding-left: 1.5rem;
                         }
                         .Freezer_middle_topdataboxs_listboxs {
                             width: 100%;
                             height: 8rem;
-                            padding: 0.5rem 1rem;
+                            padding: 0.5rem 0.6rem;
                             display: flex;
                             flex-wrap: wrap;
                             .Freezer_middle_topdataboxs_list {
@@ -1377,13 +1482,14 @@ body {
                 }
                 .Freezer_middle_top2 {
                     width: 100%;
-                    height: 11rem;
+                    // height: 11rem;
+                    height: 11.6rem;
                     display: flex;
                     justify-content: space-between;
                     .Freezer_middle_topdataboxs2 {
                         height: 100%;
                         width: 100%;
-                        background: url('@/assets/imgs/furnacedisplaybox2.png') no-repeat;
+                        background: url('@/assets/imgs/imgs2/furnacedisplaybox2.png') no-repeat;
                         background-position: center center;
                         background-size: contain;
                         .Freezer_middle_topdataboxs_title2 {
@@ -1392,13 +1498,14 @@ body {
                             line-height: 2.6rem;
                             font-size: 1.2rem;
                             font-weight: 600;
-                            padding-top: 0.25rem;
+                            // padding-top: 0.25rem;
                             padding-left: 1.5rem;
                         }
                         .Freezer_middle_topdataboxs_listboxs2 {
                             width: 100%;
                             height: 8rem;
-                            padding: 0.5rem 1rem;
+                            // padding: 0.5rem 1rem;
+                            padding: 0.5rem 0rem;
                             display: flex;
                             flex-wrap: wrap;
                             .Freezer_middle_topdataboxs_list2 {
@@ -1424,24 +1531,39 @@ body {
                 }
                 .Freezer_middle_centre {
                     width: 100%;
-                    height: 31rem;
-                    background: url('@/assets/imgs/vehicles.png') no-repeat;
+                    // 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-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: 27.2rem;
+                        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 {
@@ -1466,7 +1588,7 @@ body {
                         }
                         .one3 {
                             position: absolute;
-                            left: 20rem;
+                            left: 16rem;
                             top: 1.1rem;
                         }
                         .one4 {
@@ -1476,26 +1598,26 @@ body {
                         }
                         .one5 {
                             position: absolute;
-                            left: 33.1rem;
+                            left: 26.1rem;
                             top: 5.3rem;
                         }
                         .one6 {
                             position: absolute;
-                            left: 38.5rem;
+                            left: 32.5rem;
                             top: 12rem;
                         }
                     }
                 }
                 .Freezer_middle_below {
                     width: 100%;
-                    height: 11rem;
+                    height: 11.3rem;
                     display: flex;
                     justify-content: space-between;
                     // background: palegreen;
                     .Freezer_middle_belowdataboxs {
                         height: 100%;
                         width: 49.5%;
-                        background: url('@/assets/imgs/rundefrost.png') no-repeat;
+                        background: url('@/assets/imgs/imgs2/rundefrost.png') no-repeat;
                         background-position: center center;
                         background-size: contain;
                         .Freezer_middle_belowdataboxs_title {
@@ -1504,7 +1626,7 @@ body {
                             line-height: 2.6rem;
                             font-size: 1.2rem;
                             font-weight: 600;
-                            padding-top: 0.1rem;
+                            // padding-top: 0.1rem;
                             padding-left: 1.5rem;
                         }
                         .Freezer_middle_belowdataboxs_list {
@@ -1530,7 +1652,7 @@ body {
                     .Freezer_middle_belowdataboxs2 {
                         height: 100%;
                         width: 49.5%;
-                        background: url('@/assets/imgs/rundefrost.png') no-repeat;
+                        background: url('@/assets/imgs/imgs2/rundefrost.png') no-repeat;
                         background-position: center center;
                         background-size: contain;
                         .Freezer_middle_belowdataboxs2_title {
@@ -1539,27 +1661,43 @@ body {
                             line-height: 2.6rem;
                             font-size: 1.2rem;
                             font-weight: 600;
-                            padding-top: 0.1rem;
+                            // padding-top: 0.1rem;
                             padding-left: 1.5rem;
                         }
-                        #chartss {
+                        .Freezer_middle_belowdataboxs2_chartss {
                             width: 100%;
                             height: 8rem;
-                            // background: palegoldenrod;
+                            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: 98.2%;
+                height: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 align-content: space-between;
                 .Freezer_right_list {
                     width: 100%;
                     height: 16rem;
-                    background: url('@/assets/imgs/thawingtemperature.png') no-repeat;
+                    background: url('@/assets/imgs/imgs2/thawingtemperature.png') no-repeat;
                     background-position: center center;
                     background-size: contain;
                     .Freezer_right_listtitle {
@@ -1568,7 +1706,7 @@ body {
                         line-height: 2.6rem;
                         font-size: 1.2rem;
                         font-weight: 600;
-                        padding-top: 0.35rem;
+                        // padding-top: 0.35rem;
                         padding-left: 1.5rem;
                         // background: paleturquoise;
                     }
@@ -1618,14 +1756,14 @@ body {
             }
             .Freezer_right2 {
                 width: 29.5%;
-                height: 98.2%;
+                height: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 align-content: space-between;
                 .Freezer_right_list2 {
                     width: 100%;
-                    height: 26rem;
-                    background: url('@/assets/imgs/thawingtemperature2.png') no-repeat;
+                    height: 26.3rem;
+                    background: url('@/assets/imgs/imgs22/thawingtemperature2.png') no-repeat;
                     background-position: center center;
                     background-size: contain;
                     .Freezer_right_listtitle2 {
@@ -1634,7 +1772,7 @@ body {
                         line-height: 2.6rem;
                         font-size: 1.2rem;
                         font-weight: 600;
-                        padding-top: 0.2rem;
+                        padding-top: 0.4rem;
                         padding-left: 2rem;
                         // background: paleturquoise;
                     }

types/auto-imports.d.ts

@@ -6,6 +6,7 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']

types/components.d.ts

@@ -11,6 +11,8 @@ declare module 'vue' {
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -35,4 +37,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     Tag: typeof import('./../src/components/auto/tag.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }