agriculture-one-map/src/views/home/components/homePage.vue

<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/base1.png" alt="">
        </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>
      </chart-box>
    </div>
    <div class="chart-item phenology">
      <chart-box name="物候指标">
        <template #title-right>
          <tabs :list="phenologyBtnGroup"></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>刚刚露出，占比xx％，分布在2区</span>
          </div>
        </div>
      </chart-box>
    </div>
    <div class="chart-item phenology">
      <chart-box name="病虫测报">
        <template #title-right>
          <tabs :list="diseasesBtnGroup"></tabs>
        </template>
        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
        <div class="tips box-bg">
          <div class="text" v-for="item in 3" :key="item">
            虫害{{item}}：<span>刚刚露出，占比xx％，分布在2区</span>
          </div>
        </div>
      </chart-box>
    </div>
    <div class="chart-item evaluate">
      <chart-box name="生长指标">
        <template #title-right>
          <tabs :list="growList"></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>
        </div>
        <div class="text-list box-bg">
          <div class="text-item" v-for="item in 3" :key="item">
            <div class="circle"></div>
            <div class="txt">肥效比 低  <span>**棵树</span></div>
          </div>
        </div>
      </chart-box>
    </div>
    <div class="chart-item phenology">
      <chart-box name="生态指标">
        <template #title-right>
          <tabs :list="ecologyList"></tabs>
        </template>
        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
        <div class="tips box-bg">
          <div class="text" v-for="item in 3" :key="item">
            通风正常：<span>通风率80-100％，占比xx％</span>
          </div>
        </div>
      </chart-box>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} 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 { useRouter } from "vue-router";
const store = useStore()
const router = useRouter()

onMounted(()=>{
  getReoprt()
})

const reportData = ref([])

// function filterArr(){}

const getReoprt = () =>{
  VE_API.home.farmIndexReport({farmId:766,regionId:2}).then(res =>{
    reportData.value = res.data || []
  })
}

const handlePage = () =>{
  router.push('/variety_map')
}

const btnWrap = [
  ["树高","冠幅"]
]
//选项子项监听事件
eventBus.on('handleTabItem',handleTabItem)
function handleTabItem(e){
  console.log('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 diseasesBtnGroup = ["虫害比例","病害比例"]
const phenologyXData1 = ["炭疽病", "啃食虫害","叶瘿蚊","毛毡病"]
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 ecologyList = ["通风率","清园程度","益草覆盖率"]

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);
    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);
        }
      }
    }
    .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;
      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>