fix:修改头部分区接口

src/components/charts/barChart.vue

@@ -55,18 +55,16 @@ const initData = () => {
             arr.push({
                 value: item.startNum,
                 itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            {
-                                offset: 0,
-                                color: item.startColor,
-                            },
-                            {
-                                offset: 1,
-                                color: item.endColor,
-                            },
-                        ]),
-                    },
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
+                            color: item.startColor,
+                        },
+                        {
+                            offset: 1,
+                            color: item.endColor,
+                        },
+                    ]),
                 },
             });
         });

src/components/charts/options/barOption.js

@@ -80,23 +80,21 @@ const styleName2 = {
         },
       },
       itemStyle: {
-        normal:{
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#BBA269",
-            },
-            {
-              offset: 1,
-              color: "#3D3523",
-            },
-          ]),
-        },
-        emphasis: {
-          color: '#B81500' // 高亮时的颜色
-        },
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#BBA269",
+          },
+          {
+            offset: 1,
+            color: "#3D3523",
+          },
+        ]),
         // borderRadius: [2, 2, 0, 0],
       },
+      emphasis: {
+        color: '#B81500' // 高亮时的颜色
+      },
     },
     {
       data: [0, 1, 0,13],
@@ -112,23 +110,21 @@ const styleName2 = {
         },
       },
       itemStyle: {
-        normal:{
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#ff0000",
-            },
-            {
-              offset: 1,
-              color: "#B81500",
-            },
-          ]),
-        },
-        emphasis: {
-          color: '#B81500' // 高亮时的颜色
-        },
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#ff0000",
+          },
+          {
+            offset: 1,
+            color: "#B81500",
+          },
+        ]),
         borderRadius: [2, 2, 0, 0],
       },
+      emphasis: {
+        color: '#B81500' // 高亮时的颜色
+      },
     },
     {
       data: [16,15,16, 3],
@@ -136,14 +132,12 @@ const styleName2 = {
       barWidth: 26,
       stack: "total",
       itemStyle: {
-        normal:{
-          color: "rgba(56,56,56,0.94)",
-        },
-        emphasis: {
-          color: '#B81500' // 高亮时的颜色
-        },
+        color: "rgba(56,56,56,0.94)",
         borderRadius: [2, 2, 0, 0],
       },
+      emphasis: {
+        color: '#B81500' // 高亮时的颜色
+      },
       label: {
         show: true,
         position: "insideTop",
@@ -173,23 +167,21 @@ const styleName3 = {
         },
       },
       itemStyle: {
-        normal:{
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#BBA269",
-            },
-            {
-              offset: 1,
-              color: "#3D3523",
-            },
-          ]),
-        },
-        emphasis: {
-          color: '#006F0B' // 高亮时的颜色
-        },
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#BBA269",
+          },
+          {
+            offset: 1,
+            color: "#3D3523",
+          },
+        ]),
         // borderRadius: [2, 2, 0, 0],
       },
+      emphasis: {
+        color: '#006F0B' // 高亮时的颜色
+      },
     },
     {
       data: [16, 16, 16, 0],
@@ -205,23 +197,21 @@ const styleName3 = {
         },
       },
       itemStyle: {
-        normal:{
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "#bb7d4c",
-            },
-            {
-              offset: 1,
-              color: "#90603a",
-            },
-          ]),
-        },
-        emphasis: {
-          color: '#006F0B' // 高亮时的颜色
-        },
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#bb7d4c",
+          },
+          {
+            offset: 1,
+            color: "#90603a",
+          },
+        ]),
         borderRadius: [2, 2, 0, 0],
       },
