feat：对接首页气象预警接口和病虫信息

src/api/modules/mini_farm.js

@@ -45,11 +45,10 @@ module.exports = {
         url: config.base_dev_url + "farm/liveStart",
         type: "get",
     },
-    getLiveStart: {
-        url: config.base_dev_url + "farm/liveStart",
+    gardenItemChart: {
+        url: config.base_dev_url + "plugin_weather_warning_record/gardenWarningInfoCharts?key="+config.mini_key,
         type: "get",
     },
-    
     fetchFarmDetail: {
         url: config.base_dev_url + "farm/getById?key="+config.mini_key,
         type: "get",

src/components/charts/oneLineChart.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 { oneLine } from "./options/oneLineOption";
 import { deepClone } from "@/common/commonFun";
@@ -21,18 +21,41 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    minData: {
+        type: Array,
+        default: () => [],
+    },
 });
 
 const chartDom = ref(null);
 const myChart = ref(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]
+
+    options.value = deepClone(oneLine);
+
+    myChart.value.setOption(options.value);
+}
+
 onMounted(() => {
     myChart.value = echarts.init(chartDom.value);
-    const options = deepClone(oneLine);
-
-    myChart.value.setOption(options);
 });
+
+watch(()=>props.yData,(newValue,oldValue) =>{
+    if(newValue){
+        initData();
+    }
+})
 </script>
 
 <style lang="scss" scoped>

src/components/charts/options/oneLineOption.js

@@ -21,12 +21,11 @@ function getCurrentDateAndNextSixDaysMMDD() {
 }
 
 const list = getCurrentDateAndNextSixDaysMMDD();
