TelpoH5FrontendWeb/src/views/health/psychological-main/index.vue

<template>
  <div class="psychological-main-container">
    <van-nav-bar title="今日情绪" :border="true" @click-left="onNavBack">
      <template #left>
        <div v-show="isShowLeft" class="nav-bar-title">
          <van-icon name="arrow-left" size="23" /><span>返回</span>
        </div>
      </template>
      <template #title>
        <span>今日情绪</span>
      </template>
    </van-nav-bar>
    <div class="main">
      <div class="list">
        <div v-for="(item, index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)">
          <p class="health-value" :style="{ color: calcResultColor(item.level) }">
            {{ item.value || "--" }}
          </p>
          <p class="health-name">
            {{ item.name || "--" }}
          </p>
          <div class="health-result">
            <div :class="['left', item.class]">
              <p class="result">
                {{ item.result || "暂无数据" }}
              </p>
            </div>
            <div class="right">
              <!-- img -->
              <img :src="item.img" alt="" />
            </div>
          </div>

          <div class="health-time">
            <p class="time">{{ item.time || "--" }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { isNotNull } from "@/utils/index";
import { PsyBaseUrl, } from "@/config/models";
import APICore from "@/api/core";
export default {
  name: "psychologicalMain",
  data() {
    return {

      healhtList: [
        /*  { value: 40, name: '抑郁指数', class: 'depression',result: '无抑郁倾向', time: '17:52', img: require('@/assets/img/regardless.png') },
           { value: 55, name: '压力指数', class: 'stress', result: '轻度压力', time: '17:52', img: require('@/assets/img/regardless.png') },
           { value: 75, name: '疲劳指数', class: 'tiredness', result: '中度疲劳指数', time: '17:52', img: require('@/assets/img/moderate.png') }, */
      ],
      uid: "",
      routeDate: "",
      params: {},
    };
  },
  computed: {
    isShowLeft() {
      return isNotNull(this.$route.query.fromUrl);
    },
  },
  mounted() {
    this.loadParams();
    this.$store.commit("tabClick", 0);
    window.document.title = "心理呵护";
  },
  methods: {
    //   获取b端token
    getAuth() {
      let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
      let that = this;
      return new Promise((resolve, reject) => {
        APICore.getAuth({ manufactorId: manufactorId }).then((res) => {
          let data = res.data;
          if (data.code === 0) {
            resolve(res.data.data);
          } else {
            this.$toast.fail(`${data.message}`);
            reject("");
          }
        });
      });
    },
    // 加载路由参数
    async loadParams() {
      let params = this.$route.query;
      if (params) {
        this.uid = params.uid;
        this.routeDate = params.date;
        this.params = params;

        if (params.appType) {
          this.$store.commit("appType", params.appType);
        }
        if (!params.accessToken) {
          let authToken = await this.getAuth();
          this.$store.commit("ssjlToken", authToken);
        } else {
          this.$store.commit("ssjlToken", params.accessToken);
        }
        this.getHomeData();
      }
    },
    // 获取首页数据
    getHomeData() {
      this.$toast.loading("数据加载中");
      let reqUrl = `${PsyBaseUrl}/api/Data/GetHomeData`;
      let reqParams = {
        uid: this.uid,
        date: this.routeDate || this.$dayjs(new Date()).format("YYYY-MM-DD"),
      };
      axios
        .get(reqUrl, {
          params: { ...reqParams },
          headers: { AccessToken: this.$store.getters.ssjlToken },
        })
        .then((res) => {
          console.log("res", res);
          const data = res.data.response;
          if (!data) {
            return this.$toast.fail(res.data.msg);
          }
          this.healhtList = [
            // 2023.12.5 修改菜单顺序
            // 疲劳指数
            {
              value: data.TirScore,
              name: "疲劳指数",
              class: "tiredness",
              result: data.TirDesc,
              time: data.TirMeasureUpdateTime
                ? this.$dayjs(data.TirMeasureUpdateTime).format("HH:mm")
                : "",
              level: data.TirLevel,
              img: data.TirScore
                ? this.calcImg(data.TirLevel, "tiredness")
                : "",
            },
            // 压力指数
            {
              value: data.StressScore,
              name: "压力指数",
              class: "stress",
              result: data.StressDesc,
              time: data.StressMeasureUpdateTime
                ? this.$dayjs(data.StressMeasureUpdateTime).format("HH:mm")
                : "",
              level: data.StressLevel,
              img: data.StressScore
                ? this.calcImg(data.StressLevel, "stress")
                : "",
            },
            // 抑郁指数
            {
              value: data.DepScore,
              name: this.$replaceAll(`抑郁指数`, '抑郁', '忧郁'),
              class: "depression",
              result: this.$replaceAll(data.DepDesc, '抑郁', '忧郁'),
              time: data.DepMeasureUpdateTime
                ? this.$dayjs(data.DepMeasureUpdateTime).format("HH:mm")
                : "",
              level: data.DepLevel,
              img: data.DepScore
                ? this.calcImg(data.DepLevel, "depression")
                : "",
            },
          ];
          this.$toast.success("数据加载完成");
        })
        .catch(() => { })
        .finally(() => { });
    },
    onClick(item) {
      this.params.name = item.class;
      this.$router.replace({
        name: "psychological",
        query: {
          name: item.class,
          uid: this.uid,
          date: this.routeDate,
          ...this.params,
        },
      });
    },
    onNavBack() {
      if (this.isShowLeft) {
        window.location.href = `${this.$route.query.fromUrl}/#/${this.$route.query.fromMenu || "device"
          }`;
      } else {
        this.$router.go(-1);
      }
    },
    // 计算表情
    calcImg(level, name) {
      let imgUrl = "";
      /* imgUrl = require(`@/assets/img/psychological/${name}_${level}.png`); */
      let numLevel = Number(level);
      console.log(`@/assets/img/psychological/${name}_${numLevel}.png`);
      if (numLevel < 0) {
        imgUrl = require(`@/assets/img/psychological/${name}_1.png`);
      } else {
        imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
      }


      /* switch(level) {
            case '0':
                imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
            break;
            case '1':
                imgUrl = require('@/assets/img/regardless.png');
            break;
            case '2':
                imgUrl = require('@/assets/img/moderate.png');
            break;
            case '3':
                imgUrl = require('@/assets/img/moderate.png');
            break;
        } */
      return imgUrl;
    },
    // 计算颜色
    calcColor(value) {
      let color = "";
      if (value <= 40) {
        color = "#62BD48";
      } else if (value > 40 && value <= 65) {
        color = "#FEC350";
      } else if (value > 65 && value <= 80) {
        color = "#F86825";
      } else if (value > 80) {
        color = "#EB1D15";
      } else {
        color = "";
      }
      return color;
    },
    // 计算结果采用哪种颜色
    calcResultColor(value, isCallBackClass) {
      let color = "";
      let className = "";
      switch (Number(value)) {
        case 0:
          color = "#62BD48";
          className = "none";
          break;
        case 1:
          color = "#ffde00";
          className = "mild";
          break;
        case 2:
          color = "#ff8a00";
          className = "moderate";
          break;
        case 3:
          color = "#d70d0d";
          className = "severe";
          break;
      }
      return isCallBackClass ? className : color;
    },
  },
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>