feat:首页左侧功能框接口对接

src/components/charts/barChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
 import { barOption } from "./options/barOption.js";
 import eventBus from "@/api/eventBus";
@@ -27,29 +27,8 @@ const chartDom = ref(null);
 const myChart = ref(null);
 const options = ref(null);
 
-// 用于存储当前高亮的数据索引
-let currentHighlightedIndex = null;
-
-eventBus.on("clear:area",()=>{
-    myChart.value.dispatchAction({
-        type: "downplay",
-        seriesIndex: 0,
-        dataIndex: currentHighlightedIndex,
-    });
-    myChart.value.dispatchAction({
-        type: "downplay",
-        seriesIndex: 1,
-        dataIndex: currentHighlightedIndex,
-    });
-    myChart.value.dispatchAction({
-        type: "downplay",
-        seriesIndex: 2,
-        dataIndex: currentHighlightedIndex,
-    });
-})
-
 const initData = () => {
-    if (props.styleName === "styleName2"||props.styleName === "styleName3") {
+    if (props.styleName === "styleName2") {
         const arr = [];
         props.yData.forEach((item, index) => {
             arr.push({
@@ -75,69 +54,6 @@ const initData = () => {
     barOption[props.styleName].xAxis.data = props.xData;
     options.value = barOption[props.styleName];
     myChart.value.setOption(options.value);
-
-    
-    // 监听点击事件
-    myChart.value.on("click", (params) => {
-        // params 是点击事件返回的所有信息对象
-        eventBus.emit('echart:barClick',params.name)
-
-        // 例如，可以在控制台输出点击的柱状图的值
-
-        // 如果当前已经有高亮的数据索引，并且不是当前点击的索引，则取消之前的高亮
-        if (currentHighlightedIndex !== null && currentHighlightedIndex !== params.dataIndex) {
-            // myChart.value.dispatchAction({
-            //     type: 'downplay',
-            //     seriesIndex: params.seriesIndex,
-            //     dataIndex: currentHighlightedIndex
-            // });
-            // 取消之前高亮的效果（如果有的话）
-            myChart.value.dispatchAction({
-                type: "downplay",
-                seriesIndex: 0,
-                dataIndex: currentHighlightedIndex,
-            });
-            myChart.value.dispatchAction({
-                type: "downplay",
-                seriesIndex: 1,
-                dataIndex: currentHighlightedIndex,
-            });
-            myChart.value.dispatchAction({
-                type: "downplay",
-                seriesIndex: 2,
-                dataIndex: currentHighlightedIndex,
-            });
-        }
-        
-        // 高亮当前点击的柱状体
-        myChart.value.dispatchAction({
-            type: "highlight",
-            seriesIndex: 0,
-            dataIndex: params.dataIndex,
-        });
-        // 高亮当前点击的柱状体
-        myChart.value.dispatchAction({
-            type: "highlight",
-            seriesIndex: 1,
-            dataIndex: params.dataIndex,
-        });
-        // 高亮当前点击的柱状体
-        myChart.value.dispatchAction({
-            type: "highlight",
-            seriesIndex: 2,
-            dataIndex: params.dataIndex,
-        });
-
-        // 高亮当前点击的柱状体
-        // myChart.value.dispatchAction({
-        //     type: 'highlight',
-        //     seriesIndex: params.seriesIndex,
-        //     dataIndex: params.dataIndex
-        // });
-
-        // 更新当前高亮的数据索引
-        currentHighlightedIndex = params.dataIndex;
-    });
 };
 
 // // 窗口大小变化时重置 ECharts 宽高
@@ -160,8 +76,13 @@ const initData = () => {
 
 onMounted(() => {
     myChart.value = echarts.init(chartDom.value);
-    initData();
 });
+
+watch(()=>props.xData,(newValue,oldValue) =>{
+    if(newValue){
+        initData();
+    }
+})
 </script>
 
 <style lang="scss" scoped>

src/components/charts/options/barOption.js

@@ -13,6 +13,7 @@ const commonStyle = {
     },
     axisLabel: {
       show: true,
+      interval:0,
       color: "rgba(255,255,255,0.6)",
       margin: 5,
     },
@@ -50,7 +51,7 @@ const styleName1 = {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "#BBA269",
+            color: "#F7BE5A",
           },
           {
             offset: 1,
@@ -67,36 +68,6 @@ const styleName2 = {
   ...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: {
-        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],
       type: "bar",
       barWidth: 26,
@@ -104,7 +75,7 @@ const styleName2 = {
       label: {
         show: true,
         color: "#fff",
-        // position: "top",
+        position: "insideTop",
         formatter: ({ value }) => {
           return value ? value : "";
         },
@@ -150,70 +121,5 @@ const 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: {
-        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: [29, 67, 0, 0,0],
-      type: "bar",
-      barWidth: 26,
-      stack: "total",
-      label: {
-        show: true,
-        color: "#fff",
-        position: "insideTop",
-        formatter: ({ value }) => {
-          return value ? value : "";
-        },
-      },
-      itemStyle: {
-        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' // 高亮时的颜色
-      },
-    },
-  ],
-};
 
-export const barOption = { styleName1, styleName2,styleName3 };
+export const barOption = { styleName1, styleName2 };

src/components/navigation.vue

@@ -30,7 +30,7 @@
 
 <script setup>
 import { useRouter } from "vue-router";
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import eventBus from "@/api/eventBus";
 const router = useRouter();
 
@@ -54,6 +54,11 @@ const changeSelect = (e) =>{
 
 onMounted(()=>{
     gardenOrganId(sessionStorage.getItem('farmId')*1)
+    eventBus.on('handleActive',handleActive)
+})
+
+onUnmounted(()=>{
+    eventBus.off('handleActive',handleActive)
 })
 
 const emit = defineEmits(["handleTab","handleTabItem"])
@@ -61,11 +66,23 @@ const emit = defineEmits(["handleTab","handleTabItem"])
 const checkedChildren = ref([]);
 const childrenData = ref([]);
 const handleCheckedChange = (e) => {
-    checkedChildren.value = [e[e.length -1]];
-    emit('handleTabItem',checkedChildren.value[0])
-    eventBus.emit('handleTabItem',checkedChildren.value[0])
+    if(e.length){
+        checkedChildren.value = [e[e.length -1]];
+        emit('handleTabItem',checkedChildren.value[0])
+        eventBus.emit('handleTabItem',checkedChildren.value[0])
+    }
 };
 
+function handleActive({name,key}){
+    childrenData.value = []
+    const arr = list.value[0].filter(item =>item.name===key)
+    active.value = arr[0].id;
+    childrenData.value = arr[0].children
+    checkedChildren.value = [name]
+
+    emit('handleTab',{name:arr[0].name,id:active.value,isUpdate:true,params:name})
+}
+
 const active = ref(0);
 const handleTab = ({ id, name,children }) => {
     active.value = id;
@@ -75,6 +92,7 @@ const handleTab = ({ id, name,children }) => {
         checkedChildren.value = [children[0]];
     }
     emit('handleTab',{name,id})
+    eventBus.emit('handleTab',name)
 };
 
 const list = ref([

src/views/home/album_compoents/albumDrawBox.vue

@@ -129,9 +129,12 @@ const drawBottom = (imgWidth, imgHeight, weather) => {
   // 绘制辐射
   drawImageInRect(ctx, bottomRect, data.fusheImg, startXPercent+26 + 18, 7 + 10, 5, 30)
   drawTextInRect(ctx, bottomRect,`${data.fushe}`,startXPercent+31 + 18, 28 + 10, 20)
+  //绘制日期信息
+  ctx.fillStyle = "#FFFFFF";
+  drawTextInRect(ctx, bottomRect,`${formatDate(new Date(data.uploadDate))}`,startXPercent +1.7, 75, 24)
   //绘制位置信息
   ctx.fillStyle = "#FFFFFF90";
-  drawTextInRect(ctx, bottomRect,`${formatDate(new Date(data.uploadDate))}_${data.treeCode}_S3_SCS3-3_D0P0G1`,startXPercent +1.7, 75, 16)
+  drawTextInRect(ctx, bottomRect,`${data.treeCode}_S3_SCS3-3_D0P0G1`,startXPercent +13, 75, 18)
 
   if(data.baseMap){
     drawBorderImageInRect(ctx, imgRect, data.baseMap, 2/3*100, 2/3*100,

src/views/home/components/homePage.vue

@@ -34,25 +34,25 @@
     <div class="chart-item phenology">
       <chart-box name="物候指标">
         <template #title-right>
-          <tabs :list="phenologyBtnGroup"></tabs>
+          <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
         </template>
-        <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
+        <bar-chart class="bar-chart" styleName="styleName1" :xData="phenologyObj.xData" :yData="phenologyObj.yData"></bar-chart>
         <div class="tips box-bg">
-          <div class="text" v-for="item in 3" :key="item">
-            白点：<span>刚刚露出，占比xx％，分布在2区</span>
+          <div class="text" v-for="(item,index) in phenologyObj.text" :key="index">
+            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
           </div>
         </div>
       </chart-box>
     </div>
     <div class="chart-item phenology">
-      <chart-box name="病虫测报">
+      <chart-box name="病虫指标">
         <template #title-right>
-          <tabs :list="diseasesBtnGroup"></tabs>
+          <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
         </template>
-        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
+        <bar-chart class="bar-chart" styleName="styleName1" :xData="diseasesObj.xData" :yData="diseasesObj.yData"></bar-chart>
         <div class="tips box-bg">
-          <div class="text" v-for="item in 3" :key="item">
-            虫害{{item}}：<span>刚刚露出，占比xx％，分布在2区</span>
+          <div class="text" v-for="(item,index) in diseasesObj.text" :key="index">
+            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
           </div>
         </div>
       </chart-box>
@@ -60,31 +60,32 @@
     <div class="chart-item evaluate">
       <chart-box name="生长指标">
         <template #title-right>
-          <tabs :list="growList"></tabs>
+          <tabs :list="growObj.btnGroup" keyStr="生长指标" :active="activeKey"></tabs>
         </template>
         <div class="content">
-          <bar-chart styleName="styleName1" :xData="evaluateXData" :yData="evaluateYData"></bar-chart>
-          <div class="box-bg text">
-            目前果园跨度异常比例达到<span>2%</span>，需要提供 <span>叶面肥</span>补充营养
-          </div>
+          <bar-chart style="width:52%" styleName="styleName1" :xData="growObj.xData" :yData="growObj.yData"></bar-chart>
+          <div class="box-bg text" v-html="growObj.content"></div>
         </div>
         <div class="text-list box-bg">
-          <div class="text-item" v-for="item in 3" :key="item">
+          <div class="text-item" v-for="(item,index) in growObj.text" :key="index">
             <div class="circle"></div>
-            <div class="txt">肥效比 低  <span>**棵树</span></div>
+            <div class="txt">{{item[0].slice(0,2)}}占比<span>{{item[3]}}％</span></div>
           </div>
+          <!-- <div class="text" v-for="(item,index) in growObj.text" :key="index">
+            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
+          </div> -->
         </div>
       </chart-box>
     </div>
     <div class="chart-item phenology">
       <chart-box name="生态指标">
         <template #title-right>
-          <tabs :list="ecologyList"></tabs>
+          <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
         </template>
-        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
+        <bar-chart class="bar-chart" styleName="styleName1" :xData="ecologyObj.xData" :yData="ecologyObj.yData"></bar-chart>
         <div class="tips box-bg">
-          <div class="text" v-for="item in 3" :key="item">
-            通风正常：<span>通风率80-100％，占比xx％</span>
+          <div class="text" v-for="(item,index) in ecologyObj.text" :key="index">
+            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
           </div>
         </div>
       </chart-box>
@@ -93,7 +94,7 @@
 </template>
 
 <script setup>
-import {ref,onMounted} from 'vue'
+import {ref,onMounted, onUnmounted} from 'vue'
 import chartBox from "@/components/chartBox.vue";
 import tabs from "./tabs.vue";
 import barChart from "@/components/charts/barChart.vue";
@@ -105,16 +106,62 @@ const store = useStore()
 const router = useRouter()
 
 onMounted(()=>{
-  getReoprt()
+
+  //选项子项监听事件
+  eventBus.on('handleTabItem',handleTabItem)
+  eventBus.on('handleActive',handleActive)
+  eventBus.on('area:id',areaId)
+})
+
+onUnmounted(()=>{
+  eventBus.off('handleTabItem',handleTabItem)
+  eventBus.off('handleActive',handleActive)
+  eventBus.off('area:id',areaId)
 })
 
 const reportData = ref([])
 
-// function filterArr(){}
+const curIndex = ref(0)
+const handleActive = ({index,key}) =>{
+  curIndex.value = index
+  if(key==='物候指标'){
+    phenologyObj.value = handleData('物候指标')
+  }
+  if(key==='病虫指标'){
+    diseasesObj.value = handleData('病虫指标')
+  }
+  if(key==='生长指标'){
+    growObj.value = handleData('生长指标')
+  }
+  if(key==='生态指标'){
+    ecologyObj.value = handleData('生态指标')
+  }
+}
+
+function handleData(name){
+  const arr = reportData.value.filter(item =>item.key === name)
+  const source = arr[0].obj
+  const obj = {
+    btnGroup : source.titleList,
+    xData : source.blueZoneLegendList[curIndex.value].list.map(item =>item.name),
+    yData : source.list1[curIndex.value].list.map(item => item.val.toFixed(0)),
+    text : source.list2[curIndex.value].list,
+    content : source.text,
+  }
+  return obj
+}
+
+function areaId({areaId,farmId}){
+  getReoprt(areaId,farmId)
+}
 
-const getReoprt = () =>{
-  VE_API.home.farmIndexReport({farmId:766,regionId:2}).then(res =>{
+const getReoprt = (areaId,farmId) =>{
+  VE_API.home.farmIndexReport({farmId,regionId:areaId}).then(res =>{
     reportData.value = res.data || []
+    phenologyObj.value = handleData('物候指标')
+    diseasesObj.value = handleData('病虫指标')
+    growObj.value = handleData('生长指标')
+    ecologyObj.value = handleData('生态指标')
   })
 }
 
@@ -122,74 +169,31 @@ const handlePage = () =>{
   router.push('/variety_map')
 }
 
-const btnWrap = [
-  ["树高","冠幅"]
-]
-//选项子项监听事件
-eventBus.on('handleTabItem',handleTabItem)
+const activeKey = ref('')
 function handleTabItem(e){
-  console.log('e');
+  activeKey.value = e
 }
 
 //基本指标
 const btnGroup = ["树高","冠幅"]
+
 // 物候指标
-const phenologyBtnGroup = ["花穗长度","单数花穗率"]
-const phenologyXData = ["花芽","花蕾","短花穗","中花穗","长花穗","开花"]
-const phenologyYData = [{
-  startNum:0,
-  endNum:16,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:0,
-  endNum:16,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:0,
-  endNum:16,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:0,
-  endNum:16,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-}]
+const phenologyObj = ref({})
 
 // 病虫测报
-const diseasesBtnGroup = ["虫害比例","病害比例"]
-const phenologyXData1 = ["炭疽病", "啃食虫害","叶瘿蚊","毛毡病"]
+const diseasesObj = ref({})
 const phenologyYData1 = [{
   startNum:0,
   endNum:0,
   startColor:"#c6ab6b",
   endColor:"#4e442e"
-},{
-  startNum:0,
-  endNum:0,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:0,
-  endNum:0,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-},{
-  startNum:0,
-  endNum:1,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
 }]
 
 // 生长指标
-const growList = ["树势","营养","缺水"]
-const evaluateXData = ["低", "中", "高"]
-const evaluateYData = [1, 8, 7]
+const growObj = ref({})
 
 //生态指标
-const ecologyList = ["通风率","清园程度","益草覆盖率"]
+const ecologyObj = ref({})
 
 const gybg= ()=>{
   VE_API.farm_files.last({farmId: 766,key:"pdf_report"}).then(({data})=>{
@@ -269,6 +273,7 @@ const gybg= ()=>{
       padding: 3px 6px;
       box-sizing: border-box;
       font-family: Arial, Helvetica, sans-serif;
+      overflow-y: auto;
       background: linear-gradient(180deg, rgb(85, 85, 85,0.4) 0%, rgb(35, 35, 35,1) 100%);
       .text{
         position: relative;

src/views/home/components/tabs.vue

@@ -2,9 +2,9 @@
     <div class="btn-group">
         <div
             :class="['btn-item', { active: active === index }]"
-            @click="handleActive(index)"
-            v-for="(item, index) in list"
-            :key="index"
+            @click="handleActive(item,index)"
+            v-for="(item, index) in baseList"
+            :key="index + item"
         >
             {{ item }}
         </div>
@@ -12,19 +12,58 @@
 </template>
 
 <script setup>
-import {ref} from 'vue'
+import {onMounted, onUnmounted, ref, watch} from 'vue'
+import eventBus from "@/api/eventBus";
 
 const props = defineProps({
     list: {
         type: Array,
-        defalut: [],
+        defalut: ()=>[],
+    },
+    keyStr: {
+        type: String,
+        defalut: '',
+    },
+    active: {
+        type: String,
+        defalut: '',
     },
 });
 
+onMounted(()=>{
+    //选项监听事件
+    eventBus.on('handleTab',handleTab)
+})
+
+onUnmounted(()=>{
+    eventBus.off('handleTab',handleTab)
+})
+
+const emit = defineEmits(["handleActive"])
+
+const baseList = ref([])
 const active = ref(0);
-const handleActive = (i) => {
-    active.value = i;
+const handleActive = (item,index) => {
+    active.value = index;
+    eventBus.emit('handleActive',{name:item,key:props.keyStr,index})
 };
+
+function handleTab(e){
+  active.value = 0
+}
+
+watch(()=>props.list,(newValue,oldValue)=>{
+    if(newValue){
+        baseList.value = newValue
+    }
+})
+
+watch(()=>props.active,(newValue,oldValue)=>{
+    if(newValue){
+        const index = props.list.findIndex(item =>item===newValue)
+        active.value = index
+    }
+})
 </script>
 
 <style lang="scss" scoped>

src/views/home/index.vue

@@ -2,7 +2,7 @@
   <div class="base-container no-events">
     <fnHeader showDate></fnHeader>
     <div class="content">
-      <navigation @handleTab="handleTab" @handleTabItem="handleTabItem"></navigation>
+      <navigation @handleTab="handleTab"></navigation>
       <div class="left yes-events">
         <tool-list
           direction="left"
@@ -47,7 +47,7 @@
         <div class="list">
           <chart-box name="农事列表" arrow="arrow-left" :class="{'list-wrap': rightIndex===0}">
             <template v-if="rightIndex===0">
-              <album></album>
+              <!-- <album></album> -->
               <!-- <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
               <div class="img-box">
                 <img @click="handleAct(item)" v-for="item in 2" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
@@ -144,8 +144,8 @@ const mapRef = ref();
 onMounted(() => {
   homeMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
   // homeMap.initMap(store.getters.userinfo.location, mapRef.value);
-  samplePointLayer = new SamplePointLayer(homeMap.kmap.map, currentFarm, currentRegion)
   // regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
+  samplePointLayer = new SamplePointLayer(homeMap.kmap.map)
   blueRegionLayer = new BlueRegionLayer(homeMap.kmap)
 
   getYellow()
@@ -153,14 +153,17 @@ onMounted(() => {
 
   //区域切换监听事件
   eventBus.on('area:id',areaId)
+  //选项卡子项事件监听
+  eventBus.on('handleTabItem',handleTabItem)
 });
 
 onUnmounted(()=>{
   eventBus.off('area:id',areaId)
+  eventBus.off('handleTabItem',handleTabItem)
 })
 
 const blueList = ref([])
-const getBlueRegionList = () =>{
+const getBlueRegionList = (callback) =>{
   VE_API.farm.blueRegionList({farmId:organId.value,regionId:regionId.value}).then(({ data }) => {
       blueList.value = data.map(item =>{
         let color = 'rgba(255, 255, 255, 0.5)' //失效区域
@@ -179,6 +182,7 @@ const getBlueRegionList = () =>{
         }
       })
       blueRegionLayer.initData(blueList.value)
+      callback && callback()
   });
 }
 
@@ -187,13 +191,21 @@ const regionId = ref(null)
 const tabName = ref('')
 const tabId = ref(0)
 //选项卡事件监听
-const handleTab = ({name,id}) =>{
+const handleTab = async ({name,id,isUpdate,params}) =>{
     tabName.value = name
     tabId.value = id
     if(id===0){
-      getBlueRegionList()
+      getBlueRegionList(()=>{
+        if(isUpdate){
+          handleTabItem(params)
+        }
+      })
     }else{
-      getFarmIndexReport()
+      getFarmIndexReport((()=>{
+        if(isUpdate){
+          handleTabItem(params)
+        }
+      }))
     }
 }
 
@@ -201,6 +213,7 @@ const handleTab = ({name,id}) =>{
 function areaId({areaId,farmId}){
   organId.value = farmId
   regionId.value = areaId
+  samplePointLayer.initData(farmId,areaId)
   if(tabId.value===0){
     getBlueRegionList()
   }else{
@@ -210,12 +223,14 @@ function areaId({areaId,farmId}){
 
 //选项卡子项事件监听
 const handleTabItem = (e) =>{
-  const index = reportData.value.blueZoneList.findIndex(item => item.key===e)
-  let arr = []
-  if(reportData.value.blueZoneList.length){
-    arr = blueListConvert(reportData.value.blueZoneList[index].obj,index)
+  if(reportData.value.blueZoneList){
+    const index = reportData.value.blueZoneList.findIndex(item => item.key===e)
+    let arr = []
+    if(reportData.value.blueZoneList.length){
+      arr = blueListConvert(reportData.value.blueZoneList[index].obj,index)
+    }
+    blueRegionLayer.initData(arr,'87')
   }
-  blueRegionLayer.initData(arr,'87')
 }
 
 const reportData = ref({})
@@ -240,7 +255,7 @@ const blueListConvert = (data,index)=>{
     return list
 }
 
-const getFarmIndexReport = () =>{
+const getFarmIndexReport = (callback) =>{
   const params = { farmId:organId.value,regionId:regionId.value, type: tabName.value };
     VE_API.farm.farmIndexReport(params).then(({data,code}) => {
       if (code === 0) {
@@ -250,6 +265,7 @@ const getFarmIndexReport = () =>{
             arr = blueListConvert(data.blueZoneList[0].obj,0)
           }
           blueRegionLayer.initData(arr,'87')
+          callback && callback()
       }
   });
 }

src/views/home/map/samplePointLayer.js

@@ -18,10 +18,10 @@ import eventBus from "@/api/eventBus";
  * @description 地图层对象
  */
 class SamplePointLayer {
-  constructor(map, farm, region) {
+  constructor(map, organId, regionId) {
     let that = this;
-    this.farmId = farm.id
-    this.regionId = region.id
+    this.farmId = organId
+    this.regionId = regionId
     let vectorStyle = new KMap.VectorStyle();
     this.vectorStyle = vectorStyle;
     this.clusterSource = new Cluster({
@@ -61,7 +61,6 @@ class SamplePointLayer {
     // this.yellowBlockLayer.addFeature(point1);
     // this.yellowBlockLayer.addFeature(point2);
 
-    this.initData(this.farmId, this.regionId)
     this.addMapSingerClick(map);
   }
   getIconStyle(feature){
@@ -93,7 +92,7 @@ class SamplePointLayer {
 
   initData(farmId, regionId){
     let that = this
-    VE_API.image.pointByRegionId({farmId:766,regionId:2}).then(({data})=>{
+    VE_API.image.pointByRegionId({farmId,regionId}).then(({data})=>{
       let features = []
       for(let item of data){
         item.iconName='defalut'
@@ -169,7 +168,7 @@ class SamplePointLayer {
   getIcon(item){
     // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
     let imgSrc = require('@/assets/images/map/status/status-bh.png')
-    let scale = 0.7
+    let scale = 0.8
     if(item.status == 1){
       imgSrc = require('@/assets/images/map/status/status-szyc.png')
     }

src/views/warningHome/map/alarmLayer.js

@@ -62,18 +62,7 @@ class AlarmLayer {
         this.warningLayer && this.kmap.map.removeLayer(this.warningLayer.layer)
         // 104.3017367175,30.329292136
         let path = null
-        let text = ''
-        if(name==='日间温度'){
-            text = '从化地块日温'
-            path = this.warningLayers[text]
-            return
-        }else if(name==='夜间温度'){
-            text = '从化地块夜温'
-            path = this.warningLayers[text]
-            return
-        }else if(name==='土壤水分'){
-            text = '从化地块水分'
-            path = this.warningLayers[text]
+        if(name==='日间温度' || name==='夜间温度' || name==='土壤水分'){
             return
         }else{
             path = layerUrl