增加学员管理下菜单--统计分析页面
This commit is contained in:
BianLzhaoMin
parent
20c048c2dd
commit
dec9b1ee43
|
|
@ -6,12 +6,12 @@ const cbc_iv = CryptoJS.enc.Utf8.parse('1234567812345678')
|
||||||
* 默认参数需要加密
|
* 默认参数需要加密
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
const jia_mi = true
|
const jia_mi = false
|
||||||
/**
|
/**
|
||||||
* 默认后台会自动加密
|
* 默认后台会自动加密
|
||||||
* @type {boolean}
|
* @type {boolean}
|
||||||
*/
|
*/
|
||||||
const jie_mi = true
|
const jie_mi = false
|
||||||
/**
|
/**
|
||||||
* 加密
|
* 加密
|
||||||
* @param word
|
* @param word
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div style="margin-bottom: 12px">
|
||||||
|
<el-row type="flex" justify="space-around">
|
||||||
|
<el-col :span="6" v-for="(item, index) in cardList" :key="index">
|
||||||
|
<div class="grid-content bg-purple">
|
||||||
|
<div>
|
||||||
|
<span>{{ item.card_num }}</span>
|
||||||
|
<span style="font-size: 14px">次</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>{{ item.card_title }}</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
cardList: [
|
||||||
|
{
|
||||||
|
card_num: 999,
|
||||||
|
card_title: '学习任务',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
card_num: 999,
|
||||||
|
card_title: '考试任务',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
card_num: 999,
|
||||||
|
card_title: '培训任务',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.grid-content {
|
||||||
|
min-height: 120px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.3);
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
& div:first-child span:first-child {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& div:last-child {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,167 @@
|
||||||
|
<template>
|
||||||
|
<div :style="{ height: height, width: width }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from '@/views/dashboard/mixins/resize.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%',
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '500px',
|
||||||
|
},
|
||||||
|
autoResize: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
chartData: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartData: {
|
||||||
|
deep: true,
|
||||||
|
handler(val) {
|
||||||
|
this.setOptions(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
this.setOptions(this.chartData)
|
||||||
|
},
|
||||||
|
setOptions({ expectedData, actualData } = {}) {
|
||||||
|
this.chart.setOption({
|
||||||
|
xAxis: {
|
||||||
|
data: [
|
||||||
|
'一月',
|
||||||
|
'二月',
|
||||||
|
'三月',
|
||||||
|
'四月',
|
||||||
|
'五月',
|
||||||
|
'六月',
|
||||||
|
'七月',
|
||||||
|
'八月',
|
||||||
|
'九月',
|
||||||
|
'十月',
|
||||||
|
'十一月',
|
||||||
|
'十二月',
|
||||||
|
],
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 40, // 增大底部空间，避免遮挡
|
||||||
|
top: 30, // 如果需要，可以增加顶部空白
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
},
|
||||||
|
padding: [5, 10],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['学习任务', '考试任务', '培训任务'],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '学习任务',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#1890ff',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#1890ff',
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
smooth: false,
|
||||||
|
type: 'line',
|
||||||
|
data: [20, 30, 12, 10, 30, 13, 20, 30, 12, 10, 30, 13],
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '考试任务',
|
||||||
|
smooth: false,
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#2fc25b',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#2fc25b',
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
// areaStyle: {
|
||||||
|
// color: '#f3f8ff',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [20, 20, 12, 30, 30, 13, 100, 30, 12, 50, 30, 13],
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'quadraticOut',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '培训任务',
|
||||||
|
smooth: false,
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#facc14',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#facc14',
|
||||||
|
width: 2,
|
||||||
|
},
|
||||||
|
// areaStyle: {
|
||||||
|
// color: '#f3f8ff',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [20, 30, 12, 33, 30, 13, 20, 30, 22, 10, 30, 13],
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'quadraticOut',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<!-- 统计分析 -->
|
||||||
|
<div class="app-container statistical-container">
|
||||||
|
<el-form :model="queryParams" ref="queryForm" size="small" inline>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker v-model="queryParams.years" type="year" placeholder="选择年"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 上方卡片 -->
|
||||||
|
<CardInfo />
|
||||||
|
|
||||||
|
<!-- 图表 -->
|
||||||
|
<ChartInfo />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CardInfo from './components/card-info'
|
||||||
|
import ChartInfo from './components/chart-info'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CardInfo,
|
||||||
|
ChartInfo,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
years: '',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleQuery() {},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.statistical-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -38,9 +38,10 @@ module.exports = {
|
||||||
// target: `http://localhost:18080`,
|
// target: `http://localhost:18080`,
|
||||||
// target: 'http://192.168.0.176:18080',
|
// target: 'http://192.168.0.176:18080',
|
||||||
// target: 'http://192.168.0.58:19090', // 杰
|
// target: 'http://192.168.0.58:19090', // 杰
|
||||||
target: 'http://192.168.0.14:18080', // 测试环境
|
// target: 'http://192.168.0.14:18080', // 测试环境
|
||||||
// target: 'http://218.21.27.6:1999/prod-api', // 生产环境
|
// target: 'http://218.21.27.6:1999/prod-api', // 生产环境
|
||||||
// target: 'http://192.168.0.38:18080', // 郝
|
// target: 'http://192.168.0.38:18080', // 郝志权
|
||||||
|
target: 'http://192.168.2.122:18080', // 梁超
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue