|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <!--button @click="increment">Count is: {{ count }}</button-->
|
|
|
+ </div>
|
|
|
+ <div id="vtkContainer" />
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <!-- :title1="title1" -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+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 {RouterView,RouterLink} from "vue-router"
|
|
|
+// const router=RouterView();
|
|
|
+
|
|
|
+// const props = {};
|
|
|
+let time = 3 * 60;
|
|
|
+let evolution=ref();
|
|
|
+// 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([]);
|
|
|
+
|
|
|
+function add(id) {
|
|
|
+ if (id == 2) {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ evolution.value.isshow=false;
|
|
|
+ }else if(id==1){
|
|
|
+ // router.push("/myDemo");
|
|
|
+
|
|
|
+}
|
|
|
+ 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 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(() => {
|
|
|
+ // console.log(process.env.VUE_APP_BASE_websokt);
|
|
|
+ // console.log(1111)
|
|
|
+ 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>
|
|
|
+
|
