virtual-patient-web/src/views/consultation/index.vue

<script setup lang="ts">
import { onMounted } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import FirstConsultation from "./FirstConsultation/index.vue";
import AssistInspect from "./AssistInspect/index.vue";
import ConfirmDiagnosis from "./ConfirmDiagnosis/index.vue";
import ConsultationReview from "./ConsultationReview/index.vue";
import Evaluate from "./Evaluate/index.vue";
import { useConsultationStoreHooks } from "@/store/modules/consultation";
import { computed, watch } from "vue";
// import { getUserInfo } from "@/utils/auth";
import router from "@/router";
// import { onUnmounted } from "vue";
// import { queryWebSocketUrl } from "@/api/consultation";

defineOptions({
  name: "Consultation"
});
let websocket: WebSocket | null = null; // 用于存储实例化后websocket
let rec: any; // 断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码

// 创建websocket
function creatWebSocket(wsUrl: string) {
  console.log("websocket==================");
  // 判断当前浏览器是否支持WebSocket
  if ("WebSocket" in window) {
    console.log("当前浏览器支持 WebSocket");
  } else if ("MozWebSocket" in window) {
    console.log("当前浏览器支持 MozWebSocket");
  } else {
    console.log("当前浏览器不支持 WebSocket");
  }

  try {
    initWebSocket(wsUrl); // 初始化websocket连接
  } catch (e) {
    console.log("尝试创建连接失败");
    reConnect(wsUrl); // 如果无法连接上 webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
  }
}

// 初始化websocket
function initWebSocket(wsUrl: string) {
  websocket = new WebSocket(wsUrl);
  console.log("websocket:", websocket);

  websocket.onopen = function () {
    websocketOpen();
  };

  //   // 接收
  websocket.onmessage = function (e: MessageEvent<any>) {
    websocketonmessage(e);
  };

  // 连接发生错误
  websocket.onerror = function () {
    console.log("WebSocket连接发生错误");
    //     isConnect = false; // 连接断开修改标识
    reConnect(wsUrl); // 连接错误 需要重连
  };

  websocket.onclose = function (e) {
    websocketclose(e);
  };
}
// 定义重连函数
const reConnect = (wsUrl: string) => {
  console.log("尝试重新连接");
  rec && clearTimeout(rec);
  rec = setTimeout(function () {
    // 延迟5秒重连  避免过多次过频繁请求重连
    creatWebSocket(wsUrl);
  }, 5000);
};

// 创建连接
function websocketOpen() {
  console.log("2222222222222连接成功");
}
// 数据接收
function websocketonmessage(e: MessageEvent<any>) {
  console.log("dfffffffffffffffff数据接收", e.data);
  const data = JSON.parse(e.data); // 解析JSON格式的数据
  if (data.code === 10000) {
    router.push("/selectCase");
  }

  // let data = JSON.parse(decodeUnicode(e.data))
}

// 关闭
function websocketclose() {}

const inspectSatus = computed(() => {
  return useConsultationStoreHooks().inspectSatus;
});
const activedIndex = computed(() => {
  return useConsultationStoreHooks().activedKey;
});
const changeIndex = val => {
  useConsultationStoreHooks().changeActivedKey(val);
};
// function generateUUID() {
//   const array = new Uint8Array(16);
//   window.crypto.getRandomValues(array);

//   // 设置版本和变体位
//   array[6] = (array[6] & 0x0f) | 0x40; // version 4
//   array[8] = (array[8] & 0x3f) | 0x80; // variant 10

//   // 将数组转换为UUID字符串
//   const uuid = Array.from(array)
//     .map(byte => byte.toString(16).padStart(2, "0"))
//     .join("");

