feat: 增加果园日志图表

src/views/home/components/indicatorChart.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="card-chart" ref="chartRef"></div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import * as echarts from "echarts";
+import { galleryIndicatorLine } from "./chartSeting";
+import { deepClone } from "@/common/commonFun";
+
+const props = defineProps({
+    indexName: {
+        type: String,
+        default: "",
+    },
+    type: {
+        type: String,
+        default: "",
+    },
+});
+
+let myChart = null;
+const chartRef = ref();
+
+let chartDataArr = ref([
+    { date: "9/1", value: 40 },
+    { date: "9/7", value: 60 },
+    { date: "9/13", value: 63 },
+    { date: "9/19", value: 68 },
+    { date: "9/25", value: 80, feature: true },
+    { date: "10/1", value: 85, feature: true },
+    { date: "10/7", value: 88, feature: true },
+]);
+
+onMounted(() => {
+    myChart = echarts.init(chartRef.value);
+    const options = deepClone(galleryIndicatorLine);
+
+    myChart.setOption(options);
+});
+
+const processData = () => {
+    const today = new Date();
+    const todayString = today.toISOString().split("T")[0]; // 获取今天的日期，格式为YYYY-MM-DD
+    const datePattern = /(\d+)\/(\d+)/; // 日期格式匹配，假设为MM/DD
+
+    props.chartData.forEach((item) => {
+        const match = item.date.match(datePattern);
+        if (match) {
+            const month = parseInt(match[1], 10);
+            const day = parseInt(match[2], 10);
+            const itemDate = new Date(today.getFullYear(), month - 1, day); // 月份从0开始，所以需要减1
+            if (itemDate > today) {
+                item.feature = true;
+            }
+        }
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+.card-chart {
+    padding: 8px 4px 0 4px;
+    width: 100%;
+    height: 170px;
+    box-sizing: border-box;
+}
+</style>

src/views/home/index.vue

@@ -13,7 +13,14 @@
       </div>
       <div class="home-bottom">
         <div class="log-box yes-events">
-          <chart-box name="果园日志"></chart-box>
+          <chart-box name="果园日志">
+            <div class="log-content">
+              10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。
+            </div>
+            <div class="chart-wrap">
+              <indicator-chart></indicator-chart>
+            </div>
+          </chart-box>
         </div>
         <div class="file-box yes-events">
           <chart-box name="果园档案">
@@ -49,6 +56,7 @@ import HomeMap from "./homeMap";
 import homePage from "./components/homePage.vue";
 import weatherPage from "./components/weatherPage.vue";
 import phenologyPage from "./components/phenologyPage.vue";
+import indicatorChart from "./components/indicatorChart.vue";
 import { useRouter } from "vue-router";
 import SamplePointLayer from "./samplePointLayer";
 import {useStore} from "vuex";
@@ -160,9 +168,14 @@ const toFilePage = () => {
       height: 100%;
       align-self: flex-end;
       .log-box {
-        height: 30%;
+        height: 34%;
         width: calc(100% - 340px - 28px);
         margin-right: 28px;
+        .log-content {
+          font-size: 12px;
+          line-height: 1.5;
+          padding: 0 18px;
+        }
       }
 
       .file-box {