日、月统计

src/utils/util.ts

@@ -88,7 +88,7 @@ export const YMDHms = (date: any) => {
   const _date = new Date(date)
   const Y = `${_date.getFullYear()}`;
   const M = `${_date.getMonth() + 1 < 10 ? `0${_date.getMonth() + 1}` : _date.getMonth() + 1}`;
-  const D = `${_date.getDate() + 1 < 10 ? `0${_date.getDate()}` : _date.getDate()}`;
+  const D = `${_date.getDate() < 10 ? `0${_date.getDate()}` : _date.getDate()}`;
   const H = `${_date.getHours() < 10 ? `0${_date.getHours()}` : _date.getHours()}`;
   const m = `${_date.getMinutes() < 10 ? `0${_date.getMinutes()}` : _date.getMinutes()}`;
   const s = _date.getSeconds() < 10 ? `0${_date.getSeconds()}` : _date.getSeconds();
@@ -99,9 +99,15 @@ export const YMD = (date: any, format = false) => {
   const _date = new Date(date)
   const Y = `${_date.getFullYear()}`;
   const M = `${_date.getMonth() + 1 < 10 ? `0${_date.getMonth() + 1}` : _date.getMonth() + 1}`;
-  const D = `${_date.getDate() + 1 < 10 ? `0${_date.getDate()}` : _date.getDate()}`;
+  const D = `${_date.getDate() < 10 ? `0${_date.getDate()}` : _date.getDate()}`;
   return format ? `${Y}年${M}月${D}日` : `${Y}-${M}-${D}`;
 }
+export const YM = (date: any, format = false) => {
+  const _date = new Date(date)
+  const Y = `${_date.getFullYear()}`;
+  const M = `${_date.getMonth() + 1 < 10 ? `0${_date.getMonth() + 1}` : _date.getMonth() + 1}`;
+  return format ? `${Y}年${M}月` : `${Y}-${M}`;
+}
 
 export const Hms = (date: any, format = false) => {
   const _date = new Date(date)

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

@@ -6,8 +6,64 @@
           {label: '按月', value: 'month'},
       ]" padding="6px 16px" v-model:active="dateType"/>
     <div class="date">
-      <div>2023230230</div>
-      <div>25 26 27 28</div>
+      <div class="format">
+        <div class="text" @click="onDateSelect">{{dateFormatCpt}}</div>
+        <div class="text" style="position: unset;visibility: hidden;" @click="onDateSelect">{{dateFormatCpt}}</div>
+        <el-date-picker
+            ref="ref_day"
+            v-model="dateValue.selectDay"
+            value-format="YYYY-MM-DD"
+            @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-option
+              v-for="item in weekOptionsCpt"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+        <el-date-picker
+            ref="ref_month"
+            v-model="dateValue.selectMonth"
+            type="month"
+            value-format="YYYY-MM"
+            @change="handleMonth"
+            :disabled-date="(d) => new Date($util.YM(d)).getTime() > new Date(tempToday).getTime()"
+        />
+      </div>
+      <div class="page">
+        <div class="page-last">
+          <img class="__hover" src="@/views/staging/common/title-triangle.png" @click.stop="switchPage(true)"/>
+        </div>
+        <div class="page-content">
+          <template v-if="dateType === 'day'">
+            <template v-for="item in dateCalendar.day">
+              <div class="page-content-item __hover"
+                   :class="{today: item.isToday, active: dateValue.selectDay === item.selectValue}"
+                   @click="onDayClick(item)"
+              >{{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-if="dateType === 'month'">
+            <template v-for="item in dateCalendar.month">
+              <div class="page-content-item __hover"
+                   :class="{today: item.isToday, active: dateValue.selectMonth === item.selectValue}"
+                   @click="onMonthClick(item)"
+              >{{item.str}}</div>
+            </template>
+          </template>
+        </div>
+        <div class="page-next">
+          <img v-if="pageNextShowCpt" class="__hover" src="@/views/staging/common/title-triangle.png" @click.stop="switchPage(false)"/>
+        </div>
+      </div>
     </div>
     <div class="content">
       <div class="content-item">
@@ -172,6 +228,7 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import ButtonSwitchCom from '../../common/button-switch.vue'
+import {YMD} from "@/utils/util";
 
 export default defineComponent({
   name: '',
@@ -184,7 +241,7 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      dateType: 'day',
+      dateType: 'month',
       dataInfo: {
         day: {
           sign: {
@@ -243,14 +300,143 @@ export default defineComponent({
             ytjfs: 120
           },
         },
-      }
+      },
+      dateValue: {
+        selectDay: '',
+        selectWeek: '',
+        selectMonth: '',
+      },
+      dateCalendar: {
+        day: [],
+        week: [],
+        month: []
+      },
+      tempToday: JSON.parse(JSON.stringify(that.$util.YMD(store.state.app.timestamp)))
     })
+    const ref_day = ref()
+    const ref_week = ref()
+    const ref_month = ref()
     const dataInfoCpt = computed(() => {
       return state.dataInfo[state.dateType]
     })
+    const weekOptionsCpt = computed(() => {
+      return [{
+        label: '111', value: 111
+      }]
+    })
+    const pageNextShowCpt = computed(() => {
+      let flag = false
+      if (state.dateType === 'day') {
+        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') {
+        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
+    })
+    const dateFormatCpt = computed(() => {
+      let str = ''
+      if (state.dateType === 'day') {
+        str = that.$util.YMD(state.dateValue.selectDay, true)
+      } else if (state.dateType === 'week') {
+
+      } else if (state.dateType === 'month') {
+        str = that.$util.YM(state.dateValue.selectMonth, true)
+      }
+      return str
+    })
+    const switchPage = (isLast) => {
+      const getM = (d, diff) => {
+        return new Date(new Date(d).getFullYear(), new Date(d).getMonth() + diff, 1)
+      }
+      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 === 'month') {
+        initStaticMonth(isLast ? getM(state.dateCalendar.month[0].date, -1) : getM(state.dateCalendar.month[6].date, 7))
+      }
+    }
+    const onDateSelect = () => {
+      if (state.dateType === 'day') {
+        ref_day.value.handleOpen()
+      } else if (state.dateType === 'week') {
+        ref_week.value.focus()
+      } else if (state.dateType === 'month') {
+        ref_month.value.handleOpen()
+      }
+    }
+    const oneDayTime = 1000 * 60 * 60 * 24
+    const initStaticDay = (lastDate) => {
+      state.dateCalendar.day = []
+      const arr: any = []
+      for (let i = 6; i >= 0; i--) {
+        const d = new Date(new Date(lastDate).getTime() - oneDayTime * i)
+        arr.push({
+          str: d.getDate(),
+          date: d,
+          selectValue: that.$util.YMD(d),
+          isToday: that.$util.YMD(d) === that.$util.YMD(state.tempToday),
+        })
+      }
+      state.dateCalendar.day = arr
+    }
+    const initStaticMonth = (lastDate) => {
+      state.dateCalendar.month = []
+      const arr: any = []
+      for (let i = 6; i >= 0; i--) {
+        const d = new Date(new Date(lastDate).getFullYear(), new Date(lastDate).getMonth() - i, 1)
+        arr.push({
+          str: (d.getMonth() + 1) + '月',
+          date: d,
+          selectValue: that.$util.YM(d),
+          isToday: that.$util.YM(d) === that.$util.YM(state.tempToday),
+        })
+      }
+      state.dateCalendar.month = arr
+    }
+    const initStatic = () => {
+      const today = new Date(state.tempToday)
+      state.dateValue.selectDay = JSON.parse(JSON.stringify(that.$util.YMD(today)))
+      state.dateValue.selectMonth = JSON.parse(JSON.stringify(that.$util.YM(today)))
+      initStaticDay(today)
+      initStaticMonth(today)
+    }
+    const onDayClick = (item) => {
+      state.dateValue.selectDay = item.selectValue
+    }
+    const onMonthClick = (item) => {
+      state.dateValue.selectMonth = item.selectValue
+    }
+    const handleDay = (val) => {
+      const d = new Date(that.$util.YMD(val))
+      const diff = (new Date(state.tempToday).getTime() - d.getTime()) / oneDayTime % 7
+      const ld = new Date(d.getTime() + diff * oneDayTime)
+      initStaticDay(ld)
+    }
+    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
+      const ld = new Date(new Date(d).getFullYear(), new Date(d).getMonth() + diff, 1)
+      initStaticMonth(ld)
+    }
+    onMounted(() => {
+      initStatic()
+    })
     return {
       ...toRefs(state),
-      dataInfoCpt
+      dataInfoCpt,
+      switchPage,
+      ref_day,
+      ref_week,
+      ref_month,
+      weekOptionsCpt,
+      onDateSelect,
+      onDayClick,
+      onMonthClick,
+      pageNextShowCpt,
+      dateFormatCpt,
+      handleDay,
+      handleMonth
     }
   },
 })
