rax-medical/src/views/remote-manage/remote-control.vue

<template>
	<div class="remote-box" id="screenBox">
		<div class="main-box">
			<div class="left-box">
				<h3>{{ useRemoteStore().getCurrentRemote().title }}</h3>
				<chart-line ref="chartDom1" class="chart-line" :names="['BIS', 'HR']"
					:chartData="featureTable"></chart-line>
				<chart-line ref="chartDom2" class="chart-line" :names="['SBP', 'DBP']"
					:chartData="featureTable"></chart-line>
				<chart-line ref="chartDom3" class="chart-line" :names="['SPO2', 'TEMP']"
					:chartData="featureTable"></chart-line>
				<chart-ecg ref="chartDom4" class="chart-ecg" :chartData="featureTable"></chart-ecg>

			</div>
			<div class="center-box">
				<div class="body-box">
					<div class="body-img">
						<img src="@/assets/imgs/main_body.png" style="width: 100%;height: 100%;" />
						<img class="lung-img" :class="{ 'shake_1': lungAlarm }" :src="lungAlarm ? imgLungAlarm : imgLung">
						<img class="heart-img" :class="{ 'shake_1': heartAlarm }"
							:src="heartAlarm ? imgHeartAlarm : imgHeart">
					</div>

				</div>
				<div class="btn-box">
					<el-button class="start-btn" color="#F80000" @click="getTableData(!isStart)">{{ isStart ? '终止' : '开始'
					}}</el-button>
					<div class="right-btn-box">
						<el-button :class="{ 'active': isAIDose }" size="small" @click="getTableData(true)">AI给药</el-button>
						<el-button :class="{ 'active': !isAIDose }" size="small"
							@click="getTableData(false)">人工给药</el-button>
					</div>
				</div>
			</div>
			<div class="right-box">
				<div class="top-btn-box">
					<div class="top-left-btn-box">
						<el-select v-model="database" filterable placeholder="Select" style="width: 100%;"
							@change="selectDatabase">
							<el-option v-for="item in databaseOptions" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
						<el-button color="#C77000" @click="viewPatientInfo">患者信息</el-button>
						<el-button color="#C77000">已连接</el-button>
						<el-button color="#C77000">机器人运行正常</el-button>
					</div>
					<el-button color="#e0e0e0" @click="backRemote"><el-icon>
							<Back />
						</el-icon> 返回</el-button>
				</div>
				<div class="monitoring-message">
					<div class="left-box">
						<span class="unusual-title">异常信息</span>
						<ul ref="unusualMsg" class="unusual-box">
							<li v-for="item in unusual" :key="item">{{ item }}</li>
						</ul>
					</div>
					<div class="right-box">
						<div class="video-box" @click="playPause">
							<div class="icon-box">
								<el-icon v-if="isVideoPlay">
									<VideoPause />
								</el-icon>
								<el-icon v-else>
									<VideoPlay />
								</el-icon>
							</div>
							<!--  poster="@/assets/imgs/video_bck.png" -->
							<video ref="liveVideo">
								<source src="@/assets/medical.mp4" type="video/mp4" />
							</video>
						</div>
						<div class="message-box">
							<ul ref="msgLog" class="message-log">
								<li v-for="(item, index) in mssageList" :key="'msg-log-' + index"
									:class="{ 'align-right': item.user === userName }">
									<span>{{ item.msg }}</span>
								</li>
							</ul>
							<div class="send-box">
								<el-input v-model="msgVal" placeholder="请输入消息" />
								<el-button color="#006080" @click="sendMsg">发送消息</el-button>
							</div>
						</div>
					</div>
				</div>
				<div class="table-box">
					<el-table :data="tableData" height="100%" style="width: 100%">
						<el-table-column prop="num" label="票号" width="40" align="center" />
						<el-table-column prop="name" label="药物名称" align="center" />
						<el-table-column prop="speed" label="速度(ml/h)" width="100" />
						<el-table-column prop="total" label="累计药量(ml)" width="100">
							<template #default="scope">—</template>
						</el-table-column>
						<el-table-column prop="state" label="工作状态" width="70" align="center" />
						<el-table-column label="特殊情况人为干预" align="center">
							<template #default="scope">
								<div class="table-btn-box">
									<el-button size="small" color="#006080" @click="tableItemPlus(scope)"><el-icon>
											<Plus />
										</el-icon></el-button>
									<el-button size="small" color="#006080" :disabled="scope.row.speed <= 0"
										@click="tableItemMinus(scope)"><el-icon>
											<Minus />
										</el-icon></el-button>
									<el-button size="small" color="#006080" @click="tableItemConfirm(scope)"
										:disabled="tableDataStore[scope.$index].speed === scope.row.speed">确定</el-button>
									<el-button size="small" color="#006080" @click="tableItemCancel(scope)"
										:disabled="tableDataStore[scope.$index].speed === scope.row.speed">取消</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>

		<el-dialog v-model="setDatabaseDialog" title="请选择需要查询的病人" width="300px" align-center>
			<el-select v-model="database" filterable placeholder="Select" style="width: 100%;">
				<el-option v-for="item in databaseOptions" :key="item.value" :label="item.label" :value="item.value" />
			</el-select>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="setDatabaseDialog = false">取消</el-button>
					<el-button type="primary" @click="setDatabase">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="isPatientDialog" title="患者信息" width="40%"><PatientsForm ref="patientsFormRef" type="view" @close="isPatientDialog = false" /></el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus';
