feat：添加实时感知和诊断识别组件

src/components/charts/barChart.vue

@@ -7,6 +7,7 @@ import { onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
 import { barOption } from "./options/barOption.js";
 import eventBus from "@/api/eventBus";
+import { deepClone } from "@/common/commonFun.js";
 
 const props = defineProps({
     styleName: {
@@ -28,31 +29,43 @@ const myChart = ref(null);
 const options = ref(null);
 
 const initData = () => {
+    const barOptionValue = deepClone(barOption)
     if (props.styleName === "styleName2") {
+        if(props.yData[0].legend){
+            barOptionValue[props.styleName].legend.show = true
+            barOptionValue[props.styleName].grid.top = 35
+        }
+        barOptionValue[props.styleName].series[0].data = props.yData.map(item =>item.startNum);
+        barOptionValue[props.styleName].series[1].data = props.yData.map(item =>item.endNum);
+    } else if(props.styleName === "styleName3"){
         const arr = [];
         props.yData.forEach((item, index) => {
             arr.push({
-                value: item.startNum,
+                value: item.value,
                 itemStyle: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: item.startColor,
+                            color: item.color[0],
                         },
                         {
                             offset: 1,
-                            color: item.endColor,
+                            color: item.color[1],
                         },
                     ]),
                 },
             });
         });
-        barOption[props.styleName].series[0].data = arr;
-    } else {
-        barOption[props.styleName].series[0].data = props.yData;
+        barOptionValue[props.styleName].series[0].data = arr;
+    }else if(props.styleName === "styleName4"){
+        barOptionValue[props.styleName].series[0].data = props.yData.map(item =>item.total);;
+        barOptionValue[props.styleName].series[1].data = props.yData.map(item =>item.startNum);
+        barOptionValue[props.styleName].series[2].data = props.yData.map(item =>item.endNum);
+    }else{
+        barOptionValue[props.styleName].series[0].data = props.yData;
     }
-    barOption[props.styleName].xAxis.data = props.xData;
-    options.value = barOption[props.styleName];
+    barOptionValue[props.styleName].xAxis.data = props.xData;
+    options.value = barOptionValue[props.styleName];
     myChart.value.setOption(options.value);
 };
 
@@ -76,6 +89,7 @@ const initData = () => {
 
 onMounted(() => {
     myChart.value = echarts.init(chartDom.value);
+    initData();
 });
 
 watch(()=>props.xData,(newValue,oldValue) =>{

src/components/charts/oneLineChart.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref,watch } from "vue";
+import { nextTick, onMounted, ref,watch } from "vue";
 import * as echarts from "echarts";
 import { oneLine } from "./options/oneLineOption";
 import { deepClone } from "@/common/commonFun";
@@ -25,30 +25,62 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    chartDate: {
+        type: Array,
+        default: () => [],
+    },
+    name: {
+        type: String,
+        default: "",
+    },
+    customVal: {
+        type: Object,
+        default: () => {}
+    }
 });
 
 const chartDom = ref(null);
