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
gongdi 3 years ago
parent e69389d774
commit c2a20a9a31
4 changed files with 724 additions and 2 deletions
Show Stats Download Patch File Download Diff File

6
src/views/screenAdaptation/pages/adminCenter/adminCenter.vue
Unescape View File

@ -16,7 +16,7 @@
<div class="column-style">
<SchoolDynamic/>
<!--<Schedule/>-->
<Calendar/>
<CalendarNew/>
</div>
</div>
</template>
@ -37,6 +37,7 @@
import SchoolDynamic from './mainCenter/schoolDynamic.vue';
import Schedule from './mainCenter/schedule.vue';
import Calendar from '../monitorCenter/schoolDaily/calendar_yp.vue';
import CalendarNew from '../monitorCenter/schoolDaily/calendar_new.vue';
export default{
data(){
return {}
@ -58,7 +59,8 @@
PlanSummary_yp,
SchoolDynamic,
Schedule,
Calendar
Calendar,
CalendarNew
}
}
</script>

102
src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new.vue
Unescape View File

@ -0,0 +1,102 @@
<template>
<CommonBox title="周历校历" class="school-calendar-new-style">
<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="school-calendar-content-style">
<a-tabs :activeKey="paneKey">
<a-tab-pane :key="1" tab="Tab 1">
<WeekCalendar/>
</a-tab-pane>
<a-tab-pane :key="2" tab="Tab 2">
<SchoolCalendar/>
</a-tab-pane>
</a-tabs>
</div>
</CommonBox>
</template>
<script>
/*
* 周历校历
* */
import CommonBox from '../../secondPages/commonBox.vue';
import {Tabs} from 'ant-design-vue';
import WeekCalendar from './calendar_new/weekCalendar.vue';
import SchoolCalendar from './calendar_new/schoolCalendar.vue';
export default{
data(){
return {
selectType: 1,//1 周历 2 校历
paneKey:1,
}
},
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;
}
}
},
components:{
CommonBox,
ATabs: Tabs,
ATabPane: Tabs.TabPane,
WeekCalendar,
SchoolCalendar
}
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/style";
.school-calendar-new-style{
width: 100%;
height: 560px !important;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
margin-top: 50px;
.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;
}
}
.school-calendar-content-style{
width: 100%;
height: 500px;
margin-top: 10px;
/deep/ .ant-tabs-bar{
display: none !important;
}
}
}
</style>

328
src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/schoolCalendar.vue
Unescape View File