import { useRemoteStore } from '@/stores/remote-info-store'
import { dateFormater } from '@/utils/date-util';
import { post } from "@/axios/index";
import chartLine from './chart/chart-line.vue';
import chartEcg from './chart/chart-ecg.vue';
import PatientsForm from '@/views/patients-manage/form/patients-form.vue'
import imgLung from '@/assets/imgs/lung.png';
import imgHeart from '@/assets/imgs/heart.png';
import imgLungAlarm from '@/assets/imgs/lung_alarm.png';
import imgHeartAlarm from '@/assets/imgs/heart_alarm.png';


const router = useRouter()
const route = useRoute()

const medicineCustom: any[] = [
	{ name: '丙泊酚', plus: 0.5, total: 50 },
	{ name: '舒芬太尼', plus: 1, total: 100 },
	{ name: '瑞芬太尼', plus: 0.05, total: 5 },
	{ name: '顺阿曲库胺', plus: 0.02, total: 2 },
	{ name: '尼卡地平', plus: 1, total: 100 },
	{ name: '艾司洛尔', plus: 1, total: 100 },
	{ name: '麻黄素', plus: 1, total: 100 },
	{ name: '阿托品', plus: 1, total: 100 },
	{ name: '罗库溴铵', plus: 0.1, total: 10 }
];
let featureTimer = 0;
let ecgTimer = 0;
let aiFlagTimer = 0;
let medicineTimer = 0;
const currentRemote = useRemoteStore().getCurrentRemote()

const chartDom1 = ref(),
	chartDom2 = ref(),
	chartDom3 = ref(),
	chartDom4 = ref(),
	liveVideo = ref(),
	msgLog = ref(),
	unusualMsg = ref(),
	patientsFormRef = ref();

const isPatientDialog = ref(false) 
const database = ref('');
const databaseOptions = ref([] as { value: string, label: string }[]);
const messageSum = ref(10);
const userName = ref('admin');
const setDatabaseDialog = ref(false);
const featureTable = ref([] as any[]);
let chartNowData = reactive({ ID: 0 });
const lungAlarm = ref(false); // 肺部警告
const heartAlarm = ref(false); // 心脏警告
const isStart = ref(false); // 是否开始
const isAIDose = ref(false); // 是否AI给药
const isVideoPlay = ref(false); // 视频是否播放
const videoSrc = ref('https://www.runoob.com/try/demo_source/mov_bbb.mp4');
const mssageList = ref([] as any);
const msgVal = ref('');
const unusual = ref([] as any);
const tableData = ref([] as any[]);
const tableDataStore = ref([] as any[]);

getDatabases();
onMounted(() => {
	if(currentRemote.isRemote) {
	
	}else{
		router.replace('/remote-manage/remote-manage')
		return
	}
	msgLogScrollBottom();
	getChartData(); // 定时任务
	getAIFlag(); // 定时任务
	getMedicine(); // 定时任务
	initScale();
	
});

