foster-pc-vue/src/views/home/components/homePage.vue

<template>
  <div class="chart-list">
    <div class="chart-item">
      <chart-box name="气象预警" arrow="left">
        <div class="base-wrap">
          <!-- <div class="base-item">111</div> -->
          <img src="@/assets/images/home/base.png" alt="">
        </div>
        <one-line-chart class="line-chart"></one-line-chart>
      </chart-box>
    </div>
    <div class="chart-item phenology">
      <chart-box name="物候调节" arrow="left">
        <template #title-left>
          <span class="title-left"> - 花芽萌动期</span>
        </template>
        <bar-chart class="bar-chart" styleName="styleName3" :xData="phenologyXData" :yData="phenologyYData"></bar-chart>
        <div class="time-line">
          <!-- <time-line></time-line> -->
          <!-- <div class="line">
            <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
          </div> -->
          <div class="tips box-bg">
            物候进程：预计 <span>12天</span> 后进入花蕾抽出期
          </div>
        </div>
      </chart-box>
    </div>
    <div class="chart-item phenology">
      <chart-box name="病虫测报" arrow="left">
        <!-- <template #title-right>
          <div class="btn-group">
            <div :class="['btn-item',{active:active===index}]" @click="handleActive(index)" v-for="(item,index) in diseasesBtnGroup" :key="index">{{item}}</div>
          </div>
        </template> -->
        <bar-chart class="bar-chart" styleName="styleName2" :xData="phenologyXData1" :yData="phenologyYData1"></bar-chart>
        <div class="time-line">
          <!-- <div class="line">
            <img class="time-img" src="@/assets/images/home/time-line.png" alt="">
          </div> -->
          <div class="tips box-bg">
            所有区域中，<span>6</span> %区域出现毛毡病需要 <span>打药</span>
          </div>
        </div>
        <!-- <pie-chart class="pie-chart" styleName="styleName1"></pie-chart> -->
      </chart-box>
    </div>
    <div class="chart-item evaluate">
      <chart-box name="营养评估" arrow="left">
        <template #title-left>
          <span class="title-left"> - 肥效比</span>
        </template>
        <div class="content">
          <bar-chart styleName="styleName1" :xData="evaluateXData" :yData="evaluateYData"></bar-chart>
          <div class="box-bg text">
            目前果园跨度异常比例达到<span>12%</span>，需要提供 <span>叶面肥</span>补充营养
          </div>
        </div>
        <!-- <div class="text-list box-bg">
          <div class="text-item">
            <div class="circle"></div>
            <div class="txt">
              肥效比 低<span>**棵树</span>
            </div>
          </div>
          <div class="text-item">
            <div class="circle"></div>
            <div class="txt">
              肥效比 中<span>**棵树</span>
            </div>
          </div>
          <div class="text-item">
            <div class="circle"></div>
            <div class="txt">
              肥效比 高<span>**棵树</span>
            </div>
          </div>
        </div> -->
      </chart-box>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import chartBox from "@/components/chartBox.vue";
import timeLine from "@/components/timeLine.vue";
import barChart from "@/components/charts/barChart.vue";
import pieChart from "@/components/charts/pieChart.vue";
import oneLineChart from "@/components/charts/oneLineChart.vue";

// 物候调节
const phenologyXData = ["新梢褪绿", "花芽萌动","花蕾抽出","花穗伸长"]
const phenologyYData = [{
  startNum:0,
  endNum:1,
  startColor:"#c6ab6b",
  endColor:"#4e442e"
},{
  startNum:8,
  endNum:8,
  startColor:"#c6ab6b",
  endColor:"#4e442e"
},{
  startNum:0,
  endNum:16,
  startColor:"#c6ab6b",
  endColor:"#4e442e"
},{
  startNum:0,
  endNum:16,
  startColor:"#c6ab6b",
  endColor:"#4e442e"
}]

// 病虫测报
const diseasesBtnGroup = ["病害1","病害2","病害3"]
const active = ref(0)
const handleActive = (i) =>{
  active.value = i
}
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 evaluateXData = ["低", "中", "高"]
const evaluateYData = [2, 8, 6]
</script>

<style lang="scss" scoped>
.chart-list {
  width: calc(100% - 54px - 10px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .chart-item {
    width: 100%;
    height: calc(100% / 4);
    box-sizing: border-box;
    margin-bottom: 10px;
    &.chart-item:last-child {
      margin: 0;
    }
    .base-wrap{
      width: 100%;
      height: 65px;
      margin: 5px 0;
      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%);
      span{
        color: #FFD489;
      }
    }
    .title-left{
      color: rgba(255,255,255,0.7);
      font-family: 'SOURCEHANTIFINE';
    }
    &.phenology{
      .bar-chart{
        width: 100%;
        height: calc(100% - 44px);
      }
      .time-line{
        width: 100%;
        // height: calc(45px + 10px);
        .line{
          width: 100%;
          height: calc(100% - 34px - 10px);
          margin: 4px 0 6px 0;
          .time-img{
            width: 100%;
            height: 100%;
          }
        }
        .tips{
          margin-top: 10px;
          width: 100%;
          height: 34px;
          line-height: 28px;
        }
      }
    }
    &.diseases{
      .btn-group{
        font-size: 11px;
        display: flex;
        align-items: center;
        .btn-item{
          border-radius: 2px;
          padding: 2px 4px;
          margin-left: 8px;
          cursor: pointer;
          &.active{
            background: #4F4F4F;
          }
        }
      }
      .pie-chart{
        width: 100%;
        height: calc(100% - 57px - 10px);
        margin-bottom: 10px;
      }
    }
    &.evaluate {
      .content {
        width: 100%;
        height: calc(100% - 10px);
        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>