!348 打卡情况页面

Merge pull request !348 from 德仔/develop

stdiet-admin/src/main/java/com/stdiet/web/controller/custom/WechatAppletController.java

@@ -472,11 +472,15 @@ public class WechatAppletController extends BaseController {
                 curWxUserInfo.setSex(customerPhysicalSigns.getSex().toString());
                 curWxUserInfo.setHeight(customerPhysicalSigns.getTall());
                 curWxUserInfo.setAge(customerPhysicalSigns.getAge());
+                curWxUserInfo.setStartDate(customerPhysicalSigns.getCreateTime());
+                curWxUserInfo.setWeight(customerPhysicalSigns.getWeight());
             }
         } else {
             curWxUserInfo.setSex(customerHealthy.getSex().toString());
             curWxUserInfo.setHeight(customerHealthy.getTall());
             curWxUserInfo.setAge(Math.toIntExact(customerHealthy.getAge()));
+            curWxUserInfo.setStartDate(customerHealthy.getCreateTime());
+            curWxUserInfo.setWeight(customerHealthy.getWeight());
         }
 
         curWxUserInfo.setCustomerId(AesUtils.encrypt(curWxUserInfo.getCusId().toString()));

stdiet-custom/src/main/java/com/stdiet/custom/domain/SysCustomerPhysicalSigns.java

@@ -5,6 +5,7 @@ import com.fasterxml.jackson.annotation.JsonFormat;
 import com.stdiet.common.annotation.Excel;
 import lombok.Data;
 
+import java.math.BigDecimal;
 import java.util.Date;
 import java.util.List;
 
@@ -62,7 +63,7 @@ public class SysCustomerPhysicalSigns {
      * 客户体重（斤）
      */
     @Excel(name = "客户体重", readConverterExp = "斤=")
-    private Integer weight;
+    private BigDecimal weight;
 
     /**
      * 客户病史体征id

stdiet-custom/src/main/java/com/stdiet/custom/domain/SysWxUserInfo.java

@@ -1,9 +1,11 @@
 package com.stdiet.custom.domain;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.stdiet.common.annotation.Excel;
 import lombok.Data;
 
+import java.math.BigDecimal;
 import java.util.Date;
 
 /**
@@ -28,6 +30,11 @@ public class SysWxUserInfo {
 
     private Integer age;
 
+    @JsonFormat(pattern = "yyyy-MM-dd")
+    private Date startDate;
+
+    private BigDecimal weight;
+
     /**
      * 昵称
      */

stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysCustomerHeatStatisticsServiceImpl.java

@@ -208,7 +208,7 @@ public class SysCustomerHeatStatisticsServiceImpl implements ISysCustomerHeatSta
             sysCustomerHealthy.setName(sysCustomerPhysicalSigns.getName());
             sysCustomerHealthy.setTall(sysCustomerPhysicalSigns.getTall());
             sysCustomerHealthy.setAge(sysCustomerPhysicalSigns.getAge().longValue());
-            sysCustomerHealthy.setWeight(BigDecimal.valueOf(sysCustomerPhysicalSigns.getWeight()));
+            sysCustomerHealthy.setWeight(sysCustomerPhysicalSigns.getWeight());
         }
         return sysCustomerHealthy;
     }

stdiet-ui/package.json

@@ -46,7 +46,7 @@
     "clipboard": "^2.0.6",
     "core-js": "3.6.5",
     "dayjs": "^1.9.1",