-const myChart = ref(null);
+let myChart = null;
 const options = ref(null);
 
 const initData = () =>{
-    oneLine.series[0].data = props.yData
-    oneLine.series[0].markPoint.data[0].value = props.yData[0] + '°'
-    oneLine.series[0].markPoint.data[0].yAxis = props.yData[0]
-    oneLine.series[0].markPoint.data[1].yAxis = props.yData[0]
-
-    oneLine.series[1].data = props.minData
-    oneLine.series[1].markPoint.data[0].value = props.minData[0] + '°'
-    oneLine.series[1].markPoint.data[0].yAxis = props.minData[0]
-    oneLine.series[1].markPoint.data[1].yAxis = props.minData[0]
+    const lineOption = deepClone(oneLine)
+    lineOption.series[0].data = props.yData
+    lineOption.series[0].name = props.name
+    // lineOption.series[0].markPoint.data[0].value = props.yData[0] + " %"
+    // lineOption.series[0].markPoint.data[0].yAxis = props.yData[0]
+    // lineOption.series[0].markPoint.data[1].yAxis = props.yData[0]
 
-    options.value = deepClone(oneLine);
+    if (props.minData && props.minData.length) {
+        lineOption.series[1].data = props.minData
+        // lineOption.series[1].markPoint.data[0].value = props.minData[0]
+        // lineOption.series[1].markPoint.data[0].yAxis = props.minData[0]
+        // lineOption.series[1].markPoint.data[1].yAxis = props.minData[0]
+    } else {
+        lineOption.series.pop()
+    }
+    if (props.chartDate && props.chartDate.length) {
+    //     lineOption.series[0].markPoint.data[0].xAxis = props.chartDate[0]
+    //     lineOption.series[0].markPoint.data[1].xAxis = props.chartDate[0]
+        lineOption.xAxis.data = props.chartDate
+    }
+    if (props.customVal && props.customVal?.min) {
+        lineOption.yAxis[0].min = props.customVal.min
+        lineOption.yAxis[0].max = props.customVal.max
+        lineOption.grid.right = 20
+        lineOption.yAxis[0].axisLabel.align = "left"
+        lineOption.yAxis[0].axisLabel.formatter = "{value}"
+    }
 
-    myChart.value.setOption(options.value);
+    options.value = lineOption;
+    nextTick(() => {
+        myChart.setOption(options.value);
+    })
 }
 
 onMounted(() => {
-    myChart.value = echarts.init(chartDom.value);
+    myChart = echarts.init(chartDom.value);
+    initData();
 });
 
 watch(()=>props.yData,(newValue,oldValue) =>{

src/components/charts/options/barOption.js

@@ -27,7 +27,7 @@ const commonStyle = {
     },
   },
   grid: {
-    top: "0%",
+    top: 4,
     left: "-10%",
     right: "0%",
     bottom: "0%",
@@ -46,6 +46,9 @@ const styleName1 = {
         show: true,
         color: "#fff",
         position: "insideTop",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
       },
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -66,12 +69,22 @@ const styleName1 = {
 
 const styleName2 = {
   ...commonStyle,
+  legend: {
+    data: ['缺素', '正常'],
+    textStyle:{
+      color:'#fff'
+    },
+    left:'center',
+    selectedMode: false,
+    show:false
+  },
   series: [
     {
       data: [0, 1, 0,13],
       type: "bar",
       barWidth: 26,
       stack: "total",
+      name:'正常',
       label: {
         show: true,
         color: "#fff",
@@ -84,11 +97,11 @@ const styleName2 = {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
           {
             offset: 0,
-            color: "#ff0000",
+            color: "#DAB767",
           },
           {
             offset: 1,
-            color: "#B81500",
+            color: "#3D3523",
           },
         ]),
         borderRadius: [2, 2, 0, 0],
@@ -101,6 +114,7 @@ const styleName2 = {
       data: [16,15,16, 3],
       type: "bar",
       barWidth: 26,
+      name:'缺素',
       stack: "total",
       itemStyle: {
         color: "rgba(56,56,56,0.94)",
@@ -121,5 +135,140 @@ const styleName2 = {
   ],
 };
 
+const styleName3 = {
+  ...commonStyle,
+  series: [
+    {
+      data: [32, 40, 42],
+      type: "bar",
+      barWidth: 26,
+      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: "#F7BE5A",
+          },
+          {
+            offset: 1,
+            color: "#3D3523",
+          },
+        ]),
+        borderRadius: [2, 2, 0, 0],
+      },
+    },
+  ],
+};
+
+const styleName4 = {
+  ...commonStyle,
+  legend: {
+    data: ['无需防治', '已防治', '未防治'],
+    textStyle:{
+      color:'#fff'
+    },
+    left:'right',
+    selectedMode: false,
+  },
+  series: [
+    {
+      data: [12, 0, 0],
+      type: "bar",
+      barWidth: 26,
+      name:'无需防治',
+      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: "#59B558",
+          },
+          {
+            offset: 1,
+            color: "#2D4C2C",
+          },
+        ]),
+        borderRadius: [2, 2, 0, 0],
+      },
+      emphasis: {
+        color: '#B81500' // 高亮时的颜色
+      },
+    },
+    {
+      data: [0, 11, 12],
+      type: "bar",
+      barWidth: 26,
+      name:'已防治',
+      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: "#DAB767",
+          },
+          {
+            offset: 1,
+            color: "#3D3523",
+          },
+        ]),
+        borderRadius: [2, 2, 0, 0],
+      },
+      emphasis: {
+        color: '#B81500' // 高亮时的颜色
+      },
+    },
+    {
+      data: [0,15,16],
+      type: "bar",
+      name:'未防治',
+      barWidth: 26,
+      stack: "total",
+      label: {
+        show: true,
+        position: "insideTop",
+        color: "#fff",
+        formatter: ({ value }) => {
+          return value ? value : "";
+        },
+      },
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#CE7E43",
+          },
+          {
+            offset: 1,
+            color: "#53341D",
+          },
+        ]),
+        borderRadius: [2, 2, 0, 0],
+      },
+    },
+  ],
+};
+
 
-export const barOption = { styleName1, styleName2 };
+export const barOption = { styleName1, styleName2 ,styleName3,styleName4};

src/components/charts/options/oneLineOption.js