-const arr = [29, 28, 27, 26, 16, 15, 22]
 
 export const oneLine = {
-    tooltip: {
-        trigger: "axis",
-    },
+    // tooltip: {
+    //     trigger: "axis",
+    // },
     grid: {
         top: 14,
         left: 6,
@@ -44,7 +43,7 @@ export const oneLine = {
             show: false,
         },
         axisLabel: {
-            // interval: 0,
+            // interval: 8,
             rotate: 15,
             margin: 14,
             color: "#9F9F9F",
@@ -60,6 +59,7 @@ export const oneLine = {
     yAxis: [{
         type: 'value',
         offset: 10,
+        interval: 10,
         axisTick: {
             show: false,
         },
@@ -85,7 +85,7 @@ export const oneLine = {
     series: [
         {
             name: "温度",
-            data: arr,
+            data: [],
             type: 'line',
             smooth: true,
             symbol: "none",
@@ -101,61 +101,90 @@ export const oneLine = {
                 ]),
             },
             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',
+                // 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: list[1],
-                        yAxis: arr[1],
+                        value: "10°",
+                        xAxis: list[0],
+                        yAxis: '',
                         symbolOffset: [0, "-50%"],
                         label: {
-                            offset: [0, 15],
+                            offset: [0, -15],
+                            backgroundColor: "#FF7219",
+                            padding: [0, 8, 0, 8],
                             color: "#fff",
-                            height: 20,
+                            height: 18,
                             borderRadius: 10,
                         },
                     },
                     {
                         name: "mark",
-                        xAxis: list[1],
-                        yAxis: arr[1],
+                        xAxis: list[0],
+                        yAxis: '',
                         value: "",
                         label: {
                             backgroundColor: "#fff",
                             borderWidth: 2,
                             borderColor: "rgba(255, 255, 255, 0.5)",
                             borderRadius: 8,
-                            width: 6,
-                            height: 6,
+                            width: 4,
+                            height: 4,
                         },
                     },
+                ]
+            },
+        },
+        {
+            name: "低温",
+            data: [],
+            type: "line",
+            symbol: "none",
+            smooth: true,
+            lineStyle: {
+                color: "#2199F8", // 折线颜色为红色
+                width: 2, // 线条宽度
+            },
+            itemStyle: {
+                color: "#368ACD"
+            },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: "rgba(33, 153, 248, 0.4)" }, // 渐变起始颜色
+                    { offset: 1, color: "rgba(138, 203, 255, 0.02)" }, // 渐变结束颜色
+                ]),
+            },
+            markPoint: {
+                symbolSize: [0, 0],
+                data: [
                     {
                         name: "text",
                         value: "最低",
-                        xAxis: list[5],
-                        yAxis: arr[5],
+                        xAxis: list[0],
+                        yAxis: '',
                         symbolOffset: [0, "-50%"],
                         label: {
                             offset: [0, 15],
                             color: "#fff",
+                            backgroundColor: "#4993e8",
+                            padding: [0, 8, 0, 8],
                             height: 20,
                             borderRadius: 10,
                         },
                     },
                     {
                         name: "mark",
-                        xAxis: list[5],
-                        yAxis: arr[5],
+                        xAxis: list[0],
+                        yAxis: '',
                         value: "",
                         label: {
                             backgroundColor: "#fff",
                             borderWidth: 2,
                             borderColor: "rgba(255, 255, 255, 0.5)",
                             borderRadius: 8,
-                            width: 6,
-                            height: 6,
+                            width: 4,
+                            height: 4,
                         },
                     },
                 ]

src/components/fnHeader.vue

@@ -58,6 +58,8 @@ const props = defineProps({
 const farmVal = ref(sessionStorage.getItem("farmId")*1 || "");
 const toggleFarm = (val) => {
     sessionStorage.setItem("farmId", farmVal.value);
+    const curGarden = options.value.filter(item =>item.organId === val)
+    sessionStorage.setItem("point", curGarden[0].wkt);
     eventBus.emit('garden:organId',val)
     router.push({ name: "Home" });
 };

src/views/home/album/index.vue

@@ -361,7 +361,6 @@ const getFarmLog = () => {
     VE_API.farm.fetchFarmLog({id: areaIdVal.value, farmId: farmId.value}).then(({data,code}) => {
         if(code === 0){
             indicatorChartData.value = data
-            console.log('getFarmLog', data);
             eventBus.emit('chart:updateOption', indicatorChartData.value)
       } else {
         indicatorChartData.value = {}

src/views/home/components/homePage.vue

@@ -1,368 +1,440 @@
 <template>
-  <div class="chart-list">
-    <div class="chart-item">
-      <chart-box name="气象预警">
-        <template #title-right>
-          <div class="button" @click="gybg">果园报告</div>
-        </template>
-        <div class="base-wrap">
-          <!-- <div class="base-item">111</div> -->
-          <img src="@/assets/images/home/base.png" alt="">
+    <div class="chart-list">
+        <div class="chart-item">
+            <chart-box name="气象预警">
+                <template #title-right>
+                    <div class="button" @click="gybg">果园报告</div>
+                </template>
+                <div class="base-wrap">
+                    <div
+                        class="base-item"
+                        v-for="(item, index) in baseData.labels"
+                        :key="index"
+                    >
+                        <div class="label">{{ item }}风险</div>
+                        <div class="value">{{ baseData.valueMaxList[index].toFixed(0)}}<span>%</span></div>
+                    </div>
+                </div>
+                <one-line-chart class="line-chart" :yData="lineYdata" :minData="minData"></one-line-chart>
+            </chart-box>
         </div>
-        <one-line-chart class="line-chart"></one-line-chart>
-      </chart-box>
-    </div>
-    <div class="chart-item phenology">
-      <chart-box name="基本指标">
-        <template #title-right>
-          <tabs :list="btnGroup"></tabs>
-        </template>
-        <!-- <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
-        <div class="tips box-bg">
-          <div class="text" v-for="item in 3" :key="item">
-            桂味：<span>占比30％，分布在2区、5区</span>
-          </div>
-        </div> -->
-        <div class="box-flex">
-          <div class="box-card">
-            <div class="box-desc">当前分区无品种信息，请确权</div>
-            <div class="box-button" @click="handlePage">立即确权</div>
-          </div>
+        <div class="chart-item phenology">
+            <chart-box name="基本指标">
+                <template #title-right>
+                    <tabs :list="btnGroup"></tabs>
+                </template>
+                <!-- <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
+                  <div class="tips box-bg">
+                  <div class="text" v-for="item in 3" :key="item">
+                    桂味：<span>占比30％，分布在2区、5区</span>
+                  </div>
+                </div> -->
+                <div class="box-flex">
+                    <div class="box-card">
+                        <div class="box-desc">当前分区无品种信息，请确权</div>
+                        <div class="box-button" @click="handlePage">立即确权</div>
+                    </div>
+                </div>
+            </chart-box>
         </div>
-      </chart-box>
-    </div>
-    <div class="chart-item phenology">
-      <chart-box name="物候指标">
-        <template #title-right>
-          <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
-        </template>
-        <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,index) in phenologyObj.text" :key="index">
-            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
-          </div>
+        <div class="chart-item phenology">
+            <chart-box name="物候指标">
+                <template #title-right>
+                    <tabs :list="phenologyObj.btnGroup" keyStr="物候指标" :active="activeKey"></tabs>
+                </template>
+                <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, index) in phenologyObj.text" :key="index">
+                        {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
+                    </div>
+                </div>
+            </chart-box>
         </div>
-      </chart-box>
-    </div>
-    <div class="chart-item phenology">
-      <chart-box name="病虫指标">
-        <template #title-right>
-          <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
-        </template>
-        <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,index) in diseasesObj.text" :key="index">
-            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
-          </div>
-        </div>
-      </chart-box>
-    </div>
-    <div class="chart-item evaluate">
-      <chart-box name="生长指标">
-        <template #title-right>
-          <tabs :list="growObj.btnGroup" keyStr="生长指标" :active="activeKey"></tabs>
-        </template>
-        <div class="content">
-          <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 class="chart-item phenology">
+            <chart-box name="病虫指标">
+                <template #title-right>
+                    <tabs :list="diseasesObj.btnGroup" keyStr="病虫指标" :active="activeKey"></tabs>
+                </template>
+                <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, index) in diseasesObj.text" :key="index">
+                        {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
+                    </div>
+                </div>
+            </chart-box>
         </div>
-        <div class="text-list box-bg">
-          <div class="text-item" v-for="(item,index) in growObj.text" :key="index">
-            <div class="circle"></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">
+        <div class="chart-item evaluate">
+            <chart-box name="生长指标">
+                <template #title-right>
+                    <tabs :list="growObj.btnGroup" keyStr="生长指标" :active="activeKey"></tabs>
+                </template>
+                <div class="content">
+                    <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, index) in growObj.text" :key="index">
+                        <div class="circle"></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>
-      </chart-box>
-    </div>
-    <div class="chart-item phenology">
-      <chart-box name="生态指标">
-        <template #title-right>
-          <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
-        </template>
-        <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,index) in ecologyObj.text" :key="index">
-            {{item[0]}}：<span>{{item[1]}}{{item[2]}}，占比{{item[3]}}％</span>
-          </div>
+        <div class="chart-item phenology">
+            <chart-box name="生态指标">
+                <template #title-right>
+                    <tabs :list="ecologyObj.btnGroup" keyStr="生态指标" :active="activeKey"></tabs>
+                </template>
+                <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, index) in ecologyObj.text" :key="index">
+                        {{ item[0] }}：<span>{{ item[1] }}{{ item[2] }}，占比{{ item[3] }}％</span>
+                    </div>
+                </div>
+            </chart-box>
         </div>
-      </chart-box>
     </div>
-  </div>
 </template>
 
 <script setup>
-import {ref,onMounted, onUnmounted} 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";
 import oneLineChart from "@/components/charts/oneLineChart.vue";
 import eventBus from "@/api/eventBus";
-import {useStore} from "vuex";
+import { useStore } from "vuex";
 import { useRouter } from "vue-router";
-const store = useStore()
-const router = useRouter()
+const store = useStore();
+const router = useRouter();
 
-onMounted(()=>{
+const baseData = ref({})
+const minData = ref([])
+const lineYdata = ref([])
 
-  //选项子项监听事件
-  eventBus.on('handleTabItem',handleTabItem)
-  eventBus.on('handleActive',handleActive)
-  eventBus.on('area:id',areaId)
-})
+const getBaseData = () =>{
+  const point = sessionStorage.getItem('point')
+  VE_API.mini_farm.weather_warning_land_check({point}).then(res =>{
+    baseData.value = res.data || {}
+  })
 
-onUnmounted(()=>{
-  eventBus.off('handleTabItem',handleTabItem)
-  eventBus.off('handleActive',handleActive)
-  eventBus.off('area:id',areaId)
-})
+  // 获取气象图表数据
+  VE_API.mini_farm.gardenItemChart({point}).then(res =>{
+    minData.value = res.data.weatherData.map(item =>item.tempMin)
+    lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
+  })
+}
 
-const reportData = ref([])
+onMounted(() => {
+    //选项子项监听事件
+    eventBus.on("handleTabItem", handleTabItem);
+    eventBus.on("handleActive", handleActive);
+    eventBus.on("area:id", areaId);
+});
 
-const curIndex = ref(0)
-const handleActive = ({index,key}) =>{
-  if(index===-1) return
-  curIndex.value = index
-  if(key==='物候指标'){
-    phenologyObj.value = handleData('物候指标')
-  }
-  if(key==='病虫指标'){
-    diseasesObj.value = handleData('病虫指标')
-  }
-  if(key==='生长指标'){
-    growObj.value = handleData('生长指标')
-  }
-  if(key==='生态指标'){
-    ecologyObj.value = handleData('生态指标')
-  }
-}
+onUnmounted(() => {
+    eventBus.off("handleTabItem", handleTabItem);
+    eventBus.off("handleActive", handleActive);
+    eventBus.off("area:id", areaId);
+});
+
+const reportData = ref([]);
 
-function handleData(name){
-  const arr = reportData.value.filter(item =>item.key === name)
-  const source = arr[0].obj
-  if(!source.blueZoneLegendList){
-    source.blueZoneLegendList = source.legendList
-  }
-  let list1 = source.list1[curIndex.value].list
-  let datas = []
-  for(let item of source.blueZoneLegendList[curIndex.value].list){
-    let data = list1.find((i)=>i.key===item.name);
-    if(data){
-      datas.push(data)
-    }else{
-      datas.push({key:item.name,val:0})
+const curIndex = ref(0);
+const handleActive = ({ index, key }) => {
+    if (index === -1) return;
+    curIndex.value = index;
+    if (key === "物候指标") {
+        phenologyObj.value = handleData("物候指标");
     }
-  }
-  const obj = {
-    btnGroup : source.titleList,
-    xData : datas.map(item =>item.key),
-    yData : datas.map(item => item.val.toFixed(0)),
-    text : source.list2[curIndex.value].list,
-    content : source.text,
-  }
-  return obj
-}
+    if (key === "病虫指标") {
+        diseasesObj.value = handleData("病虫指标");
+    }
+    if (key === "生长指标") {
+        growObj.value = handleData("生长指标");
+    }
+    if (key === "生态指标") {
+        ecologyObj.value = handleData("生态指标");
+    }
+};
 
-function areaId({areaId,farmId}){
-  getReoprt(areaId,farmId)
+function handleData(name) {
+    const arr = reportData.value.filter((item) => item.key === name);
+    const source = arr[0].obj;
+    if (!source.blueZoneLegendList) {
+        source.blueZoneLegendList = source.legendList;
+    }
+    let list1 = source.list1[curIndex.value].list;
+    let datas = [];
+    for (let item of source.blueZoneLegendList[curIndex.value].list) {
+        let data = list1.find((i) => i.key === item.name);
+        if (data) {
+            datas.push(data);
+        } else {
+            datas.push({ key: item.name, val: 0 });
+        }
+    }
+    const obj = {
+        btnGroup: source.titleList,
+        xData: datas.map((item) => item.key),
+        yData: datas.map((item) => item.val.toFixed(0)),
+        text: source.list2[curIndex.value].list,
+        content: source.text,
+    };
+    return obj;
 }
 
-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('生态指标')
-  })
+function areaId({ areaId, farmId }) {
+    getReoprt(areaId, farmId);
+    getBaseData()
 }
 
-const handlePage = () =>{
-  router.push('/variety_map')
-}
+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("生态指标");
+    });
+};
+
+const handlePage = () => {
+    router.push("/variety_map");
+};
 
