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: calcColor(item.value) }">
                        {{ 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";
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);
    }
  },
  created() {
    this.loadParams();
    this.getHomeData();
  },
  mounted() {
    window.document.title = '心理监测';
  },
  methods: {
    loadParams() {
        let params = this.$route.query;
        if (params) {
            this.uid = params.uid;
            this.routeDate = params.date;
            this.params = params;
            this.$store.commit('ssjlToken', params.accessToken);
        }
    },
    getHomeData() {
        this.$toast.loading('数据加载中');
        console.log("this.$store.getters.ssjlToken", this.$store.getters.ssjlToken);
        let reqUrl = `https://dbmq.rzliot.com/heart/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;
            this.healhtList = [
                // 抑郁
                { value: data.DepScore,  name: '抑郁倾向', class: 'depression', result: data.DepDesc, time: data.DepMeasureTime ? this.$dayjs(data.DepMeasureTime).format('HH:mm'): '', level: data.DepLevel, img: data.DepScore ? this.calcImg(data.DepLevel, 'depression') : ''},
                // 压力
                { value: data.StressScore,  name: '压力', class: 'stress', result: data.StressDesc, time: data.StressMeasureTime ? this.$dayjs(data.StressMeasureTime).format('HH:mm') : '', level: data.StressLevel, img: data.StressScore ? this.calcImg(data.StressLevel, 'stress') : ''},
                // 疲劳
                { value: data.TirScore,  name: '疲劳', class: 'tiredness', result: data.TirDesc, time: data.TirMeasureTime ? this.$dayjs(data.TirMeasureTime).format('HH:mm') : '', level: data.TirLevel, img: data.TirScore ? this.calcImg(data.TirLevel, 'tiredness') : '' },
            ];
            this.$toast.success('数据加载完成');
        }).catch(() =>{}).finally(() => { this.$toast.clear() })

    },
    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}/#/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`);
        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;
    }
  }
}
</script>

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