From c2a20a9a316f6e9074539f9d6d8162b332bbf62c Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Wed, 15 Jun 2022 10:48:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B4=8B=E6=B5=A6=E5=AD=A6=E6=A0=A1=20?=
 =?UTF-8?q?=E5=85=AB=E5=A4=A7=E4=B8=AD=E5=BF=83=20=E8=A1=8C=E6=94=BF?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=B8=AD=E5=BF=83=20=E6=A0=A1=E5=8E=86?=
 =?UTF-8?q?=E5=91=A8=E5=8E=86=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/adminCenter/adminCenter.vue         |   6 +-
 .../schoolDaily/calendar_new.vue              | 102 ++++++
 .../calendar_new/schoolCalendar.vue           | 328 ++++++++++++++++++
 .../schoolDaily/calendar_new/weekCalendar.vue | 290 ++++++++++++++++
 4 files changed, 724 insertions(+), 2 deletions(-)
 create mode 100644 src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new.vue
 create mode 100644 src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/schoolCalendar.vue
 create mode 100644 src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/weekCalendar.vue

diff --git a/src/views/screenAdaptation/pages/adminCenter/adminCenter.vue b/src/views/screenAdaptation/pages/adminCenter/adminCenter.vue
index 005d7e6..b0dd236 100644
--- a/src/views/screenAdaptation/pages/adminCenter/adminCenter.vue
+++ b/src/views/screenAdaptation/pages/adminCenter/adminCenter.vue
@@ -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>
diff --git a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new.vue b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new.vue
new file mode 100644
index 0000000..2a90bf8
--- /dev/null
+++ b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/schoolCalendar.vue b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/schoolCalendar.vue
new file mode 100644
index 0000000..77b4464
--- /dev/null
+++ b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/schoolCalendar.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/weekCalendar.vue b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/weekCalendar.vue
new file mode 100644
index 0000000..8a9b497
--- /dev/null
+++ b/src/views/screenAdaptation/pages/monitorCenter/schoolDaily/calendar_new/weekCalendar.vue
@@ -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>
\ No newline at end of file