TelpoH5FrontendWeb/src/views/health/psychological/report/index.vue

<!--
 * @Date: 2023-10-30 11:30:22
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-11-07 09:23:17
 * @FilePath: \TelpoH5FrontendWeb\src\views\health\psychological\report\index.vue
 * @description:
-->
<template>
    <!-- 周/月报 -->
    <div class="report">
        <van-nav-bar title="心理监测周报" :border="true" @click-left="onNavBack">
            <template #left >
                <van-icon name="arrow-left" size="24" style="padding: 0" v-show="params.isShowLeft"/>
            </template>
        </van-nav-bar>
        <div class="main">
            <!-- 总评 -->
            <div class="overall-rating">
                <div class="con">
                    <p class="space-between">
                        <span class="bold">本周总评</span>
                        <span class="time">{{ resetDate(weekResult.StartDate,weekResult.EndDate) || '--' }}</span>
                    </p>
                    <p
                        class="bold-pro"
                        :style="{color: calcResultColor(weekResult.SummaryLevel) || '--'}"
                    >{{ weekResult.Summary }}</p>
                    <p class="normal">监测次数: {{ weekResult.Total || '--'}}次</p>
                    <p class="normal">{{ weekResult.Explain || '--' }}</p>
                </div>
            </div>
            <div class="line"></div>
            <div class="pie-chart-top">
                <p class="bold">上周趋势对比</p>
                <p>{{ resetDate(weekResult.StartDate,weekResult.EndDate) || '--' }}</p>
            </div>
            <div class="count">
                <p>监测次数：{{ weekResult.Total || '--' }}次</p>
            </div>
            <!-- 趋势对比-饼状图 -->
            <div class="pie-chart-con">
                <div class="pie-chart-left">
                    <div id="pieChart" ref="pieChart"></div>
                </div>

                <div class="pie-chart-right">
                    <div class="list">
                        <div class="item" v-for="(item, index) in pieRightList" :key="index">
                            <div class="item-left">
                                <div class="circle" :style="{backgroundColor: item.color}"></div>
                                <span class="text">{{ item.text || '--' }}</span>
                            </div>

                            <div class="item-right">
                                <span
                                    :style="{color: item.color}"
                                >{{ item.count ? item.count + '次' : '0次'}}</span>
                                <label
                                    :style="{color: item.color}"
                                >{{ item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="statistics">
                <div class="list">
                    <div class="item" v-for="(item, index) in statisticsList" :key="index">
                        <div class="top">
                            <span>{{ item.label || '--' }}</span>
                        </div>

                        <div class="middle">
                            <span :style="{ color: calcColor(item.value)}">{{ item.value || '--' }}</span>
                        </div>

                        <div class="bottom">
                            <span>{{ item.time || '--' }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <!-- 数据图-柱形图 -->
            <div class="bar-chart">
                <div class="echart" ref="charts"></div>
            </div>
            <div class="line"></div>
            <!-- 建议 -->
            <div class="advice">
                <div class="content">
                    <p class="title">健康建议</p>
                    <p>{{ weekResult.Advice || '--' }}</p>
                </div>
            </div>
            <!-- 概览 -->
            <div class="overview">
                <div class="content">
                    <div class="title">
                        <span class="title-text">{{ surveyTitle }}</span>
                        <div class="mood-list">
                            <div class="item" v-for="(item, index) in emotionList" :key="index">
                                <p>
                                    <span :style="{color: item.color}" class="day">{{ item.days }}</span>
                                    <span class="day-text">天</span>
                                </p>
                                <p>{{ item.text }}</p>
                            </div>
                        </div>
                        <!-- <div class="mood-list-no-data" v-else>
                            <div class="no-data">
                                <img src="../../../../assets/img/no_data_01.png" alt />
                                <p>暂无数据</p>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="main no-data">
            <img src="../../../../assets/img/no_data_01.png" alt />
            <p>暂无数据</p>
        </div>
    </div>
</template>

<script>
import { EmotionModel, PsyBaseUrl } from "@/config/models";
import { isNotNull} from "@/utils/index";
import axios from "axios";
import APICore from "@/api/core";
export default {
  name:'',
  data(){
   return {
       pieRightList: [
          /*  {
                    text: "无情绪倾向",
                    count: 12,
                    percentage: "80",
                    color: "#62BD48"
                },
                {
                    text: "轻度情绪倾向",
                    count: 2,
                    percentage: "80",
                    color: "#ffde00"
                },
                {
                    text: "中度情绪倾向",
                    count: 1,
                    percentage: "80",
                    color: "#ff8a00"
                },
                {
                    text: "重度情绪倾向",
                    count: 1,
                    percentage: "80",
                    color: "#d70d0d"
                } */
       ],
       statisticsList: [
           /*  { label: "最大值", value: "75", time: "08:15" },
                { label: "最小值", value: "40", time: "10:15" },
                { label: "最近值", value: "50", time: "18:15" } */
       ],
       emotionList: [],
       surveyTitle: '本周概览',
       echarts: null,
       // 路由传过来的情绪参数
       emoName: '',
       pieData: [],
       xAxisData: [],
       pieEcharts: null,
       monitoringCount: '',
       // 7天和30天最大数据列表
       weekAndMonData: [],
       defaultSeries: null,
       defaultLegend: [
           {
                            name: `轻度${this.emoName}倾向`,
                            icon: "rect",
                            itemStyle: {
                                color: "#ffde00"
                            },
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        {
                            name: `中度${this.emoName}倾向`,
                            itemStyle: {
                                color: "#ff8a00"
                            },
                            icon: "rect",
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        {
                            name: `重度${this.emoName}倾向`,
                            itemStyle: {
                                color: "#d70d0d",
                            },
                            icon: "rect",
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        {
                            name: `无${this.emoName}倾向`,
                            icon: "rect",
                            itemStyle: {
                                color: "#62BD48"
                            },
                            textStyle: {
                                // 项目遗留问题，新项目不需重新转换文字大小
                                fontSize: 12
                            }
                        },
       ],
       params: {},
       weekResult: {},
   }
  },
  created() {
    this.initEchartText();
  },
  mounted() {
    this.loadParams();
    this.initEchart();
  },
  watch: {
    // 监听数据发生变化 初始化各项图表
    emotionData: {
        handler(n, o) {
            this.initEchart();
        },
        deep: true
    },
    xAxisData: {
        handler(n, o) {
            this.initEchart();
        },
        deep: true
    },
    pieData: {
        handler(n, o) {
            this.initPieEchart();
        },
        deep: true
    },
  },
  computed: {
    // 折线图标题
    echartsTitle() {
        return `${this.emoName}数据图`;
    },
    defaultOptions() {
            return {
                time: {
                    useUTC: false
                },
                title: {
                    text: this.echartsTitle,
                    left: 1,
                    right: 25,
                    bottom: 20,
                    top: "3%",
                    textStyle: {
                        fontSize: 18,
                        fontWeight: "bold"
                    }
                },
                legend: {
                    width: "65%",
                    orient: "horizontal",
                    right: 'right',
                    top: '3%',
                    bottom: "1%",
                    itemHeight: 12,
                    itemWidth: 12,
                    itemGap: 10,
                    align: 'left',
                    selectedMode: false,
                    data: [
                        {
                            name: `轻度${this.emoName}倾向`,
                            icon: "rect",
                            itemStyle: {
                                color: "#ffde00"
                            },
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        {
                            name: `中度${this.emoName}倾向`,
                            itemStyle: {
                                color: "#ff8a00"
                            },
                            icon: "rect",
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        {
                            name: `重度${this.emoName}倾向`,
                            itemStyle: {
                                color: "#d70d0d",
                            },
                            icon: "rect",
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        {
                            name: `无${this.emoName}倾向`,
                            icon: "rect",
                            itemStyle: {
                                color: "#62BD48"
                            },
                            textStyle: {
                                fontSize: 12
                            }
                        },
                    ],
                    formatter: function(name) {
                        // 自定义显示内容
                        if (name.length > 6) {
                            return (
                                name.substring(0, 6) + "\n" + name.substring(6)
                            );
                        } else {
                            return name;
                        }
                    }
                },
                grid: {
                    show: true,
                    borderWidth: 1,
                    top: '20%',
                    left: '1%',
                    right: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        show: false
                    },
                    textStyle: {
                        fontSize: 10
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#ddd",
                            width: 2
                        }
                    },
                    nameLocation: 'center',
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        showMinLabel: true, //显示最小值
                        showMaxLabel: true, //显示最大值
                    },
                    data: this.xAxisData
                },
                dataZoom: [
                    {
                        type: "inside",
                        start: 0,
                        end: 100,
                    },
                    {
                        start: 0,
                        end: 100,
                        textStyle: {
                            color: "#FFF",
                            fontSize: 14
                        },
                        show: true,
                        height: 25,
                        bottom: '3%',
                        handleStyle: {
                            borderWidth: 1,
                            borderCap: "square"
                        }
                    }
                ],
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        fontSize: 14,
                        align: "center"
                    },
                    formatter: function(params) {
                        return params[0].marker  + params[0].name + '--' + params[0].value + '</br>'
                    }
                },
                yAxis: {
                    type: "value",
                    max: 100,
                    min: 0,
                    interval: 20,
                    splitNumber : 1,
			        boundaryGap : [ '5%', '5%' ],
                    nameTextStyle: {
                        fontSize: 13
                    },
                    alignTicks: true,
                    axisTick: {
                        show: true
                    },
                    axisLabel: {
                        show: true,
                        fontSize: 13,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#ddd",
                            width: 1
                        }
                    }
                },
                series: [
                    {
                        name: `无${this.emoName}倾向`,
                        type: "line",
                        padding: 5,
                        data: this.emotionData,
                        symbol: "circle",
                        symbolSize: 8,
                    },
                    {
                        name: `轻度${this.emoName}倾向`,
                        type: "line",
                        data: ""
                    },
                    {
                        name: `中度${this.emoName}倾向`,
                        type: "line",
                        data: ""
                    },
                    {
                        name: `重度${this.emoName}倾向`,
                        type: "line",
                        data: ""
                    }
                ]
            };
    },
    // 饼状图配置
    pieOption() {
            return {
                tooltip: {
                    trigger: "item",
                    textStyle: {
                        fontSize: 14
                    },
                    position: "right"
                },
                legend: {
                    top: "5%",
                    left: "center",
                    show: false
                },
                series: [
                    {
                        type: "pie",
                        radius: ["40%", "80%"],
                        avoidLabelOverlap: false,
                        startAngle: 270, // 设置逆时针渲染
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: "#fff",
                            borderWidth: 2,
                            fontSize: 16
                        },
                        label: {
                            show: false,
                            position: "center",
                            fontSize: 16
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: 16,
                                fontWeight: "bold"
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.pieData
                    }
                ]
            };
    },
  },
  methods: {
    async loadParams() {
        let params = this.$route.query;
            if (params) {
                this.params = params;
                if(!params.accessToken) {
                    let authToken = await this.getAuth();
                    this.$store.commit('ssjlToken', authToken);
                } else {
                    this.$store.commit('ssjlToken', params.accessToken);
                }
                this.getWeekResultDetail();
            }
        },
    //   获取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('');
                }
            })
        })
    },
    initEchartText( ) {
        this.defaultSeries = [
                {
                        name: ``,
                        type: "line",
                        padding: 5,
                        data: this.emotionData,
                        symbol: "circle",
                        symbolSize: 8, // 拐点圆的大小
                        areaStyle: {},
                    },
                    {
                        name: `轻度${this.emoName}倾向`,
                        type: "line",
                        padding: 10,
                        data: "",
                        symbol: "circle",
                        symbolSize: 8, // 拐点圆的大小
                    },
                    {
                        name: `中度${this.emoName}倾向`,
                        type: "line",
                        data: ""
                    },
                    {
                        name: `重度${this.emoName}倾向`,
                        type: "line",
                        data: ""
                    }
            ];
    },
    calcTitle(type) {
        let title = '';
        switch(type) {
            case 1:
                title = '压力'
                break;
            case 2:
                title = '抑郁'
                break;
            case 3:
                title = '疲劳'
                break;
            default: break;
        };
        return title;
    },
    getWeekResultDetail() {
        this.$toast.loading('数据加载中');
        let reqUrl = 'https://dbmq.rzliot.com/heart/api/Data/GetWeekResultDetail';
        let reqParams = {
            recordId: this.params.recordId,
        };
        axios.get(reqUrl, {
            params: { ...reqParams },
           /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
        }).then(res => {
            console.log("res", res);
            const data = res.data.response;
            let chartData = data.ChartData ? (JSON.parse(data.ChartData)).filter(item => {return item.Key}) : [];
            console.log("图表数据", chartData);
            if(data) {
                this.monitoringCount = data.Total;
                this.pieRightList = [];
                this.statisticsList = [];
                this.emotionList = [];
                this.weekResult = data;
                this.emoName = this.calcTitle(data.Type);
            }
            let None = {
                count: data.None,
                percentage: this.calcPercentage(
                    data.None,
                    data.Count
                ),
                text: `无${this.emoName}倾向`,
                color: "#62BD48"
            };
            let Mild = {
                count: data.Mild,
                percentage: this.calcPercentage(
                data.Mild,
                data.Count
                ),
                text: `轻度${this.emoName}倾向`,
                color: "#ffde00"
            };
            let Moderate = {
                count: data.Moderate,
                percentage: this.calcPercentage(
                    data.Moderate,
                    data.Count
                ),
                text: `中度${this.emoName}倾向`,
                color: "#ff8a00"
            };
            let Severe = {
                count: data.Severe,
                percentage: this.calcPercentage(
                    data.Severe,
                    data.Count
                ),
                text: `重度${this.emoName}倾向`,
                color: "#d70d0d"
            };
                        // 饼状图右边数据
                        this.pieRightList.push(None);
                        this.pieRightList.push(Mild);
                        this.pieRightList.push(Moderate);
                        this.pieRightList.push(Severe);
                        this.pieData = this.pieRightList.map(item => {
                            item.value = item.count;
                            item.itemStyle = {
                                color: item.color
                            };
                            return item;
                        });
                        let Max = {
                            label: "最大值",
                            value: data.Max,
                            time: data.MaxDesc
                                ? this.currentDays === 0 ? this.$dayjs(data.MaxDesc).format("HH:mm")
                                : this.$dayjs(data.MaxDesc).format("MM/DD HH:mm")
                                : ""
                        };
                        let Min = {
                            label: "最小值",
                            value: data.Min,
                            time: data.MinDesc
                                ? this.currentDays === 0 ? this.$dayjs(data.MinDesc).format("HH:mm")
                                : this.$dayjs(data.MinDesc).format("MM/DD HH:mm")
                                : ""
                        };
                        let Avg = {
                            label: "平均值",
                            value: data.Avg,
                            time: data.AvgDesc
                                ? this.currentDays === 0 ? this.$dayjs(data.AvgDesc).format("HH:mm")
                                : this.$dayjs(data.AvgDesc).format("MM/DD HH:mm")
                                : ""
                        };
                        this.statisticsList.push(Max);
                        this.statisticsList.push(Min);
                        this.statisticsList.push(Avg);
                        let NoneDay = {
                            days: data.NoneDay,
                            text: `无${this.emoName}倾向`,
                            color: "#62BD48"
                        };
                        let MildDay = {
                            days: data.MildDay,
                            text: `轻度${this.emoName}倾向`,
                            color: "#ffde00"
                        };
                        let ModerateDay = {
                            days: data.ModerateDay,
                            text: `中度${this.emoName}倾向`,
                            color: "#ff8a00"
                        };
                        let SevereDay = {
                            days: data.SevereDay,
                            text: `重度${this.emoName}倾向`,
                            color: "#d70d0d"
                        };
                        this.emotionList.push(NoneDay);
                        this.emotionList.push(MildDay);
                        this.emotionList.push(ModerateDay);
                        this.emotionList.push(SevereDay);
                        // 图表数据
                        this.emotionData = chartData.map(item => {
                            return {
                                value: item.Value,
                                itemStyle: {
                                    color: this.calcResultColor(item.Level)
                                }
                            };
                        });
                        this.weekAndMonData = chartData.map((item, index) => {
                            return {
                                value: [index, item.MinValue, item.MaxValue],
                            };
                        });
                        this.xAxisData = chartData.map(item => {
                            console.log("item", item);
                            return item.Key ? this.$dayjs(item.Key.replace(/-/g, "/")).format(
                                "MM/DD"
                            ) : item.key;
                        });
                        let emphasisStyle = {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(0,0,0,0.3)'
                            }
                        };
                        let that = this;
                        // 7天和30天变成柱状图
                        this.weekAndMonthSeries = [
                                {
                                    name: '平均值',
                                    type: 'scatter',
                                    symbolSize: 8,
                                    data: this.emotionData,
                                },
                                {
                                    name: '',
                                    type: 'custom',
                                    data: this.weekAndMonData,
                                    renderItem: function (params, api) {
                                        var categoryIndex = api.value(0);
                                        var end = api.coord([categoryIndex, api.value(1)]);
                                        var start = api.coord([categoryIndex, api.value(2)]);
                                        var width = 8;
                                        var rectShape = that.$echarts.graphic.clipRectByRect(
                                            {
                                            x: start[0] - width / 2,
                                            y: start[1],
                                            width: 8,
                                            height: end[1] - start[1],
                                            },
                                            {
                                            x: params.coordSys.x,
                                            y: params.coordSys.y,
                                            width: params.coordSys.width,
                                            height: params.coordSys.height,
                                            }
                                        );
                                        if(rectShape) {
                                            rectShape.r = [10]
                                        };
                                        return (
                                            rectShape && {
                                            type: "rect",
                                            shape: rectShape,
                                            style: api.style(),
                                            }
                                        );
                                    },
                                    itemStyle: {
                                        opacity: 0.8,
                                    },
                                    encode: {
                                        y: [1, 2],
                                        x: 0,
                                    },
                                },
                                {
                                    name: `轻度${this.emoName}倾向`,
                                    type: 'scatter',
                                    symbolSize: 8,
                                    data: '',
                                },
                                {
                                    name: `中度${this.emoName}倾向`,
                                    type: 'scatter',
                                    symbolSize: 8,
                                    data: '',
                                },
                                {
                                    name: `重度${this.emoName}倾向`,
                                    type: 'scatter',
                                    symbolSize: 8,
                                    data: '',
                                },
                                {
                                    name: `无${this.emoName}倾向`,
                                    type: 'scatter',
                                    symbolSize: 8,
                                    data: '',
                                },
                        ];
                        // 点击提示此时为空
                        this.defaultOptions.tooltip = {
                            trigger: "axis",
                            formatter: function(params) {
                                if(params) {
                                    return params[0].marker + '平均值:' + params[0].name + '--' + params[0].value + '</br>' +
                                    params[1].marker + '最大值:' + params[1].name +  '--' + params[1].value[2] + '</br>' +
                                    params[1].marker + '最小值:' + params[1].name +  '--' + params[1].value[1];
                                }

                            }
                        };
                        this.defaultOptions.series = this.weekAndMonthSeries;
            this.$toast.success('数据加载完成');
        })
    },
    initEchart() {
        if (
            this.echarts != null &&
            this.echarts != "" &&
            this.echarts != undefined
        ) {
            this.echarts.dispose();
        }
        this.echarts = this.$echarts.init(this.$refs.charts);
        this.echarts.setOption(this.defaultOptions);
    },
    // 初始化饼状图
    initPieEchart() {
            if (
                this.pieEcharts != null &&
                this.pieEcharts != "" &&
                this.pieEcharts != undefined
            ) {
                this.pieEcharts.dispose();
            }
            this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
            this.pieEcharts.setOption(this.pieOption);
    },
    onNavBack() {
        this.$router.go(-1);
    },
    // 计算字体显示的颜色
    calcColor(value) {
        let color = "";
        if (value <= 40) {
            color = "#62BD48";
        } else if (value > 40 && value <= 65) {
            color = "#ffde00";
        } else if (value > 65 && value <= 80) {
            color = "#ff8a00";
        } else if (value > 80) {
            color = "#d70d0d";
        } else {
            color = "";
        }
        return color;
    },
    // 计算百分比
    calcPercentage(value, total) {
        if (
                typeof value !== "number" ||
                typeof total !== "number" ||
                total === 0
            ) {
                return 0;
            }
            let milValue = value * 1000;
            let milTotal = total * 1000;
            return Math.round((milValue / milTotal) * 100);
    },
    // 计算结果采用哪种颜色
        calcResultColor(value, isCallBackClass) {
            let color = "";
            let className = "";
            switch(value) {
                case '0', 0:
                    color = "#62BD48";
                    className = 'none';
                break;
                case '1', 1:
                    color = "#ffde00";
                    className = 'mild';
                break;
                case '2', 2:
                    color = "#ff8a00";
                    className = 'moderate';
                break;
                case '3', 3:
                    color = "#d70d0d";
                    className = 'severe';
                break;
            }
            return isCallBackClass ? className : color;
        },
    // 重新拼接日期
    resetDate(startDate, endDate) {
        let callBackDate = '';
        if(startDate && endDate) {
            callBackDate = startDate.replace(/-/g, ".") + '-' + endDate.slice(5,endDate.length).replace(/-/g, ".");
        };
        return callBackDate

    }
  }
}
</script>

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