parent
0c4c79412f
commit
2a9de4b2e4
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 660 B |
|
After Width: | Height: | Size: 228 B |
|
After Width: | Height: | Size: 230 B |
|
After Width: | Height: | Size: 368 B |
|
After Width: | Height: | Size: 407 B |
|
After Width: | Height: | Size: 456 B |
@ -1,34 +1,422 @@
|
||||
<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>
|
||||
<script>
|
||||
/*
|
||||
* 课程安排
|
||||
* */
|
||||
* 课程安排
|
||||
* */
|
||||
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},
|
||||
]
|
||||
}
|
||||
},
|
||||
components:{
|
||||
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>
|
||||
Loading…
Reference in new issue