管理人员工作台页面搭建完成

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

@@ -65,19 +65,21 @@
     <div class="center-bar"/>
     <div class="seat">
       <div class="tab">
-        <ButtonSwitchCom class="buttons" :options="[
-          {label: '在位情况', value: '1'},
-          {label: '日志提交', value: '2'},
-          {label: '周报提交', value: '3'},
-        ]" padding="4px 8px" v-model:active="seatType"/>
-        <div class="tips">
+        <ButtonSwitchCom class="buttons" :options="seatOptions" padding="4px 8px" v-model:active="seatType"/>
+        <div class="tips" :class="{file: seatType !== 'sign'}">
           注:
-          <img src="@/assets/images/business/clue-icon.png"/>正常出勤,
-          <img src="@/assets/images/business/clue-icon.png"/>缺勤,
-          <img src="@/assets/images/business/clue-icon.png"/>异常
+          <template v-if="seatType === 'sign'">
+            <img src="@/assets/images/business/seat-status_sign-success.png"/>正常出勤,
+            <img src="@/assets/images/business/seat-status_sign.png"/>缺勤,
+            <img src="@/assets/images/business/seat-status_sign-error.png"/>异常
+          </template>
+          <template v-else>
+            <img src="@/assets/images/business/seat-status_file-success.png"/>已提交,
+            <img src="@/assets/images/business/seat-status_file.png"/>未提交
+          </template>
         </div>
       </div>
-      <SeatCom :type="seatType === '1' ? 'sign' : 'file'" :data="seatData"/>
+      <SeatCom :type="seatType" :data="seatData"/>
     </div>
   </div>
 </template>
@@ -123,9 +125,19 @@ export default defineComponent({
         rztjl: 80.6,
         zbtjl: 13,
       },
-      seatType: '1',
+      seatType: 'sign',
       seatData: []
     })
