统计分析变化

src/out/config.js

@@ -1,3 +1,3 @@
 window.cusConfig = {
-    projectFirstDate: '2023-12-15 00:00:00'
+    projectFirstDate: '2023-02-01 00:00:00'
 }

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

@@ -2,45 +2,61 @@
   <div class="main">
     <div class="buttons-top">
       <ButtonSwitchCom class="buttons" :options="[
-          {label: '今日', value: '1'},
-          {label: '本周', value: '2'},
-          {label: '本月', value: '3'},
-          {label: '昨日', value: '4'},
+          {label: '今日', value: '4'},
           {label: '上周', value: '5'},
           {label: '上月', value: '6'},
       ]" padding="4px 8px" v-model:active="dateType"/>
       <div class="statistic-time">统计截止：{{$util.YMDHms(statisticTime)}}</div>
     </div>
-    <div class="statistic" :class="{'statistic-6': dateType !== '1' && dateType !== '4'}" v-loading="loading">
-      <template v-if="dateType === '1' || dateType === '4'">
+    <div class="statistic" :class="{'statistic-6': dateType !== '4', 'statistic-today': dateType == '4'}" v-loading="loading">
+      <template v-if="dateType === '4'">
         <div class="item">
-          <img src="@/assets/images/business/statistic-cqs.png"/>
+          <img src="@/assets/images/business/statistic-qds.png"/>
           <div class="content">
-            <div><span class="green">{{ statisticData.day.cqs.num }}</span>/{{ statisticData.day.cqs.total }}</div>
-            <div>出勤数</div>
+            <div><span class="green">{{ statisticData.day.qds.num }}</span>/{{ statisticData.day.qds.total }}</div>
+            <div>签到数</div>
           </div>
         </div>
         <div class="item">
-          <img src="@/assets/images/business/statistic-qqs.png"/>
+          <img src="@/assets/images/business/statistic-qts.png"/>
           <div class="content">
-            <div><span class="green">{{ statisticData.day.qqs.num }}</span>/{{ statisticData.day.qqs.total }}</div>
-            <div>缺勤数</div>
+            <div><span class="red">{{ statisticData.day.qts.num }}</span>/{{ statisticData.day.qts.total }}</div>
+            <div>签退数</div>
           </div>
         </div>
+        <div class="split">
+          <img class="last-icon" src="@/assets/images/business/statistic-last-icon.png"/>
+          <img class="today-icon" src="@/assets/images/business/statistic-today-icon.png"/>
+          <div class="line"/>
+        </div>
         <div class="item">
-          <img src="@/assets/images/business/statistic-cds.png"/>
+          <img src="@/assets/images/business/statistic-cqs.png"/>
           <div class="content">
-            <div><span class="red">{{ statisticData.day.cds.num }}</span>/{{ statisticData.day.cds.total }}</div>
-            <div>迟到数</div>
+            <div><span class="green">{{ statisticData.day.cqs.num }}</span>/{{ statisticData.day.cqs.total }}</div>
+            <div>出勤数</div>
           </div>
         </div>
         <div class="item">
-          <img src="@/assets/images/business/statistic-zts.png"/>
+          <img src="@/assets/images/business/statistic-qqs.png"/>
           <div class="content">
-            <div><span class="red">{{ statisticData.day.zts.num }}</span>/{{ statisticData.day.zts.total }}</div>
-            <div>早退数</div>
+            <div><span class="green">{{ statisticData.day.qqs.num }}</span>/{{ statisticData.day.qqs.total }}</div>
+            <div>缺勤数</div>
           </div>
         </div>
+<!--        <div class="item">-->
+<!--          <img src="@/assets/images/business/statistic-cds.png"/>-->
+<!--          <div class="content">-->
+<!--            <div><span class="red">{{ statisticData.day.cds.num }}</span>/{{ statisticData.day.cds.total }}</div>-->
+<!--            <div>迟到数</div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="item">-->
+<!--          <img src="@/assets/images/business/statistic-zts.png"/>-->
+<!--          <div class="content">-->
+<!--            <div><span class="red">{{ statisticData.day.zts.num }}</span>/{{ statisticData.day.zts.total }}</div>-->
+<!--            <div>早退数</div>-->
+<!--          </div>-->
+<!--        </div>-->
         <div class="item">
           <img src="@/assets/images/business/statistic-cql.png"/>
           <div class="content">
@@ -55,7 +71,7 @@
             <div>日志提交率</div>
           </div>
         </div>
-        <div class="item" :style="`opacity: ${((dateType === '1' && $store.getters['app/isWeeklyDay']) || (dateType === '4' && (new Date($store.state.app.timestamp - 1000 * 60 * 60 * 24).getDay() === $store.state.app.weeklySubmitDay))) ? 1 : 0.3};`">
+        <div class="item" :style="`opacity: ${(dateType === '4' && $store.getters['app/isWeeklyDay']) ? 1 : 0.3};`">
           <img src="@/assets/images/business/statistic-zbtjl.png"/>
           <div class="content">
             <div><span class="yellow">{{ statisticData.day.zbtjl }}</span> %</div>
