feat:添加病虫测报

src/components/charts/barChart.vue

@@ -7,26 +7,52 @@ import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import { barOption } from "./option/barOption.js";
 
-const props = defineProps ({
+const props = defineProps({
   styleName: {
     type: String,
     default: "styleName1",
   },
+  xData: {
+    type: Array,
+    default: () => [],
+  },
+  yData: {
+    type: Array,
+    default: () => [],
+  },
 });
 
-let chartDom = ref(null);
-let myChart = null;
+const chartDom = ref(null);
+const myChart = ref(null);
 const options = ref(null);
 
 const initData = () => {
-  barOption[props.styleName].xAxis.data = ["正常", "较大", "异常"];
-  barOption[props.styleName].series[0].data = [33, 41, 43];
+  barOption[props.styleName].xAxis.data = props.xData;
+  barOption[props.styleName].series[0].data = props.yData;
   options.value = barOption[props.styleName];
-  myChart.setOption(options.value);
+  myChart.value.setOption(options.value);
 };
 
+// // 窗口大小变化时重置 ECharts 宽高
+// window.addEventListener("resize", () => {
+//   if (chartDom.value.clientWidth) {
+//   console.log("chartDom.value", chartDom.value.clientWidth);
+//     console.log("2222");
+//     // 获取新的容器宽高
+//     const newWidth = chartDom.value.clientWidth;
+//     const newHeight = chartDom.value.clientHeight;
+
+//     // 设置容器的宽高（可选，如果 CSS 已经控制宽度高度，可以跳过这一步）
+//     chartDom.value.style.width = newWidth + "px";
+//     chartDom.value.style.height = newHeight + "px";
+//     console.log('chartDom.value.style.width',chartDom.value.style.width);
+//     // 重置 ECharts 实例的宽高
+//     myChart.value.resize();
+//   }
+// });
+
 onMounted(() => {
-  myChart = echarts.init(chartDom.value);
+  myChart.value = echarts.init(chartDom.value);
   initData();
 });
 </script>

src/components/charts/option/pieOption.js

@@ -0,0 +1,62 @@
+import * as echarts from "echarts";
+
+const styleName1 = {
+  xAxis: {
+    type: "category",
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: "rgba(185,185,185,0.3)",
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: "rgba(255,255,255,0.6)",
+      margin: 5,
+    },
+    data: ["正常", "较大", "异常"],
+  },
+  yAxis: {
+    type: "value",
+    show: false,
+    axisLine: {
+      show: false,
+    },
+  },
+  grid: {
+    top: "0%",
+    left: "-10%",
+    right: "0%",
+    bottom: "0%",
+    containLabel: true,
+  },
+  series: [
+    {
+      data: [32, 40, 42],
+      type: "bar",
+      barWidth: 26,
+      label: {
+        show: true,
+        color: "#fff",
+        position: "insideTop",
+      },
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: "#BBA269",
+          },
+          {
+            offset: 1,
+            color: "#3D3523",
+          },
+        ]),
+        borderRadius: [2, 2, 0, 0],
+      },
+    },
+  ],
+};
+
+export const pieOption = {styleName1};

src/components/charts/pieChart.vue

@@ -0,0 +1,47 @@
+<template>
+  <div ref="chartDom" class="charts"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { pieOption } from "./option/pieOption.js";
+
+const props = defineProps({
+  styleName: {
+    type: String,
+    default: "styleName1",
+  },
+  xData: {
+    type: Array,
+    default: () => [],
+  },
+  yData: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const chartDom = ref(null);
+const myChart = ref(null);
+const options = ref(null);
+
+const initData = () => {
+//   pieOption[props.styleName].xAxis.data = props.xData;
+//   pieOption[props.styleName].series[0].data = props.yData;
+  options.value = pieOption[props.styleName];
+  myChart.value.setOption(options.value);
+};
+
+onMounted(() => {
+  myChart.value = echarts.init(chartDom.value);
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.charts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/home/components/homePage.vue

@@ -6,13 +6,23 @@
     <div class="chart-item">
       <chart-box name="物候调节" arrow="left"></chart-box>
     </div>
-    <div class="chart-item">
-      <chart-box name="病虫测报" arrow="left"></chart-box>
+    <div class="chart-item diseases">
+      <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>
+        <pie-chart class="pie-chart" styleName="styleName1"></pie-chart>
+        <div class="desc box-bg">
+          异常区域中，<span>xx</span> %区域需要 打药，xx %需要 剪枝通风，xx %需要 剪除病枝 。当前分别有 xx %，xx %，xx %的区域尚未执行。
+        </div>
+      </chart-box>
     </div>
     <div class="chart-item evaluate">
       <chart-box name="营养评估" arrow="left">
         <div class="content">
-          <bar-chart styleName="styleName1"></bar-chart>
+          <bar-chart styleName="styleName1" :xData="evaluateXData" :yData="evaluateYData"></bar-chart>
           <div class="box-bg text">
             目前果园跨度异常比例达到<span>**%</span>，需要提供 <span>叶面肥</span>补充营养
           </div>
@@ -32,9 +42,21 @@
 </template>
 
 <script setup>
+import {ref} from 'vue'
 import chartBox from "@/components/chartBox.vue";
 import barChart from "@/components/charts/barChart.vue";
+import pieChart from "@/components/charts/pieChart.vue";
+
+// 病虫测报
+const diseasesBtnGroup = ["病害1","病害2","病害3"]
+const active = ref(0)
+const handleActive = (i) =>{
+  active.value = i
+}
 
+// 营养评估
+const evaluateXData = ["正常", "较大", "异常"]
+const evaluateYData = [33, 41, 43]
 </script>
 
 <style lang="scss" scoped>
@@ -52,6 +74,44 @@ import barChart from "@/components/charts/barChart.vue";
     &.chart-item:last-child {
       margin: 0;
     }
+    .box-bg{
+      border-radius: 2px 2px 0 0;
+      font-size: 12px;
+      padding: 3px 6px;
+      box-sizing: border-box;
+      background: linear-gradient(180deg, rgb(85, 85, 85,0.4) 0%, rgb(35, 35, 35,1) 100%);
+    }
+    &.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;
+      }
+      .desc{
+        width: 100%;
+        height: 57px;
+        text-indent: 2em;
+        letter-spacing: 1px;
+        color: rgba(255,255,255,0.7);
+        span{
+          color: #69BDFF;
+        }
+      }
+    }
     &.evaluate {
       .content {
         width: 100%;
@@ -61,9 +121,7 @@ import barChart from "@/components/charts/barChart.vue";
         justify-content: space-between;
         margin-bottom: 10px;
         .text{
-          color: rgba(255,255,255,0.7);
           font-weight: 400;
-          font-size: 12px;
           padding: 8px 0 4px 5px;
           text-indent: 2em;
           margin-left: 8px;
@@ -72,15 +130,9 @@ import barChart from "@/components/charts/barChart.vue";
           }
         }
       }
-      .box-bg{
-        border-radius: 2px 2px 0 0;
-        background: linear-gradient(180deg, rgb(85, 85, 85,0.4) 0%, rgb(35, 35, 35,1) 100%);
-      }
       .text-list {
         width: 100%;
         height: 68px;
-        padding: 3px 6px;
-        box-sizing: border-box;
         .text-item{
           display: flex;
           align-items: center;