部门情况

src/api/modules/workbench.ts

@@ -45,3 +45,15 @@ export const zbglyWorkbenchAdminAnalysis = (params: any) => handle({
   method: 'get',
   params
 })
+//  值班管理员 > 中间 > 席位情况
+export const zbglyWorkbenchAdminSeat = (params: any) => handle({
+  url: `/${suffix}/workbench/admin/seat`,
+  method: 'get',
+  params
+})
+//  值班管理员 > 中间 > 单位情况
+export const zbglyWorkbenchAdminSeatUnit = (params: any) => handle({
+  url: `/${suffix}/workbench/admin/seat/unit`,
+  method: 'get',
+  params
+})

src/utils/util.ts

@@ -117,6 +117,13 @@ export const Hms = (date: any, format = false) => {
   return format ? `${H}时${m}分${s}秒` : `${H}:${m}:${s}`;
 }
 
+export const Hm = (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()}`;
+  return format ? `${H}时${m}分` : `${H}:${m}`;
+}
+
 //防抖
 export const debounce = function (cb: any, ms = 0) {
   let timer: any = null

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

@@ -0,0 +1,244 @@
+<template>
+  <div class="card-com" v-loading="loading">
+    <template v-for="(item, index) in data">
+      <div class="item">
+        <div class="title">
+          <div class="short-name">{{item.abbreviation || item.name}}</div>
+          <div class="numbers">
+            <template v-for="(n, nI) in item.numberList">
+              <div class="number" :class="{active: n.value}" :style="`z-index: ${item.numberList.length - nI};transform: translateX(${8 * (item.numberList.length - 1 -nI)}px);`">{{n.label}}</div>
+            </template>
+          </div>
+        </div>
+        <div class="name">{{item.name}}</div>
+        <div class="sign">
+          <img src="@/assets/images/business/seat-dept_icon.png"/>
+          <div class="label">考勤</div>
+          <template v-if="item.signInStatus === '1'">
+            <SvgIcon name="true" size="14" :color="$store.state.dictionary.signStatusColor.get(item.signInStatus)"/>
+          </template>
+          <template v-else>
+            <SvgIcon name="tips" size="14" :color="$store.state.dictionary.signStatusColor.get(item.signInStatus)"/>
+          </template>
+          <div v-if="item.signIn" class="time">{{$util.Hm(item.signIn)}}</div>
+          <div>{{$store.state.dictionary.signStatusMap.get(item.signInStatus)}}</div>
+          <template v-if="item.signOutStatus === '1'">
+            <SvgIcon name="true" size="14" :color="$store.state.dictionary.signStatusColor.get(item.signOutStatus)"/>
+          </template>
+          <template v-else>
+            <SvgIcon name="tips" size="14" :color="$store.state.dictionary.signStatusColor.get(item.signOutStatus)"/>
+          </template>
+          <div v-if="item.signOut" class="time">{{$util.Hm(item.signOut)}}</div>
+          <div>{{$store.state.dictionary.signStatusMap.get(item.signOutStatus)}}</div>
+        </div>
+        <div class="daily">
+          <img src="@/assets/images/business/seat-dept_icon.png"/>
+          <div class="label">日志</div>
+          <template v-if="item.dailyTime">
+            <SvgIcon name="true" size="14" color="#3EFFBB"/>
+            <div class="time">{{$util.Hm(item.dailyTime)}}</div>
+            <img v-if="item.dailyFiles?.length > 0" class="download __hover" src="@/assets/images/business/download.png" @click="onDownload(item.dailyFiles)"/>
+          </template>
+          <template v-else>
+            <SvgIcon name="true" size="14" color="#01C869"/>
+          </template>
+        </div>
+        <div class="weekly">
+          <img src="@/assets/images/business/seat-dept_icon.png"/>
+          <div class="label">周报</div>
+          <template v-if="item.weeklyTime">
+            <SvgIcon name="true" size="14" color="#3EFFBB"/>
+            <div class="time">{{$util.Hm(item.weeklyTime)}}</div>
+            <img v-if="item.weeklyFiles?.length > 0" class="download __hover" src="@/assets/images/business/download.png" @click="onDownload(item.weeklyFiles)"/>
+          </template>
+          <template v-else>
+            <SvgIcon name="true" size="14" color="#01C869"/>
+          </template>
+        </div>
+      </div>
+    </template>
+  </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 {ElMessage, ElMessageBox} from "element-plus";
+import {downLoadBlob} from "@/utils/downLoadUrl";
+
+export default defineComponent({
+  name: '',
+  components: {
+  },
+  props: {
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      loading: false,
+      data: []
+    })
+    const initData = () => {
+      state.loading = true
+      state.data = []
+      that.$api.zbglyWorkbenchAdminSeatUnit().then(res => {
+        if (res.code === 200) {
+          // state.data = res.data || []
+          for (let i = 1; i <= 48; i++) {
+            const obj = {
+              name: '中电科',
+              abbreviation: '',
+              numberList: [
+                {label: '33', value: false},
+                {label: '34', value: true},
+                {label: '35', value: false},
+                {label: '36', value: true},
+              ],
+              signIn: '2023-03-02 22:34:22',
+              signInStatus: '1',
+              signOut: '2023-03-02 22:34:22',
+              signOutStatus: '2',
+              dailyTime: '2023-03-02 22:34:22',
+              dailyFiles: [
+                {url: '222', name: 'ss'},
+                {url: '222', name: 'ss'},
+              ],
+              weeklyTime: '2023-03-02 22:34:22',
+              weeklyFiles: [
+                {url: '222', name: 'ss'},
+                {url: '222', name: 'ss'},
+              ],
+            }
+            state.data.push(obj)
+          }
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
+      })
+    }
+    const onDownload = (fileList) => {
+      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(() => {})
+    }
+    onMounted(() => {
+      initData()
+      store.dispatch('dictionary/LOAD_DICT_LIST', 'sign_status')
+    })
+    return {
+      ...toRefs(state),
+      onDownload
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.card-com {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(3, 1fr);
+  overflow-y: auto;
+  padding-top: 18px;
+  .item {
+    height: 155px;
+    background: rgba(0, 133, 247, 0.25);
+    padding: 10px 12px 16px 16px;
+    box-sizing: border-box;
+    .title {
+      display: flex;
+      align-items: center;
+      .short-name {
+        font-size: 20px;
+        font-family: FZLanTingHeiS-DB-GB;
+        font-weight: bold;
+        color: #E2EBF1;
+      }
+      .numbers {
+        margin-left: auto;
+        display: flex;
+        .number {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 30px;
+          height: 30px;
+          background: #0D3F6D;
+          border-radius: 50%;
+          border: 2px solid #0085F7;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: rgba(226, 235, 241, 0.5);
+          &.active {
+            background: #0291e3;
+            border-color: #05f0fd;
+            color: #E2EBF1;
+          }
+        }
+      }
+    }
+    .name {
+      margin-top: 8px;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #E2EBF1;
+    }
+    .sign, .daily, .weekly {
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #E2EBF1;
+      margin-top: 10px;
+      >img {
+        margin-right: 8px;
+      }
+      .svg-icon {
+        margin-left: 22px;
+        margin-right: 6px;
+      }
+      .time {
+        margin-right: 4px;
+      }
+      .download {
+        width: 14px;
+        height: 13px;
+        margin-left: 8px;
+      }
+    }
+  }
+}
+</style>

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

@@ -65,21 +65,25 @@
     <div class="center-bar"/>
     <div class="seat">
       <div class="tab">
-        <ButtonSwitchCom class="buttons" :options="seatOptions" padding="4px 8px" v-model:active="seatType"/>
-        <div class="tips" :class="{file: seatType !== 'sign'}">
+        <ButtonSwitchCom class="buttons" :options="[
+          {label: '席位情况', value: 'seat'},
+          {label: '单位情况', value: 'dept'},
+        ]" padding="4px 8px" v-model:active="seatType"/>
+        <div class="tips">
           注:
-          <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 v-if="seatType === 'seat'">
+            <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"/>未提交
+            <SvgIcon name="true" color="#3EFFBB" size="14"/>已提交,
+            <SvgIcon name="true" color="#04495c" size="14"/>未提交
           </template>
         </div>
       </div>
-      <SeatCom :type="seatType" :data="seatData"/>
+      <SeatCom v-if="seatType === 'seat'" :type="seatType" :data="seatData"/>
+      <CardCom v-else/>
     </div>
   </div>
 </template>
@@ -101,13 +105,14 @@ import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import ButtonSwitchCom from '../../common/button-switch.vue'
 import SeatCom from './seat.vue'
-import {zbglyWorkbenchAdminStatistics} from "@/api/modules/workbench";
+import CardCom from './card.vue'
 
 export default defineComponent({
   name: '',
   components: {
     ButtonSwitchCom,
-    SeatCom
+    SeatCom,
+    CardCom,
   },
   setup(props, {emit}) {
     const store = useStore();
@@ -126,20 +131,11 @@ export default defineComponent({
         rztjl: 80.6,
         zbtjl: 13,
       },
-      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
+      seatType: 'seat',
+      seatData: [],
     })
     const initSeatData = () => {
+      that.$api.zbglyWorkbenchAdminSeat()
       state.seatData = []
       const arr = []
       for (let i = 1; i <= 48; i++) {
@@ -243,7 +239,6 @@ export default defineComponent({
     }, {immediate: true})
     return {
       ...toRefs(state),
-      seatOptions
     }
   },
 })
@@ -315,6 +310,8 @@ export default defineComponent({
     display: flex;
     flex-direction: column;
     flex: 1;
+    overflow: hidden;
+    padding-top: 1px;
     .tab {
       height: 20px;
       display: flex;
@@ -335,11 +332,9 @@ export default defineComponent({
           margin-right: 4px;
           margin-left: 4px;
         }
-        &.file {
-          >img {
-            width: 14px;
-            height: 14px;
-          }
+        .svg-icon {
+          margin-right: 4px;
+          margin-left: 4px;
         }
       }
     }