顶部统计

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

@@ -11,56 +11,146 @@
       ]" padding="4px 8px" v-model:active="dateType"/>
       <div class="statistic-time">统计截止：{{$util.YMDHms(statisticTime)}}</div>
     </div>
-    <div class="statistic" v-loading="loading">
-      <div class="item">
-        <img src="@/assets/images/business/statistic-cqs.png"/>
-        <div class="content">
-          <div><span class="green">{{ statisticData.cqs.num }}</span>/{{ statisticData.cqs.total }}</div>
-          <div>出勤数</div>
+    <div class="statistic" :class="{'statistic-6': dateType !== '1' && dateType !== '4'}" v-loading="loading">
+      <template v-if="dateType === '1' || dateType === '4'">
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cqs.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.day.cqs.num }}</span>/{{ statisticData.day.cqs.total }}</div>
+            <div>出勤数</div>
+          </div>
         </div>
-      </div>
-      <div class="item">
-        <img src="@/assets/images/business/statistic-qqs.png"/>
-        <div class="content">
-          <div><span class="green">{{ statisticData.qqs.num }}</span>/{{ statisticData.qqs.total }}</div>
-          <div>缺勤数</div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-qqs.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.day.qqs.num }}</span>/{{ statisticData.day.qqs.total }}</div>
+            <div>缺勤数</div>
+          </div>
         </div>
-      </div>
-      <div class="item">
-        <img src="@/assets/images/business/statistic-cds.png"/>
-        <div class="content">
-          <div><span class="red">{{ statisticData.cds.num }}</span>/{{ statisticData.cds.total }}</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>
-      <div class="item">
-        <img src="@/assets/images/business/statistic-zts.png"/>
-        <div class="content">
-          <div><span class="red">{{ statisticData.zts.num }}</span>/{{ statisticData.zts.total }}</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>
-      <div class="item">
-        <img src="@/assets/images/business/statistic-cql.png"/>
-        <div class="content">
-          <div><span class="green">{{ statisticData.cql }}</span> %</div>
-          <div>出勤率</div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cql.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.day.cql }}</span> %</div>
+            <div>出勤率</div>
+          </div>
         </div>
-      </div>
-      <div class="item">
-        <img src="@/assets/images/business/statistic-rztjl.png"/>
-        <div class="content">
-          <div><span class="yellow">{{ statisticData.rztjl }}</span> %</div>
-          <div>日志提交率</div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-rztjl.png"/>
+          <div class="content">
+            <div><span class="yellow">{{ statisticData.day.rztjl }}</span> %</div>
+            <div>日志提交率</div>
+          </div>
         </div>