function initData() {
	lungAlarm.value = false;
	heartAlarm.value = false;
	isStart.value = false;
	isAIDose.value = false;
	unusual.value = [];
	mssageList.value = [];
	tableData.value = [];
	tableDataStore.value = [];
    const currentRemote = useRemoteStore().getCurrentRemote() // 当前远程连接

	getFeatureTable();
	getMssageLog();
	getTableData(isAIDose.value);
	try {
		msgLogScrollBottom();
	} catch (error) { }

}
// AIFlagTable 表2秒获取一次
function getAIFlag() {
	let isRunTimer = true;
	clearInterval(aiFlagTimer);
	aiFlagTimer = setInterval(() => {
		if (isRunTimer) {
			isRunTimer = false;
			post('/getaiflag', { database: database.value, start: 0, end: 1 }, (res: any) => {
				if (res.status === 200 && res.data.length > 0) {
					const flag = Boolean(res.data[0].Flag);
					if (isAIDose.value !== flag) getTableData(Boolean(res.data[0].Flag));
				}
				isRunTimer = true;
			});
		}
	}, 2000);
}
function setTableData(res: any) {
	if (res.data.length > 0) {
		let i = 0;
		const ary: any = [];
		for (let key in res.data[0]) {
			if (key !== 'ID' && key !== 'Phase' && key !== 'Time' && key !== 'TIME') {
				i++;
				ary.push({ Phase: res.data[0].Phase, num: i, name: key, speed: res.data[0][key], total: medicineCustom.find(o => o.name === key)?.total, state: '正常' });
			}
		}
		tableData.value = ary;

	} else {
		const defaultMedicine: string[] = ['丙泊酚', '舒芬太尼', '瑞芬太尼', '顺阿曲库胺', '尼卡地平', '艾司洛尔', '麻黄素', '阿托品'];
		const ary: any = [];
		defaultMedicine.forEach((item, index) => {
			ary.push({ Phase: 1, num: index + 1, name: item, speed: 0, total: medicineCustom.find(o => o.name === item)?.total, state: '正常' });
		});
		tableData.value = ary;
	}
	tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
}
// AIMedicineTable、DoctorMedicineTable 表2秒获取一次
function getMedicine() {
	let isRunTimer = true;
	clearInterval(medicineTimer);
	setInterval(() => {
		if (isRunTimer && JSON.stringify(tableDataStore) === JSON.stringify(tableData) && isAIDose.value) {
			isRunTimer = false;
			const url = isAIDose.value ? '/getaimedicine' : '/getdoctormedicine';
			post(url, { database: database.value, start: 0, end: 1 }, (res: any) => {
				if (res.status === 200) {
					setTableData(res);
				}
				isRunTimer = true;
			});
		}
	}, 2000);
}
// FeatureTable 表2秒获取一次
function getChartData() {
	let isRunTimer = true;
	clearInterval(featureTimer);
	clearInterval(ecgTimer);
	setInterval(() => {
		if (isRunTimer) {
			getData()
		}
	}, 2000);
	setInterval(() => {
		try {
			chartDom4.value.updateChart(0, new Date());
		} catch (error) { }
	}, 1000);
	function getData() {
		isRunTimer = false;
		post('/getfeature', { database: database.value, start: 0, end: 1 }, (res: any) => {
			const obj = (res.data && res.data[0]) || {};
			if (obj.ID !== chartNowData.ID) {
				chartNowData = obj;
				const isHR = obj.HR >= 50 && obj.HR <= 80;
				const isSBP = obj.SBP >= 90 && obj.SBP <= 120;
				const isDBP = obj.DBP >= 60 && obj.DBP <= 90;
				// const isST = obj.ST >= -0.2 && obj.ST <= 0.2;
				if (!isHR) unusualUpDate('心率异常');
				if (!isSBP) unusualUpDate('收缩压异常');
				if (!isDBP) unusualUpDate('舒张异常');
				// if (!isST) unusualUpDate('心电图ST段变异度异常');
				lungAlarm.value = Boolean(!isSBP || !isDBP);
				// heartAlarm.value = Boolean(!isHR || !isST);
				heartAlarm.value = Boolean(!isHR);
				chartDom1.value.updateChart([obj.BIS, obj.HR], obj.Time || obj.TIME);
				chartDom2.value.updateChart([obj.SBP, obj.DBP], obj.Time || obj.TIME);
				chartDom3.value.updateChart([obj.SPO2, obj.TEMP], obj.Time || obj.TIME);
				// chartDom4.value.updateChart(obj.ST, obj.Time || obj.TIME);
			}
			isRunTimer = true;
		});
	}
}
function getFeatureTable() {
	featureTable.value = [];
	post('/getfeature', { database: database.value, start: 1, end: 50 }, (res: any) => {
		if (res.status === 200) {
			featureTable.value = res.data.reverse();
			setTimeout(() => {
				chartDom1.value.chartSet();
				chartDom2.value.chartSet();
				chartDom3.value.chartSet();
				chartDom4.value.chartSet();
			}, 0);
		} else {
			ElMessage({
				message: res.message,
				type: 'error',
			});
		}
	});
}
function getDatabases() {
	post('/getdatabases', {}, (res: any) => {
		if (res.status === 200) {
			databaseOptions.value = [];
			const hideDatabase = ['information_schema', 'mysql', 'performance_schema', '北工大412824200020002000', '数据模拟412824200020002000'];
			res.data.forEach((item: any, index: number) => {
				if (!hideDatabase.some(e => e === item.Database)) databaseOptions.value.push({ value: item.Database, label: item.Database });
			})
			database.value = databaseOptions.value[0].label;
			initData();
		}
	});
}
function msgLogScrollBottom() {
	msgLog.value.scrollTo({
		top: msgLog.value.scrollHeight,
		behavior: 'smooth'
	});
}
function unusualUpDate(msg: string) {
	unusual.value.push(dateFormater('HH:mm:ss') + msg);
	setTimeout(() => {
		unusualMsg.value.scrollTo({
			top: unusualMsg.value.scrollHeight,
			behavior: 'smooth'
		});
	});
}
function getMssageLog() {
	mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
	mssageList.value.push({ user: 'nurse', msg: '好的' });
	mssageList.value.push({ user: 'admin', msg: '请您把治疗单和药品给我' });
	mssageList.value.push({ user: 'nurse', msg: '好的' });
}
function getTableData(e: boolean) {
	if (tableData.value.length > 0 && e === isAIDose.value) return;
	// 人工转ai 人工给药数据插到ai给药表
	let promise = () => {
		return new Promise((resolve, reject) => {
			if (e && tableDataStore.value.length > 0) {
				let key = `Phase`;
				let value = `${tableDataStore.value[0].Phase}`;
				tableDataStore.value.forEach(item => {
					key += `, ${item.name}`;
					value += `, ${item.speed}`;
				});
				post('/addaimedicine', { database: database.value, key, value }, (res: any) => {
					if (res.status === 200) {
						tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
					}
					resolve(true)
				});
			} else {
				resolve(false)
			}
		})
	}
	promise().then((e: any) => {
		isStart.value = e;
		isAIDose.value = e;
		const url = e ? '/getaimedicine' : '/getdoctormedicine';
		post(url, { database: database.value, start: 0, end: 1 }, (res: any) => {
			if (res.status === 200) {
				setTableData(res);
			}
		});
		post('/addaiflag', { database: database.value, flag: e ? 1 : 0 }, (res: any) => {
			console.log(res.status);
		})
	});
}
function keepFit(designWidth: number, designHeight: number, renderDomId: string) {
	let width = designWidth || 1920,
		height = designHeight || 1010;
	let clientHeight = document.documentElement.clientHeight - 50;
	let clientWidth = document.documentElement.clientWidth;
	let scale = 1;
	scale = (clientHeight / clientWidth) < (height / width) ? clientHeight / height : clientWidth / width;
	// scale = clientHeight / height;
	// scale = clientWidth / width;
	const renderDom = document.getElementById(renderDomId);
	if (renderDom) {
		renderDom.style.height = clientHeight / scale + 'px';
		renderDom.style.width = clientWidth / scale + 'px';
		renderDom.style.transform = 'scale(' + scale + ')';
	}
}
function initScale() {
	let w = 1920,
		h = 1010;
	keepFit(w, h, 'screenBox');
	window.addEventListener('resize', () => {
		keepFit(w, h, 'screenBox');
	});
}

