2024.2.22

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
     browser: true,
     node: true,
     es6: true,
+    jQuery:true,
   },
   extends: ['plugin:vue/recommended', 'eslint:recommended'],
 

package-lock.json

@@ -4148,6 +4148,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
+      "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.4"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -5695,6 +5711,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg=="
+    },
     "js-cookie": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.0.tgz",
@@ -6431,6 +6452,11 @@
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9297,6 +9323,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.4.4",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz",
+      "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -12,9 +12,12 @@
     "@vue/compiler-sfc": "^3.4.14",
     "axios": "^1.6.3",
     "core-js": "^3.8.3",
+    "echarts": "^5.4.3",
     "element-plus": "^2.5.1",
     "exports-loader": "^1.1.0",
+    "jquery": "^3.7.1",
     "js-cookie": "2.2.0",
+    "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "sass": "^1.69.7",
     "sass-loader": "^13.3.3",

src/App.vue

@@ -3,9 +3,10 @@
 </template>
 
 <script setup>
-import viewIndex from './view/index.vue'
+import viewIndex from './view/appmian.vue'
+//import viewIndex from './view/index.vue'
 //import viewIndex from './view/myIndex.vue'
-// import HelloWorld from './components/HelloWorld.vue'
+ //import viewIndex from './view/case.vue'
 // export default {
 //   name: 'App',
 //   // components: {

src/components/layout/NavigateBar.vue

@@ -0,0 +1,120 @@
+<template>
+        <div class="ve_menu_logo">
+            <div class="ve_title">
+            <div class="ve_logo_img">
+                <el-image
+                    style="height: 100%"
+                    :src="logo"
+                    fit="contain"
+                ></el-image>
+            </div>
+            <h3 class="ve_logo_title">
+                {{ title }}
+            </h3>
+        </div>
+            <el-menu
+            :default-active="activeIndex"
+            class="el-menu-demo"
+            mode="horizontal"
+            :popper-offset="2"
+       
+            style="width:780px"
+            background-color="#fff"
+            active-background-color="#0E50C8"
+            text-color="#0E50C8"
+            active-text-color="#fff"
+            @select="handleSelect"
+        >
+            <el-menu-item index="1">矿井信息</el-menu-item>
+            <el-menu-item index="2">污染物信息</el-menu-item>
+            <!-- <el-sub-menu index="2">
+            <template #title>Workspace</template>
+            <el-menu-item index="2-1">item one</el-menu-item>
+            <el-menu-item index="2-2">item two</el-menu-item>
+            <el-menu-item index="2-3">item three</el-menu-item>
+            <el-sub-menu index="2-4">
+                <template #title>item four</template>
+                <el-menu-item index="2-4-1">item one</el-menu-item>
+                <el-menu-item index="2-4-2">item two</el-menu-item>
+                <el-menu-item index="2-4-3">item three</el-menu-item>
+            </el-sub-menu>
+            </el-sub-menu> -->
+            <el-menu-item index="3" >传感器信息</el-menu-item>
+            <el-menu-item index="4">边界设置</el-menu-item>
+            <el-menu-item index="5" >灾害源设置</el-menu-item>
+            <el-menu-item index="6">模拟参数</el-menu-item>
+            <el-menu-item index="7" >灾害推演</el-menu-item>
+        </el-menu>
+</div>
+</template>
+
+<script setup>
+import { computed,ref } from "vue";
+import { useStore } from "vuex";
+import logo from "@/assets/logo.png";
+const title = "灾情推演软件";
+const activeIndex = ref('1')
+const activeIndex2 = ref('1')
+const handleSelect = (key,keyPath) => {
+  console.log(key, keyPath)
+}
+</script>
+<style lang="scss" scoped>
+.ve_menu_logo {
+    width: 100%;
+    height:70px;
+    background: #fff;
+    white-space: nowrap;
+    text-align: left;
+    overflow: hidden;
+    display: flex;
+    .ve_title{
+        
+    }
+    .ve_logo_img {
+        padding-left: 30px;
+        height: 100%;
+        display: inline-block;
+        box-sizing: border-box;
+        vertical-align: middle;
+        padding: 15px;
+    }
+    .ve_logo_title {
+        width: 160px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    margin: 0;
+    vertical-align: middle;
+    color: #000;
+    }
+    .el-menu-demo{
+   height: 70px;
+   border: none !important;
+   .el-menu-item{
+    position: relative;
+    border: none !important;
+   }
+   .is-active{
+    border: none !important;
+    &:after {
+    width: 24px;
+    height: 2px;
+    background-color: #0E50C8;
+    -webkit-transition: all ease-out 0.2s;
+    transition: all ease-out 0.2s;
+    content: "";
+    position: absolute;
+    left: 50%;
+    bottom: 15px;
+    webkit-transform: translate(-50%, 0%);
+    -moz-transform: translate(-50%,0%);
+    transform: translate(-50%, 0%);
+}
+   }
+}
+
+}
+
+</style>