-      </div>
-      <div class="item" :style="`opacity: ${dateType === '1' && $store.getters['app/isWeeklyDay'] ? 1 : 0.3};`">
-        <img src="@/assets/images/business/statistic-zbtjl.png"/>
-        <div class="content">
-          <div><span class="yellow">{{ statisticData.zbtjl }}</span> %</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};`">
+          <img src="@/assets/images/business/statistic-zbtjl.png"/>
+          <div class="content">
+            <div><span class="yellow">{{ statisticData.day.zbtjl }}</span> %</div>
+            <div>周报提交率</div>
+          </div>
         </div>
-      </div>
+      </template>
+      <template v-else-if="dateType === '2' || dateType === '5'">
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cqs.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.week.ycqts }}</span>天/周</div>
+            <div>应出勤天数</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cqs.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.week.qqqk }}</span>天/周</div>
+            <div>全勤情况</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-rztjl.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.week.rztjqk }}</span>天/周</div>
+            <div>日志提交情况</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cql.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.week.cql }}</span> %</div>
+            <div>出勤率</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-rztjl.png"/>
+          <div class="content">
+            <div><span class="yellow">{{ statisticData.week.rztjl }}</span> %</div>
+            <div>日志提交率</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-zbtjl.png"/>
+          <div class="content">
+            <div><span class="yellow">{{ statisticData.week.zbtjl }}</span> %</div>
+            <div>周报提交率</div>
+          </div>
+        </div>
+      </template>
+      <template v-else-if="dateType === '3' || dateType === '6'">
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cqs.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.month.ycqts }}</span>天/月</div>
+            <div>应出勤天数</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cqs.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.month.qqqk }}</span>天/月</div>
+            <div>全勤情况</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-rztjl.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.month.rztjqk }}</span>天/月</div>
+            <div>日志提交情况</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-cql.png"/>
+          <div class="content">
+            <div><span class="green">{{ statisticData.month.cql }}</span> %</div>
+            <div>出勤率</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-rztjl.png"/>
+          <div class="content">
+            <div><span class="yellow">{{ statisticData.month.rztjl }}</span> %</div>
+            <div>日志提交率</div>
+          </div>
+        </div>
+        <div class="item">
+          <img src="@/assets/images/business/statistic-zbtjl.png"/>
+          <div class="content">
+            <div><span class="yellow">{{ statisticData.month.zbtjl }}</span> %</div>
+            <div>周报提交率</div>
+          </div>
+        </div>
+      </template>
     </div>
     <div class="center-bar"/>
     <div class="seat" :style="`overflow: ${seatType === 'seat' ? 'unset' : 'hidden'};`">
@@ -139,13 +229,31 @@ export default defineComponent({
       dateType: '1',
       statisticTime: new Date(),
       statisticData: {
-        cqs: {num: 13, total: 27},
-        qqs: {num: 13, total: 27},
-        cds: {num: 13, total: 27},
-        zts: {num: 13, total: 27},
-        cql: 45.6,
-        rztjl: 80.6,
-        zbtjl: 13,
+        day: {
+          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,
+        },
+        week: {
+          ycqts: 0,
+          qqqk: 0,
+          rztjqk: 0,
+          cql: 0,
+          rztjl: 0,
+          zbtjl: 0
+        },
+        month: {
+          ycqts: 0,
+          qqqk: 0,
+          rztjqk: 0,
+          cql: 0,
+          rztjl: 0,
+          zbtjl: 0
+        }
       },
       seatType: 'seat',
       loading: false
@@ -156,13 +264,72 @@ export default defineComponent({
       that.$api.zbglyWorkbenchAdminStatistics({
         type: state.dateType
       }).then(res => {
-        if (res.code === 200) {}
+        if (res.code === 200) {
+          if (state.dateType === '1' || state.dateType === '4') {
+            state.statisticData.day = {
+              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') {
+            state.statisticData.week = {
+              ycqts: res.data?.week?.total,
+              qqqk: res.data?.week?.qq,
+              rztjqk: res.data?.week?.rz,
+              cql: res.data?.week?.cqRate,
+              rztjl: res.data?.week?.dayRate,
+              zbtjl: res.data?.week?.weekRate
+            }
+          } else if (state.dateType === '3' || state.dateType === '6') {
+            state.statisticData.month = {
+              ycqts: res.data?.month?.total,
+              qqqk: res.data?.month?.qq,
+              rztjqk: res.data?.month?.rz,
+              cql: res.data?.month?.cqRate,
+              rztjl: res.data?.month?.dayRate,
+              zbtjl: res.data?.month?.weekRate
+            }
+          }
+        }
         state.loading = false
       }).catch(() => {
         state.loading = false
       })
     }
-    watch(() => state.dateType, () => {
+    watch(() => state.dateType, (n) => {
+      if (n === '1' || n === '4') {
+        state.statisticData.day = {
+          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 (n === '2' || n === '5') {
+        state.statisticData.week = {
+          ycqts: 0,
+          qqqk: 0,
+          rztjqk: 0,
+          cql: 0,
+          rztjl: 0,
+          zbtjl: 0
+        }
+      } else if (n === '3' || n === '6') {
+        state.statisticData.month = {
+          ycqts: 0,
+          qqqk: 0,
+          rztjqk: 0,
+          cql: 0,
+          rztjl: 0,
+          zbtjl: 0
+        }
+      }
       initStatisticData()
     }, {immediate: true})
     return {
@@ -196,6 +363,9 @@ export default defineComponent({
     grid-template-columns: repeat(7, 1fr);
     grid-template-rows: 68px;
     margin-top: 12px;
+    &.statistic-6 {
+      grid-template-columns: repeat(6, 1fr);
+    }
     .item {
       display: flex;
       align-items: center;

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

@@ -93,7 +93,6 @@ export default defineComponent({
           }
           res.data?.forEach(v => {
             const f = state.data.filter(d => String(d.index) === String(v.number))?.[0]
-            console.log(f)
             if (f) {
               f.shortName = v.abbreviation || v.name
               f.deptName = v.name