席位情况

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

@@ -11,7 +11,7 @@
       ]" padding="4px 8px" v-model:active="dateType"/>
       <div class="statistic-time">统计截止：{{$util.YMDHms(statisticTime)}}</div>
     </div>
-    <div class="statistic">
+    <div class="statistic" v-loading="loading">
       <div class="item">
         <img src="@/assets/images/business/statistic-cqs.png"/>
         <div class="content">
@@ -63,7 +63,7 @@
       </div>
     </div>
     <div class="center-bar"/>
-    <div class="seat">
+    <div class="seat" :style="`overflow: ${seatType === 'seat' ? 'unset' : 'hidden'};`">
       <div class="tab">
         <ButtonSwitchCom class="buttons" :options="[
           {label: '席位情况', value: 'seat'},
@@ -82,7 +82,7 @@
           </template>
         </div>
       </div>
-      <SeatCom v-if="seatType === 'seat'" :type="seatType" :data="seatData"/>
+      <SeatCom v-if="seatType === 'seat'"/>
       <CardCom v-else/>
     </div>
   </div>
@@ -132,108 +132,20 @@ export default defineComponent({
         zbtjl: 13,
       },
       seatType: 'seat',
-      seatData: [],
+      loading: false
     })
-    const initSeatData = () => {
-      that.$api.zbglyWorkbenchAdminSeat()
-      state.seatData = []
-      const arr = []
-      for (let i = 1; i <= 48; i++) {
-        const obj: any = {
-          index: i < 10 ? `0${i}` : i
-        }
-        if (state.seatType === 'sign') {
-          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'
-          }
-        }
-        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
-    }
     const initStatisticData = () => {
+      state.loading = true
+      state.statisticTime = new Date()
       that.$api.zbglyWorkbenchAdminStatistics({
         type: state.dateType
+      }).then(res => {
+        if (res.code === 200) {}
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
       })
     }
-    watch(() => state.seatType, () => {
-      initSeatData()
-    }, {immediate: true})
     watch(() => state.dateType, () => {
       initStatisticData()
     }, {immediate: true})
@@ -310,7 +222,6 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     flex: 1;
-    overflow: hidden;
     padding-top: 1px;
     .tab {
       height: 20px;

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

@@ -10,58 +10,35 @@
           <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 !== 'sign',
-              }"/>
+              <div class="dept-name" v-if="item.shortName">{{item.shortName}}</div>
+              <div class="seat-bg"/>
+              <div class="obj-bg"/>
               <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 !== 'sign',
-                  'status-bg_file-success': type !== 'sign' && item.status === '0',
+                  'status-bg_success': item.peopleList?.length > 0,
                 }"/>
               </template>
             </div>
           </template>
           <div class="seat-hover">
+            <div class="short-name">{{item.shortName}}</div>
             <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 v-if="item.peopleList?.length > 0">
+              <template v-for="p in item.peopleList.filter((v, vI) => vI < 1)">
+                <div class="people">
+                  <div class="name __text-ellipsis">{{p.name}}</div>
+                  <div class="phone">{{p.phone}}</div>
+                </div>
+              </template>
             </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">
-                提交时间：{{$util.Hms(item.datetime)}}
-              </div>
+            <template v-if="item.peopleList?.length > 1">
+              <div class="more">……</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>
 
