From 333ca11f02cfcce6d99f70c772958c8754e7b4d3 Mon Sep 17 00:00:00 2001
From: jkhhuse <jkhhuse@126.com>
Date: Tue, 21 Dec 2021 18:20:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/density/DisplayDensity.vue        |  1 -
 src/views/density/components/ScaleChart.vue | 63 ++++++++--------
 src/views/density/components/StatsChart.vue | 84 +++++++++++----------
 src/views/density/hooks/useDensity.ts       |  3 +
 src/views/food/Food.vue                     |  4 +-
 5 files changed, 82 insertions(+), 73 deletions(-)

diff --git a/src/views/density/DisplayDensity.vue b/src/views/density/DisplayDensity.vue
index 58d2a6d..409697b 100644
--- a/src/views/density/DisplayDensity.vue
+++ b/src/views/density/DisplayDensity.vue
@@ -13,7 +13,6 @@
       v-model="loading"
       :finished="loadFinished"
       finished-text="没有更多了"
-      @load="onLoad"
     >
       <van-swipe-cell v-for="item in densityList" :key="item.measureTime">
         <van-cell :title="item.measureTime" :title-style="'text-align: left;'" :value="item.measureValue" />
diff --git a/src/views/density/components/ScaleChart.vue b/src/views/density/components/ScaleChart.vue
index a37e91a..adcdbcf 100644
--- a/src/views/density/components/ScaleChart.vue
+++ b/src/views/density/components/ScaleChart.vue
@@ -12,6 +12,7 @@ import F2 from "@antv/f2/lib/index-all";
 import { HttpMessage } from "@/types";
 import { PieType, PieTypeRender } from "@/types/density";
 import { getScaleDensityAction } from "@/action/density";
+import { nextTick } from "vue";
 
 export default defineComponent({
   setup() {
@@ -50,39 +51,41 @@ export default defineComponent({
       () => {
         nullValueCheck(data.value);
         if (!isNullData.value) {
-          const chart = new F2.Chart({
-            id: container.value,
-            height: 200,
-            pixelRatio: window.devicePixelRatio,
-          });
+          nextTick(() => {
+            const chart = new F2.Chart({
+              id: container.value,
+              height: 200,
+              pixelRatio: window.devicePixelRatio,
+            });
 
-          chart.source(data.value);
-          chart.coord("polar", {
-            transposed: true,
-            radius: 0.75,
-          });
-          chart.legend(false);
-          chart.axis(false);
-          chart.tooltip(false);
+            chart.source(data.value);
+            chart.coord("polar", {
+              transposed: true,
+              radius: 0.75,
+            });
+            chart.legend(false);
+            chart.axis(false);
+            chart.tooltip(false);
 
-          // 添加饼图文本
-          chart.pieLabel({
-            sidePadding: 10,
-            lineHeight: 16,
-            label1: function label1(data, color) {
-              return {
-                text: data.name,
-                fill: color,
-              };
-            },
-          });
+            // 添加饼图文本
+            chart.pieLabel({
+              sidePadding: 10,
+              lineHeight: 16,
+              label1: function label1(data, color) {
+                return {
+                  text: data.name,
+                  fill: color,
+                };
+              },
+            });
 
-          chart
-            .interval()
-            .position("const*value")
-            .color("name", ["#3B82F6", "#10B981", "#6366F1", "#F59E0B", "#DC2626"])
-            .adjust("stack");
-          chart.render();
+            chart
+              .interval()
+              .position("const*value")
+              .color("name", ["#3B82F6", "#10B981", "#6366F1", "#F59E0B", "#DC2626"])
+              .adjust("stack");
+            chart.render();
+          });
         }
       },
     );
diff --git a/src/views/density/components/StatsChart.vue b/src/views/density/components/StatsChart.vue
index a6f40d0..d6ef43e 100644
--- a/src/views/density/components/StatsChart.vue
+++ b/src/views/density/components/StatsChart.vue
@@ -1,13 +1,13 @@
 <template>
-  <div v-if="!loading">
+  <div v-show="!loading">
     <canvas v-if="data.length" ref="cLine" />
     <van-empty v-else class="custom-image" description="请添加血值记录" />
   </div>
-  <van-loading v-else type="spinner" class="text-center" />
+  <van-loading v-show="loading" type="spinner" class="text-center" />
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, watch } from "@vue/runtime-core";
+import { defineComponent, ref, onMounted, watch, nextTick } from "@vue/runtime-core";
 import F2 from "@antv/f2/lib/index-all";
 import { getLatestDensityAction } from "@/action/density";
 import { HttpMessage } from "@/types/index";
@@ -39,46 +39,48 @@ export default defineComponent({
     watch(
       () => data.value,
       () => {
-        if (data.value.length) {
-          const chart = new F2.Chart({
-            id: cLine.value,
-            pixelRatio: window.devicePixelRatio,
-          });
+        if (data.value.length > 0) {
+          nextTick(() => {
+            const chart = new F2.Chart({
+              id: cLine.value,
+              pixelRatio: window.devicePixelRatio,
+            });
 
-          chart.source(data.value, {
-            value: {
-              tickCount: 5,
-              min: 0,
-            },
-            date: {
-              type: "timeCat",
-              range: [0, 1],
-              tickCount: 3,
-            },
-          });
-          chart.tooltip({
-            custom: true,
-            showXTip: true,
-            showYTip: true,
-            snap: true,
-            crosshairsType: "xy",
-            crosshairsStyle: {
-              lineDash: [2],
-            },
-          });
-          chart.axis("date", {
-            label: function label(text, index, total) {
-              const textCfg = {} as any;
-              if (index === 0) {
-                textCfg.textAlign = "left";
-              } else if (index === total - 1) {
-                textCfg.textAlign = "right";
-              }
-              return textCfg;
-            },
+            chart.source(data.value, {
+              value: {
+                tickCount: 5,
+                min: 0,
+              },
+              date: {
+                type: "timeCat",
+                range: [0, 1],
+                tickCount: 3,
+              },
+            });
+            chart.tooltip({
+              custom: true,
+              showXTip: true,
+              showYTip: true,
+              snap: true,
+              crosshairsType: "xy",
+              crosshairsStyle: {
+                lineDash: [2],
+              },
+            });
+            chart.axis("date", {
+              label: function label(text, index, total) {
+                const textCfg = {} as any;
+                if (index === 0) {
+                  textCfg.textAlign = "left";
+                } else if (index === total - 1) {
+                  textCfg.textAlign = "right";
+                }
+                return textCfg;
+              },
+            });
+            chart.line().position("date*value");
+            chart.render();
           });
-          chart.line().position("date*value");
-          chart.render();
         }
       },
     );
diff --git a/src/views/density/hooks/useDensity.ts b/src/views/density/hooks/useDensity.ts
index d34daad..b4b621c 100644
--- a/src/views/density/hooks/useDensity.ts
+++ b/src/views/density/hooks/useDensity.ts
@@ -32,6 +32,9 @@ export default function useDensity(): any {
     () => {
       fetchDensityList(limit.value, size.value);
     },
+    {
+      immediate: true,
+    },
   );
 
   return {
diff --git a/src/views/food/Food.vue b/src/views/food/Food.vue
index c3218b9..e05326b 100644
--- a/src/views/food/Food.vue
+++ b/src/views/food/Food.vue
@@ -7,7 +7,9 @@
       <van-icon name="bell" size="18" @click="onClickRight" />
     </template>
   </van-nav-bar>
-  <div>Food</div>
+  <div>
+    <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent, SetupContext } from "@vue/runtime-core";