24.1.2

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>