2025-11-05 11:09:27 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="interest-report-wrap">
|
|
|
|
|
|
<view class="head-bar" :style="{'margin-top': barHeight + 5 + 'px'}">
|
|
|
|
|
|
<view class="go-back" @click="goback"></view>
|
|
|
|
|
|
<text>我的报告</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="content">
|
|
|
|
|
|
<contrastBox :testType="testType" :userId="userId" :recordId="recordId" @compareParameters="opCompareParameters"></contrastBox>
|
|
|
|
|
|
<view class="section-block">
|
|
|
|
|
|
<testHead :reportTitle="'多元(职业)能力测评报告'" :testTime="testDate" :isIntroduce="false" :isVideo="false" :videoUrl="videoUrl" :introduceUrl="introduceUrl" :introduceUrl2="introduceUrl2"></testHead>
|
|
|
|
|
|
<view class="s-line"></view>
|
|
|
|
|
|
<view class="title">
|
|
|
|
|
|
<view class="name">能力强</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="code-value">
|
|
|
|
|
|
<text class="scort" v-text="advantage!=''?advantage:'无'"></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="title">
|
|
|
|
|
|
<view class="name">能力中</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="code-value">
|
|
|
|
|
|
<text class="scort" v-text="mid!=''?mid:'无'"></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="title">
|
|
|
|
|
|
<view class="name">待加强</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="code-value">
|
|
|
|
|
|
<text class="scort" v-text="low!=''?low:'无'"></text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap blue-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
语文相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts1" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap purple-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
数学相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts2" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap orange-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
科技相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts3" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap green-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
资讯相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts4" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap blue-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
人际相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts5" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap purple-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
美感相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts6" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap orange-bg" style="margin-bottom:68rpx;">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
自然相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts7" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="chat-wrap green-bg">
|
|
|
|
|
|
<view class="chat-title">
|
|
|
|
|
|
艺能相关能力得分
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="row-item"><l-echart ref="charts8" class="charts-box"></l-echart>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="section-block" >
|
|
|
|
|
|
<view class="title">
|
|
|
|
|
|
<view class="name">提升途径</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="desc-item-wrap">
|
|
|
|
|
|
<view class="desc-item" v-for="(item,index) in wayData" :key="index">
|
|
|
|
|
|
<view class="name-block">
|
|
|
|
|
|
<view class="name">{{item.Name}}</view>
|
|
|
|
|
|
<view class="desc">{{item.Point}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="list">
|
|
|
|
|
|
<view class="row">
|
|
|
|
|
|
<text class="strong">提升途径：</text>
|
|
|
|
|
|
<text class="txt">{{item.Desc}}</text>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import testHead from "@/packageCa/testReport/components/testHead.vue"
|
|
|
|
|
|
import contrastBox from "@/packageCa/testReport/components/contrastBox.vue"
|
2025-11-07 18:38:01 +08:00
|
|
|
|
import api from "@/packageCa/apiCa/testManage.js"
|
2025-11-05 11:09:27 +08:00
|
|
|
|
import wayData from "./multipleAbilityData.json";
|
|
|
|
|
|
import theme from '@/uni_modules/lime-echart/static/walden.json';
|
|
|
|
|
|
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
|
|
|
|
|
|
// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
|
|
|
|
|
|
// // 注册主题
|
|
|
|
|
|
// echarts.registerTheme('theme', theme);
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
contrastBox,
|
|
|
|
|
|
testHead
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
platform: uni.getDeviceInfo().platform,
|
|
|
|
|
|
barHeight: wx.getWindowInfo().statusBarHeight,
|
|
|
|
|
|
introduceUrl: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/multipleAbilityTestReport-1.png",
|
|
|
|
|
|
introduceUrl2: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh/report/multipleAbilityTestReport-2.png",
|
|
|
|
|
|
videoUrl: "http://2-video.oss-cn-shenzhen.aliyuncs.com/2023%E5%B9%B4%E8%A7%86%E9%A2%91/%E5%88%9D%E4%B8%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%BA%90/%E5%A4%9A%E5%85%83%E6%99%BA%E8%83%BD%E6%B5%8B%E8%AF%84%E8%A7%A3%E8%AF%BB1.16%E4%BF%AE%E6%94%B92.mp4",
|
|
|
|
|
|
testDate: "",
|
|
|
|
|
|
id: "",
|
|
|
|
|
|
wayData,
|
|
|
|
|
|
advantage: '',
|
|
|
|
|
|
mid: '',
|
|
|
|
|
|
low: "",
|
|
|
|
|
|
|
|
|
|
|
|
chartData1: {
|
|
|
|
|
|
categories: ["外语能力", "写作表达", "口语表达", "口语辨识", "阅读理解"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData2: {
|
|
|
|
|
|
categories: ["数学推理", "逻辑推理", "计算能力"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData3: {
|
|
|
|
|
|
categories: ["近观细察", "操作控制", "科学能力", "机械推理", "空间定向"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData4: {
|
|
|
|
|
|
categories: ["排序分类", "信息运用", "程序设计"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData5: {
|
|
|
|
|
|
categories: ["教学培训", "社会觉察", "合作协调", "说服推广", "助人服务"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData6: {
|
|
|
|
|
|
categories: ["创作力", "绘图设计", "美感鉴赏"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData7: {
|
|
|
|
|
|
categories: ["养育照护", "自然观察"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
chartData8: {
|
|
|
|
|
|
categories: ["肢体协调", "音乐能力", "表演能力"],
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
data: []
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
opts: {
|
|
|
|
|
|
color: ["#1677ff"],
|
|
|
|
|
|
padding: [10, 0, 0, 0],
|
|
|
|
|
|
enableScroll: false,
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
disableGrid: true,
|
|
|
|
|
|
axisLineColor: "#EEEEEE",
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
gridType: "dash",
|
|
|
|
|
|
dashLength: 2,
|
|
|
|
|
|
showTitle: true,
|
|
|
|
|
|
gridColor: "#EEEEEE",
|
|
|
|
|
|
splitNumber: 4,
|
|
|
|
|
|
data: [{
|
|
|
|
|
|
max: 12,
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
axisLine: false,
|
|
|
|
|
|
title: "等级"
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
extra: {
|
|
|
|
|
|
line: {
|
|
|
|
|
|
type: "straight",
|
|
|
|
|
|
width: 3,
|
|
|
|
|
|
activeType: "hollow"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}, //图表配置
|
|
|
|
|
|
opts2: {},
|
|
|
|
|
|
opts3: {},
|
|
|
|
|
|
opts4: {},
|
|
|
|
|
|
|
|
|
|
|
|
result: [],
|
|
|
|
|
|
data1: [], //初始数据1
|
|
|
|
|
|
data2: [],
|
|
|
|
|
|
data3: [],
|
|
|
|
|
|
data4: [],
|
|
|
|
|
|
data5: [],
|
|
|
|
|
|
data6: [],
|
|
|
|
|
|
data7: [],
|
|
|
|
|
|
data8: [],
|
|
|
|
|
|
option1: {},
|
|
|
|
|
|
option2: {},
|
|
|
|
|
|
option3: {},
|
|
|
|
|
|
option4: {},
|
|
|
|
|
|
option5: {},
|
|
|
|
|
|
option6: {},
|
|
|
|
|
|
option7: {},
|
|
|
|
|
|
option8: {},
|
|
|
|
|
|
showIntroduce: false, // 测评介绍
|
|
|
|
|
|
|
|
|
|
|
|
testType: "-27",
|
|
|
|
|
|
userId: 0,
|
|
|
|
|
|
currentYear: 0,
|
|
|
|
|
|
currentTerm: 0,
|
|
|
|
|
|
recordId: 0,
|
|
|
|
|
|
labelName1: "",//表值1
|
|
|
|
|
|
labelName2: "",//表值2
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad(e) {
|
|
|
|
|
|
this.id = e.id;
|
|
|
|
|
|
if (e.year != null) {
|
|
|
|
|
|
this.currentYear = e.year;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.term != null) {
|
|
|
|
|
|
this.currentTerm = e.term;
|
|
|
|
|
|
}
|
|
|
|
|
|
if (e.recordId != null) {
|
|
|
|
|
|
this.recordId = e.recordId;
|
|
|
|
|
|
}
|
|
|
|
|
|
this.getTestRecord(this.currentYear, this.currentTerm,this.recordId);
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
//对比参数
|
|
|
|
|
|
opCompareParameters(value){
|
|
|
|
|
|
this.labelName1 = value.name1;
|
|
|
|
|
|
this.labelName2 = value.name2;
|
|
|
|
|
|
this.params = value;
|
|
|
|
|
|
this.getValue()
|
|
|
|
|
|
},
|
|
|
|
|
|
//获取报告结果
|
|
|
|
|
|
getTestRecord(currentYear, currentTerm,recordId) {
|
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
|
title: "加载中"
|
|
|
|
|
|
})
|
|
|
|
|
|
api.queryCustomTestResult(this.testType, currentYear, currentTerm,recordId).then(res => {
|
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
|
if (res.Result === 1) {
|
|
|
|
|
|
let data = res.Data;
|
|
|
|
|
|
this.testDate = data.TestDate;
|
|
|
|
|
|
this.currentYear = data.Year;
|
|
|
|
|
|
this.currentTerm = data.Term;
|
|
|
|
|
|
this.recordId = data.RecordId;
|
|
|
|
|
|
// this.userId = data.UserId;
|
|
|
|
|
|
this.labelName1 = data.TestDate;
|
|
|
|
|
|
this.advantage = data.DimLevelList[0].DimStr;
|
|
|
|
|
|
this.mid = data.DimLevelList[1].DimStr;
|
|
|
|
|
|
this.low = data.DimLevelList[2].DimStr;
|
|
|
|
|
|
let list = data.DimList;
|
|
|
|
|
|
this.result = list;
|
|
|
|
|
|
this.initChart();
|
|
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: res.Message,
|
|
|
|
|
|
icon: "none"
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
async initChart() {
|
|
|
|
|
|
let data1 = [],
|
|
|
|
|
|
data2 = [],
|
|
|
|
|
|
data3 = [],
|
|
|
|
|
|
data4 = [],
|
|
|
|
|
|
data5 = [],
|
|
|
|
|
|
data6 = [],
|
|
|
|
|
|
data7 = [],
|
|
|
|
|
|
data8 = [];
|
|
|
|
|
|
this.result.forEach(item => {
|
|
|
|
|
|
switch (item.Name) {
|
|
|
|
|
|
case "阅读理解":
|
|
|
|
|
|
case "口语表达":
|
|
|
|
|
|
case "写作表达":
|
|
|
|
|
|
case "外语能力": {
|
|
|
|
|
|
data1.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "计算能力":
|
|
|
|
|
|
case "逻辑推理":
|
|
|
|
|
|
case "数学推理": {
|
|
|
|
|
|
data2.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "空间定向":
|
|
|
|
|
|
case "机械推理":
|
|
|
|
|
|
case "科学能力":
|
|
|
|
|
|
case "操作控制":
|
|
|
|
|
|
case "近观细察": {
|
|
|
|
|
|
data3.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "程序设计":
|
|
|
|
|
|
case "信息运用":
|
|
|
|
|
|
case "排序分类": {
|
|
|
|
|
|
data4.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "自省觉察":
|
|
|
|
|
|
case "助人服务":
|
|
|
|
|
|
case "说服推广":
|
|
|
|
|
|
case "合作协调":
|
|
|
|
|
|
case "社会觉察":
|
|
|
|
|
|
case "教学培训": {
|
|
|
|
|
|
data5.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "美感鉴赏":
|
|
|
|
|
|
case "绘图设计":
|
|
|
|
|
|
case "创作力": {
|
|
|
|
|
|
data6.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "自然观察":
|
|
|
|
|
|
case "养育照护": {
|
|
|
|
|
|
data7.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
case "表演能力":
|
|
|
|
|
|
case "音乐能力":
|
|
|
|
|
|
case "肢体协调": {
|
|
|
|
|
|
data8.push(item);
|
|
|
|
|
|
break
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
this.data1 = data1;
|
|
|
|
|
|
this.data2 = data2;
|
|
|
|
|
|
this.data3 = data3;
|
|
|
|
|
|
this.data4 = data4;
|
|
|
|
|
|
this.data5 = data5;
|
|
|
|
|
|
if (data5.length == 5) {
|
|
|
|
|
|
data5.push({
|
|
|
|
|
|
Name: "自省觉察",
|
|
|
|
|
|
Score: 0,
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
this.data6 = data6;
|
|
|
|
|
|
this.data7 = data7;
|
|
|
|
|
|
this.data8 = data8;
|
|
|
|
|
|
let name = this.labelName1;
|
|
|
|
|
|
let legend = [name];
|
|
|
|
|
|
this.createdChart('charts1', '语文相关能力得分', legend, data1);
|
|
|
|
|
|
this.createdChart('charts2', '数学相关能力得分', legend, data2);
|
|
|
|
|
|
this.createdChart('charts3', '科技相关能力得分', legend, data3);
|
|
|
|
|
|
this.createdChart('charts4', '资讯相关能力得分', legend, data4);
|
|
|
|
|
|
this.createdChart('charts5', '人际相关能力得分', legend, data5);
|
|
|
|
|
|
this.createdChart('charts6', '美感相关能力得分', legend, data6);
|
|
|
|
|
|
this.createdChart('charts7', '自然相关能力得分', legend, data7);
|
|
|
|
|
|
this.createdChart('charts8', '艺能相关能力得分', legend, data8);
|
|
|
|
|
|
},
|
|
|
|
|
|
//更改对比图
|
|
|
|
|
|
getValue() {
|
|
|
|
|
|
api.getMultipleAbilityGroupResult(this.params.year, this.params.term,this.params.schoolId, this.params.gradeid, this.params.classid, this.params.sex, this.params.departId,this.userId,this.params.recordId).then(res => {
|
|
|
|
|
|
if (res.Result >= 1) {
|
|
|
|
|
|
this.doChart(res.Data);
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
//时间维度/群体维度对比
|
|
|
|
|
|
async doChart(DATA) {
|
|
|
|
|
|
let name1 = this.labelName1;
|
|
|
|
|
|
let name2 = this.labelName2;
|
|
|
|
|
|
let legend = [name1, name2];
|
|
|
|
|
|
let data = [];
|
|
|
|
|
|
DATA.forEach((item, index) => {
|
|
|
|
|
|
switch (index) {
|
|
|
|
|
|
case 0: {
|
|
|
|
|
|
data = this.data1;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 1: {
|
|
|
|
|
|
data = this.data2;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 2: {
|
|
|
|
|
|
data = this.data3;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 3: {
|
|
|
|
|
|
data = this.data4;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 4: {
|
|
|
|
|
|
data = this.data5;
|
|
|
|
|
|
if (item.data.length == 5) {
|
|
|
|
|
|
item.data.push(0)
|
|
|
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 5: {
|
|
|
|
|
|
data = this.data6;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 6: {
|
|
|
|
|
|
data = this.data7;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
case 7: {
|
|
|
|
|
|
data = this.data8;
|
|
|
|
|
|
break;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
this.createdChart(`charts${index+1}`, item.name, legend, data, item.data);
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
//生成图表
|
|
|
|
|
|
async createdChart(EL, TITLE, LEGEND, DATA1, DATA2) {
|
|
|
|
|
|
let categories = [];
|
|
|
|
|
|
let seriesData1 = [];
|
|
|
|
|
|
let seriesData2 = DATA2;
|
|
|
|
|
|
DATA1.forEach(item => {
|
|
|
|
|
|
categories.push(item.Name);
|
|
|
|
|
|
seriesData1.push(parseInt(item.Score));
|
|
|
|
|
|
})
|
|
|
|
|
|
let seriesDataAll = [{
|
|
|
|
|
|
name: LEGEND[0],
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: seriesData1
|
|
|
|
|
|
}];
|
|
|
|
|
|
if (seriesData2) {
|
|
|
|
|
|
seriesDataAll.push({
|
|
|
|
|
|
name: LEGEND[1],
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: seriesData2
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
const option = {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: "",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 14
|
|
|
|
|
|
},
|
|
|
|
|
|
top: 10,
|
|
|
|
|
|
left: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show:false,
|
|
|
|
|
|
trigger: 'axis'
|
|
|
|
|
|
},
|
|
|
|
|
|
label:{
|
|
|
|
|
|
show:true,
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
// data: ['Email', 'Union Ads']
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
data: LEGEND,
|
|
|
|
|
|
right: 4,
|
|
|
|
|
|
top: 4
|
|
|
|
|
|
},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: '3%',
|
|
|
|
|
|
right: '4%',
|
|
|
|
|
|
bottom: '3%',
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
|
|
data: categories
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'value'
|
|
|
|
|
|
},
|
|
|
|
|
|
series: seriesDataAll
|
|
|
|
|
|
// series: [
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: 'line',
|
|
|
|
|
|
// data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// type: 'line',
|
|
|
|
|
|
// data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
|
|
|
// }
|
|
|
|
|
|
// ]
|
|
|
|
|
|
}
|
|
|
|
|
|
// chart 图表实例不能存在data里
|
|
|
|
|
|
|
|
|
|
|
|
if (EL == "charts1") {
|
|
|
|
|
|
|
|
|
|
|
|
this.option1 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts1.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption(this.option1 )
|
|
|
|
|
|
} else if (EL == "charts2") {
|
|
|
|
|
|
this.option2 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts2.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption(this.option2)
|
|
|
|
|
|
} else if (EL == "charts3") {
|
|
|
|
|
|
this.option3 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts3.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption( this.option3 )
|
|
|
|
|
|
} else if (EL == "charts4") {
|
|
|
|
|
|
this.option4 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts4.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption( this.option4)
|
|
|
|
|
|
} else if (EL == "charts5") {
|
|
|
|
|
|
this.option5 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts5.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption(this.option5)
|
|
|
|
|
|
} else if (EL == "charts6") {
|
|
|
|
|
|
this.option6 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts6.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption(this.option6)
|
|
|
|
|
|
} else if (EL == "charts7") {
|
|
|
|
|
|
this.option7 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts7.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption( this.option7)
|
|
|
|
|
|
} else if (EL == "charts8") {
|
|
|
|
|
|
this.option8 = option;
|
|
|
|
|
|
const chart = await this.$refs.charts8.init(echarts, "theme");
|
|
|
|
|
|
chart.clear();
|
|
|
|
|
|
chart.setOption(this.option8)
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
goback() {
|
|
|
|
|
|
uni.navigateBack(-1);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
|
|
|
|
|
|
page {
|
|
|
|
|
|
background: #EEF1F8 url('#{$image-oss-url}/test_bg.png') no-repeat;
|
|
|
|
|
|
background-size: contain;
|
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
$image-oss-url: "https://51xuanxiao.oss-cn-hangzhou.aliyuncs.com/Resource/xcx_sygh";
|
|
|
|
|
|
.vip-tip-block {
|
|
|
|
|
|
width: 650rpx;
|
|
|
|
|
|
height: 400rpx;
|
|
|
|
|
|
background: #fff url('#{$image-oss-url}/report-vip-tip.png') no-repeat;
|
|
|
|
|
|
background-size: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tip-layer {
|
|
|
|
|
|
.title {
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.img-content {
|
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
|
height: 1200rpx;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
|
width: 690rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.interest-report-wrap {
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
|
|
|
|
|
|
.head-bar {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
line-height: 60rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.go-back {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 10rpx;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
|
height: 60rpx;
|
|
|
|
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABUklEQVRoQ+3ZOwrCQBCA4UlyCVsrQauQdPYewcNYWXoHK1s9gYeYdIKlracYWYggkgiTnccuaB3D/+1sYEMKyPxXZN4Pf0DMBOu6XpZluQOANRGduq7bc+/nNoE+/gwAq3c0IrJ72H/grtDQ9UPxAPBAxDn3/uaAkfjQvUXES9IA6fiANZuARrwZQCveBKAZrw7QjlcFWMSrAaziVQCW8eIA63hRgEe8GMArXgTgGR8N8I6PAqQQPxmQSvxkQNM0VwDYfJ3dJ53nuef/7+vZx+l+9W8pxE+aQNu2CyK6ZwsI4VlvoQDI/iFOCcF+iD/3fgqTiAKkMIlogDdCBOCJEAN4IUQBHghxgDVCBWCJUANYIVQBFgh1gDbCBKCJMANoIUwBGghzwA/EExFn3HdkF8AYIpvPrO9VDu8TVVUdiKghomNWH7q5W2Xserct9Af0K/AChQ/cMY9OGScAAAAASUVORK5CYII=") center no-repeat;
|
|
|
|
|
|
background-size: 38rpx 38rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.video-content {
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
width: 710rpx;
|
|
|
|
|
|
background: #000;
|
|
|
|
|
|
|
|
|
|
|
|
video {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
|
|
|
padding: 35rpx 20rpx 220rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.section-block {
|
|
|
|
|
|
padding: 40rpx 30rpx 40rpx;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
.s-line {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
width: 630rpx;
|
|
|
|
|
|
margin: 15rpx auto 45rpx;
|
|
|
|
|
|
height: 2rpx;
|
|
|
|
|
|
background: #FAFAFA;
|
|
|
|
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: -56rpx;
|
|
|
|
|
|
top: -16rpx;
|
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #EEF1F8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
right: -56rpx;
|
|
|
|
|
|
top: -16rpx;
|
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background: #EEF1F8;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.code-value {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: flex-end;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
padding-top: 10rpx;
|
|
|
|
|
|
padding-bottom: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.scort {
|
|
|
|
|
|
font-size: 36rpx;
|
|
|
|
|
|
color: #3095F9;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chat-wrap {
|
|
|
|
|
|
width: 622rpx;
|
|
|
|
|
|
height: 448rpx;
|
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
margin: 0 14rpx;
|
|
|
|
|
|
box-shadow: 0 0 1rpx 14rpx #BBDCFF;
|
|
|
|
|
|
|
|
|
|
|
|
.row-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.charts-box {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 190px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chat {
|
|
|
|
|
|
height: 370rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.blue-bg {
|
|
|
|
|
|
box-shadow: 0 0 1rpx 14rpx #BBDCFF;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.purple-bg {
|
|
|
|
|
|
box-shadow: 0 0 1rpx 14rpx #C7C7FF;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.orange-bg {
|
|
|
|
|
|
box-shadow: 0 0 1rpx 14rpx #FFD4A8;
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
&.green-bg {
|
|
|
|
|
|
box-shadow: 0 0 1rpx 14rpx #8FDAB1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.chat-title {
|
|
|
|
|
|
padding-top: 25rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
border-radius: 12rpx 12rpx 0 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: -3rpx;
|
|
|
|
|
|
left: -6rpx;
|
|
|
|
|
|
width: calc(100% + 12rpx);
|
|
|
|
|
|
height: 12rpx;
|
|
|
|
|
|
background: #BBDCFF;
|
|
|
|
|
|
border-radius: 12rpx;
|
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tip-icon {
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
|
|
|
width: 56rpx;
|
|
|
|
|
|
height: 56rpx;
|
|
|
|
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAM1BMVEUAAADMzMzPz8/Hx8fLy8vMzMzNzc3Nzc3KysrMzMzMzMzMzMzKysrLy8vMzMzMzMzMzMxTlLHLAAAAEHRSTlMA3xAgQFCPfzCfr+9gcL/P9mj/kgAAAQFJREFUKM9tUtsWwyAIUwS1um78/9fOFPB0l7woEAIi6QZikV7SH5Sa9UJu5Tt06A0H3WM9I2U0lnPgOjltPBDqYTHCj20to9Kl0HFQXQ7n0lSV8OkTirKUrK1j5SGW1QDv4h1Xo4sFsabaiNrKdWYx59Vb1ozjpdNTqjsBWCZIwQVlpMsygWmZaYDUVU9ruievnFJUE3uHo+3ZMfwCxm1Uh90siaHjINVX3E/VDsdwO1SioWI9O0oOXrgrKA6Ki1Xz8UWdabwYXwweeBrdB++VVCVewtHZdLW+P5tKio/ljzXZVvE1CfBEeJzCbeRYqA36XM2fzW2x1PX/0ncRppvjDWNoDuKTMIXYAAAAAElFTkSuQmCC") center no-repeat;
|
|
|
|
|
|
background-size: 50%;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.desc-item-wrap {
|
|
|
|
|
|
.desc-item {
|
|
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.name-block {
|
|
|
|
|
|
width: 590rpx;
|
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
background: #F2F9FF;
|
|
|
|
|
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
|
|
|
|
|
border: 2rpx solid #E7F4FD;
|
|
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
|
color: #000000;
|
|
|
|
|
|
margin-bottom: 15rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.desc {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #1677ff;
|
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.list {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
line-height: 44rpx;
|
|
|
|
|
|
width: 630rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
|
.strong {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.txt {
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
