|
|
@@ -3,7 +3,7 @@
|
|
|
<div>
|
|
|
<!--button @click="increment">Count is: {{ count }}</button-->
|
|
|
</div>
|
|
|
- <!-- <div id="vtkContainer" /> -->
|
|
|
+ <div id="vtkContainer" />
|
|
|
<div class="tool">
|
|
|
<div
|
|
|
class="img"
|
|
|
@@ -99,7 +99,22 @@ 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,nextTick } 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"
|
|
|
// import {RouterView,RouterLink} from "vue-router"
|
|
|
// const router=RouterView();
|
|
|
@@ -186,11 +201,86 @@ function add(id) {
|
|
|
}else{
|
|
|
|
|
|
}
|
|
|
+// 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;
|
|
|
+// }else if(id==3){
|
|
|
+// dialog.value.dialogVisible=true;
|
|
|
+// }
|
|
|
}
|
|
|
+// 响应式状态
|
|
|
+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;
|
|
|
@@ -232,6 +322,79 @@ function Prev() {
|
|
|
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);
|
|
|
+ };
|
|
|
+}
|
|
|
// 日志
|
|
|
// 日志弹框
|
|
|
function logonclick(val){
|
|
|
@@ -239,18 +402,70 @@ function logonclick(val){
|
|
|
rizhi.value.logs='';
|
|
|
}
|
|
|
function getthislog(val) {
|
|
|
- newlog.value =newlog.value + "\n" +val ;
|
|
|
- rizhi.value.logs = newlog.value;
|
|
|
- if(val.includes("Simulating"))
|
|
|
- nextTick(() => {
|
|
|
+console.log(1111)
|
|
|
+ if(val.includes("msg=heartCheck")){
|
|
|
+
|
|
|
+ }else{
|
|
|
+ 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(() => {
|
|
|
+ // 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();
|
|
|
});
|
|
|
// 关闭弹窗
|
|
|
function handleClose(){
|
|
|
@@ -369,10 +584,5 @@ function handleClose(){
|
|
|
.dialog_class{
|
|
|
margin-left: 90px !important;
|
|
|
}
|
|
|
-body{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #333;
|
|
|
-}
|
|
|
</style>
|
|
|
|