@@ -23,11 +23,11 @@ function getCurrentDateAndNextSixDaysMMDD() {
 const list = getCurrentDateAndNextSixDaysMMDD();
 
 export const oneLine = {
-    // tooltip: {
-    //     trigger: "axis",
-    // },
+    tooltip: {
+        trigger: "axis",
+    },
     grid: {
-        top: 14,
+        top: 24,
         left: 6,
         right: 6,
         bottom: 6,
@@ -59,7 +59,8 @@ export const oneLine = {
     yAxis: [{
         type: 'value',
         offset: 10,
-        interval: 10,
+        // interval: 10,
+        max: 100,
         axisTick: {
             show: false,
         },
@@ -68,8 +69,8 @@ export const oneLine = {
         },
         axisLabel: {
             align: "center",
-            formatter: '{value} °',
-            color: "#fff",
+            formatter: '{value} %',
+            color: "#9F9F9F",
             fontSize: 10
         },
         // 分割线
@@ -80,7 +81,7 @@ export const oneLine = {
                 color: "#333333",
             },
         },
-        splitNumber: 4, // 设置5个分割段
+        // splitNumber: 4, // 设置5个分割段
     }],
     series: [
         {
@@ -100,41 +101,6 @@ export const oneLine = {
                     { offset: 1, color: "rgba(35, 35, 35, 0)" }, // 渐变结束颜色
                 ]),
             },
-            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: "10°",
-                        xAxis: list[0],
-                        yAxis: '',
-                        symbolOffset: [0, "-50%"],
-                        label: {
-                            offset: [0, -12],
-                            backgroundColor: "#FF7219",
-                            padding: [0, 8, 0, 8],
-                            color: "#fff",
-                            height: 18,
-                            borderRadius: 10,
-                        },
-                    },
-                    {
-                        name: "mark",
-                        xAxis: list[0],
-                        yAxis: '',
-                        value: "",
-                        label: {
-                            backgroundColor: "#fff",
-                            borderWidth: 2,
-                            borderColor: "rgba(255, 255, 255, 0.5)",
-                            borderRadius: 8,
-                            width: 4,
-                            height: 4,
-                        },
-                    },
-                ]
-            },
         },
         {
             name: "低温",

src/views/home/components/leftComponents/leftDiseases.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="chart-list">
+        <div class="chart-item">
+            <chart-box name="疑似病虫">
+                <bar-chart class="bar-chart" styleName="styleName1" :xData="['蚜虫','条锈病','赤霉病']" :yData="[3,2,2]"></bar-chart>
+                <div class="box-bg tips">
+                    <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
+                </div>
+            </chart-box>
+        </div>
+        <div class="chart-item">
+            <chart-box name="日常防治">
+              <bar-chart class="bar-chart" styleName="styleName3" :xData="['已防治','未防治']" :yData="preventionYData.slice(1,)"></bar-chart>
+              <div class="box-bg tips">
+                  <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
+              </div>
+            </chart-box>
+        </div>
+        <div class="chart-item">
+            <chart-box name="异常防治">
+              <bar-chart class="bar-chart" styleName="styleName3" :xData="['无需防治','已防治','未防治']" :yData="preventionYData"></bar-chart>
+              <div class="box-bg tips">
+                  <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
+              </div>
+            </chart-box>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import chartBox from "@/components/chartBox.vue";
+import eventBus from "@/api/eventBus";
+import barChart from "@/components/charts/barChart.vue";
+import {onMounted, onUnmounted, ref} from "vue"
+
+//疑似病虫
+const diseaseXData = ref([])
+const diseaseYData = ref([])
+const diseaseText = ref('')
+
+//日常防治
+const preventionXData = ref([])
+const preventionYData = ref([
+    {
+        value:2,
+        color:['#59B558','#2D4C2C']
+    },
+    {
+        value:2,
+        color:['#CE7E43','#CE7E43']
+    },
+    {
+        value:2,
+        color:['#DAB767','#3D3523']
+    }
+])
+
+const preventionText = ref('')
+
+const getList = (farmId) =>{
+
+  VE_API.farm.getFarmReport({farmId,type:'病虫风险'}).then(res =>{
+    if(res.data['疑似病虫']){
+      const {list ,text} = res.data['疑似病虫']
+      diseaseXData.value = list.map(item =>item.name)
+      diseaseYData.value = list.map(item =>item.value)
+      diseaseText.value = text
+    }
+    if(res.data['日常防治']){
+      const {list ,text} = res.data['日常防治']
+      preventionXData.value = ['一级','二级','三级']
+      preventionYData.value = preventionXData.value.map((item,index) => {
+        let color = ['#59B558','#2D4C2C']
+        if(index === 1){
+          color = ['#CE7E43','#CE7E43']
+        }else if(index === 2){
+          color = ['#DAB767','#3D3523']
+        }
+        return {
+          color,
+          value:index?2:1,
+        }
+      })
+      preventionText.value = text
+    }
+  })
+}
+
+function changeAreaId({farmId}){
+  getList(farmId)
+}
+
+onMounted(() =>{
+//   getList(sessionStorage.getItem('farmId'))
+  eventBus.on("area:id", changeAreaId);
+})
+
+onUnmounted(()=>{
+  eventBus.off("area:id", changeAreaId);
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-list {
+    width: calc(100% - 54px - 10px);
+    height: 100%;
+    overflow: auto;
+    padding: 8px 8px 0 0;
+    box-sizing: border-box;
+    .chart-item {
+        width: 100%;
+        height: calc((100% - 273px) / 2);
+        box-sizing: border-box;
+        .import{
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 4px;
+          padding: 5px 13px;
+          cursor: pointer;
+        }
+        .bar-chart{
+          width: 100%;
+          height: calc(100% - 77px - 30px);
+        }
+        .box-bg {
+            margin-top: 16px;
+            border-radius: 2px 2px 0 0;
+            font-size: 12px;
+            padding: 6px;
+            line-height: 1.5;
+            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;
+                color: #fff;
+            }
+        }
+    }
+    .chart-item + .chart-item{
+        margin-top: 8px;
+    }
+
+}
+</style>

src/views/home/components/leftComponents/leftNutrition.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="chart-list">
+        <div class="chart-item">
+            <chart-box name="营养评估">
+                <bar-chart class="bar-chart" styleName="styleName1" :xData="['蚜虫','条锈病','赤霉病']" :yData="[3,2,2]"></bar-chart>
+                <div class="box-bg tips">
+                    <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
+                </div>
+            </chart-box>
+        </div>
+        <div class="chart-item">
+            <chart-box name="营养评估">
+              <bar-chart class="bar-chart" styleName="styleName1" :xData="['蚜虫','条锈病','赤霉病']" :yData="[3,2,2]"></bar-chart>
+              <div class="box-bg tips">
+                  <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
+              </div>
+            </chart-box>
+        </div>
+        <div class="chart-item">
+            <chart-box name="营养评估">
+              <bar-chart class="bar-chart" styleName="styleName1" :xData="['蚜虫','条锈病','赤霉病']" :yData="[3,2,2]"></bar-chart>
+              <div class="box-bg tips">
+                  <div class="text">这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。</div>
+              </div>
+            </chart-box>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import chartBox from "@/components/chartBox.vue";
+import eventBus from "@/api/eventBus";
+import barChart from "@/components/charts/barChart.vue";
+import {onMounted, onUnmounted, ref} from "vue"
+
+//疑似病虫
+const diseaseXData = ref([])
+const diseaseYData = ref([])
+const diseaseText = ref('')
+
+//日常防治
+const preventionXData = ref([])
+const preventionYData = ref([
+    {
+        value:2,
+        color:['#59B558','#2D4C2C']
+    },
+    {
+        value:2,
+        color:['#CE7E43','#CE7E43']
+    },
+    {
+        value:2,
+        color:['#DAB767','#3D3523']
+    }
+])
+
+const preventionText = ref('')
+
+const getList = (farmId) =>{
+
+  VE_API.farm.getFarmReport({farmId,type:'病虫风险'}).then(res =>{
+    if(res.data['疑似病虫']){
+      const {list ,text} = res.data['疑似病虫']
+      diseaseXData.value = list.map(item =>item.name)
+      diseaseYData.value = list.map(item =>item.value)
+      diseaseText.value = text
+    }
+    if(res.data['日常防治']){
+      const {list ,text} = res.data['日常防治']
+      preventionXData.value = ['一级','二级','三级']
+      preventionYData.value = preventionXData.value.map((item,index) => {
+        let color = ['#59B558','#2D4C2C']
+        if(index === 1){
+          color = ['#CE7E43','#CE7E43']
+        }else if(index === 2){
+          color = ['#DAB767','#3D3523']
+        }
+        return {
+          color,
+          value:index?2:1,
+        }
+      })
+      preventionText.value = text
+    }
+  })
+}
+
+function changeAreaId({farmId}){
+  getList(farmId)
+}
+
+onMounted(() =>{
+//   getList(sessionStorage.getItem('farmId'))
+  eventBus.on("area:id", changeAreaId);
+})
+
+onUnmounted(()=>{
+  eventBus.off("area:id", changeAreaId);
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-list {
+    width: calc(100% - 54px - 10px);
+    height: 100%;
+    overflow: auto;
+    padding: 8px 8px 0 0;
+    box-sizing: border-box;
+    .chart-item {
+        width: 100%;
+        height: calc((100% - 273px) / 2);
+        box-sizing: border-box;
+        ::v-deep{
+            .chart-content{
+                display: flex;
+                justify-content: space-between;
+            }
+        }
+        .bar-chart{
+          width: 50%;
+          height: 100%;
+        }
+        .box-bg {
+            width: 45%;
+            margin-top: 16px;
+            border-radius: 2px 2px 0 0;
+            font-size: 12px;
+            padding: 6px;
+            line-height: 1.5;
+            box-sizing: border-box;
+            overflow-y: auto;
+            background: linear-gradient(180deg, rgb(85, 85, 85, 0.4) 0%, rgb(35, 35, 35, 1) 100%);
+            .text {
+                position: relative;
+                color: #fff;
+            }
+        }
+    }
+    .chart-item + .chart-item{
+        margin-top: 8px;
+    }
+
+}
+</style>

src/views/home/components/leftComponents/leftStation.vue

@@ -1,20 +1,18 @@
 <template>
-    <div class="chart-list" v-loading="isLoading" element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="数据加载中...">
+    <div class="chart-list">
         <div class="chart-item">
             <chart-box name="气温">
                 <one-line-chart
                     class="line-chart"
-                    :class="{'all': !text}"
-                    :name="riskKeys[0]"
-                    :key="1"
-                    :yData="yData"
+                    key="tr"
+                    name="阴天寡照"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
                     :minData="[]"
-                    :chartDate="chartDate"
-                    :customVal="{min: -1, max: 1}"
+                    :chartDate="chartDate1"
                 ></one-line-chart>
-                <div class="box-bg tips" v-if="text">
+                <div class="box-bg tips">
                     <div class="text">
-                        {{ text }}
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                     </div>
                 </div>
             </chart-box>
@@ -23,17 +21,15 @@
             <chart-box name="湿度">
                 <one-line-chart
                     class="line-chart"
-                    :class="{'all': !text1}"
                     key="tr"
-                    :name="riskKeys[1]"
-                    :yData="yData1"
+                    name="阴天寡照"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
                     :minData="[]"
                     :chartDate="chartDate1"
-                    :customVal="{min: -1, max: 2}"
                 ></one-line-chart>
-                <div class="box-bg tips" v-if="text1">
+                <div class="box-bg tips">
                     <div class="text">
-                        {{ text1 }}
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                     </div>
                 </div>
             </chart-box>
@@ -42,17 +38,15 @@
             <chart-box name="水质">
                 <one-line-chart
                     class="line-chart"
-                    :class="{'all': !text2}"
-                    key="js"
-                    :name="riskKeys[2]"
-                    :yData="yData2"
+                    name="阴雨渍水"
+                    :key="1"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
                     :minData="[]"
-                    :chartDate="chartDate2"
-                    :customVal="{min: -1, max: 1}"
+                    :chartDate="chartDate"
                 ></one-line-chart>
-                <div class="box-bg tips" v-if="text2">
+                <div class="box-bg tips">
                     <div class="text">
-                        {{ text2 }}
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                     </div>
                 </div>
             </chart-box>
@@ -71,71 +65,51 @@ const riskKeys = ref([]);
 
 const yData = ref([]);
 const yData1 = ref([]);
-const yData2 = ref([]);
-const yData3 = ref([]);
 
 const chartDate = ref([]);
 const chartDate1 = ref([]);
-const chartDate2 = ref([]);
-const chartDate3 = ref([]);
 
 const text = ref(null);
 const text1 = ref(null);
-const text2 = ref(null);
-
-const isLoading = ref(false)
 
 const baseData = ref({});
 
 const organId = ref(sessionStorage.getItem("farmId"));
 
-// onMounted(() => {
-//     // getList();
-//     getBaseData();
-//     getTimeIndex();
-//     eventBus.on("area:id", changeAreaId);
-//     eventBus.on("selectedPointVal", changeSelectedPoint);
-// });
+onMounted(() => {
+    // getList();
+    //   getBaseData()
+    //   eventBus.on("area:id", changeAreaId);
+});
 onUnmounted(() => {
     eventBus.off("area:id", changeAreaId);
-    eventBus.off("selectedPointVal", changeSelectedPoint);
 });
 
 function changeAreaId({ farmId }) {
     organId.value = farmId;
-    // getList();
+    getList();
     getBaseData();
-    getTimeIndex();
 }
 
-function changeSelectedPoint(coordinate) {
-    // getList(coordinate);
-}
-
-function getList(coordinate) {
-    isLoading.value = true
+function getList() {
     riskKeys.value = [];
     yData.value.value = [];
     yData1.value.value = [];
-    yData2.value.value = [];
     chartDate.value.value = [];
     chartDate1.value.value = [];
-    chartDate2.value.value = [];
-    VE_API.python.indexCalculation({lon: coordinate ? coordinate[0] : 110.2011,lat: coordinate ? coordinate[1] : 21.0446}, {Global: false}).then((res) => {
-      riskKeys.value = ["TSI","CHLA","FAI"]
-      yData.value = res.data[riskKeys.value[0]].map((item) => parseFloat(item.value.toFixed(2)));
-      yData1.value = res.data[riskKeys.value[1]].map((item) => parseFloat(item.value.toFixed(2)));
-      yData2.value = res.data[riskKeys.value[2]].map((item) => parseFloat(item.value.toFixed(2)));
-
-      chartDate.value = res.data[riskKeys.value[0]].map((item) => item.name);
-      chartDate1.value = res.data[riskKeys.value[1]].map((item) => item.name);
-      chartDate2.value = res.data[riskKeys.value[2]].map((item) => item.name);
-      isLoading.value = false
-
-      // text.value = res.data[riskKeys.value[0]].text;
-      // text1.value = res.data[riskKeys.value[1]].text;
-      // text2.value = res.data[riskKeys.value[2]].text;
-    })
+    // VE_API.farm.getFarmReport({ farmId: organId.value, type: "气象风险" }).then((res) => {
+    //     // if (res.data["物候进程"]) {}
+    //     // 使用 Object.keys() 提取对象中的键
+    //     riskKeys.value = Object.keys(res.data);
+    //     yData.value = res.data[riskKeys.value[0]].list.map((item) => parseFloat(item.value.toFixed(1)))
+    //     yData1.value = res.data[riskKeys.value[1]].list.map((item) => parseFloat(item.value.toFixed(1)))
+
+    //     chartDate.value = formattedDates(res.data[riskKeys.value[0]].list.map((item) => item.name))
+    //     chartDate1.value = formattedDates(res.data[riskKeys.value[1]].list.map((item) => item.name))
+
+    //     text.value = res.data[riskKeys.value[0]].text
+    //     text1.value = res.data[riskKeys.value[1]].text
+    // })
 }
 
 function formattedDates(dates) {
@@ -152,73 +126,30 @@ const getBaseData = () => {
         baseData.value = res.data || {};
     });
 };
-
-const getTimeIndex = () => {
-    VE_API.farm.getTimeIndex({ farmId: organId.value }).then(({ data }) => {
-        chartDate3.value = formattedDates(data.map((item) => item.date));
-        yData3.value = data.map((item) => parseFloat(item.value.toFixed(3)));
-    });
-};
 </script>
 
 <style lang="scss" scoped>
 .chart-list {
     width: calc(100% - 54px - 10px);
-    height: calc(100%);
+    height: 100%;
     overflow: auto;
     padding: 8px 8px 0 0;
     box-sizing: border-box;
     .chart-item {
         width: 100%;
-        // height: 240px;
         box-sizing: border-box;
         margin-bottom: 10px;
-        height: calc(33% - 10px);
+        height: calc((100% - 277px) / 2);
+        .import {
+            font-size: 12px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            padding: 5px 13px;
+            cursor: pointer;
+        }
         .line-chart {
             width: 100%;
             height: calc(100% - 70px);
-            &.all {
-                height: calc(100% - 10px);
-            }
-        }
-
-        &.weather-item {
-            height: 266px;
-        }
-
-        .base-wrap {
-            width: 100%;
-            height: 56px;
-            margin-top: 4px;
-            display: flex;
-            justify-content: space-evenly;
-            .base-item {
-                width: 110px;
-                height: 100%;
-                font-size: 12px;
-                text-align: center;
-                box-sizing: border-box;
-                color: #f3c11d;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                margin: 0 12px;
-                background: url("@/assets/images/home/scale-bg.png") no-repeat center center / 100% 100%;
-                .label {
-                    width: 85px;
-                    height: 16px;
-                    line-height: 16px;
-                    color: #fff;
-                    background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
-                }
-                .value {
-                    font-size: 18px;
-                    font-family: "PangMenZhengDao";
-                    span {
-                        font-size: 12px;
-                    }
-                }
-            }
         }
 
         .box-bg {

src/views/home/components/leftComponents/leftWeather.vue

@@ -1,10 +1,7 @@
 <template>
     <div class="chart-list">
-        <div class="chart-item weather-item">
-            <chart-box name="气象风险">
-                <!-- <template #title-right>
-                    <div class="button" @click="gybg">果园报告</div>
-                </template> -->
+        <!-- <div class="chart-item weather-item">
+            <chart-box name="干热风险">
                 <div class="base-wrap">
                     <div class="base-item" v-for="(item, index) in baseData.labels" :key="index">
                         <div class="label">{{ item }}风险</div>
@@ -13,29 +10,54 @@
                 </div>
                 <weatherChart class="line-chart"></weatherChart>
             </chart-box>
+        </div> -->
+        <div class="chart-item">
+            <chart-box name="干热风险">
+                <one-line-chart
+                    class="line-chart"
+                    key="tr"
+                    name="阴天寡照"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
+                    :minData="[]"
+                    :chartDate="chartDate1"
+                ></one-line-chart>
+                <div class="box-bg tips">
+                    <div class="text">
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
+                    </div>
+                </div>
+            </chart-box>
         </div>
         <div class="chart-item">
-            <chart-box :name="riskKeys[1]">
-                <template #title-right>
-                  <div class="import">导入</div>
-                </template>
-                <one-line-chart class="line-chart" key="tr" :name="riskKeys[1]" :yData="yData1" :minData="[]" :chartDate="chartDate1"></one-line-chart>
+            <chart-box name="阴天寡照">
+                <one-line-chart
+                    class="line-chart"
+                    key="tr"
+                    name="阴天寡照"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
+                    :minData="[]"
+                    :chartDate="chartDate1"
+                ></one-line-chart>
                 <div class="box-bg tips">
                     <div class="text">
-                        {{ text1 }}
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                     </div>
                 </div>
             </chart-box>
         </div>
         <div class="chart-item">
             <chart-box name="阴雨渍水">
-                <template #title-right>
-                  <div class="import">导入</div>
-                </template>
-                <one-line-chart class="line-chart" :name="riskKeys[0]" :key="1" :yData="yData" :minData="[]" :chartDate="chartDate"></one-line-chart>
+                <one-line-chart
+                    class="line-chart"
+                    name="阴雨渍水"
+                    :key="1"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
+                    :minData="[]"
+                    :chartDate="chartDate"
+                ></one-line-chart>
                 <div class="box-bg tips">
                     <div class="text">
-                        {{ text }}
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
                     </div>
                 </div>
             </chart-box>
@@ -50,79 +72,64 @@ import { onMounted, ref, onUnmounted } from "vue";
 import eventBus from "@/api/eventBus";
 import weatherChart from "../weatherChart.vue";
 
-const riskKeys = ref([])
+const riskKeys = ref([]);
 
 const yData = ref([]);
 const yData1 = ref([]);
-const yData2 = ref([]);
-const yData3 = ref([]);
 
-const chartDate = ref([])
-const chartDate1 = ref([])
-const chartDate2 = ref([])
-const chartDate3 = ref([])
+const chartDate = ref([]);
+const chartDate1 = ref([]);
 
-const text = ref(null)
-const text1 = ref(null)
-const text2 = ref(null)
+const text = ref(null);
+const text1 = ref(null);
 
 const baseData = ref({});
 
-const organId = ref(sessionStorage.getItem('farmId'));
-
-// onMounted(() => {
-//   getList()
-//   getBaseData()
-//   getTimeIndex()
-//   eventBus.on("area:id", changeAreaId);
-// });
-onUnmounted(()=>{
-  eventBus.off("area:id", changeAreaId);
-})
-
-function changeAreaId({farmId}){
-    organId.value = farmId
-    getList()
-    getBaseData()
-    getTimeIndex()
+const organId = ref(sessionStorage.getItem("farmId"));
+
+onMounted(() => {
+    // getList();
+    //   getBaseData()
+    //   eventBus.on("area:id", changeAreaId);
+});
+onUnmounted(() => {
+    eventBus.off("area:id", changeAreaId);
+});
+
+function changeAreaId({ farmId }) {
+    organId.value = farmId;
+    getList();
+    getBaseData();
 }
 
 function getList() {
-    riskKeys.value = []
-    yData.value.value = []
-    yData1.value.value = []
-    yData2.value.value = []
-    chartDate.value.value = []
-    chartDate1.value.value = []
-    chartDate2.value.value = []
-    VE_API.farm.getFarmReport({ farmId: organId.value, type: "气象风险" }).then((res) => {
-        // if (res.data["物候进程"]) {}
-        // 使用 Object.keys() 提取对象中的键
-        riskKeys.value = Object.keys(res.data);
-        yData.value = res.data[riskKeys.value[0]].list.map((item) => parseFloat(item.value.toFixed(1)))
-        yData1.value = res.data[riskKeys.value[1]].list.map((item) => parseFloat(item.value.toFixed(1)))
-        yData2.value = res.data[riskKeys.value[2]].list.map((item) => parseFloat(item.value.toFixed(1)))
-
-        chartDate.value = formattedDates(res.data[riskKeys.value[0]].list.map((item) => item.name))
-        chartDate1.value = formattedDates(res.data[riskKeys.value[1]].list.map((item) => item.name))
-        chartDate2.value = formattedDates(res.data[riskKeys.value[2]].list.map((item) => item.name))
-
-        text.value = res.data[riskKeys.value[0]].text
-        text1.value = res.data[riskKeys.value[1]].text
-        text2.value = res.data[riskKeys.value[2]].text
-    })
+    riskKeys.value = [];
+    yData.value.value = [];
+    yData1.value.value = [];
+    chartDate.value.value = [];
+    chartDate1.value.value = [];
+    // VE_API.farm.getFarmReport({ farmId: organId.value, type: "气象风险" }).then((res) => {
+    //     // if (res.data["物候进程"]) {}
+    //     // 使用 Object.keys() 提取对象中的键
+    //     riskKeys.value = Object.keys(res.data);
+    //     yData.value = res.data[riskKeys.value[0]].list.map((item) => parseFloat(item.value.toFixed(1)))
+    //     yData1.value = res.data[riskKeys.value[1]].list.map((item) => parseFloat(item.value.toFixed(1)))
+
+    //     chartDate.value = formattedDates(res.data[riskKeys.value[0]].list.map((item) => item.name))
+    //     chartDate1.value = formattedDates(res.data[riskKeys.value[1]].list.map((item) => item.name))
+
+    //     text.value = res.data[riskKeys.value[0]].text
+    //     text1.value = res.data[riskKeys.value[1]].text
+    // })
 }
 
-
-
 function formattedDates(dates) {
-      return dates.map(date => {
-        const [year, month, day] = date.split('-');
+    return dates.map((date) => {
+        const [year, month, day] = date.split("-");
         return `${month}-${day}`; // 使用模板字符串格式化为 MM/DD
-      });
+    });
 }
 
-
 const getBaseData = () => {
     const point = sessionStorage.getItem("point");
     // 获取气象图表数据
@@ -130,14 +137,6 @@ const getBaseData = () => {
         baseData.value = res.data || {};
     });
 };
-
-const getTimeIndex = () => {
-  VE_API.farm.getTimeIndex({ farmId: organId.value }).then(({data}) =>{
-      chartDate3.value = formattedDates(data.map((item) => item.date))
-      yData3.value = data.map((item) => parseFloat(item.value.toFixed(3)))
-  })
-}
-
 </script>
 
 <style lang="scss" scoped>
@@ -145,20 +144,19 @@ const getTimeIndex = () => {
     width: calc(100% - 54px - 10px);
     height: 100%;
     overflow: auto;
-    padding: 8px 8px 0;
+    padding: 8px 8px 0 0;
     box-sizing: border-box;
     .chart-item {
         width: 100%;
-        // height: 240px;
         box-sizing: border-box;
         margin-bottom: 10px;
-        height: calc((100% - 276px) / 2 - 10px);
-        .import{
-          font-size: 12px;
-          background: rgba(255, 255, 255, 0.2);
-          border-radius: 4px;
-          padding: 5px 13px;
-          cursor: pointer;
+        height: calc((100% - 277px) / 2);
+        .import {
+            font-size: 12px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            padding: 5px 13px;
+            cursor: pointer;
         }
         .line-chart {
             width: 100%;
@@ -205,7 +203,7 @@ const getTimeIndex = () => {
         }
 
         .box-bg {
-          margin-top: 8px;
+            margin-top: 8px;
             border-radius: 2px 2px 0 0;
             font-size: 12px;
             padding: 3px 6px;

src/views/home/components/leftComponents/weatherPage.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="chart-list">
+        <div class="chart-item">
+            <chart-box name="干热风险">
+                <one-line-chart
+                    class="line-chart"
+                    key="tr"
+                    name="阴天寡照"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
+                    :minData="[]"
+                    :chartDate="chartDate1"
+                ></one-line-chart>
+                <div class="box-bg tips">
+                    <div class="text">
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
+                    </div>
+                </div>
+            </chart-box>
+        </div>
+        <div class="chart-item">
+            <chart-box name="阴天寡照">
+                <one-line-chart
+                    class="line-chart"
+                    key="tr"
+                    name="阴天寡照"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
+                    :minData="[]"
+                    :chartDate="chartDate1"
+                ></one-line-chart>
+                <div class="box-bg tips">
+                    <div class="text">
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
+                    </div>
+                </div>
+            </chart-box>
+        </div>
+        <div class="chart-item">
+            <chart-box name="阴雨渍水">
+                <one-line-chart
+                    class="line-chart"
+                    name="阴雨渍水"
+                    :key="1"
+                    :yData="[22, 20, 22, 30, 32, 22, 25]"
+                    :minData="[]"
+                    :chartDate="chartDate"
+                ></one-line-chart>
+                <div class="box-bg tips">
+                    <div class="text">
+                        这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。这里是预警提示的内容，有点长，先用这些文字占位，后续开发会把内容不上的。
+                    </div>
+                </div>
+            </chart-box>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import chartBox from "@/components/chartBox.vue";
+import oneLineChart from "@/components/charts/oneLineChart.vue";
+import { onMounted, ref, onUnmounted } from "vue";
+import eventBus from "@/api/eventBus";
+import weatherChart from "../weatherChart.vue";
+
+const riskKeys = ref([]);
+
+const yData = ref([]);
+const yData1 = ref([]);
+
+const chartDate = ref([]);
+const chartDate1 = ref([]);
+
+const text = ref(null);
+const text1 = ref(null);
+
+const baseData = ref({});
+
+const organId = ref(sessionStorage.getItem("farmId"));
+
+onMounted(() => {
+    // getList();
+    //   getBaseData()
+    //   eventBus.on("area:id", changeAreaId);
+});
+onUnmounted(() => {
+    eventBus.off("area:id", changeAreaId);
+});
+
+function changeAreaId({ farmId }) {
+    organId.value = farmId;
+    getList();
+    getBaseData();
+}
+
+function getList() {
+    riskKeys.value = [];
+    yData.value.value = [];
+    yData1.value.value = [];
+    chartDate.value.value = [];
+    chartDate1.value.value = [];
+    // VE_API.farm.getFarmReport({ farmId: organId.value, type: "气象风险" }).then((res) => {
+    //     // if (res.data["物候进程"]) {}
+    //     // 使用 Object.keys() 提取对象中的键
+    //     riskKeys.value = Object.keys(res.data);
+    //     yData.value = res.data[riskKeys.value[0]].list.map((item) => parseFloat(item.value.toFixed(1)))
+    //     yData1.value = res.data[riskKeys.value[1]].list.map((item) => parseFloat(item.value.toFixed(1)))
+
+    //     chartDate.value = formattedDates(res.data[riskKeys.value[0]].list.map((item) => item.name))
+    //     chartDate1.value = formattedDates(res.data[riskKeys.value[1]].list.map((item) => item.name))
+
+    //     text.value = res.data[riskKeys.value[0]].text
+    //     text1.value = res.data[riskKeys.value[1]].text
+    // })
+}
+
+function formattedDates(dates) {
+    return dates.map((date) => {
+        const [year, month, day] = date.split("-");
+        return `${month}-${day}`; // 使用模板字符串格式化为 MM/DD
+    });
+}
+
+const getBaseData = () => {
+    const point = sessionStorage.getItem("point");
+    // 获取气象图表数据
+    VE_API.mini_farm.weather_warning_land_check({ farmId: organId.value, point }).then((res) => {
+        baseData.value = res.data || {};
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.chart-list {
+    width: calc(100% - 54px - 10px);
+    height: 100%;
+    overflow: auto;
+    padding: 8px 8px 0 0;
+    box-sizing: border-box;
+    .chart-item {
+        width: 100%;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        height: calc((100% - 277px) / 2);
+        .import {
+            font-size: 12px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 4px;
+            padding: 5px 13px;
+            cursor: pointer;
+        }
+        .line-chart {
+            width: 100%;
+            height: calc(100% - 70px);
+        }
+
+        .box-bg {
+            margin-top: 8px;
+            border-radius: 2px 2px 0 0;
+            font-size: 12px;
+            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;
+                span {
+                    color: rgba(255, 255, 255, 0.4);
+                    line-height: 1.7;
+                }
+            }
+        }
+    }
+}
+</style>

src/views/home/components/weatherPage.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="chart-list">
-    <div class="chart-item">
-      <chart-box name="气象预警1" arrow="left"></chart-box>
-    </div>
-    <div class="chart-item">
-      <chart-box name="物候调节" arrow="left"></chart-box>
-    </div>
-    <div class="chart-item">
-      <chart-box name="病虫测报" arrow="left"></chart-box>
-    </div>
-    <div class="chart-item">
-      <chart-box name="树势评估" arrow="left"></chart-box>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import chartBox from "@/components/chartBox.vue";
-</script>
-
-<style lang="scss" scoped>
-.chart-list {
-  width: calc(100% - 54px - 10px);
-  height: calc(100% - 30px);
-  .chart-item {
-    width: 100%;
-    height: calc(100% / 4);
-    box-sizing: border-box;
-    margin-bottom: 10px;
-  }
-}
-</style>

src/views/home/index.vue

@@ -147,7 +147,6 @@ import toolList from "@/components/toolList.vue";
 import fileBar from "@/components/fileBar.vue";
 import HomeMap from "./map/homeMap";
 import homePage from "./components/homePage.vue";
-import weatherPage from "./components/weatherPage.vue";
 import phenologyPage from "./components/phenologyPage.vue";
 import indicatorChart from "./components/indicatorChart.vue";
 import homeFile from "./components/homeFile.vue";
@@ -166,6 +165,9 @@ import FarmFightTask from "./components/farmFightTask";
 import leftFly from "./components/leftComponents/leftFly.vue";
 import leftWeather from "./components/leftComponents/leftWeather.vue";
 import leftStation from "./components/leftComponents/leftStation.vue";
+import weatherPage from "./components/leftComponents/weatherPage.vue";
+import leftDiseases from "./components/leftComponents/leftDiseases.vue";
+import leftNutrition from "./components/leftComponents/leftNutrition.vue";
 
 const activeBtn = ref(0)
 const leftTool = ref(null)
@@ -197,6 +199,8 @@ const components = {
     homePage,
     weatherPage,
     phenologyPage,
+    leftDiseases,
+    leftNutrition
 };
 //当前农场
 const currentFarm = {
@@ -588,11 +592,11 @@ const leftToolList = [[
         },
         {
             title: "病虫指标",
-            componentName: "rightWeather"
+            componentName: "leftDiseases"
         },
         {
             title: "营养评估",
-            componentName: "rightWeather"
+            componentName: "leftNutrition"
         },
     ]
 ];