feat:修改bug

src/components/charts/barChart.vue

@@ -49,7 +49,7 @@ eventBus.on("clear:area",()=>{
 })
 
 const initData = () => {
-    if (props.styleName === "styleName2") {
+    if (props.styleName === "styleName2"||props.styleName === "styleName3") {
         const arr = [];
         props.yData.forEach((item, index) => {
             arr.push({

src/components/charts/options/barOption.js

@@ -75,6 +75,9 @@ const styleName2 = {
         show: true,
         color: "#fff",
         position: "insideTop",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
       },
       itemStyle: {
         normal:{
@@ -96,14 +99,14 @@ const styleName2 = {
       },
     },
     {
-      data: [130, 140, 80,0, 0],
+      data: [0, 0, 0,1],
       type: "bar",
       barWidth: 26,
       stack: "total",
       label: {
         show: true,
         color: "#fff",
-        position: "insideTop",
+        position: "top",
         formatter: ({ value }) => {
           return value ? value : "";
         },
@@ -128,7 +131,7 @@ const styleName2 = {
       },
     },
     {
-      data: [0,0,80, 130, 130],
+      data: [16,16,16, 15],
       type: "bar",
       barWidth: 26,
       stack: "total",
@@ -153,4 +156,97 @@ const styleName2 = {
   ],
 };
 
-export const barOption = { styleName1, styleName2 };
+const styleName3 = {
+  ...commonStyle,
+  series: [
+    {
+      data: [32, 40, 42],
+      type: "bar",
+      barWidth: 26,
+      stack: "total",
+      label: {
+        show: true,
+        color: "#fff",
+        position: "insideTop",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
+      },
+      itemStyle: {
+        normal:{
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#BBA269",
+            },
+            {
+              offset: 1,
+              color: "#3D3523",
+            },
+          ]),
+        },
+        emphasis: {
+          color: '#006F0B' // 高亮时的颜色
+        },
+        // borderRadius: [2, 2, 0, 0],
+      },
+    },
+    {
+      data: [16, 8, 0, 0],
+      type: "bar",
+      barWidth: 26,
+      stack: "total",
+      label: {
+        show: true,
+        color: "#fff",
+        position: "insideTop",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
+      },
+      itemStyle: {
+        normal:{
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: "#bb7d4c",
+            },
+            {
+              offset: 1,
+              color: "#90603a",
+            },
+          ]),
+        },
+        emphasis: {
+          color: '#006F0B' // 高亮时的颜色
+        },
+        borderRadius: [2, 2, 0, 0],
+      },
+    },
+    {
+      data: [0,0, 16, 16],
+      type: "bar",
+      barWidth: 26,
+      stack: "total",
+      itemStyle: {
+        normal:{
+          color: "rgba(56,56,56,0.94)",
+        },
+        emphasis: {
+          color: '#006F0B' // 高亮时的颜色
+        },
+        borderRadius: [2, 2, 0, 0],
+      },
+      label: {
+        show: true,
+        position: "insideTop",
+        color: "#fff",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
+      },
+    },
+  ],
+};
+
+export const barOption = { styleName1, styleName2,styleName3 };

src/components/fnHeader.vue

@@ -20,7 +20,7 @@
     <div class="date" v-show="showDate">
       <el-icon size="25"><MoreFilled /></el-icon>
       <div class="time">
-        <div>21:05:46</div>
+        <div>{{time}}</div>
         <span>2025.01.14 星期二</span>
       </div>
     </div>
@@ -35,7 +35,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -50,6 +50,26 @@ const farmVal = ref(null)
 const toggleFarm = (val) => {
     router.push({ name: "Home" });
 };
+
+function formatTimeToHHmmss(date) {
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+ 
+  return `${hours}.${minutes}.${seconds}`;
+}
+
+const time = ref("21:05:46")
+const timer = ref(null)
+onMounted(()=>{
+  timer.value = setInterval(()=>{
+    time.value = formatTimeToHHmmss(new Date())
+  },1000)
+})
+
+onUnmounted(()=>{
+  timer.value = null
+})
 </script>
 
 <style lang="scss" scoped>

src/views/home/components/chartSeting.js

@@ -299,42 +299,42 @@ export const galleryIndicatorLine = {
                     { offset: 1, color: "rgba(254, 233, 96, 0.02)" }, // 渐变结束颜色
                 ]),
             },
-            markPoint : {
-                symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
-                symbolSize: [0, 0],
-                data: [
-                    {
-                        name: "text",
-                        value: "冬季基肥",
-                        xAxis: '9/19',
-                        yAxis: 84,
-                        symbolOffset: [0, "-50%"],
-                        label: {
-                            offset: [0, -22],
-                            color: "#fff",
-                            backgroundColor: "#FFB82E",
-                            padding: [2, 10, 0, 10],
-                            height: 20,
-                            borderRadius: 10,
-                            // borderRadius: 10,
-                        },
-                    },
-                    {
-                        name: "mark",
-                        xAxis: '9/19',
-                        yAxis: 84,
-                        value: "",
-                        label: {
-                            backgroundColor: "#fff",
-                            borderWidth: 2,
-                            borderColor: "rgba(255, 255, 255, 0.5)",
-                            borderRadius: 8,
-                            width: 6,
-                            height: 6,
-                        },
-                    },
-                ]
-            },
+            // markPoint : {
+            //     symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
+            //     symbolSize: [0, 0],
+            //     data: [
+            //         {
+            //             name: "text",
+            //             value: "冬季基肥",
+            //             xAxis: '9/19',
+            //             yAxis: 84,
+            //             symbolOffset: [0, "-50%"],
+            //             label: {
+            //                 offset: [0, -22],
+            //                 color: "#fff",
+            //                 backgroundColor: "#FFB82E",
+            //                 padding: [2, 10, 0, 10],
+            //                 height: 20,
+            //                 borderRadius: 10,
+            //                 // borderRadius: 10,
+            //             },
+            //         },
+            //         {
+            //             name: "mark",
+            //             xAxis: '9/19',
+            //             yAxis: 84,
+            //             value: "",
+            //             label: {
+            //                 backgroundColor: "#fff",
+            //                 borderWidth: 2,
+            //                 borderColor: "rgba(255, 255, 255, 0.5)",
+            //                 borderRadius: 8,
+            //                 width: 6,
+            //                 height: 6,
+            //             },
+            //         },
+            //     ]
+            // },
         },
         {
             name: "病虫异常",
@@ -353,42 +353,42 @@ export const galleryIndicatorLine = {
                     { offset: 1, color: "rgba(255, 114, 25, 0.02)" }, // 渐变结束颜色
                 ]),
             },