@ -0,0 +1,328 @@
<template>
<div class="new-school-calendar-style">
<div class="top-search-style">
<a-icon type="left" class="icon-style" @click="changeWeek(-1)"/>
<span class="ween-title-style">{{currentWeek.cycle_name}}</span>
<a-icon type="right" class="icon-style" @click="changeWeek(1)"/>
</div>
<div class="drop-down-search-style">
<a-select :value="categoryId" @change="categoryChange">
<a-select-option v-for="item in categoryList" :key="item.category_id" :value="item.category_id">
{{ item.category_name }}
</a-select-option>
</a-select>
</div>
<div class="week-calendar-content-style">
<div class="list-data-header-row-style">
<div class="row-item-style row-narrow-style">时间</div>
<div class="row-item-style row-wide-style">工作内容</div>
<div class="row-item-style row-narrow-style">地点</div>
<div class="row-item-style row-narrow-style">对象</div>
</div>
<vue-scroll :ops="listScroll" style="height:420px" class="list-data-content-row-style">
<template v-for="item,index in dataList" >
<div :class="'data-item-style ' + (index === 0?'data-first-item-style':'')" :key="item.detail_id">
<div class="time-style">{{item.detail_time}}</div>
<div :class="'info-style ' + (index % 2 === 0?'info-color-one-style':'info-color-two-style')">
<div class="work-info-style">
<vue-scroll :ops="listScroll" style="width:100%;height:50px" >
{{item.detail_content}}
</vue-scroll>
</div>
<div class="other-info-style">
<vue-scroll :ops="listScroll" style="width:100%;height:50px;line-height: 50px;text-align: center" >
{{item.detail_place}}
</vue-scroll>
</div>
<div class="other-info-style">
<vue-scroll :ops="listScroll" style="width:100%;height:50px;line-height: 50px;text-align: center" >
{{item.detail_target}}
</vue-scroll>
</div>
</div>
</div>
</template>
</vue-scroll>
</div>
</div>
</template>
<script>
/*
* 周历
* */
import {Icon,Select} from 'ant-design-vue';
export default{
data(){
return {
listScroll: this.StaticParams.scrollOption,
categoryId:0,
categoryList:[
{
category_id: 0,
category_name: "全部",
},
{
category_id: 643,
category_name: "行政后勤",
num: 4
},
{
category_id: 644,
category_name: "安全工作",
num: 0
},
{
category_id: 645,
category_name: "教学教研",
num: 0
}
],
weekArr: [
{cycle_name: "2014~2015学年上学期"}, {cycle_name: "2014~2015学年下学期"}, {cycle_name: "2015~2016学年上学期"}
],
weekIndex: 0,
dataList:[
{
calendar_category_id: 643,
calendar_category_name: "行政后勤",
detail_content: "1\n2\n3\n4",
detail_id: 608,
detail_place: "",
detail_remark: "",
detail_target: "",
detail_time: "2020-10-22~2020-10-23",
leader_id: 0,
leader_name: ""
},
{
calendar_category_id: 643,
calendar_category_name: "行政后勤",
detail_content: "1234",
detail_id: 625,
detail_place: "1234",
detail_remark: "1234",
detail_target: "1234",
detail_time: "2020-10-22~2020-10-24",
leader_id: 0,
leader_name: ""
},
{
calendar_category_id: 736,
calendar_category_name: "11111",
detail_content: "123456",
detail_id: 644,
detail_place: "132456789",
detail_remark: "111",
detail_target: "456789",
detail_time: "2020-11-18",
leader_id: null,
leader_name: "",
},
{
calendar_category_id: 643,
calendar_category_name: "行政后勤",
detail_content: "一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五",
detail_id: 648,
detail_place: "一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五",
detail_remark: "一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五",
detail_target: "一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五一二三四五",
detail_time: "2020-11-19~2020-11-21",
leader_id: 0,
leader_name: ""
},
{
calendar_category_id: 643,
calendar_category_name: "行政后勤",
detail_content: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_id: 649,
detail_place: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_remark: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_target: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_time: "2020-11-24~2020-11-26",
leader_id: 0,
leader_name: ""
},
{
calendar_category_id: 643,
calendar_category_name: "行政后勤",
detail_content: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_id: 650,
detail_place: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_remark: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_target: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_time: "2020-11-24~2020-11-26",
leader_id: 0,
leader_name: ""
},
{
calendar_category_id: 643,
calendar_category_name: "行政后勤",
detail_content: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_id: 651,
detail_place: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_remark: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_target: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
detail_time: "2020-11-24~2020-11-26",
leader_id: 0,
leader_name: ""
},
]
}
},
computed: {
currentWeek: function () {
return this.weekArr[this.weekIndex];
}
},
methods: {
changeWeek: function (param) {
if (param === 1) {
//加
if (this.weekIndex === this.weekArr.length - 1) {
this.weekIndex = 0;
} else {
this.weekIndex += 1;
}
} else {
//减
if (this.weekIndex === 0) {
this.weekIndex = this.weekArr.length - 1;
} else {
this.weekIndex -= 1;
}
}
},
categoryChange:function (value) {
if (this.categoryId !== value) {
this.categoryId = value;
}
}
},
components: {
AIcon: Icon,
ASelect: Select,
ASelectOption: Select.Option,
}
}
</script>
<style scoped lang="scss">
@import "../../../../assets/scss/style";
.new-school-calendar-style {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
.top-search-style {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 5px;
.icon-style {
color: $color-default-bright;
font-size: 25px;
}
.ween-title-style {
height: 50px;
line-height: 50px;
font-size: 16px;
padding: 0 5px;
color: $color-default-bright;
text-align: center;
}
}
.drop-down-search-style{
width: 100%;
height: 20px;
.ant-select{
width: 100px;
height: 20px;
/deep/ .ant-select-selection{
height: 20px !important;
.ant-select-selection__rendered{
line-height: 20px;
}
}
}
}
.week-calendar-content-style {
width: 100%;
height: 430px;
display: flex;
flex-direction: column;
.list-data-header-row-style {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
.row-item-style {
background-color: #17387b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.row-narrow-style {
width: calc(20% - 2.5px);
}
.row-wide-style {
width: calc(40% - 2.5px);
}
}
.list-data-content-row-style{
width: 100%;
height: 420px;
display: flex;
flex-direction: column;
.data-item-style{
width: 100%;
height: 60px;
border-left: 1px solid #306b93;
border-right: 1px solid #306b93;
border-bottom: 1px solid #306b93;
display: flex;
.time-style{
width: 20%;
display: flex;
text-align: center;
align-items: center;
color: $color-default-bright;
}
.info-style{
width: 80%;
display: flex;
color: white;
.work-info-style{
width: 50%;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px;
}
.other-info-style{
width: 25%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
}
.info-color-one-style{
background-color: #4b496a;
}
.info-color-two-style{
background-color: #1e2a59;
}
}
.data-first-item-style{
border-top: 1px solid #306b93;
}
}
}
}
</style>

290
src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/weekCalendar.vue
Unescape View File

@ -0,0 +1,290 @@
<template>
<div class="week-calendar-new-style">
<div class="top-search-style">
<a-icon type="left" class="icon-style" @click="changeWeek(-1)"/>
<span class="ween-title-style">{{currentWeek.cycle_name}}</span>
<a-icon type="right" class="icon-style" @click="changeWeek(1)"/>
</div>
<div class="week-calendar-content-style">
<div class="list-data-header-row-style">
<div class="row-item-style row-narrow-style">时间</div>
<div class="row-item-style row-wide-style">工作内容</div>
<div class="row-item-style row-narrow-style">地点</div>
<div class="row-item-style row-narrow-style">对象</div>
</div>
<vue-scroll :ops="listScroll" style="height:420px" class="list-data-content-row-style">
<template v-for="item,index in dataList" >
<div :class="'data-item-style ' + (index === 0?'data-first-item-style':'')" :key="item.detail_id">
<div class="time-style">{{item.detail_time}}</div>
<div :class="'info-style ' + (index % 2 === 0?'info-color-one-style':'info-color-two-style')">
<div class="work-info-style">
<vue-scroll :ops="listScroll" style="width:100%;height:50px" >
{{item.detail_content}}
</vue-scroll>
</div>
<div class="other-info-style">
<vue-scroll :ops="listScroll" style="width:100%;height:50px;line-height: 50px;text-align: center" >
{{item.detail_place}}
</vue-scroll>
</div>
<div class="other-info-style">
<vue-scroll :ops="listScroll" style="width:100%;height:50px;line-height: 50px;text-align: center" >
{{item.detail_target}}
</vue-scroll>
</div>
</div>
</div>
</template>
</vue-scroll>
</div>
</div>
</template>
<script>
/*
* 周历
* */
import {Icon} from 'ant-design-vue';
export default{
data(){
return {
listScroll: this.StaticParams.scrollOption,
weekArr: [
{cycle_name: "2021-07-26~2021-08-01"}, {cycle_name: "2021-07-19~2021-07-25"}, {cycle_name: "2021-07-12~2021-07-18"}
],
weekIndex: 0,
dataList:[
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "开展学校环境全面消杀工作",
detail_id: 662,
detail_place: "学校内部",
detail_remark: "",
detail_target: "学校设施设备，教学场所",
detail_time: "2019-12-31~2020-01-05",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "开展新生入学备案工作",
detail_id: 663,
detail_place: "档案室",
detail_remark: "",
detail_target: "新生档案",
detail_time: "2020-01-03~2020-01-05",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "筹办学校6年级演讲比赛",
detail_id: 664,
detail_place: "体育馆",
detail_remark: "",
detail_target: "6年级师生",
detail_time: "2019-12-30~2020-01-02",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "筹办5年级歌唱比赛",
detail_id: 665,
detail_place: "音乐教室",
detail_remark: "",
detail_target: "5年级师生",
detail_time: "2020-01-01~2020-01-02",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "筹办4年级绘画比赛",
detail_id: 666,
detail_place: "美术教师",
detail_remark: "",
detail_target: "4年级师生",
detail_time: "2020-01-02~2020-01-05",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "做好年度红旗班评比工作",
detail_id: 667,
detail_place: "校内",
detail_remark: "",
detail_target: "全校班级",
detail_time: "2019-12-30~2020-01-05",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "各班主任，组织落实好“最美的人”主题活动班会，学校领导组成巡视小组，下到班级检查",
detail_id: 668,
detail_place: "各班级",
detail_remark: "",
detail_target: "学校师生",
detail_time: "2020-01-07~2020-01-21",
leader_id: 22933,
leader_name: "费利明别瞎改"
},
{
calendar_category_id: 0,
calendar_category_name: "",
detail_content: "各班主任，组织落实好“最美的人”主题活动班会，学校领导组成巡视小组，下到班级检查",
detail_id: 669,
detail_place: "各班级",
detail_remark: "",
detail_target: "学校师生",
detail_time: "2020-01-07~2020-01-21",
leader_id: 22933,
leader_name: "费利明别瞎改"
}
]
}
},
computed: {
currentWeek: function () {
return this.weekArr[this.weekIndex];
}
},
methods: {
changeWeek: function (param) {
if (param === 1) {
//加
if (this.weekIndex === this.weekArr.length - 1) {
this.weekIndex = 0;
} else {
this.weekIndex += 1;
}
} else {
//减
if (this.weekIndex === 0) {
this.weekIndex = this.weekArr.length - 1;
} else {
this.weekIndex -= 1;
}
}
}
},
components: {
AIcon: Icon
}
}
</script>
<style scoped lang="scss">
@import "../../../../assets/scss/style";
.week-calendar-new-style {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
.top-search-style {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 5px;
.icon-style {
color: $color-default-bright;
font-size: 25px;
}
.ween-title-style {
height: 50px;
line-height: 50px;
font-size: 16px;
padding: 0 5px;
color: $color-default-bright;
text-align: center;
}
}
.week-calendar-content-style {
width: 100%;
height: 450px;
display: flex;
flex-direction: column;
.list-data-header-row-style {
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
.row-item-style {
background-color: #17387b;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.row-narrow-style {
width: calc(20% - 2.5px);
}
.row-wide-style {
width: calc(40% - 2.5px);
}
}
.list-data-content-row-style{
width: 100%;
height: 420px;
display: flex;
flex-direction: column;
.data-item-style{
width: 100%;
height: 60px;
border-left: 1px solid #306b93;
border-right: 1px solid #306b93;
border-bottom: 1px solid #306b93;
display: flex;
.time-style{
width: 20%;
display: flex;
text-align: center;
align-items: center;
color: $color-default-bright;
}
.info-style{
width: 80%;
display: flex;
color: white;
.work-info-style{
width: 50%;
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px;
}
.other-info-style{
width: 25%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 5px;
}
}
.info-color-one-style{
background-color: #4b496a;
}
.info-color-two-style{
background-color: #1e2a59;
}
}
.data-first-item-style{
border-top: 1px solid #306b93;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save