|
|
@@ -0,0 +1,443 @@
|
|
|
+<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"
|
|
|
+ :popper-append-to-body="false"
|
|
|
+ v-model="value"
|
|
|
+ :options="options"
|
|
|
+ @change="handleChange"></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="itemlist">
|
|
|
+ <div class="item" @click="play(3000)">播 放</div>
|
|
|
+ <div class="item" @click="suspend">暂 停</div>
|
|
|
+ <div class="item" @click="Prev" >上一分钟</div>
|
|
|
+ <div class="item" @click="increment">下一分钟</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <button @click="inOpacity">透明度： {{ opacity }}</button> -->
|
|
|
+ <!-- <div class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
|
+ </div > -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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 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'
|
|
|
+ let time=3*60
|
|
|
+ let listArray=reactive([
|
|
|
+ {id:0,img:p1,name:'灾情演化'},
|
|
|
+ {id:1,img:p2,name:'演化过程'},
|
|
|
+ {id:2,img:p3,name:'动画'},
|
|
|
+ {id:3,img:p4,name:'日志'},
|
|
|
+ ]);
|
|
|
+ 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 value=ref('')
|
|
|
+ let options=(
|
|
|
+ [
|
|
|
+ {
|
|
|
+ value: 'ziyuan',
|
|
|
+ label: '火灾',
|
|
|
+ children: [{
|
|
|
+ value: 'Temperature',
|
|
|
+ label: '温度'
|
|
|
+ }, {
|
|
|
+ value: 'Pressure',
|
|
|
+ label: '压强'
|
|
|
+ }, {
|
|
|
+ value: 'SO2',
|
|
|
+ label: 'SO2'
|
|
|
+ }, {
|
|
|
+ value: 'CO2',
|
|
|
+ label: 'CO2'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'Water',
|
|
|
+ label: '水灾',
|
|
|
+ children: [{
|
|
|
+ value: 'axure',
|
|
|
+ label: '水位高度源'
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ )
|
|
|
+
|
|
|
+ function add(id){
|
|
|
+ if(id==2){
|
|
|
+ dialogVisible.value=true
|
|
|
+ }
|
|
|
+ }
|
|
|
+// 响应式状态
|
|
|
+const count = ref(0);
|
|
|
+const opacity = ref(0.1);
|
|
|
+
|
|
|
+
|
|
|
+const min=ref(0.0);
|
|
|
+const max=ref(1.0);
|
|
|
+const scalarAll = 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 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();
|
|
|
+
|
|
|
+// 用来修改状态、触发更新的函数
|
|
|
+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(){
|
|
|
+
|
|
|
+}
|
|
|
+//暂停
|
|
|
+function suspend(){
|
|
|
+ isstop.value=false;
|
|
|
+ console.log(isstop.value);
|
|
|
+}
|
|
|
+//播放
|
|
|
+function play(time){
|
|
|
+ isstop.value=true;
|
|
|
+ const sleep = (timeout = time) =>
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ setTimeout(resolve, timeout);
|
|
|
+ });
|
|
|
+ let timer = async (timeout) => {
|
|
|
+ for (let i = 0;i <endtime.value; i++) {
|
|
|
+ if( isstop.value==true){
|
|
|
+ await sleep(time);
|
|
|
+ count.value++;
|
|
|
+ const scalars=scalarAll.value[count.value];
|
|
|
+ const polydata = mapper.getInputData();
|
|
|
+ const scalarArray=scalars.get(scalarName.value);
|
|
|
+ // console.log("scalarArray:",scalarArray);
|
|
|
+ const dataArray = vtkDataArray.newInstance({
|
|
|
+ name:scalarName.value,
|
|
|
+ size:polydata.getNumberOfPoints()
|
|
|
+ });
|
|
|
+ dataArray.setData(scalarArray);
|
|
|
+ polydata.getPointData().setScalars(dataArray);
|
|
|
+
|
|
|
+ mapper.clearColorArrays();//强制重建颜色
|
|
|
+ actor.getProperty().setOpacity(count.value);//设置错误的透明度使得页面重新加载 不设置不刷新页面
|
|
|
+ renderWindow.render();
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ timer(time);
|
|
|
+}
|
|
|
+//回到上一页
|
|
|
+function Prev(){
|
|
|
+ isstop.value=false;
|
|
|
+ count.value--;
|
|
|
+ const scalars=scalarAll.value[count.value];
|
|
|
+ const polydata = mapper.getInputData();
|
|
|
+ const scalarArray=scalars.get(scalarName.value);
|
|
|
+ // console.log("scalarArray:",scalarArray);
|
|
|
+ const dataArray = vtkDataArray.newInstance({
|
|
|
+ name:scalarName.value,
|
|
|
+ size:polydata.getNumberOfPoints()
|
|
|
+ });
|
|
|
+ dataArray.setData(scalarArray);
|
|
|
+ polydata.getPointData().setScalars(dataArray);
|
|
|
+
|
|
|
+ mapper.clearColorArrays();//强制重建颜色
|
|
|
+ actor.getProperty().setOpacity(count.value);//设置错误的透明度使得页面重新加载 不设置不刷新页面
|
|
|
+ renderWindow.render();
|
|
|
+}
|
|
|
+// 用来修改状态、触发更新的函数
|
|
|
+function increment() {
|
|
|
+ isstop.value=false;
|
|
|
+ count.value++;
|
|
|
+ const scalars=scalarAll.value[count.value];
|
|
|
+ const polydata = mapper.getInputData();
|
|
|
+ const scalarArray=scalars.get(scalarName.value);
|
|
|
+ // console.log("scalarArray:",scalarArray);
|
|
|
+ const dataArray = vtkDataArray.newInstance({
|
|
|
+ name:scalarName.value,
|
|
|
+ size:polydata.getNumberOfPoints()
|
|
|
+ });
|
|
|
+ dataArray.setData(scalarArray);
|
|
|
+ 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(filedir.value+'POST'+index+'.vtk').then(() => {
|
|
|
+ const scalars = reader.getOutputData(1);
|
|
|
+ scalarAll.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(() => {
|
|
|
+ //div 绑定
|
|
|
+ const rootContainer =document.getElementById("vtkContainer");
|
|
|
+ rootContainer.style.position = 'relative';
|
|
|
+ rootContainer.style.width = '1000px';
|
|
|
+ rootContainer.style.height = '500px';
|
|
|
+ console.log("rootContainer:",rootContainer);
|
|
|
+
|
|
|
+ renderWindowWith.setContainer(rootContainer);
|
|
|
+ // fullScreenRenderer.setBackground([0,0,0]);
|
|
|
+
|
|
|
+ // const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
|
|
|
+
|
|
|
+ reader.setUrl(filedir.value+'POST1.vtk').then(() => {
|
|
|
+ const polydata = reader.getOutputData(0);
|
|
|
+ const scalars = reader.getOutputData(1);
|
|
|
+ const scalarArray=scalars.get(scalarName.value);
|
|
|
+ console.log("scalarArray:",scalarArray);
|
|
|
+ const dataArray = vtkDataArray.newInstance({
|
|
|
+ name:scalarName.value,
|
|
|
+ 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();
|
|
|
+ const scalarBarActor = vtkScalarBarActor.newInstance();
|
|
|
+ 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(scalarName.value);
|
|
|
+ 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();
|
|
|
+ });
|
|
|
+ // renderWindow.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;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ position: relative;
|
|
|
+ top: -248px;
|
|
|
+ left: 69px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+}
|
|
|
+ .leftdialong .el-form-item__label{
|
|
|
+font-size: 12px;
|
|
|
+color: #fff !important;
|
|
|
+}
|
|
|
+.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);
|
|
|
+}
|
|
|
+.dialog-footer{
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+</style>
|
