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 ConsultationEvaluation from "./ConsultationEvaluation/index.vue";
import ConsultationRecords from "./ConsultationRecords/index.vue";
// import Evaluate from "./Evaluate/index.vue";
import { useConsultationStoreHooks } from "@/store/modules/consultation";
import KnowledgeGraph from "./KnowledgeGraph/index.vue";
import { computed } from "vue";

defineOptions({
  name: "Consultation"
});

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);
  }
});
</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
          @click="changeIndex(6)"
          v-if="inspectSatus === '1'"
          :class="[activedIndex === 6 ? 'actived' : '']"
          class="card_item"
        >
          <div class="record_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
          @click="changeIndex(4)"
          v-if="inspectSatus === '2'"
          :class="[activedIndex === 4 ? 'actived' : '']"
          class="card_item"
        >
          <div class="evaluate_item card_item_img" />
          <span>问诊评估</span>
        </div>

        <div
          @click="changeIndex(5)"
          v-if="inspectSatus === '2'"
          :class="[activedIndex === 5 ? 'actived' : '']"
          class="card_item"
        >
          <div class="knowledge_graph 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" /> -->
        <ConsultationEvaluation v-if="activedIndex === 4" />
        <KnowledgeGraph v-if="activedIndex === 5" />
        <ConsultationRecords v-if="activedIndex === 6" />
      </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");
        }

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

        .knowledge_graph {
          background-image: url("../../assets/newInquiry/tab/graph.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");
        }

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

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

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

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

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