-            markPoint : {
-                symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
-                symbolSize: [0, 0],
-                data: [
-                    {
-                        name: "text",
-                        value: "冬季清园",
-                        xAxis: '10/1',
-                        yAxis: 24,
-                        symbolOffset: [0, "-50%"],
-                        label: {
-                            offset: [0, -22],
-                            color: "#fff",
-                            backgroundColor: "#FF7219",
-                            padding: [2, 10, 0, 10],
-                            height: 20,
-                            borderRadius: 10,
-                            // borderRadius: 10,
-                        },
-                    },
-                    {
-                        name: "mark",
-                        xAxis: '10/1',
-                        yAxis: 24,
-                        value: "",
-                        label: {
-                            backgroundColor: "#fff",
-                            borderWidth: 2,
-                            borderColor: "rgba(255, 255, 255, 0.5)",
-                            borderRadius: 8,
-                            width: 6,
-                            height: 6,
-                        },
-                    },
-                ]
-            },
+            // markPoint : {
+            //     symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
+            //     symbolSize: [0, 0],
+            //     data: [
+            //         {
+            //             name: "text",
+            //             value: "冬季清园",
+            //             xAxis: '10/1',
+            //             yAxis: 24,
+            //             symbolOffset: [0, "-50%"],
+            //             label: {
+            //                 offset: [0, -22],
+            //                 color: "#fff",
+            //                 backgroundColor: "#FF7219",
+            //                 padding: [2, 10, 0, 10],
+            //                 height: 20,
+            //                 borderRadius: 10,
+            //                 // borderRadius: 10,
+            //             },
+            //         },
+            //         {
+            //             name: "mark",
+            //             xAxis: '10/1',
+            //             yAxis: 24,
+            //             value: "",
+            //             label: {
+            //                 backgroundColor: "#fff",
+            //                 borderWidth: 2,
+            //                 borderColor: "rgba(255, 255, 255, 0.5)",
+            //                 borderRadius: 8,
+            //                 width: 6,
+            //                 height: 6,
+            //             },
+            //         },
+            //     ]
+            // },
         },
     ],
 }

