songxingyun
/
guochanpingtai


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="divport" content="width=device-width, initial-scale=1.0">
    <title>小程序测试报告</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 800px;
        }

        .report_head {
            width: 100%;
            height: 308px;
            background: url(https://test.jue-ming.com:8849/api/show?filePath=./images/report_head_bg.png) no-repeat center;
            background-size: cover;
        }

        .logo {
            width: 219px;
            height: auto;
            margin: 38px 0 0 20px;
        }

        .scaleInfo {
            display: flex;
            width: 760px;
            height: 134px;
            background: url(https://test.jue-ming.com:8849/api/show?filePath=./images/scaleinfo_bg.png) no-repeat center;
            background-size: cover;
            margin: -100px auto 0;
            border-radius: 36px;
            overflow: hidden;
        }

        .scaleInfo .head {
            width: 91px;
            height: 91px;
            margin: 22px 0 0 14px;
            border-radius: 36px;
        }

        .titleAndDesc {
            flex: 1;
            margin: 28px 0 0 11px;
        }

        .title {
            font-size: 28px;
            font-weight: 800;
            color: #242424;
        }

        .desc {
            width: 460px;
            font-size: 26px;
            color: rgba(65, 65, 65, 0.49);
            margin-top: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .testNum {
            font-size: 24px;
            font-family: 'PingFang SC-Heavy, PingFang SC';
            display: flex;
            flex-direction: row;
            margin: 32px 23px 0 0;
        }

        .mum_text {
            font-size: 24px;
            font-weight: 800;
            color: #04919B;
            text-align: right;
        }

        .unit {
            font-size: 24px;
            font-weight: 800;
            color: rgba(65, 65, 65, 0.49);
        }

        .test-result-inner {
            width: 100%;
            height: calc(100vh - var(--status-bar-height) - 80px);
            overflow: hidden;
            box-sizing: border-box;
            padding: 20px;
            margin-top: 20px;
            background-image: linear-gradient(#A9EBFF, #FFFFFF);
            border-radius: 20px;
        }

        .test-result-content {
            width: 100%;
            background: #FFFFFF;
            box-sizing: border-box;
            padding: 30px 18px 0;
            border-radius: 36px 36px 0 0;
        }

        .target-content {
            margin-bottom: 35px;
        }

        .report-tip {
            width: 100%;
            margin-top: 20px;
        }

        .tip-title {
            font-size: 28px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(87, 87, 87, 1);
            line-height: 50px;
            text-align: left;
        }

        .tip-desc {
            box-sizing: border-box;
            font-size: 22px;
            font-family: PingFang SC;
            color: rgba(65, 65, 65, 0.49);
            line-height: 50px;
        }

        .tip-content {
            box-sizing: border-box;
            font-size: 24px;
            font-family: PingFang SC;
            color: rgba(87, 87, 87, 1);
            line-height: 50px;
            display: list-item;
            list-style-type: disc;
            margin-left: 25px;
        }

        .total-score-progress-content {
            margin-bottom: 20px;
        }

        .test-result-first-floor {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;


        }

        .avatar {
            width: 136px;
            height: 136px;
            border-radius: 50%;
        }

        .scale-name {
            font-size: 30px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 600;
            color: #FFAC41;
            line-height: 50px;
        }

        .test-time {
            font-size: 26px;
            font-family: PingFang SC-Regular, PingFang SC;
            color: rgba(65, 65, 65, 0.49);
            line-height: 50px;
        }

        .table-title {
            width: 176px;
            height: 50px;
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 50px;
            text-indent: 12px;
            color: #fff;
            text-align: left;
            background: #FF6A97;
            border-radius: 0 36px 36px 0;
            margin: 45px 0;
        }

        .score_table {
            width: 656rpx;
            border-radius: 16px;
            opacity: 1;
            overflow: hidden;
        }

        .score_table tr {
            width: 100%;
        }

        .score_table th {
            box-sizing: border-box;
            width: 50%;
            font-size: 28px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 71px;
            background: rgba(83, 220, 230, 1);
            padding: 6px 18px;
            text-align: left;
        }

        .score_table td {
            box-sizing: border-box;
            width: 50%;
            font-size: 28px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(80, 80, 80, 1);
            line-height: 71px;
            padding: 6px 8px;
        }

        .score_table tr.odd {
            background: #BFF2FC;
        }

        .radar-title {
            width: 176px;
            height: 50px;
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 50px;
            text-indent: 12px;
            color: #fff;
            text-align: left;
            background: #2CC5F2;
            border-radius: 0 36px 36px 0;
            margin: 45px 0;
        }

        .total-score-progress-width {
            width: 80%;
        }

        .total-score-progress {
            font-size: 40px;
            font-weight: bold;
            width: 120px
        }

        .total-score-progress-test {
            font-size: 32px;
        }

        .demo-layout-bg-purple-light {
            display: flex;
            padding: 0 40px;
        }

        .demo-layout-bg-purple {
            width: 200px;
            height: 200px
        }

        .demo-layout-bg-purple img {
            width: 100%;
            height: 100%
        }

        .custom-style-list {
            width: 100%;
            margin: 0 auto;

        }

        .b-b {
            border: 1px solid #f5f5f5;
        }

        .b-d {

            border-right: 1px solid #f5f5f5;
        }

        .custom-style-list-left {
            text-align: left
        }

        .custom-style-list-right {
            text-align: center
        }

        .padding20 {
            margin-top: 20px
        }

        .spanIndent {

            text-indent: 33px;
        }

        .content_app11 {
            width: 210px !important;
            height: 91px !important;
        }

        ::v-deep .u-button--mini {
            height: 90px !important;
            width: 210px !important;

        }

        .over-style {
            width: 176px;
            height: 50px;
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 50px;
            text-indent: 12px;
            color: #fff;
            text-align: left;
            background: #FF9B6E;
            border-radius: 0 36px 36px 0;
            margin: 45px 0;
        }

        .dimension-warp {
            width: 100%;
            margin-top: 20px;
        }

        .dimension-name {
            height: 32px;
            line-height: 32px;
            font-size: 30px;
            font-family: PingFang SC-Regular, PingFang SC;
            color: #E8B643;
            border-left: 6px solid #E8B643;
            padding-left: 13px;
        }

        .dimension-content {
            width: 100%;
            box-sizing: border-box;
            padding: 20px 12px;
            background: #F6F5F5;
            border-radius: 8px;
            margin-top: 20px;
            font-size: 26px;
            font-family: PingFang SC-Regular, PingFang SC;
            color: #505050;
        }

        .dimension-item {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            line-height: 50px;
        }

        .dimension-item-title {
            width: 19%;
            height: 50px;
            font-weight: bold;
            text-align: justify;
            text-justify: distribute-all-lines;
        }

        .dimension-item-title::after {
            width: 100%;
            display: inline-block;
            content: '';
        }

        .dimension-item-mh {
            width: 20px;
            font-weight: bold;
        }

        .dimension-item-desc {
            width: calc(81% - 20px);
        }


        .analysis-title {
            font-size: 26px;
            font-family: PingFang SC-Heavy, PingFang SC;
            font-weight: 800;
            color: #575757;
            line-height: 50px;
        }

        .analysis-desc {
            font-size: 24px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #575757;
            line-height: 45px;
        }

        .more_test {
            width: 709px;
            margin: 0 auto;
            overflow: hidden;
        }

        .more_txt {
            margin-top: 100px;
            float: left;
        }

        .more_txt p {
            font-size: 26px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(65, 65, 65, 0.49);
        }

        .more_txt h2 {
            font-size: 30px;
            font-family: PingFang SC-Heavy, PingFang SC;
            font-weight: 800;
            color: #04919B;
        }

        .qr_code {
            width: 221px;
            height: auto;
            float: right;
        }
    </style>
    <script src="./js/vue@2"></script>
    <script src="./js/echarts.min.js"></script>
</head>

<body>
    <div id="app" class="">
        <div class="report_head">
            <image src="https://test.jue-ming.com:8849/api/show?filePath=./images/camera_logo.png" class="logo" />
        </div>
        <div class="scaleInfo">
            <img class="head" src="https://test.jue-ming.com:8849/api/show?filePath=./images/lbce_pic1.png" />
            <div class="titleAndDesc">
                <p class="title">{{name}}</p>
                <p class="desc">{{scaleInfo.description}}</p>
            </div>
            <div class="testNum">
                <span class="mum_text">{{scaleInfo.testNum}}</span>
                <span class="unit">人已测评</span>
            </div>
        </div>
        <div class="test-result-inner test-result-warp" v-show="showContent">
            <div class="test-result-content">
                <div class="target-content" ref="targetDom" id="targetDom">
                    <div class="total-score-progress-content">
                        <div class="test-result-first-floor">
                            <div>
                                <div class="scale-name" v-if="name">量表名称：{{ name }}</div>
                                <div class="test-time" v-if="time">测试时间：{{ time }}</div>
                            </div>
                            <img class="avatar" :src="avatarUrl"></img>
                        </div>
                        <div class="report-tip">
                            <div class="tip-title">报告阅读说明</div>
                            <p class="tip-desc">谢谢您的参与，阅读本报告时，请注意以下内容：</p>
                            <!--<p class="tip-content">测评图表可快速帮您掌握报告内容；</p>-->
                            <p class="tip-content">本结果仅供参考，不可作为临床诊断的依据；</p>
                            <p class="tip-content">如对报告有不理解的地方，建议向专业资质人员进行咨询；</p>
                            <p class="tip-content">如结果与你自己或他人感知的有出入，可回忆在测试</br>时是否有事情影响到你，或自己答辩时是否有所顾虑。</p>
                        </div>
                    </div>
                    <template v-if="scoresList">
                        <div class="table-title">分值</div>
                        <table width="100%" class="score_table" v-for="(items,index) in scoresList" :key="index">
                            <tr>
                                <th v-for="(itemTitle,i) in items.colNames" :key="i">{{itemTitle}}</th>
                            </tr>
                            <tr v-for="(c,p) in  testResult == 2 ?items.newTableContext.result : items.tableContext"
                                :class="{'odd': p % 2 == 0}" :key="p">
                                <td>{{c.name != undefined?c.name:'总分'}}</td>
                                <td v-if="c.name != undefined">{{testResult == 2?c.score:c.value[0]}}</td>
                            </tr>
                        </table>
                    </template>
                    <template v-if="scoreList && scoreList.length > 0">
                        <div class="radar-title">你的分数</div>
                        <div id="main" class="canvas" style="width: 724px;height:400px;"></div>
                        <!-- <lei-da-cognitive-tasks :dataList="allData.chartModule.chartBody"></lei-da-cognitive-tasks> -->
                    </template>
                    <template v-if="showResultText">
                        <div class="over-style">结果分析</div>
                        <div class="dimension-warp" v-for="(list, j) in symptomDescription" :key="j">
                            <div class="dimension-name">维度名称：{{ list.name }}</div>
                            <div class="dimension-content">
                                <div class="dimension-item" v-if="list.score && list.score != '无'">
                                    <span class="dimension-item-title">得分</span>
                                    <span class="dimension-item-mh">:</span>
                                    <span class="dimension-item-desc">{{ list.score }}</span>
                                </div>
                                <div class="dimension-item" v-if="list.symptom && list.symptom != '无'">
                                    <span class="dimension-item-title">症状</span>
                                    <span class="dimension-item-mh">:</span>
                                    <span class="dimension-item-desc">{{ list.symptom }}</span>
                                </div>
                                <div class="dimension-item"
                                    v-if="list.improvementSuggestions && list.improvementSuggestions != '无'">
                                    <span class="dimension-item-title">维度说明</span>
                                    <span class="dimension-item-mh">:</span>
                                    <span class="dimension-item-desc">{{ list.improvementSuggestions }}</span>
                                </div>
                                <div class="dimension-item" v-if="list.suggestion && list.suggestion != '无'">
                                    <span class="dimension-item-title">建议</span>
                                    <span class="dimension-item-mh">:</span>
                                    <span class="dimension-item-desc">{{ list.suggestion }}</span>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div class="more_test">
                        <div class="more_txt">
                            <p>更多测评请在微信搜索</p>
                            <h2>心灵照相机</h2>
                        </div>
                        <img class="qr_code" :src="`data:image/png;base64,${qrCodeImg}`" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    getBenDatas: null,
                    avatarUrl: "",
                    petName: "",
                    showTestedPerson: false,
                    baseUrl: 'https://test.jue-ming.com:8443/',
                    name: "",
                    time: "",
                    totalScores: 0,
                    symptomScore: [],
                    symptomDescription: [],
                    symptom: "",
                    reference: [],
                    scoreList: [],
                    indicator: [],
                    improvementSuggestions: "无",
                    scoresList: [],
                    resultId: "",
                    subjectOrCognitiveId: "",
                    testResult: 2,
                    imgUrl: '',
                    messageShare: 0,
                    productList: [{
                        name: '谢谢您的参与，阅读本报告时，请注意以下内容：'
                    },
                    {
                        name: '. 本结果仅供参考，不可作为临床诊断的依据'
                    },
                    {
                        name: '. 如结果与你自己或他人感知的有出入，可回忆在测试'
                    },
                    {
                        name: '时是否有事情影响了你，或自己答题时是否有所顾虑'
                    },
                    {
                        name: '. 如对报告有不理解的地方，建议向专业人员进行咨询'
                    }
                    ],
                    showResultText: false,
                    relevantList: [],
                    scaleInfo: {},
                    flag: '',
                    showContent: false, //等接口返回数据初始化完成再
                    tableData: [],
                    allData: {}, //测试显示内容
                    resultData: ReplaceData,
                    qrCodeImg: base64img,
                    color: ['#FCEF9A', '#D54039', '#56743E', '#FF917C'],
                    radarIndicator: [],
                    radarData: [],
                    option: {},
                    myChart: null
                }
            },
            computed: {
            },
            created() {
                this.getScaleTestResults();
            },
            mounted() {
                this.myChart = echarts.init(document.getElementById("main"));
                if (this.myChart) this.drawLine();
            },
            methods: {
                getScaleTestResults(id) {
                    let _this = this;
                    this.avatarUrl = this.resultData.userInfo.avatarUrl ? `https://test.jue-ming.com:8849/api/show?filePath=${this.resultData.userInfo.avatarUrl}` : 'https://test.jue-ming.com:8849/api/show?filePath=./images/lbcs_pic2.png';
                    this.testResult = parseInt(JSON.parse(this.resultData?.userRecordEntity?.testResult)[0].version);
                    _this.testResult = parseInt(JSON.parse(this.resultData?.userRecordEntity?.testResult)[0].version);
                    _this.name = this.resultData.userRecordEntity.name;
                    _this.flag = this.resultData.subject.flag;
                    _this.scaleInfo = this.resultData.subject;

                    let testDateTime = this.resultData.userRecordEntity.testDate;
                    let yearMonthDay = testDateTime
                        .replace("年", "/")
                        .replace("月", "/")
                        .replace("日", " ")
                        .replace("时", ":")
                        .replace("分", ":")
                        .replace("秒", "");
                    _this.time = yearMonthDay;
                    if (_this.testResult == 2) {
                        _this.getDataList(this.resultData);
                    } else {
                        _this.scoresList = JSON.parse(this.resultData.userRecordEntity.testResult);
                        _this.init(_this.scoresList[0].tableContext[0].value[0])
                    }
                    this.showContent = true;
                },
                init(v) {
                    let _this = this;
                    _this.totalScores = Number(v);
                },
                getDataList(data) {
                    let _this = this;
                    let v = JSON.parse(data.userRecordEntity.testResult);
                    _this.scoresList = v;
                    console.log("-----传入的参数----->", v);
                    v.forEach((items) => {
                        if (items.newTableContext.iconInfo != "") {
                            let indicatorList = items?.newTableContext?.iconInfo?.indicator;
                            if (indicatorList.length > 0) {
                                indicatorList.forEach((data) => {
                                    _this.indicator.push({
                                        text: data.text,
                                        max: Number(data.max)
                                    });
                                });
                            }
                            let referenceList = items?.newTableContext?.iconInfo?.reference || [];
                            if (referenceList.length > 0) {
                                referenceList.forEach((data) => {
                                    _this.reference.push(Number(data));
                                });
                            }
                            let scoreLists = items?.newTableContext?.iconInfo?.scoreList;
                            if (scoreLists.length > 0) {
                                scoreLists.forEach((data) => {
                                    _this.scoreList.push(Number(data));
                                });
                            }
                            console.log("==1111=====>", _this.indicator)
                            console.log("==2222=====>", _this.reference)
                            console.log("==3333=====>", _this.scoreList)
                        }
                        // _this.symptomDescription=[]
                        items.newTableContext.result.forEach((item) => {
                            if (!item) return;
                            if (item.name === "总分" || item.name === "压力综合指数") {
                                _this.init(item.score);
                                _this.symptom = item.symptom;
                            }
                            if (item.isTotalScoreExplain === "是") {
                                _this.improvementSuggestions = item.symptom;
                            }

                            _this.symptomScore.push({
                                name: item.name,
                                score: item.score
                            });
                            // _this.symptomDescription.push({
                            // 	symptom: item.symptom,
                            // 	name: item.name,
                            // 	improvementSuggestions: item.improvementSuggestions,
                            // });
                            // if (item.improvementSuggestions && item.improvementSuggestions != '无') _this.showResultText = true;

                            // 获取维度数据
                            this.symptomDescription.push(item);

                        });
                        if (this.symptomDescription && this.symptomDescription.length > 0) {
                            //判断维度显示
                            this.showResultText = true;
                        }
                        console.log("0000-----000", _this.symptomDescription);
                    });
                },

                drawLine() {
                    let _this = this;
                    console.log("_this.indicator", _this.indicator);
                    console.log("_this.reference", _this.reference);
                    console.log("_this.scoreList", _this.scoreList);
                    let legendData = this.reference?.length > 0 ? ["你的分数", "参考值"] : ["你的分数"];
                    let options = {
                        color: ["#67F9D8", "#FFE434", "#56A3F1", "#FF917C"],
                        title: {
                            text: "",
                        },
                        legend: {
                            data: legendData,
                            orient: "vertical",
                            left: "left",
                        },
                        radar: [
                            {
                                center: ["25%", "50%"],
                                radius: 120,
                                startAngle: 2,
                                splitNumber: 1,
                                shape: "circle",
                                axisName: {
                                    formatter: "【{value}】",
                                    color: "#428BD4",
                                },
                                splitArea: {
                                    areaStyle: {
                                        color: ["#77EADF", "#26C3BE", "#64AFE9", "#428BD4"],
                                        shadowColor: "rgba(0, 0, 0, 0.2)",
                                        shadowBlur: 10,
                                    },
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(211, 253, 250, 0.8)",
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(211, 253, 250, 0.8)",
                                    },
                                },
                            },
                            {
                                indicator: _this.indicator,
                                center: ["50%", "50%"],
                                radius: "60%",
                                axisName: {
                                    color: "#fff",
                                    backgroundColor: "#666",
                                    borderRadius: 3,
                                    padding: [3, 5],
                                },
                            },
                        ],
                        series: [
                            {
                                type: "radar",
                                radarIndex: 1,
                                data: [
                                    {
                                        value: _this.scoreList,
                                        name: "你的分数",
                                        symbol: "rect",
                                        symbolSize: 12,
                                        lineStyle: {
                                            type: "dashed",
                                        },
                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            },
                                        },
                                    },
                                    {
                                        value: _this.reference,
                                        name: "参考值",
                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            },
                                        },
                                        areaStyle: {
                                            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                                                {
                                                    color: "rgba(255, 145, 124, 0.1)",
                                                    offset: 0,
                                                },
                                                {
                                                    color: "rgba(255, 145, 124, 0.9)",
                                                    offset: 1,
                                                },
                                            ]),
                                        },
                                    },
                                ],
                            },
                        ],
                    }
                    this.myChart.setOption(options);
                }
            }
        })
    </script>
</body>

</html>