调整打卡记录页面

stdiet-ui/src/components/PunchLog/CustomerPunchLog/index.vue

@@ -10,12 +10,22 @@
       <div v-if="data.length">
         <CursorChartView :data="getChartData('weight')" />
 
+        <el-button
+          icon="el-icon-view"
+          size="mini"
+          class="weigth_trend_button"
+          :style="`left: ${getTextWidth(title) + 30}px`"
+          @click="showPunchLogChart()"
+          >体重趋势图</el-button
+        >
+
         <div
           class="chart_zone_style"
           v-for="chart in chartList"
           :key="chart.keyVal"
         >
           <LineChartView
+            v-if="chart.keyVal"
             v-bind="chart"
             :data="getChartData(chart.keyVal)"
             @onClick="handleOnChartClick"
@@ -26,6 +36,8 @@
     </div>
     <!-- 详情 -->
     <PunchLogDetail ref="punchLogDetailRef"></PunchLogDetail>
+    <!-- 体重趋势图 -->
+    <PunchLogChart ref="punchLogChartRef"></PunchLogChart>
   </el-drawer>
 </template>
 <script>
@@ -34,6 +46,7 @@ import { getCustomerPhysicalSignsByCusId } from "@/api/custom/customer";
 import LineChartView from "../LineChartView";
 import CursorChartView from "../CursorChartView";
 import PunchLogDetail from "@/components/PunchLog/PunchLogDetail";
+import PunchLogChart from "@/components/PunchLog/PunchLogChart";
 
 export default {
   name: "punchLog",
@@ -41,6 +54,7 @@ export default {
     LineChartView,
     CursorChartView,
     PunchLogDetail,
+    PunchLogChart,
   },
   data() {
     return {
@@ -80,6 +94,18 @@ export default {
     handleOnClosed() {
       this.userObj = undefined;
     },
+    showPunchLogChart() {
+      this.$refs.punchLogChartRef.showDialog(this.userObj);
+    },
+    getTextWidth(text) {
+      const canvas = document.createElement("canvas");
+      document.body.appendChild(canvas);
+      const ctx = canvas.getContext("2d");
+      ctx.font = "16px Arial";
+      const { width } = ctx.measureText(text);
+      document.body.removeChild(canvas);
+      return Math.ceil(width);
+    },
     fetchLogDatas() {
       this.loading = true;
       getCustomerPhysicalSignsByCusId(this.userObj.id).then((res) => {
@@ -147,5 +173,10 @@ export default {
   .empty_style {
     text-align: center;
   }
+
+  .weigth_trend_button {
+    position: absolute;
+    top: 16px;
+  }
 }
 </style>

stdiet-ui/src/components/PunchLog/LineChartView/chartUtils.js

@@ -7,7 +7,7 @@ function getComOption(title, data) {
       left: 5,
       top: 8,
       textStyle: {
-        color: "#fff"
+        // color: "#fff"
       }
     },
     textStyle: {
@@ -41,7 +41,7 @@ function getComOption(title, data) {
         color: "#fff"
       },
       handleStyle: {
-        borderColor: "#fff"
+        // borderColor: "#fff"
       }
       // filterMode: 'none',
     },
@@ -50,7 +50,7 @@ function getComOption(title, data) {
       type: "category",
       inverse: true,
       nameTextStyle: {
-        color: "#fff"
+        // color: "#fff"
       },
       axisLine: {
         show: false
@@ -60,7 +60,7 @@ function getComOption(title, data) {
       },
       axisLabel: {
         textStyle: {
-          color: "#fff"
+          // color: "#fff"
         },
         formatter: val => val.substr(5).replace("-", "/")
       },
@@ -73,7 +73,7 @@ function getComOption(title, data) {
       },
       axisLabel: {
         textStyle: {
-          color: "#fff"
+          // color: "#fff"
         }
       },
       axisTick: {
@@ -87,10 +87,10 @@ function getComOption(title, data) {
       {
         type: "line",
         lineStyle: {
-          color: "#fff"
+          color: "#FF6E67"
         },
         itemStyle: {
-          color: "#fff"
+          color: "#333"
         }
         // data,
       }
@@ -115,7 +115,7 @@ function getOption(type, data, title, unit, extra) {
       top: 16,
       style: {
         text: `单位：${unit}`,
-        fill: "#fff"
+        // fill: "#fff"
       }
     });
   }
@@ -126,7 +126,7 @@ function getOption(type, data, title, unit, extra) {
       top: 36,
       style: {
         text: extra,
-        fill: "#fff"
+        // fill: "#fff"
       }
     });
   }

stdiet-ui/src/components/PunchLog/LineChartView/index.vue

@@ -69,7 +69,13 @@ export default {
       }
     },
     updateChart(source) {
-      const option = getOption(this.keyVal, source, this.label, this.unit, this.extra);
+      const option = getOption(
+        this.keyVal,
+        source,
+        this.label,
+        this.unit,
+        this.extra
+      );
       // console.log({ option });
       this.chart.clear();
       this.chart.setOption(option);
@@ -138,6 +144,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .chart_style_wrapper {
-  background: #4b8aff;
+  background: #FFECEC;
 }
 </style>