const selectDatabase = (value: any) => {
	initData();
};
const setDatabase = () => {
	initData();
	setDatabaseDialog.value = false;
};
const viewPatientInfo = () => {
	isPatientDialog.value = true;
	setTimeout(() => {
        patientsFormRef.value.resetData()
        patientsFormRef.value.formData = JSON.parse(JSON.stringify({
			id: '',
			name: '测试',
			code: 'afasf',
			sex: '男',
			dept: '测试',
			bodyHeight: '170',
			isMedicalHistory: '无',
			bodyWeight: '80',
			medicalHistoryName: '无',
			age: '22',
			allergyHistoryName: '无',
			phone: '123456',
			hospitalTime: new Date()
		}))
    }, 0)
}
const backRemote = () => {
	router.back()
}
const playPause = () => {
	if (liveVideo.value.paused) {
		liveVideo.value.play(); // 播放视频
		isVideoPlay.value = true;
	} else {
		liveVideo.value.pause(); // 暂停视频
		isVideoPlay.value = false;
	}
}
const sendMsg = () => {
	if (msgVal.value.trim() == '') return;
	mssageList.value.push({ user: userName.value, msg: msgVal.value });
	msgVal.value = '';
	setTimeout(() => {
		msgLogScrollBottom()
	}, 0);
};
const tableItemPlus = (e: any) => {
	const obj = medicineCustom.find(item => item.name === e.row.name) || { plus: 1 };
	e.row.speed += obj.plus;
	e.row.speed = Number(e.row.speed.toFixed(2));
};
const tableItemMinus = (e: any) => {
	const obj = medicineCustom.find(item => item.name === e.row.name) || { plus: 1 };
	if (!isAIDose.value && e.row.speed - obj.plus <= 0) return;
	e.row.speed -= obj.plus;
	if (e.row.speed < 0) e.row.speed = 0;
	else e.row.speed = Number(e.row.speed.toFixed(2));
};
const tableItemConfirm = (e: any) => {
	tableDataStore.value[e.$index].speed = e.row.speed;
	if (tableData.value.length < 1) return;
	let key = `Phase`;
	let value = `${tableData.value[0].Phase}`;
	tableData.value.forEach(item => {
		key += `, ${item.name}`;
		value += `, ${item.speed}`;
	});
	post(isAIDose.value ? '/addaimedicine' : '/adddoctormedicine', { database: database.value, key, value }, (res: any) => {
		if (res.status === 200) {
			tableDataStore.value = JSON.parse(JSON.stringify(tableData.value));
			ElMessage({
				message: '保存成功！',
				type: 'success',
			});
			// 如果是ai药量表保存后同时在人工表中插入ai药量表数据
			if (isAIDose.value) {
				post('/adddoctormedicine', { database: database.value, key, value }, (res: any) => {
					if (res.status === 200) {
						ElMessage({
							message: '保存成功！',
							type: 'success',
						});
						getTableData(false); // 保存成功后切换为人工给药
					} else {
						ElMessage({
							message: JSON.stringify(res),
							type: 'error',
						});
					}
				});
			}
		} else {
			ElMessage({
				message: JSON.stringify(res),
				type: 'error',
			});
		}
	});
};
const tableItemCancel = (e: any) => {
	e.row.speed = tableDataStore.value[e.$index].speed;
};

