Skip to content

P
pica.cloud.web-education-admin
提交 79d81961 编写于 作者: zhentian.jia's avatar zhentian.jia
浏览文件
操作

考试分析UI样式修改

上级 4c257376
隐藏空白字符变更
内嵌 并排
正在显示 包含 125 行增加 和 96 行删除
src/utils/learning/chartData.js
浏览文件 @ 79d81961
......@@ -483,6 +483,21 @@ export function educationEffect(xAxisData, seriesBefore ,seriesAfter) {
trigger: "axis",
axisPointer: {
type: "shadow"
},
formatter: function (params) {
let relVal = params[0].name + "";
let value = 0;
relVal += value + "";
let divList = [];
divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = 0; j <= params.length - 1; j++) {
relVal +=
"<br/>" + divList[j] +
params[j].seriesName +
"： " + params[j].value + "%";
}
return relVal;
}
},
color: ["#5D7092", "#FFB01B"],
......@@ -513,12 +528,26 @@ export function educationEffect(xAxisData, seriesBefore ,seriesAfter) {
type: "bar",
barWidth: 10,
data: seriesBefore,
label: {
show: true,
position: "top",
formatter: "{c}%",
rotate: -90,
offset: [-5, -17]
}
},
{
name: "项目后总正确率",
type: "bar",
barWidth: 10,
data: seriesAfter,
label: {
show: true,
position: "top",
formatter: "{c}%",
rotate: -90,
offset: [-5, -17]
}
}
]
};
......@@ -534,7 +563,22 @@ export function knowledgeEffect(xAxisData, seriesBefore ,seriesAfter) {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
formatter: function (params) {
let relVal = params[0].name + "";
let value = 0;
relVal += value + "";
let divList = [];
divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
divList[1] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
for (let j = 0; j <= params.length - 1; j++) {
relVal +=
"<br/>" + divList[j] +
params[j].seriesName +
"： " + params[j].value + "%";
}
return relVal;
}
},
color: ["#5D7092", "#FFB01B"],
legend: {
......@@ -568,12 +612,26 @@ export function knowledgeEffect(xAxisData, seriesBefore ,seriesAfter) {
type: "bar",
barWidth: 10,
data: seriesBefore,
label: {
show: true,
position: "top",
formatter: "{c}%", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -17]
},
},
{
name: "培训后正确率",
type: "bar",
barWidth: 10,
data: seriesAfter
data: seriesAfter,
label: {
show: true,
position: "top",
formatter: "{c}%", //这是关键，在需要的地方加上就行了
rotate: -90,
offset: [-5, -17]
}
}
]
};
......@@ -636,7 +694,7 @@ export function examTimes() {
label: {
show: true,
position: "top",
formatter: "{c}", //这是关键，在需要的地方加上就行了
formatter: "{c}",
rotate: -90,
offset: [-5, -15]
}
......
src/views/learning/item-examination-analysis.vue
浏览文件 @ 79d81961
......@@ -2,29 +2,19 @@
<div class="examination-analysis">
<div class="box-list">
<div v-for="(item , index) in cardData" :key="index" class="box">
<el-card class="box-card">
<!-- <el-tooltip class="item-tool" placement="bottom-end" effect="light">
<div slot="content">
<p v-for="text in item.content">{{ text }}</p>
</div>
<i class="el-icon-question notice"></i>
</el-tooltip>-->
<div class="left-content">
<p class="value">{{ item.value }}</p>
<p class="title">{{ item.title }}</p>
</div>
<!-- <div class="vertical"></div>
<div class="right-content">
<p class="has">{{ item.hasKey }}:{{ item.hasNum }}</p>
<p class="should">{{ item.shouldKey }}:{{ item.shouldNum }}</p>
</div>-->
<el-card class="box-card" v-bind:class="{ 'box-last': index == 2 }">
<!-- <div class="box-center"> -->
<p class="value">{{ item.value }}</p>
<p class="title">{{ item.title }}</p>
<!-- </div> -->
</el-card>
</div>
</div>
<div class="spacing"></div>
<div class="chart-title">完成项目考试次数情况</div>
<div class="chart" id="examTimes" ref="examTimes"></div>
<!-- <div class="chart-title">完成项目考试分数情况</div>
<div class="chart" id="examScore" ref="examScore"></div> -->
<div class="chart" id="examScore" ref="examScore"></div>-->
<div class="table">
<el-table :data="tableData" style="width: 100%" border>
<el-table-column prop="examName" label="考试名" min-width="150" align="center"></el-table-column>
......@@ -122,8 +112,9 @@ export default {
showTd: [false, false, false, false],
echartsData: {
chart0: {},
chart1: {},
chart1: {}
},
scoreData: {}
};
},
created() {
......@@ -180,11 +171,9 @@ export default {
vm.POST("stats/report/exam", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
// if(res.data.projectExamCount == 0 ) {
// vm.$message("没有相关数据，请重新选择查询范围");
// }
vm.scoreData = res.data;
vm.setCardData(res.data);
// vm.labelTd = res.data.gradeNameList;
vm.setExamTimes(res.data.examTimesList);
} else {
vm.$message(res.message);
}
......@@ -242,18 +231,16 @@ export default {
vm.echartsData.chart0.resize();
vm.echartsData.chart1.resize();
};
},100);
}, 100);
},
setExamTimes(data) {
let myChart = echarts.init(this.$refs.durationChart);
let myChart = echarts.init(this.$refs.examTimes);
let option = chartData.examTimes();
myChart.setOption(option);
vm.echartsData.chart0 = myChart;
vm.updateResize();
},
setExamScore(data) {
},
setExamScore(data) {},
// 跳转查看名单页面
goPage(data) {
let checkAll = operationData.hasAll(vm.formInline.organization);
......@@ -301,7 +288,6 @@ export default {
.examination-analysis {
background: #fff;
overflow: hidden;
padding: 10px;
.weight {
font-weight: bold;
}
......@@ -321,83 +307,67 @@ export default {
.table {
margin-top: 30px;
}
.spacing {
position: relative;
width: 100%;
height: 20px;
background: #f0f2f5;
}
.box-list {
position: relative;
// width: 100%;
height: 110px;
background: #f0f2f5;
.box-card {
position: relative;
background-color: #e3efed;
color: #449284;
width: 31%;
background-color: #ffffff;
width: 32%;
margin-right: 2%;
height: 110px;
height: 120px;
float: left;
.notice {
position: absolute;
z-index: 999;
top: 21px;
right: 14px;
width: 16px;
height: 16px;
}
.el-card__header {
border-bottom-width: 0;
}
.el-card__body {
padding: 0px;
}
.left-content {
position: relative;
float: left;
width: 100%;
height: 110px;
text-align: left;
padding: 23px 0 0 20px;
.title {
font-size: 14px;
height: 14px;
line-height: 14px;
}
.value {
margin-top: 20px;
margin-bottom: 20px;
height: 22px;
font-size: 30px;
line-height: 22px;
font-weight: 500;
}
.value {
color: #373839;
text-align: center;
margin-top: 24px;
margin-bottom: 8px;
height: 45px;
line-height: 45px;
font-size: 32px;
font-weight: 500;
}
.vertical {
position: absolute;
left: 34%;
float: left;
margin-top: 23px;
width: 1px;
height: 57px;
background-color: #c1d8d4;
}
.right-content {
position: relative;
float: left;
width: 64%;
height: 110px;
text-align: left;
.title {
color: #666666;
text-align: center;
font-size: 14px;
padding: 23px 0 0 29px;
p {
height: 14px;
line-height: 14px;
}
.should {
margin-top: 28px;
}
height: 20px;
line-height: 20px;
}
}
.box-card2 {
width: 48%;
margin-right: 1%;
.box-last {
margin-right: 0%;
}
}
.chart-title {
position: relative;
margin-top: 17px;
width: 100%;
height: 60px;
font-size: 18px;
font-weight: 600;
line-height: 60px;
color: #000000;
border-bottom: 1px solid #e4e7ed;
}
.chart {
position: relative;
margin: 20px auto 0 auto;
width: 860px;
height: 350px;
}
}
</style>
src/views/learning/item-learning-effect.vue
浏览文件 @ 79d81961
......@@ -107,8 +107,8 @@ export default {
title: "培训前后正确率"
}
];
cardData[0].value = data.beforeRate*100 + "%";
cardData[1].value = data.afterRate*100 + "%";
cardData[0].value = (data.beforeRate*100).toFixed(2) + "%";
cardData[1].value = (data.afterRate*100).toFixed(2) + "%";
vm.cardData = cardData;
},
setEducation(data) {
......@@ -118,8 +118,8 @@ export default {
let seriesAfter = [];
for(let i = 0; i < data.length ; i++) {
xAxisData.push(data[i].classifyName);
seriesBefore.push(data[i].beforeRate*100);
seriesAfter.push(data[i].afterRate*100);
seriesBefore.push((data[i].beforeRate*100).toFixed(2));
seriesAfter.push((data[i].afterRate*100).toFixed(2));
}
let option = chartData.educationEffect(xAxisData, seriesBefore ,seriesAfter);
myChart.setOption(option);
......@@ -133,8 +133,8 @@ export default {
let seriesAfter = [];
for(let i = 0; i < data.length ; i++) {
xAxisData.push(data[i].classifyName);
seriesBefore.push(data[i].beforeRate*100);
seriesAfter.push(data[i].afterRate*100);
seriesBefore.push((data[i].beforeRate*100).toFixed(2));
seriesAfter.push((data[i].afterRate*100).toFixed(2));
}
let option = chartData.knowledgeEffect(xAxisData, seriesBefore ,seriesAfter);
myChart.setOption(option);
......
src/views/learning/item-list.vue
浏览文件 @ 79d81961
......@@ -83,6 +83,7 @@
<el-button @click="resetForm()">重置</el-button>
</div>
</el-form>
<div class="tabs-button"></div>
<div class="button-group">
<el-button v-if="roleType == 'L1' || roleType == 'L2'" type="default" size="small" @click="changeDate">数据修改</el-button>
<!-- <el-button type="default" size="small" @click="update" v-else>修改范围</el-button> -->
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或