值班员-按日统计

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

@@ -74,7 +74,7 @@
         </div>
       </div>
     </div>
-    <div class="content">
+    <div class="content" v-loading="loading">
       <div class="content-item">
         <div class="label">
           <img src="@/assets/images/business/center-statistics-icon.png"/>
@@ -85,35 +85,35 @@
             <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">-->
+                <div class="icon">
                   <template v-if="dataInfoCpt.sign.signStartStatus === '1'">
                     <SvgIcon name="true" :color="$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signStartStatus)"/>
                   </template>
                   <template v-else>
                     <SvgIcon name="tips" :color="$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signStartStatus)"/>
                   </template>
-                  <span>{{dataInfoCpt.sign.signStartTimeReal ? $util.Hms(dataInfoCpt.sign.signStartTimeReal) : ''}}</span><span :style="`color: ${$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signStartStatus)};`">{{$store.state.dictionary.signStatusMap.get(dataInfoCpt.sign.signStartStatus) || dataInfoCpt.sign.signStartStatus}}</span>
-<!--                </template>-->
-<!--                <template v-else>-->
-<!--                  <SvgIcon name="true" color="#04495c"/><span>未打卡</span>-->
-<!--                </template>-->
+                </div>
+                <div class="text">
+                  <div v-if="dataInfoCpt.sign.signStartTimeReal">{{$util.Hms(dataInfoCpt.sign.signStartTimeReal)}}</div>
+                  <div :style="`color: ${$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signStartStatus)};`">{{$store.state.dictionary.signStatusMap.get(dataInfoCpt.sign.signStartStatus) || dataInfoCpt.sign.signStartStatus}}</div>
+                </div>
               </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">-->
+                <div class="icon">
                   <template v-if="dataInfoCpt.sign.signEndStatus === '1'">
                     <SvgIcon name="true" :color="$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signEndStatus)"/>
                   </template>
                   <template v-else>
                     <SvgIcon name="tips" :color="$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signEndStatus)"/>
                   </template>
-                  <span>{{dataInfoCpt.sign.signEndTimeReal ? $util.Hms(dataInfoCpt.sign.signEndTimeReal) : ''}}</span><span :style="`color: ${$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signEndStatus)};`">{{$store.state.dictionary.signStatusMap.get(dataInfoCpt.sign.signEndStatus) || dataInfoCpt.sign.signEndStatus}}</span>
-<!--                </template>-->
-<!--                <template v-else>-->
-<!--                  <SvgIcon name="true" color="#04495c"/><span>未打卡</span>-->
-<!--                </template>-->
+                </div>
+                <div class="text">
+                  <div v-if="dataInfoCpt.sign.signEndTimeReal">{{$util.Hms(dataInfoCpt.sign.signEndTimeReal)}}</div>
+                  <div :style="`color: ${$store.state.dictionary.signStatusColor.get(dataInfoCpt.sign.signEndStatus)};`">{{$store.state.dictionary.signStatusMap.get(dataInfoCpt.sign.signEndStatus) || dataInfoCpt.sign.signEndStatus}}</div>
+                </div>
               </div>
             </div>
           </div>
@@ -151,19 +151,44 @@
         <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-label">{{dataInfoCpt.daily?.id ? '已提交' : '未提交'}}<img v-if="dataInfoCpt.daily?.id && dataInfoCpt.daily?.fileUrl" class="download __hover" src="@/assets/images/business/download.png" @click="onDownload(dataInfoCpt.daily.fileUrl, dataInfoCpt.daily.fileName)"/></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 v-if="dataInfoCpt.daily?.id">
+                  <div class="icon">
+                    <SvgIcon name="true" color="#3EFFBB"/>
+                  </div>
+                  <div class="text">
+                    <div>{{dataInfoCpt.daily?.submitTime}}</div>
+                    <div><span class="blue">{{dataInfoCpt.daily?.submitter}}</span> 已提交</div>
+                  </div>
                 </template>
                 <template v-else>
