root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2025-08-24 13:04:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

异常修复

This commit is contained in:
yy 2024-05-29 14:18:15 +08:00
parent 6f88dd9d67
commit 95bdf6cdff
7 changed files with 147 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/stores/remote-ws-store.ts
View File

@ -11,7 +11,7 @@ export const useRemoteWsStore = defineStore("remoteWs", {
patient: {} as any, patient: {} as any,
remoteTasks: [] as any, remoteTasks: [] as any,
remoteTasksCap: 10, remoteTasksCap: 10,
currentTaskIndex: 0, currentTaskIndex: -1,
varMedicine: ["丙泊酚", "舒芬太尼", "瑞芬太尼", "顺阿曲库胺"], varMedicine: ["丙泊酚", "舒芬太尼", "瑞芬太尼", "顺阿曲库胺"],
fixedMedicine: ["尼卡地平", "艾司洛尔", "麻黄素", "阿托品"], fixedMedicine: ["尼卡地平", "艾司洛尔", "麻黄素", "阿托品"],
exceptionType: ["BIS_except", "DBP_except", "EtCO2_except", "HR_except", "SBP_except", "ST_except"], exceptionType: ["BIS_except", "DBP_except", "EtCO2_except", "HR_except", "SBP_except", "ST_except"],
@ -89,8 +89,8 @@ export const useRemoteWsStore = defineStore("remoteWs", {
setRemoteLog(log: any, i: number) { setRemoteLog(log: any, i: number) {
this.remoteTasks[i].log.push(log) this.remoteTasks[i].log.push(log)
}, },
createConnect(name: string, id: string, date: string) { createConnect(name: string, id: string, date: string, index: number) {
if (!this.patient[name + id + date]) { if (!this.patient[name + id + date + index]) {
const vitalWS = new WebSocket(vitalUrl) const vitalWS = new WebSocket(vitalUrl)
const medicineWS = new WebSocket(medicineUrl) const medicineWS = new WebSocket(medicineUrl)
const chatWS = new WebSocket(chatUrl) const chatWS = new WebSocket(chatUrl)
@ -115,42 +115,42 @@ export const useRemoteWsStore = defineStore("remoteWs", {
date: date date: date
})) }))
} }
this.patient[name + id + date] = { this.patient[name + id + date + index] = {
vitalWS, vitalWS,
medicineWS, medicineWS,
chatWS chatWS
} }
} }
}, },
disconnect(name: string, id: string, date: string) { disconnect(name: string, id: string, date: string, index: number) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
if (patient) { if (patient) {
patient.vitalWS.close() patient.vitalWS.close()
patient.medicineWS.close() patient.medicineWS.close()
patient.chatWS.close() patient.chatWS.close()
delete this.patient[name + id + date] delete this.patient[name + id + date + index]
} }
}, },
subscribeVital(name: string, id: string, date: string, cb: any) { subscribeVital(name: string, id: string, date: string, index: number, cb: any) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
if (patient) { if (patient) {
patient.vitalWS.onmessage = cb patient.vitalWS.onmessage = cb
patient.vitalCB = cb patient.vitalCB = cb
} else { } else {
this.createConnect(name, id, date) this.createConnect(name, id, date, index)
this.patient[name + id + date].vitalWS.onmessage = cb this.patient[name + id + date + index].vitalWS.onmessage = cb
this.patient[name + id + date].vitalCB = cb this.patient[name + id + date + index].vitalCB = cb
} }
}, },
unsubscribeVital(name: string, id: string, date: string) { unsubscribeVital(name: string, id: string, date: string, index: number) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
if (patient && patient.vitalWS) { if (patient && patient.vitalWS) {
patient.vitalWS.onmessage = undefined; patient.vitalWS.onmessage = undefined;
patient.vitalCB = undefined; patient.vitalCB = undefined;
} }
}, },
sendMsg(name: string, id: string, date: string, msg: string, cb: any) { sendMsg(name: string, id: string, date: string, msg: string, index: number, cb: any) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
if (patient) { if (patient) {
const params = { const params = {
patientName: name, patientName: name,
@ -169,8 +169,8 @@ export const useRemoteWsStore = defineStore("remoteWs", {
}) })
} }
}, },
subscribeChat(name: string, id: string, date: string, cb: any) { subscribeChat(name: string, id: string, date: string, index: number, cb: any) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
if (patient) { if (patient) {
patient.chatCB = cb patient.chatCB = cb
patient.chatWS.onmessage = cb patient.chatWS.onmessage = cb
@ -181,8 +181,8 @@ export const useRemoteWsStore = defineStore("remoteWs", {
}) })
} }
}, },
unsubscribeChat(name: string, id: string, date: string) { unsubscribeChat(name: string, id: string, date: string, index: number) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
patient.chatCB = undefined; patient.chatCB = undefined;
patient.chatWS.onmessage = undefined; patient.chatWS.onmessage = undefined;
}, },
@ -193,8 +193,8 @@ export const useRemoteWsStore = defineStore("remoteWs", {
flag: string, flag: string,
medicine: string, medicine: string,
value: string value: string
}, cb: any) { }, index: number, cb: any) {
const patient: any = this.patient[args.name + args.id + args.date] const patient: any = this.patient[args.name + args.id + args.date + index]
if (patient) { if (patient) {
const params = { const params = {
patientName: args.name, patientName: args.name,
@ -215,8 +215,8 @@ export const useRemoteWsStore = defineStore("remoteWs", {
}) })
} }
}, },
subscribeMedicine(name: string, id: string, date: string, cb: any) { subscribeMedicine(name: string, id: string, date: string, index: number, cb: any) {
const patient = this.patient[name + id + date] const patient = this.patient[name + id + date + index]
if (patient) { if (patient) {
patient.medicineCB = cb patient.medicineCB = cb
patient.medicineWS.onmessage = cb patient.medicineWS.onmessage = cb
@ -227,8 +227,8 @@ export const useRemoteWsStore = defineStore("remoteWs", {
}) })
} }
}, },
unsubscribeMedicine(name: string, id: string, date: string) { unsubscribeMedicine(name: string, id: string, date: string, index: number) {
const patient: any = this.patient[name + id + date] const patient: any = this.patient[name + id + date + index]
patient.medicineCB = undefined; patient.medicineCB = undefined;
patient.medicineWS.onmessage = undefined; patient.medicineWS.onmessage = undefined;
} }

