From 21558c86ac345908908d86586573b79bd596d77c Mon Sep 17 00:00:00 2001
From: gongdi <410827992@qq.com>
Date: Tue, 26 Oct 2021 17:15:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=91=A8=E5=8E=86=E5=A4=A7=E5=8F=B7=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../oa/weekCalendar/weekCalendarLarge.vue     | 236 +++++++++++++++++-
 1 file changed, 229 insertions(+), 7 deletions(-)

diff --git a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/weekCalendar/weekCalendarLarge.vue b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/weekCalendar/weekCalendarLarge.vue
index b4ab9bd..59e35f6 100644
--- a/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/weekCalendar/weekCalendarLarge.vue
+++ b/src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/oa/weekCalendar/weekCalendarLarge.vue
@@ -1,17 +1,239 @@
 <template>
-    <div>
-
-
+    <div class="week-calendar-large-search-div">
+        <div class="search-div">
+            <span style="margin-right: 1rem">周次</span>
+            <a-select :value="calendarId" style="width: 200px" @change="termChange">
+                <a-select-option v-for="item in termList" :key="item.calendar_id">
+                    {{item.cycle_name}}
+                </a-select-option>
+            </a-select>
+        </div>
+        <div class="week-content-div">
+            <div class="week-list-div">
+                <div class="week-day-div"><div class="day-div">一</div></div>
+                <div class="week-day-div"><div class="day-div">二</div></div>
+                <div class="week-day-div"><div class="day-div">三</div></div>
+                <div class="week-day-div"><div class="day-div">四</div></div>
+                <div class="week-day-div"><div class="day-div">五</div></div>
+                <div class="week-day-div"><div class="day-div weekend-div">六</div></div>
+                <div class="week-day-div"><div class="day-div weekend-div">日</div></div>
+            </div>
+            <div class="week-list-content-div">
+                <div class="day-content-div"></div>
+                <div class="day-content-div"></div>
+                <div class="day-content-div"></div>
+                <div class="day-content-div"></div>
+                <div class="day-content-div"></div>
+                <div class="day-content-div"></div>
+                <div class="day-content-div sunday-div"></div>
+            </div>
+            <vue-scroll class="content-scroll-div" :ops="listScroll" style="height:16rem;position: absolute;top: 4rem;opacity:1;padding: 0 0 0.5rem 0">
+                <template  v-for="item in dataList">
+                    <div class="calendar-info-row-div" v-if="getExist(item)" :style="{'margin-left':getMarginLeft(item),'width':getWidth(item)}" >
+                        <div class="info-row-div" :title="item.detail_time">{{item.detail_time}}</div>
+                        <div class="info-row-div" :title="item.detail_content">{{item.detail_content}}</div>
+                    </div>
+                </template>
+            </vue-scroll>
+        </div>
     </div>
 </template>
-
-
 <script>