-    "echarts": "4.7.0",
+    "echarts": "4.9.0",
     "element-ui": "2.13.2",
     "file-saver": "^2.0.5",
     "fuse.js": "3.4.4",

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

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="chart_style_wrapper"
+    ref="echart"
+    :style="{ height: height, width: width }"
+  />
+</template>
+<script>
+import echarts from "echarts";
+import _ from "lodash";
+require("@/utils/echarts/myShine");
+import resize from "@/views/dashboard/mixins/resize";
+export default {
+  mixins: [resize],
+  name: "CursorChartView",
+  data() {
+    return {
+      chart: undefined,
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+      default: [],
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "30px",
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {},
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.echart, "myShine");
+      this.chart.on("datazoom", _.debounce(this.handleOnChartDatazoom, 200));
+      if (this.data.length > 0) {
+        this.updateChart(this.data);
+      }
+    },
+    updateChart(source) {
+      const option = {
+        yAxis: { show: false },
+        grid: {
+          top: 0,
+          left: 10,
+          right: 10,
+          bottom: 7,
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          inverse: true,
+          nameTextStyle: {
+            color: "#fff",
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            textStyle: {
+              color: "#fff",
+            },
+            formatter: (val) => val.substr(5).replace("-", "/"),
+          },
+          data: source.map((obj) => obj.name),
+        },
+        dataZoom: {
+          type: "slider",
+          show: true,
+          zoomLock: true,
+          startValue: 0,
+          endValue: 6,
+          height: 16,
+          bottom: 6,
+          textStyle: {
+            color: "#fff",
+          },
+          handleStyle: {
+            borderColor: "#fff",
+          },
+        },
+      };
+      // console.log({ option });
+      this.chart.clear();
+
+      this.chart.setOption(option);
+    },
+    handleOnChartDatazoom(params) {
+      window.postMessage({
+        type: "PUNCH_LINE_CHART_MESSAGE_DATAZOOM",
+        end: params.end,
+        keyVal: "cursor",
+        start: params.start,
+      });
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal);
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chart_style_wrapper {
+  background: #4b8aff;
+  position: absolute;
+  top: 48px;
+}
+</style>

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

@@ -6,169 +6,128 @@
     @closed="handleOnClosed"
     size="45%"
   >
-    <div class="app-container punchLog_drawer_wrapper">
+    <div class="punchLog_drawer_wrapper" v-loading="loading">
-      <div class="header">
+      <div v-if="data.length">
-        <section>
+        <CursorChartView :data="getChartData('weight')" />
-          <el-button icon="el-icon-view" size="mini" @click="showPunchLogChart()"
-            >体重趋势图
-          </el-button>
-        </section>
-        <section>
-          <el-button
-            icon="el-icon-refresh"
-            size="mini"
-            @click="getList"
-            circle
-          />
-        </section>
-      </div>
 
-      <el-table :data="punchLogList" v-loading="planLoading" height="80%">
+        <div
-        <el-table-column label="打卡日期" align="center"  prop="logTime"/>
+          class="chart_zone_style"
-        <el-table-column label="体重(斤)" align="center"  prop="weight"/>
+          v-for="chart in chartList"
-        <el-table-column label="饮水量(ml)" align="center"  prop="water"/>
+          :key="chart.keyVal"
-        <el-table-column label="营养师" align="center" prop="nutritionist" />
+        >
-        <el-table-column label="售后" align="center" prop="afterNutritionist" />
+          <LineChartView
-        <el-table-column label="操作" align="center" width="160">
+            v-bind="chart"
-          <template slot-scope="scope">
+            :data="getChartData(chart.keyVal)"
-            <el-button
+            @onClick="handleOnChartClick"
-            size="mini"
+          />
-            type="text"
+        </div>
-            @click="showPunchLogDetail(scope.row)"
+      </div>
-            v-hasPermi="['custom:wxUserLog:query']"
+      <div v-else class="empty_style">暂无打卡记录</div>
-            >详情
-          </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['custom:wxUserLog:edit']"
-            >修改
-          </el-button>
-            <el-button
-              type="text"
-              icon="el-icon-delete"
-              v-hasPermi="['custom:wxUserLog:remove']"
-              @click="handleOnDelete(scope.row)"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
     </div>
     <!-- 详情 -->
     <PunchLogDetail ref="punchLogDetailRef"></PunchLogDetail>
-    <!-- 编辑 -->
-    <PunchLogEdit ref="punchLogEditRef"></PunchLogEdit>
-    <!-- 体重趋势图 -->
-    <PunchLogChart ref="punchLogChartRef"></PunchLogChart>
   </el-drawer>
 </template>
 <script>
-import {
+import { listWxUserLog } from "@/api/custom/wxUserLog";
-  addWxUserLog,
+import { getCustomerPhysicalSignsByCusId } from "@/api/custom/customer";
-  delWxUserLog,
+import LineChartView from "../LineChartView";
-  exportWxUserLog,
+import CursorChartView from "../CursorChartView";
-  getWxUserLog,
+import TextListView from "../TextListView";
-  listWxUserLog,
-  updateWxUserLog,
-} from "@/api/custom/wxUserLog";
 import PunchLogDetail from "@/components/PunchLog/PunchLogDetail";
-import PunchLogEdit from "@/components/PunchLog/PunchLogEdit";
+
-import PunchLogChart from "@/components/PunchLog/PunchLogChart";
-import dayjs from "dayjs";
 export default {
-  name: "CustomerPunchLog",
+  name: "punchLog",
   components: {
-    PunchLogDetail,PunchLogEdit,PunchLogChart
+    LineChartView,
+    TextListView,
+    CursorChartView,
+    PunchLogDetail,
   },
   data() {
     return {
-      open: false,
       visible: false,
       title: "",
-      planLoading: false,
+      loading: false,
-      data: null,
+      userObj: null,
-      punchLogList: [],
+      sex: 0,
-      total: 0,
+      data: [],
-      // 查询参数
+      // prettier-ignore
-      queryParams: {
+      chartList: [
-        pageNum: 1,
+        {},
-        pageSize: 10,
+        { label: "体重", keyVal: "weight", unit: "斤", extra: undefined },
-        customerId: null
+        { label: "饮水量", keyVal: "water", unit: "毫升", extra: undefined },
-      },
+        { label: "入睡时间", keyVal: "sleepTime", unit: undefined, extra: undefined },
+        { label: "起床时间", keyVal: "wakeupTime", unit: undefined, extra: undefined },
+        { label: "熬夜失眠", keyVal: "insomnia", unit: undefined, extra: undefined },
+        { label: "运动锻炼", keyVal: "sport", unit: undefined, extra: undefined },
+        { label: "情绪状况", keyVal: "emotion", unit: undefined, extra: undefined },
+        { label: "排便情况", keyVal: "defecation", unit: undefined, extra: undefined },
+        { label: "按营养餐吃", keyVal: "diet", unit: undefined, extra: undefined },
+      ],
     };
   },
   methods: {
     showDrawer(data) {
-      // console.log(data);
+      if (!data) {
-      this.data = data;
-      if (this.data == undefined || this.data == null) {
         return;
       }
-      this.punchLogList = [];
+
-      this.total = 0;
       this.visible = true;
-      this.title = `「${this.data.name}」打卡记录`;
+      this.userObj = data;
-      this.getList();
+      this.title = `「${this.userObj.name}」打卡情况`;
+
+      this.fetchLogDatas();
     },
-    getList() {
+    handleOnClosed() {
-      this.planLoading = true;
+      this.userObj = undefined;
-      this.queryParams.customerId = this.data.id;
+    },
-      listWxUserLog(this.queryParams).then((response) => {
+    fetchLogDatas() {
-        if(response.code == 200){
+      this.loading = true;
-          this.punchLogList = response.rows;
+      getCustomerPhysicalSignsByCusId(this.userObj.id).then((res) => {
-          this.total = response.total;
+        if (res.data.customerHealthy) {
+          this.sex = res.data.customerHealthy.sex;
+          this.chartList[0] = this.sex
+            ? {
+                label: "生理期",
+                keyVal: "menstrualPeriod",
+                unit: undefined,
+                extra: undefined,
+              }
+            : {};
+          this.chartList[1].extra = `初始体重：${res.data.customerHealthy.weight}斤`;
         }
-        this.planLoading = false;
+        listWxUserLog({
+          customerId: this.userObj.id,
+        }).then((res) => {
+          if (res.code === 200) {
+            this.data = res.rows;
+          }
+          this.loading = false;
+        });
       });
     },
-    reset() {
+    getChartData(key) {
-      
+      return this.data.map((obj) => {
+        let value = obj[key];
+        value === "Y" && (value = "是");
+        value === "N" && (value = "否");
+        return {
+          id: obj.id,
+          name: obj.logTime,
+          value,
+        };
+      });
     },
-    handleOnClosed(){
+    handleOnChartClick(id) {
-      this.data = null
+      // console.log(id);
-    },
+      const tarData = this.data.find((obj) => obj.id === id);
-    showPunchLogDetail(data){
+      tarData &&
-        this.$refs.punchLogDetailRef.showDialog(data);
+        this.$refs.punchLogDetailRef.showDialog({
-    },
+          sex: this.sex,
-    showPunchLogChart(){
+          ...tarData,
-        this.$refs.punchLogChartRef.showDialog(this.data);
-    },
-    handleUpdate(data){
-        this.$refs.punchLogEditRef.showDialog(data, () => {
-          this.getList();
         });
     },
-    /** 删除按钮操作 */
-    handleOnDelete(row) {
-      const ids = row.id;
-      this.$confirm(
-        '是否确定删除该用户' + row.logTime + '的打卡记录?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(function () {
-          return delWxUserLog(ids);
-        })
-        .then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-        .catch(function () {});
-    },
   },
 };
 </script>
@@ -178,13 +137,17 @@ export default {
 }
 
 .punchLog_drawer_wrapper {
+  overflow: auto;
   height: calc(100vh - 77px);
 
-  .header {
+  .chart_zone_style {
-    margin-bottom: 8px;
+    margin: 16px;
-    display: flex;
+    border-radius: 8px;
-    align-items: center;
+    overflow: hidden;
-    justify-content: space-between;
+  }
+
+  .empty_style {
+    text-align: center;
   }
 }
 </style>

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

@@ -0,0 +1,190 @@
+<template>
+  <el-drawer
+    :title="title"
+    :close-on-press-escape="false"
+    :visible.sync="visible"
+    @closed="handleOnClosed"
+    size="45%"
+  >
+    <div class="app-container punchLog_drawer_wrapper">
+      <div class="header">
+        <section>
+          <el-button icon="el-icon-view" size="mini" @click="showPunchLogChart()"
+            >体重趋势图
+          </el-button>
+        </section>
+        <section>
+          <el-button
+            icon="el-icon-refresh"
+            size="mini"
+            @click="getList"
+            circle
+          />
+        </section>
+      </div>
+
+      <el-table :data="punchLogList" v-loading="planLoading" height="80%">
+        <el-table-column label="打卡日期" align="center"  prop="logTime"/>
+        <el-table-column label="体重(斤)" align="center"  prop="weight"/>
+        <el-table-column label="饮水量(ml)" align="center"  prop="water"/>
+        <el-table-column label="营养师" align="center" prop="nutritionist" />
+        <el-table-column label="售后" align="center" prop="afterNutritionist" />
+        <el-table-column label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button
+            size="mini"
+            type="text"
+            @click="showPunchLogDetail(scope.row)"
+            v-hasPermi="['custom:wxUserLog:query']"
+            >详情
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['custom:wxUserLog:edit']"
+            >修改
+          </el-button>
+            <el-button
+              type="text"
+              icon="el-icon-delete"
+              v-hasPermi="['custom:wxUserLog:remove']"
+              @click="handleOnDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    </div>
+    <!-- 详情 -->
+    <PunchLogDetail ref="punchLogDetailRef"></PunchLogDetail>
+    <!-- 编辑 -->
+    <PunchLogEdit ref="punchLogEditRef"></PunchLogEdit>
+    <!-- 体重趋势图 -->
+    <PunchLogChart ref="punchLogChartRef"></PunchLogChart>
+  </el-drawer>
+</template>
+<script>
+import {
+  addWxUserLog,
+  delWxUserLog,
+  exportWxUserLog,
+  getWxUserLog,
+  listWxUserLog,
+  updateWxUserLog,
+} from "@/api/custom/wxUserLog";
+import PunchLogDetail from "@/components/PunchLog/PunchLogDetail";
+import PunchLogEdit from "@/components/PunchLog/PunchLogEdit";
+import PunchLogChart from "@/components/PunchLog/PunchLogChart";
+import dayjs from "dayjs";
+export default {
+  name: "CustomerPunchLog",
+  components: {
+    PunchLogDetail,PunchLogEdit,PunchLogChart
+  },
+  data() {
+    return {
+      open: false,
+      visible: false,
+      title: "",
+      planLoading: false,
+      data: null,
+      punchLogList: [],
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        customerId: null
+      },
+    };
+  },
+  methods: {
+    showDrawer(data) {
+      // console.log(data);
+      this.data = data;
+      if (this.data == undefined || this.data == null) {
+        return;     
+      }
+      this.punchLogList = [];
+      this.total = 0;
+      this.visible = true;
+      this.title = `「${this.data.name}」打卡记录`;
+      this.getList();
+    },
+    getList() {
+      this.planLoading = true;
+      this.queryParams.customerId = this.data.id;
+      listWxUserLog(this.queryParams).then((response) => {
+        if(response.code == 200){
+          this.punchLogList = response.rows;
+          this.total = response.total;
+        }
+        this.planLoading = false;
+      });
+    },
+    reset() {
+      
+    },
+    handleOnClosed(){
+      this.data = null
+    },
+    showPunchLogDetail(data){
+        this.$refs.punchLogDetailRef.showDialog(data);
+    },
+    showPunchLogChart(){
+        this.$refs.punchLogChartRef.showDialog(this.data);
+    },
+    handleUpdate(data){
+        this.$refs.punchLogEditRef.showDialog(data, () => {
+          this.getList();
+        });
+    },
+    /** 删除按钮操作 */
+    handleOnDelete(row) {
+      const ids = row.id;
+      this.$confirm(
+        '是否确定删除该用户' + row.logTime + '的打卡记录?',
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return delWxUserLog(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+        .catch(function () {});
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+
+.punchLog_drawer_wrapper {
+  height: calc(100vh - 77px);
+
+  .header {
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+</style>

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

@@ -0,0 +1,189 @@
+import { iconDict } from "./utils";
+
+function getComOption(title, data) {
+  return {
+    title: {
+      text: title,
+      left: 5,
+      top: 8,
+      textStyle: {
+        color: "#fff"
+      }
+    },
+    textStyle: {
+      // fontFamily: "monospace"
+    },
+    tooltip: {
+      show: true,
+      trigger: "axis",
+      axisPointer: {
+        lineStyle: {
+          type: "dashed"
+        }
+      }
+    },
+    grid: {
+      top: 40,
+      left: 10,
+      right: 20,
+      bottom: 10,
+      containLabel: true
+    },
+    dataZoom: {
+      type: "slider",
+      show: false,
+      zoomLock: true,
+      startValue: 0,
+      endValue: 6,
+      height: 16,
+      bottom: 8,
+      textStyle: {
+        color: "#fff"
+      },
+      handleStyle: {
+        borderColor: "#fff"
+      }
+      // filterMode: 'none',
+    },
+    graphic: [],
+    xAxis: {
+      type: "category",
+      inverse: true,
+      nameTextStyle: {
+        color: "#fff"
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#fff"
+        },
+        formatter: val => val.substr(5).replace("-", "/")
+      },
+      data: data.map(obj => obj.name)
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        textStyle: {
+          color: "#fff"
+        }
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    series: [
+      {
+        type: "line",
+        lineStyle: {
+          color: "#fff"
+        },
+        itemStyle: {
+          color: "#fff"
+        }
+        // data,
+      }
+    ]
+  };
+}
+
+function getOption(type, data, title, unit, extra) {
+  const option = getComOption(title, data);
+  option.tooltip.formatter = params => {
+    const [param] = params;
+    let value = param.data.oriValue;
+    // console.log({ type, value });
+    unit && (value += unit);
+    return [`日期：${param.data.name}`, `${title}：${value}`].join("</br>");
+  };
+
+  if (unit) {
+    option.graphic.push({
+      type: "text",
+      right: 30,
+      top: 16,
+      style: {
+        text: `单位：${unit}`,
+        fill: "#fff"
+      }
+    });
+  }
+  if (extra) {
+    option.graphic.push({
+      type: "text",
+      right: 30,
+      top: 36,
+      style: {
+        text: extra,
+        fill: "#fff"
+      }
+    });
+  }
+  if (type === "water" || type === "weight") {
+    option.yAxis.max = value => Math.floor(value.max * 1.5);
+    option.yAxis.min = value => Math.floor(value.min * 0.5);
+    option.yAxis.splitNumber = 1;
+    option.series[0].data = data.map(obj => ({
+      ...obj,
+      label: { show: true },
+      oriValue: obj.value,
+      formatter: ({ value }) => (type === "water" ? `${value / 1000}升` : value)
+    }));
+  } else if (type === "sleepTime" || type === "wakeupTime") {
+    option.yAxis.max = 24;
+    option.yAxis.min = 0;
+    option.yAxis.minInterval = 6;
+    option.series[0].data = data.map(obj => {
+      const [hour, minute] = obj.value.split(":");
+      return {
+        ...obj,
+        oriValue: obj.value,
+        value: parseInt(hour) + parseFloat(minute) / 60
+      };
+    });
+  } else if (
+    type === "emotion" ||
+    type === "insomnia" ||
+    type === "sport" ||
+    type === "diet" ||
+    type === "defecation" ||
+    type === "menstrualPeriod"
+  ) {
+    const tarObj = iconDict[type];
+    const range = Object.keys(tarObj);
+    option.grid.left = -20;
+
+    // if (type !== 'emotion' && type !== 'defecation') {
+    option.yAxis.axisLabel.formatter = value => {
+      return range[value];
+    };
+    // } else {
+    // option.yAxis.axisLabel.show = false;
+    // }
+
+    option.yAxis.max = range.length - 0.5;
+    option.yAxis.min = -0.5;
+    option.series[0].data = data.map(obj => ({
+      ...obj,
+      value: range.indexOf(obj.value),
+      oriValue: obj.value,
+      symbol: tarObj[obj.value] ? tarObj[obj.value].imgData : "",
+      symbolSize: 20
+    }));
+  }
+
+  return option;
+}
+
+export { getOption };

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

@@ -0,0 +1,143 @@
+<template>
+  <div
+    class="chart_style_wrapper"
+    ref="echart"
+    :style="{ height: height, width: width }"
+  />
+</template>
+<script>
+import echarts from "echarts";
+import _ from "lodash";
+require("@/utils/echarts/myShine");
+import resize from "@/views/dashboard/mixins/resize";
+import { getOption } from "./chartUtils";
+export default {
+  mixins: [resize],
+  name: "LineChartView",
+  data() {
+    return {
+      chart: undefined,
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+      default: [],
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "200px",
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    keyVal: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+    extra: {
+      type: String,
+      default: "",
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+    window.addEventListener("message", this.handleOnMessage);
+  },
+  unmounted() {
+    window.removeEventListener("message", this.handleOnMessage);
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.echart, "myShine");
+      this.chart.on("mouseover", this.handleOnChartMouseover);
+      this.chart.on("mouseout", this.handleOnChartMouseout);
+      this.chart.on("click", this.handleOnChartClick);
+      if (this.data.length > 0) {
+        this.updateChart(this.data);
+      }
+    },
+    updateChart(source) {
+      const option = getOption(this.keyVal, source, this.label, this.unit, this.extra);
+      // console.log({ option });
+      this.chart.clear();
+      this.chart.setOption(option);
+    },
+    handleOnChartClick(params) {
+      // console.log({ params });
+      this.$emit("onClick", params.data.id);
+    },
+    handleOnChartMouseover(params) {
+      window.postMessage({
+        type: "PUNCH_LINE_CHART_MESSAGE_MOUSEOVER",
+        keyVal: this.keyVal,
+        seriesIndex: params.seriesIndex,
+        dataIndex: params.dataIndex,
+      });
+    },
+    handleOnChartMouseout(params) {
+      window.postMessage({
+        type: "PUNCH_LINE_CHART_MESSAGE_MOUSEOUT",
+        keyVal: this.keyVal,
+        seriesIndex: params.seriesIndex,
+        dataIndex: params.dataIndex,
+      });
+    },
+    handleOnMessage({ data = {} }) {
+      if (data.keyVal === this.keyVal) {
+        return;
+      }
+      if (
+        data.type &&
+        (data.type === "PUNCH_LINE_CHART_MESSAGE_MOUSEOVER" ||
+          data.type === "PUNCH_LINE_CHART_MESSAGE_MOUSEOUT")
+      ) {
+        this.chart &&
+          this.chart.dispatchAction({
+            type:
+              data.type === "PUNCH_LINE_CHART_MESSAGE_MOUSEOVER"
+                ? "showTip"
+                : "hideTip",
+            seriesIndex: data.seriesIndex,
+            dataIndex: data.dataIndex,
+          });
+      } else if (
+        data.type &&
+        data.type === "PUNCH_LINE_CHART_MESSAGE_DATAZOOM"
+      ) {
+        this.chart &&
+          this.chart.dispatchAction({
+            type: "dataZoom",
+            end: data.end,
+            start: data.start,
+          });
+      }
+    },
+  },
+  watch: {
+    data(newVal, oldVal) {
+      if (newVal) {
+        this.$nextTick(() => {
+          this.updateChart(newVal);
+        });
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chart_style_wrapper {
+  background: #4b8aff;
+}
+</style>

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

@@ -22,7 +22,7 @@
             >
           </div>
           <h3>一、基础信息</h3>
-          <TableDetailMessage :data="punchLogDetail"></TableDetailMessage>
+          <TableDetailMessage :data="punchLogDetail" :maxLength="10" />
           <h3>二、食物以及对比照信息</h3>
           <div style="height: 370px; overflow: auto">
             <div v-if="punchLog != null && punchLog.ingredientDesc">
@@ -40,6 +40,7 @@
                     title="点击大图预览"
                     :key="'breakfast' + index"
                     class="food_image_first"
+                    fit="cover"
                     :src="item"
                     :preview-src-list="imageUrl"
                   >
@@ -54,6 +55,7 @@
                     title="点击大图预览"
                     :key="'lunch' + index"
                     class="food_image"
+                    fit="cover"
                     :src="item"
                     :preview-src-list="imageUrl"
                   >
@@ -68,6 +70,7 @@
                     title="点击大图预览"
                     :key="'dinner' + index"
                     class="food_image"
+                    fit="cover"
                     :src="item"
                     :preview-src-list="imageUrl"
                   >
@@ -82,12 +85,19 @@
                     title="点击大图预览"
                     :key="'extraMeal' + index"
                     class="food_image"
+                    fit="cover"
                     :src="item"
                     :preview-src-list="imageUrl"
                   >
                   </el-image>
                 </div>
               </div>
+              <div v-if="punchLog != null && punchLog.bodyDesc">
+                <h4>对比照描述</h4>
+                <div>
+                  {{ punchLog.bodyDesc }}
+                </div>
+              </div>
               <div v-if="punchLog.imagesUrl.bodyImages.length > 0">
                 <h4>体型对比照</h4>
                 <div>
@@ -96,6 +106,7 @@
                     title="点击大图预览"
                     :key="index"
                     style="width: 300px; height: 300px"
+                    fit="cover"
                     :src="item"
                     :preview-src-list="imageUrl"
                   >
@@ -167,19 +178,21 @@ export default {
       punchLogDetail: [],
       //打卡详情的标题，按竖显示
       punchTitleData: [
-        ["姓名", "体重(斤)", "饮水量(ml)"],
+        [],
-        ["睡觉时间", "起床时间", "运动锻炼"],
+        ["睡觉时间", "情绪状况", "运动锻炼"],
-        ["情绪", "按食谱进食", "其他食物"],
+        ["起床时间", "情绪描述", "运动描述"],
-        ["熬夜失眠", "起床排便", "是否便秘"],
+        ["排便情况", "按营养餐吃", "食谱外食物"],
-        ["服务建议", "评分", "点评内容"],
+        ["排便描述", "营养餐感受", "熬夜失眠"],
+        ["评分", "点评内容"],
       ],
       //打卡详情的属性名称，与标题对应，按竖显示
       punchValueData: [
-        ["customerName", "weight", "water"],
+        [],
-        ["sleepTime", "wakeupTime", "sport"],
+        ["sleepTime", "emotion", "sport"],
-        ["emotion", "diet", "slyEatFood"],
+        ["wakeupTime", "emotionDesc", "sportDesc"],
-        ["insomnia", "defecation", "constipation"],
+        ["defecation", "diet", "slyEatFood"],
-        ["remark", "executionScore", "comment"],
+        ["defecationDesc", "dietDesc", "insomnia"],
+        ["executionScore", "comment"],
       ],
 
       commentVisible: false,
@@ -212,6 +225,13 @@ export default {
     },
     showDialog(data, callback) {
       this.data = data;
+      if (data.sex) {
+        this.punchTitleData[0] = ["体重(斤)", "饮水量(ml)", "生理期"];
+        this.punchValueData[0] = ["weight", "water", "menstrualPeriod"];
+      } else {
+        this.punchTitleData[0] = ["体重(斤)", "饮水量(ml)"];
+        this.punchValueData[0] = ["weight", "water"];
+      }
       this.callback = callback;
       this.commentFlag = false;
       this.title = `「${data.customerName}` + " " + `${data.logTime}」打卡记录`;
@@ -228,6 +248,9 @@ export default {
           res.data.defecation = res.data.defecation === "Y" ? "是" : "否";
           res.data.constipation = res.data.constipation === "Y" ? "是" : "否";
           res.data.isScore = res.data.executionScore == null ? "否" : "是";
+          res.data.menstrualPeriod =
+            res.data.menstrualPeriod == "N" ? "否" : "是";
+
           this.punchLogDetail = [];
           for (let i = 0; i < this.punchTitleData.length; i++) {
             this.punchLogDetail.push({
@@ -300,13 +323,17 @@ export default {
 
 <style lang="scss" scoped>
 .food_image_first {
-  width: 280px;
+  width: 160px;
-  height: 300px;
+  height: 160px;
+  border-radius: 16px;
+  margin: 8px;
 }
 
 .food_image {
-  width: 280px;
+  width: 160px;
-  height: 300px;
+  height: 160px;
   //margin-left:10px
+  margin: 8px;
+  border-radius: 16px;
 }
 </style>

stdiet-ui/src/components/TableDetailMessage/index.vue

@@ -1,58 +1,79 @@
 <template>
-  <el-table :show-header="false" :data="data" border :cell-style="columnStyle" style="width: 100%;">
+  <el-table
-    <el-table-column width="140" prop="attr_name_one">
+    :show-header="false"
-    </el-table-column>
+    :data="data"
+    border
+    :cell-style="columnStyle"
+    style="width: 100%"
+  >
+    <el-table-column width="100" prop="attr_name_one"> </el-table-column>
     <el-table-column prop="value_one">
       <template slot-scope="scope">
-        <AutoHideMessage :data="scope.row.value_one == null ? '' : (scope.row.value_one+'')" :maxLength="20"/>
+        <AutoHideMessage
+          :data="scope.row.value_one == null ? '' : scope.row.value_one + ''"
+          :maxLength="10"
+        />
       </template>
     </el-table-column>
-    <el-table-column width="140" prop="attr_name_two"></el-table-column>
+    <el-table-column width="100" prop="attr_name_two"></el-table-column>
     <el-table-column prop="value_two">
       <template slot-scope="scope">
-        <AutoHideMessage :data="scope.row.value_two == null ? '' : (scope.row.value_two+'')" :maxLength="20"/>
+        <AutoHideMessage
+          :data="scope.row.value_two == null ? '' : scope.row.value_two + ''"
+          :maxLength="10"
+        />
       </template>
     </el-table-column>
-    <el-table-column width="140" prop="attr_name_three"></el-table-column>
+    <el-table-column width="100" prop="attr_name_three"></el-table-column>
     <el-table-column prop="value_three">
       <template slot-scope="scope">
-        <AutoHideMessage :data="scope.row.value_three == null ? '' : (scope.row.value_three+'')" :maxLength="20"/>
+        <AutoHideMessage
+          :data="
+            scope.row.value_three == null ? '' : scope.row.value_three + ''
+          "
+          :maxLength="10"
+        />
       </template>
     </el-table-column>
   </el-table>
 </template>
 
 <script>
-  import AutoHideMessage from "@/components/AutoHideMessage";
+import AutoHideMessage from "@/components/AutoHideMessage";
-  export default {
+export default {
-    name: "TableDetailMessage",
+  name: "TableDetailMessage",
-    data() {
+  data() {
-      return {
+    return {};
-      };
+  },
+  props: {
+    data: {},
+    maxLength: {
+      type: Number,
+      default: 20,
     },
-    props: {
+  },
-      data: {}
+  computed: {},
-    },
+  components: {
-    computed: {
+    AutoHideMessage,
-
+  },
-    },
+  methods: {
-    components: {
+    // 自定义列背景色
-      AutoHideMessage
+    columnStyle({ row, column, rowIndex, columnIndex }) {
-    },
+      if (
-    methods: {
+        columnIndex == 0 ||
-      // 自定义列背景色
+        columnIndex == 2 ||
-      columnStyle({ row, column, rowIndex, columnIndex }) {
+        columnIndex == 4 ||
-        if (columnIndex == 0 || columnIndex == 2 || columnIndex == 4 || columnIndex == 6) {
+        columnIndex == 6
-          //第三第四列的背景色就改变了2和3都是列数的下标
+      ) {
-          return "background:#f3f6fc;font-weight:bold";
+        //第三第四列的背景色就改变了2和3都是列数的下标
-        }else{
+        return "background:#f3f6fc;font-weight:bold";
-          return "background:#ffffff;";
+      } else {
-        }
+        return "background:#ffffff;";
       }
-    }
+    },
-  };
+  },
+};
 </script>
 
 <style>
-
 </style>

stdiet-ui/src/utils/websocket.js

@@ -21,7 +21,7 @@ function connect() {
       intervalRef && clearInterval(intervalRef);
 
       setInterval(() => {
-        ws.send("ping");
+        ws && ws.send("ping");
       }, 30000);
 
       window.addEventListener("message", handleOnMessageReceive);
@@ -39,7 +39,7 @@ function connect() {
 
     ws.onerror = event => {
       // console.log({ event });
-      ws.close();
+      ws && ws.close();
       ws = undefined;
       window.removeEventListener("message", handleOnMessageReceive);
 
@@ -51,7 +51,7 @@ function connect() {
       ws = undefined;
       window.removeEventListener("message", handleOnMessageReceive);
       // if (event.reason !== "unmount") {
-        // websocketInit();
+      // websocketInit();
       // }
     };
   } catch (error) {