中间

src/layout/header/head-com.vue

@@ -8,7 +8,7 @@
       <div class="date">{{currentDateCpt}}</div>
       <img class="icon-user" src="@/assets/images/layout/head_icon-2.png">
       <div class="name">{{$store.state.app.userInfo?.displayName}}</div>
-      <div class="dept">{{$store.state.app.userInfo?.organizations[0].organizationName}}</div>
+      <div class="dept">{{$store.state.app.userInfo?.organizations?.[0]?.organizationName}}</div>
       <div class="button __hover" @click="onLogout">退出</div>
     </div>
   </div>

src/router/index.ts

@@ -82,16 +82,17 @@ const getInit = (to: any, next: any) => {
 export const initMainRouter = async () => {
     if (sessionStorage.getItem("sg_token") && location.pathname !== '/login') {
         store.dispatch('app/LOAD_TIMESTAMP')
-        await Promise.all([
-            store.dispatch('app/LOAD_USER_INFO'),
-        ]).then(async ([{u, r}]) => {
-            if (r.some(v => ['ZBY', 'ZBGL'].includes(v.permissionValue))) {
-                setRouters()
-            } else {
-                ElMessage.warning('该账号无系统角色！')
-                toLogin()
-            }
-        })
+        setRouters()
+        // await Promise.all([
+        //     store.dispatch('app/LOAD_USER_INFO'),
+        // ]).then(async ([{u, r}]) => {
+        //     if (r.some(v => ['ZBY', 'ZBGL'].includes(v.permissionValue))) {
+        //         setRouters()
+        //     } else {
+        //         ElMessage.warning('该账号无系统角色！')
+        //         toLogin()
+        //     }
+        // })
     }
 
 }

src/store/modules/app.ts

@@ -54,7 +54,7 @@ const actions = {
 		})
 	},
 	LOAD_TIMESTAMP({ commit }: any) {
-		const date = new Date('2023-07-16')
+		const date = new Date('2023-07-14')
 		commit('SET_TIMESTAMP', date)
 	},
 }

src/style/cus.scss

@@ -452,3 +452,13 @@
     }
   }
 }
+
+.__el-popper-none {
+  background: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  .el-popper__arrow {
+    display: none;
+  }
+}

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

@@ -1,6 +1,6 @@
 <template>
   <div class="main">
-    <div class="buttons">
+    <div class="buttons-top">
       <ButtonSwitchCom class="buttons" :options="[
           {label: '今日', value: '1'},
           {label: '本周', value: '2'},
@@ -29,14 +29,14 @@
       <div class="item">
         <img src="@/assets/images/business/statistic-cds.png"/>
         <div class="content">
-          <div><span class="green">{{ statisticData.cds.num }}</span>/{{ statisticData.cds.total }}</div>
+          <div><span class="red">{{ statisticData.cds.num }}</span>/{{ statisticData.cds.total }}</div>
           <div>迟到数</div>
         </div>
       </div>
       <div class="item">
         <img src="@/assets/images/business/statistic-zts.png"/>
         <div class="content">
-          <div><span class="green">{{ statisticData.zts.num }}</span>/{{ statisticData.zts.total }}</div>
+          <div><span class="red">{{ statisticData.zts.num }}</span>/{{ statisticData.zts.total }}</div>
           <div>早退数</div>
         </div>
       </div>
@@ -50,18 +50,35 @@
       <div class="item">
         <img src="@/assets/images/business/statistic-rztjl.png"/>
         <div class="content">
-          <div><span class="green">{{ statisticData.rztjl }}</span> %</div>
+          <div><span class="yellow">{{ statisticData.rztjl }}</span> %</div>
           <div>日志提交率</div>
         </div>
       </div>
-      <div class="item">
+      <div class="item" :style="`opacity: ${dateType === '1' && new Date($store.state.app.timestamp).getDay() === 5 ? 1 : 0.3};`">
         <img src="@/assets/images/business/statistic-zbtjl.png"/>
         <div class="content">
-          <div><span class="green">{{ statisticData.zbtjl }}</span> %</div>
+          <div><span class="yellow">{{ statisticData.zbtjl }}</span> %</div>
           <div>周报提交率</div>
         </div>
       </div>
     </div>
