可以了的一版

index.html

@@ -18,6 +18,12 @@
   * {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    overflow: hidden;
   }
 </style>
 

src/page/index/components/AreaLegend/AreaLegend.less

@@ -1,6 +1,5 @@
 .AreaLegendBox {
     width: 100%;
-    height: 47px;
     // background-image: url('../../../../assets/image/AreaLegendBg.png');
     // background-repeat: no-repeat;
     // background-size: 100% 100%;

src/page/index/components/BasicMessageBox/BasicMessageBox.vue

@@ -79,7 +79,7 @@ const handleGetNowWeather = async () => {
         <div class="rightBox">
             <span class="nowTime">{{ nowTime || "" }}</span>
             <div class="weatherBox">
-                <img class="weatherIcon" :src="weatherInfo?.CUR_WEATHER_PIC" />
+                <img v-if="weatherInfo?.CUR_WEATHER_PIC" class="weatherIcon" :src="weatherInfo?.CUR_WEATHER_PIC" />
                 <span class="weatherText">{{ weatherInfo?.CUR_WEATHER || "-" }}</span>
             </div>
             <span class="nowDay">{{ weekDay ? daysEnum[weekDay] : "" }}</span>

src/page/index/components/PageMap/PageMap.less

@@ -3,8 +3,11 @@
     height: 100%;
 
     .mapContent {
-        width: 3480px;
+        width: 100%;
-        height: 1080px;
+        height: 100%;
+
+        // width: 3480px;
+        // height: 1080px;
         // width: 100vw;
         // height: 100vh;
 

src/page/index/components/PageMap/PageMap.vue

@@ -57,7 +57,7 @@ onMounted(async () => {
             pitch: 0,
             mapStyle: "amap://styles/dark",
             // center: [101.6329, 26.38], 
-            center: [109.988078, 26.353654],
+            center: [101.988078, 25.353654],
             zoom: 5,
             minZoom: 7,
             token: "edb93fe4f1b3d313128b82082c5b3877",
@@ -153,7 +153,7 @@ const handleGetServiceList = async () => {
                     item.SPREGIONTYPETYPE = typeID;
                     SPREGIONTYPETYPEObj[item.SPREGIONTYPE_ID] = colorList1[typeID];
                     SPREGIONTYPECOLORLIST.push({
-                        label: item.SPREGIONTYPE_NAME,
+                        label: item.SPREGIONTYPE_NAME.split('管理单元')[0],
                         value: colorList1[typeID],
                     });
                     typeID += 1;

src/page/index/components/RegionalRevenue/RegionalRevenue.vue

@@ -122,10 +122,10 @@ const handleGetData = async () => {
                     category.push(subItem.Serverpart_Name)
                     seriesData.push(Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)))
                     realData.push(subItem.TotalRevenue.Revenue_Amount)
-                    pieData.push({ value: Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)), name: subItem.Serverpart_Name })
+                    pieData.push({ value: Number((subItem.TotalRevenue.Revenue_Amount / 10000).toFixed(2)), name: subItem.Serverpart_Name.split('管理单元')[0] })
                     // lengedData.push({ name: subItem.Serverpart_Name, value: subItem.TotalRevenue.Revenue_Amount.toLocaleString() }) 
-                    lengedData.push({ name: subItem.Serverpart_Name, value: Number(((subItem.TotalRevenue.Revenue_Amount / sum) * 100).toFixed(2)) })
+                    lengedData.push({ name: subItem.Serverpart_Name.split('管理单元')[0], value: Number(((subItem.TotalRevenue.Revenue_Amount / sum) * 100).toFixed(2)) })
-                    aiObj[subItem.Serverpart_Name] = subItem.TotalRevenue.Revenue_Amount + '元'
+                    aiObj[subItem.Serverpart_Name.split('管理单元')[0]] = subItem.TotalRevenue.Revenue_Amount + '元'
                 })
             }
 
@@ -139,6 +139,8 @@ const handleGetData = async () => {
         pieData: pieData,
         lengedData: lengedData
     }
+    console.log('resresresres', res);
+
     lengedList.value = lengedData
 
     let RegionalRevenueAI = sessionStorage.getItem('RegionalRevenueAI')

src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.less

