动画

src/view/myIndex.vue

@@ -1,31 +1,36 @@
 <template>
   <div>
     <div>
-  <!--button @click="increment">Count is: {{ count }}</button-->
-  
+      <!--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="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="leftdialong"  v-show="dialogVisible">
-           <div class="time" > 当前时间：{{count}}</div>
-             <div class="block">
-        <el-form-item label="标   量" >
-        <el-cascader
-        transfer="true"
-        clearable
-        :popper-append-to-body="false"
-          v-model="arrvalue"
-          :options="options"
-          :props="props"
-          @change="handleChange($event)"></el-cascader>
+      <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"
+                clearable
+                :popper-append-to-body="false"
+                v-model="arrvalue"
+                :options="options"
+                :props="props"
+                @change="handleChange($event)"
+              ></el-cascader>
             </el-form-item>
-      </div>
-           <!-- <el-form-item
+          </div>
+          <!-- <el-form-item
           label="动画开始"
       
         >
@@ -43,115 +48,118 @@
             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="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="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>
+          <!-- <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>
-</template >
+</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 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'
-const props = {
-}
-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:'日志'},
+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";
+const props = {};
+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 arrvalue=reactive(['Water', 'Height'])
-let options=reactive( [
+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: 'fire',
-      label: '火灾',
-      children: [{
-        value: 'Temperature',
-        label: '温度'
-      }, {
-        value: 'Pressure',
-        label: '压强'
-      }, {
-        value: 'SO2',
-        label: 'SO2'
-      }, {
-        value: 'CO2',
-        label: 'CO2'
-      }]
-    },
-    {
-      value: 'Water',
-      label: '水灾',
-      children: [{
-        value: 'Height',
-        label: '水位高度源'
-      }, {
-        value: 'SiO2',
-        label: 'SiO2'
-      }]
-    },
-    ])
-function  add(id){
-  if(id==2){
-    dialogVisible.value=true
-  }
+        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;
   }
+}
 // 响应式状态
 const count = ref(0);
 const opacity = ref(0.1);
