值班员日历

src/store/modules/app.ts

@@ -9,6 +9,7 @@ const state = {
 	userRoleList: [],
 	zby: true,
 	timestamp: new Date().getTime(),
+	weekStart: 6
 }
 
 const getters = {

src/views/staging/common/handle.ts

@@ -46,7 +46,8 @@ export const getMonthCalendarData = (d, fD, selectMonth = null) => {
     const t = new Date(i)
     const obj: any = {
       date: t,
-      dayStr: t.getDate()
+      dayStr: t.getDate(),
+      tom: getYMDTime(t) > getYMDTime(d)
     }
     if (getYMDTime(t) < monthFirstDate.getTime()) {
       obj.last = true //  是补全的日历过去时间

src/views/staging/zbgly/left/calendar-com.vue

@@ -47,7 +47,7 @@
               </template>
             </div>
             <div class="week-block-daily">
-              <div class="label">日志</div>
+              <div class="label">日报</div>
               <template v-for="item in week.calendar">
                 <div class="item">
                   <template v-if="$util.isValue(item.isDaily)">
@@ -109,7 +109,7 @@ export default defineComponent({
     const state = reactive({
       Handle: Handle,
       deptId: '',
-      startWeek: 6,
+      startWeek: store.state.app.weekStart,
       timestamp: JSON.parse(JSON.stringify(store.state.app.timestamp)),
       selectMonth: JSON.parse(JSON.stringify(store.state.app.timestamp)),
     })

src/views/staging/zby/center/calendar.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="calendar-main">
+    <div class="month-select">
+      <div class="show-block __hover" @click="ref_date.handleOpen()">
+        <img class="select-last __hover" src="@/views/staging/common/title-triangle.png" @click.stop="switchMonth(false)"/>
+        <div class="month">{{new Date(selectMonth).getFullYear()}}年{{new Date(selectMonth).getMonth() + 1}}月</div>
+        <img class="select-next __hover" src="@/views/staging/common/title-triangle.png" @click.stop="switchMonth(true)"/>
+      </div>
+      <el-date-picker ref="ref_date" v-model="selectMonth" type="month"/>
+    </div>
+    <div class="week-head">
+      <template v-for="item in getWeekCN(startWeek)">
+        <div class="week-cn">{{item}}</div>
+      </template>
+    </div>
+    <div class="week-body">
+      <template v-for="week in calendarCpt">
+        <div class="week-block">
+          <div class="week-block-head">
+            <template v-for="item in week.calendar">
+              <div class="wbh-content">
+                <div class="day" :class="{last: item.last, will: item.will, today: item.today}">{{item.dayStr}}</div>
+                <div class="info" :class="{tom: item.tom}">
+                  <div>
+                    签卡
+                    <template v-if="$util.isValue(item.isSign)">
+                      <template v-if="item.isSign">
+                        <img src="@/assets/images/business/calendar-true.png"/>
+                      </template>
+                      <template v-else>
+                        <img src="@/assets/images/business/calendar-false.png"/>
+                      </template>
+                    </template>
+                  </div>
+                  <div>
+                    日报
+                    <template v-if="$util.isValue(item.isDaily)">
+                      <template v-if="item.isDaily">
+                        <img src="@/assets/images/business/calendar-true.png"/>
+                      </template>
+                      <template v-else>
+                        <img src="@/assets/images/business/calendar-false.png"/>
+                      </template>
+                    </template>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+          <div class="week-block-weekly">
+            <div class="value" :style="`color: ${week.isWeekly ? '#01C869' : '#E72524'}`">
+              <template v-if="$util.isValue(week.isWeekly)">
+                {{week.isWeekly ? '周报已提交' : '周报未提交'}}
+              </template>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="week-tips">
+      <div class="sign">
+        签卡：
+        <div class="green"/>正常
+        <div class="red"/>缺勤
+        <div class="orange"/>迟到
+        <div class="yellow"/>早退
+        <div class="gray"/>缺卡
+      </div>
+      <div class="daily">
+        日志：
+        <div class="green"/>已提交
+        <div class="red"/>未提交
+      </div>
+      <div class="weekly">
+        周报：
+        <div class="green"/>已提交
+        <div class="red"/>未提交
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as Handle from "@/views/staging/common/handle";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      Handle: Handle,
+      startWeek: store.state.app.weekStart,
+      timestamp: JSON.parse(JSON.stringify(store.state.app.timestamp)),
+      selectMonth: JSON.parse(JSON.stringify(store.state.app.timestamp)),
+    })
+    const calendarCpt = computed(() => {
+      return Handle.getMonthCalendarData(state.timestamp, state.startWeek, state.selectMonth)
+    })
+    const calendarCptLength = computed(() => {
+      return calendarCpt.value.length
+    })
+    const getWeekCN = (xq) => {
+      const m = new Map([
+        [0, '日'],
+        [1, '一'],
+        [2, '二'],
+        [3, '三'],
+        [4, '四'],
+        [5, '五'],
+        [6, '六'],
+      ])
+      const weekArray: any = [];
+      for (let i = 0; i < 7; i++) {
+        const index = (xq + i) % 7;
+        weekArray.push(m.get(index));
+      }
+      return weekArray
+    }
+    const ref_date = ref()
+    const switchMonth = (isNext) => {
+      const sm = new Date(state.selectMonth)
+      const first = new Date(sm.getFullYear(), sm.getMonth(), 1)
+      const oneDayTime = 1000 * 60 * 60 * 24
+      if (isNext) {
+        const next = new Date(first.getTime() + oneDayTime * 40)
+        state.selectMonth = new Date(next.getFullYear(), next.getMonth(), 1)
+      } else {
+        const last = new Date(first.getTime() - oneDayTime)
+        state.selectMonth = new Date(last.getFullYear(), last.getMonth(), 1)
+      }
+    }
+    return {
+      ...toRefs(state),
+      getWeekCN,
+      ref_date,
+      switchMonth,
+      calendarCpt,
+      calendarCptLength
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.calendar-main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .month-select {
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    :deep(.el-date-editor--month) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      visibility: hidden;
+      z-index: 1;
+    }
+    .show-block {
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .select-last, .select-next {
+        width: 11px;
+        height: 23px;
+      }
+      .select-last {
+        transform: rotate(180deg);
+      }
+      .month {
+        margin: 0 11px;
+        font-size: 18px;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 30px;
+      }
+    }
+  }
+  .week-head {
+    height: 60px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    .week-cn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #FFFFFF;
+    }
+  }
+  .week-body {
+    flex: 1;
+    display: grid;
+    grid-template-rows: repeat(v-bind(calendarCptLength), 1fr);
+    row-gap: 10px;
+    width: 100%;
+    .week-block {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      .week-block-head {
+        flex: 1;
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        column-gap: 6px;
+        .wbh-content {
+          display: flex;
+          flex-direction: column;
+          .day {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: rgba(0, 133, 247, 0.25);
+            font-size: 18px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            &.last, &.will {
+              background-color: rgba(0, 133, 247, 0.1);
+              color: rgba(255, 255, 255, 0.4);
+            }
+            &.today {
+              border: 2px solid;
+              border-image: linear-gradient(0deg, #4FACFE, #00F2FE) 10 10;
+              box-shadow: inset 0px 0px 20px 3px #2EB8FF;
+            }
+          }
+          .info {
+            margin-top: 2px;
+            height: 40%;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            column-gap: 2px;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            &.tom {
+              opacity: 0.5;
+            }
+            >div {
+              background-color: rgba(0, 133, 247, 0.1);
+              padding-left: 6px;
+              display: flex;
+              align-items: center;
+              >img {
+                margin-left: 8px;
+              }
+            }
+          }
+        }
+      }
+      .week-block-weekly {
+        width: 100%;
+        height: 25%;
+        background-color: rgba(0, 133, 247, 0.1);
+        margin-top: 2px;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        display: grid;
+        align-items: center;
+        grid-template-columns: repeat(7, 1fr);
+        .value {
+          grid-column-start: 7;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .week-tips {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: 20px;
+    font-size: 12px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: rgba(254, 254, 254, 0.5);
+    >div {
+      display: flex;
+      align-items: center;
+      .green, .red, .orange, .yellow, .gray {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        margin: 0 6px 0 10px;
+      }
+      .green {
+        background-color: #3EFFBB;
+      }
+      .red {
+        background-color: #E5004F;
+      }
+      .orange {
+        background-color: #F9741B;
+      }
+      .yellow {
+        background-color: #F8EA9A;
+      }
+      .gray {
+        background-color: #36485b;
+      }
+    }
+    .daily {
+      margin: 0 52px;
+    }
+  }
+}
+</style>

src/views/staging/zby/center/index.vue

@@ -31,6 +31,18 @@
         </div>
       </div>
     </div>
+    <div class="content">
+      <ButtonSwitchCom class="buttons" :options="[
+          {label: '统计', value: '1'},
+          {label: '日历', value: '2'},
+      ]" padding="6px 16px" type="type2" v-model:active="sourceType"/>
+      <template v-if="sourceType === '1'">
+        <StatisticCom/>
+      </template>
+      <template v-else>
+        <CalendarCom/>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -50,11 +62,15 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import ButtonSwitchCom from '../../common/button-switch.vue'
+import CalendarCom from './calendar.vue'
+import StatisticCom from './statistic.vue'
 
 export default defineComponent({
   name: '',
   components: {
     ButtonSwitchCom,
+    CalendarCom,
+    StatisticCom
   },
   setup(props, {emit}) {
     const store = useStore();
@@ -62,6 +78,7 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
+      sourceType: '2'
     })
     return {
       ...toRefs(state),
@@ -114,7 +131,7 @@ export default defineComponent({
     background-image: url("@/assets/images/business/operation-datetime.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    margin-top: 52px;
+    margin-top: 40px;
     display: flex;
     align-items: center;
     position: relative;
@@ -174,5 +191,16 @@ export default defineComponent({
       }
     }
   }
+  .content {
+    width: 100%;
+    flex: 1;
+    margin-top: 20px;
+    position: relative;
+    .buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
 }
 </style>

src/views/staging/zby/center/statistic.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="statistic-main">
+    <ButtonSwitchCom class="buttons" :options="[
+          {label: '按日', value: '1'},
+          {label: '按周', value: '2'},
+          {label: '按月', value: '3'},
+      ]" padding="6px 16px" v-model:active="dateType"/>
+    <div class="date">{{}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    ButtonSwitchCom
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      dateType: '1'
+    })
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.statistic-main {
+  width: 100%;
+  height: 100%;
+}
+</style>