@@ -1,11 +1,18 @@
 .TrendOfTrafficFlowBox {
-    // width: 100%;
+    width: 100%;
-    width: calc((100vw - 90px) / 4 - 35px);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 
     .TrendOfTrafficFlowCharts {
         width: 100%;
         margin-top: 15px;
         position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 200px;
+        /* 🎯 添加最小宽度保护 */
 
         .trafficFlowCarUnit {
             font-family: "Microsoft YaHei";
@@ -22,7 +29,12 @@
 
         .TrendOfTrafficFlow {
             width: 100%;
-            height: 160px;
+            min-height: 160px; 
+            flex: 1;
+            // min-height: 120px;
+            /* 设置最小高度确保图表可用 */
+            min-width: 200px;
+            /* 🎯 添加最小宽度保护 */
         }
     }
 }

src/page/index/components/TrendOfTrafficFlow/TrendOfTrafficFlow.vue

@@ -53,15 +53,31 @@ watch(
 const handleGoMounted = async () => {
     const res = await handleGetSectionFlowCount()
 
-    const chartDom = document.getElementById('TrendOfTrafficFlow');
+    // 🎯 采用VehiclesEntering组件的成功方案 - 添加容器检查机制
-    if (!chartDom) return;
+    const initChartWithDelay = () => {
+        const chartDom = document.getElementById('TrendOfTrafficFlow');
+        if (!chartDom) return;
 
-    myChart = echarts.init(chartDom);
+        // 🎯 关键：检查容器是否可见且有正确尺寸
+        const containerRect = chartDom.getBoundingClientRect();
+        if (containerRect.width === 0 || containerRect.height === 0) {
+            console.log('断面流量容器尺寸不足，延迟重试...', containerRect);
+            // 如果容器还没有正确尺寸，稍后重试
+            setTimeout(initChartWithDelay, 50);
+            return;
+        }
 
-    const option: any = handleSetConfig(res)
+        // 🎯 容器尺寸正确，初始化图表
+        myChart = echarts.init(chartDom);
+        const option: any = handleSetConfig(res)
+        myChart.setOption(option);
+        window.addEventListener('resize', resizeChart);
 
-    myChart.setOption(option);
+        console.log('断面流量图表初始化成功，容器尺寸:', containerRect);
-    window.addEventListener('resize', resizeChart);
+    };
+
+    // 稍微延迟初始化，确保DOM已经稳定
+    setTimeout(initChartWithDelay, 50);
 }
 
 // 配置图表的config

src/page/index/index.vue

@@ -698,11 +698,7 @@ const handleGetHighWayData = async () => {
                         @handleChangeComeForm="handleChangeComeForm" @mapLoaded="handleMapLoaded" />
 
                     <div class="AreaLegend">
-                        <div class="AreaLegendContent">
+
-                            <!-- <span style="font-size: 60px;color: #fff;" @click="handleGetHighWayData">拿数据</span> -->
-                            <!-- 图例组件 -->
-                            <AreaLegend :mapLegend="mapLegend" />
-                        </div>
 
                         <!-- AI图标对话 -->
                         <div class="AIBox" @click="handleClickAIBox" v-if="false">
@@ -741,7 +737,11 @@ const handleGetHighWayData = async () => {
                 <!-- 公告主题 -->
                 <!-- <AnnouncementTopic style="position: relative;z-index: 9;" /> -->
 
-
+                <div class="AreaLegendContent">
+                    <!-- <span style="font-size: 60px;color: #fff;" @click="handleGetHighWayData">拿数据</span> -->
+                    <!-- 图例组件 -->
+                    <AreaLegend :mapLegend="mapLegend" />
+                </div>
 
             </div>
 
@@ -797,8 +797,8 @@ const handleGetHighWayData = async () => {
             </div>
         </div>
 
-        <div class="pageBottom" v-if="selectPageTab === 1">
+        <!-- <div class="pageBottom" v-if="selectPageTab === 1">
-        </div>
+        </div> -->
 
         <!-- 分区二 -->
         <div class="content1692st" v-if="selectPageTab === 2">

src/page/index/style.less

@@ -246,6 +246,7 @@
     width: 100vw;
     height: 100vh;
     background: linear-gradient(180deg, #1C2035 0%, #101320 100%);
+    overflow: hidden;
 
     .pageTop {
         width: 100%;
@@ -319,6 +320,7 @@
             padding-top: 66px;
             display: flex;
             flex-direction: column;
+            position: relative;
 
 
 
@@ -383,31 +385,13 @@
                 }
             }
 
-            .AreaLegend {
+            .AreaLegendContent {
-                width: calc((100% - 90px) / 4 * 2 + 30px);
+                width: calc((100% - 50px));
+                z-index: 10;
                 position: absolute;
-                bottom: 50px;
+                bottom: 20px;
-
+                left: 50%;
-                .AreaLegendContent {
+                transform: translateX(-50%);
-                    width: calc((100% - 50px));
-                    z-index: 10;
-                    position: absolute;
-                    bottom: 0px;
-                }
-
-
-                .AIBox {
-                    right: 0;
-                    bottom: 0;
-                    position: absolute;
-                    z-index: 11;
-                    cursor: pointer;
-
-                    .AIIcon {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
             }
         }
 

src/style.css

@@ -18,14 +18,15 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
 
 body {
   margin: 0;
-  display: flex;
+  padding: 0;
-  place-items: center;
+  overflow: hidden;
   min-width: 320px;
   min-height: 100vh;
 }
@@ -46,9 +47,11 @@ button {
   cursor: pointer;
   transition: border-color 0.25s;
 }
+
 button:hover {
   border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
@@ -70,9 +73,11 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
+
   a:hover {
     color: #747bff;
   }
+
   button {
     background-color: #f9f9f9;
   }