-                  <SvgIcon name="true" color="#04495c"/>
-                  <span>请于</span>
-                  <span class="blue">{{dataInfoCpt.daily.submitEndTime}}</span>
-                  <span>前尽快提交</span>
+                  <div class="icon">
+                    <SvgIcon name="true" color="#04495c"/>
+                  </div>
+                  <div class="text">
+                    <template v-if="dateValue.selectDay === $util.YMD($store.state.app.timestamp)">
+                      <template v-if="new Date($store.state.app.timestamp).getTime() < new Date(`${$util.YMD($store.state.app.timestamp)} ${$store.state.app.publicConfig['log.submit.time']}`).getTime()">
+                        <div class="blue">
+                          {{$util.YMDHms(new Date(`${$util.YMD($store.state.app.timestamp)} ${$store.state.app.publicConfig['log.submit.time']}`))}}
+                        </div>
+                        后方可提交
+                      </template>
+                      <template v-else>
+                        <div class="blue">
+                          {{$util.YMDHms(new Date(`${$util.YMD($store.state.app.timestamp + oneDayTime)} ${$store.state.app.publicConfig['log.submit.time']}`))}}
+                        </div>
+                        前尽快提交
+                      </template>
+                    </template>
+                    <template v-else-if="dateValue.selectDay === $util.YMD($store.state.app.timestamp - oneDayTime) && new Date($store.state.app.timestamp).getTime() < new Date(`${$util.YMD($store.state.app.timestamp)} ${$store.state.app.publicConfig['log.submit.time']}`).getTime()">
+                      <div class="blue">
+                        {{$util.YMDHms(new Date(`${$util.YMD($store.state.app.timestamp)} ${$store.state.app.publicConfig['log.submit.time']}`))}}
+                      </div>
+                      前尽快提交
+                    </template>
+                    <template v-else>未提交</template>
+                  </div>
                 </template>
               </div>
             </div>
@@ -186,28 +211,41 @@
           </div>
         </template>
       </div>
-      <div class="content-item" :style="`opacity: ${$store.getters['app/isWeeklyDay'] ? 1 : 0.3};`">
+      <div class="content-item" :style="`opacity: ${new Date(dateValue.selectDay).getDay() === $store.state.app.weeklySubmitDay ? 1 : 0.3};`">
         <div class="label">
           <img src="@/assets/images/business/center-statistics-icon.png"/>
           周报
         </div>
         <template v-if="dateType === 'day'">
           <div class="value value-day">
-            <template v-if="$store.getters['app/isWeeklyDay']">
+            <template v-if="new Date(dateValue.selectDay).getDay() === $store.state.app.weeklySubmitDay">
               <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-label">{{dataInfoCpt.weekly?.id ? '已提交' : '未提交'}}<img v-if="dataInfoCpt.weekly?.id && dataInfoCpt.weekly?.fileUrl" class="download __hover" src="@/assets/images/business/download.png" @click="onDownload(dataInfoCpt.weekly.fileUrl, dataInfoCpt.weekly.fileName)"/></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 v-if="dataInfoCpt.weekly?.id">
+                    <div class="icon">
+                      <SvgIcon name="true" color="#3EFFBB"/>
+                    </div>
+                    <div class="text">
+                      <div>{{dataInfoCpt.weekly?.submitTime}}</div>
+                      <div><span class="blue">{{dataInfoCpt.weekly?.submitter}}</span> 已提交</div>
+                    </div>
                   </template>
                   <template v-else>
