diff --git a/public/static/map_load.js b/public/static/map_load.js
index 897e071..2a40814 100644
--- a/public/static/map_load.js
+++ b/public/static/map_load.js
@@ -4,10 +4,10 @@
 var bmapcfg = {
   'imgext': '.jpg',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
 //这里我直接用的路径是/static/bmap_offline_demo/tiles，如果瓦片数量较大，可改为瓦片服务的地址
-     tiles_dir: "map", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目
-    tiles_path  : 'http://13.14.64.150:3638/',
-    tiles_hybrid: 'http://13.14.64.150:3638/',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
-    tiles_self  : 'http://13.14.64.150:3638/'        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
+     tiles_dir: "images", //普通瓦片图的地址，为空默认在 offlinemap/tiles/ 目
+    tiles_path  : 'http://172.16.1.162:8123/HeBeiDarkMap/',
+    tiles_hybrid: 'http://172.16.1.162:8123/HeBeiDarkMap/',       //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
+    tiles_self  : 'http://172.16.1.162:8123/HeBeiDarkMap/'        //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
     // tiles_path: "http://111.229.30.246:4008/HeBeiDarkMap/",
     // tiles_hybrid: "http://111.229.30.246:4008/HeBeiDarkMap/", //卫星瓦片图的地址，为空默认在 offlinemap/tiles_hybrid/ 目
     // tiles_self: "http://111.229.30.246:4008/HeBeiDarkMap/", //自定义图层的地址，为空默认在 offlinemap/tiles_self/ 目录
diff --git a/public/static/modules.rar b/public/static/modules.rar
deleted file mode 100644
index 811b4f8..0000000
Binary files a/public/static/modules.rar and /dev/null differ
diff --git a/src/api/modules/index.ts b/src/api/modules/index.ts
index 41c4940..e84bb76 100644
--- a/src/api/modules/index.ts
+++ b/src/api/modules/index.ts
@@ -60,4 +60,29 @@ export const getDeviceList = (param: any = {}) => {
 /**当日车流量 /dev-api/iotApi/device/trafficFlow/todayTrafficCount*/
 export const todayTrafficCount=(param:any={})=>{
     return GET('/device/trafficFlow/todayTrafficCount',param)
+}
+
+/**查询天气预报 三天 */
+export const weatherForecast=(param:any={})=>{
+    return GET('/weather/forecast',param)
+}
+
+/**查询今日天气曲线 */
+export const weatherHourly=(param:any={})=>{
+    return GET('/weather/hourly',param)
+}
+
+/*统计当日事件处理状态 */
+export const todayStatusCount=(param:any={})=>{
+    return GET('/device/mevent/todayStatusCount',param)
+}
+
+/**根据桩位号获取每小时车流量 */
+export const todayHourly=(param:any={})=>{
+    return GET('/device/trafficFlow/todayHourly',param)
+}
+
+/**获取当天每小时总车流量和平均车流量 */
+export const trafficTrend=(param:any={})=>{
+    return GET('/device/trafficFlow/trafficTrend',param)
 }
\ No newline at end of file
diff --git a/src/assets/img/map/datun.png b/src/assets/img/map/datun.png
new file mode 100644
index 0000000..34d897d
Binary files /dev/null and b/src/assets/img/map/datun.png differ
diff --git a/src/assets/img/map/dongguang.png b/src/assets/img/map/dongguang.png
new file mode 100644
index 0000000..5db4e40
Binary files /dev/null and b/src/assets/img/map/dongguang.png differ
diff --git a/src/assets/img/map/lianzhen.png b/src/assets/img/map/lianzhen.png
new file mode 100644
index 0000000..5797de4
Binary files /dev/null and b/src/assets/img/map/lianzhen.png differ
diff --git a/src/assets/img/map/nanpi.png b/src/assets/img/map/nanpi.png
new file mode 100644
index 0000000..43c6939
Binary files /dev/null and b/src/assets/img/map/nanpi.png differ
diff --git a/src/assets/img/map/warning.png b/src/assets/img/map/warning.png
new file mode 100644
index 0000000..207910c
Binary files /dev/null and b/src/assets/img/map/warning.png differ
diff --git a/src/assets/img/map/xiaozhuang.png b/src/assets/img/map/xiaozhuang.png
new file mode 100644
index 0000000..e08bccf
Binary files /dev/null and b/src/assets/img/map/xiaozhuang.png differ
diff --git a/src/assets/img/map/zhaizi.png b/src/assets/img/map/zhaizi.png
new file mode 100644
index 0000000..7bd10e5
Binary files /dev/null and b/src/assets/img/map/zhaizi.png differ
diff --git a/src/assets/img/map/zhaowang.png b/src/assets/img/map/zhaowang.png
new file mode 100644
index 0000000..eae27cc
Binary files /dev/null and b/src/assets/img/map/zhaowang.png differ
diff --git a/src/utils/packge.ts b/src/utils/packge.ts
new file mode 100644
index 0000000..675d665
--- /dev/null
+++ b/src/utils/packge.ts
@@ -0,0 +1,27 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 获取当前日期并格式化为 YYYY-MM-DD 星期几
+ */
+export const useTodayTime = () => {
+  const todayTime = ref<string>("");
+
+  const getTodayTime = () => {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+    const day = String(date.getDate()).padStart(2, '0');
+    const weekDay = date.toLocaleDateString('zh-CN', { weekday: 'long' }); // 星期几
+
+    todayTime.value = `${year}-${month}-${day}`;
+  };
+
+  onMounted(() => {
+    getTodayTime();
+  });
+
+  return {
+    todayTime,
+    getTodayTime,
+  };
+};
\ No newline at end of file
diff --git a/src/views/component/111.vue b/src/views/component/111.vue
new file mode 100644
index 0000000..4d38ef1
--- /dev/null
+++ b/src/views/component/111.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import useCharts from "@/hooks/useEcharts";
+import { todayTrafficCount } from "@/api/modules/index";
+import type { EChartsOption } from "echarts";
+
+// 图表 DOM ref 和 ECharts 实例
+const chartRef = ref<HTMLElement | null>(null);
+let chart: ReturnType<typeof useCharts> | null = null;
+
+// 车流数据
+const trafficData = reactive({
+  total: 0,
+  car: { value: 0, percentage: 0, name: "小型车" },
+  truck: { value: 0, percentage: 0, name: "货车" },
+  bus: { value: 0, percentage: 0, name: "客车" },
+});
+
+// 图表初始配置
+const chartOptions: EChartsOption = {
+  tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
+  legend: { show: false },
+  series: [
+    {
+      name: "车流量分布",
+      type: "pie",
+      radius: ["65%", "80%"],
+      center: ["50%", "50%"],
+      data: [], // 初始化为空，稍后更新
+    },
+  ],
+};
+
+// 初始化图表 + 获取数据
+onMounted(async () => {
+  if (chartRef.value) {
+    chart = useCharts(chartRef.value);
+    chart.setOption(chartOptions); // 初始化
+  }
+  await loadTrafficData();
+});
+
+// 获取接口数据并更新图表
+async function loadTrafficData() {
+  try {
+    const res = await todayTrafficCount(); // 假设返回 car、truck、bus 数值
+    trafficData.total = res.total;
+    trafficData.car.value = res.car;
+    trafficData.truck.value = res.truck;
+    trafficData.bus.value = res.bus;
+
+    const newChartData = [
+      { value: res.car, name: "小型车" },
+      { value: res.truck, name: "货车" },
+      { value: res.bus, name: "客车" },
+    ];
+
+    if (chart) {
+      chart.setOption({
+        series: [
+          {
+            data: newChartData,
+          },
+        ],
+      });
+    }
+  } catch (error) {
+    console.error("获取车流量数据失败:", error);
+  }
+}
+</script>
+
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px"></div>
+</template>
\ No newline at end of file
diff --git a/src/views/component/EventStatus.vue b/src/views/component/EventStatus.vue
index cb4235e..76d8f15 100644
--- a/src/views/component/EventStatus.vue
+++ b/src/views/component/EventStatus.vue
@@ -18,6 +18,7 @@
 </template>
 
 <script setup>
+  
 defineProps({
   pendingCount: {
     type: Number,
diff --git a/src/views/component/center.vue b/src/views/component/center.vue
index 34867ba..c360b3c 100644
--- a/src/views/component/center.vue
+++ b/src/views/component/center.vue
@@ -170,9 +170,11 @@ onMounted(() => {
   }
   .bg-header-one{
     background-image: url("@/assets/img/eqm/eqminfo.png");
+    background-size: 100% 100%;
   }
   .bg-header-two{
     background-image: url("@/assets/img/eqm/eqminfo2.png");
+    background-size: 100% 100%;
   }
 }
 
diff --git a/src/views/component/left.vue b/src/views/component/left.vue
index 4dd3a0d..5318add 100644
--- a/src/views/component/left.vue
+++ b/src/views/component/left.vue
@@ -14,10 +14,11 @@ import eqm3Default from "@/assets/img/eqm/eqm3.png";
 import eqm3Active from "@/assets/img/eqm/eqm3_active.png";
 import eqm4Default from "@/assets/img/eqm/eqm4.png";
 import eqm4Active from "@/assets/img/eqm/eqm4_active.png";
-import { todayTrafficCount } from "@/api/modules/index";
+import { todayTrafficCount, trafficTrend } from "@/api/modules/index";
+import { update } from "lodash-es";
 // 车流量数据
-const trafficData = reactive({
-  total: 5000,
+const trafficData = {
+  total: 0,
   car: {
     value: 0,
     percentage: 0,
@@ -33,7 +34,7 @@ const trafficData = reactive({
     percentage: 0,
     name: "客车",
   },
-});
+};
 
 // 监测点车流数据
 const monitoringPointsData = reactive({
@@ -48,25 +49,10 @@ const monitoringPointsData = reactive({
 
 // 交通流量趋势数据
 const trafficTrendData = reactive({
-  hours: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
-  realTimeValues: [
-    1200, // 凌晨
-    800, // 早晨
-    3500, // 早高峰
-    2800, // 中午
-    3800, // 下午
-    4200, // 晚高峰
-    2000, // 深夜
-  ],
-  averageValues: [
-    1000, // 凌晨历史平均
-    900, // 早晨历史平均
-    3200, // 早高峰历史平均
-    2500, // 中午历史平均
-    3500, // 下午历史平均
-    4000, // 晚高峰历史平均
-    1800, // 深夜历史平均
-  ],
+  hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00",  "09:00", "10:00", "11:00","12:00", 
+      "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
+  realTimeValues: [],
+  averageValues: [],
 });
 
 // CountUp 配置
@@ -109,8 +95,8 @@ const chartOptions: EChartsOption = {
               x2: 1,
               y2: 0,
               colorStops: [
-                { offset: 0, color: "#4ecee6" },
-                { offset: 1, color: "#4ea8e6" },
+                { offset: 0, color: "#FDBB67" },
+                { offset: 1, color: "#FDBB67" },
               ],
             },
           },
@@ -126,8 +112,8 @@ const chartOptions: EChartsOption = {
               x2: 1,
               y2: 0,
               colorStops: [
-                { offset: 0, color: "#ffb980" },
-                { offset: 1, color: "#ff9f60" },
+                { offset: 0, color: "#59A2FC " },
+                { offset: 1, color: "#59A2FC " },
               ],
             },
           },
@@ -143,8 +129,8 @@ const chartOptions: EChartsOption = {
               x2: 1,
               y2: 0,
               colorStops: [
-                { offset: 0, color: "#00ffff" },
-                { offset: 1, color: "#00c8ff" },
+                { offset: 0, color: "#00FFFF" },
+                { offset: 1, color: "#00FFFF" },
               ],
             },
           },
@@ -200,7 +186,6 @@ const chartOptions: EChartsOption = {
     },
   ],
 };
-
 // 初始化图表
 const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
 // 获取当前日期并格式化为 YYYY-MM-DD
@@ -211,58 +196,113 @@ const day = String(today.getDate()).padStart(2, '0');
 
 const todayTime = ref(`${year}-${month}-${day}`);
 // 确保图表在组件挂载后渲染
-onMounted( async () => {
+onMounted(async () => {
+  initCharts();
   try {
     const query = {
       todayTime: todayTime.value
     };
     const res = await todayTrafficCount(query);
-    if(res.data){
-      res.data.forEach((item)=>{
-        console.log(item.vehicleCount, trafficData.car.value)
-        if(item.vehicleType==1){ //小车
+    if (res.data) {
+      res.data.forEach((item) => {
+        if (item.vehicleType == 1) { //小车
           trafficData.car.value = item.vehicleCount;
           trafficData.car.percentage = item.percentage;
-          console.log(trafficData.car.value, '111111111111111111111')
-        } else if(item.vehicleType==2){ //货车
+        } else if (item.vehicleType == 2) { //货车
           trafficData.truck.value = item.vehicleCount;
           trafficData.truck.percentage = item.percentage;
-        } else if(item.vehicleType==3){ //客车
+        } else if (item.vehicleType == 3) { //客车
           trafficData.bus.value = item.vehicleCount;
           trafficData.bus.percentage = item.percentage;
         }
-        trafficData.total = item.total
+        trafficData.total = item.total;
       })
-      console.log(trafficData.total, 'trafficData')
-      updateChart();
+      // console.log(trafficData, 'trafficData')
     }
-    initCharts();
+    chartOptions.series[0].data = [
+      {
+        value: trafficData.car.value,
+        name: trafficData.car.name,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "#FDBB67" },
+              { offset: 1, color: "#FDBB67" },
+            ],
+          },
+        },
+      },
+      {
+        value: trafficData.truck.value,
+        name: trafficData.truck.name,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "#59A2FC" },
+              { offset: 1, color: "#59A2FC" },
+            ],
+          },
+        },
+      },
+      {
+        value: trafficData.bus.value,
+        name: trafficData.bus.name,
+        itemStyle: {
+          color: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 1,
+            y2: 0,
+            colorStops: [
+              { offset: 0, color: "#00FFFF" },
+              { offset: 1, color: "#00FFFF" },
+            ],
+          },
+        },
+      },
+    ];
+
+    // 更新文本内容（如总量）
+    chartOptions.graphic[0].style.text = trafficData.total.toLocaleString();
+
+    // 调用 setOptions 方法重新渲染图表
+    setOptions(chartOptions);
+    trafficTrend({today: '2025-05-30', pileNum: ''}).then((res) => {
+      console.log(res, '///////////////////')
+      if (res.code == 200) {
+        // 清空原有数据
+        trafficTrendData.realTimeValues = [];
+        trafficTrendData.averageValues = [];
+
+        trafficTrendData.realTimeValues = [...res.data.map(item => item.total)];
+        trafficTrendData.averageValues = [...res.data.map(item => item.avg)];
+        console.log(trafficTrendData, 'trafficTrendData')
+        // // 可选：重新渲染图表
+        // trendChartInstance.setOption({
+        //   series: [{
+        //     data: trafficTrendData.realTimeValues
+        //   }, {
+        //     data: trafficTrendData.averageValues
+        //   }]
+        // });
+      }
+    })
   } catch (error) {
     console.error("请求设备列表失败:", error);
   }
-  trafficData.total = 1000;
-
+  
 });
-const updateChart = () => {
-  setOptions({
-    series: [
-      {
-        data: [
-          { value: trafficData.car.value, name: "小型车" },
-          { value: trafficData.truck.value, name: "货车" },
-          { value: trafficData.bus.value, name: "客车" },
-        ],
-      },
-    ],
-    graphic: [
-      {
-        style: {
-          text: trafficData.total.toLocaleString(), // ✅ 这里引用了最新值
-        },
-      },
-    ],
-  });
-};
 
 // 趋势图时间范围选项
 const timeRangeOptions = [
@@ -322,43 +362,28 @@ const toggleSelection = (index: number) => {
               <div class="vehicle-item">
                 <div class="vehicle-info">
                   <span class="vehicle-name">小型车</span>
-                  <span class="percentage"
-                    >{{ trafficData.car.percentage }}%</span
-                  >
+                  <span class="percentage">{{ trafficData.car.percentage }}%</span>
                 </div>
                 <div class="vehicle-value car">
-                  <count-up
-                    :end-val="trafficData.car.value"
-                    :options="countupOptions"
-                  />
+                  <count-up :end-val="trafficData.car.value" :options="countupOptions" />
                 </div>
               </div>
               <div class="vehicle-item">
                 <div class="vehicle-info">
                   <span class="vehicle-name">货车</span>
-                  <span class="percentage"
-                    >{{ trafficData.truck.percentage }}%</span
-                  >
+                  <span class="percentage">{{ trafficData.truck.percentage }}%</span>
                 </div>
                 <div class="vehicle-value truck">
-                  <count-up
-                    :end-val="trafficData.truck.value"
-                    :options="countupOptions"
-                  />
+                  <count-up :end-val="trafficData.truck.value" :options="countupOptions" />
                 </div>
               </div>
               <div class="vehicle-item">
                 <div class="vehicle-info">
                   <span class="vehicle-name">客车</span>
-                  <span class="percentage"
-                    >{{ trafficData.bus.percentage }}%</span
-                  >
+                  <span class="percentage">{{ trafficData.bus.percentage }}%</span>
                 </div>
                 <div class="vehicle-value bus">
-                  <count-up
-                    :end-val="trafficData.bus.value"
-                    :options="countupOptions"
-                  />
+                  <count-up :end-val="trafficData.bus.value" :options="countupOptions" />
                 </div>
               </div>
             </div>
@@ -376,25 +401,15 @@ const toggleSelection = (index: number) => {
       <div class="traffic-flow-item">
         <div class="item-title">今日各监测点车流情况</div>
         <div class="item-content">
-          <monitoring-points-chart
-            :data="monitoringPointsData.points"
-          ></monitoring-points-chart>
+          <monitoring-points-chart :data="monitoringPointsData.points"></monitoring-points-chart>
         </div>
       </div>
       <div class="traffic-flow-item">
         <div class="item-title">
           交通流量趋势
           <div class="dropdown-container">
-            <select
-              v-model="selectedTimeRange"
-              @change="handleTimeRangeChange"
-              class="custom-select"
-            >
-              <option
-                v-for="option in timeRangeOptions"
-                :key="option.value"
-                :value="option.value"
-              >
+            <select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="custom-select">
+              <option v-for="option in timeRangeOptions" :key="option.value" :value="option.value">
                 {{ option.label }}
               </option>
             </select>
@@ -404,17 +419,12 @@ const toggleSelection = (index: number) => {
           <traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart>
         </div>
         <div class="eqmMange">
-          <div 
-            v-for="(item, index) in items" 
-            :key="index" 
-            class="eqm-item" 
-            :class="{ active: item.isActive }"
+          <div v-for="(item, index) in items" :key="index" class="eqm-item" :class="{ active: item.isActive }"
             @click="toggleSelection(index)"
-            :style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"
-          ></div>
+            :style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"></div>
         </div>
       </div>
-      
+
     </div>
   </div>
 </template>
@@ -427,12 +437,15 @@ const toggleSelection = (index: number) => {
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
+
   .top {
     flex: 1;
     width: 100%;
     display: flex;
+
     .traffic-flow-item {
       flex: 1;
+
       .item-title {
         width: 1080px;
         height: 104px;
@@ -451,6 +464,7 @@ const toggleSelection = (index: number) => {
         font-style: normal;
         text-transform: none;
       }
+
       .item-content {
         width: 1080px;
         height: 948px;
@@ -460,8 +474,10 @@ const toggleSelection = (index: number) => {
         padding: 40px;
       }
     }
+
     .top-left {
       display: flex;
+
       .leftcont {
         width: 744px;
         height: 744px;
@@ -470,6 +486,7 @@ const toggleSelection = (index: number) => {
         justify-content: center;
         align-items: center;
       }
+
       .rightcont {
         flex: 1;
         height: 744px;
@@ -517,18 +534,19 @@ const toggleSelection = (index: number) => {
               border-radius: 12px;
 
               &.car {
-                color: #4ea8e6;
-                background-color: #29384a;
+                border-radius: 8px 8px 8px 8px;
+                background: rgba(253, 187, 103, 0.1);
+                color: #FDBB67;
               }
 
               &.truck {
-                color: #ff9f60;
-                background-color: #163053;
+                color: #59A2FC;
+                background-color: rgba(0, 200, 255, 0.1);
               }
 
               &.bus {
-                color: #00c8ff;
-                background-color: #0a354e;
+                color: #00FFFF;
+                background-color: rgba(0, 255, 255, 0.1);
               }
             }
 
@@ -564,13 +582,16 @@ const toggleSelection = (index: number) => {
       }
     }
   }
+
   .bottom {
     flex: 1;
     width: 100%;
     display: flex;
+
     .traffic-flow-item {
       flex: 1;
       position: relative;
+
       .item-title {
         width: 1080px;
         height: 104px;
@@ -639,6 +660,7 @@ const toggleSelection = (index: number) => {
           }
         }
       }
+
       .item-content {
         width: 1080px;
         height: 948px;
@@ -654,6 +676,7 @@ const toggleSelection = (index: number) => {
         }
       }
     }
+
     .eqmMange {
       position: absolute;
       width: 184px;
@@ -665,6 +688,7 @@ const toggleSelection = (index: number) => {
     }
   }
 }
+
 .eqmMange {
   display: flex;
   flex-direction: column;
@@ -677,16 +701,17 @@ const toggleSelection = (index: number) => {
 
   .eqm-item {
     width: 100%;
-    height: 25%; /* 四个等分高度 */
+    height: 25%;
+    /* 四个等分高度 */
     background-size: cover;
     background-position: center;
     cursor: pointer;
     transition: transform 0.2s ease-in-out;
 
     &.active {
-      transform: scale(1.05); /* 可选效果：放大一点表示激活 */
+      transform: scale(1.05);
+      /* 可选效果：放大一点表示激活 */
     }
   }
 }
-
 </style>
diff --git a/src/views/component/map.vue b/src/views/component/map.vue
index 1a92149..4d10694 100644
--- a/src/views/component/map.vue
+++ b/src/views/component/map.vue
@@ -50,6 +50,14 @@ const iconModules = import.meta.glob("@/assets/img/map/*.png", {
 function getIcon(type, active = false) {
   const iconName =
     {
+      1: active ? "lianzhen.png" : "lianzhen.png",
+      2: active ? "datun.png" : "datun.png",
+      3: active ? "zhaowang.png" : "zhaowang.png",
+      4: active ? "dongguang.png" : "dongguang.png",
+      5: active ? "nanpi.png" : "nanpi.png",
+      6: active ? "zhaizi.png" : "zhaizi.png",
+      7: active ? "xiaozhuang.png" : "xiaozhuang.png",
+      8: active ? "warning.png" : "warning.png",
       22: active ? "video-active.png" : "video.png",
       44: active ? "weather-active.png" : "weather.png",
       53: active ? "broadcast-active.png" : "broadcast.png",
@@ -59,8 +67,39 @@ function getIcon(type, active = false) {
   // 获取图片路径
   const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
   console.log("iconPath:", iconPath);
-  return new BMap.Icon(iconPath, new BMap.Size(68, 68));
+  return new BMap.Icon(iconPath, new BMap.Size(64, 150));
 }
+function getBigIcon(type, active = false) {
+  const iconName =
+    {
+      1: active ? "lianzhen.png" : "lianzhen.png",
+      2: active ? "datun.png" : "datun.png",
+      3: active ? "zhaowang.png" : "zhaowang.png",
+      4: active ? "dongguang.png" : "dongguang.png",
+      5: active ? "nanpi.png" : "nanpi.png",
+      6: active ? "zhaizi.png" : "zhaizi.png",
+      7: active ? "xiaozhuang.png" : "xiaozhuang.png",
+      8: active ? "warning.png" : "warning.png",
+    }[type] || "default.png";
+
+  // 获取图片路径
+  const iconPath = iconModules[`/src/assets/img/map/${iconName}`];
+  console.log("iconPath:", iconPath);
+  return new BMap.Icon(iconPath, new BMap.Size(560, 560));
+}
+
+
+const customDevices = [
+  { lat: 37.81813, lon: 116.474514, deviceTypeId: '1' }, // 连镇互通
+  { lat: 37.821508, lon: 116.498481, deviceTypeId: '2' }, // 大屯
+  { lat: 37.825527, lon: 116.52225, deviceTypeId: '3' }, // 找王
+  { lat: 37.82899, lon: 116.546504, deviceTypeId: '4' }, // 东光
+  { lat: 37.848468, lon: 116.61959, deviceTypeId: '5' }, // 南皮服务区
+  { lat: 37.984301, lon: 117.234876, deviceTypeId: '6' }, // 寨子
+  { lat: 37.986348, lon: 117.288558, deviceTypeId: '7' },  // 小庄
+  { lat: 37.93491, lon: 116.948172, deviceTypeId: '8' }, //告警图
+];
+
 onMounted(async () => {
   await nextTick();
   map = new BMap.Map("baiduMap");
@@ -74,7 +113,585 @@ onMounted(async () => {
   map.addEventListener("click", (e) => {
     console.log("点击的坐标：", e.point.lng, e.point.lat);
   });
+  // 定义路径点数组
+  var points1 = [
+new BMap.Point(115.816121923,37.726502586),
+new BMap.Point(115.817918534,37.725846130),
+new BMap.Point(115.820002603,37.725475087),
+new BMap.Point(115.821871078,37.725418004),
+new BMap.Point(115.823919215,37.725731963),
+new BMap.Point(115.825787690,37.726274254),
+new BMap.Point(115.827548369,37.727159035),
+new BMap.Point(115.828949726,37.728157969),
+new BMap.Point(115.830351082,37.728957106),
+new BMap.Point(115.831968032,37.729784775),
+new BMap.Point(115.833800575,37.730498275),
+new BMap.Point(115.836136170,37.731211768),
+new BMap.Point(115.838435832,37.731696939),
+new BMap.Point(115.841058884,37.731868175),
+new BMap.Point(115.844688038,37.731839636),
+new BMap.Point(115.847418887,37.731811097),
+new BMap.Point(115.851299567,37.732039411),
+new BMap.Point(115.855755162,37.732667272),
+new BMap.Point(115.860929402,37.734265440),
+new BMap.Point(115.864881946,37.736034799),
+new BMap.Point(115.868043981,37.737918264),
+new BMap.Point(115.870918559,37.739972897),
+new BMap.Point(115.874511781,37.742655249),
+new BMap.Point(115.878536190,37.745280435),
+new BMap.Point(115.881087377,37.746250588),
+new BMap.Point(115.883890091,37.747135129),
+new BMap.Point(115.886513143,37.747677261),
+new BMap.Point(115.889279924,37.747962592),
+new BMap.Point(115.891723315,37.748048191),
+new BMap.Point(115.894526028,37.748076725),
+new BMap.Point(115.897580267,37.748133791),
+new BMap.Point(115.899556539,37.748219390),
+new BMap.Point(115.901640607,37.748276455),
+new BMap.Point(115.904048066,37.748304988),
+new BMap.Point(115.906275864,37.748419120),
+new BMap.Point(115.909366035,37.748647383),
+new BMap.Point(115.911629765,37.749103906),
+new BMap.Point(115.914252817,37.749674557),
+new BMap.Point(115.916732140,37.750473460),
+new BMap.Point(115.919031802,37.751415013),
+new BMap.Point(115.921582990,37.752613336),
+new BMap.Point(115.922984346,37.753412207),
+new BMap.Point(115.924709093,37.754496375),
+new BMap.Point(115.926469772,37.755865828),
+new BMap.Point(115.928410112,37.757492019),
+new BMap.Point(115.929955197,37.759089647),
+new BMap.Point(115.932793843,37.761885410),
+new BMap.Point(115.934554521,37.763654104),
+new BMap.Point(115.936530793,37.765650964),
+new BMap.Point(115.938327404,37.767333990),
+new BMap.Point(115.939800625,37.768703203),
+new BMap.Point(115.941525372,37.770072391),
+new BMap.Point(115.944184356,37.772069077),
+new BMap.Point(115.946376222,37.773552294),
+new BMap.Point(115.948639952,37.774921391),
+new BMap.Point(115.950131139,37.775734280),
+new BMap.Point(115.951873852,37.776689770),
+new BMap.Point(115.953652496,37.777588204),
+new BMap.Point(115.955287412,37.778415324),
+new BMap.Point(115.956760634,37.779171133),
+new BMap.Point(115.958305719,37.779983975),
+new BMap.Point(115.959814872,37.780754028),
+new BMap.Point(115.960605381,37.781153311),
+new BMap.Point(115.962833179,37.782237069),
+new BMap.Point(115.963677586,37.782664864),
+new BMap.Point(115.965096909,37.783263773),
+new BMap.Point(115.966480299,37.783805638),
+new BMap.Point(115.968205046,37.784433056),
+new BMap.Point(115.969570470,37.784860838),
+new BMap.Point(115.971403013,37.785402692),
+new BMap.Point(115.973217590,37.785901764),
+new BMap.Point(115.974565049,37.786201206),
+new BMap.Point(115.976343694,37.786600459),
+new BMap.Point(115.978212169,37.786914157),
+new BMap.Point(115.980098611,37.787213595),
+new BMap.Point(115.981571832,37.787384701),
+new BMap.Point(115.982326408,37.787470254),
+new BMap.Point(115.984356579,37.787669878),
+new BMap.Point(115.986440648,37.787840984),
+new BMap.Point(115.988488784,37.787955054),
+new BMap.Point(115.991039972,37.788154676),
+new BMap.Point(115.993267769,37.788439850),
+new BMap.Point(115.994992516,37.788725023),
+new BMap.Point(115.997076585,37.789095746),
+new BMap.Point(116.000058959,37.789708860),
+new BMap.Point(116.002376587,37.790350486),
+new BMap.Point(116.003957605,37.790792492),
+new BMap.Point(116.006077606,37.791448366),
+new BMap.Point(116.007532861,37.791918881),
+new BMap.Point(116.010155913,37.792859902),
+new BMap.Point(116.012778965,37.793914972),
+new BMap.Point(116.015905068,37.795312203),
+new BMap.Point(116.018923375,37.796566837),
+new BMap.Point(116.021438630,37.797593340),
+new BMap.Point(116.023953886,37.798619828),
+new BMap.Point(116.026792531,37.799731841),
+new BMap.Point(116.029379651,37.800758299),
+new BMap.Point(116.031643381,37.801499621),
+new BMap.Point(116.033871178,37.802212424),
+new BMap.Point(116.037428468,37.803096289),
+new BMap.Point(116.038757960,37.803409916),
+new BMap.Point(116.043536946,37.804208234),
+new BMap.Point(116.047956609,37.804721434),
+new BMap.Point(116.051729492,37.805035054),
+new BMap.Point(116.055789833,37.805348673),
+new BMap.Point(116.059706445,37.805690801),
+new BMap.Point(116.063479328,37.806004417),
+new BMap.Point(116.067324076,37.806203990),
+new BMap.Point(116.070845433,37.806460583),
+new BMap.Point(116.073540350,37.806631645),
+new BMap.Point(116.077672555,37.806631645),
+new BMap.Point(116.080978319,37.806203990),
+new BMap.Point(116.083421710,37.805548248),
+new BMap.Point(116.085649508,37.804835477),
+new BMap.Point(116.088416289,37.803495451),
+new BMap.Point(116.091470528,37.802069864),
+new BMap.Point(116.094740360,37.800473173),
+new BMap.Point(116.097866463,37.799047527),
+new BMap.Point(116.100381718,37.798163613),
+new BMap.Point(116.103040703,37.797593340),
+new BMap.Point(116.106202738,37.797222660),
+new BMap.Point(116.108538332,37.797251174),
+new BMap.Point(116.110658333,37.797336715),
+new BMap.Point(116.113496979,37.797450771),
+new BMap.Point(116.116659014,37.797564826),
+new BMap.Point(116.119605456,37.797735908),
+new BMap.Point(116.123737662,37.797935504),
+new BMap.Point(116.127690206,37.798106586),
+new BMap.Point(116.132073937,37.798277667),
+new BMap.Point(116.137463770,37.798619828),
+new BMap.Point(116.142781739,37.798847935),
+new BMap.Point(116.149249538,37.799190093),
+new BMap.Point(116.152842760,37.799304146),
+new BMap.Point(116.156256321,37.799560763),
+new BMap.Point(116.159705814,37.800016969),
+new BMap.Point(116.163119375,37.800644249),
+new BMap.Point(116.166497004,37.801556646),
+new BMap.Point(116.169982429,37.802725637),
+new BMap.Point(116.172928871,37.803837588),
+new BMap.Point(116.175264466,37.804778456),
+new BMap.Point(116.177743789,37.805690801),
+new BMap.Point(116.180546502,37.806603135),
+new BMap.Point(116.185397352,37.807743536),
+new BMap.Point(116.189026506,37.808342240),
+new BMap.Point(116.192368203,37.808883920),
+new BMap.Point(116.197254985,37.809682177),
+new BMap.Point(116.202321428,37.810451918),
+new BMap.Point(116.206058379,37.811079108),
+new BMap.Point(116.209651601,37.811763309),
+new BMap.Point(116.212310585,37.812533028),
+new BMap.Point(116.214861773,37.813359753),
+new BMap.Point(116.218526859,37.814842135),
+new BMap.Point(116.222227878,37.816609551),
+new BMap.Point(116.225210252,37.818006349),
+new BMap.Point(116.229593983,37.820115749),
+new BMap.Point(116.233330934,37.821769020),
+new BMap.Point(116.235810257,37.822738161),
+new BMap.Point(116.237696699,37.823308238),
+new BMap.Point(116.240014327,37.823978073),
+new BMap.Point(116.242583481,37.824562393),
+new BMap.Point(116.244685516,37.825004192),
+new BMap.Point(116.246553991,37.825289222),
+new BMap.Point(116.248224839,37.825488743),
+new BMap.Point(116.251332976,37.825759520),
+new BMap.Point(116.254243486,37.825873531),
+new BMap.Point(116.256579081,37.825930536),
+new BMap.Point(116.260100438,37.826073050),
+new BMap.Point(116.263621796,37.826158558),
+new BMap.Point(116.266568238,37.826244066),
+new BMap.Point(116.270592646,37.826329574),
+new BMap.Point(116.274185869,37.826415081),
+new BMap.Point(116.277958752,37.826500589),
+new BMap.Point(116.281300448,37.826614599),
+new BMap.Point(116.284965535,37.826643101),
+new BMap.Point(116.289564859,37.826671604),
+new BMap.Point(116.292978420,37.826700106),
+new BMap.Point(116.296895032,37.826614599),
+new BMap.Point(116.299985203,37.826386579),
+new BMap.Point(116.302248933,37.826130055),
+new BMap.Point(116.305303171,37.825588503),
+new BMap.Point(116.307998088,37.824989940),
+new BMap.Point(116.310459445,37.824334366),
+new BMap.Point(116.310463937,37.824330803),
+new BMap.Point(116.311007411,37.824174035),
+new BMap.Point(116.311443090,37.824038643),
+new BMap.Point(116.311932666,37.823896126),
+new BMap.Point(116.313244192,37.823536268),
+new BMap.Point(116.315058769,37.823051704),
+new BMap.Point(116.316711651,37.822609893),
+new BMap.Point(116.317879449,37.822282096),
+new BMap.Point(116.319999450,37.821726263),
+new BMap.Point(116.322209281,37.821184678),
+new BMap.Point(116.324257418,37.820799865),
+new BMap.Point(116.326539114,37.820457808),
+new BMap.Point(116.328497420,37.820315283),
+new BMap.Point(116.330850980,37.820229769),
+new BMap.Point(116.332342167,37.820229769),
+new BMap.Point(116.334390304,37.820329536),
+new BMap.Point(116.335917423,37.820457808),
+new BMap.Point(116.337534373,37.820628837),
+new BMap.Point(116.341882172,37.821099164),
+new BMap.Point(116.344074037,37.821312949),
+new BMap.Point(116.346032343,37.821540985),
+new BMap.Point(116.348637429,37.821797524),
+new BMap.Point(116.351044888,37.822054063),
+new BMap.Point(116.356290992,37.822709657),
+new BMap.Point(116.361608961,37.823336742),
+new BMap.Point(116.366890997,37.823935318),
+new BMap.Point(116.372101169,37.824676406),
+new BMap.Point(116.376377103,37.825103953),
+new BMap.Point(116.379179817,37.825189462),
+new BMap.Point(116.383024564,37.825075450),
+new BMap.Point(116.386977108,37.824619399),
+new BMap.Point(116.390426602,37.823878311),
+new BMap.Point(116.394666604,37.822738161),
+new BMap.Point(116.398259826,37.821597993),
+new BMap.Point(116.402212370,37.820343788),
+new BMap.Point(116.408033390,37.818576463),
+new BMap.Point(116.412057798,37.817379218),
+new BMap.Point(116.415651020,37.816295980),
+new BMap.Point(116.418417801,37.815725848),
+new BMap.Point(116.420358141,37.815383767),
+new BMap.Point(116.422442210,37.815041684),
+new BMap.Point(116.424705940,37.814671092),
+new BMap.Point(116.427221195,37.814243484),
+new BMap.Point(116.429305264,37.813872889),
+new BMap.Point(116.432036113,37.813445276),
+new BMap.Point(116.434299843,37.813046169),
+new BMap.Point(116.436851030,37.812818107),
+new BMap.Point(116.439366286,37.812732583),
+new BMap.Point(116.441881541,37.812989153),
+new BMap.Point(116.444037474,37.813331246),
+new BMap.Point(116.446103577,37.813915650),
+new BMap.Point(116.448205612,37.814585571),
+new BMap.Point(116.449714765,37.815169965),
+new BMap.Point(116.451062223,37.815668835),
+new BMap.Point(116.452319851,37.816167701),
+new BMap.Point(116.453469682,37.816566791),
+new BMap.Point(116.456038836,37.817521748),
+new BMap.Point(116.458841549,37.818519452),
+new BMap.Point(116.461392737,37.819374615),
+new BMap.Point(116.464087653,37.820030234),
+new BMap.Point(116.466890367,37.820457808),
+new BMap.Point(116.470124266,37.820799865),
+new BMap.Point(116.473034776,37.820771361),
+new BMap.Point(116.476017151,37.820685846),
+new BMap.Point(116.478927660,37.820571827),
+new BMap.Point(116.481622577,37.820486313),
+new BMap.Point(116.483059866,37.820486313),
+new BMap.Point(116.487946648,37.820486313),
+new BMap.Point(116.491791395,37.820600332),
+new BMap.Point(116.496175126,37.821027903),
+new BMap.Point(116.501888349,37.822054063),
+new BMap.Point(116.507817166,37.823194223),
+new BMap.Point(116.514069372,37.824533889),
+new BMap.Point(116.517914119,37.825246468),
+new BMap.Point(116.520788697,37.825617006),
+new BMap.Point(116.525208360,37.825902034),
+new BMap.Point(116.529160904,37.825816525),
+new BMap.Point(116.533005652,37.825873531),
+new BMap.Point(116.536131755,37.826215563),
+new BMap.Point(116.544324301,37.828239221),
+new BMap.Point(116.546947354,37.828923262),
+new BMap.Point(116.549318880,37.829521792),
+new BMap.Point(116.552624644,37.830148819),
+new BMap.Point(116.555858544,37.830433829),
+new BMap.Point(116.559128376,37.830576334),
+new BMap.Point(116.563835497,37.830889843),
+new BMap.Point(116.568075499,37.831146350),
+new BMap.Point(116.571596857,37.831431356),
+new BMap.Point(116.577561605,37.831801863),
+new BMap.Point(116.584173134,37.832371870),
+new BMap.Point(116.587263305,37.833055872),
+new BMap.Point(116.590748730,37.834338358),
+new BMap.Point(116.593731105,37.835905812),
+new BMap.Point(116.597683649,37.838043194),
+new BMap.Point(116.601312803,37.840209010),
+new BMap.Point(116.605049754,37.842317770),
+new BMap.Point(116.608068060,37.843970540),
+new BMap.Point(116.610655180,37.845395311),
+new BMap.Point(116.613242300,37.846535108),
+new BMap.Point(116.615721623,37.847503921),
+new BMap.Point(116.617769760,37.848244770),
+new BMap.Point(116.619386710,37.848871636),
+new BMap.Point(116.621614508,37.849612471),
+new BMap.Point(116.625243662,37.850581243),
+new BMap.Point(116.629627393,37.851436032),
+new BMap.Point(116.634442310,37.852062871),
+new BMap.Point(116.639616550,37.852490258),
+new BMap.Point(116.644718925,37.852775181),
+new BMap.Point(116.647988757,37.853088595),
+new BMap.Point(116.650971132,37.853316532),
+new BMap.Point(116.654636218,37.853772404),
+new BMap.Point(116.658552830,37.854399222),
+new BMap.Point(116.661319611,37.854940561),
+new BMap.Point(116.664373850,37.855510388),
+new BMap.Point(116.668757581,37.856450591),
+new BMap.Point(116.672997583,37.856991915),
+new BMap.Point(116.680543349,37.857447764),
+new BMap.Point(116.687190810,37.857447764),
+new BMap.Point(116.690963693,37.857561726),
+new BMap.Point(116.694736576,37.858160022),
+new BMap.Point(116.698293866,37.859157171),
+new BMap.Point(116.701707427,37.860724092),
+new BMap.Point(116.705336581,37.862518888),
+new BMap.Point(116.708247091,37.864057249),
+new BMap.Point(116.712127771,37.865738014),
+new BMap.Point(116.714786755,37.866592626),
+new BMap.Point(116.718775232,37.867418741),
+new BMap.Point(116.721937267,37.867959983),
+new BMap.Point(116.724919641,37.868159388),
+new BMap.Point(116.730345406,37.868843055),
+new BMap.Point(116.735124392,37.869412773),
+new BMap.Point(116.739508123,37.870039457),
+new BMap.Point(116.743352870,37.870666137),
+new BMap.Point(116.745544736,37.871093415),
+new BMap.Point(116.749281687,37.871976448),
+new BMap.Point(116.752946773,37.873115831),
+new BMap.Point(116.756683724,37.874483066),
+new BMap.Point(116.759989488,37.875850276),
+new BMap.Point(116.763331185,37.877217461),
+new BMap.Point(116.766277627,37.878385244),
+new BMap.Point(116.770050510,37.880037198),
+new BMap.Point(116.774038986,37.881689114),
+new BMap.Point(116.777632209,37.882828345),
+new BMap.Point(116.780794244,37.883454915),
+new BMap.Point(116.788771197,37.883711237),
+new BMap.Point(116.795957641,37.883654277),
+new BMap.Point(116.802353576,37.883996039),
+new BMap.Point(116.806881036,37.884736517),
+new BMap.Point(116.811085106,37.885790263),
+new BMap.Point(116.814426802,37.886843993),
+new BMap.Point(116.817049854,37.888097057),
+new BMap.Point(116.820283754,37.889549446),
+new BMap.Point(116.822331891,37.890546167),
+new BMap.Point(116.825062739,37.891827645),
+new BMap.Point(116.827829520,37.893194531),
+new BMap.Point(116.832464777,37.895558043),
+new BMap.Point(116.836920372,37.897836054),
+new BMap.Point(116.842382070,37.900398732),
+new BMap.Point(116.846586139,37.902221026),
+new BMap.Point(116.851005803,37.903644662),
+new BMap.Point(116.854778686,37.904783550),
+new BMap.Point(116.859054620,37.905723120),
+new BMap.Point(116.864156995,37.906861976),
+new BMap.Point(116.868576658,37.907886931),
+new BMap.Point(116.871954287,37.908655638),
+new BMap.Point(116.877380052,37.910249967),
+new BMap.Point(116.882841750,37.912299768),
+new BMap.Point(116.887512939,37.914634193),
+new BMap.Point(116.892615314,37.917680221),
+new BMap.Point(116.896028875,37.919729813),
+new BMap.Point(116.898831588,37.921295435),
+new BMap.Point(116.902460742,37.923174136),
+new BMap.Point(116.906161761,37.924682756),
+new BMap.Point(116.909287864,37.925935171),
+new BMap.Point(116.912845154,37.926988321),
+new BMap.Point(116.916869563,37.928041457),
+new BMap.Point(116.920211259,37.928724563),
+new BMap.Point(116.923876346,37.929265352),
+new BMap.Point(116.926499398,37.929578438),
+new BMap.Point(116.931781434,37.930005371),
+new BMap.Point(116.934656012,37.930261530),
+new BMap.Point(116.937297030,37.930474995),
+new BMap.Point(116.939650590,37.930745383),
+new BMap.Point(116.941770591,37.930958847),
+new BMap.Point(116.943621101,37.931200771),
+new BMap.Point(116.945309915,37.931585003),
+new BMap.Point(116.946872967,37.931898079),
+new BMap.Point(116.951616020,37.933306905),
+new BMap.Point(116.955568564,37.935014537),
+new BMap.Point(116.958299413,37.936665209),
+new BMap.Point(116.961605177,37.938771185),
+new BMap.Point(116.965198399,37.941104762),
+new BMap.Point(116.967138739,37.942356895),
+new BMap.Point(116.970516368,37.943836661),
+new BMap.Point(116.973390945,37.944918009),
+new BMap.Point(116.976013997,37.945629414),
+new BMap.Point(116.979283829,37.946255444),
+new BMap.Point(116.982302136,37.946682280),
+new BMap.Point(116.986470273,37.946739191),
+new BMap.Point(116.989416716,37.946824558),
+new BMap.Point(116.992578751,37.946909925),
+new BMap.Point(117.002208586,37.947080658),
+new BMap.Point(117.008891979,37.947479033),
+new BMap.Point(117.015790965,37.948446508),
+new BMap.Point(117.020821476,37.949129423),
+new BMap.Point(117.027289276,37.949840787),
+new BMap.Point(117.030379447,37.950182239),
+new BMap.Point(117.034152330,37.950324510),
+new BMap.Point(117.038176739,37.950466781),
+new BMap.Point(117.042776063,37.950580597),
+new BMap.Point(117.053591661,37.950836684),
+new BMap.Point(117.066742854,37.951291947),
+new BMap.Point(117.076228960,37.950950500),
+new BMap.Point(117.084349642,37.950552143),
+new BMap.Point(117.091248628,37.950267601),
+new BMap.Point(117.097860157,37.951405762),
+new BMap.Point(117.101309650,37.952600811),
+new BMap.Point(117.104615414,37.954478706),
+new BMap.Point(117.107921178,37.956697974),
+new BMap.Point(117.111873723,37.960282803),
+new BMap.Point(117.114820165,37.963127779),
+new BMap.Point(117.117982200,37.965289887),
+new BMap.Point(117.121647287,37.966882978),
+new BMap.Point(117.125168644,37.968077773),
+new BMap.Point(117.130055426,37.968703611),
+new BMap.Point(117.135301530,37.969101868),
+new BMap.Point(117.138535430,37.969670803),
+new BMap.Point(117.143422212,37.970979337),
+new BMap.Point(117.147015434,37.972799868),
+new BMap.Point(117.150608656,37.975018577),
+new BMap.Point(117.153555098,37.977009670),
+new BMap.Point(117.154776794,37.977635430),
+new BMap.Point(117.156860863,37.978574061),
+new BMap.Point(117.158549677,37.979171365),
+new BMap.Point(117.162574086,37.980109976),
+new BMap.Point(117.165879850,37.980593498),
+new BMap.Point(117.168934089,37.980707268),
+new BMap.Point(117.173641210,37.980337516),
+new BMap.Point(117.177162567,37.979512679),
+new BMap.Point(117.180863586,37.978318072),
+new BMap.Point(117.184528672,37.977436325),
+new BMap.Point(117.188804607,37.976327015),
+new BMap.Point(117.191643252,37.975957242),
+new BMap.Point(117.197967323,37.975815021),
+new BMap.Point(117.200698172,37.975815021),
+new BMap.Point(117.204722580,37.976725231),
+new BMap.Point(117.208387667,37.977407881),
+new BMap.Point(117.213202584,37.978374958),
+new BMap.Point(117.216867671,37.979057593),
+new BMap.Point(117.221970046,37.979569565),
+new BMap.Point(117.228365981,37.980195304),
+new BMap.Point(117.233971408,37.980650383),
+new BMap.Point(117.241301581,37.981389880),
+new BMap.Point(117.245972769,37.981901836),
+new BMap.Point(117.251075145,37.982925736),
+new BMap.Point(117.255171418,37.983778975),
+new BMap.Point(117.258405317,37.984518441),
+new BMap.Point(117.258405317,37.984546882),
+new BMap.Point(117.262753116,37.985627626),
+new BMap.Point(117.266490067,37.986594594),
+new BMap.Point(117.270730069,37.987618428),
+new BMap.Point(117.275437190,37.988784444),
+new BMap.Point(117.279605328,37.989779808),
+new BMap.Point(117.283665668,37.990775159),
+new BMap.Point(117.289594485,37.992339255),
+new BMap.Point(117.294301606,37.993562069),
+new BMap.Point(117.297930760,37.994784864),
+new BMap.Point(117.301452118,37.996064510),
+new BMap.Point(117.304973475,37.997571620),
+new BMap.Point(117.307883985,37.999249310),
+new BMap.Point(117.311369410,38.001268173),
+new BMap.Point(117.314495514,38.003087946),
+new BMap.Point(117.318052803,38.005277299),
+new BMap.Point(117.322580263,38.008092085),
+new BMap.Point(117.326748401,38.010707749),
+new BMap.Point(117.330018233,38.012697864),
+new BMap.Point(117.333575523,38.014773212),
+new BMap.Point(117.337743660,38.016876929),
+new BMap.Point(117.342953832,38.019236431),
+new BMap.Point(117.346475190,38.020629354),
+new BMap.Point(117.351146378,38.022306512),
+new BMap.Point(117.356500279,38.024466862),
+new BMap.Point(117.360704349,38.026143931),
+new BMap.Point(117.364908419,38.027849385),
+new BMap.Point(117.370226387,38.029668492),
+new BMap.Point(117.374250796,38.031061215),
+new BMap.Point(117.380215545,38.033363413),
+new BMap.Point(117.384671140,38.035182382),
+new BMap.Point(117.386324022,38.036148691),
+new BMap.Point(117.387725379,38.037370769),
+new BMap.Point(117.389593854,38.039161218),
+new BMap.Point(117.391246736,38.040297988),
+new BMap.Point(117.394049449,38.041974692),
+new BMap.Point(117.395235213,38.044759640),
+new BMap.Point(117.396241315,38.048254882),
+new BMap.Point(117.396888095,38.050584950),
+new BMap.Point(117.397606739,38.052943357),
+new BMap.Point(117.398972164,38.055358514),
+new BMap.Point(117.400121995,38.057347407),
+new BMap.Point(117.402385725,38.059705594),
+new BMap.Point(117.404613522,38.061182974),
+new BMap.Point(117.406913184,38.062717144),
+new BMap.Point(117.409464372,38.063796726),
+new BMap.Point(117.412303017,38.065131976),
+new BMap.Point(117.415536917,38.066467201),
+new BMap.Point(117.418124037,38.067631952),
+new BMap.Point(117.421070479,38.068711461),
+new BMap.Point(117.426208787,38.069677323),
+new BMap.Point(117.431023704,38.069961398),
+new BMap.Point(117.435335571,38.071381755),
+new BMap.Point(117.441767438,38.073739487),
+new BMap.Point(117.448091509,38.076580025),
+new BMap.Point(117.453768800,38.079420453),
+new BMap.Point(117.457254225,38.081522297),
+new BMap.Point(117.461027108,38.083737689),
+new BMap.Point(117.464009483,38.085470192),
+new BMap.Point(117.468033891,38.087855866),
+new BMap.Point(117.473495589,38.091036642),
+new BMap.Point(117.479747795,38.094728440),
+new BMap.Point(117.484203390,38.097284189),
+new BMap.Point(117.489018308,38.100350970),
+new BMap.Point(117.492395937,38.102622576),
+new BMap.Point(117.497067125,38.106484142),
+new BMap.Point(117.502097636,38.110572635),
+new BMap.Point(117.506625096,38.114320217),
+new BMap.Point(117.511799336,38.118408268),
+new BMap.Point(117.514530184,38.120338656),
+new BMap.Point(117.518626458,38.122836729),
+new BMap.Point(117.523369511,38.124880543),
+new BMap.Point(117.527753242,38.126299824),
+new BMap.Point(117.537095619,38.129422144),
+new BMap.Point(117.541982401,38.131238705),
+new BMap.Point(117.547228505,38.134701398),
+new BMap.Point(117.551252914,38.137312500),
+new BMap.Point(117.554702407,38.140547865),
+new BMap.Point(117.558726816,38.144237139),
+new BMap.Point(117.563326140,38.147585702),
+new BMap.Point(117.565841395,38.149061291),
+new BMap.Point(117.569937668,38.151501622),
+new BMap.Point(117.574249535,38.153941870),
+new BMap.Point(117.578202079,38.155814563),
+new BMap.Point(117.582010894,38.157743954),
+new BMap.Point(117.585460388,38.159843526),
+new BMap.Point(117.589556661,38.162056523),
+new BMap.Point(117.593221747,38.164326193),
+new BMap.Point(117.597102427,38.166879486),
+new BMap.Point(117.600839378,38.169375953),
+new BMap.Point(117.604935651,38.171985803),
+new BMap.Point(117.609391246,38.174822489),
+new BMap.Point(117.614134299,38.177829256),
+new BMap.Point(117.618302437,38.180438801),
+new BMap.Point(117.622111252,38.182764620),
+new BMap.Point(117.625417017,38.185147089),
+];
+   // 创建单段线段
+        const polyline = new BMap.Polyline(points1, {
+            strokeColor: '#00c6ff',
+            strokeWeight: 25,
+            strokeOpacity: 0.8
+        });
+        map.addOverlay(polyline);
 
+var points = [
+new BMap.Point(116.727201337,37.868629410),
+new BMap.Point(116.730039983,37.868942756),
+new BMap.Point(116.732591170,37.869227615),
+new BMap.Point(116.735034561,37.869512473),
+new BMap.Point(116.737495918,37.869825816),
+new BMap.Point(116.740226767,37.870224613),
+new BMap.Point(116.742382700,37.870580681),
+new BMap.Point(116.744035582,37.870908261),
+new BMap.Point(116.746622702,37.871435235),
+new BMap.Point(116.748778636,37.872019176),
+new BMap.Point(116.750970501,37.872631596),
+new BMap.Point(116.753036604,37.873244010),
+new BMap.Point(116.754976944,37.873970356),
+new BMap.Point(116.755551859,37.874141260),
+];
+
+const congestionValues = [0.3, 0.8]; 
+for (let i = 0; i < points.length - 1; i++) {
+        const congestion = congestionValues[i] || 0; // 默认不拥堵
+        
+        // 根据拥堵程度计算红色深浅 (0-255)
+        const red = Math.floor(100 + 155 * congestion); // 浅红(100,0,0)到深红(255,0,0)
+        const color = `rgb(${red}, 0, 0)`;
+        
+        // 创建单段线段
+        const segment = new BMap.Polyline([points[i], points[i + 1]], {
+            strokeColor: color,
+            strokeWeight: 28,
+            strokeOpacity: 0.8
+        });
+        map.addOverlay(segment);
+    }
   const query = {
     area: "",
     deviceType: "",
@@ -83,24 +700,16 @@ onMounted(async () => {
   };
   try {
     const res = await getDeviceList(query);
-    // 假设res.data.list为设备数组
     // console.log("设备列表:", res);
     res.rows.forEach((device) => {
       const type = String(device.deviceTypeId); // 22/53/15/44
-      // if (!['22','53','15','44'].includes(type)) return;
       if (!device.lat || !device.lon) return;
-      // console.log("device:", type, device);
       const markerPoint = new BMap.Point(device.lon, device.lat);
       const marker = new BMap.Marker(markerPoint, { icon: getIcon(type) });
       marker.deviceType = type; // 关键：给marker加上设备类型
       marker.deviceData = device; // 可选：存储设备完整信息
-      // console.log("marker:1111", marker);
       markerMap.value[type] = markerMap.value[type] || [];
       markerMap.value[type].push(marker);
-      // if (showType.value[type]) {
-      //   map.addOverlay(marker);
-      // }
-      // console.log("marker:", marker);
       map.addOverlay(marker);
       // 可选：marker点击事件
       marker.addEventListener("click", () => {
@@ -117,6 +726,41 @@ onMounted(async () => {
         }
       });
     });
+    customDevices.forEach((device) => {
+      const type = String(device.deviceTypeId); // 22/53/21/44
+      const markerPoint = new BMap.Point(device.lon, device.lat);
+      const marker = new BMap.Marker(markerPoint, { icon: getBigIcon(type) });
+      
+      marker.deviceType = type; // 给标记加上设备类型
+      marker.deviceData = device; // 存储设备完整信息
+      // 如果是 deviceTypeId == 8，则添加 label
+      if (type === '8') {
+        const labelContent = `
+          <div style="text-align:center;">
+            <div style="font-size:48px;font-weight:bold;color:white;">邯港高速 K12+650</div>
+            <div style="font-size:32px;color:white;">严重拥堵，东向西。</div>
+          </div>
+        `;
+        const label = new BMap.Label(labelContent, {
+          position: markerPoint,
+          offset: new BMap.Size(-160, -270) // 调整位置，避免遮挡图标
+        });
+
+        label.setStyle({
+          border: 'none',
+          backgroundColor: 'transparent',
+          padding: '0',
+          fontSize: '12px'
+        });
+        map.addOverlay(label); // 添加 label 到地图
+        marker.label = label; // 可选：绑定 label 到 marker，方便后续操作
+      }
+      
+      markerMap.value[type] = markerMap.value[type] || [];
+      markerMap.value[type].push(marker);
+
+      map.addOverlay(marker); // 添加到地图上
+    });
   } catch (error) {
     console.error("请求设备列表失败:", error);
   }
diff --git a/src/views/component/right.vue b/src/views/component/right.vue
index 13446f8..e75b51d 100644
--- a/src/views/component/right.vue
+++ b/src/views/component/right.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import EventStatus from "./EventStatus.vue";
 import EventTask from "./EventTask.vue";
 import RealTimeImage from "./RealTimeImage.vue";
+import { weatherForecast, weatherHourly, todayStatusCount, todayHourly } from "@/api/modules/index";
+import { useTodayTime, } from "@/utils/packge";
 
+const { todayTime, getTodayTime } = useTodayTime();
 // 模拟数据，实际项目中可能需要从API获取
-const pendingCount = 5;
-const processingCount = 3;
+const pendingCount = ref<string>('');
+const processingCount = ref<string>('');
 
 // 服务区数据
 const selectedServiceArea = ref("全部");
@@ -30,6 +33,19 @@ const toggleAreaType = (id: string) => {
     areaType.selected = !areaType.selected;
   }
 };
+onMounted(()=>{
+    todayStatusCount({todayTime: todayTime.value}).then((res: any) => {
+      if(res.code === 200){
+        res.data.forEach((item: any) => {
+          if(item.status == '0'){ //待处理
+            pendingCount.value = item.count
+          } else if(item.status == '2'){ //处置中
+            processingCount.value = item.count
+          }
+        });
+      }
+    })
+})
 
 const isDropdownOpen = ref(false);
 </script>
diff --git a/src/views/component/traffic-trend-chart.vue b/src/views/component/traffic-trend-chart.vue
index 143d483..2701920 100644
--- a/src/views/component/traffic-trend-chart.vue
+++ b/src/views/component/traffic-trend-chart.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, defineProps } from "vue";
+import { ref, reactive, watch, onMounted, defineProps } from "vue";
 import useCharts from "@/hooks/useEcharts";
 import type { EChartsOption } from "echarts";
 
@@ -7,9 +7,10 @@ const props = defineProps({
   data: {
     type: Object,
     default: () => ({
-      hours: ["00:00", "04:00", "08:00", "12:00", "16:00", "20:00", "24:00"],
-      realTimeValues: [95, 140, 155, 130, 135, 140, 145],
-      averageValues: [60, 90, 70, 100, 130, 100, 105],
+      hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00",  "09:00", "10:00", "11:00","12:00", 
+      "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
+      realTimeValues: [],
+      averageValues: [],
     }),
   },
 });
@@ -124,14 +125,27 @@ const chartOptions: EChartsOption = {
     },
   ],
 };
-
-// 初始化图表
-const { initCharts } = useCharts(chartRef, chartOptions);
-
 // 确保图表在组件挂载后渲染
 onMounted(() => {
   initCharts();
 });
+
+// 初始化图表
+const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
+watch(
+  () => props.data,
+  () => {
+    console.log(props.data, 'pppppp');
+    setOptions({ // 手动刷新图表
+      series: [{
+        data: props.data.realTimeValues
+      },{
+        data: props.data.averageValues,
+      }]
+    });
+  },
+  { deep: true }
+);
 </script>
 
 <template>
diff --git a/src/views/component/weather-chart.vue b/src/views/component/weather-chart.vue
index 9025011..c8348c1 100644
--- a/src/views/component/weather-chart.vue
+++ b/src/views/component/weather-chart.vue
@@ -8,11 +8,11 @@
       <div class="sun-time">
         <div class="sunrise">
           <img src="@/assets/img/yin.png" alt="日出" />
-          <span>05:14</span>
+          <span>{{ forecastData[0].sunrise_time }}</span>
         </div>
         <div class="sunset">
           <img src="@/assets/img/yin.png" alt="日落" />
-          <span>05:14</span>
+          <span>{{ forecastData[0].sunset_time }}</span>
         </div>
       </div>
     </div>
@@ -29,9 +29,9 @@
         <div class="quality-bars">
           <div
             class="bar"
-            v-for="i in 13"
+            v-for="i in weatherHourlyData"
             :key="i"
-            :class="{ active: i <= 3 }"
+            :style="{ backgroundColor: getAirQualityColor(i.aqi_level) }"
           ></div>
         </div>
       </div>
@@ -39,11 +39,20 @@
         <span class="label">风力</span>
         <div class="quality-bars">
           <div
-            class="bar"
-            v-for="i in 13"
+            class="bar  bartwo"
+            v-for="i in weatherHourlyData"
             :key="i"
-            :class="{ active: i <= 4 }"
-          ></div>
+          >{{i.wind_level}}</div>
+        </div>
+      </div>
+      <div class="quality-item">
+        <span class="label"></span>
+        <div class="quality-barstwo">
+          <div
+            class="bar  bartwo"
+            v-for="i in ['08:00','10:00','12:00','14:00','16:00','18:00',]"
+            :key="i"
+          >{{i}}</div>
         </div>
       </div>
     </div>
@@ -55,21 +64,21 @@
         v-for="(item, index) in forecastData"
         :key="index"
       >
-        <div class="day">{{ item.day }}</div>
-        <div class="weather-type">{{ item.dayType }}</div>
+        <div class="day">{{ item.week_day }}</div>
+        <div class="weather-type">{{ item.weather_type }}</div>
         <div class="weather-icon">
           <img :src="weatherIcons[item.weather]" :alt="item.weather" />
         </div>
-        <div class="wind">{{ item.wind }}</div>
+        <div class="wind_info">{{ item.wind_info }}</div>
         <div class="temp-range">
-          <span class="high">{{ item.high }}°</span>
+          <span class="low_temp">{{ item.low_temp }}°</span>
           <div class="temp-bar">
-            <div
-              class="bar-inner"
-              :style="{ width: item.percentage + '%' }"
-            ></div>
+            <div class="bar-inner"
+                :title="`${item.high_temp}°C`"
+                :style="{ width: item.percentage + '%', background: getTempGradient(item.high_temp) }">
+            </div>
           </div>
-          <span class="low">{{ item.low }}°</span>
+          <span class="high_temp">{{ item.high_temp }}°</span>
         </div>
       </div>
     </div>
@@ -77,7 +86,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
 import useCharts from "@/hooks/useEcharts";
 import type { EChartsOption } from "echarts";
 
@@ -90,6 +99,9 @@ import cloudyIcon from "@/assets/img/weather/cloudy.png";
 import rainyIcon from "@/assets/img/weather/rainy.png";
 import bigRainyIcon from "@/assets/img/weather/BigRainy.png";
 
+import { weatherForecast, weatherHourly, todayStatusCount, todayHourly } from "@/api/modules/index";
+import { useTodayTime, } from "@/utils/packge";
+
 // 天气图标映射
 const weatherIcons: Record<WeatherType, string> = {
   sunny: sunnyIcon,
@@ -100,55 +112,70 @@ const weatherIcons: Record<WeatherType, string> = {
 
 // 定义预报数据类型
 interface ForecastItem {
-  day: string;
-  dayType: string;
+  week_day: string;
+  weather_type: string;
   weather: WeatherType;
-  wind: string;
-  high: number;
-  low: number;
+  wind_info: string;
+  high_temp: number;
+  low_temp: number;
   percentage: number;
+  sunrise_time: string;
+  sunset_time: string;
 }
+const weatherTypeMapping: Record<string, WeatherType> = {
+  "晴": "sunny",
+  "多云": "cloudy",
+  "雨": "rainy",
+  "大雨": "bigRainy",
+  // 可以继续添加其他天气类型
+};
 
 // 天气预报数据
 const forecastData = reactive<ForecastItem[]>([
   {
-    day: "今天",
-    dayType: "多云",
+    week_day: "周二",
+    weather_type: "多云",
     weather: "cloudy",
-    wind: "东南风三级",
-    high: 25,
-    low: 17,
-    percentage: 80,
+    wind_info: "东南风三级",
+    high_temp: 15,
+    low_temp: -2,
+    percentage: 0,
+    sunrise_time: '',
+    sunset_time: '',
   },
   {
-    day: "周三",
-    dayType: "多云",
+    week_day: "周三",
+    weather_type: "多云",
     weather: "cloudy",
-    wind: "东南风三级",
-    high: 28,
-    low: 17,
-    percentage: 85,
+    wind_info: "东南风三级",
+    high_temp: 25,
+    low_temp: 15,
+    percentage: 0,
+    sunrise_time: '',
+    sunset_time: '',
   },
   {
-    day: "周四",
-    dayType: "大雨",
+    week_day: "周四",
+    weather_type: "大雨",
     weather: "rainy",
-    wind: "东南风三级",
-    high: 27,
-    low: 18,
-    percentage: 75,
+    wind_info: "东南风三级",
+    high_temp: 35,
+    low_temp: 18,
+    percentage: 0,
+    sunrise_time: '',
+    sunset_time: '',
   },
 ]);
 
+const { todayTime, getTodayTime } = useTodayTime();
 // 图表容器引用
 const chartRef = ref<HTMLElement | null>(null);
 
 // 温度趋势数据
 const temperatureData = reactive({
-  times: ["08:00", "10:00", "12:00", "14:00", "16:00", "18:00"],
-  values: [14, 20, 22, 20, 18, 16],
+  times: ["08:00", "09:00","10:00","11:00","12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"],
+  values: [],
 });
-
 // 温度趋势图表配置
 const chartOptions: EChartsOption = {
   tooltip: {
@@ -185,6 +212,7 @@ const chartOptions: EChartsOption = {
       },
     },
     axisLabel: {
+      show: false,
       color: "#fff",
       fontSize: 24,
     },
@@ -256,7 +284,7 @@ const chartOptions: EChartsOption = {
         },
       },
       label: {
-        show: true,
+        show: false,
         position: "top",
         color: "#fff",
         fontSize: 24,
@@ -265,14 +293,98 @@ const chartOptions: EChartsOption = {
     },
   ],
 };
-
+const weatherHourlyData  = ref([])
 // 初始化图表
-const { initCharts } = useCharts(chartRef, chartOptions);
+const { initCharts, setOptions, resize } = useCharts(chartRef, chartOptions);
 
 // 确保图表在组件挂载后渲染
 onMounted(() => {
   initCharts();
+  resize();
+  window.addEventListener('resize', handleWindowResize);
+  weatherForecast().then((res:any)=>{
+    const updatedData = res.data.map((item: any) => ({
+      ...item,
+      percentage: (item.high_temp / 50) * 100, // 计算百分比
+      weather: weatherTypeMapping[item.weather_type] || "sunny",
+    }));
+    forecastData.splice(0, forecastData.length, ...updatedData);
+  })
+  weatherHourly().then((res:any)=>{
+    weatherHourlyData.value = res.data
+    temperatureData.values = res.data.map((item: any) => item.temperature);
+
+      // 计算最小值 & 最大值
+    const minTemp = Math.min(...temperatureData.values);
+    const maxTemp = Math.max(...temperatureData.values);
+    console.log(temperatureData.values, 'temperatureData.values')
+    setOptions({ // 手动刷新图表
+      yAxis: {
+        min: minTemp - 2, // 留一点余量
+        max: maxTemp + 2,
+      },
+      series: [{
+        data: temperatureData.values
+      }]
+    });
+    handleWindowResize();
+  })
+  todayHourly({todayTime: todayTime.value, pilenum: ''}).then((res: any) => {
+    console.log(res)
+  })
 });
+// 调用 resize 方法更新图表尺寸
+const handleWindowResize = () => {
+  resize();
+};
+
+// 组件卸载前移除事件监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleWindowResize);
+});
+// 根据 i 值返回颜色（绿色 -> 红色）
+const getAirQualityColor = (index: number): string => {
+  let hue;
+  if (index <= 3) {
+    // 绿色系：120° -> 90°
+    hue = 120 - (index / 3) * 30;
+  } else if (index <= 7) {
+    // 黄绿色系：90° -> 60°
+    hue = 90 - ((index - 3) / 4) * 30;
+  } else if (index <= 10) {
+    // 橙色系：60° -> 30°
+    hue = 60 - ((index - 7) / 3) * 30;
+  } else {
+    // 红色系：30° -> 0°
+    hue = 30 - ((index - 10) / 3) * 30;
+  }
+  return `hsl(${hue}, 100%, 45%)`;
+};
+const getTempGradient = (high_temp: number): string => {
+  let startHue, endHue;
+
+  if (high_temp < 0) {
+    // 冷蓝色调（-20°C 到 0°C）
+    startHue = 270;
+    endHue = 240 + (high_temp / -20) * 30;
+  } else if (high_temp <= 25) {
+    // 从蓝绿色到黄色（0°C 到 25°C）
+    startHue = 180;
+    endHue = 180 - (high_temp / 25) * 120;
+  } else {
+    // 从橙色到红色（26°C 及以上）
+    startHue = 30;
+    endHue = 30 - ((high_temp - 25) / 10) * 30;
+  }
+
+  // 确保 hue 在 0~360 范围内
+  endHue = Math.max(0, Math.min(360, endHue));
+
+  const startColor = `hsla(${startHue}, 100%, 45%, 0.8)`;
+  const endColor = `hsla(${endHue}, 100%, 45%, 0.6)`;
+
+  return `linear-gradient(90deg, ${startColor}, ${endColor})`;
+};
 </script>
 
 <style scoped lang="scss">
@@ -329,7 +441,7 @@ onMounted(() => {
   }
 
   .air-quality {
-    margin-bottom: 40px;
+    margin-bottom: 20px;
 
     .quality-item {
       display: flex;
@@ -349,7 +461,7 @@ onMounted(() => {
 
         .bar {
           flex: 1;
-          height: 8px;
+          height: 18px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 4px;
 
@@ -357,6 +469,42 @@ onMounted(() => {
             background: #00ffff;
           }
         }
+        .bartwo{
+          height: 32px;
+          background: rgba(255,255,255,0.12);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 400;
+          font-size: 20px;
+          color: rgba(255,255,255,0.6);
+          line-height: 28px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+      .quality-barstwo {
+        flex: 1;
+        display: flex;
+        gap: 4px;
+        .bar {
+          flex: 1;
+          height: 18px;
+        }
+        .bartwo{
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 400;
+          font-size: 18px;
+          color: rgba(255,255,255,0.6);
+          line-height: 28px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+        }
       }
     }
   }
@@ -397,7 +545,7 @@ onMounted(() => {
         }
       }
 
-      .wind {
+      .wind_info {
         width: 160px;
         font-size: 24px;
         color: #ffffff;
@@ -409,8 +557,8 @@ onMounted(() => {
         align-items: center;
         gap: 12px;
 
-        .high,
-        .low {
+        .high_temp,
+        .low_temp {
           font-size: 28px;
           color: #ffffff;
           width: 40px;
@@ -422,7 +570,7 @@ onMounted(() => {
           height: 8px;
           background: rgba(255, 255, 255, 0.1);
           border-radius: 4px;
-          overflow: hidden;
+          overflow_temp: hidden;
 
           .bar-inner {
             height: 100%;
diff --git a/vite.config.ts b/vite.config.ts
index 7b5e4dd..8bd7c12 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -57,12 +57,12 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
       strictPort: false,
       proxy: {
         [viteEnv.VITE_APP_CONTROL_BASE_API]: {
-          target: 'http://172.20.10.13:8090/xjIotApi',
+          target: 'http://172.16.1.128:8090/xjIotApi',
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''),
         },
         [viteEnv.VITE_APP_BASE_API]: {
-          target: 'http://172.20.10.13:8090/iotApi',
+          target: 'http://172.16.1.128:8090/iotApi',
           changeOrigin: true,
           rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''),
         }