5
src/views/remote-manage/part/remote-dialog.vue
View File

@ -50,7 +50,8 @@ defineExpose({
}) })
function open(i: number) { function open(i: number) {
patientInfo.value = remoteWsStore.remoteTasks[i]; remoteWsStore.setCurrentTaskIndex(i)
patientInfo.value = remoteWsStore.getRemoteTask()[remoteWsStore.getCurrentTaskIndex()];
patientInfo.value.date = new Date(); patientInfo.value.date = new Date();
dialogVisible.value = true; dialogVisible.value = true;
} }
@ -96,7 +97,7 @@ const unsubscribeLastTask = () => {
const lastTaskIndex = remoteWsStore.currentTaskIndex; const lastTaskIndex = remoteWsStore.currentTaskIndex;
const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex]; const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex];
if (lastTask) { if (lastTask) {
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date); remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date, lastTaskIndex);
} }
} }

4
src/views/remote-manage/part/remote-item-part.vue
View File

@ -77,7 +77,7 @@ onMounted(() => {
} }
}) })
onUnmounted(() => { onUnmounted(() => {
remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date); remoteWsStore.unsubscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index);
}) })
function initData() { function initData() {
@ -85,7 +85,7 @@ function initData() {
} }
function subscribeVital() { function subscribeVital() {
remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, (res: any) => { remoteWsStore.subscribeVital(remoteTask.value.patient, remoteTask.value.patientId, remoteTask.value.date, props.index, (res: any) => {
const data = JSON.parse(res.data); const data = JSON.parse(res.data);
if (data.vitalSignsList && data.vitalSignsList.length > 0) { if (data.vitalSignsList && data.vitalSignsList.length > 0) {
Object.assign(patientInfo.value, data.vitalSignsList[0]); Object.assign(patientInfo.value, data.vitalSignsList[0]);

44
src/views/remote-manage/part/remote-part.vue
View File

@ -19,7 +19,7 @@
<div class="row-item"> <div class="row-item">
<span class="label">手术时间</span> <span class="label">手术时间</span>
<span class="input-value">{{ <span class="input-value">{{
remoteItem.date remoteItem?.date
}}</span> }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
@ -62,11 +62,11 @@
<div class="info-box"> <div class="info-box">
<div class="row-item"> <div class="row-item">
<span class="label">病人名称</span> <span class="label">病人名称</span>
<span class="input-value">{{ remoteItem.patient }}</span> <span class="input-value">{{ remoteItem?.patient }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
<span class="label">住院号</span> <span class="label">住院号</span>
<span class="input-value">{{ remoteItem.patientId }}</span> <span class="input-value">{{ remoteItem?.patientId }}</span>
</div> </div>
</div> </div>
<div class="row-item" :class="{ 'alarm': patientInfo.BIS_except }"> <div class="row-item" :class="{ 'alarm': patientInfo.BIS_except }">
@ -90,7 +90,7 @@
<div class="row-item"> <div class="row-item">
<span class="label">手术时间</span> <span class="label">手术时间</span>
<span class="input-value">{{ <span class="input-value">{{
remoteItem.date remoteItem?.date
}}</span> }}</span>
</div> </div>
<div class="row-item"> <div class="row-item">
@ -123,6 +123,7 @@ import { useRemoteWsStore } from "@/stores/remote-ws-store";
const emit = defineEmits(['addLogAfter', 'breakRemote']) const emit = defineEmits(['addLogAfter', 'breakRemote'])
const mediaMini800 = ref(false) const mediaMini800 = ref(false)
const remoteItem = ref({} as any) const remoteItem = ref({} as any)
let currentIndex = -1;
const patientInfo = ref({} as any) const patientInfo = ref({} as any)
const remoteWsStore = useRemoteWsStore() const remoteWsStore = useRemoteWsStore()
@ -139,32 +140,35 @@ onMounted(() => {
}) })
onUnmounted(() => { onUnmounted(() => {
remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date); remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex);
}) })
function showData(i: any) { function showData(i: any) {
const lastTaskIndex = remoteWsStore.currentTaskIndex; const lastTaskIndex = remoteWsStore.getCurrentTaskIndex();
const lastTask: any = remoteWsStore.remoteTasks[lastTaskIndex]; const lastTask: any = remoteWsStore.getRemoteTask()[lastTaskIndex];
if (lastTask) { if (lastTask) {
remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date); remoteWsStore.unsubscribeVital(lastTask.patient, lastTask.patientId, lastTask.date, lastTaskIndex);
} }
remoteWsStore.currentTaskIndex = i remoteWsStore.setCurrentTaskIndex(i)
remoteItem.value = remoteWsStore.remoteTasks[remoteWsStore.currentTaskIndex] currentIndex = remoteWsStore.getCurrentTaskIndex()
remoteItem.value = remoteWsStore.getRemoteTask()[currentIndex]
getData() getData()
} }
function initData() { function initData() {
const remoteTasks = remoteWsStore.getRemoteTask(); const remoteTasks = remoteWsStore.getRemoteTask()
remoteItem.value = remoteTasks[remoteWsStore.getCurrentTaskIndex()] currentIndex = remoteWsStore.getCurrentTaskIndex()
if (remoteItem.value) { remoteItem.value = remoteTasks[currentIndex]
remoteWsStore.createConnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date) if (remoteItem.value && remoteItem.value.patient) {
remoteWsStore.createConnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex)
getData() getData()
} }
} }
function getData() { function getData() {
remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date); if (currentIndex > -1 && remoteItem.value.patient) {
remoteWsStore.subscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, (res: any) => { remoteWsStore.unsubscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex);
remoteWsStore.subscribeVital(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex, (res: any) => {
if (res && res.data) { if (res && res.data) {
const data = JSON.parse(res.data); const data = JSON.parse(res.data);
if (data.vitalSignsList && data.vitalSignsList.length > 0) { if (data.vitalSignsList && data.vitalSignsList.length > 0) {
@ -177,6 +181,7 @@ function getData() {
} }
}) })
} }
}
function setLog(data: any) { function setLog(data: any) {
remoteWsStore.exceptionType.forEach((item: any) => { remoteWsStore.exceptionType.forEach((item: any) => {
@ -187,14 +192,15 @@ function setLog(data: any) {
taskName: remoteItem.value.taskName, taskName: remoteItem.value.taskName,
time: new Date(), time: new Date(),
type: "exception" type: "exception"
}, remoteWsStore.currentTaskIndex); }, currentIndex);
} }
}) })
} }
const breakRemote = () => { const breakRemote = () => {
remoteWsStore.disconnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date) remoteWsStore.getRemoteTask()[currentIndex]
remoteWsStore.resetRemoteTask(remoteWsStore.currentTaskIndex) remoteWsStore.disconnect(remoteItem.value.patient, remoteItem.value.patientId, remoteItem.value.date, currentIndex)
remoteWsStore.resetRemoteTask(currentIndex)
if (remoteWsStore.getActiveRemoteTask()) { if (remoteWsStore.getActiveRemoteTask()) {
showData(remoteWsStore.getActiveRemoteTask()) showData(remoteWsStore.getActiveRemoteTask())
} }

23
src/views/remote-manage/remote-control.vue
View File

@ -269,13 +269,15 @@ onMounted(() => {
}); });
onUnmounted(() => { onUnmounted(() => {
remoteWsStore.unsubscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date); const index = remoteWsStore.getCurrentTaskIndex()
remoteWsStore.unsubscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date); remoteWsStore.unsubscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, index);
remoteWsStore.unsubscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date); remoteWsStore.unsubscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, index);
remoteWsStore.unsubscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, index);
}) })
function subscribeWS() { function subscribeWS() {
remoteWsStore.subscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, const index = remoteWsStore.getCurrentTaskIndex()
remoteWsStore.subscribeVital(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, index,
function (res: any) { function (res: any) {
const data = JSON.parse(res.data); const data = JSON.parse(res.data);
chartDom1.value.updateChartData(data.vitalSignsList[0]); chartDom1.value.updateChartData(data.vitalSignsList[0]);
@ -285,12 +287,12 @@ function subscribeWS() {
updateMedicineTable(data.aiMedicineList[0], data.docMedicineList[0]); updateMedicineTable(data.aiMedicineList[0], data.docMedicineList[0]);
}) })
remoteWsStore.subscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, remoteWsStore.subscribeChat(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, index,
function (res: any) { function (res: any) {
mssageList.value.push(JSON.parse(res.data)); mssageList.value.push(JSON.parse(res.data));
}) })
remoteWsStore.subscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, remoteWsStore.subscribeMedicine(currentRemote.value.patient, currentRemote.value.patientId, currentRemote.value.date, index,
function (res: any) { function (res: any) {
const data = JSON.parse(res.data); const data = JSON.parse(res.data);
if (data.status != 1) { if (data.status != 1) {
@ -487,8 +489,9 @@ const playPause = () => {
} }
const sendMsg = () => { const sendMsg = () => {
if (msgVal.value.trim() == '') return; if (msgVal.value.trim() == '') return;
const index = remoteWsStore.getCurrentTaskIndex()
remoteWsStore.sendMsg(currentRemote.value.patient, currentRemote.value.patientId, remoteWsStore.sendMsg(currentRemote.value.patient, currentRemote.value.patientId,
currentRemote.value.date, msgVal.value, function (res: any) { currentRemote.value.date, msgVal.value, index, function (res: any) {
if (res.code == 1) { if (res.code == 1) {
ElMessage.error(res.msg) ElMessage.error(res.msg)
} }
@ -530,7 +533,8 @@ const tableItemConfirm = (e: any, tableData: any) => {
medicine: e.row.name, medicine: e.row.name,
value: e.row.speed value: e.row.speed
} }
remoteWsStore.sendMedicine(params, function () { const index = remoteWsStore.getCurrentTaskIndex()
remoteWsStore.sendMedicine(params, index, function () {
}); });
} }
@ -545,7 +549,8 @@ function startAI() {
date: currentRemote.value.date, date: currentRemote.value.date,
flag: "0", flag: "0",
} }
remoteWsStore.sendMedicine(params, function () { const index = remoteWsStore.getCurrentTaskIndex()
remoteWsStore.sendMedicine(params, index, function () {
}); });
} }

11
src/views/remote-manage/remote-manage.vue
View File

@ -7,7 +7,7 @@
</el-icon> </el-icon>
<span>缩略图</span> <span>缩略图</span>
</div> </div>
<div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index" <div class="task-btn-item" v-for="(item, index) in remoteWsStore.remoteTasks" :key="'task-' + index"
:class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }" :class="{ 'connecting': item.patient || item.patientId, 'alarm': item.isException }"
@click="editTask(item)" @dblclick="toRemoteControl(item)"> @click="editTask(item)" @dblclick="toRemoteControl(item)">
<span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span> <span>{{ item.taskName || ('新建任务' + (index + 1)) }}</span>
@ -37,7 +37,6 @@ const router = useRouter()
const remotePartRef = ref() const remotePartRef = ref()
const messagePartRef = ref() const messagePartRef = ref()
const remoteDialogRef = ref() const remoteDialogRef = ref()
const remoteTask = ref([] as Array<any>)
const remoteWsStore = useRemoteWsStore(); const remoteWsStore = useRemoteWsStore();
onMounted(() => { onMounted(() => {
@ -45,8 +44,8 @@ onMounted(() => {
}) })
function initRemoteTask() { function initRemoteTask() {
remoteTask.value = remoteWsStore.initRemoteTask() remoteWsStore.initRemoteTask()
remotePartRef.value.showData(remoteWsStore.currentTaskIndex); remotePartRef.value.showData(remoteWsStore.getCurrentTaskIndex());
} }
const viewThumbnail = () => { const viewThumbnail = () => {
@ -69,6 +68,7 @@ const editTask = (item: any) => {
const toRemoteControl = (item: any) => { const toRemoteControl = (item: any) => {
// 如果当前任务是已连接状态则跳转，否则打开弹窗 // 如果当前任务是已连接状态则跳转，否则打开弹窗
if (item.isRemote) { if (item.isRemote) {
remoteWsStore.setCurrentTaskIndex(item.index)
router.push('/remote-manage/remote-control') router.push('/remote-manage/remote-control')
} else { } else {
remoteDialogRef.value.open(item.index) remoteDialogRef.value.open(item.index)
@ -214,4 +214,5 @@ const addLogAfter = () => {
margin-left: 20px; margin-left: 20px;
} }
} }
}</style> }
</style>

18
src/views/remote-manage/remote-thumbnail.vue
View File

@ -3,15 +3,15 @@
<div class="remote-thumbnail-page"> <div class="remote-thumbnail-page">
<div class="remote-box row1"> <div class="remote-box row1">
<div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)"> <div class="remote-item" v-for="item in remoteTask.slice(0, 4)" :key="item.title" @click="openRemote(item)">
<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index" <RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index" @addLogAfter="addLogAfter">
@addLogAfter="addLogAfter"></RemoteItemPart> </RemoteItemPart>
</div> </div>
</div> </div>
<div class="remote-box row2"> <div class="remote-box row2">
<div class="left-box"> <div class="left-box">
<div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)"> <div class="remote-item" v-for="item in remoteTask.slice(4)" :key="item.title" @click="openRemote(item)">
<RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index" <RemoteItemPart :ref="'remoteItemPartRef' + item.index" :index="item.index" @addLogAfter="addLogAfter">
@addLogAfter="addLogAfter"></RemoteItemPart> </RemoteItemPart>
</div> </div>
</div> </div>
<div class="right-box"> <div class="right-box">
@ -43,6 +43,7 @@ onMounted(() => {
}) })
const openRemote = (params: any) => { const openRemote = (params: any) => {
remoteWsStore.setCurrentTaskIndex(params.index)
router.push('/remote-manage/remote-manage'); router.push('/remote-manage/remote-manage');
} }
const addLogAfter = (index: number) => { const addLogAfter = (index: number) => {
@ -53,31 +54,38 @@ const addLogAfter = (index: number) => {
<style lang='scss' scoped> <style lang='scss' scoped>
$size: 20px; $size: 20px;
.remote-thumbnail-page { .remote-thumbnail-page {
width: 1920px; width: 1920px;
height: 1010px; height: 1010px;
overflow: auto; overflow: auto;
.remote-box { .remote-box {
width: 100%; width: 100%;
height: 33.33%; height: 33.33%;
display: flex; display: flex;
.remote-item { .remote-item {
width: 25%; width: 25%;
height: 100%; height: 100%;
padding: $size*0.2; padding: $size*0.2;
} }
&.row2 { &.row2 {
height: 66.67%; height: 66.67%;
.left-box { .left-box {
width: 75%; width: 75%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.remote-item { .remote-item {
width: 33.33%; width: 33.33%;
height: 50%; height: 50%;
} }
} }
.right-box { .right-box {
position: relative; position: relative;
width: 25%; width: 25%;
@ -86,6 +94,7 @@ $size: 20px;
padding-top: $size*0.2 + $size; padding-top: $size*0.2 + $size;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.message-title { .message-title {
position: absolute; position: absolute;
height: $size; height: $size;
@ -99,6 +108,7 @@ $size: 20px;
color: white; color: white;
font-weight: 600; font-weight: 600;
} }
.message-item { .message-item {
width: 50%; width: 50%;
height: 20%; height: 20%;