+    const seatOptions = computed(() => {
+      const arr = [
+        {label: '在位情况', value: 'sign'},
+        {label: '日志提交', value: 'daily'},
+      ]
+      if (new Date(store.state.app.timestamp).getDay() === 5) {
+        arr.push({label: '周报提交', value: 'weekly'})
+      }
+      return arr
+    })
     const initSeatData = () => {
       state.seatData = []
       const arr = []
@@ -133,25 +145,25 @@ export default defineComponent({
         const obj: any = {
           index: i < 10 ? `0${i}` : i
         }
-        if (state.seatType === '1') {
+        if (state.seatType === 'sign') {
           if (i === 9) {
             obj.deptName = '通航服务站'
             obj.isDaily = true
-            obj.isweekly = false
-            obj.username = '张三丰'
+            obj.isWeekly = false
+            obj.username = '张三丰三是那是那是男生'
             obj.phone = '18976123456'
             obj.status = '0'  // 0-正常出勤，1-缺勤，2异常
           }
           if (i === 18) {
             obj.deptName = '通航服务站'
             obj.isDaily = true
-            obj.isweekly = false
+            obj.isWeekly = false
             obj.status = '1'
           }
           if (i === 27) {
             obj.deptName = '打私办'
             obj.isDaily = true
-            obj.isweekly = false
+            obj.isWeekly = false
             obj.status = '2'
             obj.username = '张三丰'
             obj.phone = '18976123456'
@@ -159,12 +171,60 @@ export default defineComponent({
           if (i === 36) {
             obj.deptName = '打私办'
             obj.isDaily = true
-            obj.isweekly = false
+            obj.isWeekly = false
             obj.status = '2'
             obj.username = '张三丰'
             obj.phone = '18976123456'
           }
         }
+        if (state.seatType === 'daily') {
+          if (i === 10) {
+            obj.deptName = '通航服务站'
+            obj.fileName = '《10月20日中兵北斗日志10月20日中兵北斗日志10月20日中兵北斗日志》'
+            obj.username = '张三丰'
+            obj.datetime = new Date()
+            obj.status = '0'  // 0-已提交,1-未提交
+          }
+          if (i === 19) {
+            obj.deptName = '通航服务站'
+            obj.status = '1'  // 0-已提交,1-未提交
+          }
+          if (i === 28) {
+            obj.deptName = '打私办'
+            obj.username = '张三三三三丰张三三三三丰张三三三三丰张三三三三丰张三三三三丰'
+            obj.fileName = '《10月20日中》'
+            obj.datetime = new Date()
+            obj.status = '0'  // 0-已提交,1-未提交
+          }
+          if (i === 37) {
+            obj.deptName = '打私办'
+            obj.status = '1'  // 0-已提交,1-未提交
+          }
+        }
+        if (state.seatType === 'weekly') {
+          if (i === 13) {
+            obj.deptName = '通航服务站'
+            obj.fileName = '《10月20日中兵北斗日志10月20日中兵北斗日志10月20日中兵北斗日志》'
+            obj.username = '张三丰'
+            obj.datetime = new Date()
+            obj.status = '0'  // 0-已提交,1-未提交
+          }
+          if (i === 20) {
+            obj.deptName = '通航服务站'
+            obj.status = '1'  // 0-已提交,1-未提交
+          }
+          if (i === 27) {
+            obj.deptName = '打私办'
+            obj.username = '张三三三三丰张三三三三丰张三三三三丰张三三三三丰张三三三三丰'
+            obj.fileName = '《10月20日中》'
+            obj.datetime = new Date()
+            obj.status = '0'  // 0-已提交,1-未提交
+          }
+          if (i === 34) {
+            obj.deptName = '打私办'
+            obj.status = '1'  // 0-已提交,1-未提交
+          }
+        }
         arr.push(obj)
       }
       state.seatData = arr
@@ -173,7 +233,8 @@ export default defineComponent({
       initSeatData()
     }, {immediate: true})
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      seatOptions
     }
   },
 })
@@ -250,15 +311,26 @@ export default defineComponent({
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: 0 12px;
       .tips {
         font-size: 12px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: rgba(254, 254, 254, 0.5);
         line-height: 68px;
+        display: flex;
+        align-items: center;
         >img {
           width: 13px;
           height: 10px;
+          margin-right: 4px;
+          margin-left: 4px;
+        }
+        &.file {
+          >img {
+            width: 14px;
+            height: 14px;
+          }
         }
       }
     }

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

@@ -5,37 +5,63 @@
       <template v-if="(index + 4) % 8 === 0">
         <div/>
       </template>
-      <div class="item" :class="{'item-left': index % 2 === 0, 'item-right': index % 2 === 1, 'item-success': item.deptName}">
-        <el-popover placement="top" :width="400" popper-class="__el-popper-none seat-hover-popper" :teleported="false" :disabled="!item.deptName">
+      <div class="item" :class="{'item-left': index % 2 === 0, 'item-right': index % 2 === 1, 'item-success': item.deptName, 'item-hover': isHover(item)}">
+        <el-popover placement="top" :width="400" popper-class="__el-popper-none seat-hover-popper" :teleported="false" :disabled="!isHover(item)">
           <template #reference>
             <div class="item-content">
               <div class="index">{{item.index}}</div>
               <div class="dept-name" v-if="item.deptName">{{item.deptName}}</div>
               <div class="seat-bg" :class="{'seat-bg_sign-error': type === 'sign' && item.status === '2'}"/>
-              
               <div class="obj-bg" :class="{
                 'obj-bg_sign': type === 'sign',
                 'obj-bg_sign-error': type === 'sign' && item.status === '2',
-                'obj-bg_file': type === 'file',
+                'obj-bg_file': type !== 'sign',
               }"/>
               <template v-if="item.deptName">
                 <div class="status-bg" :class="{
                   'status-bg_sign': type === 'sign',
                   'status-bg_sign-success': type === 'sign' && item.status === '0',
                   'status-bg_sign-error': type === 'sign' && item.status === '2',
-                  'status-bg_file': type === 'file',
-                  'status-bg_file-success': type === 'file' && item.status === '0',
+                  'status-bg_file': type !== 'sign',
+                  'status-bg_file-success': type !== 'sign' && item.status === '0',
                 }"/>
               </template>
             </div>
           </template>
           <div class="seat-hover">
-            asdasd
+            <div class="dept-name">{{item.deptName}}</div>
+            <template v-if="type === 'sign'">
+              <div class="sign-text">
+                <div class="label __text-ellipsis">{{item.username}}</div>
+                <div class="value">{{item.phone}}</div>
+              </div>
+              <div class="sign-text">
+                <div class="label">日报</div>
+                <div class="value" :class="`${item.isDaily ? 'green' : 'red'}`">{{item.isDaily ? '已提交' : '未提交'}}</div>
+              </div>
+              <div class="sign-text">
+                <div class="label">周报</div>
+                <div class="value" :class="`${item.isWeekly ? 'green' : 'red'}`">{{item.isWeekly ? '已提交' : '未提交'}}</div>
+              </div>
+            </template>
+            <template v-else>
+              <div class="file-text green __text-ellipsis __hover" @click="onView(item)">
+                {{item.fileName}}
+              </div>
+              <div class="file-text __text-ellipsis">
+                提交人：{{item.username}}
+              </div>
+              <div class="file-text">
+                提交时间：{{formatDate(item.datetime)}}
+              </div>
+            </template>
           </div>
         </el-popover>
       </div>
     </template>
     <div class="line"/>
+    <DailyManageDetailCom v-model:show="showDaily" :transfer="transferDaily"/>
+    <WeeklyManageDetailCom v-model:show="showWeekly" :transfer="transferWeekly"/>
   </div>
 </template>
 
@@ -54,15 +80,20 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import DailyManageDetailCom from '@/views/system/daily-manage/detail.vue'
+import WeeklyManageDetailCom from '@/views/system/weekly-manage/detail.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    DailyManageDetailCom,
+    WeeklyManageDetailCom
+  },
   props: {
     type: {
       default: 'sign',
       validator(val: string) {
-        return ['sign', 'file'].includes(val)
+        return ['sign', 'daily', 'weekly'].includes(val)
       }
     },
     data: {
@@ -74,9 +105,45 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      showDaily: false,
+      transferDaily: {},
+      showWeekly: false,
+      transferWeekly: {}
+    })
+    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 = {
+          method: 'view',
+          detail: val
+        }
+        state.showDaily = true
+      } else if (props.type === 'weekly') {
+        state.transferWeekly = {
+          method: 'view',
+          detail: val
+        }
+        state.showWeekly = true
+      }
+    }
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      isHover,
+      formatDate,
+      onView
     }
   },
 })