@@ -270,6 +456,87 @@ export default defineComponent({
   }
   .date {
     height: 80px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .format {
+      height: 26px;
+      line-height: 26px;
+      font-size: 18px;
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #FFFFFF;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      :deep(.el-date-editor--month), :deep(.el-date-editor--date) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        z-index: 1;
+      }
+      .el-select {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+        opacity: 0;
+      }
+      .text {
+        position: absolute;
+        z-index: 2;
+      }
+    }
+    .page {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      margin-top: auto;
+      height: calc(100% - 26px);
+      .page-last, .page-next {
+        width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .page-last {
+        transform: rotate(180deg);
+      }
+      .page-content {
+        flex: 1;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        column-gap: 10px;
+        .page-content-item {
+          height: 32px;
+          background-color: rgba(0, 133, 247, 0.25);
+          font-size: 18px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-sizing: border-box;
+          &.today {
+            background: rgba(0, 133, 247, 0.4);
+          }
+          &.active {
+            border: 2px solid;
+            border-image: linear-gradient(0deg, #4FACFE, #00F2FE) 10 10;
+            box-shadow: inset 0px 0px 20px 3px #2EB8FF;
+            background-color: rgba(0, 133, 247, 0.25);
+          }
+        }
+      }
+    }
   }
   .content {
     flex: 1;