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

<template>
  <div class="remote-manage-page">
    <div class="header-box">
      <div class="thumbnail" @click="viewThumbnail">
        <el-icon>
          <Menu />
        </el-icon>
        <span>缩略图</span>
      </div>
      <div class="task-btn-item" v-for="(item, index) in remoteTask" :key="'task-' + index"
        :class="{ 'connecting': item.patientName || item.patientCode, 'alarm': item.dataAlarm }"
        @click="editTask(item, index)" @dblclick="toRemoteControl(item, index)">
        <span>{{ item.title || ('新建任务' + (index + 1)) }}</span>
      </div>
    </div>
    <div class="content-box">
      <div class="remote-box">
        <RemotePart ref="remotePartRef" @addLogAfter="addLogAfter" @breakRemote="breakRemote" />
      </div>
      <div class="message-box">
        <MessagePart ref="messagePartRef" />
      </div>
    </div>
  </div>
  <RemoteDialog ref="remoteDialogRef" @confirmRemote="confirmRemote" @errorRemote="errorRemote" />
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRemoteStore } from '@/stores/remote-info-store'
import type { RemoteItem } from '@/utils/public-interface'
import RemoteDialog from './part/remote-dialog.vue'
import RemotePart from './part/remote-part.vue'
import MessagePart from './part/message-part.vue'
import {Client} from "@stomp/stompjs";
import {Session} from "@/utils/storage";

const router = useRouter()
const remoteStore = useRemoteStore()

const remotePartRef = ref()
const messagePartRef = ref()
const remoteDialogRef = ref()
const remoteTask = ref([] as Array<RemoteItem>)

initRemoteTask()

function resetRemoteTaskItem(e: RemoteItem) {
  Object.assign(remoteTask.value[e.index], {
    isRemote: false,
    dataAlarm: false,
    title: '',
    serverUser: '',
    patientName: '',
    patientCode: '',
    index: e.index,
  })
}
function initRemoteTask() {
  remoteTask.value = remoteStore.remoteTasks
  if (remoteTask.value.length < 1) {
    while (remoteTask.value.length < 10) {
      const obj = {
        isRemote: false, // 连接状态
        dataAlarm: false, // 异常状态
        title: '',
        serverUser: '', // 服务器用户名
        patientName: '', // 病人名称
        patientCode: '', // 病人身份证
        index: remoteTask.value.length,
        log: []
      }
      if (remoteTask.value.length < 3) {
        obj.isRemote = true
        obj.title = '远程控制' + (remoteTask.value.length + 1)
        obj.serverUser = 'root'
        obj.patientName = '测试' + (remoteTask.value.length + 1)
      }
      if (remoteTask.value.length == 1) obj.dataAlarm = true
      remoteTask.value.push(obj)
    }
    remoteStore.setRemoteTasks(remoteTask.value)
    if (!remoteStore.currentRemote.index) {
      remoteStore.$patch({ currentRemote: remoteTask.value[0] })
    }
  }
}

const viewThumbnail = () => {
  router.push({
    path: '/remote-manage/remote-thumbnail'
  })
}
// 打开任务连接弹窗
const editTask = (item: RemoteItem, index: number) => {
  item.index = index
  // 如果当前任务是已连接状态则直接渲染content 否则打开弹窗
  if (item.isRemote) {
    confirmRemote(item)
  } else {
    remoteDialogRef.value.open(item)
  }
}
// 跳转到远程控制
const toRemoteControl = (item: RemoteItem, index: number) => {
  // 如果当前任务是已连接状态则跳转，否则打开弹窗
  if (item.isRemote) {
    router.push('/remote-manage/remote-control')
  } else {
    editTask(item, index)
  }
}
// 连接成功
const confirmRemote = (e: RemoteItem) => {
  messagePartRef.value.setData({
    time: new Date(),
    title: e.title,
    state: '连接成功'
  }, e.index)
  remoteTask.value[e.index] = e // 状态设置为可连接
  remotePartRef.value.initData(e)
  console.log(e);
  getSurgeryData(e.patientCode, e.patientName);
}
// 连接失败
const errorRemote = (e: RemoteItem) => {
  messagePartRef.value.setData({
    time: new Date(),
    title: e.title,
    state: '连接失败'
  }, e.index)
}
// 断开连接
const breakRemote = (e: RemoteItem) => {
  resetRemoteTaskItem(e)
  remotePartRef.value.initData()
  messagePartRef.value.setData({
    time: new Date(),
    title: e.title,
    state: '断开连接'
  }, e.index)
  disconnectSurgeryData("", "1")
}
const addLogAfter = () => {
  messagePartRef.value.scrollToBottom()
}