</script>

<style lang="scss" scoped>
.remote-box {
	width: 1920px;
	height: 1010px;
	background: #f1f3f5;
	padding: 10px 0 20px 0;
	transform-origin: top left;
	overflow-y: auto;
	.el-button {
		color: white;
	}
	.main-box {
		width: 100%;
		height: 100%;
		background: white;
		padding: 20px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.left-box {
			width: 670px;
			height: 100%;

			&>h3 {
				font-size: 26px;
				color: $main-color;
				line-height: 30px;
				margin-bottom: 20px;
				font-weight: 600;
			}

			.chart-line {
				width: 100%;
				height: calc(25% - 30px);
				margin-bottom: 20px;
				background: #e8f5f8;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				// overflow: hidden;
			}

			.chart-ecg {
				width: 100%;
				height: calc(25% - 50px);
				border-left: 1px solid #92b3c1;
				border-bottom: 1px solid #92b3c1;

				&::before {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					top: 0;
					left: -5px;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-bottom: 15px solid #285e7d;
					border-top: 0;
				}

				&::after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					bottom: -5px;
					right: 0;
					border-left: 15px solid #285e7d;
					border-right: 0;
					border-bottom: 5px solid transparent;
					border-top: 5px solid transparent;
				}
			}
		}

		.center-box {
			width: calc(100% - 1500px);
			min-width: 500px;
			height: 100%;

			.body-box {
				width: 100%;
				height: calc(100% - 110px);
				display: flex;
				justify-content: center;
				align-items: center;

				.body-img {
					position: relative;
					// width: 400px;
					// height: 650px;
					width: 500px;
					height: 812.5px;
					min-height: 650px;

					.lung-img {
						position: absolute;
						width: 500px;
						height: auto;
						top: 240px;
						left: 0;
						transition: all 2s;
					}

					.heart-img {
						position: absolute;
						width: 500px;
						height: auto;
						top: 420px;
						left: 0;
						transition: all 2s;
					}
				}
			}

			.btn-box {
				position: relative;
				width: 100%;
				height: 110px;
				display: flex;
				justify-content: center;
				align-items: center;

				.start-btn {
					width: 230px;
					height: 40px;
					font-size: 20px;
					border-radius: 16px;
					font-weight: 600;
				}

				.right-btn-box {
					position: absolute;
					width: 70px;
					height: 62px;
					top: calc(50% - 31px);
					right: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.el-button {
						width: 100%;
						padding: 0;
						height: 25px;
						line-height: 22px;
						border: 1px solid #e0e0e0;
						color: #616161;

						&.active {
							background: $main-color;
							color: white;
						}

						&:last-of-type {
							margin: 0;
						}
					}
				}
			}
		}

		.right-box {
			width: 670px;
			height: 100%;
			display: flex;
			flex-direction: column;
			.top-btn-box {
				width: 100%;
				height: 34px;
				margin-bottom: 5px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top-left-btn-box {
					display: flex;
					align-items: center;

					.el-select {
						margin-right: 10px;
					}
				}

				.el-button {
					border-radius: 16px;
					height: 31px;
					background-color: transparent;
					color: #c77000;
				}

				&>.el-button {
					border-radius: 4px;
					background-color: #f2f3f5;
					color: $main-color;
				}
			}

			.monitoring-message {
				width: 670px;
				height: 550px;
				padding-bottom: 10px;
				display: flex;
				justify-content: space-between;

				&>.left-box {
					position: relative;
					width: 200px;
					height: 100%;

					.unusual-title {
						display: block;
						width: 100%;
						line-height: 38px;
						color: #C77000;
						font-size: 20px;
						text-align: center;
						border: 1px dashed #C1C1C1;
						border-radius: 10px;
					}

					.unusual-box {
						width: 100%;
						height: calc(100% - 45px);
						// background: #F8F8F8;
						border-left: 1px dashed #C1C1C1;
						// border-radius: 4px;
						margin-top: 5px;
						padding: 8px 16px;
						overflow-y: auto;

						li {
							color: #F80000;
							font-size: 14px;
							line-height: 22px;
						}
					}
				}

				&>.right-box {
					width: calc(100% - 205px);
					height: 100%;

					.video-box {
						position: relative;
						width: 100%;
						height: 270px;
						background: $main-color;
						/* background: url(@/assets/imgs/video_bck.png);
				background-size: 100% 100%; */

						&:hover {
							.icon-box {
								display: flex;
							}
						}

						.icon-box {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							font-size: 60px;
							color: white;
							background: rgba(black, .3);
							justify-content: center;
							align-items: center;
						}

						video {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}

					.message-box {
						width: 100%;
						height: 270px;
						// margin-bottom: 5px;

						.message-log {
							width: 100%;
							height: calc(100% - 40px);
							padding: 16px 20px;
							box-sizing: border-box;
							border: 1px solid #c8c8c8;
							background: #f8f8f8;
							overflow-y: auto;

							li {
								width: 100%;
								font-size: 14px;
								line-height: 1.6;
								margin: 5px 0;

								&.align-right {
									text-align: right;
								}

								span {
									display: inline-block;
									max-width: 80%;
									padding: 6px 8px;
									box-sizing: border-box;
									border-radius: 8px;
									color: white;
									letter-spacing: 1px;
									background: $main-color;
									text-align: left;
								}
							}
						}

						.send-box {
							width: 100%;
							height: 40px;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;

							.el-input {
								width: calc(100% - 110px);
								height: 32px;

								:deep(.el-input__wrapper) {
									background-color: #F2F3F5;
									border-color: #C1C1C1;
								}
							}

							.el-button {
								padding: 0;
								width: 100px;
								line-height: 30px;
							}
						}
					}
				}
			}

			.table-box {
				width: 100%;
				height: calc(100% - 589px);
				flex-grow: 1;

				:deep(.el-table__inner-wrapper) {
					.el-table__cell {
						padding: 6px 0;
					}

					.cell {
						padding: 0 2px;
					}

					.el-table__header-wrapper {
						tr {
							background-color: $main-color;
						}

						th.el-table__cell {
							color: white;
							background-color: $main-color;
							padding: 8px 0;
							font-weight: 400;
						}
					}
				}

				.table-btn-box {
					.el-button {
						padding: 0 7px;
						height: 24px;
						line-height: 22px;

						&:not(:first-of-type) {
							margin-left: 4px;
						}
					}
				}
			}
		}
	}
}</style>