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