统计状态

src/assets/svg/tips.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<path class="st0" d="M64,7.7C32.9,7.7,7.7,32.9,7.7,64c0,0,0,0,0,0c0,31.1,25.2,56.3,56.3,56.3c31.1,0,56.3-25.2,56.3-56.3
+	c0,0,0,0,0,0C120.3,32.9,95.1,7.7,64,7.7z M58.9,76.8V33.3c0-2.8,2.3-5.1,5.1-5.1s5.1,2.3,5.1,5.1v43.5c0,2.8-2.3,5.1-5.1,5.1
+	S58.9,79.6,58.9,76.8C58.9,76.8,58.9,76.8,58.9,76.8z M64,99.8C64,99.8,64,99.8,64,99.8c-2.8,0-5.1-2.3-5.1-5.1
+	c0-2.8,2.3-5.1,5.1-5.1c2.8,0,5.1,2.3,5.1,5.1S66.8,99.8,64,99.8z"/>
+</svg>

src/assets/svg/true.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1697008743556" class="icon" viewBox="0 0 1098 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="14859" xmlns:xlink="http://www.w3.org/1999/xlink" width="137.25" height="128">
+  <path
+    d="M476.808045 0.000043C213.401753 0.106685-0.031993 213.68973 0 477.074693S213.551052 953.98938 476.94668 954.021373s476.957344-213.412417 477.085315-476.808045A477.010665 477.010665 0 0 0 476.808045 0.000043z m273.761252 353.369671L441.861388 661.853674a43.1901 43.1901 0 0 1-62.023117 0L202.214984 484.251715a43.864079 43.864079 0 1 1 62.033781-62.033782l147.21959 147.21959 277.89897-276.86454a43.861946 43.861946 0 1 1 62.023117 62.033781z m0 0"
+    p-id="14860"></path>
+</svg>

src/views/staging/common/handle.ts

@@ -58,10 +58,26 @@ export const getMonthCalendarData = (d, fD, selectMonth = null) => {
     }
     // mock-start
     if (t.getDate() + 1 === new Date(d).getDate()) {
-      obj.isSign = true
+      obj.isSign = false
+      obj.signType = '1'  //  1-缺勤，2-迟到，3-早退，4-缺卡
     }
     if (t.getDate() + 2 === new Date(d).getDate()) {
       obj.isSign = false
+      obj.signType = '2'  //  1-缺勤，2-迟到，3-早退，4-缺卡
+    }
+    if (t.getDate() + 3 === new Date(d).getDate()) {
+      obj.isSign = false
+      obj.signType = '3'  //  1-缺勤，2-迟到，3-早退，4-缺卡
+    }
+    if (t.getDate() + 4 === new Date(d).getDate()) {
+      obj.isSign = false
+      obj.signType = '4'  //  1-缺勤，2-迟到，3-早退，4-缺卡
+    }
+    if (t.getDate() + 5 === new Date(d).getDate()) {
+      obj.isSign = true
+    }
+    if (t.getDate() + 6 === new Date(d).getDate()) {
+      obj.isSign = false
     }
     if (t.getDate() + 3 === new Date(d).getDate()) {
       obj.isDaily = true

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

@@ -37,10 +37,10 @@
                 <div class="item">
                   <template v-if="$util.isValue(item.isSign)">
                     <template v-if="item.isSign">
-                      <img src="@/assets/images/business/calendar-true.png"/>
+                      <SvgIcon name="true" color="#01C869" size="14"/>
                     </template>
                     <template v-else>
-                      <img src="@/assets/images/business/calendar-false.png"/>
+                      <SvgIcon name="tips" color="#E72524" size="14"/>
                     </template>
                   </template>
                 </div>
@@ -52,10 +52,10 @@
                 <div class="item">
                   <template v-if="$util.isValue(item.isDaily)">
                     <template v-if="item.isDaily">
-                      <img src="@/assets/images/business/calendar-true.png"/>
+                      <SvgIcon name="true" color="#01C869" size="14"/>
                     </template>
                     <template v-else>
-                      <img src="@/assets/images/business/calendar-false.png"/>
+                      <SvgIcon name="tips" color="#E72524" size="14"/>
                     </template>
                   </template>
                 </div>

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

@@ -25,10 +25,20 @@
                     签卡
                     <template v-if="$util.isValue(item.isSign)">
                       <template v-if="item.isSign">
-                        <img src="@/assets/images/business/calendar-true.png"/>
+                        <SvgIcon name="true" color="#01C869" size="14"/>
                       </template>
                       <template v-else>
-                        <img src="@/assets/images/business/calendar-false.png"/>
+                        <SvgIcon name="tips" :color="
+                          item.signType === '1' ?
+                           '#E72524' :
+                           (item.signType === '2' ?
+                           '#F9741B' :
+                           (item.signType === '3' ?
+                           '#F8EA9A' :
+                           (item.signType === '4' ?
+                           '#36485b' :
+                           '#E72524'))
+                        )" size="14"/>
                       </template>
                     </template>
                   </div>
@@ -274,7 +284,7 @@ export default defineComponent({
               padding-left: 6px;
               display: flex;
               align-items: center;
-              >img {
+              >img, .svg-icon {
                 margin-left: 8px;
               }
             }

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

@@ -78,7 +78,7 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      sourceType: '2'
+      sourceType: '1'
     })
     return {
       ...toRefs(state),
@@ -200,6 +200,7 @@ export default defineComponent({
       position: absolute;
       top: 0;
       right: 0;
+      z-index: 10;
     }
   }
 }

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

@@ -1,11 +1,158 @@
 <template>
   <div class="statistic-main">
     <ButtonSwitchCom class="buttons" :options="[
-          {label: '按日', value: '1'},
-          {label: '按周', value: '2'},
-          {label: '按月', value: '3'},
+          {label: '按日', value: 'day'},
+          {label: '按周', value: 'week'},
+          {label: '按月', value: 'month'},
       ]" padding="6px 16px" v-model:active="dateType"/>
