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

src/views/screenAdaptation/pages/moralEducationCenter/studentClassTeacherManage/classManage.vue

@@ -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"
+                        <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">
-                            <div class="classManage-tableBody">
+                                    <a-table :columns="columns" :data-source="classManageTableData"
-                                <a-table :columns="columns" :data-source="classManageTableData" :pagination="false"
+                                             :pagination="false"
-                                         rowKey="index"
+
+                                             :rowKey="record=>record.key"
                                              :customRow="getCustomRow">
                                    <span slot="action" slot-scope="text,record">
                                         <template>
-                                          <a @click="handleEdit(record.Id)">进入>></a>
+<!--                                                  <a @click="handleEdit()">进入>></a>-->
+                                            <a @click="handleEdit(record)">进入>></a>
                                         </template>
                                   </span>
                                     </a-table>
+                                </vue-scroll>
                             </div>
+                            <!--点击进入后的表格-->
+                            <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: 95px;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: 85px;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: 85px;height: 60px; bottom: 0;left: 34%;" :src="item[4].src" alt="">
-                                <img style="width: 31%;height: 60px; bottom: 0;right: 0;" :src="item[5].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: '小学部分1年级', flag: '01班,05班', fraction: '103.25', key: '1'},
-                    {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'},
                 ],
                 columns: [
                     {
                         title: '年级',
-                        dataIndex: 'grade',
+                        dataIndex: 'grade_name',
-                        key: 'grade',
+                        key: 'grade_name',
                         align: "center",
                     }, {
                         title: '流动红旗班',
-                        dataIndex: 'flag',
+                        dataIndex: 'flagClass',
-                        key: 'flag',
+                        key: 'flagClass',
                         align: "center",
                     }, {
                         title: '最高分',
-                        dataIndex: 'fraction',
+                        dataIndex: 'score',
-                        key: 'fraction',
+                        key: 'score',
                         align: "center",
                     }, {
                         title: '详细',
@@ -144,9 +176,30 @@
                         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: [
+                classCulture:
+                    [
                         // [
                         //     {src: require('../images/classCulture1.png')},
                         //     {src: require('../images/classCulture2.png')},
@@ -164,40 +217,37 @@
                         //     {src: require('../images/classCulture3.png')},
                         // ],
                     ],
-                currentP: '',
+                currentP:
+                    '',
                 //时事新闻数据
-                eventData: [
+                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'},
                     ],
                 //时事新闻的轮播图
-                carousel3dData: [
+                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: {
+                swiperOption:
+                    {
                         speed: 400,
-                    loop: true,
+                        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)
+                    this.detailTableData = JSON.parse(result[0].data.result)
-                    //console.log('红旗班评比', 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,
+            ARow:
-            ACol: Col,
+            Row,
-            ATable: Table,
+            ACol:
-            ACarousel: Carousel,
+            Col,
-            AEmpty: Empty,
+            ATable:
-            ASpin: Spin,
+            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,7 +469,9 @@
                         margin-top: 0;
                         overflow: hidden;
 
-                        .classManage-tableBody {
+                    }
+
+                    .classManage-tableBody, .detailTable {
                         margin-bottom: 15px;
 
                         /deep/ .ant-table-wrapper {
@@ -389,8 +524,68 @@
                             text-decoration: underline;
                         }
                     }
+
+                    .detailTable {
+                        width: 100%;
+                        position: relative;
+                        z-index: 9999;
+                        display: flex;
+
+                        .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;
+                            }
+
+                            .detailTableBox-text {
+                                position: absolute;
+                                width: 180px;
+                                height: 100px;
+                                bottom: 0;
+                                left: 0;
+                            }
+                        }
+                    }
+
+                    .classManage-table-title {
+
+                    }
+
+
                 }
 
                 .classManage-bot {