reactor:对接司法大屏;

src/router/index.ts

@@ -22,6 +22,14 @@ const routes: Array<RouteRecordRaw> = [
             title: '宜宾市12345政务服务便民热线',
         }
     },
+    {
+        path: '/seats',
+        name: 'seats',
+        component: () => import('@/views/seats/index.vue'),
+        meta: {
+            title: '宜宾市12345坐席监控中心',
+        }
+    },
     {
         path: '/judicial',
         name: 'judicial',

src/utils/request.ts

@@ -1,85 +1,85 @@
-import axios, { AxiosInstance, AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
-import { ElMessage, ElMessageBox, ElLoading, LoadingOptionsResolved } from 'element-plus';
+import axios, {AxiosInstance, AxiosResponse, AxiosError, AxiosRequestConfig} from 'axios';
+import {ElMessage, ElMessageBox, ElLoading, LoadingOptionsResolved} from 'element-plus';
 // 重复请求队列
 const pendingMap = new Map();
 // 全局loading
 const LoadingInstance = {
-	_target: null as any,
-	_count: 0,
+    _target: null as any,
+    _count: 0,
 };
 type customOptionsType = {
-	repeat_request_cancel?: boolean; // 是否开启取消重复请求, 默认为 true
-	loading?: boolean; // 是否开启全屏loading层效果, 默认为false
-	reduct_data_format?: boolean; // 是否开启简洁的数据结构响应 减少一层data, 默认为true
-	error_message_show?: boolean; // 是否开启接口错误信息展示,默认为true
-	code_message_show?: boolean; // 是否开启code不为0时的信息提示, 默认为false
+    repeat_request_cancel?: boolean; // 是否开启取消重复请求, 默认为 true
+    loading?: boolean; // 是否开启全屏loading层效果, 默认为false
+    reduct_data_format?: boolean; // 是否开启简洁的数据结构响应 减少一层data, 默认为true
+    error_message_show?: boolean; // 是否开启接口错误信息展示,默认为true
+    code_message_show?: boolean; // 是否开启code不为0时的信息提示, 默认为false
 };
 export default function myAxios(axiosConfig: any, customOptions?: customOptionsType, loadingOptions?: LoadingOptionsResolved) {
-	// 配置新建一个 axios 实例
-	const service: AxiosInstance = axios.create({
-		baseURL: import.meta.env.VITE_API_URL,
-		timeout: 50000,
-		headers: { 'Content-Type': 'application/json' },
-	});
+    // 配置新建一个 axios 实例
+    const service: AxiosInstance = axios.create({
+        baseURL: import.meta.env.VITE_API_URL,
+        timeout: 50000,
+        headers: {'Content-Type': 'application/json'},
+    });
 
-	// 自定义配置
-	let custom_options = Object.assign(
-		{
-			repeat_request_cancel: true, // 是否开启取消重复请求, 默认为 true
-			loading: false, // 是否开启全屏loading层效果, 默认为false
-			reduct_data_format: true, // 是否开启简洁的数据结构响应 减少一层data, 默认为true
-			error_message_show: true, // 是否开启接口错误信息展示,默认为true
-			code_message_show: false, // 是否开启code不为0时的信息提示, 默认为false
-		},
-		customOptions
-	);
+    // 自定义配置
+    let custom_options = Object.assign(
+        {
+            repeat_request_cancel: false, // 是否开启取消重复请求, 默认为 true
+            loading: false, // 是否开启全屏loading层效果, 默认为false
+            reduct_data_format: true, // 是否开启简洁的数据结构响应 减少一层data, 默认为true
+            error_message_show: true, // 是否开启接口错误信息展示,默认为true
+            code_message_show: false, // 是否开启code不为0时的信息提示, 默认为false
+        },
+        customOptions
+    );
 
-	// 添加请求拦截器
-	service.interceptors.request.use(
-		async (config: any) => {
-			removePending(config);
-			custom_options.repeat_request_cancel && addPending(config);
-			// 创建loading实例
-			if (custom_options.loading) {
-				LoadingInstance._count++;
-				if (LoadingInstance._count === 1) {
-					LoadingInstance._target = ElLoading.service(loadingOptions);
-				}
-			}
-			// 在发送请求之前做些什么 token
-			if (sessionStorage.getItem('token')) {
-				(<any>config.headers)['Authorization'] = `Bearer ${sessionStorage.getItem('token')}`;
-			}
-			return config;
-		},
-		async (error: AxiosError) => {
-			return Promise.reject(error);
-		}
-	);
-	// 添加响应拦截器
-	service.interceptors.response.use(
-		(response: AxiosResponse): any => {
-			removePending(response.config);
-			custom_options.loading && closeLoading(custom_options); // 关闭loading
-			// 对响应数据做点什么
-			if (custom_options.code_message_show && response.data && response.data.code !== 0) {
-				ElMessage({
-					type: 'error',
-					message: response.data.message,
-				});
-				return Promise.reject(response.data); // code不等于0, 页面具体逻辑就不执行了
-			}
-			return custom_options.reduct_data_format ? response.data : response;
-		},
-		async (error: AxiosError): Promise<never> => {
-			error.config && removePending(error.config);
-			custom_options.loading && closeLoading(custom_options); // 关闭loading
-			custom_options.error_message_show && httpErrorStatusHandle(error); // 处理错误状态码
-			return Promise.reject(error); // 错误继续返回给到具体页面
-		}
-	);
+    // 添加请求拦截器
+    service.interceptors.request.use(
+        async (config: any) => {
+            removePending(config);
+            custom_options.repeat_request_cancel && addPending(config);
+            // 创建loading实例
+            if (custom_options.loading) {
+                LoadingInstance._count++;
+                if (LoadingInstance._count === 1) {
+                    LoadingInstance._target = ElLoading.service(loadingOptions);
+                }
+            }
+            // 在发送请求之前做些什么 token
+            if (sessionStorage.getItem('token')) {
+                (<any>config.headers)['Authorization'] = `Bearer ${sessionStorage.getItem('token')}`;
+            }
+            return config;
+        },
+        async (error: AxiosError) => {
+            return Promise.reject(error);
+        }
+    );
+    // 添加响应拦截器
+    service.interceptors.response.use(
+        (response: AxiosResponse): any => {
+            removePending(response.config);
+            custom_options.loading && closeLoading(custom_options); // 关闭loading
+            // 对响应数据做点什么
+            if (custom_options.code_message_show && response.data && response.data.code !== 0) {
+                ElMessage({
+                    type: 'error',
+                    message: response.data.message,
+                });
+                return Promise.reject(response.data); // code不等于0, 页面具体逻辑就不执行了
+            }
+            return custom_options.reduct_data_format ? response.data : response;
+        },
+        async (error: AxiosError): Promise<never> => {
+            error.config && removePending(error.config);
+            custom_options.loading && closeLoading(custom_options); // 关闭loading
+            custom_options.error_message_show && httpErrorStatusHandle(error); // 处理错误状态码
+            return Promise.reject(error); // 错误继续返回给到具体页面
+        }
+    );
 
-	return service(axiosConfig);
+    return service(axiosConfig);
 }
 
 /**
@@ -87,80 +87,81 @@ export default function myAxios(axiosConfig: any, customOptions?: customOptionsT
  * @param {*} error
  */
 function httpErrorStatusHandle(error: any) {
-	// 设置一个变量 处理同一时间多个错误重复弹窗口
-	let tokenAbnormal: boolean = false;
-	// 处理被取消的请求
-	if (axios.isCancel(error)) return;
-	let message = '';
-	if (error && error.response) {
-		switch (error.response.status) {
-			case 302:
-				message = '接口重定向了！';
-				break;
-			case 400:
-				message = '参数不正确！';
-				break;
-			case 401:
-				if (!tokenAbnormal) {
-					tokenAbnormal = true;
-					// 弹出框
-					ElMessageBox.alert('你已被登出，请重新登录', '提示', { type: 'warning' })
-						.then(() => {
-							window.localStorage.clear(); // 清除本地存储
+    // 设置一个变量 处理同一时间多个错误重复弹窗口
+    let tokenAbnormal: boolean = false;
+    // 处理被取消的请求
+    if (axios.isCancel(error)) return;
+    let message = '';
+    if (error && error.response) {
+        switch (error.response.status) {
+            case 302:
+                message = '接口重定向了！';
+                break;
+            case 400:
+                message = '参数不正确！';
+                break;
+            case 401:
+                if (!tokenAbnormal) {
+                    tokenAbnormal = true;
+                    // 弹出框
+                    ElMessageBox.alert('你已被登出，请重新登录', '提示', {type: 'warning'})
+                        .then(() => {
+                            window.localStorage.clear(); // 清除本地存储
                             window.sessionStorage.clear(); // 清除临时存储
 
-							location.reload(); //刷新页面
-						})
-						.catch((): void => {});
-					// 设置定时器，确保下次异常时弹出框正常弹出
-					setTimeout(() => {
-						tokenAbnormal = false;
-					}, 3000);
-				}
-				break;
-			case 403:
-				message = '您没有权限操作！';
-				break;
-			case 404:
-				message = `请求地址出错: ${error.response.config.url}`;
-				break; // 在正确域名下
-			case 408:
-				message = '请求超时！';
-				break;
-			case 409:
-				message = '系统已存在相同数据！';
-				break;
-			case 500:
-				if (error.response?.data.message) message = error.response.data.message;
-				else message = '服务器内部错误！';
-				break;
-			case 501:
-				message = '服务未实现！';
-				break;
-			case 502:
-				message = '网关错误！';
-				break;
-			case 503:
-				message = '服务不可用！';
-				break;
-			case 504:
-				message = '服务暂时无法访问，请稍后再试！';
-				break;
-			case 505:
-				message = 'HTTP版本不受支持！';
-				break;
-			default:
-				message = '异常问题，请联系管理员！';
-				break;
-		}
-	}
-	if (error.message.includes('timeout')) message = '网络请求超时！';
-	if (error.message.includes('Network')) message = window.navigator.onLine ? '服务端异常！' : '您断网了！';
+                            location.reload(); //刷新页面
+                        })
+                        .catch((): void => {
+                        });
+                    // 设置定时器，确保下次异常时弹出框正常弹出
+                    setTimeout(() => {
+                        tokenAbnormal = false;
+                    }, 3000);
+                }
+                break;
+            case 403:
+                message = '您没有权限操作！';
+                break;
+            case 404:
+                message = `请求地址出错: ${error.response.config.url}`;
+                break; // 在正确域名下
+            case 408:
+                message = '请求超时！';
+                break;
+            case 409:
+                message = '系统已存在相同数据！';
+                break;
+            case 500:
+                if (error.response?.data.message) message = error.response.data.message;
+                else message = '服务器内部错误！';
+                break;
+            case 501:
+                message = '服务未实现！';
+                break;
+            case 502:
+                message = '网关错误！';
+                break;
+            case 503:
+                message = '服务不可用！';
+                break;
+            case 504:
+                message = '服务暂时无法访问，请稍后再试！';
+                break;
+            case 505:
+                message = 'HTTP版本不受支持！';
+                break;
+            default:
+                message = '异常问题，请联系管理员！';
+                break;
+        }
+    }
+    if (error.message.includes('timeout')) message = '网络请求超时！';
+    if (error.message.includes('Network')) message = window.navigator.onLine ? '服务端异常！' : '您断网了！';
 
-	ElMessage({
-		type: 'error',
-		message,
-	});
+    ElMessage({
+        type: 'error',
+        message,
+    });
 }
 
 /**
@@ -168,11 +169,11 @@ function httpErrorStatusHandle(error: any) {
  * @param {*} _options
  */
 function closeLoading(_options: any) {
-	if (_options.loading && LoadingInstance._count > 0) LoadingInstance._count--;
-	if (LoadingInstance._count === 0) {
-		LoadingInstance._target.close();
-		LoadingInstance._target = null;
-	}
+    if (_options.loading && LoadingInstance._count > 0) LoadingInstance._count--;
+    if (LoadingInstance._count === 0) {
+        LoadingInstance._target.close();
+        LoadingInstance._target = null;
+    }
 }
 
 /**
@@ -180,14 +181,14 @@ function closeLoading(_options: any) {
  * @param {*} config
  */
 function addPending(config: AxiosRequestConfig) {
-	const pendingKey = getPendingKey(config);
-	config.cancelToken =
-		config.cancelToken ||
-		new axios.CancelToken((cancel) => {
-			if (!pendingMap.has(pendingKey)) {
-				pendingMap.set(pendingKey, cancel);
-			}
-		});
+    const pendingKey = getPendingKey(config);
+    config.cancelToken =
+        config.cancelToken ||
+        new axios.CancelToken((cancel) => {
+            if (!pendingMap.has(pendingKey)) {
+                pendingMap.set(pendingKey, cancel);
+            }
+        });
 }
 
 /**
@@ -195,13 +196,13 @@ function addPending(config: AxiosRequestConfig) {
  * @param {*} config
  */
 function removePending(config: AxiosRequestConfig) {
-	const pendingKey = getPendingKey(config);
-	if (pendingMap.has(pendingKey)) {
-		const cancelToken = pendingMap.get(pendingKey);
-		// 如你不明白此处为什么需要传递pendingKey可以看文章下方的补丁解释
-		cancelToken(pendingKey);
-		pendingMap.delete(pendingKey);
-	}
+    const pendingKey = getPendingKey(config);
+    if (pendingMap.has(pendingKey)) {
+        const cancelToken = pendingMap.get(pendingKey);
+        // 如你不明白此处为什么需要传递pendingKey可以看文章下方的补丁解释
+        cancelToken(pendingKey);
+        pendingMap.delete(pendingKey);
+    }
 }
 
 /**
@@ -210,7 +211,7 @@ function removePending(config: AxiosRequestConfig) {
  * @returns
  */
 function getPendingKey(config: AxiosRequestConfig) {
-	let { url, method, params, data } = config;
-	// if (typeof data === 'string') data = JSON.parse(data); // response里面返回的config.data是个字符串对象
-	return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&');
+    let {url, method, params, data} = config;
+    // if (typeof data === 'string') data = JSON.parse(data); // response里面返回的config.data是个字符串对象
+    return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&');
 }

src/views/home/center-bottom.vue

@@ -27,7 +27,11 @@
             <TextTooltip :content="item.sourceChannel"></TextTooltip>
             <TextTooltip :content="item.title"></TextTooltip>
             <TextTooltip :content="item.acceptType"></TextTooltip>
-            <TextTooltip :content="item.hotspotName"></TextTooltip>
+            <!--            <TextTooltip :content="item.hotspotName"></TextTooltip>-->
+            <el-tooltip placement="top">
+              <template #content> {{ item.title }}</template>
+              <span>{{ item.hotspotName }}</span>
+            </el-tooltip>
             <TextTooltip :content="item.county"></TextTooltip>
             <TextTooltip :content="item.actualHandleOrgName"></TextTooltip>
           </div>

src/views/home/left-bottom.vue

@@ -125,7 +125,21 @@ const getData = async () => {
       title: {
         show: false
       },
-      tooltip: {},
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        },
+        formatter: function (params: any) {
+          let tar;
+          if (params[0].seriesIndex === 0) {
+            tar = params[0];
+          } else {
+            tar = params[1];
+          }
+          return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
+        }
+      },
       grid: {
         borderWidth: 0,
         top: '5%',

src/views/home/right-top.vue

@@ -12,7 +12,10 @@
           <span class="scroll-item-empty">{{ index }}</span>
           <span class="scroll-item-area">{{ item.areaName }}</span>
           <TextTooltip :content="item.title" className="scroll-item-title"></TextTooltip>
-          <TextTooltip :content="item.title" className="scroll-item-hotspot"></TextTooltip>
+          <el-tooltip placement="top">
+            <template #content> {{ item.title }}</template>
+            <span class="scroll-item-hotspot">{{ item.hotspotName }}</span>
+          </el-tooltip>
           <span class="scroll-item-num"> <CountUp :endVal="item.sumCount " :duration="2"/>次</span>
         </div>
       </vue3-seamless-scroll>

src/views/judicial/center-bottom.vue

@@ -3,7 +3,7 @@
     <div class="center_bottom-title flex">
       <div class="flex items-center">
         <img src="@/assets/img/home/title_arrow.png" alt="">
-        行政执法工单概览
+        今日行政执法工单概览
       </div>
     </div>
     <div class="center_bottom-content">

src/views/seats/left-bottom.vue

@@ -1,33 +1,33 @@
 <template>
-  <div class="left_bottom_wrap" >
-      <div class="left_number">
-          <div>
-            <span>登录坐席数量：</span>
-            <CountUp :endVal="loginCount"/>
-          </div>
-          <div>
-            <span>呼入接通数量：</span>
-            <CountUp :endVal="state.count.inOn"  />
-          </div>
-          <div>
-            <span>有效接通数量：</span>
-            <CountUp :endVal="state.count.validOn"  />
-          </div>
-          <div>
-            <span>未接通数量：</span>
-            <CountUp :endVal="state.count.inNoOn"  />
-          </div>
-          <div>
-            <span>呼出接通数量：</span>
-            <CountUp :endVal="state.count.outOn"  />
-          </div>
-          <div>
-            <span>队列挂断数量：</span>
-            <CountUp :endVal="state.count.inQueueNoOn"  />
-          </div>
+  <div class="left_bottom_wrap">
+    <div class="left_number">
+      <div>
+        <span>登录坐席数量：</span>
+        <CountUp :endVal="loginCount"/>
       </div>
+      <div>
+        <span>呼入接通数量：</span>
+        <CountUp :endVal="state.count.inOn"/>
+      </div>
+      <div>
+        <span>有效接通数量：</span>
+        <CountUp :endVal="state.count.validOn"/>
+      </div>
+      <div>
+        <span>未接通数量：</span>
+        <CountUp :endVal="state.count.inNoOn"/>
+      </div>
+      <div>
+        <span>呼出接通数量：</span>
+        <CountUp :endVal="state.count.outOn"/>
+      </div>
+      <div>
+        <span>队列挂断数量：</span>
+        <CountUp :endVal="state.count.inQueueNoOn"/>
+      </div>
+    </div>
     <div class="right_chart">
-      <v-chart class="chart" :option="option" />
+      <v-chart class="chart" :option="option"/>
     </div>
   </div>
 </template>
@@ -36,6 +36,7 @@ import {onMounted, reactive, ref, computed, onUnmounted, watch} from "vue";
 import mittBus from "@/utils/mitt";
 import CountUp from "@/components/count-up";
 import dayjs from "dayjs";
+
 const props = defineProps({
   data: {
     type: Array,
@@ -43,12 +44,13 @@ const props = defineProps({
   },
   content: {
     type: Object,
-    default: () => {},
+    default: () => {
+    },
   },
 });
 const option = ref({});
 const state = reactive<any>({
-  count:{
+  count: {
     inNoOn: 0,
     inOn: 0,
     inQueueNoOn: 0,
@@ -67,7 +69,7 @@ const setOption = async (newData: any) => {
       },
     },
     legend: {
-      data: ["呼入", "呼出",'呼出平均','呼入平均'],
+      data: ["呼入", "呼出", '呼出平均', '呼入平均'],
       textStyle: {
         color: "#fff",
       },
@@ -97,7 +99,7 @@ const setOption = async (newData: any) => {
     },
     yAxis: [
       {
-        splitLine: { show: false },
+        splitLine: {show: false},
         axisLine: {
           lineStyle: {
             color: "#fff",
@@ -108,7 +110,7 @@ const setOption = async (newData: any) => {
         },
       },
       {
-        splitLine: { show: false },
+        splitLine: {show: false},
         axisLine: {
           lineStyle: {
             color: "#fff",
@@ -183,7 +185,7 @@ const seatsList = ref<any>([]);
 const loginCount = computed(() => {
   return seatsList.value.filter((item: any) => item.state !== 'logout').length;
 });
-watch(()=>props.content,(val:any)=>{
+watch(() => props.content, (val: any) => {
   state.count = val.count[0];
   let data = {
     xData: [],
@@ -204,11 +206,11 @@ watch(()=>props.content,(val:any)=>{
   }, 100);
 });
 watch(
-  () => props.data,
-  (newData:any) => {
-    seatsList.value = newData;
-  },
-  { immediate: true }
+    () => props.data,
+    (newData: any) => {
+      seatsList.value = newData;
+    },
+    {immediate: true}
 );
 onMounted(() => {
   mittBus.on('SeatState', (res: any) => {
@@ -235,7 +237,6 @@ onMounted(() => {
       data.inAverageData.push(item.inAverag)
       data.outAverageData.push(item.outAverag)
     });
-    console.log(res, dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'))
     setTimeout(() => {
       setOption(data);
     }, 100);
@@ -254,19 +255,22 @@ onUnmounted(() => {
   height: 100%;
   display: flex;
   font-size: var(--el-font-size-base);
-  .left_number{
+
+  .left_number {
     margin: 20px 0;
     height: calc(100% - 40px);
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     min-width: 130px;
-    div{
+
+    div {
       display: flex;
       justify-content: space-between;
     }
   }
-  .right_chart{
+
+  .right_chart {
     flex: 1;
     height: 100%;
 

src/views/seats/left-center.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="top10">
-      <template v-if="data.length">
-        <div v-for="(item,index) in data" :key="index" class="item">
+    <template v-if="data.length">
+      <div v-for="(item,index) in data" :key="index" class="item">
         <span class="num" :class="'num'+index">
-          {{index+1}}
+          {{ index + 1 }}
         </span>
-          <span>
-          {{item.userName}}
+        <span>
+          {{ item.userName }}
         </span>
-          <CountUp :endVal="item.in" :duration="3"/>
-        </div>
-      </template>
+        <CountUp :endVal="item.in" :duration="3"/>
+      </div>
+    </template>
     <EmptyCom v-else></EmptyCom>
   </div>
 </template>
@@ -19,6 +19,7 @@ import {ref, onMounted, onUnmounted, watch} from "vue";
 import mittBus from "@/utils/mitt";
 import EmptyCom from "@/components/empty-com";
 import CountUp from "@/components/count-up";
+
 const data = ref([]);
 const props = defineProps({
   content: {
@@ -27,10 +28,10 @@ const props = defineProps({
   },
 });
 watch(
-  () => props.content,
-  (newData:any) => {
-    data.value = newData;
-  }
+    () => props.content,
+    (newData: any) => {
+      data.value = newData;
+    }
 );
 onMounted(() => {
   mittBus.on('BsSeatStateDataShowArea2', (res: any) => {
@@ -42,35 +43,39 @@ onUnmounted(() => {
 });
 </script>
 <style scoped lang="scss">
-.top10{
+.top10 {
   margin-top: 10px;
   height: calc(100% - 10px);
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
   transition: max-height .3s ease-in;
   transform-origin: 50% 0;
   animation: slide-down 0.3s ease-in;
- .item{
+
+  .item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 10px;
-    &:nth-child(even){
-      background-color: rgba(255,255,255,.1);
+
+    &:nth-child(even) {
+      background-color: rgba(255, 255, 255, .1);
     }
   }
-  .item{
+
+  .item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 30px;
     line-height: 30px;
     padding: 0 10px;
-    &:nth-child(even){
-      background-color: rgba(255,255,255,.1);
+
+    &:nth-child(even) {
+      background-color: rgba(255, 255, 255, .1);
     }
-    .num{
+
+    .num {
       display: inline-block;
       width: 30px;
       height: 20px;
@@ -79,7 +84,8 @@ onUnmounted(() => {
       color: #fff;
       background-color: var(--el-color-primary);
       border-radius: 5px;
-      &:before{
+
+      &:before {
         content: "";
         width: 0;
         height: 0;
@@ -90,7 +96,8 @@ onUnmounted(() => {
         left: 52px;
       }
     }
-    .num0{
+
+    .num0 {
       display: inline-block;
       width: 30px;
       height: 20px;
@@ -99,7 +106,8 @@ onUnmounted(() => {
       color: #fff;
       background-color: var(--el-color-danger);
       border-radius: 5px;
-      &:before{
+
+      &:before {
         content: "";
         width: 0;
         height: 0;
@@ -110,7 +118,8 @@ onUnmounted(() => {
         left: 52px;
       }
     }
-    .num1{
+
+    .num1 {
       display: inline-block;
       width: 30px;
       height: 20px;
@@ -119,7 +128,8 @@ onUnmounted(() => {
       color: #fff;
       background-color: var(--el-color-warning);
       border-radius: 5px;
-      &:before{
+
+      &:before {
         content: "";
         width: 0;
         height: 0;
@@ -130,7 +140,8 @@ onUnmounted(() => {
         left: 52px;
       }
     }
-    .num2{
+
+    .num2 {
       display: inline-block;
       width: 30px;
       height: 20px;
@@ -139,7 +150,8 @@ onUnmounted(() => {
       color: #fff;
       background-color: var(--el-color-success);
       border-radius: 5px;
-      &:before{
+
+      &:before {
         content: "";
         width: 0;
         height: 0;

src/views/seats/right.vue

@@ -16,6 +16,7 @@
 import {onMounted, ref, onUnmounted, watch} from "vue";
 import {getImageUrl} from "@/utils/tools";
 import mittBus from '@/utils/mitt';
+
 const props = defineProps({
   data: {
     type: Array,
@@ -38,11 +39,11 @@ const currentStatusText = (state: string) => {
 };
 const seatsList = ref<any>([])
 watch(
-  () => props.data,
-  (newData:any) => {
-    seatsList.value = newData;
-  },
-  { immediate: true }
+    () => props.data,
+    (newData: any) => {
+      seatsList.value = newData;
+    },
+    {immediate: true}
 );
 onMounted(() => {
   // 接收消息