Commit 52ec9059 authored by WBY1026's avatar WBY1026

数据统计-课程部分

parent dbc92499
......@@ -2,6 +2,7 @@ import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import moment from 'moment'
import Element from 'element-ui'
import echarts from "echarts";
import './utils/rem.js' // 自适应分辨率
// import ElementUI from 'element-ui'
// import './styles/element-variables.scss'
......@@ -77,6 +78,7 @@ Vue.prototype.UIUrl = process.env.VUE_APP_UI
Vue.prototype.$ha = halberd
Vue.prototype.$uploadFile = uploadPublic
Vue.prototype.$haveAuth = includePermission
Vue.prototype.$echarts = echarts;
// set ElementUI lang to EN
Vue.prototype.$axios = xhr
......
<template>
<div class="errLog-manage">
考核视图
</div>
</template>
<script>
import { getDataCache, setDataCache } from '@/assets/js/filterData'
export default {
name: 'assessView',
data() {
return {
}
},
computed: {
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
<template>
<div class="errLog-manage">
<!-- 上方4卡 -->
<div class="upCard">
<div class="topLeft">
<div class="title">
<div class="decoration"></div>
<div class="text">难度列表</div>
</div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>
</div>
<div class="topRight">
<div class="title">
<div class="decoration"></div>
<div class="text">课程方案</div>
</div>
<div id="chart5" class="chart"></div>
<div id="chart6" class="chart"></div>
<div id="chart7" class="chart"></div>
<div id="chart8" class="chart"></div>
</div>
<div class="downLeft">
<div class="title">
<div class="decoration"></div>
<div class="text">技术分布</div>
</div>
<div id="bar1"></div>
</div>
<div class="downRight">
<div class="title">
<div class="decoration"></div>
<div class="text">岗位分布</div>
</div>
<div id="bar2"></div>
</div>
</div>
<!-- 下方列表 -->
<div class="downList">
<div class="title">
<div class="decoration"></div>
<div class="text">统计列表</div>
</div>
<el-table v-loading="loading" border :data="list">
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column label="课程名称" align="center" prop="className" />
<el-table-column label="课时数" align="center" prop="classHour" width="130"
:show-overflow-tooltip="true" />
<el-table-column label="学习总人数" align="center" prop="allPeople" :show-overflow-tooltip="true" />
<el-table-column label="未开始人数" align="center" prop="noStart"></el-table-column>
<el-table-column label="学习完成人数" align="center" prop="complete"></el-table-column>
<el-table-column label="参与考核人数" align="center" prop="participants"></el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
</div>
</div>
</template>
<script>
import { getDataCache, setDataCache } from '@/assets/js/filterData'
import { color } from 'echarts'
export default {
name: 'classView',
data() {
return {
// 是否加载
loading: false,
// 底部列表数据
list: [
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
},
{
className: '1',
classHour: '2',
allPeople: '3',
noStart: '4',
complete: '5',
participants: '6',
}
],
// 查询参数
total: 20,
queryParams: {
page: 1,
rows: 10,
username: '',
loginTime: ''
},
// 饼图数据
data: {
data1Percent: 100,
data1: [
{ value: 100, name: '全部课程' },
{ value: 0, name: '空' },
],
data1Color: ['#6495ED', '#ccc'],
data1Title: '全部课程',
data2Percent: 50,
data2: [
{ value: 50, name: '初级课程' },
{ value: 50, name: '空' },
],
data2Color: ['rgba(81,211,81, 1)', '#ccc'],
data2Title: '初级课程',
data3Percent: 30,
data3: [
{ value: 30, name: '中级课程' },
{ value: 70, name: '空' },
],
data3Color: ['rgba(254,192,61, 1)', '#ccc'],
data3Title: '中级课程',
data4Percent: 20,
data4: [
{ value: 20, name: '高级课程' },
{ value: 80, name: '空' },
],
data4Color: ['rgba(255,122,140, 1)', '#ccc'],
data4Title: '高级课程',
//
data5Percent: 100,
data5: [
{ value: 100, name: '全部课程' },
{ value: 0, name: '空' },
],
data5Color: ['#6495ED', '#ccc'],
data5Title: '全部课程',
data6Percent: 50,
data6: [
{ value: 50, name: '行业前沿适配' },
{ value: 50, name: '空' },
],
data6Color: ['rgba(81,211,81, 1)', '#ccc'],
data6Title: '行业前沿适配',
data7Percent: 30,
data7: [
{ value: 30, name: '岗位能力准入' },
{ value: 70, name: '空' },
],
data7Color: ['rgba(254,192,61, 1)', '#ccc'],
data7Title: '岗位能力准入',
data8Percent: 20,
data8: [
{ value: 20, name: '通用能力培养' },
{ value: 80, name: '空' },
],
data8Color: ['rgba(255,122,140, 1)', '#ccc'],
data8Title: '通用能力培养',
},
pieCss: {
radius: ['40%', '50%'],
center: ['50%', '46%'],
},
// 柱图数据
barData: {
bar1data: {
x: ['环境感知技术', '智能决策技术', '控制执行技术', '系统设计技术', '专用通信与网络技术', '大数据云控基础平台技术', '车路协同技术'],
y: [120, 200, 150, 80, 70, 110, 130],
color: "rgba(64,158,255, 1)"
},
bar2data: {
x: ['感知算法工程师', '决策控制算法工程师', '线控底盘系统工程师', '系统集成架构工程师', '安全算法工程师', '算法测试工程师'],
y: [120, 200, 150, 80, 70, 110],
color: "rgba(25,190,107, 1)"
}
}
}
},
computed: {
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
created() {
},
mounted() {
this.drawChart1()
this.drawChart2()
this.drawChart3()
this.drawChart4()
this.drawChart5()
this.drawChart6()
this.drawChart7()
this.drawChart8()
this.bar1()
this.bar2()
},
methods: {
/** 查询登录日志列表 */
getList() {
// this.loading = true
// list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
// this.list = response.rows
// this.total = response.total
// this.loading = false
// })
},
// 常用配置项需要整合提出来,不然太复杂
drawChart1() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart1"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data1Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data1,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data1Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data1Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart2() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart2"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data2Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data2,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data2Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data2Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart3() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart3"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data3Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data3,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data3Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data3Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart4() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart4"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data4Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data4,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data4Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data4Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart5() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart5"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data5Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data5,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data5Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data5Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart6() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart6"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data6Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data6,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data6Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data6Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart7() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart7"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data7Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data7,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data7Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data7Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
drawChart8() {
// 基于准备好的dom,初始化echarts实例 这个和上面的main对应
let myChart = this.$echarts.init(document.getElementById("chart8"));
// 指定图表的配置项和数据
let option = {
legend: {
show: false,
top: 'center',
left: 'center'
},
color: this.data.data8Color,
series: [
{
name: 'Access From',
type: 'pie',
radius: this.pieCss.radius,
avoidLabelOverlap: false,
center: this.pieCss.center,
labelLine: {
show: false
},
data: this.data.data8,
label: {
show: false
},
hoverAnimation: false
}
],
graphic: { // 添加原生图形元素组件
elements: [{
type: 'text', // 组件类型
left: 'center', //定位
top: '42%', // 定位
style: { // 样式
text: this.data.data8Percent, //文字
fontSize: 26, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'darkgray' // 字体颜色
}
},
{
type: 'text', // 组件类型
left: 'center', //定位
top: '80%', // 定位
style: { // 样式
text: this.data.data8Title, //文字
fontSize: 16, //文字大小
textAlign: 'center', //定位
width: 50,
height: 50,
fill: 'black' // 字体颜色
}
}]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
bar1() {
let myChart = this.$echarts.init(document.getElementById("bar1"));
var option = {
xAxis: {
type: 'category',
data: this.barData.bar1data.x,
axisLabel: {
//x轴文字的配置
show: true,
interval: 0,//使x轴文字显示全
textStyle: {
color: "rgba(153,153,179, 1)"
},
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 5; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}
},
yAxis: {
type: 'value'
},
itemStyle: {
color: this.barData.bar1data.color,
barBorderRadius: [5, 5, 0, 0],
},
series: [
{
data: this.barData.bar1data.y,
type: 'bar',
barWidth: '20px'
}
]
};
myChart.setOption(option);
},
bar2() {
let myChart = this.$echarts.init(document.getElementById("bar2"));
var option = {
xAxis: {
type: 'category',
data: this.barData.bar2data.x,
axisLabel: {
//x轴文字的配置
show: true,
interval: 0,//使x轴文字显示全
textStyle: {
color: "rgba(153,153,179, 1)"
},
formatter: function (params) {
var newParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 5; //一行显示几个字
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr;
}
} else {
newParamsName = params;
}
return newParamsName;
}
}
},
yAxis: {
type: 'value'
},
itemStyle: {
color: this.barData.bar2data.color,
barBorderRadius: [5, 5, 0, 0],
},
series: [
{
data: this.barData.bar2data.y,
type: 'bar',
barWidth: '20px'
}
]
};
myChart.setOption(option);
},
}
}
</script>
<style lang="scss" scoped>
.upCard {
width: 100%;
height: 500px;
// background-color: antiquewhite;
.topLeft {
position: relative;
float: left;
margin-left: 1%;
margin-top: 5px;
width: 48%;
height: 240px;
// border: 1px solid black;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
.title {
position: absolute;
left: 20px;
top: 20px;
.decoration {
float: left;
margin-top: 6px;
width: 8px;
height: 16px;
background-color: rgba(64, 158, 255, 1);
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
}
}
.chart {
float: left;
width: 25%;
height: 100%;
// background-color: aqua;
}
}
.topRight {
position: relative;
float: left;
margin-left: 2%;
margin-top: 5px;
width: 48%;
height: 240px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
.title {
position: absolute;
left: 20px;
top: 20px;
.decoration {
float: left;
margin-top: 6px;
width: 8px;
height: 16px;
background-color: rgba(64, 158, 255, 1);
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
}
}
.chart {
float: left;
width: 25%;
height: 100%;
// background-color: aqua;
}
}
.downLeft {
position: relative;
float: left;
margin-left: 1%;
margin-top: 10px;
width: 48%;
height: 240px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
.title {
position: absolute;
left: 20px;
top: 10px;
.decoration {
float: left;
margin-top: 6px;
width: 8px;
height: 16px;
background-color: rgba(64, 158, 255, 1);
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
}
}
#bar1 {
float: left;
width: 100%;
height: 100%;
}
}
.downRight {
position: relative;
float: left;
margin-left: 2%;
margin-top: 10px;
width: 48%;
height: 240px;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
.title {
position: absolute;
left: 20px;
top: 10px;
.decoration {
float: left;
margin-top: 6px;
width: 8px;
height: 16px;
background-color: rgba(64, 158, 255, 1);
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
}
}
#bar2 {
float: left;
width: 100%;
height: 100%;
}
}
}
.downList {
margin-left: 2%;
width: 96%;
.title {
position: relative;
padding: 10px;
height: 50px;
.decoration {
float: left;
margin-top: 6px;
width: 8px;
height: 16px;
background-color: rgba(64, 158, 255, 1);
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="errLog-manage">
单位视图
</div>
</template>
<script>
import { getDataCache, setDataCache } from '@/assets/js/filterData'
export default {
name: 'companyView',
data() {
return {
}
},
computed: {
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
<template>
<div class="errLog-manage">
用户视图
</div>
</template>
<script>
import { getDataCache, setDataCache } from '@/assets/js/filterData'
export default {
name: 'userView',
data() {
return {
}
},
computed: {
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
created() {
},
methods: {
}
}
</script>
<style lang="scss" scoped></style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment