TelpoH5FrontendWeb/src/views/health/psychological/report/report-entry.vue

<!--
 * @Date: 2023-11-03 09:26:51
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-11-04 10:38:00
 * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report\report-entry.vue
 * @description:
-->
<template>
    <div class="report-main">
        <van-nav-bar title="心理监测" :border="true" :left-arrow="true" @click-left="onNavBack">
            <template #left>
                <van-icon name="arrow-left" size="24" style="padding: 0" />
            </template>
        </van-nav-bar>
        <div class="main">
            <div class="tabs"></div>
            <div class="content">
                <div class="list" v-if="weekList">
                    <div
                        class="item"
                        v-for="(item, index) in weekList"
                        :key="index"
                        @click="onClickItem(item.recordId)"
                    >
                        <div class="left">
                            <img :src="weekImg" alt />
                            <div class="middle">
                                <div class="title">
                                    <span>周报</span>
                                    <p>{{ item.name }}</p>
                                </div>
                                <div class="overall">
                                    <div class="left">
                                        <span>总评</span>
                                        <p>{{ item. summary}}</p>
                                    </div>
                                </div>
                                <!-- <div class="trend">
                                    <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p>
                                </div>-->
                            </div>
                        </div>

                        <div class="right">
                            <img :src="moreImg" alt />
                        </div>
                    </div>
                </div>
                <div class="list no-data" v-else>
                    <img src="../../../../assets/img/no_data_01.png" alt />
                    <p>暂无数据</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { EmotionModel, PsyBaseUrl } from "@/config/models";
import axios from "axios";
export default {
  name:'',
  data(){
   return {
       active: 0,
       tabImgUrl: require("@/assets/img/psychological/statistical_form.png"),
       selectDownImg: require("@/assets/img/psychological/select_down.png"),
       weekImg: require("@/assets/img/psychological/week_report.png"),
       moreImg: require("@/assets/img/psychological/more.png"),
       weekList: [],
       uid: '',
       emoName: '',
   }
  },
  methods: {
    onNavBack() {},
    loadParams() {
        let params = this.$route.query;
            if (params) {
            this.emoName = EmotionModel[params.name].name;
            this.emoType = EmotionModel[params.name].type;
            this.uid = params.uid;
        }
    },
    onClickItem(recordId) {
        this.$router.push({
            name: 'psychologicalReport',
            query: {
                recordId: recordId,
                name: 'depression',
                isShowLeft: true
            }
        })
    },
    getWeekResult() {
        this.$toast.loading('数据加载中');
        let reqUrl = 'https://dbmq.rzliot.com/heart/api/Data/GetWeekResult';
        let reqParams = {
            uid: /* this.uid */'2023101521270090082',
            type: this.emoType
        };
        axios.get(reqUrl, {
            params: { ...reqParams },
           /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
        }).then(res => {
            console.log("res", res);
            const data = res.data.response;
            this.weekList = data.map(item => {
                return {
                    name: item.Name.replace('周报', ''),
                    recordId: item.RecordId,
                    summary: item.Summary,
                    type: this.emoType
                }
            });
            this.$toast.success('数据加载完成');
        })

    }
  },
  mounted() {
    this.loadParams();
    this.getWeekResult();
  }
}
</script>

<style scoped lang="scss">
.report-main {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background-color: #f5f5f5;
    .main {
        height: calc(100vh - 45px);
        overflow: scroll;
        .content {
            position: relative;
            .list {
                .item {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    padding: 34px 15px;
                    background-color: #fff;
                    margin-bottom: 11px;
                    .left {
                        display: flex;
                        justify-content: flex-start;
                        align-items: flex-start;
                        img {
                            height: 25px;
                            width: 25px;
                        }
                        .middle {
                            .title,
                            .overall,
                            .trend {
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                padding-left: 13px;
                                span,
                                p {
                                    font-size: 18px;
                                    font-family: Source Han Sans CN;
                                    font-weight: 400;
                                    color: #8d8d8d;
                                    line-height: 30px;
                                }
                            }
                            .title {
                                span {
                                    padding-right: 20px;
                                }
                                p {
                                    color: #282828;
                                }
                            }
                            .overall {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                width: 100%;
                                .left {
                                    p {
                                        padding-left: 20px;
                                        font-weight: bold;
                                    }
                                }
                                .right {
                                    img {
                                        height: 15px;
                                        width: 9px;
                                    }
                                }
                            }
                            .trend {
                                align-items: flex-start;
                                text-align: left;
                            }
                        }
                    }
                    .right {
                        img {
                            width: 9px;
                            height: 15px;
                        }
                    }
                }
                &.no-data {
                    height: calc(100vh - 45px);
                    width: 100%;
                    @include center();
                    flex-direction: column;
                    img {
                        height: 110px;
                        width: 175px;
                    }
                    p {
                        color: #999;
                        font-size: 12px;
                        padding: 20px 0 65px 0;
                    }
                }
            }
        }
    }
}
</style>