src/views/home/components/homePage.vue

@@ -12,16 +12,16 @@
     <div class="chart-item phenology">
       <chart-box name="物候调节" arrow="left">
         <template #title-left>
-          <span class="title-left"> - 控梢期</span>
+          <span class="title-left"> - 花芽萌动期</span>
         </template>
-        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
+        <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
         <div class="time-line">
-          <div class="line">
-            <!-- <time-line></time-line> -->
+          <!-- <time-line></time-line> -->
+          <!-- <div class="line">
             <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
-          </div>
+          </div> -->
           <div class="tips box-bg">
-            物候进程：预计 <span>2天</span> 后第三次秋梢完全老熟，进入控梢期
+            物候进程：预计 <span>12天</span> 后进入花蕾抽出期
           </div>
         </div>
       </chart-box>
@@ -35,11 +35,11 @@
         </template> -->
         <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
         <div class="time-line">
-          <div class="line">
+          <!-- <div class="line">
             <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
-          </div>
+          </div> -->
           <div class="tips box-bg">
-            异常区域中，<span>xx</span> %区域需要 <span>打药</span>，<span>xx</span> %需要 <span>剪枝通风</span>
+            所有区域中，<span>6</span> %区域出现毛毡病需要 <span>打药</span>
           </div>
         </div>
         <!-- <pie-chart class="pie-chart" styleName="styleName1"></pie-chart> -->
@@ -53,10 +53,10 @@
         <div class="content">
           <bar-chart styleName="styleName1" :xData="evaluateXData" :yData="evaluateYData"></bar-chart>
           <div class="box-bg text">
-            目前果园跨度异常比例达到<span>**%</span>，需要提供 <span>叶面肥</span>补充营养
+            目前果园跨度异常比例达到<span>12%</span>，需要提供 <span>叶面肥</span>补充营养
           </div>
         </div>
-        <div class="text-list box-bg">
+        <!-- <div class="text-list box-bg">
           <div class="text-item">
             <div class="circle"></div>
             <div class="txt">
@@ -75,7 +75,7 @@
               肥效比 高<span>**棵树</span>
             </div>
           </div>
-        </div>
+        </div> -->
       </chart-box>
     </div>
   </div>
@@ -90,30 +90,25 @@ import pieChart from "@/components/charts/pieChart.vue";
 import oneLineChart from "@/components/charts/oneLineChart.vue";
 
 // 物候调节
-const phenologyXData = ["萌动小叶", "红黄相间", "新梢老熟","白点","花穗伸长"]
+const phenologyXData = ["新梢褪绿", "花芽萌动","花蕾抽出","花穗伸长"]
 const phenologyYData = [{
-  startNum:130,
-  endNum:130,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:120,
-  endNum:90,
+  startNum:0,
+  endNum:1,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 },{
-  startNum:120,
-  endNum:1,
+  startNum:8,
+  endNum:8,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 },{
-  startNum:130,
-  endNum:0,
+  startNum:0,
+  endNum:16,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 },{
-  startNum:130,
-  endNum:0,
+  startNum:0,
+  endNum:16,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 }]
@@ -124,37 +119,32 @@ const active = ref(0)
 const handleActive = (i) =>{
   active.value = i
 }