+    <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">
+          注:
+          <img src="@/assets/images/business/clue-icon.png"/>正常出勤,
+          <img src="@/assets/images/business/clue-icon.png"/>缺勤,
+          <img src="@/assets/images/business/clue-icon.png"/>异常
+        </div>
+      </div>
+      <SeatCom :type="seatType === '1' ? 'sign' : 'file'" :data="seatData"/>
+    </div>
   </div>
 </template>
 
@@ -81,11 +98,13 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import ButtonSwitchCom from '../../common/button-switch.vue'
+import SeatCom from './seat.vue'
 
 export default defineComponent({
   name: '',
   components: {
-    ButtonSwitchCom
+    ButtonSwitchCom,
+    SeatCom
   },
   setup(props, {emit}) {
     const store = useStore();
@@ -103,8 +122,56 @@ export default defineComponent({
         cql: 45.6,
         rztjl: 80.6,
         zbtjl: 13,
-      }
+      },
+      seatType: '1',
+      seatData: []
     })
+    const initSeatData = () => {
+      state.seatData = []
+      const arr = []
+      for (let i = 1; i <= 48; i++) {
+        const obj: any = {
+          index: i < 10 ? `0${i}` : i
+        }
+        if (state.seatType === '1') {
+          if (i === 9) {
+            obj.deptName = '通航服务站'
+            obj.isDaily = true
+            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.status = '1'
+          }
+          if (i === 27) {
+            obj.deptName = '打私办'
+            obj.isDaily = true
+            obj.isweekly = false
+            obj.status = '2'
+            obj.username = '张三丰'
+            obj.phone = '18976123456'
+          }
+          if (i === 36) {
+            obj.deptName = '打私办'
+            obj.isDaily = true
+            obj.isweekly = false
+            obj.status = '2'
+            obj.username = '张三丰'
+            obj.phone = '18976123456'
+          }
+        }
+        arr.push(obj)
+      }
+      state.seatData = arr
+    }
+    watch(() => state.seatType, () => {
+      initSeatData()
+    }, {immediate: true})
     return {
       ...toRefs(state)
     }
@@ -118,7 +185,7 @@ export default defineComponent({
   height: 100%;
   display: flex;
   flex-direction: column;
-  .buttons {
+  .buttons-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -131,5 +198,73 @@ export default defineComponent({
       opacity: 0.5;
     }
   }
+  .statistic {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: 68px;
+    margin-top: 12px;
+    .item {
+      display: flex;
+      align-items: center;
+      >img {
+        width: 60px;
+        height: 60px;
+      }
+      .content {
+        font-family: MicrosoftYaHei;
+        font-size: 12px;
+        color: #00DEFF;
+        >div {
+          line-height: 16px;
+        }
+        .green {
+          color: #5BDEAB;
+          font-size: 17px;
+        }
+        .red {
+          color: #E5004F;
+          font-size: 17px;
+        }
+        .yellow {
+          color: #FFCC02;
+          font-size: 17px;
+        }
+      }
+    }
+  }
+  .center-bar {
+    width: 100%;
+    height: 35px;
+    background-image: url("@/assets/images/business/center-bar.png");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    margin-top: 18px;
+    margin-bottom: 15px;
+  }
+  .seat {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    .tab {
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .tips {
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: rgba(254, 254, 254, 0.5);
+        line-height: 68px;
+        >img {
+          width: 13px;
+          height: 10px;
+        }
+      }
+    }
+    .seat-com {
+      flex: 1
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,253 @@
+<template>
+  <div class="seat-com">
+    <template v-for="(item, index) in data">
+<!--      grid中间占位-->
+      <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">
+          <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',
+              }"/>
+              <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',
+                }"/>
+              </template>
+            </div>
+          </template>
+          <div class="seat-hover">
+            asdasd
+          </div>
+        </el-popover>
+      </div>
+    </template>
+    <div class="line"/>
+  </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'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    type: {
+      default: 'sign',
+      validator(val: string) {
+        return ['sign', 'file'].includes(val)
+      }
+    },
+    data: {
+      default: () => []
+    }
+  },
+  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">
+.seat-com {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: 99px 99px 99px 99px auto 99px 99px 99px 99px;
+  column-gap: 9px;
+  row-gap: calc((100% - 88px * 6) / 5);
+  grid-template-rows: repeat(6, 88px);
+  position: relative;
+  padding: 15px 0 44px 0;
+  .line {
+    position: absolute;
+    left: calc((100% - 2px) / 2);
+    width: 0;
+    height: 100%;
+    border-left: 2px dashed #0085F7;
+    border-spacing: 20px;
+  }
+  .item {
+    position: relative;
+    opacity: 0.5;
+    .item-content {
+      width: 100%;
+      height: 100%;
+      .seat-bg, .obj-bg, .status-bg {
+        position: absolute;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+      .seat-bg {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+      .obj-bg {
+        z-index: 2;
+        width: 51px;
+        height: 35px;
+        background-image: url("@/assets/images/business/seat-obj_sign.png");
+        &.obj-bg_sign {
+          top: 39px;
+        }
+        &.obj-bg_sign-error {
+          background-image: url("@/assets/images/business/seat-obj_sign-error.png");
+        }
+      }
+      .status-bg {
+        z-index: 3;
+        width: 40px;
+        height: 33px;
+        &.status-bg_sign {
+          top: 33px;
+          background-image: url("@/assets/images/business/seat-status_sign.png");
+        }
+        &.status-bg_sign-success {
+          background-image: url("@/assets/images/business/seat-status_sign-success.png");
+        }
+        &.status-bg_sign-error {
+          background-image: url("@/assets/images/business/seat-status_sign-error.png");
+        }
+      }
+      .index {
+        z-index: 4;
+        position: absolute;
+        font-size: 12px;
+        font-family: PangMenZhengDao;
+        font-weight: 400;
+        color: #2EB8FF;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .dept-name {
+        z-index: 4;
+        position: absolute;
+        writing-mode: vertical-rl;
+        font-size: 12px;
+        font-family: PangMenZhengDao;
+        font-weight: 400;
+        color: #2EB8FF;
+        width: 23px;
+        height: 60px;
+        top: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: scaleY(0.85);
+      }
+    }
+    $seatHoverPopper: 61px;
+    :deep(.seat-hover-popper) {
+      width: 222px !important;
+      height: 168px !important;
+      background-image: url("@/assets/images/business/seat-hover-bg.png") !important;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      inset: unset !important;
+      bottom: 45px !important;
+      .seat-hover {
+        position: absolute;
+        top: 15px;
+        left: 34px;
+      }
+    }
+    &.item-success {
+      opacity: 1;
+      .item-content {
+        &:hover {
+          opacity: 0.75;
+          cursor: pointer;
+        }
+      }
+    }
+    $objBgLeft: 39px;
+    $statusBgLeft: 44px;
+    $deptNameLeft: 4px;
+    &.item-left {
+      .seat-bg {
+        background-image: url("@/assets/images/business/seat-left.png");
+        &.seat-bg_sign-error {
+          background-image: url("@/assets/images/business/seat-left_error.png");
+        }
+      }
+      .obj-bg_sign {
+        left: $objBgLeft;
+      }
+      .status-bg {
+        left: $statusBgLeft;
+      }
+      .index {
+        left: 0;
+      }
+      .dept-name {
+        left: $deptNameLeft;
+      }
+      :deep(.seat-hover-popper) {
+        left: $seatHoverPopper !important;
+      }
+    }
+    &.item-right {
+      .seat-bg {
+        background-image: url("@/assets/images/business/seat-right.png");
+        &.seat-bg_sign-error {
+          background-image: url("@/assets/images/business/seat-right_error.png");
+        }
+      }
+      .obj-bg_sign {
+        right: $objBgLeft;
+      }
+      .status-bg {
+        right: $statusBgLeft;
+      }
+      .index {
+        right: 0;
+      }
+      .dept-name {
+        right: $deptNameLeft;
+      }
+      :deep(.seat-hover-popper) {
+        right: calc(0px - #{$seatHoverPopper} - 94px) !important;
+      }
+    }
+  }
+}
+</style>

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

@@ -109,7 +109,7 @@ export default defineComponent({
     const state = reactive({
       Handle: Handle,
       deptId: '',
-      startWeek: 0,
+      startWeek: 6,
       timestamp: JSON.parse(JSON.stringify(store.state.app.timestamp)),
       selectMonth: JSON.parse(JSON.stringify(store.state.app.timestamp)),
     })
@@ -302,7 +302,7 @@ export default defineComponent({
           grid-column: span 7;
           display: flex;
           justify-content: flex-end;
-          margin-right: 10px;
+          margin-right: 6px;
         }
       }
     }