@@ -63,7 +79,7 @@
           </div>
         </div>
       </template>
-      <template v-else-if="dateType === '2' || dateType === '5'">
+      <template v-else-if="dateType === '5'">
         <div class="item">
           <img src="@/assets/images/business/statistic-cqs.png"/>
           <div class="content">
@@ -107,7 +123,7 @@
           </div>
         </div>
       </template>
-      <template v-else-if="dateType === '3' || dateType === '6'">
+      <template v-else-if="dateType === '6'">
         <div class="item">
           <img src="@/assets/images/business/statistic-cqs.png"/>
           <div class="content">
@@ -226,14 +242,14 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      dateType: '1',
+      dateType: '4',
       statisticTime: new Date(),
       statisticData: {
         day: {
+          qds: {num: 0, total: 0},
+          qts: {num: 0, total: 0},
           cqs: {num: 0, total: 0},
           qqs: {num: 0, total: 0},
-          cds: {num: 0, total: 0},
-          zts: {num: 0, total: 0},
           cql: 0,
           rztjl: 0,
           zbtjl: 0,
@@ -260,17 +276,17 @@ export default defineComponent({
     })
     const initStatisticData = () => {
       state.loading = true
-      if (state.dateType === '1' || state.dateType === '4') {
+      if (state.dateType === '4') {
         state.statisticData.day = {
+          qds: {num: 0, total: 0},
+          qts: {num: 0, total: 0},
           cqs: {num: 0, total: 0},
           qqs: {num: 0, total: 0},
-          cds: {num: 0, total: 0},
-          zts: {num: 0, total: 0},
           cql: 0,
           rztjl: 0,
           zbtjl: 0,
         }
-      } else if (state.dateType === '2' || state.dateType === '5') {
+      } else if (state.dateType === '5') {
         state.statisticData.week = {
           ycqts: 0,
           qqqk: 0,
@@ -279,7 +295,7 @@ export default defineComponent({
           rztjl: 0,
           zbtjl: 0
         }
-      } else if (state.dateType === '3' || state.dateType === '6') {
+      } else if (state.dateType === '6') {
         state.statisticData.month = {
           ycqts: 0,
           qqqk: 0,
@@ -294,17 +310,17 @@ export default defineComponent({
         type: state.dateType
       }).then(res => {
         if (res.code === 200) {
-          if (state.dateType === '1' || state.dateType === '4') {
+          if (state.dateType === '4') {
             state.statisticData.day = {
+              qds: {num: res.data?.day?.qd, total: res.data?.day?.total},
+              qts: {num: res.data?.day?.qt, total: res.data?.day?.total},
               cqs: {num: res.data?.day?.cq, total: res.data?.day?.total},
               qqs: {num: res.data?.day?.qq, total: res.data?.day?.total},
-              cds: {num: res.data?.day?.cd, total: res.data?.day?.total},
-              zts: {num: res.data?.day?.zt, total: res.data?.day?.total},
               cql: res.data?.day?.cqRate,
               rztjl: res.data?.day?.dayRate,
               zbtjl: res.data?.day?.weekRate,
             }
-          } else if (state.dateType === '2' || state.dateType === '5') {
+          } else if (state.dateType === '5') {
             state.statisticData.week = {
               ycqts: res.data?.week?.total,
               qqqk: res.data?.week?.qq,
@@ -313,7 +329,7 @@ export default defineComponent({
               rztjl: res.data?.week?.dayRate,
               zbtjl: res.data?.week?.weekRate
             }
-          } else if (state.dateType === '3' || state.dateType === '6') {
+          } else if (state.dateType === '6') {
             state.statisticData.month = {
               ycqts: res.data?.month?.total,
               qqqk: res.data?.month?.qq,
@@ -366,15 +382,55 @@ export default defineComponent({
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: 68px;
     margin-top: 12px;
+    background-image: url("@/assets/images/business/statistic-bg.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
     &.statistic-6 {
       grid-template-columns: repeat(6, 1fr);
     }
+
+    &.statistic-today {
+      $splitWidth: 24px;
+      grid-template-columns:
+          calc((100% - #{$splitWidth}) / 7)
+          calc((100% - #{$splitWidth}) / 7)
+          $splitWidth
+          calc((100% - #{$splitWidth}) / 7)
+          calc((100% - #{$splitWidth}) / 7)
+          calc((100% - #{$splitWidth}) / 7)
+          calc((100% - #{$splitWidth}) / 7)
+          calc((100% - #{$splitWidth}) / 7);
+      .split {
+        width: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        left: -40px;
+        .last-icon, .today-icon {
+          position: absolute;
+          top: -2px;
+        }
+        .last-icon {
+          left: 0;
+        }
+        .today-icon {
+          right: 0;
+        }
+        .line {
+          width: 1px;
+          height: 50px;
+          background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,222,255,0.99) 45%, rgba(255,255,255,0) 100%);
+        }
+      }
+    }
     .item {
       display: flex;
       align-items: center;
       >img {
-        width: 60px;
-        height: 60px;
+        width: 42px;
+        height: 42px;
+        margin-right: 11px;
       }
       .content {
         font-family: MicrosoftYaHei;