Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/feiniao-pc-vue

src/components/chartBox.vue

@@ -69,6 +69,8 @@ const handleShrink = () =>{
     position: relative;
     width: 100%;
     height: calc(100% - 38px);
+    padding: 4px 8px;
+    box-sizing: border-box;
     .arrow{
         position: absolute;
         right: -16px;

src/components/charts/barChart.vue

@@ -0,0 +1,39 @@
+<template>
+  <div ref="chartDom" class="charts"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { barOption } from "./option/barOption.js";
+
+const props = defineProps ({
+  styleName: {
+    type: String,
+    default: "styleName1",
+  },
+});
+
+let chartDom = ref(null);
+let myChart = null;
+const options = ref(null);
+
+const initData = () => {
+  barOption[props.styleName].xAxis.data = ["正常", "较大", "异常"];
+  barOption[props.styleName].series[0].data = [33, 41, 43];
+  options.value = barOption[props.styleName];
+  myChart.setOption(options.value);
+};
+
+onMounted(() => {
+  myChart = echarts.init(chartDom.value);
+  initData();
+});
+</script>
+
+<style lang="scss" scoped>
+.charts {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/charts/option/barOption.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 barOption = {styleName1};

src/views/home/components/homePage.vue

@@ -9,25 +9,98 @@
     <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 evaluate">
+      <chart-box name="营养评估" arrow="left">
+        <div class="content">
+          <bar-chart styleName="styleName1"></bar-chart>
+          <div class="box-bg text">
+            目前果园跨度异常比例达到<span>**%</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>，
+              跨度<span>2个物候期</span>
+            </div>
+          </div>
+        </div>
+      </chart-box>
     </div>
   </div>
 </template>
 
 <script setup>
 import chartBox from "@/components/chartBox.vue";
+import barChart from "@/components/charts/barChart.vue";
+
 </script>
 
 <style lang="scss" scoped>
 .chart-list {
   width: calc(100% - 54px - 10px);
-  height: calc(100% - 30px);
+  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;
+    }
+    &.evaluate {
+      .content {
+        width: 100%;
+        height: calc(100% - 68px - 10px);
+        display: flex;
+        align-items: center;
+        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;
+          span{
+            color: #69BDFF;
+          }
+        }
+      }
+      .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;
+          margin-bottom: 5px;
+          .circle{
+            width: 4px;
+            height: 4px;
+            background: rgba(255,255,255,0.44);
+            border-radius: 50%;
+            margin-right: 6px;
+          }
+          .txt{
+            font-size: 12px;
+            span{
+              color: #69BDFF;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>