intellioa
/
super-fusion-platform
mirror of http://10.10.14.221/feiliming/oa-project-vue.git
6
0
Fork 0
Code Issues Projects Releases Wiki Activity

德育管理中心班级管理红旗班表格

Browse Source
init
zhusiyu 3 years ago
parent f8e44059ce
commit d7f2739f3c
1 changed files with 337 additions and 142 deletions
Show Stats Download Patch File Download Diff File

479
src/views/screenAdaptation/pages/moralEducationCenter/studentClassTeacherManage/classManage.vue
Unescape View File

@ -10,21 +10,66 @@
</div>
<div style="width: 100%;height: calc(100% - 30px);">
<a-empty description="暂无数据" v-if="classManageTableData.length == 0" class="timeLine-empty"/>
<vue-scroll v-if="classManageTableData.length != 0" :ops="listScroll"
:style="showPage?'height:15.1rem':'height:15.1rem'"
class="score-list-div">
<div class="classManage-tableBody">
<a-table :columns="columns" :data-source="classManageTableData" :pagination="false"
rowKey="index"
:customRow="getCustomRow">
<span slot="action" slot-scope="text, record">
<template>
<a @click="handleEdit(record.Id)">进入>></a>
</template>
</span>
</a-table>
<div v-if="classManageTableData.length != 0">
<div class="classManage-tableBody" v-if="classManageTableBody">
<vue-scroll :ops="listScroll"
:style="showPage?'height:15.1rem':'height:15.1rem'"
class="score-list-div">
<a-table :columns="columns" :data-source="classManageTableData"
:pagination="false"
:rowKey="record=>record.key"
:customRow="getCustomRow">
<span slot="action" slot-scope="text,record">
<template>
<!-- <a @click="handleEdit()">进入>></a>-->
<a @click="handleEdit(record)">进入>></a>
</template>
</span>
</a-table>
</vue-scroll>
</div>
</vue-scroll>
<!--点击进入后的表格-->
<div class="detailTable" v-if="!classManageTableBody">
<span class="detailTable-title">< 2021-2022学年度上学期-09月-红旗班评比结果 ></span>
<a class="detailTable-back" @click="exitdetail"><< 返回</a>
<vue-scroll v-if="classManageTableData.length != 0" :ops="listScroll"
:style="showPage?'height:15.1rem':'height:15.1rem'"
class="score-list-div">
<a-table :columns="detailTableColumns" :data-source="detailTableData"
:pagination="false"
rowKey="index"
:customRow="getCustomRow">
</a-table>
</vue-scroll>
<div class="detailTableBox">
<img src="../images/detailMaster.png" alt="">
<div class="detailTableBox-text">
<a-row style="position: absolute;bottom: 58px;width: 100%;height: 40px;left: 15px;"
type="flex">
<a-col style="position: absolute;left: 0;top: 0;width: 40px;height: 40px;border-radius: 50%">
<img src="../images/bestPer.png" alt=""
style="width:100%;height: 100%;border-radius: 15%">
</a-col>
<a-col style="color: #00FFFF;position: absolute;top: 4px;left: 48px;">
<span style="display:inline-block;color:#D7D7D7;font-size: 12px;margin-bottom: 3px;">班主任</span>
<br>{{bestHeadMasterName}}
</a-col>
</a-row>
<a-row style="position: absolute;width: 100px;height: 20px;bottom: 24px;left: 15px;color: #fff">
<a-col>{{bestHeadMasterClass}}</a-col>
</a-row>
<a-row style="color: #7DF8F9;position: absolute;bottom: 10px;width: 100%;height: 12px;left: 11px;"
type="flex">
<a-col style="border-right: 1px dashed #5B9BAE;padding-right: 7px;margin-right: 7px;">
排名/1
</a-col>
<a-col>积分/{{bestHeadMasterScore}}</a-col>
</a-row>
</div>
</div>
</div>
</div>
</div>
</div>
<!--班级文化&时事新闻-->
@ -39,14 +84,14 @@
<a-carousel ref="imgs" class="classManage-pic-pic" :dot-position="dotposition" easing="linear"
:dots="false" v-if="classCulture.length != 0">
<p class="classCulture" v-for="(item,i) in classCulture" :key="i">
<img style="width: 61%;height: 120px; margin-bottom: 10px;margin-right: 10px;left: 0;top: 0;"
<img style="width: 165px;height: 120px; margin-bottom: 10px;margin-right: 10px;left: 0;top: 0;"
:src="item[0].src" alt="">
<img style="width: 35%;height: 55px;margin-bottom: 10px; top: 0;right: 0;"
<img style="width: 95px;height: 55px;margin-bottom: 10px; top: 0;right: 0;"
:src="item[1].src" alt="">
<img style="width: 35%;height: 55px; right: 0;top: 64px;" :src="item[2].src" alt="">
<img style="width: 31%;height: 60px;left: 0;bottom: 0; " :src="item[3].src" alt="">
<img style="width: 31%;height: 60px; bottom: 0;left: 34.5%;" :src="item[4].src" alt="">
<img style="width: 31%;height: 60px; bottom: 0;right: 0;" :src="item[5].src" alt="">
<img style="width: 95px;height: 55px; right: 0;top: 64px;" :src="item[2].src" alt="">
<img style="width: 85px;height: 60px;left: 0;bottom: 0; " :src="item[3].src" alt="">
<img style="width: 85px;height: 60px; bottom: 0;left: 34%;" :src="item[4].src" alt="">
<img style="width: 85px;height: 60px; bottom: 0;right: 0;" :src="item[5].src" alt="">
</p>
</a-carousel>
<a-row @click.native="nextP" v-if="classCulture.length != 0"
@ -97,44 +142,31 @@
export default {
data() {
return {
bestHeadMasterName: '',
bestHeadMasterScore: '',
bestHeadMasterClass: '',
classManageTableBody: true,
spinning: false,
showPage: true,
listScroll: this.StaticParams.scrollOption,
classManageTableData: [
{grade: '小学部分1年级', flag: '01班,05班', fraction: '103.25'},
{grade: '小学部分2年级', flag: '02班', fraction: '103.25'},
{grade: '小学部分3年级', flag: '03班,06班', fraction: '104.25'},
{grade: '小学部分4年级', flag: '01班', fraction: '103.75'},
{grade: '小学部分5年级', flag: '04班', fraction: '105'},
{grade: '小学部分6年级', flag: '02班,03班', fraction: '105.25'},
{grade: '小学部分1年级', flag: '03班,04班', fraction: '103.5'},
{grade: '小学部分2年级', flag: '06班', fraction: '106'},
{grade: '小学部分3年级', flag: '05班', fraction: '103'},
{grade: '小学部分1年级', flag: '01班,05班', fraction: '103.25'},
{grade: '小学部分2年级', flag: '02班', fraction: '103.25'},
{grade: '小学部分3年级', flag: '03班,06班', fraction: '104.25'},
{grade: '小学部分4年级', flag: '01班', fraction: '103.75'},
{grade: '小学部分5年级', flag: '04班', fraction: '105'},
{grade: '小学部分6年级', flag: '02班,03班', fraction: '105.25'},
{grade: '小学部分1年级', flag: '03班,04班', fraction: '103.5'},
{grade: '小学部分2年级', flag: '06班', fraction: '106'},
{grade: '小学部分3年级', flag: '05班', fraction: '103'},
// {grade: '小学部分1年级', flag: '01班,05班', fraction: '103.25', key: '1'},
],
columns: [
{
title: '年级',
dataIndex: 'grade',
key: 'grade',
dataIndex: 'grade_name',
key: 'grade_name',
align: "center",
}, {
title: '流动红旗班',
dataIndex: 'flag',
key: 'flag',
dataIndex: 'flagClass',
key: 'flagClass',
align: "center",
}, {
title: '最高分',
dataIndex: 'fraction',
key: 'fraction',
dataIndex: 'score',
key: 'score',
align: "center",
}, {
title: '详细',
@ -144,60 +176,78 @@
align: "center",
},
],
detailTableData: [],
detailTableColumns: [
{
title: '班级',
dataIndex: 'class_name',
key: 'class_name',
align: "center",
}, {
title: '得分',
dataIndex: 'score',
key: 'score',
align: "center",
}, {
title: '排名',
dataIndex: 'fraction',
key: 'fraction',
align: "center",
customRender: (text, record, index) => `${index + 1}`
},
],
//班级文化
dotposition: 'right',
classCulture: [
// [
// {src: require('../images/classCulture1.png')},
// {src: require('../images/classCulture2.png')},
// {src: require('../images/classCulture3.png')},
// {src: require('../images/classCulture4.png')},
// {src: require('../images/classCulture5.png')},
// {src: require('../images/classCulture6.png')},
// ],
// [
// {src: require('../images/classCulture5.png')},
// {src: require('../images/classCulture4.png')},
// {src: require('../images/classCulture2.png')},
// {src: require('../images/classCulture1.png')},
// {src: require('../images/classCulture6.png')},
// {src: require('../images/classCulture3.png')},
// ],
],
currentP: '',
classCulture:
[
// [
// {src: require('../images/classCulture1.png')},
// {src: require('../images/classCulture2.png')},
// {src: require('../images/classCulture3.png')},
// {src: require('../images/classCulture4.png')},
// {src: require('../images/classCulture5.png')},
// {src: require('../images/classCulture6.png')},
// ],
// [
// {src: require('../images/classCulture5.png')},
// {src: require('../images/classCulture4.png')},
// {src: require('../images/classCulture2.png')},
// {src: require('../images/classCulture1.png')},
// {src: require('../images/classCulture6.png')},
// {src: require('../images/classCulture3.png')},
// ],
],
currentP:
'',
//时事新闻数据
eventData: [
// {content: '洋浦薛小平小学部开展班级文化展示活动', date: '2022/01/22'},
// {content: '“你好2022！”元旦班级联欢活动', date: '2022/01/22'},
// {content: '2021年12月12日文景小学503班秋游活动…', date: '2022/01/22'},
// {content: '走进童话，幸福牵手', date: '2022/01/22'},
// {content: '2021年青少年公益培训班新春嘉年华暨青…', date: '2022/01/22'},
// {content: '开展“开学100天，有你真好”班级活动', date: '2022/01/22'},
],
eventData:
[
// {content: '洋浦薛小平小学部开展班级文化展示活动', date: '2022/01/22'},
],
//时事新闻的轮播图
carousel3dData: [
{src: require('../images/newsPic1.png')},
{src: require('../images/newsPic2.png')},
{src: require('../images/newsPic3.png')},
{src: require('../images/newsPic4.png')},
{src: require('../images/newsPic5.png')},
],
swiperOption: {
speed: 400,
loop: true,
}
carousel3dData:
[
{src: require('../images/newsPic1.png')},
{src: require('../images/newsPic2.png')},
{src: require('../images/newsPic3.png')},
{src: require('../images/newsPic4.png')},
{src: require('../images/newsPic5.png')},
],
swiperOption:
{
speed: 400,
loop:
true,
},
}
},
created() {
},
mounted() {
//红旗班评比
this.getClassManageTableData()
//班级文化
this.getClassCulture()
//时事新闻
this.getEventData()
//获取年级数据
this.getClassManageTableData();
},
methods: {
getCustomRow() {
@ -210,6 +260,37 @@
},
//红旗班评比
getClassManageTableData() {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
"query_id": "query_deyu_hongqiban2",
"query_param": [
this.BaseConfig.person_info_my.bureau_id + ""
]
},
"query_cache": 0,
"query_count": [],
"query_format": "json",
"query_group": []
}
this.spinning = true;
this.DataexReportInterface.callInterface([{
params: param,
method: "post",
}], (result) => {
let gradeName = []
this.spinning = false;
this.classManageTableData = JSON.parse(result[0].data.result)
//console.log('classManageTableData', this.classManageTableData);
//获取班级数据
this.getDetailTableData();
}
)
},
//红旗班评比详情接口调用
getDetailTableData() {
let param = {
"access_token": "system_01##20200102030405##a6ce11eab94df48a6ce11eab",
"query": {
@ -229,10 +310,58 @@
method: "post",
}], (result) => {
this.spinning = false;
//this.classManageTableData = JSON.parse(result[0].data.result)
//console.log('红旗班评比', JSON.parse(result[0].data.result))
this.detailTableData = JSON.parse(result[0].data.result)
//console.log("班级数据：", this.detailTableData)
this.buildGrageData();
})
},
//整合班级 年级数据结构
buildGrageData() {
for (let i = 0; i < this.classManageTableData.length; i++) {
let grade_name = this.classManageTableData[i].grade_name.substring(0, 4);//2019
let class_list = [];
for (let j = 0; j < this.detailTableData.length; j++) {
let create_year = this.detailTableData[j].create_year;
if (parseInt(grade_name) === parseInt(create_year)) {
class_list.push(this.detailTableData[j])
}
}
//console.log("class_list", class_list);
this.classManageTableData[i]["class_list"] = class_list;
}
//console.log("构造后的数据结构：", this.classManageTableData)
for (let i = 0; i < this.classManageTableData.length; i++) {
let itemScore = this.classManageTableData[i].score
let flagClass = []
for (let j = 0; j < this.classManageTableData[i].class_list.length; j++) {
let item1Score = this.classManageTableData[i].class_list[j].score
if (parseInt(item1Score) == parseInt(itemScore)) {
flagClass.push(this.classManageTableData[i].class_list[j].class_name.slice(5))
}
}
flagClass = flagClass.join(' ')
this.classManageTableData[i]["flagClass"] = flagClass;
}
//console.log("y构造后的数据结构：", this.classManageTableData)
},
//红旗班评比详情
handleEdit(item) {
this.classManageTableBody = false
//console.log('item', item.class_list)
this.detailTableData = item.class_list
//班主任卡片内容赋值 分数、班级、班主任姓名
this.bestHeadMasterScore = item.score
this.bestHeadMasterClass = item.class_name
this.bestHeadMasterName = this.detailTableData[0].class_teacher_name
}
,
//退出表格详情页
exitdetail() {
this.classManageTableBody = true
this.detailTableData = []
}
,
//班级文化
getClassCulture() {
let param = {
@ -254,11 +383,12 @@
method: "post",
}], (result) => {
this.spinning = false;
this.classCulture = JSON.parse(result[0].data.result)
//this.classCulture = JSON.parse(result[0].data.result)
//console.log('班级文化', result)//result 空
//console.log('班级文化', JSON.parse(result[0].data.result))
})
},
}
,
//时事新闻
getEventData() {
let param = {
@ -281,19 +411,26 @@
}], (result) => {
this.spinning = false;
//this.eventData = JSON.parse(result[0].data.result)
console.log('时事新闻', result)//result空
//console.log('时事新闻', result)//result空
//console.log('时事新闻', JSON.parse(result[0].data.result))
})
},
}
,
},
components: {
CommonBox,
ARow: Row,
ACol: Col,
ATable: Table,
ACarousel: Carousel,
AEmpty: Empty,
ASpin: Spin,
ARow:
Row,
ACol:
Col,
ATable:
Table,
ACarousel:
Carousel,
AEmpty:
Empty,
ASpin:
Spin,
//时事新闻轮播图
Carousel3d,
Slide,
@ -324,10 +461,6 @@
overflow: hidden;
margin-bottom: 10px;
.classManage-table-title {
}
.score-list-div {
width: 100%;
height: 23rem;
@ -336,61 +469,123 @@
margin-top: 0;
overflow: hidden;
.classManage-tableBody {
margin-bottom: 15px;
}
/deep/ .ant-table-wrapper {
width: 100%;
}
.classManage-tableBody, .detailTable {
margin-bottom: 15px;
/deep/ .ant-table-placeholder {
/*background-color: transparent !important;*/
/*border-top: none !important;*/
/*border-bottom: none !important;*/
}
/deep/ .ant-table-wrapper {
width: 100%;
}
/deep/ .ant-table-body {
.ant-table-thead > tr > th {
background-color: #1c3369;
color: white;
border: 1px solid #4e9fb4;
padding: 2px !important;
}
}
/deep/ .ant-table-placeholder {
/*background-color: transparent !important;*/
/*border-top: none !important;*/
/*border-bottom: none !important;*/
}
/deep/ .ant-table-thead > tr > th {
padding: 0 !important;
/deep/ .ant-table-body {
.ant-table-thead > tr > th {
background-color: #1c3369;
color: white;
border: 1px solid #4e9fb4;
padding: 2px !important;
}
}
/deep/ .ant-table-tbody > tr > td {
padding: 0 !important;
background: none !important;
}
/deep/ .ant-table-thead > tr > th {
padding: 0 !important;
}
/deep/ .ant-table-tbody > tr > td {
border: 1px solid #4e9fb4;
}
/deep/ .ant-table-tbody > tr > td {
padding: 0 !important;
background: none !important;
}
/deep/ .ant-table-tbody > tr > td:nth-child(2) {
color: #F59A23;
}
/deep/ .ant-table-tbody > tr > td {
border: 1px solid #4e9fb4;
}
/deep/ .ant-table-tbody > tr > td:nth-child(3) {
color: #fff;
/*#02A7F0*/
}
/deep/ .ant-table-tbody > tr > td:nth-child(2) {
color: #F59A23;
}
/deep/ .ant-table-tbody > tr > td:nth-child(3) {
color: #fff;
/*#02A7F0*/
}
/deep/ .ant-table-tbody > tr > td:nth-child(4) > span > a {
color: #02A7F0;
}
/deep/ .ant-table-tbody > tr > td:nth-child(4) > span > a:hover {
color: #fff;
text-decoration: underline;
}
}
.detailTable {
width: 100%;
position: relative;
z-index: 9999;
display: flex;
/deep/ .ant-table-tbody > tr > td:nth-child(4) > span > a {
color: #02A7F0;
.detailTable-title {
display: inline-block;
color: #fff;
position: absolute;
top: -20px;
left: 170px;
z-index: 99;
font-size: 14px;
}
.detailTable-back {
display: inline-block;
position: absolute;
top: 5px;
left: 2px;
color: #fff;
cursor: pointer;
width: 61px;
height: 20px;
z-index: 99;
}
.detailTableBox {
width: 180px;
height: 175px;
background: #3B446A;
border-radius: 5px;
position: relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
img {
width: 100%;
height: 70px;
position: absolute;
top: 0;
left: 0;
}
/deep/ .ant-table-tbody > tr > td:nth-child(4) > span > a:hover {
color: #fff;
text-decoration: underline;
.detailTableBox-text {
position: absolute;
width: 180px;
height: 100px;
bottom: 0;
left: 0;
}
}
}
.classManage-table-title {
}
}
.classManage-bot {

Write Preview
Loading…
Cancel
Save