|
|
|
|
@ -1,7 +1,138 @@
|
|
|
|
|
<template>
|
|
|
|
|
<CommonBox title="课程安排" class="teaching-center-course-arrangement-style">
|
|
|
|
|
<a-spin class="course-arrangement-box-style" :spinning="spinning">
|
|
|
|
|
|
|
|
|
|
<div class="select-top-style">
|
|
|
|
|
<span :class="'select-item-style border-right-style' + (selectType === 1?' select-style':'')"
|
|
|
|
|
@click="typeChange(1)">计划</span>
|
|
|
|
|
<span :class="'select-item-style' + (selectType === 2?' select-style':'')"
|
|
|
|
|
@click="typeChange(2)">课表</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="course-arrangement-content-style">
|
|
|
|
|
<a-tabs :activeKey="paneKey">
|
|
|
|
|
<a-tab-pane :key="1" tab="Tab 1">
|
|
|
|
|
<div class="plan-content-style">
|
|
|
|
|
<div class="query-center-style">
|
|
|
|
|
<a-select style="width:150px" :value="stageId" @change="stageChange">
|
|
|
|
|
<a-select-option v-for="item in stageList" :key="item.id" :value="item.id">
|
|
|
|
|
{{ item.value }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
<a-select style="width:150px;margin-left: 10px" :value="gradeId" @change="gradeChange">
|
|
|
|
|
<a-select-option v-for="item in gradeList" :key="item.id" :value="item.id">
|
|
|
|
|
{{ item.value }}
|
|
|
|
|
</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="data-content-style">
|
|
|
|
|
<a-row class="table-row-style header-row-style">
|
|
|
|
|
<a-col :span="6" class="col">课程</a-col>
|
|
|
|
|
<a-col :span="6" class="col">省-计划</a-col>
|
|
|
|
|
<a-col :span="6" class="col">校-执行</a-col>
|
|
|
|
|
<a-col :span="6" class="col">匹配度</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
<div class="row-list-content-style">
|
|
|
|
|
<vue-scroll v-if="tableData.length > 0" class="table-boday-style" :ops="listScroll"
|
|
|
|
|
style="height:180px">
|
|
|
|
|
<a-row v-for="item,index in tableData" :key="'course_info_row_'+index" class="table-row-style">
|
|
|
|
|
<a-col :span="6" class="col">{{item.curriculum}}</a-col>
|
|
|
|
|
<a-col :span="6" class="col">{{item.provincePlan}}</a-col>
|
|
|
|
|
<a-col :span="6" class="col">{{item.schoolImplement}}</a-col>
|
|
|
|
|
<a-col :span="6" class="col">{{item.matchingDegree}}</a-col>
|
|
|
|
|
</a-row>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
<div v-if="tableData.length === 0"
|
|
|
|
|
class="no-data-content-style">
|
|
|
|
|
<!--<a-empty description="暂无数据" style="font-size: 10px"/>-->
|
|
|
|
|
暂无数据~
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
<a-tab-pane :key="2" tab="Tab 2">
|
|
|
|
|
<div class="timetable-content-style">
|
|
|
|
|
<div class="timetable-type-box-style">
|
|
|
|
|
<div class="box-img-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/button-bg.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
<div class="box-img-in-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/school.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-text-style">
|
|
|
|
|
全校课表
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timetable-type-box-style">
|
|
|
|
|
<div class="box-img-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/button-bg.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
<div class="box-img-in-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/grade.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-text-style">
|
|
|
|
|
年级课表
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timetable-type-box-style">
|
|
|
|
|
<div class="box-img-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/button-bg.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
<div class="box-img-in-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/class.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-text-style">
|
|
|
|
|
班级课表
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timetable-type-box-style">
|
|
|
|
|
<div class="box-img-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/button-bg.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
<div class="box-img-in-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/teacher.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-text-style">
|
|
|
|
|
教师课表
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timetable-type-box-style">
|
|
|
|
|
<div class="box-img-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/button-bg.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
<div class="box-img-in-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/student.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-text-style">
|
|
|
|
|
学生课表
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="timetable-type-box-style">
|
|
|
|
|
<div class="box-img-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/button-bg.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
<div class="box-img-in-style">
|
|
|
|
|
<img src="../../assets/images/teachingCenter/classRoom.png"
|
|
|
|
|
style="width: 100%;height: 100%">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-text-style">
|
|
|
|
|
教室课表
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-tab-pane>
|
|
|
|
|
</a-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
</CommonBox>
|
|
|
|
|
</template>
|
|
|
|
|
@ -10,25 +141,282 @@
|
|
|
|
|
* 课程安排
|
|
|
|
|
* */
|
|
|
|
|
import CommonBox from '../secondPages/commonBox.vue';
|
|
|
|
|
import {Icon, Spin, List, Empty} from 'ant-design-vue';
|
|
|
|
|
import {Icon, Spin, List, Empty, Tabs, Select, Table,Row, Col} from 'ant-design-vue';
|
|
|
|
|
export default{
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
selectType: 1,//1 周历 2 校历
|
|
|
|
|
paneKey: 1,
|
|
|
|
|
spinning: false,
|
|
|
|
|
listScroll: this.StaticParams.scrollOption,
|
|
|
|
|
stageList: [{id: 1, value: '小学部'}, {id: 2, value: '初中部'}, {id: 3, value: '行政部门'}, {id: 4, value: '其他'}],
|
|
|
|
|
stageId: 1,
|
|
|
|
|
gradeList: [{id: 1, value: '一年级'}, {id: 2, value: '二年级'}, {id: 3, value: '三年级'}, {
|
|
|
|
|
id: 4,
|
|
|
|
|
value: '四年级'
|
|
|
|
|
}, {id: 5, value: '五年级'}, {id: 6, value: '六年级'}],
|
|
|
|
|
gradeId: 1,
|
|
|
|
|
columns: [
|
|
|
|
|
{
|
|
|
|
|
title: '课程',
|
|
|
|
|
dataIndex: 'curriculum',
|
|
|
|
|
key: 'curriculum',
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '省-计划',
|
|
|
|
|
dataIndex: 'provincePlan',
|
|
|
|
|
key: 'provincePlan',
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '校-执行',
|
|
|
|
|
dataIndex: 'schoolImplement',
|
|
|
|
|
key: 'schoolImplement',
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: '匹配度',
|
|
|
|
|
dataIndex: 'matchingDegree',
|
|
|
|
|
key: 'matchingDegree',
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
tableData:[
|
|
|
|
|
{curriculum:"语文",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"数学",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"音乐",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"美术",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"体育",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"地方课程",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"地方课程",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"地方课程",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"地方课程",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"地方课程",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
{curriculum:"地方课程",provincePlan:8,schoolImplement:8,matchingDegree:0},
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
//this.changeType();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
changeType: function () {
|
|
|
|
|
this.timing = setInterval(() => {
|
|
|
|
|
let paneKey = this.paneKey === 1 ? 2 : 1;
|
|
|
|
|
this.typeChange(paneKey)
|
|
|
|
|
}, 12000)
|
|
|
|
|
},
|
|
|
|
|
typeChange: function (type) {
|
|
|
|
|
if (this.selectType !== type) {
|
|
|
|
|
this.selectType = type;
|
|
|
|
|
this.paneKey = type;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
stageChange: function (stageId) {
|
|
|
|
|
if (this.stageId !== stageId) {
|
|
|
|
|
this.stageId = stageId;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
gradeChange: function (gradeId) {
|
|
|
|
|
if (this.gradeId !== gradeId) {
|
|
|
|
|
this.gradeId = gradeId;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getCustomRow: function () {
|
|
|
|
|
let obj = {style: {}};
|
|
|
|
|
obj['style']['color'] = '#00ffff';
|
|
|
|
|
return obj;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
CommonBox,
|
|
|
|
|
ASpin: Spin,
|
|
|
|
|
ATabs: Tabs,
|
|
|
|
|
ATabPane: Tabs.TabPane,
|
|
|
|
|
ASelect: Select,
|
|
|
|
|
ASelectOption: Select.Option,
|
|
|
|
|
ATable: Table,
|
|
|
|
|
ARow: Row,
|
|
|
|
|
ACol: Col,
|
|
|
|
|
AEmpty: Empty
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
@import "../../assets/scss/style";
|
|
|
|
|
|
|
|
|
|
.teaching-center-course-arrangement-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 280px !important;
|
|
|
|
|
position: relative;
|
|
|
|
|
.course-arrangement-box-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
/deep/ .ant-spin-container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.select-top-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 20px;
|
|
|
|
|
text-align: right;
|
|
|
|
|
/*position: absolute;*/
|
|
|
|
|
/*right: 0;*/
|
|
|
|
|
.select-item-style {
|
|
|
|
|
color: #1379c8;
|
|
|
|
|
padding: 0 10px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.border-right-style {
|
|
|
|
|
border-right: 1px solid #1379c8;
|
|
|
|
|
}
|
|
|
|
|
.select-style {
|
|
|
|
|
color: $color-default-bright;
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.course-arrangement-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 20px);
|
|
|
|
|
/*min-height: 350px;*/
|
|
|
|
|
/*margin-top: 10px;*/
|
|
|
|
|
.ant-tabs {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-tabs-bar {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-tabs-content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.ant-tabs-tabpane {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.plan-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
.query-center-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 32px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.ant-select {
|
|
|
|
|
.ant-select-selection {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
color: white;
|
|
|
|
|
border: 1px solid #1379c8;
|
|
|
|
|
.ant-select-arrow {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.data-content-style{
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 40px);
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.row-list-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 160px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
.table-row-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.col {
|
|
|
|
|
height: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background-color: #1c3369;
|
|
|
|
|
color: white;
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.no-data-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: white;
|
|
|
|
|
/deep/ .ant-empty {
|
|
|
|
|
.ant-empty-image {
|
|
|
|
|
height: 60px !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-empty-description {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table-row-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.col {
|
|
|
|
|
height: 30px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
background-color: #1c3369;
|
|
|
|
|
color: white;
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.timetable-content-style {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.timetable-type-box-style {
|
|
|
|
|
width: 150px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
background-color: #414b6c;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 10px 15px;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.box-img-style {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 60px;
|
|
|
|
|
color: $color-default-bright;
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.box-img-in-style {
|
|
|
|
|
width: 30px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.box-text-style {
|
|
|
|
|
width: calc(100% - 60px);
|
|
|
|
|
height: 60px;
|
|
|
|
|
padding: 10px 16px;
|
|
|
|
|
color: $color-default-bright;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