//   return uuid;
// }
onMounted(async () => {
  useConsultationStoreHooks().changeInspectSatus(
    sessionStorage.getItem("inspectSatus")
  );

  // webSock连接
  // const userInfo: any = getUserInfo();

  if (sessionStorage.getItem("inspectSatus") === "1") {
    useConsultationStoreHooks().changeActivedKey(3);
  } else if (sessionStorage.getItem("inspectSatus") === "2") {
    useConsultationStoreHooks().changeActivedKey(4);
  } else {
    // const res: any = await queryWebSocketUrl();
    // const id = JSON.parse(userInfo).id;
    // creatWebSocket(`${res.data}webSocket/${generateUUID()}/${id}`);
    useConsultationStoreHooks().changeActivedKey(0);
  }
});
// onUnmounted(() => {
//   if (websocket) {
//     websocket.close();
//   }
// });
watch(
  () => useConsultationStoreHooks().inspectSatus,
  val => {
    if (val !== "1" && websocket) {
      websocket.close();
    }
  }
);
</script>

<template>
  <div class="consultation">
    <NavBar />
    <div class="main">
      <div class="left">
        <div
          v-if="inspectSatus === '0'"
          class="card_item"
          @click="changeIndex(0)"
          :class="[activedIndex === 0 ? 'actived' : '']"
        >
          <div class="first_item card_item_img" />
          <span>首次问诊</span>
        </div>
        <div
          v-if="inspectSatus === '1'"
          class="card_item"
          @click="changeIndex(3)"
          :class="[activedIndex === 3 ? 'actived' : '']"
        >
          <div class="first_item card_item_img" />
          <span>问诊回顾 </span>
        </div>
        <div
          v-if="inspectSatus === '0'"
          class="card_item"
          @click="changeIndex(1)"
          :class="[activedIndex === 1 ? 'actived' : '']"
        >
          <div class="support_item card_item_img" />
          <span>辅助检查</span>
        </div>
        <div
          v-if="inspectSatus !== '2'"
          class="card_item"
          @click="changeIndex(2)"
          :class="[activedIndex === 2 ? 'actived' : '']"
        >
          <div class="confirm_item card_item_img" />
          <span>确认诊断</span>
        </div>
        <div v-if="inspectSatus === '2'" class="card_item actived">
          <div class="evaluate_item card_item_img" />
          <span>问诊评估</span>
        </div>
      </div>
      <div class="main_content">
        <FirstConsultation
          v-if="inspectSatus === '0'"
          v-show="activedIndex === 0"
        />
        <AssistInspect
          v-if="inspectSatus === '0'"
          v-show="activedIndex === 1"
        />
        <ConfirmDiagnosis v-if="activedIndex === 2" />
        <ConsultationReview v-if="activedIndex === 3" />
        <Evaluate v-if="activedIndex === 4" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.consultation {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-image: url("../../assets/newInquiry/select_bg.png");
  background-size: 100% 100%;

  .top {
    width: 100%;
    height: 80px;
  }

  .main {
    display: flex;
    flex: 1;

    .left {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 152px;
      padding: 16px;

      .card_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 120px;
        height: 104px;
        margin-top: 16px;
        font-size: 18px;
        font-weight: 400;
        color: #4287ff;
        cursor: pointer;
        background: #fff;
        border-radius: 6px;

        .card_item_img {
          width: 40px;
          height: 40px;
          margin-bottom: 8px;
          background-size: 100% 100%;
        }

        .first_item {
          background-image: url("../../assets/newInquiry/tab/first_icon.png");
        }

        .support_item {
          background-image: url("../../assets/newInquiry/tab/support_icon.png");
        }

        .confirm_item {
          background-image: url("../../assets/newInquiry/tab/confirm_icon.png");
        }

        .evaluate_item {
          background-image: url("../../assets/newInquiry/tab/evaluate.png");
        }
      }

      .actived {
        color: #fff;
        background: #4287ff;

        .first_item {
          background-image: url("../../assets/newInquiry/tab/act_first_icon.png");
        }

        .support_item {
          background-image: url("../../assets/newInquiry/tab/act_support_icon.png");
        }

        .confirm_item {
          background-image: url("../../assets/newInquiry/tab/act_confirm_icon.png");
        }
      }
    }

    .main_content {
      flex: 1;
      margin-bottom: 24px;
      background-image: url("../../assets/newInquiry/main_bg.png");
      background-size: 100% 100%;
    }
  }
}
</style>