HealthStudentWeb/src/views/today/index.vue

<!-- 今日 -->
<template>
  <div class="today">
    <!-- 今日状态 -->
    <div class="today-status">
      <img class="img" src="@/assets/today/images/2_03.png" />
      <img class="icon" src="@/assets/today/icons/2_12.png" @click="show = true" />
      <div class="status">
        <p>状态优秀</p>
        <ul>
          <li class="toobad"></li>
          <li class="ordinary"></li>
          <li class="sameas"></li>
          <li class="excellent active"></li>
        </ul>
      </div>
      <div class="interpret">
        <p>
          工作学习要有度，适当摸鱼也很好，不用太卷哟！保持张弛 有度的节奏，是应对压力的有效方法。
          综合今日的HRV(MSSD)和静息心率情况看，你今天整体状 态优秀，身体压力状态较小，能很好应对今日工作生活中的
          挑战，请继续保持优秀状态。 相信自己，你一定可以实现你的目标！
        </p>
        <hr />
        <div class="bottom">
          <p>详细解读</p>
          <div>
            <span>日记</span>
            <img src="@/assets/today/icons/2_22.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- 今日情绪感知 -->
    <div class="emotion">
      <div class="title" @click="onRouterTo('emotionDetails')">
        <p>今日情绪感知</p>
        <div>
          <p>4.28</p>
          <van-icon name="arrow" size="18" />
        </div>
      </div>
      <ul>
        <li>
          <h4>40</h4>
          <p>抑郁倾向</p>
          <span>无抑郁倾向</span>
          <time>12:30</time>
        </li>
        <li>
          <h4>55</h4>
          <p>抑郁倾向</p>
          <span>无抑郁倾向</span>
          <time>12:30</time>
        </li>
        <li>
          <h4>75</h4>
          <p>抑郁倾向</p>
          <span>无抑郁倾向</span>
          <time>12:30</time>
        </li>
      </ul>
    </div>
    <!-- 今体征感知 -->
    <div class="perception">
      <div class="title" @click="onRouterTo('signsDetails')">
        <p>今体征感知</p>
        <div>
          <p>4.28</p>
          <van-icon name="arrow" size="18" />
        </div>
      </div>
      <ul>
        <li>
          <h4>36.8</h4>
          <p>体温</p>
        </li>
        <li>
          <h4>92</h4>
          <p>心率</p>
        </li>
        <li>
          <h4>6000</h4>
          <p>步数</p>
        </li>
      </ul>
      <div class="tip">
        <img class="img" src="@/assets/today/icons/2_25.png" />
        <p>
          <span>温馨提示：</span
          >检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。
        </p>
      </div>
    </div>
    <!-- 步数 -->
    <div class="step">
      <div class="main">
        <ul>
          <li>
            <p class="specific"><span>10567</span>/6000步</p>
            <p class="category">步数<span>达标</span></p>
          </li>
          <li>
            <p class="specific"><span>4</span>/5千米</p>
            <p class="category">行程<span>未达标</span></p>
          </li>
          <li>
            <p class="specific"><span>588</span>/600里卡</p>
            <p class="category">消耗<span>达标</span></p>
          </li>
        </ul>
        <div class="annular">
          <van-circle
            v-model="currentRate1"
            size="160px"
            color="#179b3b"
            layer-color="#F8F8F8"
            :rate="90"
            :speed="50"
            :stroke-width="120"
          />
          <van-circle
            v-model="currentRate2"
            size="129px"
            color="#ff5f8b"
            layer-color="#F8F8F8"
            :rate="80"
            :speed="50"
            :stroke-width="140"
          />
          <p>多走4567步</p>
        </div>
      </div>
    </div>
    <!-- 情绪日记 -->
    <div class="diary">
      <div class="title">
        <p>情绪日记</p>
        <div>
          <div>
            <p>保存</p>
            <van-icon name="arrow" size="18" />
          </div>
        </div>
      </div>
      <div class="main">
        <van-checkbox-group v-model="result">
          <van-checkbox name="a" shape="square" checked-color="#179b3b">
            <img src="@/assets/today/icons/2_72.png" />
          </van-checkbox>
          <van-checkbox name="b" shape="square" checked-color="#179b3b">
            <img src="@/assets/today/icons/2_59.png" />
          </van-checkbox>
          <van-checkbox name="c" shape="square" checked-color="#179b3b">
            <img src="@/assets/today/icons/2_54.png" />
          </van-checkbox>
          <van-checkbox name="d" shape="square" checked-color="#179b3b">
            <img src="@/assets/today/icons/2_67.png" />
          </van-checkbox>
          <van-checkbox name="e" shape="square" checked-color="#179b3b">
            <img src="@/assets/today/icons/2_72.png" />
          </van-checkbox>
          <van-checkbox name="f" shape="square" checked-color="#179b3b">
            <img src="@/assets/today/icons/2_70.png" />
          </van-checkbox>
        </van-checkbox-group>
        <div class="textarea">
          <textarea placeholder="我要写亲密日记" rows="5"></textarea>
        </div>
      </div>
    </div>
    <!-- 情绪知识库 -->
    <div class="knowledge">
      <div class="title">
        <p>情绪知识库</p>
      </div>
      <div class="main">
        <ul>
          <li>
            <p>健康同学 测量的 什么压力？ 测量原理是什么？</p>
            <img src="@/assets/today/images/2_42.png" />
          </li>
          <li>
            <p>健康同学 测量的 什么压力？ 测量原理是什么？</p>
            <img src="@/assets/today/images/2_48.png" />
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部导航 -->
    <TabBar />
    <!-- 日期选择 -->
    <van-calendar v-model="show" :show-confirm="false" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar';
import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant';
import APICore from '@/api/core';
export default {
  components: {
    TabBar,
    [Circle.name]: Circle,
    [Calendar.name]: Calendar,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup
  },
  data() {
    return {
      date: '',
      show: false,
      minDate: new Date(2023, 12, 1),
      maxDate: new Date(2023, 12, 18),
      currentRate1: 0,
      currentRate2: 0,
      result: []
    };
  },
  created() {
    this.getAuth();
  },
  mounted() {},
  methods: {
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      console.log(date);
      console.log(this.formatDate(date));
    },
    onRouterTo(name) {
      if (name) {
        this.$router.push({
          name: name,
          query: {
            // 参数默认传疲劳,uid暂时写死，上线通过接口获取
            name: 'tiredness',
            uid: '2023101521270090082'
          }
        });
      }
    },
    //   获取b端token
    getAuth() {
      let manufactorId = '5bf13062-a41e-4d00-ba14-1101aad12650';
      APICore.getAuth({ manufactorId: manufactorId }).then(res => {
        let data = res.data;
        if (data.code === 0) {
          this.$store.commit('ssjlToken', res.data.data);
        }
      });
    }
  }
};
</script>
<style scoped lang="scss">
@import './scss/index.scss';
</style>