-    <div class="date">{{}}</div>
+    <div class="date">
+      <div>2023230230</div>
+      <div>25 26 27 28</div>
+    </div>
+    <div class="content">
+      <div class="content-item">
+        <div class="label">
+          <img src="@/assets/images/business/center-statistics-icon.png"/>
+          考勤
+        </div>
+        <template v-if="dateType === 'day'">
+          <div class="value value-day">
+            <div class="block day-item">
+              <div class="day-item-label">签到打卡<span>{{dataInfoCpt.sign.signStartTime}}</span></div>
+              <div class="day-item-value">
+                <template v-if="dataInfoCpt.sign.signStartTimeReal">
+                  <SvgIcon name="true" color="#02fff1"/><span>{{dataInfoCpt.sign.signStartTimeReal}}</span><span>已打卡</span>
+                </template>
+                <template v-else>
+                  <SvgIcon name="true" color="#04495c"/><span>未打卡</span>
+                </template>
+              </div>
+            </div>
+            <div class="block day-item">
+              <div class="day-item-label">签退打卡<span>{{dataInfoCpt.sign.signEndTime}}</span></div>
+              <div class="day-item-value">
+                <template v-if="dataInfoCpt.sign.signEndTimeReal">
+                  <SvgIcon name="tips" color="#02fff1"/><span>{{dataInfoCpt.sign.signEndTimeReal}}</span><span>已打卡</span>
+                </template>
+                <template v-else>
+                  <SvgIcon name="true" color="#04495c"/><span>未打卡</span>
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="value value-statistic" style="grid-template-columns: repeat(5, 1fr)">
+            <div class="block statistic-item">
+              <div class="num green">{{dataInfoCpt.sign.cqts}}</div>
+              <div class="title">出勤天数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num red">{{dataInfoCpt.sign.qqts}}</div>
+              <div class="title">缺勤天数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num orange">{{dataInfoCpt.sign.cdcs}}</div>
+              <div class="title">迟到次数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num yellow">{{dataInfoCpt.sign.ztcs}}</div>
+              <div class="title">早退次数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num pink">{{dataInfoCpt.sign.qkcs}}</div>
+              <div class="title">缺卡次数</div>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="content-item">
+        <div class="label">
+          <img src="@/assets/images/business/center-statistics-icon.png"/>
+          日志
+        </div>
+        <template v-if="dateType === 'day'">
+          <div class="value value-day">
+            <div class="block day-item">
+              <div class="day-item-label">{{dataInfoCpt.daily.submitTime ? '已提交' : '未提交'}}<img v-if="dataInfoCpt.daily.submitTime" class="download" src="@/assets/images/business/download.png"/></div>
+              <div class="day-item-value">
+                <template v-if="dataInfoCpt.daily.submitTime">
+                  <SvgIcon name="true" color="#02fff1"/>
+                  <span>{{$util.Hms(dataInfoCpt.daily.submitTime)}}</span>
+                  <span class="blue">{{dataInfoCpt.daily.username}}</span>
+                  <span>已提交</span>
+                </template>
+                <template v-else>
+                  <SvgIcon name="true" color="#04495c"/>
+                  <span>请于</span>
+                  <span class="blue">{{dataInfoCpt.daily.submitEndTime}}</span>
+                  <span>前尽快提交</span>
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="value value-statistic">
+            <div class="block statistic-item">
+              <div class="num green">{{dataInfoCpt.daily.ytjts}}</div>
+              <div class="title">已提交天数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num red">{{dataInfoCpt.daily.wtjts}}</div>
+              <div class="title">未提交天数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num yellow">{{dataInfoCpt.daily.ytjfs}}</div>
+              <div class="title">已提交份数</div>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div class="content-item">
+        <div class="label">
+          <img src="@/assets/images/business/center-statistics-icon.png"/>
+          周报
+        </div>
+        <template v-if="dateType === 'day'">
+          <div class="value value-day">
+            <div class="block day-item">
+              <div class="day-item-label">{{dataInfoCpt.weekly.submitTime ? '已提交' : '未提交'}}<img v-if="dataInfoCpt.weekly.submitTime" class="download" src="@/assets/images/business/download.png"/></div>
+              <div class="day-item-value">
+                <template v-if="dataInfoCpt.weekly.submitTime">
+                  <SvgIcon name="true" color="#02fff1"/>
+                  <span>{{$util.Hms(dataInfoCpt.weekly.submitTime)}}</span>
+                  <span class="blue">{{dataInfoCpt.weekly.username}}</span>
+                  <span>已提交</span>
+                </template>
+                <template v-else>
+                  <SvgIcon name="true" color="#04495c"/>
+                  <span>请于</span>
+                  <span class="blue">{{dataInfoCpt.weekly.submitEndTime}}</span>
+                  <span>前尽快提交</span>
+                </template>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="value value-statistic">
+            <div class="block statistic-item">
+              <div class="num green">{{dataInfoCpt.weekly.ytjts}}</div>
+              <div class="title">已提交天数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num red">{{dataInfoCpt.weekly.wtjts}}</div>
+              <div class="title">未提交天数</div>
+            </div>
+            <div class="block statistic-item">
+              <div class="num yellow">{{dataInfoCpt.weekly.ytjfs}}</div>
+              <div class="title">已提交份数</div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -37,10 +184,73 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      dateType: '1'
+      dateType: 'day',
+      dataInfo: {
+        day: {
+          sign: {
+            signStartTime: '8:30',
+            signStartTimeReal: '07:59',
+            signStartStatus: '1',
+            signEndTime: '15:30',
+            signEndTimeReal: '',
+            signEndStatus: '0',
+          },
+          daily: {
+            username: '陈述婷',
+            submitTime: '2023-11-01 13:22:01',
+            submitEndTime: '23:12:35'
+          },
+          weekly: {
+            submitTime: '',
+            submitEndTime: '23:12:35'
+          }
+        },
+        week: {
+          sign: {
+            cqts: 20,
+            qqts: 2,
+            cdcs: 4,
+            ztcs: 1,
+            qkcs: 1
+          },
+          daily: {
+            ytjts: 20,
+            wtjts: 20,
+            ytjfs: 20
+          },
+          weekly: {
+            ytjts: 20,
+            wtjts: 20,
+            ytjfs: 20
+          },
+        },
+        month: {
+          sign: {
+            cqts: 120,
+            qqts: 12,
+            cdcs: 14,
+            ztcs: 11,
+            qkcs: 11
+          },
+          daily: {
+            ytjts: 120,
+            wtjts: 120,
+            ytjfs: 120
+          },
+          weekly: {
+            ytjts: 120,
+            wtjts: 120,
+            ytjfs: 120
+          },
+        },
+      }
+    })
+    const dataInfoCpt = computed(() => {
+      return state.dataInfo[state.dateType]
     })
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      dataInfoCpt
     }
   },
 })