-                    <SvgIcon name="true" color="#04495c"/>
-                    <span>请于</span>
-                    <span class="blue">{{dataInfoCpt.weekly.submitEndTime}}</span>
-                    <span>前尽快提交</span>
+                    <div class="icon">
+                      <SvgIcon name="true" color="#04495c"/>
+                    </div>
+                    <div class="text">
+                      <template v-if="dateValue.selectDay === $util.YMD($store.state.app.timestamp) && new Date($store.state.app.timestamp).getTime() < new Date(`${$util.YMD($store.state.app.timestamp)} ${$store.state.app.publicConfig['week.submit.time']}`).getTime()">
+                        <div class="blue">
+                          {{$util.YMDHms(new Date(`${$util.YMD($store.state.app.timestamp)} ${$store.state.app.publicConfig['week.submit.time']}`))}}
+                        </div>
+                        前尽快提交
+                      </template>
+                      <template v-else>
+                        <div>未提交</div>
+                      </template>
+                    </div>
                   </template>
                 </div>
               </div>
@@ -216,8 +254,12 @@
               <div class="block day-item">
                 <div class="day-item-label">无需提交</div>
                 <div class="day-item-value">
-                  <SvgIcon name="true" color="#04495c"/>
-                  <span>未提交</span>
+                  <div class="icon">
+                    <SvgIcon name="true" color="#04495c"/>
+                  </div>
+                  <div class="text">
+                    <div>未提交</div>
+                  </div>
                 </div>
               </div>
             </template>
@@ -261,8 +303,8 @@ import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import ButtonSwitchCom from '../../common/button-switch.vue'
 import * as Handle from '../../common/handle'
