reactor:封装websocket:

src/utils/ola_api.ts

@@ -1,8 +1,9 @@
-import {dutyOff} from '/@/api/public/wex';
+import { dutyOff } from '/@/api/public/wex';
 /**
  * @description 呼叫中心对接接口
  */
 import { ElMessage } from 'element-plus';
+
 export const ola: any = {
 	version: '2.0.1',
 	ws: undefined,
@@ -35,7 +36,7 @@ export const ola: any = {
 			}
 		} else {
 			// browser does not support websockets
-			ElMessage.error("您的浏览器不支持websocket!")
+			ElMessage.error('您的浏览器不支持websocket!');
 			if ('console' in window) {
 				console.log("you don't have websocket");
 			}
@@ -52,11 +53,13 @@ export const ola: any = {
 		ola.auth(ola._username, ola._password);
 	},
 
-	_onMessage: function (evt: any) { //获取消息
+	_onMessage: function (evt: any) {
+		//获取消息
 		const msg = JSON.parse(evt.data);
-		if(msg.event_type == 'command/reply' && msg.code !== 200){ //授权失败 调用签出接口
-			ElMessage.error(msg.text)
-			dutyOff()
+		if (msg.event_type == 'command/reply' && msg.code !== 200) {
+			//授权失败 调用签出接口
+			ElMessage.error(msg.text);
+			dutyOff();
 		}
 		if (msg.event_name == 'command/reply' && msg.code == 200) {
 			ola.ws.onmessage = this.onMessage;
@@ -69,8 +72,8 @@ export const ola: any = {
 		return ola.send({ cmd: 'auth', args: { username, password, accept: 'application/json' } });
 	},
 
-	get_agent_state: function (extn:any) {
-		return this.send({ action: 'api', cmd: 'get_agent_state', args: { extn} });
+	get_agent_state: function (extn: any) {
+		return this.send({ action: 'api', cmd: 'get_agent_state', args: { extn } });
 	},
 
 	get_trunk_state: function () {
@@ -84,9 +87,9 @@ export const ola: any = {
 		return ola.send({ action: 'api', cmd: 'login', args: args });
 	},
 
-	logout: function (extn?:string) {
+	logout: function (extn?: string) {
 		const extns = extn || this._extn;
-		return this.send({ action: 'api', cmd: 'logout', args: { extn:extns } });
+		return this.send({ action: 'api', cmd: 'logout', args: { extn: extns } });
 	},
 
 	collect_dtmf: function (extn: any, soundfile: any) {
@@ -112,7 +115,7 @@ export const ola: any = {
 		return this.send({ action: 'api', cmd: 'go_ready', args: { extn: this._extn } });
 	},
 
-	go_ready2: function (extn:any) {
+	go_ready2: function (extn: any) {
 		return this.send({ action: 'api', cmd: 'go_ready', args: { extn: extn } });
 	},
 
@@ -120,7 +123,7 @@ export const ola: any = {
 		return this.send({ action: 'api', cmd: 'go_break', args: { extn: this._extn, reason: reason } });
 	},
 
-	go_break2: function (extn:any) {
+	go_break2: function (extn: any) {
 		return this.send({ action: 'api', cmd: 'go_break', args: { extn: extn, reason: '' } });
 	},
 
@@ -322,9 +325,10 @@ export const ola: any = {
 		return ola.ws.readyState;
 	},
 
-	send: function (msg: any) { //发送消息
-		if(!ola.ws) {
-			ElMessage.warning("请先签入")
+	send: function (msg: any) {
+		//发送消息
+		if (!ola.ws) {
+			ElMessage.warning('请先签入');
 			return;
 		}
 		msg.uuid = ola.next_uuid();
@@ -332,7 +336,7 @@ export const ola: any = {
 		return msg.uuid;
 	},
 
-	merge: function (target: { [x: string]: any; }, additional: { [x: string]: any; hasOwnProperty: (arg0: string) => any; }) {
+	merge: function (target: { [x: string]: any }, additional: { [x: string]: any; hasOwnProperty: (arg0: string) => any }) {
 		for (const i in additional) {
 			if (additional.hasOwnProperty(i)) {
 				target[i] = additional[i];

src/utils/websocket.ts

@@ -1,107 +1,133 @@
-import { ElNotification as message } from 'element-plus';
-import { Session } from '/@/utils/storage';
-
-const websocket: any = {
-	websocket: null,
-	connectURL: import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL,
-	// 开启标识
-	socket_open: false,
-	// 心跳timer
-	hearBeat_timer: null,
-	// 心跳发送频率
-	hearBeat_interval: 2 * 1000,
-	// 是否自动重连
-	is_reconnect: true,
-	// 重连次数
-	reconnect_count: 3,
-	// 已发起重连次数
-	reconnect_current: 1,
-	// 重连timer
-	reconnect_timer: null,
-	// 重连频率
-	reconnect_interval: 5 * 1000,
-	init: (receiveMessage: Function | null) => {
-		if (!('WebSocket' in window)) {
-			message.warning('浏览器不支持WebSocket');
-			return null;
-		}
-		// const token = Session.get('token');
-		// if (!token) {
-		// 	message.warning('websocket认证失败');
-		// 	return null;
-		// }
-		const wsUrl = `${import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL}`;
-		websocket.websocket = new WebSocket(wsUrl);
-		websocket.websocket.onmessage = (e: any) => {
-			if (receiveMessage) {
-				receiveMessage(e);
-			}
+import { onUnmounted } from 'vue';
+
+interface SocketOptions {
+	heartbeatInterval?: number;
+	reconnectInterval?: number;
+	maxReconnectAttempts?: number;
+}
+
+class Socket {
+	url: string;
+	ws: WebSocket | null = null;
+	opts: SocketOptions;
+	reconnectAttempts: number = 0;
+	listeners: { [key: string]: Function[] } = {};
+	heartbeatInterval: number | null = null;
+
+	constructor(url: string, opts: SocketOptions = {}) {
+		this.url = url;
+		this.opts = {
+			heartbeatInterval: 10 * 1000, // 心跳间隔
+			reconnectInterval: 5 * 1000, // 重连间隔
+			maxReconnectAttempts: 5, // 最大重连次数
+			...opts,
 		};
-		websocket.websocket.onclose = (e: any) => {
-			websocket.socket_open = false;
-			// 需要重新连接
-			if (websocket.is_reconnect) {
-				websocket.reconnect_timer = setTimeout(() => {
-					// 超过重连次数
-					if (websocket.reconnect_current > websocket.reconnect_count) {
-						clearTimeout(websocket.reconnect_timer);
-						websocket.is_reconnect = false;
-						return;
-					}
-					// 记录重连次数
-					websocket.reconnect_current++;
-					websocket.reconnect();
-				}, websocket.reconnect_interval);
+
+		this.init();
+	}
+
+	init() {
+		this.ws = new WebSocket(this.url);
+
+		this.ws.onopen = this.onOpen.bind(this);
+		this.ws.onmessage = this.onMessage.bind(this);
+		this.ws.onerror = this.onError.bind(this);
+		this.ws.onclose = this.onClose.bind(this);
+	}
+
+	onOpen(event: Event) {
+		this.startHeartbeat();
+		this.emit('open', event);
+	}
+
+	onMessage(event: MessageEvent) {
+		this.emit('message', event);
+	}
+
+	onError(event: Event) {
+		console.error('WebSocket error:', event);
+		this.emit('error', event);
+	}
+
+	onClose(event: CloseEvent) {
+		this.stopHeartbeat();
+		this.emit('close', event);
+
+		// @ts-ignore
+		if (this.reconnectAttempts < this.opts.maxReconnectAttempts) {
+			setTimeout(() => {
+				this.reConnect();
+			}, this.opts.reconnectInterval);
+		}
+	}
+
+	reConnect() {
+		this.reconnectAttempts++;
+		this.init();
+	}
+
+	startHeartbeat() {
+		if (!this.opts.heartbeatInterval) return;
+		this.heartbeatInterval = window.setInterval(() => {
+			if (this.ws?.readyState === WebSocket.OPEN) {
+				this.send({
+					id: '',
+					type: 2,
+					from: '',
+					to: 'sys',
+					timestamps: 1,
+					body: 'PING',
+				});
 			}
-		};
-		// 连接成功
-		websocket.websocket.onopen = function () {
-			websocket.socket_open = true;
-			websocket.is_reconnect = true;
-			// 开启心跳
-			websocket.heartbeat();
-		};
-		// 连接发生错误
-		websocket.websocket.onerror = function () {};
-	},
-	heartbeat: () => {
-		websocket.hearBeat_timer && clearInterval(websocket.hearBeat_timer);
-
-		websocket.hearBeat_timer = setInterval(() => {
-			let data = {
-				token: Session.get('token'),
-			};
-			websocket.send(data);
-		}, websocket.hearBeat_interval);
-	},
-	send: (data: { token: any }, callback = null) => {
-		// 开启状态直接发送
-		if (websocket.websocket.readyState === websocket.websocket.OPEN) {
-			websocket.websocket.send(JSON.stringify(data));
-			// @ts-ignore
-			callback && callback();
+		}, this.opts.heartbeatInterval);
+	}
+
+	stopHeartbeat() {
+		if (this.heartbeatInterval) {
+			clearInterval(this.heartbeatInterval);
+			this.heartbeatInterval = null;
+		}
+	}
+
+	send(data: any) {
+		if (this.ws?.readyState === WebSocket.OPEN) {
+			this.ws.send(JSON.stringify(data));
 		} else {
-			clearInterval(websocket.hearBeat_timer);
-			message({
-				type: 'warning',
-				message: 'socket链接已断开',
-				duration: 1000,
-			});
+			console.error('WebSocket is not open. Cannot send:', data);
 		}
-	},
-	close: () => {
-		websocket.is_reconnect = false;
-		websocket.websocket.close();
-		websocket.websocket = null;
-	},
-	/**
-	 * 重新连接
-	 */
-	reconnect: () => {
-		if (websocket.websocket && !websocket.is_reconnect) {
-			websocket.close();
+	}
+
+	on(event: string, callback: Function) {
+		if (!this.listeners[event]) {
+			this.listeners[event] = [];
+		}
+		this.listeners[event].push(callback);
+	}
+
+	off(event: string) {
+		if (this.listeners[event]) {
+			delete this.listeners[event];
 		}
-		websocket.init(null);
-	},
-};
-export default websocket;
+	}
+
+	emit(event: string, data: any) {
+		this.listeners[event]?.forEach((callback) => callback(data));
+	}
+}
+
+export function useSocket(url: string, opts?: SocketOptions) {
+	const socket = new Socket(url, opts);
+	onUnmounted(() => {
+		socket.off('open');
+		socket.off('message');
+		socket.off('error');
+		socket.off('close');
+	});
+
+	return {
+		socket,
+		send: socket.send.bind(socket),
+		on: socket.on.bind(socket),
+		off: socket.off.bind(socket),
+	};
+}

src/views/statistics/call/seats.vue

@@ -62,7 +62,7 @@
 					width="130"
 				></el-table-column>
 				<el-table-column prop="inHanguped" label="呼入超时未接" show-overflow-tooltip align="center" sortable="custom" width="140"></el-table-column>
-				<el-table-column prop="inAnsweredRate" label="接通率" show-overflow-tooltip align="center" sortable="custom" width="130">
+				<el-table-column prop="inAnsweredRate" label="接通率" show-overflow-tooltip align="center" sortable="custom">
 					<template #default="{ row }">
 						<span>{{ row.inAnsweredRate }}%</span>
 					</template>
@@ -79,10 +79,13 @@
 					prop="inAvailableAnswer"
 					label="有效接通率"
 					show-overflow-tooltip
-					width="130"
 					align="center"
 					sortable="custom"
-				></el-table-column>
+				>
+          <template #default="{ row }">
+            <span>{{ row.inAvailableAnswer }}%</span>
+          </template>
+        </el-table-column>
 				<el-table-column
 					prop="inHangupImmediateWhenAnswered"
 					label="接通秒挂"
@@ -101,7 +104,7 @@
 				></el-table-column>
 				<el-table-column prop="outTotal" label="呼出总量" show-overflow-tooltip align="center" sortable="custom" width="130"></el-table-column>
 				<el-table-column prop="outAnswered" label="呼出接通量" show-overflow-tooltip align="center" sortable="custom" width="130"></el-table-column>
-				<el-table-column prop="outAnsweredRate" label="呼出接通率" show-overflow-tooltip align="center" sortable="custom" width="130">
+				<el-table-column prop="outAnsweredRate" label="呼出接通率" show-overflow-tooltip align="center" sortable="custom">
 					<template #default="{ row }">
 						<span>{{ row.outAnsweredRate }}%</span>
 					</template>
@@ -185,18 +188,18 @@ const handleSelectionChange = (val: any[]) => {
 const getSummaries = (param: any) => {
 	const { columns, data } = param;
 	const sums: string[] = [];
-	columns.forEach((column, index) => {
+	columns.forEach((column: { property: string; }, index: number) => {
 		if (index === 0) {
 			sums[index] = '合计';
 			return;
 		}
-		const values = data.map((item) => Number(item[column.property]));
-		if (['inAnsweredRate', 'outAnsweredRate'].includes(column.property)) {
+		const values = data.map((item: { [x: string]: any; }) => Number(item[column.property]));
+		if (['inAnsweredRate', 'outAnsweredRate','inAvailableAnswer'].includes(column.property)) {
 			//百分比不能计算
 			sums[index] = '';
 			return '';
-		} else if (!values.every((value) => Number.isNaN(value))) {
-			sums[index] = `${values.reduce((prev, curr) => {
+		} else if (!values.every((value: unknown) => Number.isNaN(value))) {
+			sums[index] = `${values.reduce((prev: any, curr: any) => {
 				const value = Number(curr);
 				if (!Number.isNaN(value)) {
 					return prev + curr;

src/views/todo/delay/index.vue

@@ -53,10 +53,10 @@
 							</span>
 						</template>
 					</el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip  width="150"></el-table-column>
+					<el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip width="150"></el-table-column>
 					<el-table-column label="接办时间" show-overflow-tooltip width="170">
 						<template #default="{ row }">
 							<span>{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
@@ -67,7 +67,7 @@
 							<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column prop="creatorOrgName" label="延期申请部门" show-overflow-tooltip width="120"></el-table-column>
+					<el-table-column prop="creatorOrgName" label="延期申请部门" show-overflow-tooltip width="150"></el-table-column>
 					<el-table-column prop="creatorName" label="延期申请人" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="delayNum" label="延期申请时限" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="delayUnitText" label="延期申请单位" show-overflow-tooltip width="120"></el-table-column>
@@ -110,10 +110,10 @@
 							</span>
 						</template>
 					</el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip   width="150"></el-table-column>
+					<el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip   width="150"></el-table-column>
 					<el-table-column label="接办时间" show-overflow-tooltip width="170">
 						<template #default="{ row }">
 							<span>{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
@@ -124,7 +124,7 @@
 							<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column prop="creatorOrgName" label="延期申请部门" show-overflow-tooltip width="120"></el-table-column>
+					<el-table-column prop="creatorOrgName" label="延期申请部门" show-overflow-tooltip width="150"></el-table-column>
 					<el-table-column prop="creatorName" label="延期申请人" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="delayNum" label="延期申请时限" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="delayUnitText" label="延期申请单位" show-overflow-tooltip width="120"></el-table-column>

src/views/todo/discern/index.vue

@@ -96,7 +96,7 @@
 							<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
 						</template>
 					</el-table-column>
-					<el-table-column prop="statusText" label="甄别状态" show-overflow-tooltip></el-table-column>
+					<el-table-column prop="statusText" label="甄别状态" show-overflow-tooltip width="120"></el-table-column>
 					<el-table-column prop="currentStepName" label="当前节点" show-overflow-tooltip width="150"></el-table-column>
 					<el-table-column prop="actualHandlerName" label="当前审批人" show-overflow-tooltip width="150"></el-table-column>
 					<el-table-column label="工单标题" show-overflow-tooltip width="300">

src/views/todo/seats/accept/Voice-assistant.vue

@@ -36,7 +36,7 @@
 							</div>
 						</el-scrollbar>
 						<div class="flex-end mt20">
-							<el-button @click="closeSearch" class="default-button"> 取消 </el-button>
+							<el-button @click="closeSearch" class="default-button"> 取消</el-button>
 							<el-button type="primary" @click="fillSingle">一键填单</el-button>
 						</div>
 					</div>
@@ -51,15 +51,10 @@
 </template>
 <script setup lang="ts">
 import { nextTick, onMounted, ref, watch } from 'vue';
-import websocket from '/@/utils/websocket';
+import { useSocket } from '/@/utils/websocket';
 import { ElMessageBox, ElNotification } from 'element-plus';
 import { getImageUrl } from '/@/utils/tools';
 
-// 设置初始化，防止刷新时恢复默认
-onMounted(() => {
-	//websocket 模块
-	websocket.init(wsReceive);
-});
 // 消息列表
 const messageList = ref([
 	{
@@ -149,18 +144,46 @@ const recognizeList = ref([
 		content: '我可以帮你查询天气',
 	},
 ]);
-
-const wsReceive = (message: any) => {
-	const data = JSON.parse(message.data);
-	if (data.contentType === 'SYSTEM') {
-		ElNotification({
-			title: '系统消息',
-			message: data.content,
-			type: 'success',
-			position: 'bottom-right',
-			duration: 5000,
+// 设置初始化，防止刷新时恢复默认
+onMounted(() => {
+	const { socket, send, on, off } = useSocket(import.meta.env.VITE_VOICE_ASSISTANT_SOCKET_URL);
+	on('open', () => {
+		console.log('坐席辅助链接已打开');
+		send({
+			id: '',
+			type: 1,
+			from: '',
+			to: 'sys',
+			timestamps: 1,
+			body: '',
 		});
+	});
+	on('message', wsReceive); // 接收消息
+	on('error', onError); // 错误
+	on('close', onClose); // 关闭
+});
+const wsReceive = (message: any) => {
+	try {
+		const data = JSON.parse(message.data);
+		console.log('坐席辅助收到消息：', data);
+	} catch (error) {
+		console.log('坐席辅助收到消息', message);
 	}
+	// if (data.contentType === 'SYSTEM') {
+	// 	ElNotification({
+	// 		title: '系统消息',
+	// 		message: data.content,
+	// 		type: 'success',
+	// 		position: 'bottom-right',
+	// 		duration: 5000,
+	// 	});
+	// }
+};
+const onError = (error: any) => {
+	console.log('坐席辅助链接错误', error);
+};
+const onClose = () => {
+	console.log('坐席辅助链接关闭');
 };
 const scrollbarRef = ref<RefType>();
 const chatBoxRef = ref<RefType>();
@@ -206,18 +229,22 @@ watch(messageList.value, (val) => {
 	width: 100%;
 	height: 100%;
 	position: relative;
+
 	.chat-box {
 		width: 100%;
 		padding-bottom: 50px;
+
 		.user {
 			justify-content: flex-end;
 		}
+
 		.chat-item {
 			word-break: break-all;
 			position: relative;
 			color: var(--el-color-white);
 			margin: 30px 10px 10px 10px;
 			display: flex;
+
 			.agent {
 				&-content {
 					border-radius: var(--el-border-radius-base);
@@ -227,6 +254,7 @@ watch(messageList.value, (val) => {
 					max-width: 400px;
 					box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.3);
 					margin-left: 60px;
+
 					&::after {
 						position: absolute;
 						content: '';
@@ -239,12 +267,14 @@ watch(messageList.value, (val) => {
 						border-bottom: 10px solid transparent;
 					}
 				}
+
 				&-name {
 					font-size: var(--el-font-size-base);
 					color: var(--el-text-color-regular);
 					margin-bottom: 5px;
 					margin-left: 65px;
 				}
+
 				&-date {
 					font-size: var(--el-font-size-extra-small);
 					color: var(--el-text-color-placeholder);
@@ -252,6 +282,7 @@ watch(messageList.value, (val) => {
 					bottom: -20px;
 					left: 65px;
 				}
+
 				&-avatar {
 					width: 40px;
 					height: 40px;
@@ -261,6 +292,7 @@ watch(messageList.value, (val) => {
 					top: calc(50% + 0px);
 				}
 			}
+
 			.user {
 				&-content {
 					border-radius: var(--el-border-radius-base);
@@ -271,6 +303,7 @@ watch(messageList.value, (val) => {
 					max-width: 400px;
 					box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.3);
 					margin-right: 60px;
+
 					&::after {
 						position: absolute;
 						content: '';
@@ -283,6 +316,7 @@ watch(messageList.value, (val) => {
 						border-bottom: 10px solid transparent;
 					}
 				}
+
 				&-name {
 					font-size: var(--el-font-size-base);
 					color: var(--el-text-color-regular);
@@ -290,6 +324,7 @@ watch(messageList.value, (val) => {
 					text-align: right;
 					margin-right: 65px;
 				}
+
 				&-date {
 					font-size: var(--el-font-size-extra-small);
 					color: var(--el-text-color-placeholder);
@@ -297,6 +332,7 @@ watch(messageList.value, (val) => {
 					bottom: -20px;
 					right: 65px;
 				}
+
 				&-avatar {
 					width: 40px;
 					height: 40px;
@@ -308,11 +344,13 @@ watch(messageList.value, (val) => {
 			}
 		}
 	}
+
 	.recognize-box {
 		position: absolute;
 		bottom: 0;
 		width: 100%;
 		background-color: var(--el-color-white);
+
 		.transition-box {
 			position: absolute;
 			bottom: 0;
@@ -321,16 +359,19 @@ watch(messageList.value, (val) => {
 			background-color: var(--el-color-primary-light-9);
 			border-radius: var(--el-border-radius-base);
 			padding: 10px;
+
 			&-close {
 				position: absolute;
 				right: 10px;
 				top: 10px;
 			}
+
 			&-title {
 				border-bottom: var(--el-border);
 				border-color: var(--el-color-info);
 				padding-bottom: 10px;
 			}
+
 			.transition-box-content {
 				border: var(--el-border);
 				border-radius: var(--el-border-radius-base);
@@ -338,14 +379,17 @@ watch(messageList.value, (val) => {
 				margin-top: 10px;
 				height: 180px !important;
 				padding: 10px;
+
 				.transition-box-content-item {
 					display: flex;
 					align-items: center;
 					margin-bottom: 10px;
+
 					.transition-box-content-item-title {
 						width: 75px;
 						margin-right: 3px;
 					}
+
 					.transition-box-content-item-content {
 						flex: 1;
 					}

src/views/todo/seats/index.vue

@@ -74,7 +74,7 @@
 						</template>
 					</el-table-column>
 					<el-table-column prop="acceptType" label="受理类型" show-overflow-tooltip width="120"></el-table-column>
-					<el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText" width="100"></el-table-column>
+					<el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText"></el-table-column>
 					<el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip  width="120"></el-table-column>
 					<el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip width="100"></el-table-column>
 					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="150">

src/views/todo/supervise/index.vue

@@ -31,7 +31,7 @@
 					</template>
 				</el-table-column>
 				<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
+				<el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip width="120"></el-table-column>
 				<el-table-column width="100" label="省/市工单" prop="isProvince">
 					<template #default="{ row }">
 						<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>