merger

src/App.vue

@@ -1,14 +1,14 @@
 <template>
-  <HelloWorld />
+  <viewIndex/>
 </template>
 
 <script>
-import viewindex from './view/index.vue'
-import HelloWorld from './components/HelloWorld.vue'
+import viewIndex from './view/myIndex.vue'
+// import HelloWorld from './components/HelloWorld.vue'
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    viewIndex
   }
 }
 </script>

src/components/HelloWorld.vue

@@ -39,12 +39,11 @@ const foW =ref(false);//火灾 true  水灾 false
   CO2：CO2
   Height：水位高度
 */
-// const scalarName = ref("SO2");
-// const filedir =ref("data/Fire/");
-const scalarName = ref("Height");
-const filedir =ref("data/Water/");
-
 
+ const scalarName = ref("CO2");
+const filedir =ref("data/Fire/");
+//const scalarName = ref("Height");
+//const filedir =ref("data/Water/"); 
 const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
     controlSize: 2,
   });

src/view/index.vue

@@ -1,642 +0,0 @@
-<template>
-<div>
-<div>
-       <el-header class="fixed-header">
-        <el-menu class="headMenu_1" mode="horizontal">
-          <!-- <div class="log">
-            <el-image :src="adilog"></el-image>
-          </div> -->
-          <div class="log logtitle">
-          </div>
-          <el-menu-item index="2" @click="showHeadMenu('geneal')">文件
-          </el-menu-item>
-          <el-menu-item index="3" @click="showHeadMenu('physics')">灾情演化</el-menu-item>
-          <el-menu-item index="4" @click="showHeadMenu('solution')">动画</el-menu-item>
-          <el-menu-item index="5" @click="showHeadMenu('result')">帮助</el-menu-item>
-        </el-menu>
-      </el-header>
-</div>
-         <div class="headMenu_2" id="head2"  v-show="headMenu_2Show">
-        <div class="lg_weiyi">
-          <div class="el-padding">
-            <el-row> </el-row>
-          </div>
-        </div>
-</div>
-   <!-- Task Page的弹框的结束-->
-        <el-container class="beij-container">
-          <el-aside v-if="leftMenu_2Show" class="leftMenu_1_1">Aside</el-aside>
-          <el-container>
-            <el-main ref="main3d" :class="headMenu_2Show?'maxh400':'maxh221'">
-            </el-main>
-            <!-- <div class="x" @click="change">==</div> -->
-            <el-footer style="height: 160px" v-show="Consoleshow">
-              <div class="logs_title">
-                Console
-                <div class="x">x</div>
-              </div>
-              <div class="logs_console">
-                <textarea v-model="logs" style="width: 100%;height:120px">
-                  "欢迎来到HCFD！"
-                </textarea>
-              </div>
-            </el-footer>
-          </el-container>
-        </el-container>
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'app',
-    data() {
-       return {
-           headMenu_2:false,
-            leftMenu_2Show: false,
-            headMenu_2Show: false,
-           Consoleshow:true,
-           logs:true,
-         
-       }
-     },
-    methods: {
-  showHeadMenu(el){
-      console.log(el)
-      if(el=='solution'){
-        this.headMenu_2Show=true;
-      }else{
-          this.headMenu_2Show=false;  
-      }
-
-  }
-  }
-}
-</script>
-
-<style>
-.el-header{
-    height: 40px !important;
-}
-.el-header ul{
-    padding-left: 120px;
-    height: 40px;
-    overflow: hidden;
-}
-html,body,.el-header{
-    padding: 0;
-    margin: 0;
-}
-.el-header,.el-footer{
-   padding: 0 !important;
-}
-@media screen and (max-width:1650px){
-  .headMenu_2 .el-col{
-    transform:scale(0.9);
-    transform-origin: 0 0;
-  }
-  .headMenu_2{
-    height:80px !important;
-  }
-}
-@media screen and (max-width:1330px){
-  .headMenu_2 .el-col{
-    transform:scale(0.8);
-    transform-origin: 0 0;
-  }
-  .headMenu_2{
-    height: 80px !important;
-  }
-  .asideTag2,.asideTag {
-    transform:scale(0.7);
-    transform-origin: 0 0;
-  }
-}
-@media screen and (max-width:1160px){
-  .headMenu_2 .el-col{
-    transform:scale(0.7);
-    transform-origin: 0 0;
-  }
-  .asideTag2{
-    left: 91%;
-  }
-  .el-aside{
-    width:100px !important;
-  }
-  .headMenu_2{
-    height: 80px !important;
-  }
-}
-body {
-  font-size: 62.5%;
-  position: relative;
-}
-.el-padding {
-  padding: 5px 20px;
-}
-.headMenu_1 {
-  background: #232426;
-}
-.logtitle {
-  color: #fff;
-}
-.el-header {
-  padding: 0;
-}
-.logs_console {
-  overflow: hidden;
-}
-.logs_console textarea{
-border:none;
-}
-.el-menu {
-  padding-left: 13px;
-}
-.el-menu .el-menu-item:hover {
-  background-color: #bfc5cb;
-  color: #333333;
-}
-
-.el-menu--horizontal > .el-menu-item {
-  color: #e4e4e4;
-}
-.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  color: #e4e4e4;
-}
-.el-menu--horizontal > .el-menu-item.is-active {
-  color: #e4e4e4;
-}
-.el-menu--horizontal > .el-submenu .el-submenu__title {
-  color: #e4e4e4;
-  font-size: 16px;
-}
-.el-menu--horizontal {
-  -webkit-box-pack: inherit;
-  justify-content: flex-start;
-}
-.logtitle li:nth-child(1) {
-  margin-right: 100px;
-}
-.el-menu-item {
-  font-size: 16px;
-  padding: 0 35px;
-}
-#head2 {
-  background-color: #fff;
-}
-#lg-title {
-  text-align: left;
-  padding: 6px 0px 6px 3.125vw;
-}
-.Task-lg {
-  width: 100%;
-}
-.el-col-1 {
-  width: 0;
-}
-.title_content_1 {
-  padding-left: 2.96875vw;
-}
-.el-col-3 li {
-  padding: 6px 0;
-}
-.lg-er .el-col-3 li {
-  padding-top: 0;
-}
-.el-image {
-  padding-right: 4px;
-}
-.lg_weiyi .el-radio {
-  display: block;
-  padding: 6px 0 6px 3.125vw;
-}
-.el-dialog .el-input__inner {
-  height: 34px;
-  line-height: 34px;
-}
-.el-input--mini {
-  display: inline;
-}
-.lg-centent {
-  background-color: #f4f4f4;
-}
-.leiluoshu .el-form-item__content {
-  margin-left: 180px;
-}
-.lg-centent .el-row {
-  height: 100%;
-}
-.lg-modl {
-  width: 300px;
-  background: #f4f4f4;
-}
-.lg-centent .lg-modl .Task-lg {
-  overflow-y: auto;
-}
-.lg-san .el-col-3 li {
-  padding: 0;
-}
-
-.el-input--mini .el-input__inner {
-  width: 100%;
-}
-.el-radio__input.is-checked .el-radio__inner {
-  border-color: #333;
-  background: #333;
-}
-.beij-container {
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(180deg, #ccd3e2 0%, rgba(255, 255, 255, 0) 100%);
-}
-.el-footer {
-  padding: 0;
-  height: 149px;
-  /* overflow-y: auto; */
-}
-
-.el-input__inner {
-  height: 30px;
-}
-.el-input--mini {
-  display: inline;
-}
-.movieControlTitle {
-  font-weight: 700;
-  position: relative;
-  top: -8px;
-  background-color: #d7dce7;
-  padding: 0 10px;
-  font-size: 16px;
-}
-
-.el-main {
-  position: relative;
-  background-repeat: no-repeat;
-  
-}
-.maxh221{
-  height: calc(100vh - 205px);
-}
-.maxh400{
-height: calc(100vh - 286px);
-}
-body {
-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
-  position: relative;
-  background-color: #eceef0;
-}
-.el-loading-mask {
-  background: none;
-}
-.el-tree {
-  background-color: #eceef0;
-  padding: 13px;
-}
-.lg-er .el-col {
-  padding: 0 12px;
-}
-.el-radio-button:first-child .el-radio-button__inner {
-  border-radius: 4px;
-}
-.el-radio-button:last-child .el-radio-button__inner {
-  border-radius: 4px;
-}
-.lg-er label {
-  padding: 5px 0;
-}
-.el-radio-button__inner {
-  border: none;
-}
-.lg-er label {
-  display: block;
-}
-.lg-form li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.lg-form>li>span{
-  display:inline-block;
-  width:65%
-}
-.lg-form>li>.el-input{
-  width:35%
-}
-.lg-form {
-  padding-bottom: 5px;
-}
-.lg-san .el-col {
-  padding: 5px 0.5vw;
-}
-.lg-san label {
-  padding: 10px 0;
-}
-#head2 .lg-san input {
-  margin: 3px 0px;
-}
-.lg-san .el-padding {
-  padding: 0 20px;
-}
-
-.el-button + .el-button {
-  margin-left: 0;
-}
-.maxh100{
-  max-height: calc(100vh - 100px);
-}
-.maxh290{
-  max-height: calc(100vh - 290px);
-}
-.el-button{
-  margin-bottom: 2px;
-}
-.lg-si .el-input__inner {
-  padding: 0 0 0 0;
-}
-.lg-si-right {
-  padding-left: 30px;
-}
-.lg-button {
-  background-color: #4c4f54;
-  color: #fff;
-  border-radius: 10px;
-}
-.el-button--mini,
-.el-button--mini.is-round {
-  padding: 5px 15px;
-}
-.lg-san {
-  height: 189px;
-  overflow: auto;
-}
-.lg-si li {
-  padding: 2px 0;
-}
-.el-dialog__body .el-input {
-  padding: 5px 0;
-}
-.el-dialog__body .el-form li:first {
-  padding: 10px 0;
-}
-.logs_title {
-  background: #bfc5cb;
-  padding: 10px;
-  font-size: 16px;
- text-align: left;
-}
-.el-col-4,
-.el-col-3 {
-  position: relative;
-}
-.lg-more {
-  position: absolute;
-  right: 0;
-  bottom: 15px;
-}
-.lg-bg .el-dialog__header {
-  background: #efefef;
-  border-color: #82848a;
-   text-align: center;
-   font-weight: 600;
-}
-.dialog-block label {
-  display: block;
-  font-size: 20px;
-}
-.el-dialog__footer {
-  padding: 0px 20px 20px;
-}
-.dialog-block .el-dialog {
-  width: 23%;
-}
-.Conditions .el-dialog {
-  width: 26%;
-}
-.el-dialog__body {
-  padding: 20px 20px;
-}
-.el-dialog {
-  max-width: 600px;
-  min-width: 452px;
-}
-.lg-Solution .el-dialog {
-  width: 16%;
-}
-.lg-Solution label {
-  display: block;
-  padding: 5px 0;
-}
-.lg-out-h .el-checkbox {
-  width: 40%;
-}
-
-.showright {
-  float: right;
-  margin-right: 20px;
-}
-.Task-lg li {
-  padding: 5px 0;
-}
-.Task-lg .el-radio {
-  display: block;
-  padding: 3px 0;
-}
-.tack-btn .el-button {
-  padding: 8px 16px;
-  display: block;
-}
-
-.outline {
-  font-size: 20px;
-  padding: 10px 20px;
-  font-weight: 600;
-}
-.pagination {
-  margin-top: 10px;
-}
-.pagination  .el-input{
-  padding: 0;
-}
-#head2 input {
-  padding-left: 5px;
-}
-.lg-modl .el-radio-button {
-  display: block;
-  padding: 5px 0;
-}
-.lg-modl .el-select {
-  display: block;
-  padding: 3px 0;
-}
-.lg-modl .lg-si-right {
-  padding: 0;
-}
-.lg-modl .task-si li label {
-  display: block;
-}
-.el-col-24 {
-  margin-bottom: 10px;
-}
-.x {
-  cursor: default;
-  float: right;
-}
-.lg-y-z .el-dialog {
-  width: 16%;
-}
-.gongju .el-form-item__content {
-  margin-left: 185px;
-}
-.gongju .el-form-item {
-  margin-bottom: 0;
-}
-.exloadbox{
-  float: right;
-  margin-right: 100px;
-}
-
-#head2 input {
-  margin: 3px 5px;
-}
-.contour .el-input-number__decrease,
-.el-input-number__increase {
-  top: 5px;
-  width: 40px;
-  cursor: pointer;
-  font-size: 13px;
-  height: 28px;
-  line-height: 28px;
-}
-.line {
-  width: 0px;
-  height: 99px;
-  border: 1px solid #d4d3d1;
-  float: right;
-}
-.lg_weiyi .title {
-  text-align: center;
-}
-.title {
-  font-size: 0.8vw !important;
-  margin: 6px 0px !important;
-  font-weight: 600;
-}
-.headMenu_2 {
-  height:80px;
-  overflow: hidden;
-  font-size: 12px;
-  width: 100%;
-}
-.headMenu_2 span{
-  font-size: 12px !important;
-}
-.headMenu_2 .el-input__inner{
-  padding:0 2px
-}
-.lisin>li{
-  display: flex;
-  align-items: center;
-}
-.lisin>li>span{
-  display: inline-block;
-  width:100px
-}
-.lisin>li>.el-input{
-  width:120px
-}
-.sblock{
-  display: inline-block;
-  width:40%
-}
-.disinblok{
-  display: inline-block;
-}
-.inpw50{
-  width:50%
-}
-.inpw100{
-  width:100%
-}
-.inpw35{
-  width:25%
-}
-.inpw75{
-  width:75px
-}
-.inpwidth{
-  flex:1
-}
-.lheig34{
-  line-height: 34px;
-}
-.pdingf10{
-  padding-left: 10px !important;
-}
-.move{
-  position: relative;
-  top: -8px;
-  right:-30px
-}
-.discenter{
-  display: flex;
-  justify-content: center;
-}
-.disrs{
-  display: flex;
-  flex-direction: row-reverse;
-}
-.padding0{
-  padding: 0 !important;
-}
-.marr30{
-  margin-right: 30px;
-}
-.marb5{
-  margin-bottom:5px
-}
-.disacent{
-  display: flex;
-  align-items: center;
-}
-.div64>div,
-.disflex,
-.disflex55{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.div64>div>span{
-  display: inline-block;
-  width:65%
-}
-.span100{
-  display: inline-block;
-  width: 100px;
-}
-.div64>div>.el-input{
-  width: 35%;
-}
-.disflex55>span{
-  display: inline-block;
-  width:50%
-}
-.disflex55>.el-input{
-  width:50%
-}
-.el-dialog__header{
-  font-size: 16px;
-  font-weight: 700;
-  background: #ccc;
-  padding: 0 10px;
-  line-height: 45px;
-}
-.flexpad30{
-  display: flex;
-}
-.flexpad30>div{
-  padding-right: 30px;
-}
-
-
-</style>
-

src/view/myHelloleft.vue

@@ -0,0 +1,274 @@
+<template>
+  <div style="color:#fff">
+    
+    <div ref="vtkContainer" />
+   <!-- <my-leftfloat/> -->
+   <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" > 当前时间：00.02.00</div>
+           <el-form-item
+          label="动画开始"
+          v-model="starttime"
+        >
+          <el-input
+            v-model="num"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+         <el-form-item
+          label="动画结束"
+           v-model="endtime"
+        >
+          <el-input
+            v-model="num"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+       <div class="itemlist">
+           <div class="item">播&nbsp;&nbsp;放</div>
+            <div class="item">暂&nbsp;&nbsp;停</div>
+            <div class="item">上一分钟</div>
+            <div class="item">下一分钟</div>
+       </div>
+         <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>
+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 { onMounted,ref,reactive } from 'vue';
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+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 myleftfloat from './myHelloleft.vue'
+export default {
+  name: 'HelloWorld',
+    components: {
+    // myleftfloat, 
+  },
+  //体制
+  setup() {
+    //安装时
+    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(5);
+      let endtime=ref(60);
+    function  add(id){
+      if(id==2){
+       dialogVisible.value=true
+      }
+      }
+    onMounted(() => {
+     const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+      const renderer = fullScreenRenderer.getRenderer();
+      const renderWindow = fullScreenRenderer.getRenderWindow();
+
+      const resetCamera = renderer.resetCamera;
+      const render = renderWindow.render;
+              
+      const mapper = vtkMapper.newInstance();
+      const actor = vtkActor.newInstance();
+      const reader = vtkUnstructuredDataReader.newInstance();
+      const scalarName ="Pressure";
+      
+      var scalars;
+      reader.setUrl('data/Fire/POST0.vtk').then(() => {
+          const polydata = reader.getOutputData(0);        
+           scalars = reader.getOutputData(1);    
+          const scalarArray=scalars.get(scalarName);
+          const dataArray = vtkDataArray.newInstance({
+            name:scalarName,
+            size:polydata.getNumberOfPoints()
+          });
+          dataArray.setData(scalarArray);
+          polydata.getPointData().setScalars(dataArray); 
+          actor.setMapper(mapper);
+          mapper.setInputData(polydata);
+          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)
+          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);
+           };     
+          }
+          scalarBarActor.setGenerateTicks(generateTicks(5));
+          scalarBarActor.setAxisLabel(scalarName);
+          scalarBarActor.setDrawAboveRangeSwatch(true);
+          const ctf = vtkColorTransferFunction.newInstance();
+          ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
+          ctf.addRGBPoint(1.0, 1.0, 0.0, 0.0);
+
+          mapper.setLookupTable(ctf);
+          lut = mapper.getLookupTable();
+          scalarBarActor.setScalarsToColors(lut);
+          resetCamera();
+          render();
+
+        for (let index = 1; index <= 60; index++) {
+          var flag =true;
+          while(flag){
+            flag=false;
+              const reader = vtkUnstructuredDataReader.newInstance();
+              reader.setUrl('data/Fire/POST'+index+'.vtk').then(() => {
+                console.log("index:",index);
+                const polydata = mapper.getInputData();    
+                // console.log("polydata:",polydata);
+                const scalars = reader.getOutputData(1);
+                // console.log("scalars:",scalars);        
+                const scalarArray=scalars.get(scalarName);
+                  // console.log("polydata.getNumberOfPoints():",polydata.getNumberOfPoints());        
+                const dataArray = vtkDataArray.newInstance({
+                  name:scalarName,
+                  size:polydata.getNumberOfPoints()
+                });
+                dataArray.setData(scalarArray);
+                polydata.getPointData().setScalars(dataArray); 
+                // mapper.setInputData(polydata);
+                renderWindow.render();
+                flag=true;
+              });
+          }  
+        }
+    
+      });
+     
+
+      renderWindow.render();
+
+
+      
+
+
+
+    });
+    return{listArray,add,num,dialogVisible,starttime,endtime
+    };
+  }
+}
+</script>
+
+<style scoped>
+.controls {
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  background: white;
+  padding: 12px;
+}
+.haha{
+  color: #fff;
+
+}
+.tool{
+  position: fixed;
+  top: 50px;
+  left: 20px;
+
+  z-index:999999;
+
+}
+.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{
+  display: inline-block;
+
+}
+.img .el-image{
+  width: 34px;
+}
+.leftdialong{
+  padding: 15px;
+ width: 300px;
+border: 1px solid;
+position: relative;
+top: -248px;
+left: 67px; 
+border-radius: 5px;
+
+}
+/deep/ .leftdialong .el-form-item__label{
+font-size: 12px;
+color: #fff !important;
+}
+.time{
+  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>

src/view/myIndex.vue

@@ -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)">播&nbsp;&nbsp;放</div>
+            <div class="item" @click="suspend">暂&nbsp;&nbsp;停</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>

vue.config.js

@@ -4,6 +4,6 @@ module.exports = defineConfig({
  transpileDependencies: true,
 
  // If you selectively transpile dependencies:
- transpileDependencies: ["@kitware/vtk.js"]
-  
+ transpileDependencies: ["@kitware/vtk.js"],
+  // lintOnSave: false, //关闭语法检查
 })