-const phenologyXData1 = ["病虫害03", "病害1", "虫害1","病虫害02","病虫害01"]
+const phenologyXData1 = ["炭疽病", "啃食虫害","叶瘿蚊","毛毡病"]
 const phenologyYData1 = [{
-  startNum:130,
-  endNum:130,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:120,
-  endNum:90,
+  startNum:0,
+  endNum:0,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 },{
-  startNum:120,
-  endNum:1,
+  startNum:0,
+  endNum:0,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 },{
-  startNum:130,
+  startNum:0,
   endNum:0,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 },{
-  startNum:130,
-  endNum:0,
+  startNum:0,
+  endNum:1,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
 }]
 
 // 营养评估
 const evaluateXData = ["低", "中", "高"]
-const evaluateYData = [33, 40, 52]
+const evaluateYData = [2, 8, 6]
 </script>
 
 <style lang="scss" scoped>
@@ -202,11 +192,11 @@ const evaluateYData = [33, 40, 52]
     &.phenology{
       .bar-chart{
         width: 100%;
-        height: calc(100% - 87px);
+        height: calc(100% - 44px);
       }
       .time-line{
         width: 100%;
-        height: calc(45px + 34px + 10px);
+        // height: calc(45px + 10px);
         .line{
           width: 100%;
           height: calc(100% - 34px - 10px);
@@ -217,6 +207,7 @@ const evaluateYData = [33, 40, 52]
           }
         }
         .tips{
+          margin-top: 10px;
           width: 100%;
           height: 34px;
           line-height: 28px;
@@ -247,7 +238,7 @@ const evaluateYData = [33, 40, 52]
     &.evaluate {
       .content {
         width: 100%;
-        height: calc(100% - 33px - 10px);
+        height: calc(100% - 10px);
         display: flex;
         align-items: center;
         justify-content: space-between;

src/views/home/index.vue

@@ -13,12 +13,12 @@
       </div>
       <div class="home-bottom">
         <div class="log-box yes-events">
-          <chart-box>
+          <chart-box class="overflow">
             <template #title-name>
               <div class="box-name" @click="handleSelectArea">果园日志</div>
             </template>
             <div class="log-content">
-              10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。
+              1月14日，共抽样150棵树，拍摄了300张照片
             </div>
             <div class="chart-wrap">
               <indicator-chart></indicator-chart>
@@ -60,14 +60,16 @@
                 <div :class="{active:btnIndex===0}" @click="handleBtn(0)">{{btnIndex===0&&btnName!=''?'采样分区：'+ btnName:'选择采样分区'}}</div>
                 <div :class="{active:btnIndex===1}" @click="handleBtn(1)">{{btnIndex===1&&btnName!=''?'单树编号：'+ btnName:'选择树'}}</div>
               </div>
-              <div class="img-box2" v-show="showPoint">
-                <img src="@/assets/images/home/line-chart.png" alt="">
-                <img  src="@/assets/images/home/fh01.png" alt="">
-              </div>
-              <div class="img-box2" v-show="!showPoint">
-                <img src="@/assets/images/home/line-chart1.png" alt="">
-                <img  src="@/assets/images/home/fh02.png" alt="">
-              </div>
+                <div class="img-box2" v-show="showPoint">
+                  <img v-if="showType==='point'" src="@/assets/images/home/line-chart.png" alt="">
+                  <img v-else src="@/assets/images/home/line-chart2.png" alt="">
+                  <img src="@/assets/images/home/fh01.png" alt="">
+                </div>
+                <div class="img-box2" v-show="!showPoint">
+                  <img v-if="showType==='point'" src="@/assets/images/home/line-chart1.png" alt="">
+                  <img v-else src="@/assets/images/home/line-chart3.png" alt="">
+                  <img src="@/assets/images/home/fh02.png" alt="">
+                </div>
             </template>
           </chart-box>
         </div>
@@ -155,6 +157,7 @@ const handleBtn = (e) =>{
   btnName.value = ""
   btnIndex.value = e
   eventBus.emit("clear:area")
+  samplePointLayer.updateAreaStatus(e===0?true:false)
   regionLayer.resetData()
   samplePointLayer.resetPoint()
 }
@@ -166,13 +169,31 @@ const handleSelectArea = () =>{
   eventBus.emit("clear:area")
   regionLayer.resetData()
   samplePointLayer.resetPoint()
+  samplePointLayer.updateAreaStatus(true)
 }
 
 //农事点击高亮
 const act = ref(null)
 const handleAct = (v) =>{
   act.value = v
-  regionLayer.selectArea(v,["#2199f87a","#2199f87a"])
+  samplePointLayer.resetPoint()
+  if(v===1){
+    regionLayer.selectAreaMultiple([
+      {value:2,color:"blue"},
+      {value:4,color:"blue1"},
+      {value:5,color:"blue2"},
+      {value:7,color:"blue"},
+      {value:13,color:"blue2"},
+    ])
+  }
+  if(v===2){
+    regionLayer.selectAreaMultiple([
+      {value:1,color:"blue"},
+      {value:2,color:"blue1"},
+      {value:9,color:"blue2"},
+      {value:12,color:"blue2"},
+    ])
+  }
 }
 
 //柱状图点击事件监听
@@ -180,10 +201,25 @@ eventBus.on('echart:barClick',(e)=>{
   btnName.value = ""
   btnIndex.value = null
   eventBus.emit("clear:area")
-  const arr =  ["病虫害03", "病害1", "虫害1","病虫害02"]
+  samplePointLayer.updateAreaStatus(false)
+  const arr =  ["花芽萌动", "毛毡病"]
   const isDraw = arr.includes(e)
+  const index = arr.indexOf(e)
   if(isDraw){
-    regionLayer.selectAreaMultiple([5,8,10],["#b815007a","#b815007a"])
+    if(index===0){
+      regionLayer.selectAreaMultiple([
+        {value:1,color:"green"},
+        {value:3,color:"green1"},
+        {value:5,color:"green2"},
+        {value:6,color:"green1"},
+        {value:9,color:"green"},
+        {value:11,color:"green1"},
+        {value:12,color:"green2"},
+        {value:0,color:"green"},
+      ])
+    }else{
+      regionLayer.selectAreaMultiple([{value:8,color:"red"}])
+    }
   }
 })
 
@@ -193,20 +229,24 @@ eventBus.on('click:yellowBlock',()=>{
 })
 
 const showPoint = ref(true)
+const showType = ref("point")
 //地图点击事件
 eventBus.on('click:point',(e)=>{
+  showType.value = "point"
   if(btnIndex.value===1){
     btnName.value=e.name
     if(e.value===1){
       showPoint.value = true
+      samplePointLayer.updatePointStatus(true)
     }else{
       showPoint.value = false
     }
   }
-  // regionLayer.reset(currentFarm,currentFarm)
 })
 
+//地图点击区域事件
 eventBus.on('click:area',(e)=>{
+  showType.value = "area"
   if(btnIndex.value===0){
     btnName.value=e.name
     if(e.value===1){
@@ -214,10 +254,15 @@ eventBus.on('click:area',(e)=>{
     }else{
       showPoint.value = false
     }
-    regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,["#f2d1909c","#f2d1909c"])
+    regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
   }
 })
 
+eventBus.on('click:updateArea',(e)=>{
+  btnName.value=e.name
+  regionLayer.selectArea((e.name*1)===0?0: (e.name*1) - 1,"blue")
+})
+
 const currentComponent = ref("homePage");
 const handleActiveLeft = (e) => {
   currentComponent.value = e.componentName;
@@ -249,6 +294,9 @@ const handleActiveRight = ({index}) => {
     rightIndex.value = index
     btnIndex.value = null
     btnName.value = ""
+    samplePointLayer.updateAreaStatus(false)
+    regionLayer.resetData()
+    samplePointLayer.resetPoint()
     if(index!==0){
       act.value = null
     }
@@ -357,6 +405,9 @@ const toFilePage = () => {
         }
       }
     }
+    .overflow{
+      overflow: auto;
+    }
     .home-bottom {
       display: flex;
       align-items: flex-end;
@@ -385,7 +436,6 @@ const toFilePage = () => {
         .chart-wrap{
           width: 100%;
           height: calc(100% - 50px);
-          overflow: auto;
           .line{
             margin-top: 10px;
             margin-bottom: 12px;

src/views/home/map/regionLayer.js

@@ -25,7 +25,19 @@ class RegionLayer {
 
         this.area = null
         this.index = null
-        this.colorArea = ["#fba50410","#eee5e5"]
+
+        const colorObj = {
+            "defalut":["#fba50410","#eee5e5"],
+            "blue":["#2199f894","#2199f894"],
+            "blue1":["#2199f804","#2199f804"],
+            "blue2":["#2199f87a","#2199f87a"],
+            "red":["#b8150094","#b8150094"],
+            "red1":["#FF733F94","#FF733F94"],
+            "red2":["#FFA96C94","#FFA96C94"],
+            "green":["#006f0b94","#006f0b94"],
+            "green1":["#32b81a94","#32b81a94"],
+            "green2":["#B7FFAA94","#B7FFAA94"]
+        }
 
         this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
             minZoom: 15,
@@ -33,7 +45,8 @@ class RegionLayer {
                 let style1
                 style1 = this.vectorStyle.getPolygonStyle("#fba50410", "#eee5e5", 2);
                 if(f.get("bgName")==="active"){
-                    style1 = this.vectorStyle.getPolygonStyle(this.colorArea[0], this.colorArea[1], 2);
+                    const color = colorObj[f.get("bgColor")]
+                    style1 = this.vectorStyle.getPolygonStyle(color[0], color[1], 2);
                 }
                 const style2 = new Style({
                     text: new Text({
@@ -66,7 +79,7 @@ class RegionLayer {
         if(this.index !=null){
             this.resetData()
         }
-        this.colorArea = color
+        this.area[index].set("bgColor", color);
         this.area[index].set("bgName", "active");
         this.index = index
     }
@@ -77,11 +90,11 @@ class RegionLayer {
         })
     }
 
-    selectAreaMultiple(arr,color){
+    selectAreaMultiple(arr){
         this.resetData()
-        this.colorArea = color
         arr.forEach(item =>{
-            this.area[item].set("bgName", "active");
+            this.area[item.value].set("bgColor", item.color);
+            this.area[item.value].set("bgName", "active");
         })
     }
 
@@ -90,7 +103,7 @@ class RegionLayer {
         VE_API.region.listArea().then(({ data }) => {
             let features = [];
             for (let item of data) {
-                let f = newRegionFeature({...item,bgName:"defalut"}, "wkt");
+                let f = newRegionFeature({...item,bgName:"defalut",bgColor:"defalut"}, "wkt");
                 features.push(f);
             }
             that.area = features

src/views/home/map/samplePointLayer.js

@@ -31,6 +31,8 @@ class SamplePointLayer {
 
     this.curPoint = null
     this.curArea = null
+    this.isUpdatePoint = null
+    this.isUpdateArea = null
 
     this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
       minZoom:15,
@@ -116,12 +118,13 @@ class SamplePointLayer {
           const featureArr = feature.get("features")
           const fs = featureArr[0]
           that.curPoint = fs
-          fs.set("iconName", "active");
+          if(that.isUpdatePoint){
+            fs.set("iconName", "active");
+          }
           eventBus.emit("click:point",{name:fs.get("id"),value:fs.get("highYield")})
         }
         if (layer instanceof VectorLayer && layer.get("name") === "yellow-block") {
           hasFeature = true
-          console.log('333333');
           eventBus.emit("click:yellowBlock")
         }
       })
@@ -132,9 +135,13 @@ class SamplePointLayer {
               if(that.curArea){
                 that.curArea.set("bgName", "defalut");
               }
-              feature.set("bgName", "active");
               that.curArea = feature
-              eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
+              if(that.isUpdateArea){
+                feature.set("bgName", "active");
+                eventBus.emit("click:updateArea",{name:feature.get("id"),value:feature.get("blueZone")})
+              }else{
+                eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
+              }
             }
         })
       }
@@ -142,11 +149,20 @@ class SamplePointLayer {
   }
 
   resetPoint(){
+    this.isUpdatePoint = null
     if(this.curPoint){
       this.curPoint.set("iconName", "defalut");
     }
   }
 
+  updatePointStatus(e){
+    this.isUpdatePoint = e
+  }
+
+  updateAreaStatus(e){
+    this.isUpdateArea = e
+  }
+
   getIcon(item){
     // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
     // if(item.status == 9){