feat:坐席监控新增保持和三方通话状态;

src/views/seats/header.vue

@@ -8,39 +8,37 @@
     </div>
     <div class="guang"></div>
     <div class="left_icons">
-      <el-badge :value="12" class="left_icons_item">
+      <el-badge :value="busyCount" :max="99" :hidden="busyCount <= 0" class="left_icons_item">
         <img src="@/assets/img/seats/busy.png" alt="">通话中
       </el-badge>
-      <el-badge :value="12" class="left_icons_item">
+      <el-badge :value="unreadyCount" :max="99" :hidden="unreadyCount <= 0" class="left_icons_item">
         <img src="@/assets/img/seats/unready.png" alt="">小休
       </el-badge>
-      <el-badge :value="12" class="left_icons_item">
-        <img src="@/assets/img/seats/hold.png" alt="">保持
+      <el-badge :value="heldCount" :max="99" :hidden="heldCount <= 0" class="left_icons_item">
+        <img src="@/assets/img/seats/held.png" alt="">保持
       </el-badge>
-      <el-badge :value="12" class="left_icons_item">
+      <el-badge :value="readyCount" :max="99" :hidden="readyCount <= 0" class="left_icons_item">
         <img src="@/assets/img/seats/ready.png" alt="">空闲
       </el-badge>
     </div>
     <div class="right_icons">
-      <el-badge :value="12" class="right_icons_item">
-        <img src="@/assets/img/seats/three_way.png" alt="">三方会议
+      <el-badge :value="threeWayCount" :max="99" :hidden="threeWayCount <= 0" class="right_icons_item">
+        <img src="@/assets/img/seats/threeWay.png" alt="">三方会议
       </el-badge>
-      <el-badge :value="12" class="right_icons_item">
+      <el-badge :value="acwCount" :max="99" :hidden="acwCount <= 0" class="right_icons_item">
         <img src="@/assets/img/seats/acw.png" alt="">话后整理
       </el-badge>
-      <el-badge :value="12" class="right_icons_item">
+      <el-badge :value="logoutCount" :max="99" :hidden="logoutCount <= 0" class="right_icons_item">
         <img src="@/assets/img/seats/logout.png" alt="">签出
       </el-badge>
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { reactive } from "vue";
+import {computed, reactive} from "vue";
 import dayjs from "dayjs";
-import type { DateDataType } from "./index";
-import { useSettingStore } from "@/stores/setting";
 
-const dateData = reactive<DateDataType>({
+const dateData = reactive<any>({
   dateDay: "",
   dateYear: "",
   dateWeek: "",
@@ -54,6 +52,34 @@ const timeFn = () => {
   }, 1000);
 };
 timeFn();
+// 通话数量
+const busyCount = computed(() => {
+  return 0;
+});
+// 小休数量、
+const unreadyCount = computed(() => {
+  return 0;
+});
+// 保持数量
+const heldCount = computed(() => {
+  return 0;
+});
+// 空闲数量
+const readyCount = computed(() => {
+  return 0;
+});
+// 三方会议数量
+const threeWayCount = computed(() => {
+  return 0;
+});
+// 话后整理数量
+const acwCount = computed(() => {
+  return 0;
+});
+// 签出数量
+const logoutCount = computed(() => {
+  return 0;
+});
 </script>
 
 <style scoped lang="scss">

src/views/seats/right.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="seats_container">
-      <div v-for="item in seatsList" class="seats_item">
-        <img src="@/assets/img/seats/service.png" alt="" class="seats_item_service">
-        <p class="seats_item_tel">{{item.telNo}}</p>
-        <div class="seats_item_state">
-          <img :src="getImageUrl('seats/'+item.state+'.png')" alt="">
-          <span> {{ currentStatusText(item.state)}}</span>
-        </div>
+    <div v-for="item in seatsList" class="seats_item">
+      <img src="@/assets/img/seats/service.png" alt="" class="seats_item_service">
+      <p class="seats_item_tel">{{ item.telNo }}</p>
+      <div class="seats_item_state">
+        <img :src="getImageUrl('seats/'+item.state+'.png')" alt="">
+        <span> {{ currentStatusText(item.state) }}</span>
       </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import {ref} from "vue";
 import {getImageUrl} from "@/utils/tools";
 
-const seatsList =ref([
+const seatsList = ref([
   {
     telNo: "1001",
     state: "ready",
@@ -70,7 +70,7 @@ const seatsList =ref([
   {
     telNo: "1014",
     state: "logout",
-  },{
+  }, {
     telNo: "1001",
     state: "ready",
   },
@@ -125,7 +125,7 @@ const seatsList =ref([
   {
     telNo: "1014",
     state: "logout",
-  },{
+  }, {
     telNo: "1001",
     state: "ready",
   },
@@ -180,7 +180,7 @@ const seatsList =ref([
   {
     telNo: "1014",
     state: "logout",
-  },{
+  }, {
     telNo: "1001",
     state: "ready",
   },
@@ -276,54 +276,74 @@ const seatsList =ref([
 // 设置当前状态的值
 const currentStatusText = (state: string) => {
   const statusMap: any = {
-    ready: '签入',
     logout: '签出',
     ready: '示闲',
-    unready: '示忙',
+    unready: '小休',
     busy: '通话中',
     acw: '整理中',
+    held: '保持',
+    treeWay: '三方会议',
   };
   return statusMap[state] || '';
 };
 </script>
 <style scoped lang="scss">
-.seats_container{
+@keyframes bounce-out {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(0.75);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.seats_container {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(auto-fill, 100px);
   grid-gap: 21px;
   overflow: auto;
- .seats_item{
-   width: 100px;
+
+  .seats_item {
+    width: 100px;
     height: 130px;
     border: 1px solid var(--el-color-primary-light-3);
     border-radius: 8px;
-   text-align: center;
-   padding: 7px 0;
-   &_service{
-     margin: 0 auto;
-     width: 40px;
-   }
-   &_tel{
-     font-size: var(--el-font-size-medium);
-     color: var(--el-color-white);
-     margin-top: 8px;
-   }
-   &_state{
-     display: flex;
-     align-items: center;
-     justify-content: center;
-     margin-top: 12px;
-     img{
-       width: 25px;
-       height: 25px;
-     }
-     span{
-       font-size: var(--el-font-size-medium);
-       color: var(--el-color-white);
-       margin-left: 5px;
-     }
-   }
+    text-align: center;
+    padding: 7px 0;
+    animation: bounce-out 0.3s ease;
+
+    &_service {
+      margin: 0 auto;
+      width: 40px;
+    }
+
+    &_tel {
+      font-size: var(--el-font-size-medium);
+      color: var(--el-color-white);
+      margin-top: 8px;
+    }
+
+    &_state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 12px;
+
+      img {
+        width: 25px;
+        height: 25px;
+      }
+
+      span {
+        font-size: var(--el-font-size-medium);
+        color: var(--el-color-white);
+        margin-left: 5px;
+      }
+    }
   }
 }
 </style>