disaster/src/view/index.vue

<template>
  <div>
    <vtkContainer />
    <div class="tool">
      <div
        class="img"
        v-for="(item, index) in listArray"
        :key="index"
        @click="add(item.id)"
      >
        <el-image :src="item.img" fit="cover" /><span>{{ item.name }}</span>
      </div>

      <div class="left_container">
        <div class="leftdialong" v-show="dialogVisible">
          <div class="time">当前时间：{{ count }}</div>
          <div class="block">
            <el-form-item label="物理量">
              <el-cascader
                transfer="true"
                placeholder="灾情/物理量"
                clearable
                :popper-append-to-body="false"
                v-model="arrvalue"
                :options="options"
                @change="handleChange($event)"
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="block">
            <span class="demonstration">动画开始</span>
            <el-slider
              :max="endtime"
              :min="starttime"
              v-model="count"
              @change="sliderchange"
            ></el-slider>
            <span class="demonstration">动画结束</span>
          </div>

          <div class="itemlist">
            <div class="item" @click="play(500)">播&nbsp;&nbsp;放</div>
            <div class="item" @click="suspend">暂&nbsp;&nbsp;停</div>
            <div class="item" @click="Prev">上一分钟</div>
            <div class="item" @click="increment">下一分钟</div>
          </div>
          <div class="dialog-footer">
            <span class="btn" @click="dialogVisible = false">关 闭</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
        <!-- 内容 -->
        <!-- 日志 -->
        <el-dialog
    v-model="dialog.dialogVisible"
    title="日志"
    width="30%"
    :left="rizhi.left"
    :top="rizhi.top"
    :modal="false"
    :close-on-click-modal="false"
    draggable
    :before-close="handleClose"
 class="dialog_class"
  >

  <div class="footerTextBox">
                <el-input
                  class="footerText"
                  type="textarea"
                  id="textarea_id"
                  v-model="rizhi.logs"
                ></el-input>
              </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialog.dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
        <div>
          <!-- :title1="title1" -->
   <evolutionView ref="evolution" :dialogVisiblerz="dialog.dialogVisible" @getthislog="getthislog" @logonclick=logonclick />
  </div>
  </div>
</template>

<script setup>
import p1 from "@/assets/img/u3479.png";
import p2 from "@/assets/img/u10068.png";
import p3 from "@/assets/img/12.png";
import p4 from "@/assets/img/u3883.png";
import p5 from "@/assets/img/u3405.png";
import { ref, onMounted, reactive,nextTick } from "vue";
import evolutionView  from "./evolutionView.vue"
import vtkContainer  from "./vtkContainer.vue"
// import {RouterView,RouterLink} from "vue-router"
// const router=RouterView();

// const props = {};
let time = 3 * 60;
let evolution=ref();
let listArray = reactive([
  { id: 0, img: p1, name: "灾情演化" },
  { id: 1, img: p2, name: "演化过程" },
  { id: 2, img: p3, name: "灾情历史" },
  { id: 3, img: p4, name: "日志" },
]);
// let title1=ref("我是父组件")
let dialogVisible = ref(false);
let dialog=ref({
  dialogVisible:false
})
let rizhi=ref({
  top:"50px",
  logs:'',
  left:"90px"
});
let newlog=ref("");
let log=ref("");
let num = ref(4);
let starttime = ref(1);
let endtime = ref(60);
let timenum = ref(2);
let isstop = ref(false);
let arrvalue = reactive([]);
let options = reactive([
  {
    value: "fire",
    label: "火灾",
    children: [
      {
        value: "Temperature",
        label: "温度",
      },
      {
        value: "Pressure",
        label: "压强",
      },
      {
        value: "SO2",
        label: "SO2",
      },
      {
        value: "CO2",
        label: "CO2",
      },
    ],
  },
  {
    value: "Water",
    label: "水灾",
    children: [
      {
        value: "Height",
        label: "水位高度",
      },
    ],
  },
]);
function add(id) {
  if (id == 0) {
    evolution.value.isshow=true;
    evolution.value.getdata();
    dialogVisible.value = false;
    dialog.value.dialogVisible=false;
  }else if(id==1){
    // router.push("/myDemo");

}
  else if(id==2){
    dialogVisible.value = true;
    evolution.value.isshow=false;
    dialog.value.dialogVisible=false;
  }else if(id==3){
    dialog.value.dialogVisible=true;
    dialogVisible.value = false;
    evolution.value.isshow=false;
  }else{

  }

}
function handleChange(val) {
  arrvalue = val;
  min.value = 0.0;
  max.value = 1.0;
  changeScalar();
}
//暂停
function suspend() {
  isstop.value = false;
  console.log(isstop.value);
}
//滑块
function sliderchange(val) {
  // console.log(val);
  changeScalar();
}