const surgeryClient = new Client({
  brokerURL: 'ws://localhost:5173/socket.io/admin/rax/SurgeryData',
  connectHeaders: {
    token: Session.get('token')
  },
  reconnectDelay: 5000,
  heartbeatIncoming: 60000,
  heartbeatOutgoing: 60000
})
surgeryClient.activate()

surgeryClient.onConnect = (data: any) => {
  console.log("connect", data);
}

surgeryClient.onWebSocketError = (error) => {
  console.log('Error with websocket', error)
};

surgeryClient.onStompError = (frame) => {
  console.log('Broker reported error: ' + frame.headers['message'])
  console.log('Additional details: ' + frame.body)
};

function getSurgeryData(username: string, db: string) {
  console.log(username, db);
  surgeryClient.publish({
    destination: "/front/getSurgeryData",
    headers: {
      token: Session.get('token')
    },
    body: JSON.stringify({status: "start", db})
  });
  const account = "admin";
  surgeryClient.subscribe('/topic/user/' + account + ":" + db + '/surgeryData', (data: any) => {
    console.log(data);
  })
}

function disconnectSurgeryData(username: string, db: string) {
  const account = "admin";
  surgeryClient.unsubscribe("/topic/user/" + account + ":" + db + "/surgeryData");
}
</script>

<style lang='scss' scoped>
.remote-manage-page {
  width: 100%;
  height: 100%;
  padding-top: 15px;
  overflow-y: auto;
  overflow-x: hidden;

  .header-box {
    position: relative;
    width: 100%;
    min-height: 180px;
    background: white;
    padding: 0 30px;
    display: flex;
    flex-wrap: wrap;

    .thumbnail {
      cursor: pointer;
      position: absolute;
      width: 70px;
      height: 70px;
      top: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f8b300;
      border-top-left-radius: 35px;
      border-bottom-left-radius: 35px;
      box-shadow: -3px 3px 5px 0 rgba(black, .2);
      font-size: 20px;
      color: white;
      transition: all .1s;

      .el-icon {
        font-size: 1.4em;
      }

      &>span {
        display: none;
        margin-left: 5px;
        line-height: 1;
        white-space: nowrap;
      }

      &:hover {
        width: 160px;
        transition: all .3s;

        &>span {
          display: block;
        }
      }
    }

    .task-btn-item {
      cursor: pointer;
      flex-grow: 1;
      width: 17%;
      min-width: 200px;
      height: 70px;
      margin: 10px 20px;
      border: 2px solid $main-color;
      color: $main-color;
      border-radius: 5px;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all .6s;

      &:hover {
        background: rgba($main-color, .1);
        transition: all .6s;
      }

      &.connecting {
        background: $main-color;
        color: white;

        &:hover {
          background: rgba($main-color, .8);
        }
      }

      &.alarm {
        background: #f80000;
        border-color: #f80000;
        color: white;

        &:hover {
          background: rgba(#f80000, .8);
        }
      }
    }
  }

  .content-box {
    width: 100%;
    height: calc(100% - 195px);
    min-height: 600px;
    margin-top: 15px;
    background: white;
    padding: 20px 50px;
    display: flex;
    justify-content: space-between;

    .remote-box {
      width: calc(100% - 370px);
      flex-grow: 1;
      height: 100%;
    }

    .message-box {
      width: 350px;
      height: 100%;
      margin-left: 20px;
    }
  }
}</style>