增加学员管理下菜单--统计分析页面
This commit is contained in:
BianLzhaoMin
parent
20c048c2dd
commit
dec9b1ee43
|
|
@ -6,12 +6,12 @@ const cbc_iv = CryptoJS.enc.Utf8.parse('1234567812345678')
|
|||
* 默认参数需要加密
|
||||
* @type {boolean}
|
||||
*/
|
||||
const jia_mi = true
|
||||
const jia_mi = false
|
||||
/**
|
||||
* 默认后台会自动加密
|
||||
* @type {boolean}
|
||||
*/
|
||||
const jie_mi = true
|
||||
const jie_mi = false
|
||||
/**
|
||||
* 加密
|
||||
* @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://192.168.0.176:18080',
|
||||
// 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://192.168.0.38:18080', // 郝
|
||||
// target: 'http://192.168.0.38:18080', // 郝志权
|
||||
target: 'http://192.168.2.122:18080', // 梁超
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: '',
|
||||
|
|
|
|||
Loading…
Reference in New Issue