值班员中间上部

src/store/modules/app.ts

@@ -8,12 +8,15 @@ const state = {
 	userInfo: <any>{},
 	userRoleList: [],
 	zby: true,
-	timestamp: new Date().getTime()
+	timestamp: new Date().getTime(),
 }
 
 const getters = {
 	isZBY: (state) => {
 		return state.zby
+	},
+	isWeeklyDay: (state) => {
+		return new Date(state.timestamp).getDay() === 5
 	}
 }
 

src/style/font.scss

@@ -2,3 +2,7 @@
   font-family: PangMenZhengDao;
   src: url("@/style/PangMenZhengDao.ttf");
 }
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url("@/style/YouSheBiaoTiHei.TTF");
+}

src/utils/util.ts

@@ -103,6 +103,14 @@ export const YMD = (date: any, format = false) => {
   return format ? `${Y}年${M}月${D}日` : `${Y}-${M}-${D}`;
 }
 
+export const Hms = (date: any, format = false) => {
+  const _date = new Date(date)
+  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();
+  return format ? `${H}时${m}分${s}秒` : `${H}:${m}:${s}`;
+}
+
 //防抖
 export const debounce = function (cb: any, ms = 0) {
   let timer: any = null

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

@@ -54,7 +54,7 @@
           <div>日志提交率</div>
         </div>
       </div>
-      <div class="item" :style="`opacity: ${dateType === '1' && new Date($store.state.app.timestamp).getDay() === 5 ? 1 : 0.3};`">
+      <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>

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

@@ -52,7 +52,7 @@
                 提交人：{{item.username}}
               </div>
               <div class="file-text">
-                提交时间：{{formatDate(item.datetime)}}
+                提交时间：{{$util.Hms(item.datetime)}}
               </div>
             </template>
           </div>
@@ -114,16 +114,6 @@ export default defineComponent({
     const isHover = (item) => {
       return !(!item.deptName || (props.type !== 'sign' && item.status === '1'))
     }
-    const formatDate = (date) => {
-      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 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();
-      return `${H}:${m}:${s}`;
-    }
     const onView = (val) => {
       if (props.type === 'daily') {
         state.transferDaily = {
@@ -142,7 +132,6 @@ export default defineComponent({
     return {
       ...toRefs(state),
       isHover,
-      formatDate,
       onView
     }
   },

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

@@ -0,0 +1,178 @@
+<template>
+  <div class="main">
+    <div class="operation">
+      <div class="operation-item">
+        <div class="icon">
+          <img src="@/assets/images/business/operation-daily.png"/>
+        </div>
+        <div class="label">日志</div>
+      </div>
+      <div class="operation-item">
+        <div class="icon">
+          <img src="@/assets/images/business/operation-sign.png"/>
+        </div>
+        <div class="label">下班打卡</div>
+      </div>
+      <div class="operation-item" :style="`opacity: ${$store.getters['app/isWeeklyDay'] ? 1 : 0.3};`">
+        <div class="icon">
+          <img src="@/assets/images/business/operation-weekly.png"/>
+        </div>
+        <div class="label">周报</div>
+      </div>
+    </div>
+    <div class="clock">
+      <div class="tips">您还未签到/未提交日志/未提交周报，请尽快完成签到</div>
+      <div class="datetime">
+        <div class="label">北京时间：</div>
+        <div class="value">
+          <template v-for="item in $util.Hms($store.state.app.timestamp)">
+            <div class="item"><span>{{item}}</span></div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    ButtonSwitchCom,
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .operation {
+    margin-top: 43px;
+    padding: 0 42px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .operation-item {
+      width: 285px;
+      height: 94px;
+      background-image: url("@/assets/images/business/operatio-bg.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      .icon {
+        width: 93px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .label {
+        font-size: 24px;
+        font-family: PangMenZhengDao;
+        font-weight: 400;
+        color: #FFFFFF;
+        width: 130px;
+        text-align: center;
+      }
+    }
+  }
+  .clock {
+    width: 733px;
+    height: 118px;
+    background-image: url("@/assets/images/business/operation-datetime.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 52px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    justify-content: center;
+    .tips {
+      position: absolute;
+      top: -6px;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #02FFF1;
+    }
+    .datetime {
+      display: flex;
+      align-items: center;
+      .label {
+        font-size: 18px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #28C9F7;
+        margin-right: 46px;
+      }
+      .value {
+        display: flex;
+        .item {
+          width: 34px;
+          height: 41px;
+          border: 1px solid #1E4C85;
+          background: linear-gradient(0deg, #002248 0%, #1E4C85 100%);
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 13px;
+          >span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 30px;
+            font-family: YouSheBiaoTiHei;
+            font-weight: 400;
+            background: linear-gradient(0deg,
+                #ffffff 0%,
+                #ffffff 30%,
+                #69b9d7 50%,
+                #ffffff 60%,
+                #ffffff 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
+          &:nth-child(3n) {
+            >span {
+              margin-bottom: 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/staging/zby/index.vue

@@ -4,7 +4,9 @@
       <ClueCom class="clue-main"/>
       <ResearchCom class="daily-weekly-main"/>
     </div>
-<!--    <div class="staging-center">2</div>-->
+    <div class="staging-center">
+      <CenterCom class="center-main"/>
+    </div>
     <div class="staging-right">
       <NoticeCom class="notice-main"/>
       <DailyWeeklyCom class="daily-weekly-main"/>
@@ -31,6 +33,7 @@ import ClueCom from "./left/clue-com.vue";
 import ResearchCom from "./left/research-com.vue";
 import NoticeCom from "./right/notice-com.vue";
 import DailyWeeklyCom from "./right/daily-weekly-com.vue";
+import CenterCom from "./center/index.vue";
 
 export default defineComponent({
   name: '',
@@ -39,6 +42,7 @@ export default defineComponent({
     ResearchCom,
     NoticeCom,
     DailyWeeklyCom,
+    CenterCom,
   },
   setup(props, {emit}) {
     const store = useStore();
@@ -62,6 +66,12 @@ export default defineComponent({
     height: calc(100% / 2);
   }
 }
+.staging-center {
+  .center-main {
+    width: 100%;
+    height: 100%;
+  }
+}
 .staging-right {
   display: flex;
   flex-direction: column;