|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-tabs v-model="activeName">
|
|
|
+ <el-tabs v-model="activeName" @tab-click="switchTab">
|
|
|
<el-tab-pane class="pt10" label="花名册" name="first">
|
|
|
<el-form :inline="true" :model="firstForm">
|
|
|
<el-form-item class="mr10" label="学生姓名：">
|
|
|
@@ -311,11 +311,90 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</el-tab-pane>
|
|
|
- <el-tab-pane class="pt10" label="学生人数统计列表" name="fifth"></el-tab-pane>
|
|
|
+ <el-tab-pane class="pt10" label="学生人数统计列表" name="fifth">
|
|
|
+ <el-form class="flex-row border-bottom-1" :inline="true">
|
|
|
+ <h3 class="font-size-16" style="position: relative;top: -2px">学校总人数</h3>
|
|
|
+ <el-form-item label="学年学期：" style="margin-bottom: 10px">
|
|
|
+ <el-select v-model="firstForm.term" placeholder="请选择学年学期" style="width: 300px">
|
|
|
+ <el-option v-for="item in termList" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="d-flex">
|
|
|
+ <div class="w70">
|
|
|
+ <div id="lineBox" style="height: 500px"></div>
|
|
|
+ </div>
|
|
|
+ <div id="pieBox" class="w30" style="height: 500px;"></div>
|
|
|
+ </div>
|
|
|
+ <el-form class="mt20" :inline="true" :model="firstForm">
|
|
|
+ <el-form-item label="学年学期：">
|
|
|
+ <el-select v-model="firstForm.term" placeholder="请选择学年学期">
|
|
|
+ <el-option v-for="item in termList" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="年级：">
|
|
|
+ <el-select v-model="firstForm.grade" placeholder="请选择年级">
|
|
|
+ <el-option v-for="item in gradeList" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary">搜索</el-button>
|
|
|
+ </el-form>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary">导出</el-button>
|
|
|
+ <el-button type="danger">删除</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table :data="thirdTable" tooltip-effect="dark" class="mt20" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ align="center"
|
|
|
+ width="55">
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="学期学年"
|
|
|
+ prop="xqxn"
|
|
|
+ width="200">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="年级"
|
|
|
+ prop="nj"
|
|
|
+ width="100">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="人数"
|
|
|
+ prop="rs"
|
|
|
+ align="center"
|
|
|
+ width="90">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ @click=""
|
|
|
+ >查看
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <footer
|
|
|
+ class="flex-item-none"
|
|
|
+ style="display: flex;justify-content: flex-end;margin-top: 30px;"
|
|
|
+ >
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="total,prev, pager, next"
|
|
|
+ :page-size="limit"
|
|
|
+ :total="total"
|
|
|
+ :current-page.sync="cur_page"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </footer>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
export default {
|
|
|
name: "index",
|
|
|
data() {
|
|
|
@@ -328,7 +407,9 @@ export default {
|
|
|
xsxm:'',
|
|
|
xsxh:'',
|
|
|
sj:'',
|
|
|
- bj:''
|
|
|
+ bj:'',
|
|
|
+ term:'',
|
|
|
+ grade:''
|
|
|
},
|
|
|
firstTable:[{
|
|
|
id:'1',
|
|
|
@@ -440,12 +521,186 @@ export default {
|
|
|
bz:'退学',
|
|
|
bj:'二年级一班'
|
|
|
}],
|
|
|
+ termList:[{
|
|
|
+ value:'1',
|
|
|
+ label:'2021年-2022年第二学期'
|
|
|
+ },{
|
|
|
+ value:'2',
|
|
|
+ label:'2021年-2022年第一学期'
|
|
|
+ },{
|
|
|
+ value:'3',
|
|
|
+ label:'2020年-2021年第二学期'
|
|
|
+ },{
|
|
|
+ value:'4',
|
|
|
+ label:'2020年-2021年第一学期'
|
|
|
+ }],
|
|
|
+ gradeList:[{
|
|
|
+ value:'1',
|
|
|
+ label:'一年级'
|
|
|
+ },{
|
|
|
+ value:'2',
|
|
|
+ label:'二年级'
|
|
|
+ },{
|
|
|
+ value:'3',
|
|
|
+ label:'三年级'
|
|
|
+ },{
|
|
|
+ value:'4',
|
|
|
+ label:'四年级'
|
|
|
+ },{
|
|
|
+ value:'5',
|
|
|
+ label:'五年级'
|
|
|
+ },{
|
|
|
+ value:'6',
|
|
|
+ label:'六年级'
|
|
|
+ }],
|
|
|
+ thirdTable:[{
|
|
|
+ id:'1',
|
|
|
+ xqxn:'2021年-2022年第一学期',
|
|
|
+ nj:'二年级',
|
|
|
+ rs:'12'
|
|
|
+ },{
|
|
|
+ id:'2',
|
|
|
+ xqxn:'2021年-2022年第一学期',
|
|
|
+ nj:'四年级',
|
|
|
+ rs:'12'
|
|
|
+ },{
|
|
|
+ id:'3',
|
|
|
+ xqxn:'2020年-2021年第一学期',
|
|
|
+ nj:'五年级',
|
|
|
+ rs:'12'
|
|
|
+ },{
|
|
|
+ id:'4',
|
|
|
+ xqxn:'2020年-2021年第一学期',
|
|
|
+ nj:'六年级',
|
|
|
+ rs:'12'
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
handleCurrentChange(val) {
|
|
|
this.cur_page = val;
|
|
|
},
|
|
|
+ getLine() {
|
|
|
+ var chartDom = document.getElementById('lineBox');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: 'item',
|
|
|
+ // formatter: '{c} 人'
|
|
|
+ // },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['2021年-2022年第二学期', '2021年-2022年第一学期', '2020年-2021年第二学期', '2020年-2021年第一学期','2019年-2020年第二学期','2019年-2020年第一学期']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [820, 932, 901, 934,1000,1100],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color:'#4351FF',
|
|
|
+ opacity:'.15'
|
|
|
+ },
|
|
|
+ lineStyle:{
|
|
|
+ color:'#4351FF'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ option && myChart.setOption(option);
|
|
|
+
|
|
|
+ },
|
|
|
+ getPie() {
|
|
|
+ var chartDom = document.getElementById('pieBox');
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '5%',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 10,
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ color:['#4351FF',{
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [{
|
|
|
+ offset: 0, color: '#FBB0BF' // 0% 处的颜色
|
|
|
+ }, {
|
|
|
+ offset: 1, color: '#FBB0BF' // 100% 处的颜色
|
|
|
+ }],
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }],
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '40',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 1500, name: '男生' },
|
|
|
+ { value: 1048, name: '女生' },
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+
|
|
|
+ },
|
|
|
+ switchTab() {
|
|
|
+ if(this.activeName == 'fifth') {
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.getLine();
|
|
|
+ this.getPie();
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
luohailiang