web_dist/src/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/EmrDualScreen.vue

<template>
  <div ref="dualScreenRef"
       class="dual-screen">
    <div class="close" @click="isOpenDualScreen = false">
      X
    </div>

    <iframe
        :src="dualScreenSrc"
        height="100%"
        width="100%"
        ref="emrRef"/>
  </div>
</template>

<script setup name='EmrDualScreen'>
import {dualScreenSrc, isOpenDualScreen} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import router from "@/router";
import {watch} from "vue";

const dualScreenRef = ref(null)
const emrRef = ref(null)
let iframeWindow = null;   //iframe的window对象


// 监听页面加载完成
const handleMessage = (event) => {
  // 触发页面元素
  iframeWindow.dualScreenMode()
}


onMounted(async () => {
  const body = document.querySelector("body");
  if (body.append) {
    body.append(dualScreenRef.value);
  } else {
    body.appendChild(dualScreenRef.value);
  }
  await nextTick();
  window.addEventListener("message", handleMessage)
  iframeWindow = emrRef.value.contentWindow;
})

watch(() => router.currentRoute.value.path, () => {
  let path = router.currentRoute.value.path
  if (path === '/login') {
    isOpenDualScreen.value = false
  }
}, {deep: true})

</script>

<style scoped lang="scss">
.dual-screen {
  position: fixed;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: white;
  z-index: 99;

  .close {
    text-align: center;
    position: absolute;
    border-radius: 5px;
    height: 20px;
    width: 20px;
    right: 0;
    background-color: red;
    box-shadow: var(--el-box-shadow-light);
    cursor: pointer;
    color: white;
  }

}
</style>