值班管理员

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

@@ -6,7 +6,7 @@
           <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>
+              <div class="number" :class="{active: n.value === '1'}" :style="`z-index: ${item.numberList.length - nI};transform: translateX(${8 * (item.numberList.length - 1 -nI)}px);`">{{n.label}}</div>
             </template>
           </div>
         </div>
@@ -20,7 +20,7 @@
           <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 v-if="item.signInStatus != '0' && item.signInStatus != '4'" class="time">{{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)"/>
@@ -28,31 +28,31 @@
           <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 v-if="item.signOutStatus != '0' && item.signOutStatus != '4'" class="time">{{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"/>
+          <template v-if="item.dailyStatus == '1'">
+            <SvgIcon name="true" size="14" :color="$store.state.dictionary.dailyStatusColor.get(item.dailyStatus)"/>
             <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"/>
+            <SvgIcon name="tips" size="14" :color="$store.state.dictionary.dailyStatusColor.get(item.dailyStatus)"/>
           </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"/>
+          <template v-if="item.weeklyStatus == '1'">
+            <SvgIcon name="true" size="14" :color="$store.state.dictionary.weeklyStatusColor.get(item.weeklyStatus)"/>
             <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"/>
+            <SvgIcon name="tips" size="14" :color="$store.state.dictionary.weeklyStatusColor.get(item.weeklyStatus)"/>
           </template>
         </div>
       </div>
@@ -98,34 +98,64 @@ export default defineComponent({
       state.data = []
       that.$api.zbglyWorkbenchAdminSeatUnit().then(res => {
         if (res.code === 200) {
-          // state.data = res.data || []
-          for (let i = 1; i <= 48; i++) {
+          res.data?.forEach(v => {
+            const numbers = v.number?.split(',')
+            const numbersState = v.state?.split(',')
+            const dailyUrl = v.dailyUrl?.split(',')
+            const dailyName = v.dailyName?.split(',')
+            const weeklyUrl = v.weekUrl?.split(',')
+            const weeklyName = v.weekName?.split(',')
             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'},
-              ],
+              name: v.name,
+              abbreviation: v.abbreviation || v.name,
+              numberList: numbers.map((v, i) => {
+                return {label: v, value: numbersState?.[i] || '0'}
+              }),
+              signInStatus: v.inStatus,
+              signIn: v.inTime,
+              signOutStatus: v.outStatus,
+              signOut: v.outTime,
+              dailyStatus: v.dailyStatus,
+              dailyTime: v.dailyTime,
+              dailyFiles: dailyUrl.map((v, i) => {
+                return {label: v, value: dailyName?.[i] || v}
+              }),
+              weeklyStatus: v.weekStatus,
+              weeklyTime: v.weekTime,
+              weeklyFiles: weeklyUrl.map((v, i) => {
+                return {label: v, value: weeklyName?.[i] || v}
+              }),
             }
             state.data.push(obj)
-          }
+          })
+          // 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)
         }

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

@@ -70,15 +70,31 @@
           {label: '单位情况', value: 'dept'},
         ]" padding="4px 8px" v-model:active="seatType"/>
         <div class="tips">
-          注:
           <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>
-            <SvgIcon name="true" color="#3EFFBB" size="14"/>已提交,
-            <SvgIcon name="true" color="#04495c" size="14"/>未提交
+            <div class="sign">
+              签卡：
+              <div :style="`background-color: ${$store.state.dictionary.signStatusColor.get('1')};`"/>正常
+              <div :style="`background-color: ${$store.state.dictionary.signStatusColor.get('2')};`"/>迟到
+              <div :style="`background-color: ${$store.state.dictionary.signStatusColor.get('3')};`"/>早退
+              <div :style="`background-color: ${$store.state.dictionary.signStatusColor.get('4')};`"/>缺卡
+            </div>
+            <div class="daily">
+              ,日志：
+              <div :style="`background-color: ${$store.state.dictionary.dailyStatusColor.get('1')};`"/>已提交
+              <div :style="`background-color: ${$store.state.dictionary.dailyStatusColor.get('2')};`"/>未提交
+            </div>
+            <div class="weekly">
+              ,周报：
+              <div :style="`background-color: ${$store.state.dictionary.weeklyStatusColor.get('1')};`"/>已提交
+              <div :style="`background-color: ${$store.state.dictionary.weeklyStatusColor.get('2')};`"/>未提交
+            </div>
+<!--            <SvgIcon name="true" color="#3EFFBB" size="14"/>已提交,-->
+<!--            <SvgIcon name="true" color="#04495c" size="14"/>未提交-->
           </template>
         </div>
       </div>
@@ -243,9 +259,17 @@ export default defineComponent({
           margin-right: 4px;
           margin-left: 4px;
         }
-        .svg-icon {
-          margin-right: 4px;
-          margin-left: 4px;
+        >div {
+          display: flex;
+          align-items: center;
+          margin-left: 8px;
+          >div {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            margin-right: 4px;
+            margin-left: 4px;
+          }
         }
       }
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="seat-com">
+  <div class="seat-com" v-loading="loading">
     <template v-for="(item, index) in data">
 <!--      grid中间占位-->
       <template v-if="(index + 4) % 8 === 0">
@@ -26,8 +26,8 @@
             <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 class="name __text-ellipsis">{{p.displayName}}</div>
+                  <div class="phone">{{p.phoneNumber}}</div>
                 </div>
               </template>
             </template>
@@ -72,7 +72,7 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       loading: false,
-      data: []
+      data: <any>[]
     })
     const isHover = (item) => {
       return that.$util.isValue(item.deptName) && item.peopleList?.length > 0
@@ -82,7 +82,6 @@ export default defineComponent({
       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,
@@ -90,36 +89,17 @@ export default defineComponent({
               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)
           }
+          res.data?.forEach(v => {
+            const f = state.data.filter(d => String(d.index) === String(v.number))?.[0]
+            console.log(f)
+            if (f) {
+              f.shortName = v.abbreviation || v.name
+              f.deptName = v.name
+              f.peopleList = v.accounts
+            }
+          })
         } else {
           ElMessage.error(res.message)
         }