parent
e69389d774
commit
c2a20a9a31
@ -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>
|
||||||
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in new issue