-import {zbyWorkbenchCheckDay} from "@/api/modules/workbench";
-import {ElMessage} from "element-plus";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {downLoadBlob} from "@/utils/downLoadUrl";
 
 export default defineComponent({
   name: '',
@@ -286,15 +328,8 @@ export default defineComponent({
             signEndTimeReal: '',
             signEndStatus: '',
           },
-          daily: {
-            username: '',
-            submitTime: '',
-            submitEndTime: ''
-          },
-          weekly: {
-            submitTime: '',
-            submitEndTime: ''
-          }
+          daily: null,
+          weekly: null
         },
         week: {
           sign: {
@@ -345,7 +380,8 @@ export default defineComponent({
         week: [],
         month: []
       },
-      tempToday: JSON.parse(JSON.stringify(that.$util.YMD(store.state.app.timestamp)))
+      tempToday: JSON.parse(JSON.stringify(that.$util.YMD(store.state.app.timestamp))),
+      loading: false
     })
     const oneDayTime = Handle.oneDayTime
     const ref_day = ref()
@@ -502,6 +538,7 @@ export default defineComponent({
       initStaticMonth(ld)
     }
     const getDayInfo = () => {
+      state.loading = true
       state.dataInfo.day.sign = {
         signStartTime: '',
         signStartTimeReal: '',
@@ -510,13 +547,15 @@ export default defineComponent({
         signEndTimeReal: '',
         signEndStatus: '',
       }
+      state.dataInfo.day.daily = null
+      state.dataInfo.day.weekly = null
       that.$api.zbyWorkbenchCheckDay({
         deptId: store.state.app.userInfo.dept.id,
         time: state.dateValue.selectDay
       }).then(res => {
         if (res.code === 200) {
-          const signCome = res.data.signInRecords?.filter(v => v.type === '1')?.[0]
-          const signExit = res.data.signInRecords?.filter(v => v.type === '2')?.[0]
+          const signCome = res.data?.signInRecords?.filter(v => v.type === '1')?.[0]
+          const signExit = res.data?.signInRecords?.filter(v => v.type === '2')?.[0]
           if (signCome) {
             state.dataInfo.day.sign.signStartTime = signCome.signTime
             state.dataInfo.day.sign.signStartTimeReal = signCome.time
@@ -527,15 +566,43 @@ export default defineComponent({
             state.dataInfo.day.sign.signEndTimeReal = signExit.time
             state.dataInfo.day.sign.signEndStatus = signExit.status
           }
+          state.dataInfo.day.daily = res.data?.dailyReportRecord
+          state.dataInfo.day.weekly = res.data?.weekReportRecord
         } else {
           ElMessage.error(res.message)
         }
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
       })
     }
     const initDictionary = () => {
       store.dispatch('dictionary/LOAD_DICT_LIST', 'sign_type')
       store.dispatch('dictionary/LOAD_DICT_LIST', 'sign_status')
     }
+    const onDownload = (fUrls, fNames) => {
+      const urlArr = fUrls.split(',')
+      const nameArr = fNames.split(',')
+      const fileList = urlArr.map((v, i) => {
+        return {
+          name: nameArr?.[i] || v,
+          url: v
+        }
+      })
+      ElMessageBox.confirm(`即将下载${fileList.length}个附件，是否继续？`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        fileList.forEach(v => {
+          that.$api.commonDownload({filePath: v.url}).then(res => {
+            downLoadBlob(res, v.name)
+          }).catch(() => {
+            ElMessage.error('下载失败！')
+          })
+        })
+      }).catch(() => {})
+    }
     watch(() => state.dateValue.selectDay, () => {
       getDayInfo()
     })
@@ -560,7 +627,9 @@ export default defineComponent({
       dateFormatCpt,
       handleDay,
       handleWeek,
-      handleMonth
+      handleMonth,
+      onDownload,
+      oneDayTime
     }
   },
 })
@@ -696,7 +765,7 @@ export default defineComponent({
       }
       .value {
         flex: 1;
-        height: 60%;
+        height: 100%;
         display: grid;
         align-items: center;
         column-gap: 32px;
@@ -708,8 +777,7 @@ export default defineComponent({
           display: flex;
           .day-item {
             width: 40%;
-            height: 100%;
-            padding-left: 25px;
+            padding: 12px 0 10px 25px;
             display: flex;
             flex-direction: column;
             justify-content: center;
@@ -718,7 +786,7 @@ export default defineComponent({
               font-family: Microsoft YaHei;
               font-weight: bold;
               color: #0096FF;
-              margin-bottom: 12px;
+              margin-bottom: 8px;
               display: flex;
               align-items: center;
               >span {
@@ -729,23 +797,37 @@ export default defineComponent({
                 margin-right: 20px;
               }
             }
+            $H: 22px;
             .day-item-value {
               font-size: 16px;
               font-family: Microsoft YaHei;
               font-weight: 400;
               color: #FFFFFF;
               display: flex;
-              align-items: center;
-              >span {
-                margin-left: 8px;
+              .icon {
+                width: 26px;
+                height: $H;
+                display: flex;
+                align-items: center;
               }
-              .blue {
-                color: #0096FF;
+              .text {
+                flex: 1;
+                display: flex;
+                flex-wrap: wrap;
+                >div {
+                  height: $H;
+                  line-height: $H;
+                  margin-right: 8px;
+                }
+                .blue {
+                  color: #0096FF;
+                }
               }
             }
           }
         }
         &.value-statistic {
+          height: 60%;
           display: grid;
           column-gap: 14px;
           grid-template-columns: repeat(3, 1fr);

src/views/system/daily-manage/detail.vue

@@ -107,8 +107,8 @@ export default defineComponent({
               if (res.data?.id) {
                 setFormByInfo(res.data)
               } else {
-                const submitHour = new Date(`2000-01-01 ${store.state.app.publicConfig['log.submit.time']}`).getHours()
-                const diff = new Date(store.state.app.timestamp).getHours() < submitHour ? (1000 * 60 * 60 * 24) : 0
+                const submitT = new Date(`${that.$util.YMD(store.state.app.timestamp)} ${store.state.app.publicConfig['log.submit.time']}`).getTime()
+                const diff = new Date(store.state.app.timestamp).getTime() < submitT ? (1000 * 60 * 60 * 24) : 0
                 state.cusDetail = {
                   dutyTime: that.$util.YMD(new Date(store.state.app.timestamp).getTime() - diff),
                   submitter: store.state.app.userInfo.displayName,