src/main.js

@@ -1,21 +1,23 @@
-import { createApp } from 'vue'
+import { VueElement, createApp,Vue } from 'vue'
 import App from './App.vue'
 import router from './router/index.js'
+import * as echarts from 'echarts'
+import $ from 'jquery'
 //import Vuex from 'vuex' // 引入vuex
 //import router from './router' // vue官方的路由
 import ElementUI from 'element-plus'
 import { createPinia } from 'pinia'
 import 'element-plus/theme-chalk/index.css' // 引入整个Element样式
+import "normalize.css/normalize.css";//重置样式
 
 //import '"element-plus/dist/index.css'
 //创建一个路由.user(router)
+console.log($);
 createApp(App)
     .use(router)
     .use(ElementUI)
     .use(createPinia)
     //.use(Vuex)
     .mount('#app')
-// const app= createApp(App)
-// app.use(ElementUI)
-// app.user(router)
-// app.mount('#app')
+VueElement.prototype.$echarts = echarts;
+

src/view/appmian.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="appmian">
+        <el-container>
+            <el-header >
+                <navigate-bar></navigate-bar>
+            </el-header>
+            <el-main>
+                <el-scrollbar
+                    style="
+                        padding: 20px;
+                        box-sizing: border-box;
+                        background: #fff;
+                    "
+                >
+                    <indexbar/>
+                </el-scrollbar>
+            </el-main>
+        </el-container>
+    </div>
+  </template>
+  
+  <script setup>
+import NavigateBar from "@/components/layout/NavigateBar.vue";
+import indexbar  from "./index.vue"
+  import { ref, onMounted, reactive,nextTick } from "vue";
+  onMounted(() => {
+  });
+
+  
+  </script>
+  
+  <style lang="scss" scoped>
+.appmian{
+    .el-header{
+    padding:0;
+    margin: 0;
+    width: 100%;
+    position: absolute;
+    z-index: 206;
+    top: 0;
+    }
+}
+  </style>
+  
+  

src/view/evolutionView.vue

@@ -335,12 +335,13 @@
      </template>
      <!-- //defineProps,,defineExpose -->
    <script setup>
-   import { ref, onMounted, reactive,toRefs} from "vue";
+   import { ref, onMounted, reactive,toRefs,onBeforeUnmount} from "vue";
    import { Calendar, Search } from '@element-plus/icons-vue'
    import { request, uploadFile } from "@/utils/request";
    import {RouterView,RouterLink,useRouter } from "vue-router"
    import { ElMessage } from 'element-plus'
    const {currentRouter}=useRouter();
