德育-学生管理

init
zhusiyu 3 years ago
parent 5d08498fed
commit 66397a2780

@ -2,7 +2,7 @@
<CommonBox title="学生管理" class="moral-education-student-style"> <CommonBox title="学生管理" class="moral-education-student-style">
<a-spin class="brandCreat" :spinning="spinning"> <a-spin class="brandCreat" :spinning="spinning">
<div class="studentManageBox"> <div class="studentManageBox">
<!--左侧学生信息标题部分--> <!--左侧学生部分-->
<div class="studentManageBox-leftTitle"> <div class="studentManageBox-leftTitle">
<img class="bg1" src="../images/titleBg1.png" alt=""> <img class="bg1" src="../images/titleBg1.png" alt="">
<img class="bg2" src="../images/titleBg2.png" alt=""> <img class="bg2" src="../images/titleBg2.png" alt="">
@ -52,14 +52,15 @@
<a-row style="width: 100%;height: 100%"> <a-row style="width: 100%;height: 100%">
<a-col :span="14" style="height: 100%"> <a-col :span="14" style="height: 100%">
<div class="border"></div> <div class="border"></div>
<span class="gender-style">{{typeof genderBoy == 'string' ? genderBoy : ' '}}</span> <!--<span class="gender-style">{{typeof genderBoy == 'string' ? genderBoy : ' '}}</span>-->
<span class="gender-style">男生</span>
<br> <br>
<i class="total">{{numrBoy}}</i> <i class="total">{{numrBoy}}</i>
</a-col> </a-col>
<a-col class="echarts" id="myechartsBoy" ref="myecharts" :span="10" <a-col class="echarts" id="myechartsBoy" ref="myecharts" :span="10"
style="height: 100%"></a-col> style="height: 100%">
<a-col style="position: absolute; top: 28px;right: 9px; fontSize: 18px;fontWeight: 700;color: #01F6F9"> <a-progress type="circle" :percent="boyRatio" :width="55" :height="55"
{{!isNaN(boybili) ? boybili : 0}}% :strokeWidth="10" strokeColor="#1379c8" trailColor="#93A0BD"/>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
@ -67,14 +68,15 @@
<a-row style="width: 100%;height: 100%;position: relative;"> <a-row style="width: 100%;height: 100%;position: relative;">
<a-col :span="14" style="height: 100%"> <a-col :span="14" style="height: 100%">
<div class="border"></div> <div class="border"></div>
<span class="gender-style">{{typeof genderGril == 'string' ? genderGril : ' '}}</span> <!--<span class="gender-style">{{typeof genderGril == 'string' ? genderGril : ' '}}</span>-->
<span class="gender-style">女生</span>
<br> <br>
<i class="total">{{numGril}}</i> <i class="total">{{numGril}}</i>
</a-col> </a-col>
<a-col class="echarts" id="myechartsGril" ref="myecharts" :span="10" <a-col class="echarts" id="myechartsGril" ref="myecharts" :span="10"
style="height: 100%"></a-col> style="height: 100%">
<a-col style="position: absolute; top: 28px;right: 9px; fontSize: 18px;fontWeight: 700;color: #01F6F9"> <a-progress type="circle" :percent="grilRatio" :width="55" :height="55"
{{!isNaN(grilbili) ? grilbili : 0}}% :strokeWidth="10" strokeColor="#ec808d" trailColor="#93A0BD"/>
</a-col> </a-col>
</a-row> </a-row>
</div> </div>
@ -206,10 +208,10 @@
import CommonBox from '../../secondPages/commonBox.vue'; import CommonBox from '../../secondPages/commonBox.vue';
// import CommonModal from './commomModal.vue' // import CommonModal from './commomModal.vue'
import CommonInfo from '../../../common/commonInfo.vue' import CommonInfo from '../../../common/commonInfo.vue'
import {Carousel, Table, Row, Col, Collapse, Spin, Empty} from 'ant-design-vue'; import {Carousel, Table, Row, Col, Collapse, Spin, Empty, Progress} from 'ant-design-vue';
import {swiper, swiperSlide} from 'vue-awesome-swiper' import {swiper, swiperSlide} from 'vue-awesome-swiper'
//import 'swiper/css/swiper.css' //import 'swiper/css/swiper.css'
import * as echarts from 'echarts' // import * as echarts from 'echarts'
import ImgPreview from '../../../common/imgPreview.vue'; import ImgPreview from '../../../common/imgPreview.vue';
export default { export default {
@ -235,8 +237,8 @@
numGril: 0, numGril: 0,
genderBoy: '', genderBoy: '',
numrBoy: 0, numrBoy: 0,
boybili: 0, boyRatio: 0,
grilbili: 0, grilRatio: 0,
spinning: false, spinning: false,
currentKey: '0', currentKey: '0',
rightTopShow: true, rightTopShow: true,
@ -260,7 +262,7 @@
headText: '', headText: '',
tableData: [], tableData: [],
columns: [ columns: [
{title: '年级', dataIndex: 'ENTRANCE_YEAR', key: 'ENTRANCE_YEAR', align: "center",}, {title: '年级', dataIndex: 'entrance_year', key: 'entrance_year', align: "center",},//ENTRANCE_YEAR
{title: '人数', dataIndex: 'total', key: 'total', align: "center",}, {title: '人数', dataIndex: 'total', key: 'total', align: "center",},
{title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",}, {title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",},
{title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",}, {title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",},
@ -271,7 +273,7 @@
headText: '', headText: '',
tableData: [], tableData: [],
columns: [ columns: [
{title: '年级', dataIndex: 'ENTRANCE_YEAR', key: 'ENTRANCE_YEAR', align: "center",}, {title: '年级', dataIndex: 'entrance_year', key: 'entrance_year', align: "center",},
{title: '人数', dataIndex: 'total', key: 'total', align: "center",}, {title: '人数', dataIndex: 'total', key: 'total', align: "center",},
{title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",}, {title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",},
{title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",}, {title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",},
@ -281,7 +283,7 @@
headText: '', headText: '',
tableData: [], tableData: [],
columns: [ columns: [
{title: '年级', dataIndex: 'ENTRANCE_YEAR', key: 'ENTRANCE_YEAR', align: "center",}, {title: '年级', dataIndex: 'entrance_year', key: 'entrance_year', align: "center",},
{title: '人数', dataIndex: 'total', key: 'total', align: "center",}, {title: '人数', dataIndex: 'total', key: 'total', align: "center",},
{title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",}, {title: '男生', dataIndex: 'nan_total', key: 'nan_total', align: "center",},
{title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",}, {title: '女生', dataIndex: 'nv_total', key: 'nv_total', align: "center",},
@ -307,7 +309,7 @@
//1 //1
this.getStudentManageData1() this.getStudentManageData1()
//2 //2
this.getStudentManageData2() // this.getStudentManageData2()
//3 //3
this.getStudentManageData3() this.getStudentManageData3()
//4 //4
@ -360,6 +362,7 @@
for (let i = 0; i < temp.length; i++) { for (let i = 0; i < temp.length; i++) {
this.allStudeantTotal += temp[i].total this.allStudeantTotal += temp[i].total
} }
this.getStudentManageData2()
} }
}) })
}, },
@ -390,10 +393,8 @@
this.numGril = this.studentManageData2[0].total this.numGril = this.studentManageData2[0].total
this.genderBoy = this.studentManageData2[1].XB_NAME this.genderBoy = this.studentManageData2[1].XB_NAME
this.numrBoy = this.studentManageData2[1].total this.numrBoy = this.studentManageData2[1].total
this.boybili = parseInt(Number(this.numrBoy) / Number(this.allStudeantTotal) * 100) + 1 this.boyRatio = parseInt(Number(this.numrBoy) / Number(this.allStudeantTotal) * 100) + 1
this.grilbili = parseInt(Number(this.numGril) / Number(this.allStudeantTotal) * 100) this.grilRatio = parseInt(Number(this.numGril) / Number(this.allStudeantTotal) * 100)
this.getEchartsBoy()
this.getEchartsGirl()
} }
}) })
}, },
@ -537,85 +538,85 @@
collapseChange(key) { collapseChange(key) {
this.currentKey = key this.currentKey = key
}, },
getEchartsBoy() { // getEchartsBoy() {
echarts.init(document.getElementById('myechartsBoy')).setOption({ // echarts.init(document.getElementById('myechartsBoy')).setOption({
tooltip: { // tooltip: {
trigger: 'item', // trigger: 'item',
}, // },
series: [ // series: [
{ // {
type: 'pie', // type: 'pie',
radius: ['75%', '100%'], // radius: ['75%', '100%'],
center: ['50%', '50%'], // center: ['50%', '50%'],
avoidLabelOverlap: false, // avoidLabelOverlap: false,
color: ['#93A0BD', '#2196f3'], // color: ['#93A0BD', '#2196f3'],
labelLine: { // labelLine: {
show: false // show: false
}, // },
label: { // label: {
show: false, // show: false,
position: 'center', // position: 'center',
//formatter: '{d}%' // //formatter: '{d}%'
}, // },
tooltip: { // tooltip: {
trigger: 'item', // trigger: 'item',
}, // },
data: [ // data: [
{ // {
value: this.allStudeantTotal, // value: this.allStudeantTotal,
label: { // label: {
normal: { // normal: {
show: true, // show: true,
} // }
} // }
//
}, // },
{ // {
value: this.numrBoy, // value: this.numrBoy,
label: { // label: {
normal: { // normal: {
show: true, // show: true,
} // }
} // }
} // }
] // ]
} // }
] // ]
}) // })
}, // },
getEchartsGirl() { // getEchartsGirl() {
echarts.init(document.getElementById('myechartsGril')).setOption({ // echarts.init(document.getElementById('myechartsGril')).setOption({
tooltip: { // tooltip: {
trigger: 'item', // trigger: 'item',
}, // },
series: [ // series: [
{ // {
type: 'pie', // type: 'pie',
radius: ['75%', '100%'], // radius: ['75%', '100%'],
center: ['50%', '50%'], // center: ['50%', '50%'],
avoidLabelOverlap: false, // avoidLabelOverlap: false,
color: ['#93A0BD', '#EC808D'], // color: ['#93A0BD', '#EC808D'],
labelLine: { // labelLine: {
show: false // show: false
}, // },
tooltip: { // tooltip: {
trigger: 'item', // trigger: 'item',
}, // },
data: [ // data: [
{ // {
value: this.allStudeantTotal, // value: this.allStudeantTotal,
label: { // label: {
normal: { // normal: {
show: true, // show: true,
} // }
} // }
}, // },
{value: this.numGril} // {value: this.numGril}
] // ]
} // }
] // ]
}) // })
}, // },
getCustomRow() { getCustomRow() {
let obj = {style: {}}; let obj = {style: {}};
obj['style']['color'] = '#fff'; obj['style']['color'] = '#fff';
@ -672,6 +673,7 @@
ACarousel: Carousel, ACarousel: Carousel,
ASpin: Spin, ASpin: Spin,
AEmpty: Empty, AEmpty: Empty,
AProgress: Progress,
// //
swiper, swiper,
swiperSlide, swiperSlide,
@ -818,7 +820,9 @@
position: absolute; position: absolute;
top: 80px; top: 80px;
right: 0; right: 0;
/deep/ .ant-progress-text {
color: white;
}
.boy, .gril { .boy, .gril {
position: relative; position: relative;
width: 140px; width: 140px;
@ -850,7 +854,6 @@
.boy { .boy {
margin-right: 40px; margin-right: 40px;
.border { .border {
position: absolute; position: absolute;
display: inline-block; display: inline-block;

Loading…
Cancel
Save