@@ -80,25 +57,13 @@ 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'
+import {ElMessage} from "element-plus";
 
 export default defineComponent({
   name: '',
   components: {
-    DailyManageDetailCom,
-    WeeklyManageDetailCom
   },
   props: {
-    type: {
-      default: 'sign',
-      validator(val: string) {
-        return ['sign', 'daily', 'weekly'].includes(val)
-      }
-    },
-    data: {
-      default: () => []
-    }
   },
   setup(props, {emit}) {
     const store = useStore();
@@ -106,33 +71,69 @@ export default defineComponent({
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
-      showDaily: false,
-      transferDaily: {},
-      showWeekly: false,
-      transferWeekly: {}
+      loading: false,
+      data: []
     })
     const isHover = (item) => {
-      return !(!item.deptName || (props.type !== 'sign' && item.status === '1'))
+      return that.$util.isValue(item.deptName)
     }
-    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
+    const initData = () => {
+      state.loading = true
+      state.data = []
+      that.$api.zbglyWorkbenchAdminSeat().then(res => {
+        if (res.code === 200) {
+          // state.data = res.data || []
+          for (let i = 1; i <= 48; i++) {
+            const obj = {
+              index: i < 10 ? `0${i}` : i,
+              deptName: '',
+              shortName: '',
+              peopleList: []
+            }
+            if (i === 1) {
+              obj.shortName = '中电科'
+              obj.deptName = '中电科111'
+            }
+            if (i === 10) {
+              obj.shortName = '中电科'
+              obj.deptName = '中电科111'
+              obj.peopleList = [
+                {name: '张三丰', phone: '18976123456'}
+              ]
+            }
+            if (i === 19) {
+              obj.shortName = '中电科'
+              obj.deptName = '中电科111'
+              obj.peopleList = [
+                {name: '张三丰', phone: '18976123456'},
+                {name: '张三丰', phone: '18976123456'},
+              ]
+            }
+            if (i === 28) {
+              obj.shortName = '中电科'
+              obj.deptName = '中电科111'
+              obj.peopleList = [
+                {name: '张三丰张三丰张三丰', phone: '18976123456'},
+                {name: '张三丰', phone: '18976123456'},
+                {name: '张三丰张三丰张三丰', phone: '18976123456'},
+              ]
+            }
+            state.data.push(obj)
+          }
+        } else {
+          ElMessage.error(res.message)
         }
-        state.showWeekly = true
-      }
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
+      })
     }
+    onMounted(() => {
+      initData()
+    })
     return {
       ...toRefs(state),
       isHover,
-      onView
     }
   },
 })
@@ -159,7 +160,7 @@ export default defineComponent({
   }
   .item {
     position: relative;
-    opacity: 0.5;
+    opacity: 0.3;
     .item-content {
       width: 100%;
       height: 100%;
@@ -180,42 +181,17 @@ export default defineComponent({
         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");
-        }
-        &.obj-bg_file {
-          top: 39px;
-          width: 31px;
-          height: 35px;
-          background-image: url("@/assets/images/business/seat-obj_file.png");
-        }
+        top: 39px;
       }
       .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 {
+        top: 33px;
+        background-image: url("@/assets/images/business/seat-status_sign.png");
+        &.status-bg_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");
-        }
-        &.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;
@@ -258,45 +234,35 @@ export default defineComponent({
       bottom: 45px !important;
       .seat-hover {
         position: absolute;
-        top: 15px;
+        top: 20px;
         left: 34px;
         height: 82px;
         width: 170px;
-        .dept-name {
+        .short-name {
           font-size: 16px;
           font-family: Microsoft YaHei;
           font-weight: bold;
           color: #02DDEA;
           margin-bottom: 6px;
         }
-        .sign-text {
-          display: flex;
-          align-items: center;
+        .dept-name, .people, .more {
           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;
+        .dept-name {
+          margin-bottom: 12px;
+        }
+        .people {
+          display: flex;
+          align-items: center;
+          .name {
+            flex: 1;
+            margin-right: 2px;
+          }
+          .phone {
+            width: 100px;
           }
         }
       }
@@ -313,27 +279,17 @@ export default defineComponent({
       }
     }
     $objBgLeft: 39px;
-    $objFileBgLeft: 49px;
     $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 {
+      .obj-bg {
         left: $objBgLeft;
       }
-      .obj-bg_file {
-        left: $objFileBgLeft;
-      }
       .status-bg {
         left: $statusBgLeft;
-        &.status-bg_file {
-          left: 65px;
-        }
       }
       .index {
         left: 0;
@@ -348,21 +304,12 @@ export default defineComponent({
     &.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 {
+      .obj-bg {
         right: $objBgLeft;
       }
-      .obj-bg_file {
-        right: $objFileBgLeft;
-      }
       .status-bg {
         right: $statusBgLeft;
-        &.status-bg_file {
-          left: 35px;
-        }
       }
       .index {
         right: 0;