disaster_web3/src/view/index/htmldialog.vue

<template>
  <!-- 加载html界面 -->
  <div v-show="htmldialogshow" class="htmlclass">
    <el-dialog
      width="300px"
      v-model="htmldialogshow"
      :modal="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      draggable
      :fullscreen="false"
      :modal-append-to-body="false"
      modal-class="summary-dlg"
      @close="closeDialog"
      class="right log_class bgcolor tianjia asideg asidegbg leftbgimg"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 class="telet" :id="titleId" :class="titleClass">3D选点</h4>
        </div>
      </template>
      <div class="htmlclass_content" v-for="(item, i) in msgval" :key="i">
        <span class="htmlclass_txte" style="width: 150px; display: inline-block">{{
          item.name
        }}</span>
        <span class="htmlclass_txte">{{ item.value }}</span>
        <!-- <p class="htmlclass_txte">水位：{{ item.value }}</p> -->
      </div>
      <div class="dialog-footer footer_div l_btn">
        <!-- <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button
              ><a
                class="tiaozhaun"
                :href="jghrfe"
                rel="external nofollow"
                target="_blank"
                >内部查看</a
              ></el-button
            >
          </div>
        </div> -->
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button @click="tiaozhuan('1')"> 内部查看</el-button
            >
          </div>
        </div>
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button @click="tiaozhuan('0')"> 外部查看</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  <el-dialog
      width="54%"
      v-model="iframeshow"
      :modal="false"
      align-center
      :close-on-click-modal="false"
      :append-to-body="true"
      draggable
      modal-class="summary-dlg"
      class=" log_class bgcolor tianjia asideg asidegbg leftbgimg"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 class="telet" :id="titleId" :class="titleClass">局部</h4>
        </div>
      </template>
      <div>
        <iframe :src="ifr" width="100%" height="630px" frameborder="0"></iframe>
      </div>
      <!-- <div class="dialog-footer footer_div l_btn">
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button @click="iframeshow = false">取消</el-button>
          </div>
        </div>
        <div class="footerbtn flex1">
          <div class="borderimg">
            <el-button @click="iframeshow = false"> 确定 </el-button>
          </div>
        </div>
      </div> -->
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { RouterView, RouterLink } from "vue-router";
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus";
import { vtkmodel } from "@/control/vtkModel.js";
import { createFireControl } from "@/control/fireControl.js";
let emit = defineEmits(["funidshow"]);
let buntext = ref("3D选点");
let htmldialogshow = ref(false);
let msgval = ref([]);
let water = ref();
let iframeshow=ref(false);
let ifr=ref();
const props = defineProps({
  isshow: {
    type: Boolean,
    // required: true,
  },
});

let jghrfe=ref();
let jghrfe2=ref();
const getdatahtml = (val) => {
  water.value = Number(val[0].value) / 4;
  console.log(water.value);
  jghrfe="../../../../static/index.html?camera=1&water="+ water.value;
  jghrfe2="../../../../static/index.html?camera=0&water="+ water.value;
  msgval.value = val;
};
const tiaozhuan = (val) => {
  if(val=='1'){
    ifr.value=jghrfe;
 
  }else{
    ifr.value=jghrfe2;
  }
  iframeshow.value=true;

}
const closeDialog = () => {
  htmldialogshow.value = false;
  emit("funidshow", false);
};
onMounted(() => {
  // arrowtimeStart();
});
watch(
  () => [props.isshow],
  (newVal, oldVal) => {
    if (newVal[0] == true) {
      htmldialogshow.value = true;
    } else {
      htmldialogshow.value = false;
    }
  },
  { deep: true }
); //深度监视
defineExpose({ getdatahtml });
</script>
<style lang="scss" scoped></style>