1.30 0.4

src/view/myHelloleft.vue

@@ -1,274 +0,0 @@
-<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>