@@ -130,6 +197,12 @@ export default defineComponent({
         &.obj-bg_sign-error {
           background-image: url("@/assets/images/business/seat-obj_sign-error.png");
         }
+        &.obj-bg_file {
+          top: 39px;
+          width: 31px;
+          height: 35px;
+          background-image: url("@/assets/images/business/seat-obj_file.png");
+        }
       }
       .status-bg {
         z-index: 3;
@@ -145,6 +218,15 @@ export default defineComponent({
         &.status-bg_sign-error {
           background-image: url("@/assets/images/business/seat-status_sign-error.png");
         }
+        &.status-bg_file {
+          width: 20px;
+          height: 20px;
+          top: 60px;
+          background-image: url("@/assets/images/business/seat-status_file.png");
+        }
+        &.status-bg_file-success {
+          background-image: url("@/assets/images/business/seat-status_file-success.png");
+        }
       }
       .index {
         z-index: 4;
@@ -189,18 +271,60 @@ export default defineComponent({
         position: absolute;
         top: 15px;
         left: 34px;
+        height: 82px;
+        width: 170px;
+        .dept-name {
+          font-size: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #02DDEA;
+          margin-bottom: 6px;
+        }
+        .sign-text {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          >div {
+            line-height: 20px;
+          }
+          .label {
+            width: 60px;
+          }
+          .green {
+            color: #3EFFBB;
+          }
+          .red {
+            color: #E5004F;
+          }
+        }
+        .file-text {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #FFFFFF;
+          line-height: 20px;
+          &.green {
+            color: #3EFFBB;
+          }
+        }
       }
     }
     &.item-success {
       opacity: 1;
+    }
+    &.item-hover {
       .item-content {
         &:hover {
-          opacity: 0.75;
           cursor: pointer;
+          opacity: 0.75;
         }
       }
     }
     $objBgLeft: 39px;
+    $objFileBgLeft: 49px;
     $statusBgLeft: 44px;
     $deptNameLeft: 4px;
     &.item-left {
@@ -213,8 +337,14 @@ export default defineComponent({
       .obj-bg_sign {
         left: $objBgLeft;
       }
+      .obj-bg_file {
+        left: $objFileBgLeft;
+      }
       .status-bg {
         left: $statusBgLeft;
+        &.status-bg_file {
+          left: 65px;
+        }
       }
       .index {
         left: 0;
@@ -236,8 +366,14 @@ export default defineComponent({
       .obj-bg_sign {
         right: $objBgLeft;
       }
+      .obj-bg_file {
+        right: $objFileBgLeft;
+      }
       .status-bg {
         right: $statusBgLeft;
+        &.status-bg_file {
+          left: 35px;
+        }
       }
       .index {
         right: 0;