水灾火灾

src/view/myIndex.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-    <button @click="increment">Count is: {{ count }}</button>
+  <!--button @click="increment">Count is: {{ count }}</button-->
   
     </div>
     <div id="vtkContainer" />
@@ -52,7 +52,7 @@
     </div>
         
        <div class="itemlist">
-           <div class="item" @click="play(3000)">播&nbsp;&nbsp;放</div>
+           <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>
@@ -81,6 +81,8 @@ 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';
@@ -102,7 +104,7 @@ let starttime=ref(1);
 let endtime=ref(60);
 let timenum=ref(2)
 let isstop=ref(false)
-let arrvalue=reactive(['fire', 'Temperature'])
+let arrvalue=reactive(['Water', 'Height'])
 let options=reactive( [
       {
       value: 'fire',
@@ -138,8 +140,8 @@ function  add(id){
 // 响应式状态
 const count = ref(0);
 const opacity = ref(0.1);
-const min=ref(0.0);
-const max=ref(1.0);
+const min=ref(0);
+const max=ref(1);
 const scalarFAll = ref([]);//火灾标量
 const scalarWAll = ref([]);//水灾标量
 /*
@@ -150,13 +152,13 @@ CO2：CO2
 Height：水位高度
 */
 // const scalarName = ref("CO2");
- const filedir =ref("data/Fire/");
+//  const filedir =ref("data/Fire/");
 //const scalarName = ref("Height");
-// filedir =ref("data/Water/");
-const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
-    controlSize: 11,
-  });
-
+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();
@@ -196,17 +198,12 @@ function sleep(numberMillis) {
   console.log(exitTime);      
 }
 //联级选择
-function handleChange(val){
-//   console.log(val[0])
-//   if(val[0]=='fire'){
-//     let fireval=val[1];
-//     let scalarName = ref(fireval);
-//    let filedir =ref("data/Fire/");
-//   }else{
-// let scalarName = ref("Height");
-// let filedir =ref("data/Water/");
-//   }
-
+function handleChange(val){//   console.log(val[0])
+  arrvalue=val;
+  console.log("arrvalue",arrvalue);
+  min.value=0.0;
+  max.value=1.0;
+  changeScalar();
 }
 //暂停
 function suspend(){
@@ -216,77 +213,41 @@ function suspend(){
 //滑块
 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) => {
- for (let i = 0;i <endtime.value; i++) {
-   if( isstop.value==true){
-  await sleep(time);
-       count.value++;
-    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);
-  polydata.getPointData().setScalars(dataArray); 
- 
-  mapper.clearColorArrays();//强制重建颜色
-  actor.getProperty().setOpacity(count.value);//设置错误的透明度使得页面重新加载  不设置不刷新页面
-  renderWindow.render();
-
-   }
- }
+  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++;
+            changeScalar();
+      }
     }
-      timer(time);
+  }
+  timer(time);
 }
 //回到上一页
 function Prev(){
-    isstop.value=false;
-    count.value--;
-  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);
-  polydata.getPointData().setScalars(dataArray); 
- 
-  mapper.clearColorArrays();//强制重建颜色
-  actor.getProperty().setOpacity(count.value);//设置错误的透明度使得页面重新加载  不设置不刷新页面
-  renderWindow.render();
+  isstop.value=false;
+  count.value--;
+  changeScalar();
 }
 // 用来修改状态、触发更新的函数
 function increment() {
-
-  console.log(arrvalue);
-    isstop.value=false;
+  isstop.value=false;
   count.value++;
-     var scalars;
+  changeScalar();
+}
+function changeScalar(){
+  var scalars;
   if(arrvalue[0]=='fire'){
        scalars=scalarFAll.value[count.value];
   }else {
@@ -294,14 +255,15 @@ function increment() {
   } 
   const polydata = mapper.getInputData();      
   const scalarArray=scalars.get(arrvalue[1]);
-  // console.log("scalarArray:",scalarArray);
+  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);//设置范围
   polydata.getPointData().setScalars(dataArray); 
- 
   mapper.clearColorArrays();//强制重建颜色
   actor.getProperty().setOpacity(count.value);//设置错误的透明度使得页面重新加载  不设置不刷新页面
   renderWindow.render();
@@ -354,13 +316,13 @@ function generateTicks(numberOfTicks) {
 //安装时
 onMounted(() => {
   //div 绑定
-  const rootContainer =document.getElementById("vtkContainer");
-  rootContainer.style.position = 'relative';
-  rootContainer.style.width = '1000px';
-  rootContainer.style.height = '500px';
-  console.log("rootContainer:",rootContainer);    
+  // const rootContainer =document.getElementById("vtkContainer");
+  // rootContainer.style.position = 'relative';
+  // rootContainer.style.width = '1000px';
+  // rootContainer.style.height = '500px';
+  // console.log("rootContainer:",rootContainer);    
  
-  renderWindowWith.setContainer(rootContainer);
+  // renderWindowWith.setContainer(rootContainer);
   // fullScreenRenderer.setBackground([0,0,0]);
 
   // const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();