@@ -50,5 +260,142 @@ export default defineComponent({
 .statistic-main {
   width: 100%;
   height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .buttons {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .date {
+    height: 80px;
+  }
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .content-item {
+      box-sizing: border-box;
+      width: 100%;
+      height: 30%;
+      background-image: url("@/assets/images/business/center-statistics-bg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 40px;
+      .label {
+        box-sizing: border-box;
+        width: 180px;
+        display: flex;
+        align-items: center;
+        font-size: 20px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #0096FF;
+        position: relative;
+        padding-left: 60px;
+        >img {
+          position: absolute;
+          z-index: -1;
+          left: 0;
+        }
+      }
+      .value {
+        flex: 1;
+        height: 60%;
+        display: grid;
+        align-items: center;
+        column-gap: 32px;
+        .block {
+          background: rgba(2, 12, 23, 0.2);
+          border: 3px solid #1E4C85;
+        }
+        &.value-day {
+          display: flex;
+          .day-item {
+            width: 40%;
+            height: 100%;
+            padding-left: 25px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            .day-item-label {
+              font-size: 20px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              color: #0096FF;
+              margin-bottom: 12px;
+              display: flex;
+              align-items: center;
+              >span {
+                margin-left: 8px;
+              }
+              .download {
+                margin-left: auto;
+                margin-right: 20px;
+              }
+            }
+            .day-item-value {
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+              display: flex;
+              align-items: center;
+              >span {
+                margin-left: 8px;
+              }
+              .blue {
+                color: #0096FF;
+              }
+            }
+          }
+        }
+        &.value-statistic {
+          display: grid;
+          column-gap: 14px;
+          grid-template-columns: repeat(3, 1fr);
+          .statistic-item {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .num {
+              font-size: 28px;
+              font-family: Microsoft YaHei;
+              font-weight: bold;
+              margin-bottom: 10px;
+            }
+            .green {
+              color: #3EFFBB;
+            }
+            .red {
+              color: #E5004F;
+            }
+            .orange {
+              color: #F9741B;
+            }
+            .yellow {
+              color: #F8EA9A;
+            }
+            .pink {
+              color: #FF23B9;
+            }
+            .title {
+              font-size: 16px;
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>