//播放
function play(time) {
  isstop.value = true;
  const sleep = (timeout = time) =>
    new Promise((resolve, reject) => {
      setTimeout(resolve, timeout);
    });
  let timer = async (timeout) => {
    while (count.value < endtime.value && isstop.value) {
      // if (isstop.value == true) {
      await sleep(time);
      changeScalar();
      count.value++;
      // }
    }
  };
  timer(time);
}
//回到上一页
function Prev() {
  isstop.value = false;
  count.value--;
  changeScalar();
}
// 日志
// 日志弹框
function logonclick(val){
  dialog.value.dialogVisible=val;
  rizhi.value.logs='';
}
function  getthislog(val) {
    newlog.value =newlog.value  + "\n" +val ;
      rizhi.value.logs = newlog.value;
      if(val.includes("Simulating"))
         nextTick(() => {
            let textarea=document.getElementById("textarea_id");
            textarea.scrollTop=textarea.scrollHeight;
       
       
          })
    }
//安装时
onMounted(() => {
});
//  关闭弹窗
function handleClose(){
  dialog.value.dialogVisible=false;
}

</script>

<style>
.controls,.snow{
  position: absolute;
  top: 25px;
  left: 25px;
  background: white;
  padding: 12px;
}
.haha {
  color: #fff;
}
.tool {
  position: fixed;
  top: 50px;
  left: 20px;

  z-index: 205;
}
.img {
  width: 48px;
  margin: -6px 0;
  padding: 8px 10px;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  transform: scale(0.9);
}
.img span {
  color: #fff;
  display: inline-block;
}
.img .el-image {
  width: 34px;
}
.leftdialong {
  padding: 15px;
  width: 300px;
  position: relative;
  top: -248px;
  left: 69px;
  border-radius: 5px;
  box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
}
.leftdialong .el-form-item__label {
  font-size: 12px;
  color: #fff !important;
  padding-left: 6px;
}
.time {
  color: #fff;
  font-size: 12px;
  margin-bottom: 30px;
}
.itemlist {
  display: flex;
}
.item {
  background-color: rgba(255, 255, 255, 0.1);
  margin: 5px;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 14px;
  transform: scale(0.8);
  color: #fff;
}
.dialog-footer {
  margin-top: 30px;
  text-align: right;
}
.block {
  display: flex;
}
.demonstration {
  padding: 5px 5px 5px 0;
  font-size: 12px;
  color: #fff;
  display: inline-block;
  width: 100px;
  height: 24px;
  line-height: 24px;
}
.block .el-slider {
  padding: 0 5px;
}
.cascadeer .el-cascader {
  width: 100%;
}
.cascadeer .asterisk-left {
  width: 100% !important;
  font-size: 12px;
}
.btn {
  background-color: rgba(255, 255, 255, 0.1);
  margin: 5px;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 14px;
  transform: scale(0.8);
  color: #fff;
}
.snow_log{
  width: 300px;
  height: 230px;
}

#textarea_id{
  height: 200px;
}
.dialog_class{
margin-left: 90px !important;
}
body{
  width: 100%;
  height: 100%;
  background-color: #333;
}
</style>