-const min=ref(0);
-const max=ref(1);
-const scalarFAll = ref([]);//火灾标量
-const scalarWAll = ref([]);//水灾标量
+const min = ref(0);
+const max = ref(1);
+const scalarFAll = ref([]); //火灾标量
+const scalarWAll = ref([]); //水灾标量
 /*
 Temperature：温度
 Pressure：压强
@@ -162,13 +170,13 @@ Height：水位高度
 // const scalarName = ref("CO2");
 //  const filedir =ref("data/Fire/");
 //const scalarName = ref("Height");
-const filedir =ref("data/Water/");
+const filedir = ref("data/Water/");
 // const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
 //     controlSize: 11,
 //   });
-const renderWindowWith= vtkFullScreenRenderWindow.newInstance();
+const renderWindowWith = vtkFullScreenRenderWindow.newInstance();
 const renderer = renderWindowWith.getRenderer();
-// renderer.setBackground([0.1,0.2,0]); 
+// renderer.setBackground([0.1,0.2,0]);
 const renderWindow = renderWindowWith.getRenderWindow();
 const resetCamera = renderer.resetCamera;
 const render = renderWindow.render;
@@ -180,131 +188,124 @@ const reader = vtkUnstructuredDataReader.newInstance();
 
 // 用来修改状态、触发更新的函数
 function inOpacity() {
-  opacity.value=opacity.value+0.1;
+  opacity.value = opacity.value + 0.1;
   actor.getProperty().setOpacity(opacity.value);
   renderWindow.render();
 }
-function getMinMax(scalars){
+function getMinMax(scalars) {
   // console.log("getMinMax:",scalars);
-       min.value=scalars[0];
-       max.value=scalars[0];
+  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;
-      }
+    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);
+  // console.log("max，min:", max.value, min.value);
 }
 //时间
 function sleep(numberMillis) {
   var now = new Date();
   var exitTime = now.getTime() + numberMillis;
-  console.log(exitTime);      
+  console.log(exitTime);
 }
-//联级选择
-function exchange(){
-  console.log(1111)
-    arrvalue=[];
-    console.log(arrvalue);
-}
-function handleChange(val){
-  
-
-
-  arrvalue=val;
-  console.log("arrvalue",arrvalue);
- // min.value=0.0;
- // max.value=1.0;
- // changeScalar();
+function handleChange(val) {
+  arrvalue = val;
+  min.value = 0.0;
+  max.value = 1.0;
+  changeScalar();
 }
 //暂停
-function suspend(){
-  isstop.value=false;
+function suspend() {
+  isstop.value = false;
   console.log(isstop.value);
 }
 //滑块
-function sliderchange(val){
-  console.log(val);
-  changeScalar()
+function sliderchange(val) {
+  // console.log(val);
+  changeScalar();
 }
 
 //播放
-function play(time){
-  isstop.value=true;
+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){
+    while (count.value < endtime.value) {
+      if (isstop.value == true) {
         await sleep(time);
-            count.value++;
-            changeScalar();
+        changeScalar();
+        count.value++;
       }
     }
-  }
+  };
   timer(time);
 }
 //回到上一页
-function Prev(){
-  isstop.value=false;
+function Prev() {
+  isstop.value = false;
   count.value--;
   changeScalar();
 }
 // 用来修改状态、触发更新的函数
 function increment() {
-  isstop.value=false;
+  isstop.value = false;
+  if (count.value == endtime.value) {
+    return;
+  }
   count.value++;
   changeScalar();
 }
-function 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);
+  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()
-  }); 
+    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);//设置错误的透明度使得页面重新加载  不设置不刷新页面
+  mapper.setScalarRange(min.value, max.value); //设置范围
+  polydata.getPointData().setScalars(dataArray);
+  mapper.clearColorArrays(); //强制重建颜色
+  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
   renderWindow.render();
 }
 //加载所有 标量数据
-function loadScalarAll(){
+function loadScalarAll() {
   //水灾
- for (let index = 0; index <= 60; index++) {
+  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;
+    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;
+    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();
@@ -316,48 +317,33 @@ function generateTicks(numberOfTicks) {
     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
-    );
+    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();
-  console.log("arrvalue:",arrvalue)
-  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);
+  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()
+      name: arrvalue[1],
+      size: polydata.getNumberOfPoints(),
     });
     dataArray.setData(scalarArray);
-    polydata.getPointData().setScalars(dataArray); 
+    polydata.getPointData().setScalars(dataArray);
     actor.setMapper(mapper);
     mapper.setInputData(polydata);
     getMinMax(scalarArray);
-    mapper.setScalarRange(min.value,max.value);//设置范围
+    mapper.setScalarRange(min.value, max.value); //设置范围
 
     renderer.addActor(actor);
 
@@ -365,12 +351,12 @@ onMounted(() => {
     const scalarBarActor = vtkScalarBarActor.newInstance();
     renderer.addActor(scalarBarActor);
     scalarBarActor.setScalarsToColors(lut);
-    console.log("lut:",lut.getRange());    
+    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);
@@ -379,20 +365,15 @@ onMounted(() => {
     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;
@@ -401,98 +382,95 @@ onMounted(() => {
   background: white;
   padding: 12px;
 }
-.haha{
+.haha {
   color: #fff;
-
 }
-.tool{
+.tool {
   position: fixed;
   top: 50px;
   left: 20px;
 
-  z-index:205;
-
+  z-index: 205;
 }
-.img{
+.img {
   width: 48px;
-margin: -6px 0;
+  margin: -6px 0;
   padding: 8px 10px;
-  background-color:rgba(255, 255, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1);
   font-size: 12px;
   transform: scale(0.9);
 }
-.img span{
-    color: #fff;
+.img span {
+  color: #fff;
   display: inline-block;
-
 }
-.img .el-image{
+.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 {
+  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;
+.leftdialong .el-form-item__label {
+  font-size: 12px;
+  color: #fff !important;
+  padding-left: 6px;
 }
-.time{
+.time {
   color: #fff;
   font-size: 12px;
   margin-bottom: 30px;
 }
-.itemlist{
+.itemlist {
   display: flex;
 }
-.item{
+.item {
   background-color: rgba(255, 255, 255, 0.1);
   margin: 5px;
-  padding:5px 9px;
-border-radius: 5px;
-font-size: 14px;
+  padding: 5px 9px;
+  border-radius: 5px;
+  font-size: 14px;
   transform: scale(0.8);
-      color: #fff;
+  color: #fff;
 }
-.dialog-footer{
+.dialog-footer {
   margin-top: 30px;
   text-align: right;
 }
-.block{
-display: flex;
+.block {
+  display: flex;
 }
-.demonstration{
-padding: 5px 5px 5px 0;
-font-size: 12px;
-color: #fff;
-display: inline-block;
-width:100px;
-height: 24px;
-line-height: 24px;
+.demonstration {
+  padding: 5px 5px 5px 0;
+  font-size: 12px;
+  color: #fff;
+  display: inline-block;
+  width: 100px;
+  height: 24px;
+  line-height: 24px;
 }
-.block .el-slider{
+.block .el-slider {
   padding: 0 5px;
 }
-.cascadeer .el-cascader{
+.cascadeer .el-cascader {
   width: 100%;
 }
-.cascadeer .asterisk-left{
-    width: 100% !important;
-    font-size: 12px;
+.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;
+.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>