-const activeKey = ref('')
-function handleTabItem(e){
-  activeKey.value = e
+const activeKey = ref("");
+function handleTabItem(e) {
+    activeKey.value = e;
 }
 
 //基本指标
-const btnGroup = ["树高","冠幅"]
+const btnGroup = ["树高", "冠幅"];
 
 // 物候指标
-const phenologyObj = ref({})
+const phenologyObj = ref({});
 
 // 病虫测报
-const diseasesObj = ref({})
-const phenologyYData1 = [{
-  startNum:0,
-  endNum:0,
-  startColor:"#c6ab6b",
-  endColor:"#4e442e"
-}]
+const diseasesObj = ref({});
+const phenologyYData1 = [
+    {
+        startNum: 0,
+        endNum: 0,
+        startColor: "#c6ab6b",
+        endColor: "#4e442e",
+    },
+];
 
 // 生长指标
-const growObj = ref({})
+const growObj = ref({});
 
 //生态指标
-const ecologyObj = ref({})
+const ecologyObj = ref({});
 
-const gybg= ()=>{
-  VE_API.farm_files.last({farmId: 766,key:"pdf_report"}).then(({data})=>{
-    eventBus.emit("homePage:gybg",{filename:data.path,title:"果园报告"})
-  })
-}
+const gybg = () => {
+    VE_API.farm_files.last({ farmId: 766, key: "pdf_report" }).then(({ data }) => {
+        eventBus.emit("homePage:gybg", { filename: data.path, title: "果园报告" });
+    });
+};
 </script>
 
 <style lang="scss" scoped>
 .chart-list {
-  width: calc(100% - 54px - 10px);
-  height: 100%;
-  padding: 8px 8px 8px 0;
-  box-sizing: border-box;
-  position: relative;
-  overflow-y: auto;
-
-  .chart-item {
-    width: 100%;
-    height: calc(100% / 4.15);
+    width: calc(100% - 54px - 10px);
+    height: 100%;
+    padding: 8px 8px 8px 0;
     box-sizing: border-box;
-    margin-bottom: 10px;
-    .box-flex{
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .box-card{
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 5px;
-        width: 292px;
-        height: 92px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        .box-desc{
-          font-size: 16px;
-          font-family: "PangMenZhengDao";
-          margin-bottom: 8px;
+    position: relative;
+    overflow-y: auto;
+
+    .chart-item {
+        width: 100%;
+        height: calc(100% / 4.15);
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        .box-flex {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .box-card {
+                background: rgba(255, 255, 255, 0.1);
+                border-radius: 5px;
+                width: 292px;
+                height: 92px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                .box-desc {
+                    font-size: 16px;
+                    font-family: "PangMenZhengDao";
+                    margin-bottom: 8px;
+                }
+                .box-button {
+                    font-size: 13px;
+                    border-radius: 20px;
+                    padding: 3px 27px;
+                    cursor: pointer;
+                    border: 1px solid rgba(255, 255, 255, 0.45);
+                    background: linear-gradient(180deg, #ffd887, #ed9e1e);
+                }
+            }
         }
-        .box-button{
-          font-size: 13px;
-          border-radius: 20px;
-          padding: 3px 27px;
-          cursor: pointer;
-          border: 1px solid rgba(255, 255, 255, 0.45);
-          background: linear-gradient(180deg,#FFD887,#ED9E1E);
+        .button {
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            border-radius: 4px;
+            padding: 2px 10px;
+            cursor: pointer;
         }
-      }
-    }
-    .button{
-      border: 1px solid rgba(255, 255, 255, 0.4);
-      border-radius: 4px;
-      padding: 2px 10px;
-      cursor: pointer;
-    }
-    &.chart-item:last-child {
-      margin: 0;
-    }
-    .base-wrap{
-      width: 100%;
-      height: 65px;
-      margin-top: 4px;
-      img{
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .line-chart{
-      height: calc(100% - 55px);
-    }
-    .box-bg{
-      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;
-        padding-left: 10px;
-        &::before{
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 8px;
-          width: 3px;
-          height: 3px;
-          border-radius: 50%;
-          background: #fff;
+        &.chart-item:last-child {
+            margin: 0;
         }
-        span{
-          color: rgba(255, 255, 255,0.4);
-          line-height: 1.7;
+        .base-wrap {
+            width: 100%;
+            height: 70px;
+            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: 20px;
+                    line-height: 20px;
+                    color: #fff;
+                    background: url("@/assets/images/home/label-bg.png") no-repeat center center / 100% 100%;
+                }
+                .value {
+                    font-size: 19px;
+                    font-family: "PangMenZhengDao";
+                    span{
+                      font-size: 12px;
+                    }
+                }
+            }
         }
-      }
-    }
-    &.phenology{
-      .bar-chart{
-        width: 100%;
-        height: calc(100% - 75px);
-      }
-      .tips{
-        margin-top: 10px;
-        width: 100%;
-        height: 65px;
-      }
-    }
-    &.evaluate {
-      .content {
-        width: 100%;
-        height: calc(100% - 10px - 33px);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 10px;
-        .text{
-          font-weight: 400;
-          padding: 8px 0 4px 5px;
-          text-indent: 2em;
-          margin-left: 8px;
-          span{
-            color: #FFD489;
-          }
+        .line-chart {
+          height: calc(100% - 65px);
         }
-      }
-      .text-list {
-        width: 100%;
-        height: 33px;
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        .text-item{
-          display: flex;
-          align-items: center;
-
-          .circle{
-            width: 4px;
-            height: 4px;
-            background: rgba(255,255,255,0.44);
-            border-radius: 50%;
-            margin-right: 6px;
-          }
-          .txt{
+        .box-bg {
+            border-radius: 2px 2px 0 0;
             font-size: 12px;
-            span{
-              color: #FFD489;
+            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;
+                padding-left: 10px;
+                &::before {
+                    content: "";
+                    position: absolute;
+                    left: 0;
+                    top: 8px;
+                    width: 3px;
+                    height: 3px;
+                    border-radius: 50%;
+                    background: #fff;
+                }
+                span {
+                    color: rgba(255, 255, 255, 0.4);
+                    line-height: 1.7;
+                }
+            }
+        }
+        &.phenology {
+            .bar-chart {
+                width: 100%;
+                height: calc(100% - 75px);
+            }
+            .tips {
+                margin-top: 10px;
+                width: 100%;
+                height: 65px;
+            }
+        }
+        &.evaluate {
+            .content {
+                width: 100%;
+                height: calc(100% - 10px - 33px);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-bottom: 10px;
+                .text {
+                    font-weight: 400;
+                    padding: 8px 0 4px 5px;
+                    text-indent: 2em;
+                    margin-left: 8px;
+                    span {
+                        color: #ffd489;
+                    }
+                }
+            }
+            .text-list {
+                width: 100%;
+                height: 33px;
+                display: flex;
+                align-items: flex-start;
+                justify-content: space-between;
+                .text-item {
+                    display: flex;
+                    align-items: center;
+
+                    .circle {
+                        width: 4px;
+                        height: 4px;
+                        background: rgba(255, 255, 255, 0.44);
+                        border-radius: 50%;
+                        margin-right: 6px;
+                    }
+                    .txt {
+                        font-size: 12px;
+                        span {
+                            color: #ffd489;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 </style>