|
|
@@ -7,12 +7,13 @@
|
|
|
<!-- <span @click="setType(3)" :class="{ active: type == 3 }">其他项目</span> -->
|
|
|
</div>
|
|
|
<div style="display: flex; width: 100%; height: calc(100% - 50px)">
|
|
|
- <div id="person_canvas1" class="echart" v-if="type == 1"
|
|
|
+ <div id="person_canvas1" class="echart" v-show="type == 1"
|
|
|
style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
|
|
|
<span v-if="!eJson">暂无数据</span>
|
|
|
</div>
|
|
|
- <div id="person_canvas2" class="echart" v-if="type == 2" style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
|
|
|
- <div class="box2" v-if="work.length">
|
|
|
+ <div id="person_canvas2" class="echart" v-show="type == 2"
|
|
|
+ style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
|
|
|
+ <!-- <div class="box2" v-show="work.length ? true : false">
|
|
|
<div v-for="(item,index) in work" :key="index" class="target_box">
|
|
|
<div class="target_task">
|
|
|
<span>第{{item.stage+1}}阶段</span>
|
|
|
@@ -31,7 +32,9 @@
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
- <span v-if="!work.length">暂无数据</span>
|
|
|
+ <span v-show="!work.length ? true : false">暂无数据</span> -->
|
|
|
+ <span v-show="!randarJson.length ? true : false">暂无数据</span>
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -40,14 +43,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { L } from 'caniuse-lite/data/browserVersions';
|
|
|
|
|
|
|
|
|
export default {
|
|
|
props: ["userid", "courseid"],
|
|
|
data() {
|
|
|
return {
|
|
|
- isloading:false,
|
|
|
+ randarJson: [],
|
|
|
+ isloading: false,
|
|
|
chartObj2: null,
|
|
|
chartObj3: null,
|
|
|
color: [],
|
|
|
@@ -171,6 +174,85 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
+ radarOption: {
|
|
|
+ splitNumber: 5,
|
|
|
+ tooltip: {
|
|
|
+ triggerOn: "mousemove",
|
|
|
+ //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
|
|
|
+ confine: true,
|
|
|
+ enterable: true, //鼠标是否可以移动到tooltip区域内
|
|
|
+ backgroundColor: "rgba(255,255,255,0.7)",
|
|
|
+ textStyle: {
|
|
|
+ // 文字样式
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ left: "right",
|
|
|
+ top: "bottom",
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ radius: ["0%", "70%"],
|
|
|
+ shape: "circle",
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ axisName: {
|
|
|
+ textStyle: {
|
|
|
+ // 文字样式
|
|
|
+ color: "#58a5e6",
|
|
|
+ },
|
|
|
+ formatter: function (value, indicator) {
|
|
|
+ // value = value.replace(/\S{2}/g, function (match) {
|
|
|
+ // return match + "\n";
|
|
|
+ // });
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ indicator: [
|
|
|
+ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
|
|
|
+ splitArea: {
|
|
|
+ show: true,
|
|
|
+ areaStyle: {
|
|
|
+ color: "rgba(255,0,0,0)", // 图表背景的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: "rgba(131,141,158,.1)", // 设置网格的颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "目标得分占比", // tooltip中的标题
|
|
|
+ type: "radar", // 表示是雷达图
|
|
|
+ symbol: "circle", // 拐点的样式，还可以取值'rect','angle'等
|
|
|
+ symbolSize: 8, // 拐点的大小
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 1,
|
|
|
+ opacity: 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ // 设置各个指标原始值
|
|
|
+ value: [],
|
|
|
+ // 设置区域边框和区域的颜色
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#58a5e6",
|
|
|
+ lineStyle: {
|
|
|
+ color: "#58a5e6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -307,23 +389,43 @@ export default {
|
|
|
// this.option3.series[2].data = _array23;
|
|
|
// this.option3.series[3].data = _array24;
|
|
|
// this.option3.series[4].data = _array25;
|
|
|
-
|
|
|
- // this.chartObj3 = chartObj3;
|
|
|
- // this.chartObj3.setOption(this.option3);
|
|
|
- var _work = []
|
|
|
-
|
|
|
- for (var i = 0; i < this.workW.length; i++) {
|
|
|
- _work[i] = { stage: this.workW[i].stage, task: this.workW[i].task, work: [], count: 0 }
|
|
|
- for (var j = 0; j < this.workW[i].work.length; j++) {
|
|
|
- for (var k = 0; k < this.workW[i].work[j].target.length; k++) {
|
|
|
- this.color.push(this.color16())
|
|
|
- _work[i].work.push(this.workW[i].work[j].target[k])
|
|
|
- _work[i].count += this.workW[i].work[j].target[k].count
|
|
|
- }
|
|
|
+ if (this.randarJson.length) {
|
|
|
+ const chartObj3 = this.$echarts.init(
|
|
|
+ //劳动课程
|
|
|
+ this.$el.querySelector("#person_canvas2")
|
|
|
+ );
|
|
|
+ let radarOption = JSON.parse(JSON.stringify(this.radarOption))
|
|
|
+ for (var i = 0; i < this.randarJson.length; i++) {
|
|
|
+ radarOption.radar.indicator.push({
|
|
|
+ name: this.randarJson[i].target,
|
|
|
+ max: 5,
|
|
|
+ });
|
|
|
+ radarOption.series[0].data[0].value.push(this.randarJson[i].value / this.randarJson[i].count);
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ this.chartObj3 = chartObj3;
|
|
|
+ this.chartObj3.setOption(radarOption);
|
|
|
+
|
|
|
}
|
|
|
- this.work = _work;
|
|
|
- console.log(_work);
|
|
|
+
|
|
|
+ // var _work = []
|
|
|
+ // this.color = []
|
|
|
+ // for (var i = 0; i < this.workW.length; i++) {
|
|
|
+ // _work[i] = { stage: this.workW[i].stage, task: this.workW[i].task, work: [], count: 0 }
|
|
|
+ // for (var j = 0; j < this.workW[i].work.length; j++) {
|
|
|
+ // for (var k = 0; k < this.workW[i].work[j].target.length; k++) {
|
|
|
+ // this.color.push(this.color16())
|
|
|
+ // _work[i].work.push(this.workW[i].work[j].target[k])
|
|
|
+ // _work[i].count += this.workW[i].work[j].target[k].count
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // this.work = _work;
|
|
|
+ // console.log(_work);
|
|
|
+ // this.$forceUpdate();
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
});
|
|
|
let _this = this;
|
|
|
@@ -376,6 +478,8 @@ export default {
|
|
|
let _allWork = res.data[4];
|
|
|
let _allComment = res.data[5];
|
|
|
let _isWorks = res.data[6];
|
|
|
+ var randarJson = []
|
|
|
+ var randarAarray = []
|
|
|
|
|
|
this.eJson = res.data[2][0].content ? JSON.parse(res.data[2][0].content) : "";
|
|
|
|
|
|
@@ -444,95 +548,120 @@ export default {
|
|
|
for (var i = 0; i < _isWorks.length; i++) {
|
|
|
if (chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList) {
|
|
|
_workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: chapters[_isWorks[i].stage].chapterInfo[0].taskJson[_isWorks[i].task].eList })
|
|
|
- } else {
|
|
|
- let elist = [
|
|
|
- {
|
|
|
- "value": "意识能力",
|
|
|
- "score": 5,
|
|
|
- "target": [
|
|
|
- {
|
|
|
- "name": "意识能力1",
|
|
|
- "per": 0.5
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "意识能力2",
|
|
|
- "per": 0.5
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "value": "科学探究能力",
|
|
|
- "score": 5,
|
|
|
- "target": [
|
|
|
- {
|
|
|
- "name": "科学探究能力1",
|
|
|
- "per": 0.5
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "科学探究能力2",
|
|
|
- "per": 0.5
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "value": "实践创新能力",
|
|
|
- "score": 5,
|
|
|
- "target": [
|
|
|
- {
|
|
|
- "name": "实践创新能力1",
|
|
|
- "per": 0.5
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "实践创新能力2",
|
|
|
- "per": 0.5
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "value": "学习反思能力",
|
|
|
- "score": 5,
|
|
|
- "target": [
|
|
|
- {
|
|
|
- "name": "学习反思能力1",
|
|
|
- "per": 0.5
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "学习反思能力2",
|
|
|
- "per": 0.5
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- "value": "工程思维能力",
|
|
|
- "score": 5,
|
|
|
- "target": [
|
|
|
- {
|
|
|
- "name": "工程思维能力1",
|
|
|
- "per": 0.5
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "工程思维能力2",
|
|
|
- "per": 0.5
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: elist })
|
|
|
}
|
|
|
+ // else {
|
|
|
+ // let elist = [
|
|
|
+ // {
|
|
|
+ // "value": "意识能力",
|
|
|
+ // "score": 5,
|
|
|
+ // "target": [
|
|
|
+ // {
|
|
|
+ // "name": "意识能力1",
|
|
|
+ // "per": 0.5
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "name": "意识能力2",
|
|
|
+ // "per": 0.5
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "value": "科学探究能力",
|
|
|
+ // "score": 5,
|
|
|
+ // "target": [
|
|
|
+ // {
|
|
|
+ // "name": "科学探究能力1",
|
|
|
+ // "per": 0.5
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "name": "科学探究能力2",
|
|
|
+ // "per": 0.5
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "value": "实践创新能力",
|
|
|
+ // "score": 5,
|
|
|
+ // "target": [
|
|
|
+ // {
|
|
|
+ // "name": "实践创新能力1",
|
|
|
+ // "per": 0.5
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "name": "实践创新能力2",
|
|
|
+ // "per": 0.5
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "value": "学习反思能力",
|
|
|
+ // "score": 5,
|
|
|
+ // "target": [
|
|
|
+ // {
|
|
|
+ // "name": "学习反思能力1",
|
|
|
+ // "per": 0.5
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "name": "学习反思能力2",
|
|
|
+ // "per": 0.5
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "value": "工程思维能力",
|
|
|
+ // "score": 5,
|
|
|
+ // "target": [
|
|
|
+ // {
|
|
|
+ // "name": "工程思维能力1",
|
|
|
+ // "per": 0.5
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // "name": "工程思维能力2",
|
|
|
+ // "per": 0.5
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // _workW.push({ stage: _isWorks[i].stage, task: _isWorks[i].task, rate: JSON.parse(_isWorks[i].rate), elist: elist })
|
|
|
+ // }
|
|
|
}
|
|
|
- for (var i = 0; i < _workW.length; i++) {
|
|
|
- _workW[i].work = []
|
|
|
- for (var j = 0; j < _workW[i].elist.length; j++) {
|
|
|
- for (var k = 0; k < _workW[i].elist[j].target.length; k++) {
|
|
|
- _workW[i].elist[j].target[k].count = _workW[i].rate[_workW[i].elist[j].value] * _workW[i].elist[j].target[k].per
|
|
|
+
|
|
|
+ if (_workW[0].elist[0].target) {
|
|
|
+ for (var i = 0; i < _workW.length; i++) {
|
|
|
+ _workW[i].work = []
|
|
|
+ for (var j = 0; j < _workW[i].elist.length; j++) {
|
|
|
+ if (randarAarray.indexOf(_workW[i].elist[j].target) == -1) {
|
|
|
+ randarAarray.push(_workW[i].elist[j].target)
|
|
|
+ }
|
|
|
+ // for (var k = 0; k < _workW[i].elist[j].target.length; k++) {
|
|
|
+ // _workW[i].elist[j].target[k].count = _workW[i].rate[_workW[i].elist[j].value] * _workW[i].elist[j].target[k].per
|
|
|
+ // }
|
|
|
+ _workW[i].work.push({ name: _workW[i].elist[j].value, target: _workW[i].elist[j].target })
|
|
|
+ _workW[i].work[_workW[i].work.length - 1][_workW[i].elist[j].value] = _workW[i].rate[_workW[i].elist[j].value]
|
|
|
+ _workW[i].work[_workW[i].work.length - 1].value = _workW[i].rate[_workW[i].elist[j].value]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (var k = 0; k < randarAarray.length; k++) {
|
|
|
+ randarJson.push({ target: randarAarray[k], count: 0, value: 0 })
|
|
|
+ for (var i = 0; i < _workW.length; i++) {
|
|
|
+ for (var j = 0; j < _workW[i].work.length; j++) {
|
|
|
+ if (_workW[i].work[j].target == randarAarray[k]) {
|
|
|
+ randarJson[k].count++
|
|
|
+ randarJson[k].value += _workW[i].work[j].value
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- _workW[i].work.push({ name: _workW[i].elist[j].value, target: _workW[i].elist[j].target })
|
|
|
- _workW[i].work[_workW[i].work.length - 1][_workW[i].elist[j].value] = _workW[i].rate[_workW[i].elist[j].value]
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
console.log('chapter=-----', chapters);
|
|
|
console.log('_workW=-----', _workW);
|
|
|
+ console.log('randarAarray=-----', randarAarray);
|
|
|
+ console.log('randarJson=-----', randarJson);
|
|
|
+
|
|
|
this.workW = _workW
|
|
|
+ this.randarJson = randarJson
|
|
|
+
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.isloading = false
|
|
|
@@ -550,80 +679,6 @@ export default {
|
|
|
|
|
|
}
|
|
|
this.getInfo();
|
|
|
- // this.option2.series.data = [
|
|
|
- // {
|
|
|
- // name: "信息意识",
|
|
|
- // value: 15,
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // name: "信息应用意识",
|
|
|
- // value: this.randomNum(1, 5),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息安全意识",
|
|
|
- // value: this.randomNum(1, 5),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息感知意识",
|
|
|
- // value: this.randomNum(1, 5),
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息社会责任",
|
|
|
- // value: 15,
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // name: "信息伦理道德",
|
|
|
- // value: this.randomNum(1, 5),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息法律法规",
|
|
|
- // value: this.randomNum(1, 10),
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息知识与技能",
|
|
|
- // value: 15,
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // name: "信息应用技能",
|
|
|
- // value: 5,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息科学知识",
|
|
|
- // value: 10,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息思维与行为2",
|
|
|
- // value: 15,
|
|
|
- // children: [
|
|
|
- // {
|
|
|
- // name: "信息思维",
|
|
|
- // value: this.randomNum(1, 10),
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: "信息行为",
|
|
|
- // value: this.randomNum(1, 5),
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // },
|
|
|
- // ];
|
|
|
- // this.chartObj2.setOption(this.option2);
|
|
|
- // let data = [];
|
|
|
- // for (var i = 1; i < 10; i++) {
|
|
|
- // for (var j = 0; j < 9; j++) {
|
|
|
- // var x = i;
|
|
|
- // var y = j;
|
|
|
- // var z = this.randomNum(0, 10);
|
|
|
- // data.push([x, y, z]);
|
|
|
- // }
|
|
|
- // }
|
|
|
- // this.option3.series[0].data = data;
|
|
|
- // this.chartObj3.setOption(this.option3);
|
|
|
},
|
|
|
color16() {//十六进制颜色随机
|
|
|
var r = Math.floor(Math.random() * 256);
|
