增加 计算bmi函数

增加 周/月日期切换组件

package.json

@@ -16,14 +16,15 @@
     "amfe-flexible": "^2.2.1",
     "axios": "^1.3.4",
     "core-js": "^3.23.3",
+    "date-fns": "^3.0.6",
+    "dayjs": "^1.11.7",
+    "echarts": "^5.4.1",
+    "js-base64": "^2.5.2",
     "regenerator-runtime": "^0.13.5",
     "vant": "^2.12.48",
     "vue": "^2.7.8",
     "vue-router": "^3.5.4",
     "vuex": "^3.6.2",
-    "dayjs": "^1.11.7",
-    "echarts": "^5.4.1",
-    "js-base64": "^2.5.2",
     "weixin-js-sdk": "^1.6.0"
   },
   "devDependencies": {

src/components/DateSwitch.vue

@@ -0,0 +1,337 @@
+<!--  -->
+<template>
+  <div class="periodSwitchCop">
+    <div class="arrow arrowLeft">
+      <van-icon name="arrow-left" :color="isPreClick ? '' : '#e6e6e6'" @click="dateClick"></van-icon>
+    </div>
+    <div class="timearea">{{ this.formatDate(date) }}</div>
+    <div class="arrow arrowRight">
+      <van-icon name="arrow" @click="dateClick('add')" :color="count < 0 ? '' : '#e6e6e6'"></van-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import { format } from 'date-fns';
+import { addMonths } from 'date-fns';
+export default {
+  props: {
+    dateType: {
+      type: String,
+      default: 'week'
+    }
+  },
+  data() {
+    return {
+      date: '',
+      detailsDate: '',
+      weekDate: '',
+      monthDate: '',
+      timeStamp: [], //周报的时间一周集合
+      count: 0,
+      isPreClick: true,
+      clickFlag: true, //左右日期按钮是否给予点击
+      // 当前月份，从 0（一月）开始
+      currentMonth: new Date().getMonth(),
+      // 当前年份
+      currentYear: new Date().getFullYear()
+    };
+  },
+  watch: {
+    dateType() {
+      // 切换周月时，count归0,否则月份计算会跟随周切换而不断增加
+      this.count = 0;
+      this.$nextTick(() => {
+        this.initTime(this.dateType);
+      });
+    }
+  },
+  created() {
+    this.initTime(this.dateType);
+  },
+  mounted() {},
+  methods: {
+    // 初始化时间
+    initTime(dateType) {
+      if (this.detailsDate) {
+        this.date = this.detailsDate;
+      } else {
+        this.date = '';
+        this.date = this.$own.getNowFormatDate(0);
+      }
+      switch (dateType) {
+        case 'day':
+          if (this.detailsDate) {
+            this.date = this.checkDate(dateType, this.detailsDate);
+            this.count = this.count - this.clacTimeDif(this.detailsDate);
+          } else {
+            this.date = this.checkDate(dateType, this.$own.getNowFormatDate(this.count));
+          }
+          break;
+        case 'week':
+          this.checkDate(dateType, this.$own.getNowFormatDate(this.count));
+          break;
+        case 'month':
+          this.date = this.checkDate(dateType, this.date);
+          break;
+      }
+      this.$emit('updateDate', this.formatDate(this.date));
+    },
+    onPrevious() {},
+    onNext() {},
+    // 转换时间显示
+    formatDate(timeString) {
+      let date = new Date(timeString);
+      let today = new Date();
+      today.setHours(0);
+      today.setMinutes(0);
+      today.setSeconds(0);
+      let dayTime = 24 * 60 * 60 * 1000;
+      let delta = today - date; // 得到相差的时间 ms
+      if (this.dateType === 'month') {
+        return timeString;
+      } else if (this.dateType === 'day') {
+        if (delta > 0) {
+          if (delta <= dayTime) {
+            return '昨天';
+          } else if (delta <= 2 * dayTime) {
+            return '前天';
+          } else {
+            return timeString;
+          }
+        } else if (-delta < dayTime) {
+          return '今天';
+        } else {
+          return timeString;
+        }
+      } else {
+        return timeString;
+      }
+    },
+    // 判断是今天，昨天还是前天，超过3天则显示时间
+    checkDate(type, timeString, weekAction) {
+      let date = new Date(timeString);
+      let today = new Date();
+      today.setHours(0);
+      today.setMinutes(0);
+      today.setSeconds(0);
+      if (type === 'day') {
+        return timeString;
+      } else if (type === 'week') {
+        // todo 返回对应的时间戳
+        if (weekAction === 'add') {
+          this.nextWeek(date);
+        } else if (weekAction === 'pre') {
+          this.preWeek(date);
+        } else {
+          this.currentWeek(date);
+        }
+      } else if (type === 'month') {
+        let getYear = new Date(date).getFullYear();
+        let getMonth = new Date(date).getMonth() + 1;
+        let monthDate = this.checkMonth(getYear, getMonth);
+        return monthDate;
+      } else {
+        return null;
+      }
+    },
+    // 判断某年某月，并且判断这个月的天数
+    checkMonth(year, getMonth) {
+      this.xAxisData = [];
+      // 获取当前的月份
+      let currentMonth = getMonth;
+      this.selectMonth = '';
+      // 获取当前月的天数
+      if (currentMonth + this.count <= 0) {
+        this.selectYear = year - 1;
+        this.selectMonth = 12 + this.count + 2;
+      } else {
+        this.selectYear = year;
+        this.selectMonth = currentMonth + this.count;
+      }
+      let monthDays = this.getMonthDays(this.selectYear, this.selectMonth, 0);
+      this.xAxisData = [
+        `${this.selectMonth.toString().padStart(2, 0)}/01`,
+        `${this.selectMonth.toString().padStart(2, 0)}/06`,
+        `${this.selectMonth.toString().padStart(2, 0)}/11`,
+        `${this.selectMonth.toString().padStart(2, 0)}/16`,
+        `${this.selectMonth.toString().padStart(2, 0)}/21`,
+        `${this.selectMonth.toString().padStart(2, 0)}/26`,
+        `${this.selectMonth.toString().padStart(2, 0)}/${monthDays}`
+      ];
+      this.monthDate = this.selectYear + '-' + this.selectMonth.toString().padStart(2, 0) + '-01';
+      return this.selectYear + '-' + this.selectMonth.toString().padStart(2, 0);
+    },
+    // 获取年月日时间
+    getDates(data) {
+      let date = new Date(data);
+      let year = date.getFullYear() + '-';
+      let month =
+        (date.getMonth() + 1 + '-').length === 2 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
+      let day = (date.getDate() + '').length === 1 ? '0' + date.getDate() : date.getDate();
+      this.timeStamp.push(year + month + day);
+      return year + month + day;
+    },
+    // 添加时间到一个时间集合里面去
+    addDate(date, n) {
+      date.setDate(date.getDate() + n);
+      return date;
+    },
+    // 上一周
+    preWeek() {
+      this.setDate(this.addDate(this.currentFirstDate, -7));
+      this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
+      this.weekDate = this.timeStamp[0];
+    },
+    // 下一周
+    nextWeek() {
+      this.setDate(this.addDate(this.currentFirstDate, 7));
+      this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
+      this.weekDate = this.timeStamp[0];
+    },
+    // 这周
+    currentWeek(date) {
+      this.setDate(this.addDate(new Date(), -1));
+      this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
+      this.weekDate = new Date(date).Format('yyyy-MM-dd');
+    },
+    // 上一月
+    preMonth() {
+      const newMonth = addMonths(new Date(), this.count);
+      this.currentMonth = newMonth.getMonth();
+      this.currentYear = newMonth.getFullYear();
+      this.date = format(newMonth, 'yyyy-MM');
+    },
+    // 下一月
+    nextMonth() {
+      const newMonth = addMonths(new Date(), this.count);
+      this.currentMonth = newMonth.getMonth();
+      this.currentYear = newMonth.getFullYear();
+      this.date = format(newMonth, 'yyyy-MM');
+    },
+    // 这个月
+    setDate(date) {
+      this.timeStamp = [];
+      let week = date.getDay() - 1;
+      date = this.addDate(date, week * -1);
+      this.currentFirstDate = new Date(date);
+      for (let i = 0; i < 7; i++) {
+        this.getDates(i === 0 ? date : this.addDate(date, 1)); // 星期一开始
+      }
+    },
+    // 判断一周的开始时间和结束时间
+    checkWeekStartAndEndOld(date) {
+      // 今天是星期几 备注 星期日是0 需要特殊处理
+      let weekDay = new Date(date).getDay() <= 0 ? 7 : new Date(date).getDay();
+      // 选中的这个月的日
+      let selectDay = this.$moment(date).date();
+      let year = new Date(date).getFullYear();
+      let month = new Date(date).getMonth() + 1;
+      // 选中的日期减去 当前的日期得到时间差，大于0表示没有跨月，否则跨月
+      let dateDif = selectDay - weekDay + 1;
+      if (dateDif <= 0) {
+        let overYear = new Date(date).getFullYear();
+        let overMonth = new Date(date).getMonth().toString().padStart(2, 0);
+        let overDays = this.getMonthDays(overYear, overMonth, 0).toString.padStart(2, 0);
+        let overDateDif = overDays + selectDay - (weekDay - 1);
+        // 开始时间
+        if (overDays + selectDay + 1 + 6 > overDays) {
+          let startDate = overMonth + '-' + overDateDif.toString().padStart(2, 0);
+          let endDate = overMonth + 1 + '-' + (overDateDif + 6 - overDays);
+          return year + '-' + startDate + '~' + year + '-' + endDate;
+        } else {
+          let startDate = overMonth + '-' + overDateDif.toString().padStart(2, 0);
+          let endDate = overMonth + 1 + '-' + (overDateDif + 6 - overDays);
+          return year + '-' + startDate + '~' + year + '-' + endDate;
+        }
+      } else {
+        // 获取这个月的天数
+        let days = this.getMonthDays(year, month, 0);
+        let startDate = month + '-' + dateDif.toString().padStart(2, 0);
+        if (dateDif + 6 > days) {
+          let endDate = month + 1 + '/' + (dateDif + 6 - days);
+          return year + '-' + startDate + '~' + year + '-' + endDate;
+        } else {
+          let endDate = month + '-' + (dateDif + 6);
+          return year + '-' + startDate + '~' + year + '-' + endDate;
+        }
+      }
+    },
+    // 获取某一个月的天数
+    getMonthDays(year, month, number) {
+      let currentMonth = new Date(year, month, number);
+      let days = currentMonth.getDate();
+      return days;
+    },
+    // 点击左右日期
+    dateClick(type) {
+      if (type == 'add' && this.clickFlag) {
+        // 下一个
+        if (this.count >= 0) {
+          return;
+        }
+        this.count++;
+        if (this.dateType === 'week') {
+          // 如果是周报，则不用返回
+          this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'add');
+        } else {
+          this.nextMonth();
+          /* this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count)); */
+        }
+        this.isPreClick = true;
+        this.$emit('updateDate', this.formatDate(this.date));
+      } else {
+        // 上一个
+        if (this.clickFlag && this.isPreClick) {
+          this.count--;
+          if (this.dateType === 'week') {
+            // 如果是周报，则不用返回
+            this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'pre');
+            this.$emit('updateDate', this.formatDate(this.date));
+          } else if (this.dateType === 'month') {
+            this.preMonth();
+            if (this.count <= -12) {
+              // 目前组件 只显示12个月的数据,如有需要可把-12改变
+              this.isPreClick = false;
+            } else {
+              /* this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count)); */
+            }
+            this.$emit('updateDate', this.formatDate(this.date));
+          } else {
+            if (this.count <= -30) {
+              /* DialogService.confirm({
+                                message: '最多只能查看最近30天的数据',
+                                showCancelButton: false
+                            }) */
+              this.count = -29;
+              this.isPreClick = false;
+            } else {
+              this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count));
+            }
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+.periodSwitchCop {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding: 50px 10px;
+  padding-bottom: 30px;
+
+  .timearea {
+    font-size: 28px;
+    justify-self: center;
+    color: gray;
+  }
+  .arrow {
+    font-size: 45px;
+  }
+}
+</style>

src/filters/filter.js

@@ -35,3 +35,26 @@ function padLeftZero(str) {
 export function hidePhone(phone) {
   return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
 }
+/**
+ *
+ * @param {*} height
+ * @param {*} weight
+ * @returns
+ */
+export function calcBMI(height, weight) {
+  const realHeight = height > 100 ? height / 100 : height;
+  const bmiObj = {};
+  // 计算 BMI 指数
+  const bmi = weight / (realHeight * realHeight);
+  bmiObj.bmi = bmi;
+  if (bmi < 18.5) {
+    bmiObj.result = '体重过轻';
+  } else if (bmi >= 18.5 && bmi < 24.9) {
+    bmiObj.result = '正常体重';
+  } else if (bmi >= 25 && bmi < 29.9) {
+    bmiObj.result = '超重';
+  } else {
+    bmiObj.result = '肥胖';
+  }
+  return bmiObj;
+}

src/filters/index.js

@@ -5,3 +5,4 @@ Object.keys(filter).forEach(k => Vue.filter(k, filter[k]));
 
 Vue.prototype.$formatDate = Vue.filter('formatDate');
 Vue.prototype.$hidePhone = Vue.filter('hidePhone');
+Vue.prototype.$calcBMI = Vue.filter('calcBMI');

src/views/insight/index.vue

@@ -5,7 +5,8 @@
       <div class="periodItem week" :class="{ active: active == 0 }" @click="active = 0">周</div>
       <div class="periodItem month" :class="{ active: active == 1 }" @click="active = 1">月</div>
     </div>
-    <div class="periodSwitch">
+    <DateSwitch :dateType="active == 0 ? 'week' : 'month'" @updateDate="updateDate"></DateSwitch>
+    <!-- <div class="periodSwitch">
       <div class="arrow arrowLeft">
         <van-icon name="arrow-left"></van-icon>
       </div>
@@ -13,7 +14,7 @@
       <div class="arrow arrowRight">
         <van-icon name="arrow"></van-icon>
       </div>
-    </div>
+    </div> -->
     <div class="label">
       <div class="left">情绪感知</div>
       <div class="right">
@@ -150,7 +151,11 @@
 </template>
 
 <script>
+import DateSwitch from '@/components/DateSwitch.vue';
 export default {
+  components: {
+    DateSwitch
+  },
   data() {
     return {
       active: 0,
@@ -243,7 +248,8 @@ export default {
         result: '肥胖'
       },
       upImg: require('@/assets/today/icons/up.png'),
-      downImg: require('@/assets/today/icons/down.png')
+      downImg: require('@/assets/today/icons/down.png'),
+      date: ''
     };
   },
   created() {},
@@ -253,10 +259,12 @@ export default {
   watch: {
     active(val) {
       console.log(val);
-      this.emotionActive = 0;
-      this.signActive = 0;
+      /* this.emotionActive = 0;
+      this.signActive = 0; */
       this.$nextTick(() => {
         this.initData();
+        this.initEmotionChart();
+        this.initSignChart();
       });
     },
     emotionActive(val) {
@@ -306,6 +314,11 @@ export default {
     }
   },
   methods: {
+    updateDate(value) {
+      console.log('组件原始值', value);
+      this.date = this.active == 0 ? value.replace('~', '-') : value;
+      console.log('接口所需要的值', this.date);
+    },
     initData() {
       //初始化图表
       if (!this.emotionChart) {