+    import InterConfig from './interConfig';
+    import {Select, Spin, Empty} from 'ant-design-vue';
     export default{
         data(){
-            return {}
+            return {
+                listScroll: this.StaticParams.scrollOption,
+                isLoading: true,
+                calendarId: "",//校历ID
+                cycleId:"",
+                termList: [],//学期列表
+                dataList: [],//数据列表
+                pageNumber: 1,
+                pageSize: 1000000,
+                totalPage: 0,
+                totalRow: 0,
+                itemWidth:"14%",//列宽
+            }
+        },
+        mounted(){
+            this.getWeekCalendarList();
+        },
+        methods: {
+            //获取校历数据
+            getWeekCalendarList: function () {
+                let dataList = this.dataList;
+                let params = {
+                    org_id: this.BaseConfig.person_info_my.bureau_id,
+                    calendar_type: 2,
+                    calendar_id: this.calendarId,
+                    page_number: this.pageNumber,
+                    page_size: this.pageSize
+                }
+                this.isLoading = true;
+                this.InterfaceConfig.callInterface([{
+                    url: InterConfig.viewSchoolCalendar.url,
+                    params: params,
+                    method: InterConfig.viewSchoolCalendar.method,
+                    isTestLogin: InterConfig.viewSchoolCalendar.isTestLogin,
+                }], (result) => {
+                    this.isLoading = false;
+                    if (result[0].data.code === 2000) {
+                        let resObj = result[0].data.data;
+                        this.calendarId = resObj.now_calendar_id ? parseInt(resObj.now_calendar_id) : "";
+                        this.termList = resObj.calendar_list;
+                        this.cycleId = this.getCycleIdByCalendarId();
+                        this.dataList = dataList.concat(resObj.list);
+                        this.totalPage = resObj.total_page;
+                        this.totalRow = resObj.total_row;
+                    }
+                })
+            },
+            getCycleIdByCalendarId:function () {
+                let cycleId = "";
+                for(let i = 0,len = this.termList.length;i < len;i ++){
+                    let week = this.termList[i];
+                    if(week.calendar_id == this.calendarId){
+                        cycleId = week.cycle_id;
+                        break;
+                    }
+                }
+                return cycleId;
+            },
+            termChange: function (value) {
+                if (this.calendarId != value) {
+                    this.calendarId = value;
+                    this.dataList = [];
+                    this.isLoading = true;
+                    this.pageNumber = 1;
+                    this.getWeekCalendarList();
+                }
+            },
+            getExist:function (obj) {
+                let exist = false;
+                if(this.getMarginLeft(obj) !== ""){
+                    exist = true;
+                }
+                return exist;
+            },
+            getMarginLeft:function (obj) {
+                let detail_time = obj.detail_time;
+                let detail_start = Date.parse(detail_time.split('~')[0]);
+                let cycle_start = Date.parse(this.cycleId.split('~')[0]);
+                let days = (detail_start - cycle_start)/(1*24*60*60*1000);
+                return days >= 0  && days <= 6 ? days * 14 + "%":"";
+            },
+            getWidth:function (obj) {
+                if(this.getMarginLeft(obj) !== ""){
+                    let detail_time = obj.detail_time;
+                    let detail_start = Date.parse(detail_time.split('~')[0]);
+                    let detail_end = Date.parse(detail_time.split('~')[1]);
+                    let days = (detail_end - detail_start)/(1*24*60*60*1000);
+                    let result = "0%";
+                    if(days >= 0 && days < 7){
+                        result = (days + 1) * 14 + "%";
+                    }else if(days >= 7){
+                        result = "98%";
+                    }
+                    return result;
+                }else {
+                    return "0%";
+                }
+            }
+        },
+        components: {
+            ASelect: Select,
+            ASelectOption: Select.Option,
+            //ASpin: Spin,
+            //AEmpty: Empty
         }
     }
 </script>
+<style scoped lang="scss">
+    .week-calendar-large-search-div{
+        width: 100%;
+        min-height: 20rem;
+        padding: 0.5rem;
+        display: flex;
+        flex-direction: column;
+        .search-div {
+            width: 100%;
+            min-height: 3rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .week-content-div{
+            width: 100%;
+            min-height: 20rem;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            .week-list-div{
+                width: 100%;
+                height: 4rem;
+                display: flex;
+                .week-day-div{
+                    width: 14%;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    .day-div{
+                        width: 1.6rem;
+                        height: 1.6rem;
+                        border-radius: 1.6rem;
+                        background-color: #bbdefb;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: #1565C0;
+                    }
+                    .weekend-div{
+                        background-color: #ffcdd2;
+                        color: #F44336;
+                    }
+                }
+            }
+            .week-list-content-div{
+                width: 100%;
+                height: 16rem;
+                display: flex;
+                background-color: #f2f2f2;
+                padding: 0.5rem 0;
+                .day-content-div{
+                    width: 14%;
+                    height: 100%;
+                    border-right: 1px solid #31a8fa;
+                }
+                .sunday-div{
+                    border-right:none !important;
+                }
+            }
+            .content-scroll-div{
+                display: flex;
+                flex-direction: column;
+                .calendar-info-row-div{
+                    height: 3rem;
+                    border: 1px solid #f4b159;
+                    border-right: 0;
+                    background-color: #f8ebe9;
+                    margin-top: 0.5rem;
+                    .info-row-div{
+                        width: 100%;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                    }
+                }
+                .data-row-div{
+                    width: 100%;
+                    height: 3rem;
+                    margin-top: 0.5rem;
 
-<style></style>
\ No newline at end of file
+                }
+            }
+        }
+    }
+</style>
\ No newline at end of file