+      emphasis: {
+        color: '#006F0B' // 高亮时的颜色
+      },
     },
     {
       data: [0,0, 0, 0],
@@ -229,14 +219,12 @@ const styleName3 = {
       barWidth: 26,
       stack: "total",
       itemStyle: {
-        normal:{
-          color: "rgba(56,56,56,0.94)",
-        },
-        emphasis: {
-          color: '#006F0B' // 高亮时的颜色
-        },
+        color: "rgba(56,56,56,0.94)",
         borderRadius: [2, 2, 0, 0],
       },
+      emphasis: {
+        color: '#006F0B' // 高亮时的颜色
+      },
       label: {
         show: true,
         position: "insideTop",

src/components/charts/options/oneLineOption.js

@@ -47,10 +47,8 @@ export const oneLine = {
             // interval: 0,
             rotate: 15,
             margin: 14,
-            textStyle: {
-                color: "#9F9F9F",
-                fontSize: 10
-            },
+            color: "#9F9F9F",
+            fontSize: 10
         },
         axisLine: {
             lineStyle: {
@@ -71,10 +69,8 @@ export const oneLine = {
         axisLabel: {
             align: "center",
             formatter: '{value} °',
-            textStyle: {
-                color: "#fff",
-                fontSize: 10
-            },
+            color: "#fff",
+            fontSize: 10
         },
         // 分割线
         splitLine: {

src/components/fnHeader.vue

@@ -37,6 +37,7 @@
 import { onMounted, onUnmounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { convertPointToString } from "@/utils/index";
+import eventBus from "@/api/eventBus";
 
 const router = useRouter();
 const props = defineProps({
@@ -57,6 +58,7 @@ const props = defineProps({
 const farmVal = ref(sessionStorage.getItem("farmId") * 1 || "");
 const toggleFarm = (val) => {
     sessionStorage.setItem("farmId", farmVal.value);
+    eventBus.emit('garden:organId',val)
     router.push({ name: "Home" });
 };
 

src/components/navigation.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="navigation yes-events">
-        <el-select class="select" v-model="value" size="large" popper-class="focus-farm-select">
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select class="select" v-model="id" size="large" @change="changeSelect" popper-class="focus-farm-select">
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
         </el-select>
         <div class="tabs" v-for="(ele, idx) in list" :key="idx">
             <div
@@ -30,17 +30,29 @@
 
 <script setup>
 import { useRouter } from "vue-router";
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
+import eventBus from "@/api/eventBus";
 const router = useRouter();
 
-const value = ref("Option1");
+const id = ref("");
+const options = ref([]);
+eventBus.on('garden:organId',gardenOrganId)
 
-const options = [
-    {
-        value: "Option1",
-        label: "2区",
-    }
-];
+function gardenOrganId(farmId){
+    VE_API.region.list({farmId}).then(res =>{
+        options.value = res.data
+        id.value = res.data[0].id
+        eventBus.emit('area:id',id.value)
+    })
+}
+
+const changeSelect = (e) =>{
+    eventBus.emit('area:id',e)
+}
+
+onMounted(()=>{
+    gardenOrganId(sessionStorage.getItem('farmId'))
+})
 
 const emit = defineEmits(["handleTab","handleTabItem"])
 

src/views/home/index.vue

@@ -219,7 +219,7 @@ const getFarmIndexReport = () =>{
       if (code === 0) {
           reportData.value = data || {};
           const arr = blueListConvert(data.blueZoneList[active.value].obj)
-          blueRegionLayer.initData(arr)
+          blueRegionLayer.initData(arr,'87')
       }
   });
 }

src/views/home/map/blueRegionLayer.js

@@ -18,14 +18,14 @@ class BlueRegionLayer {
         this.kmap = map
     }
 
-    initData(arr) {
+    initData(arr,opacity='') {
         if (this.blueRegionLayer) {
             this.blueRegionLayer.source.clear();
         }
         for (let item of arr) {
             let feature = newAreaFeature(item);
             let strokeColor = "#FFFFFF";
-            feature.setStyle(this.vectorStyle.getPolygonStyle(item.color, strokeColor, 1));
+            feature.setStyle(this.vectorStyle.getPolygonStyle(item.color+opacity, strokeColor, 1));
             this.blueRegionLayer.addFeature(feature);
         }
         this.kmap.fit(this.blueRegionLayer.source.getExtent(), [0, 0, 0, 0]);