disaster/src/view/myIndex.vue

<template>
  <div>
    <div>
      <!--button @click="increment">Count is: {{ count }}</button-->
    </div>
    <div id="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>
          <!-- <el-form-item
          label="动画开始"
      
        >
          <el-input
               v-model="starttime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
         <el-form-item
          label="动画结束"
      
        >
          <el-input
                 v-model="endtime"
            autocomplete="off"
          ></el-input>
        </el-form-item> -->
          <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>
          <!-- <button @click="inOpacity">透明度： {{ opacity }}</button> -->
          <div class="dialog-footer">
            <span class="btn" @click="dialogVisible = false">关 闭</span>
            <!-- <el-button>关 闭</el-button> -->
            <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 内容 -->
        <!-- 内容 -->
        <div>
   <evolutionView ref="evolution" :title1="title1" @getdata="getdata" />
  </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 * as d3 from "d3-scale";
import { formatDefaultLocale } from "d3-format";
import { ref, onMounted, reactive } from "vue";
import "@kitware/vtk.js/Rendering/Profiles/Geometry";
import vtkRenderWindowWithControlBar from "@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";

import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
import vtkUnstructuredDataReader from "../reader/UnstructuredDataReader.js";
import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
import vtkLookupTable from "@kitware/vtk.js/Common/Core/LookupTable";
import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
import { I } from "@kitware/vtk.js/macros2.js";
import { Representation } from '@kitware/vtk.js/Rendering/Core/Property/Constants';
import evolutionView  from "./evolutionView.vue"

// 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 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 == 2) {
    dialogVisible.value = true;
    evolution.value.isshow=false;
  }else if(id==0){
  
    evolution.value.isshow=true;
    evolution.value.getdata();
    dialogVisible.value = false;
  }
}
// 响应式状态
const count = ref(0);
const opacity = ref(0.1);
const min = ref(0);
const max = ref(1);
const scalarFAll = ref([]); //火灾标量
const scalarWAll = ref([]); //水灾标量
/*
Temperature：温度
Pressure：压强
SO2：SO2
CO2：CO2
Height：水位高度
*/
// const scalarName = ref("CO2");
//  const filedir =ref("data/Fire/");
//const scalarName = ref("Height");
const filedir = ref("data/Water/");
// const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
//     controlSize: 11,
//   });
const renderWindowWith = vtkFullScreenRenderWindow.newInstance();
const renderer = renderWindowWith.getRenderer();
// renderer.setBackground([0.1,0.2,0]);
const renderWindow = renderWindowWith.getRenderWindow();
const resetCamera = renderer.resetCamera;
const render = renderWindow.render;
const mapper = vtkMapper.newInstance();
//Sets scalarMode to USE_POINT_DATA
// mapper.setScalarModeToUsePointData();
const actor = vtkActor.newInstance();
const reader = vtkUnstructuredDataReader.newInstance();
const scalarBarActor = vtkScalarBarActor.newInstance();
// actor.getProperty().setRepresentation(Representation.WIREFRAME);//线
// actor.getProperty().setRepresentation(Representation.POINTS);//点
actor.getProperty().setRepresentation(Representation.SURFACE);//面

