模拟登录

src/layout/header/head-com.vue

@@ -4,6 +4,7 @@
       <CusEllipsis :value="dutyPeopleCpt"/>
     </div>
     <div class="head-com-right">
+      <el-button @click="$store.commit('app/SET_SWITCH_ZBY')">切换角色</el-button>
       <img class="icon-date" src="@/assets/images/layout/head_icon-1.png">
       <div class="date">{{currentDateCpt}}</div>
       <img class="icon-user" src="@/assets/images/layout/head_icon-2.png">

src/store/modules/app.ts

@@ -34,6 +34,9 @@ const mutations = {
 			state.timestamp += 1000
 		}, 1000)
 	},
+	SET_SWITCH_ZBY(state: any) {
+		state.zby = !state.zby
+	},
 }
 
 const actions = {

src/views/global/login.vue

@@ -60,8 +60,8 @@ export default defineComponent({
     const state = reactive({
       form: {
         deviceId: '',
-        username: 'sg_songpeijie',
-        password: 'SONGPEIJIE@sh*8',
+        username: '',
+        password: '',
         validCode: ''
       },
       codeImg: '',
@@ -70,6 +70,9 @@ export default defineComponent({
     })
     const ref_form = ref<FormInstance>()
     const onNormalClick = () => {
+      sessionStorage.setItem('sg_token', '123')
+      location.replace('/')
+
       if (!ref_form.value) return
       ref_form.value.validate((valid, fields) => {
         if (valid) {

src/views/staging/common/handle.ts

@@ -8,19 +8,23 @@ export const formatDate = (d) => {
   return `${Y}/${M}/${D} ${H}:${m}`;
 }
 
+export const getFirstDateOfWeek = (fDate, firstDayOfWeek) => {
+  const day = fDate.getDay();
+  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
+  const firstDate = new Date(fDate.getFullYear(), fDate.getMonth(), fDate.getDate() - diff);
+  return firstDate;
+}
+
+export const getLastDateOfWeek = (lDate, lastDayOfWeek) => {
+  const day = lDate.getDay();
+  const diff = (day < lastDayOfWeek ? 7 : 0) + day - lastDayOfWeek;
+  const lastDate = new Date(lDate.getFullYear(), lDate.getMonth(), lDate.getDate() + (6 - diff));
+  return lastDate;
+}
+
+export const oneDayTime = 1000 * 60 * 60 * 24
+
 export const getMonthCalendarData = (d, fD, selectMonth = null) => {
-  const getFirstDateOfWeek = (fDate, firstDayOfWeek) => {
-    const day = fDate.getDay();
-    const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
-    const firstDate = new Date(fDate.getFullYear(), fDate.getMonth(), fDate.getDate() - diff);
-    return firstDate;
-  }
-  const getLastDateOfWeek = (lDate, lastDayOfWeek) => {
-    const day = lDate.getDay();
-    const diff = (day < lastDayOfWeek ? 7 : 0) + day - lastDayOfWeek;
-    const lastDate = new Date(lDate.getFullYear(), lDate.getMonth(), lDate.getDate() + (6 - diff));
-    return lastDate;
-  }
   const getYMDTime = (date) => {
     const _date = new Date(date)
     const Y = _date.getFullYear()
@@ -28,7 +32,6 @@ export const getMonthCalendarData = (d, fD, selectMonth = null) => {
     const D = _date.getDate()
     return new Date(`${Y}-${M}-${D}`).getTime()
   }
-  const oneDayTime = 1000 * 60 * 60 * 24
   const _date = selectMonth ? new Date(selectMonth) : new Date(d)
   // d的月份有几天
   const monthDaysTotal = new Date(_date.getFullYear(), _date.getMonth() + 1, 0).getDate()

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

@@ -16,12 +16,18 @@
             @change="handleDay"
             :disabled-date="(d) => new Date($util.YMD(d)).getTime() > new Date(tempToday).getTime()"
         />
-        <el-select v-if="dateType === 'week'" ref="ref_week" v-model="dateValue.selectWeek" :automatic-dropdown="true">
+        <el-select
+            v-if="dateType === 'week'"
+            ref="ref_week"
+            v-model="dateValue.selectWeek"
+            :automatic-dropdown="true"
+            @change="handleWeek"
+        >
           <el-option
               v-for="item in weekOptionsCpt"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              :key="item.str"
+              :label="item.selectValue"
+              :value="item.selectValue"
           />
         </el-select>
         <el-date-picker
@@ -35,7 +41,7 @@
       </div>
       <div class="page">
         <div class="page-last">
-          <img class="__hover" src="@/views/staging/common/title-triangle.png" @click.stop="switchPage(true)"/>
+          <img v-if="pageLastShowCpt" class="__hover" src="@/views/staging/common/title-triangle.png" @click.stop="switchPage(true)"/>
         </div>
         <div class="page-content">
           <template v-if="dateType === 'day'">
@@ -46,11 +52,14 @@
               >{{item.str}}</div>
             </template>
           </template>
-<!--          <template v-else-if="dateType === 'week'">-->
-<!--            <template v-for="item in dateCalendar.week">-->
-<!--              <div class="page-content-item __hover" :class="{today: item.isToday, active: item.isActive}">{{item.str}}</div>-->
-<!--            </template>-->
-<!--          </template>-->
+          <template v-else-if="dateType === 'week'">
+            <template v-for="item in dateCalendar.week">
+              <div class="page-content-item __hover"
+                   :class="{today: item.isToday, active: dateValue.selectWeek === item.selectValue}"
+                   @click="onWeekClick(item)"
+              >{{item.str}}</div>
+            </template>
+          </template>
           <template v-if="dateType === 'month'">
             <template v-for="item in dateCalendar.month">
               <div class="page-content-item __hover"
@@ -228,7 +237,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import ButtonSwitchCom from '../../common/button-switch.vue'
-import {YMD} from "@/utils/util";
+import * as Handle from '../../common/handle'
 
 export default defineComponent({
   name: '',
@@ -241,7 +250,7 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      dateType: 'month',
+      dateType: 'day',
       dataInfo: {
         day: {
           sign: {
@@ -313,6 +322,7 @@ export default defineComponent({
       },
       tempToday: JSON.parse(JSON.stringify(that.$util.YMD(store.state.app.timestamp)))
     })
+    const oneDayTime = Handle.oneDayTime
     const ref_day = ref()
     const ref_week = ref()
     const ref_month = ref()
@@ -320,17 +330,43 @@ export default defineComponent({
       return state.dataInfo[state.dateType]
     })
     const weekOptionsCpt = computed(() => {
-      return [{
-        label: '111', value: 111
-      }]
+      const arr: any = []
+      const firstDate = new Date(new Date(state.tempToday).getFullYear(), 0, 1)
+      const wholeFirstDate = Handle.getFirstDateOfWeek(firstDate, store.state.app.weekStart)
+      let start = JSON.parse(JSON.stringify(wholeFirstDate))
+      let num = 1
+      while (!(new Date(start).getTime() > new Date(state.tempToday).getTime())) {
+        const end = new Date(start).getTime() + oneDayTime * 6
+        arr.push({
+          date: [new Date(start), new Date(end)],
+          str: `第${num}周`,
+          selectValue: `第${num}周(${that.$util.YMD(start)}~${that.$util.YMD(end)})`,
+          isToday: (new Date(start).getTime() <= new Date(state.tempToday).getTime()) && (new Date(end + oneDayTime).getTime() > new Date(state.tempToday).getTime()),
+          week: num
+        })
+        start = end + oneDayTime
+        num++
+      }
+      return arr
+    })
+    const pageLastShowCpt = computed(() => {
+      let flag = false
+      if (state.dateType === 'day' && state.dateCalendar.day.length > 0) {
+        flag = true
+      } else if (state.dateType === 'week' && state.dateCalendar.week.length > 0 && weekOptionsCpt.value.length > 0) {
+        flag = state.dateCalendar.week[0].week > weekOptionsCpt.value[0].week
+      } else if (state.dateType === 'month' && state.dateCalendar.month.length > 0) {
+        flag = true
+      }
+      return flag
     })
     const pageNextShowCpt = computed(() => {
       let flag = false
-      if (state.dateType === 'day') {
+      if (state.dateType === 'day' && state.dateCalendar.day.length > 0) {
         flag = state.dateCalendar.day.every(v => new Date(that.$util.YMD(v.date)).getTime() < new Date(that.$util.YMD(store.state.app.timestamp)).getTime())
-      } else if (state.dateType === 'week') {
-
-      } else if (state.dateType === 'month') {
+      } else if (state.dateType === 'week' && state.dateCalendar.week.length > 0 && weekOptionsCpt.value.length > 0) {
+        flag = state.dateCalendar.week[state.dateCalendar.week.length - 1].week < weekOptionsCpt.value[weekOptionsCpt.value.length - 1].week
+      } else if (state.dateType === 'month' && state.dateCalendar.month.length > 0) {
         flag = state.dateCalendar.month.every(v => new Date(that.$util.YM(v.date)).getTime() < new Date(that.$util.YM(store.state.app.timestamp)).getTime())
       }
       return flag
@@ -340,7 +376,7 @@ export default defineComponent({
       if (state.dateType === 'day') {
         str = that.$util.YMD(state.dateValue.selectDay, true)
       } else if (state.dateType === 'week') {
-
+        str = state.dateValue.selectWeek
       } else if (state.dateType === 'month') {
         str = that.$util.YM(state.dateValue.selectMonth, true)
       }
@@ -352,6 +388,8 @@ export default defineComponent({
       }
       if (state.dateType === 'day') {
         initStaticDay(isLast ? state.dateCalendar.day[0].date.getTime() - oneDayTime : state.dateCalendar.day[6].date.getTime() + oneDayTime * 7)
+      } else if (state.dateType === 'week') {
+        initStaticWeek(isLast ? state.dateCalendar.week[0].week - 7 : state.dateCalendar.week[0].week + 7)
       } else if (state.dateType === 'month') {
         initStaticMonth(isLast ? getM(state.dateCalendar.month[0].date, -1) : getM(state.dateCalendar.month[6].date, 7))
       }
@@ -365,7 +403,6 @@ export default defineComponent({
         ref_month.value.handleOpen()
       }
     }
-    const oneDayTime = 1000 * 60 * 60 * 24
     const initStaticDay = (lastDate) => {
       state.dateCalendar.day = []
       const arr: any = []
@@ -380,6 +417,17 @@ export default defineComponent({
       }
       state.dateCalendar.day = arr
     }
+    const initStaticWeek = (firstWeek) => {
+      state.dateCalendar.week = []
+      const arr: any = []
+      for (let i = 0; i <= 6; i++) {
+        const w = weekOptionsCpt.value?.[firstWeek - 1 + i]
+        if (w) {
+          arr.push(w)
+        }
+      }
+      state.dateCalendar.week = arr
+    }
     const initStaticMonth = (lastDate) => {
       state.dateCalendar.month = []
       const arr: any = []
@@ -397,13 +445,19 @@ export default defineComponent({
     const initStatic = () => {
       const today = new Date(state.tempToday)
       state.dateValue.selectDay = JSON.parse(JSON.stringify(that.$util.YMD(today)))
+      state.dateValue.selectWeek = weekOptionsCpt.value[weekOptionsCpt.value.length - 1].selectValue
       state.dateValue.selectMonth = JSON.parse(JSON.stringify(that.$util.YM(today)))
       initStaticDay(today)
+      initStaticWeek(weekOptionsCpt.value.length - 7 + weekOptionsCpt.value.length % 7 + 1)
+      console.log()
       initStaticMonth(today)
     }
     const onDayClick = (item) => {
       state.dateValue.selectDay = item.selectValue
     }
+    const onWeekClick = (item) => {
+      state.dateValue.selectWeek = item.selectValue
+    }
     const onMonthClick = (item) => {
       state.dateValue.selectMonth = item.selectValue
     }
@@ -413,6 +467,10 @@ export default defineComponent({
       const ld = new Date(d.getTime() + diff * oneDayTime)
       initStaticDay(ld)
     }
+    const handleWeek = (val) => {
+      const obj = weekOptionsCpt.value.filter(v => v.selectValue === val)[0]
+      initStaticWeek(obj.week - obj.week % 7 + 1)
+    }
     const handleMonth = (val) => {
       const d = new Date(that.$util.YM(val))
       const diff = ((new Date(state.tempToday).getFullYear() - new Date(val).getFullYear()) * 12 + (new Date(state.tempToday).getMonth() - new Date(val).getMonth())) % 7
@@ -432,10 +490,13 @@ export default defineComponent({
       weekOptionsCpt,
       onDateSelect,
       onDayClick,
+      onWeekClick,
       onMonthClick,
+      pageLastShowCpt,
       pageNextShowCpt,
       dateFormatCpt,
       handleDay,
+      handleWeek,
       handleMonth
     }
   },
@@ -526,7 +587,7 @@ export default defineComponent({
           justify-content: center;
           box-sizing: border-box;
           &.today {
-            background: rgba(0, 133, 247, 0.4);
+            background: rgba(0, 133, 247, 0.6);
           }
           &.active {
             border: 2px solid;