+   //let echart=echarts;
    let tableHeight=ref(200)
  const props= defineProps({
   dialogVisiblerz: {
@@ -834,7 +835,6 @@ function handleDeletede(index,row){
 
 // 开始演化
 function beginEvolve(){
-
 initWebSocket();
 }
 //演化过程
@@ -944,12 +944,12 @@ function initWebSocket() {
    //getdata();
    })
        // 组件被销毁之前，清空 sock 对象
-  //  onBeforeUnmount(() => {
-  //     // 关闭连接
-  //     websocketclose;
-  //     // 销毁 websocket 实例对象
-  //     socket = null;
-  //   });
+   onBeforeUnmount(() => {
+      // 关闭连接
+      websocketclose;
+      // 销毁 websocket 实例对象
+      websock.value = null;
+    });
 
    
    defineExpose({isshow,getdata,logs})

src/view/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vtkContainer />
+    <vtkContainer  ref="vtkcontent" :vatkval="vatkval" :arrvalue="arrvalue"/>
     <div class="tool">
       <div
         class="img"
@@ -78,7 +78,7 @@
       <span class="dialog-footer">
         <el-button @click="dialog.dialogVisible = false">取消</el-button>
         <el-button type="primary" @click="dialog.dialogVisible = false">
-          确定
+          确定s
         </el-button>
       </span>
     </template>
@@ -105,6 +105,7 @@ import vtkContainer  from "./vtkContainer.vue"
 // const props = {};
 let time = 3 * 60;
 let evolution=ref();
+let vtkcontent=ref();
 let listArray = reactive([
   { id: 0, img: p1, name: "灾情演化" },
   { id: 1, img: p2, name: "演化过程" },
@@ -129,6 +130,19 @@ let endtime = ref(60);
 let timenum = ref(2);
 let isstop = ref(false);
 let arrvalue = reactive([]);
+const count = ref(0);
+const min = ref(0);
+const max = ref(1);
+let vatkval=ref({
+  num:4,
+  min:0,
+  max:1,
+  count:0,
+  timenum:2,
+  starttime:1,
+  endtime:60.
+})
+
 let options = reactive([
   {
     value: "fire",
@@ -190,7 +204,7 @@ function handleChange(val) {
   arrvalue = val;
   min.value = 0.0;
   max.value = 1.0;
-  changeScalar();
+  vtkcontent.value.changeScalar();
 }
 //暂停
 function suspend() {
@@ -200,7 +214,7 @@ function suspend() {
 //滑块
 function sliderchange(val) {
   // console.log(val);
-  changeScalar();
+  vtkcontent.value.changeScalar();
 }
 
 //播放

src/view/myIndex.vue

@@ -3,7 +3,7 @@
     <div>
       <!--button @click="increment">Count is: {{ count }}</button-->
     </div>
-    <!-- <div id="vtkContainer" /> -->
+    <div id="vtkContainer" />
     <div class="tool">
       <div
         class="img"
@@ -99,7 +99,22 @@ 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,nextTick } 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";
+import { Representation } from '@kitware/vtk.js/Rendering/Core/Property/Constants';
 import evolutionView  from "./evolutionView.vue"
 // import {RouterView,RouterLink} from "vue-router"
 // const router=RouterView();
@@ -186,11 +201,86 @@ function add(id) {
   }else{
 
   }
+//   if (id == 2) {
+//     dialogVisible.value = true;
+//     evolution.value.isshow=false;
+//   }else if(id==1){
+//     // router.push("/myDemo");
 
+// }
+//   else if(id==0){
+  
+//     evolution.value.isshow=true;
+//     evolution.value.getdata();
+//     dialogVisible.value = false;
+//   }else if(id==3){
+//     dialog.value.dialogVisible=true;
+//   }
 }
+// 响应式状态
+const count = ref(0);
+const opacity = ref(0.1);
+const min = ref(0);
+const max = ref(1);
+const scalarFAll = ref([]); //火灾标量
+const scalarWAll = 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 renderWindowWith = vtkFullScreenRenderWindow.newInstance();
+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();
+const scalarBarActor = vtkScalarBarActor.newInstance();
+// actor.getProperty().setRepresentation(Representation.WIREFRAME);//线
+// actor.getProperty().setRepresentation(Representation.POINTS);//点
+actor.getProperty().setRepresentation(Representation.SURFACE);//面
 
-
-
+// 用来修改状态、触发更新的函数
+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(val) {
   arrvalue = val;
   min.value = 0.0;
@@ -232,6 +322,79 @@ function Prev() {
   count.value--;
   changeScalar();
 }
+// 用来修改状态、触发更新的函数
+function increment() {
+  isstop.value = false;
+  if (count.value == endtime.value) {
+    return;
+  }
+  count.value++;
+  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);
+  const dataArray = vtkDataArray.newInstance({
+    name: arrvalue[1],
+    size: polydata.getNumberOfPoints(),
+  });
+  dataArray.setData(scalarArray);
+  getMinMax(scalarArray);
+  mapper.setScalarRange(min.value, max.value); //设置范围
+  scalarBarActor.setAxisLabel(arrvalue[1]);
+  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("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;
+    });
+  }
+  //  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);
+  };
+}
 // 日志
 // 日志弹框
 function logonclick(val){
@@ -239,18 +402,70 @@ function logonclick(val){
   rizhi.value.logs='';
 }
 function  getthislog(val) {
-    newlog.value =newlog.value  + "\n" +val ;
-      rizhi.value.logs = newlog.value;
-      if(val.includes("Simulating"))
-         nextTick(() => {
+console.log(1111)
+        if(val.includes("msg=heartCheck")){
+
+        }else{
+          newlog.value =newlog.value  + "\n" +val ;
+          rizhi.value.logs = newlog.value;
+        }
+      if(val.includes("Simulating")){
+        nextTick(() => {
             let textarea=document.getElementById("textarea_id");
             textarea.scrollTop=textarea.scrollHeight;
        
        
           })
+      }
+         
     }
 //安装时
 onMounted(() => {
+ // console.log(process.env.VUE_APP_BASE_websokt);
+ // console.log(1111)
+  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(),
+    });
+    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();
+
+    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(arrvalue[1]);
+    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();
+  });
+  loadScalarAll();
 });
 //  关闭弹窗
 function handleClose(){
@@ -369,10 +584,5 @@ function handleClose(){
 .dialog_class{
 margin-left: 90px !important;
 }
-body{
-  width: 100%;
-  height: 100%;
-  background-color: #333;
-}
 </style>
 

src/view/vtkContainer.vue

@@ -1,9 +1,8 @@
 <template>
+<div class="vtk">
+    <!-- <div id="vtkContainer" /> -->
 
-    <div id="vtkContainer" />
- 
-    <!-- 内容 -->
-   
+  </div>
 
 </template>
 
@@ -39,16 +38,23 @@ import vtk2DShape from '@kitware/vtk.js/Filters/Sources/Arrow2DSource';
 import vtkTriangleFilter from '@kitware/vtk.js/Filters/General/TriangleFilter';
 // const props = {};
 let time = 3 * 60;
-let evolution = ref();
-
+const props= defineProps({
+  vatkval:{
+        type: Object,
+    },
+    arrvalue:{
+      type: Array,
+     
+    }
+ });
 // let title1=ref("我是父组件")
 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 num = ref(4);
+// let starttime = ref(1);
+// let endtime = ref(60);
+// let timenum = ref(2);
+// let isstop = ref(false);
+ let arrvalue = reactive([]);
 
 // 响应式状态
 const count = ref(0);
@@ -124,23 +130,24 @@ function increment() {
   changeScalar();
 }
 function changeScalar() {
+  console.log(props.arrvalue)
   var scalars;
-  if (arrvalue[0] == "fire") {
+  if (props.arrvalue[0] == "fire") {
     scalars = scalarFAll.value[count.value];
   } else {
     scalars = scalarWAll.value[count.value];
   }
   const polydata = mapper.getInputData();
-  const scalarArray = scalars.get(arrvalue[1]);
+  const scalarArray = scalars.get(props.arrvalue[1]);
   // console.log("scalarArray:", scalarArray);
   const dataArray = vtkDataArray.newInstance({
-    name: arrvalue[1],
+    name: props.arrvalue[1],
     size: polydata.getNumberOfPoints(),
   });
   dataArray.setData(scalarArray);
   getMinMax(scalarArray);
   mapper.setScalarRange(min.value, max.value); //设置范围
-  scalarBarActor.setAxisLabel(arrvalue[1]);
+  scalarBarActor.setAxisLabel(props.arrvalue[1]);
   polydata.getPointData().setScalars(dataArray);
   mapper.clearColorArrays(); //强制重建颜色
   actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
@@ -150,7 +157,7 @@ function changeScalar() {
 function loadScalarAll() {
   //水灾
   // for (let index = 0; index <= 15; index++) {
-  //   const reader = vtkUnstructuredDataReader.newInstance();
+    //   const reader = vtkUnstructuredDataReader.newInstance();
   //   const url="http://192.168.0.131:8187/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&transCode=D00009&userId=5f06c8bc77234f969d13e160b54c27e3&aid=5&stype=Water&step="
   //   reader.setUrl(url + index ).then(() => {
   //     const scalars = reader.getOutputData(1);
@@ -166,6 +173,8 @@ function loadScalarAll() {
       console.log("url + index ", index);
       const scalars = reader.getOutputData(1);
       scalarFAll.value[index] = scalars;
+      console.log(scalars);
+      console.log(2222)
       console.log("url end  ");
     });
   }
@@ -246,12 +255,14 @@ function fireRead() {
       fcon
         .initScalrs()
         .then((result) => {
+         // console.log(fcon.scalars)
           const scalarArray = fcon.scalars[3].get("Pressure");
-          // console.log("scalarArray:", scalarArray);
-          const dataArray = vtkDataArray.newInstance({
+          //console.log("scalarArray:", scalarArray);
+          const dataArray = vtkDataArray.newInstance({ 
             name: arrvalue[1],
             size: fcon.polydata.getNumberOfPoints(),
           });
+          console.log(dataArray)
           dataArray.setData(scalarArray);
           fcon.polydata.getPointData().setScalars(dataArray);
           mapper.setInputData(fcon.polydata);
@@ -291,9 +302,16 @@ function initScalarBar() {
   scalarBarActor.setScalarsToColors(lut);
   renderer.addActor(scalarBarActor);
 }
+defineExpose({changeScalar})
 </script>
 
 <style>
+#vtkContainer{
+  position: relative;
+}
+.vtk{
+  position: relative;
+}
 .controls {
   position: absolute;
   top: 25px;