<!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>