// 用来修改状态、触发更新的函数
function inOpacity() {
  opacity.value = opacity.value + 0.1;
  actor.getProperty().setOpacity(opacity.value);
  renderWindow.render();
}
function getMinMax(scalars) {
  // console.log("getMinMax:",scalars);
  min.value = scalars[0];
  max.value = scalars[0];
  for (let index = 0; index <= scalars.length; index++) {
    let scalar = scalars[index];
    if (min.value > scalar) {
      min.value = scalar;
    }
    if (max.value < scalar) {
      max.value = scalar;
    }
  }
  // console.log("max，min:", max.value, min.value);
}
//时间
function sleep(numberMillis) {
  var now = new Date();
  var exitTime = now.getTime() + numberMillis;
  console.log(exitTime);
}
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 increment() {
  isstop.value = false;
  if (count.value == endtime.value) {
    return;
  }
  count.value++;
  changeScalar();
}
function changeScalar() {
  var scalars;
  if (arrvalue[0] == "fire") {
    scalars = scalarFAll.value[count.value];
  } else {
    scalars = scalarWAll.value[count.value];
  }
  const polydata = mapper.getInputData();
  const scalarArray = scalars.get(arrvalue[1]);
  // console.log("scalarArray:", scalarArray);
  const dataArray = vtkDataArray.newInstance({
    name: arrvalue[1],
    size: polydata.getNumberOfPoints(),
  });
  dataArray.setData(scalarArray);
  getMinMax(scalarArray);
  mapper.setScalarRange(min.value, max.value); //设置范围
  scalarBarActor.setAxisLabel(arrvalue[1]);
  polydata.getPointData().setScalars(dataArray);
  mapper.clearColorArrays(); //强制重建颜色
  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
  renderWindow.render();
}
//加载所有 标量数据
function loadScalarAll() {
  //水灾
  for (let index = 0; index <= 60; index++) {
    const reader = vtkUnstructuredDataReader.newInstance();
    reader.setUrl("data/Water/" + "POST" + index + ".vtk").then(() => {
      const scalars = reader.getOutputData(1);
      scalarWAll.value[index] = scalars;
    });
  }
  //火灾
  for (let index = 0; index <= 60; index++) {
    const reader = vtkUnstructuredDataReader.newInstance();
    reader.setUrl("data/Fire/" + "POST" + index + ".vtk").then(() => {
      const scalars = reader.getOutputData(1);
      scalarFAll.value[index] = scalars;
    });
  }
  //  console.log("scalarAll.value:",scalarAll.value);
}
//设置
function generateTicks(numberOfTicks) {
  return (helper) => {
    const lastTickBounds = helper.getLastTickBounds();
    // compute tick marks for axes
    const scale = d3
      .scaleLinear()
      .domain([0.0, 1.0])
      .range([lastTickBounds[0], lastTickBounds[1]]);
    const samples = scale.ticks(numberOfTicks);
    const ticks = samples.map((tick) => scale(tick));
    // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
    formatDefaultLocale({ minus: "\u002D" });
    const format = scale.tickFormat(ticks[0], ticks[ticks.length - 1], numberOfTicks);
    const tickStrings = ticks
      .map(format)
      .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
    helper.setTicks(ticks);
    helper.setTickStrings(tickStrings);
  };
}
//安装时
onMounted(() => {
  arrvalue = ["Water", "Height"];
  reader.setUrl(filedir.value + "POST1.vtk").then(() => {
    const polydata = reader.getOutputData(0);
    const scalars = reader.getOutputData(1);
    const scalarArray = scalars.get(arrvalue[1]);
    // console.log("scalarArray:", scalarArray);
    const dataArray = vtkDataArray.newInstance({
      name: arrvalue[1],
      size: polydata.getNumberOfPoints(),
    });
    dataArray.setData(scalarArray);
    polydata.getPointData().setScalars(dataArray);
    actor.setMapper(mapper);
    mapper.setInputData(polydata);
    getMinMax(scalarArray);
    mapper.setScalarRange(min.value, max.value); //设置范围

    renderer.addActor(actor);

    let lut = mapper.getLookupTable();

    renderer.addActor(scalarBarActor);
    scalarBarActor.setScalarsToColors(lut);
    // console.log("lut:", lut.getRange());
    // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
    scalarBarActor.setGenerateTicks(generateTicks(5));
    scalarBarActor.setAxisLabel(arrvalue[1]);
    scalarBarActor.setDrawAboveRangeSwatch(true);

    //修改设条颜色
    const ctf = vtkColorTransferFunction.newInstance();
    ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
    ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
    ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
    ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
    ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
    mapper.setLookupTable(ctf);
    lut = mapper.getLookupTable();
    scalarBarActor.setScalarsToColors(lut);
    resetCamera();
    render();
  });
  loadScalarAll();
});
</script>

<style>
.controls {
  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;
}
</style>