1维瓦斯爆炸

src/control/gassControl.js

@@ -34,7 +34,7 @@ export class gassControl {
     //几何数据初始化
     async initGemetry(aid) {
         this.aid =aid;
-        const url = this._url + this.aid + "&transCode=D400001";
+        const url = this._url + this.aid + "&transCode=D40001";
         await this.reader.setUrl(url).then(() => {
             this.polydata = this.reader.getOutputData(0);
         });

src/view/index/explode.vue

@@ -1,221 +1,289 @@
 <template>
-    <!-- 一维瓦斯爆炸弹出列表-->
-    <div>
-    <el-dialog v-model="expdialog"
-    width="1100" 
-     align-center
-     draggable
-     :modal="false"
-      :append-to-body="true"
-      :close-on-click-modal="true"
-      :fullscreen="false"
-      :modal-append-to-body="false"
-      modal-class="summary-dlg"
+  <div id="expleft1" style="width:750px;height:500px;position: absolute;z-index: 9999999;">
+    <h1>1212</h1>
+  </div>
+  <!-- 一维瓦斯爆炸弹出列表-->
+  
+</template>
+   <script setup>
+import zhCn from "element-plus/es/locale/lang/zh-cn"
+import { ref, onMounted, reactive } from "vue"
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request"
+import { ElMessage, ElButton, ElDialog, ElSelect } from "element-plus"
+import { createGassControl } from "@/control/gassControl.js"
+import t1 from "@/assets/img/t1.png"
+import t2 from "@/assets/img/t2.png"
+import t3 from "@/assets/img/t3.png"
+import t4 from "@/assets/img/t4.png"
 
-       class="dialog_class4 bgcolor tianjia  foter_l tianjia">
-        <template #header="{ titleId, titleClass }">
-            <div class="my-header ">
-                <!-- <el-image :src="icon" fit="contain"></el-image> -->
-                <h4 :id="titleId" :class="titleClass">一维瓦斯爆炸演化</h4>
+import * as d3 from "d3-scale";
+import { formatDefaultLocale } from "d3-format";
+import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
+import vtkRenderWindowWithControlBar from "@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar";
+import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
+import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
+import { Representation } from "@kitware/vtk.js/Rendering/Core/Property/Constants";
+import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
+import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
+import vtkLight from "@kitware/vtk.js/Rendering/Core/Light";
 
-            </div>
-        </template>
-        <div class="exp">
-        <div class="expleft"></div>
-        <div class="expright">
-            <!-- 物理量 -->
-                <div class="heigjie  imgneon">
-                        <div class="he_pading1 color1">
-                        <el-form-item label="物理量:" >
-                            <el-config-provider :locale="zhCn">
-                            <el-select v-model="formInline.region" @change="regionchange($event)" placeholder="请选择">
-                            <el-option v-for="item in strResultFormatlist" :key="item.id" :label="item.name"
-                                :value="item.value"></el-option>
-                            </el-select>
-                        </el-config-provider>
-                        </el-form-item>
-                       
-                        </div>
-                    </div>
-                     <!-- 动画 -->
-    <el-aside  class="L_aside L_aside1 asideg asidegbg leftbgimg1" >
-      <div class="demo-collapse jiance asideg1 jc_header collapseeion jianstyle">
-        <el-collapse accordion v-model="activeNames1" class="bganimation">
-          <el-collapse-item name="2" class="imgneon">
-            <template #title>
-              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
-              动画展示
-            </template>
-            <div class="rg_content">
-              <div class="rg-padding">
-              <div class="animation_s">
-              <el-slider
-                :max="endtime"
-                :min="1"
-                v-model="count"
-                @change="sliderchange"
-              >
-              </el-slider>
-              <div class="tanniu">
-                <div><el-image :src="t1" fit="contain" @click="Prev" ></el-image></div>
-                <div v-show="suspendshow"><el-image :src="t2" fit="contain"  @click="play(500)" ></el-image></div>
-                <div v-show="playshow"><el-image :src="t3" fit="contain"  @click="play(500)" ></el-image></div>
-                <div><el-image :src="t4" fit="contain" @click="increment"></el-image></div>
-                
-              </div>
-            </div>
-          
-            
-            </div>
-          </div>
-            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
-          </el-collapse-item>
-        </el-collapse>
-      </div>
-      </el-aside>   
-        </div>
-    </div>
-        <div class="dialog-footer footer_div l_btn">
-            <div class="footerbtn flex1">
-                <div class="borderimg"><el-button @click="expdialog = false">取消</el-button></div>
-            </div>
-            <div class="footerbtn flex1">
-                <div class="borderimg"><el-button >
-                        确定
-                    </el-button></div>
-            </div>
-        </div>
-        </el-dialog>
-    </div>
-     </template>
-   <script setup>
-   import zhCn from 'element-plus/es/locale/lang/zh-cn'
-import { ref, onMounted, reactive, } from "vue";
-import {RouterView,RouterLink } from "vue-router"
-import { request, uploadFile } from "@/utils/request";
-import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
-import { createGassControl } from "@/control/gassControl.js";
-import t1 from "@/assets/img/t1.png";
-import t2 from "@/assets/img/t2.png";
-import t3 from "@/assets/img/t3.png";
-import t4 from "@/assets/img/t4.png";
 const props = defineProps({
-  aid: Number,
-});
-let expdialog=ref(false);
-const strResultFormatlist = ref([]);
+  aid: Number
+})
+let expdialog = ref(false)
+const strResultFormatlist = ref([])
 const formInline = ref({
-    user: '11',
-    region: '',
-    date: '',
-
+  user: "11",
+  region: "",
+  date: ""
 })
-let currentrow1 = ref(false);
-let activeNames1=ref(["2"])
-let starttime = ref(1);
-let endtime = ref(60);
-let count=ref(1);
-let newcount = ref(0);
-let timenum = ref(2);
-let playshow=ref(true);
-const isstop = ref(false);
-let suspendshow=ref(false);
-let showfalse=ref(false);
-let aid=ref();
-const fcon = createGassControl();
+let currentrow1 = ref(false)
+let activeNames1 = ref(["2"])
+let starttime = ref(1)
+let endtime = ref(60)
+let count = ref(1)
+let newcount = ref(0)
+let timenum = ref(2)
+let playshow = ref(true)
+const isstop = ref(false)
+let suspendshow = ref(false)
+let showfalse = ref(false)
+let aid = ref()
+let vtkObj = {}
+let max, min;
 onMounted(() => {
-fcon.step=count.value;
-});
+  const rootContainer = document.getElementById("expleft1")
+  // rootContainer.style.position = "relative"
+  // rootContainer.style.width = "100%"
+  // rootContainer.style.height = "100%"
+  vtkObj.renderWindow = vtkGenericRenderWindow.newInstance()
+  vtkObj.renderWindow.setContainer(rootContainer)
+  vtkObj.jgMapper = vtkMapper.newInstance()
+  vtkObj.jgActor = vtkActor.newInstance()
+  vtkObj.jgActor.getProperty().setRepresentation(Representation.SURFACE) //面
+  vtkObj.jgActor.setMapper(vtkObj.jgMapper)
+  // vtkObj.renderWindow.getRenderer().addActor(vtkObj.jgActor);
+  vtkObj.renderWindow.getRenderer().setBackground(0.0, 0.0, 0.0, 0.0)
+
+  vtkObj.scalarBarActor = vtkScalarBarActor.newInstance()
+  vtkObj.scalarBarActor.setGenerateTicks(generateTicks(5))
+  vtkObj.scalarBarActor.setDrawAboveRangeSwatch(true)
+  vtkObj.scalarBarActor.setDrawNanAnnotation(false)
+  vtkObj.scalarBarActor.setBoxPosition([1, 0])
+  // 修改设条颜色
+  const ctf = vtkColorTransferFunction.newInstance()
+  ctf.addRGBPoint(0.0, 0, 1, 154 / 255.0)
+  ctf.addRGBPoint(1.0, 1.0, 165.0 / 255.0, 0.0)
+  ctf.addRGBPoint(2.0, 230 / 255.0, 0.0, 92.0 / 225.0)
+  vtkObj.jgMapper.setLookupTable(ctf)
+  const lut = vtkObj.jgMapper.getLookupTable()
+  vtkObj.scalarBarActor.setScalarsToColors(lut)
+  vtkObj.renderWindow.resize()
+  // vtkObj.renderWindow.getRenderer().addActor(vtkObj.scalarBarActor);
+  // vtkGridRead(props.aid);
+  // vtkObj.renderWindow.getRenderer().resetCamera();
+  // vtkObj.renderWindow.getRenderWindow().render();
+  // 设置环境光和光照
+  const light = vtkLight.newInstance()
+  light.setColor(1.0, 1.0, 1.0) // 白色环境光
+  light.setIntensity(3.0) // 强度为1.0
+  vtkObj.renderWindow.getRenderer().addLight(light)
+})
+function initVtk(){
+  
+}
+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 vtkShow() {
+  console.log("执行了")
+  const scalarBarActor = vtkObj.scalarBarActor
+  const mapper = vtkObj.jgMapper
+  const actor = vtkObj.jgActor
+  const fcon = vtkObj.fcon
+  // console.log(props.region)
+  const scalarArray = fcon.scalar.get("Pressure")
+  if (!scalarArray || !fcon.polydata) {
+    return
+  }
+  // console.log("scalarArray:", scalarArray);
+  const dataArray = vtkDataArray.newInstance({
+    name: "Pressure",
+    size: fcon.polydata.getNumberOfPoints()
+  })
+  // console.log(dataArray);
+  dataArray.setData(scalarArray)
+  fcon.polydata.getPointData().setScalars(dataArray)
+  mapper.setInputData(fcon.polydata)
+  getMinMax(scalarArray)
+  mapper.setScalarRange(parseFloat(min.toFixed(3)), parseFloat(max.toFixed(3))) //设置范围
+  scalarBarActor.setAxisLabel("Pressure")
+
+  mapper.clearColorArrays() //强制重建颜色
+  actor.getProperty().setOpacity(props.count) //设置错误的透明度使得页面重新加载  不设置不刷新页面
+  // vtkmodel.renderer.resetCamera();
+
+  vtkObj.renderWindow.getRenderer().addActor(scalarBarActor)
+  vtkObj.renderWindow.getRenderer().addActor(actor)
+
+  vtkObj.renderWindow.getRenderer().resetCamera();
+  vtkObj.renderWindow.getRenderWindow().render();
+
+}
+function getMinMax(scalars) {
+  // console.log("getMinMax:",scalars);
+  min = scalars[0]
+  max = scalars[0]
+  for (let index = 0; index <= scalars.length; index++) {
+    let scalar = scalars[index]
+    if (min > scalar) {
+      min = scalar
+    }
+    if (max < scalar) {
+      max = scalar
+    }
+  }
+  // console.log("max，min:", max.value, min.value);
+}
+onBeforeUnmount(() => {
+  vtkObj.scalarBarActor.delete()
+  vtkObj.jgMapper.delete()
+  vtkObj.jgActor.delete()
+  vtkObj.renderWindow.delete()
+  vtkObj = null
+})
 // 播放暂停
-const play =(time)=>{
-  showfalse.value=!showfalse.value;
-  currentrow1.value=false;
-  if(showfalse.value){
-    suspendshow.value=true;
-    playshow.value=false;
-    isstop.value = true;//播放
-  const sleep = (timeout = time) =>
-    new Promise((resolve, reject) => {
-      setTimeout(resolve, timeout);
-    });
-  let timer = async (timeout) => {
-    while (count.value < endtime.value && isstop.value) {
-      if (isstop.value == true) {
-        await sleep(time);
-        count.value++;
-        fcon.step = count.value;
-        newcount.value = count.value;
-       // newtime();
+const play = (time) => {
+  showfalse.value = !showfalse.value
+  currentrow1.value = false
+  if (showfalse.value) {
+    suspendshow.value = true
+    playshow.value = false
+    isstop.value = true //播放
+    const sleep = (timeout = time) =>
+      new Promise((resolve, reject) => {
+        setTimeout(resolve, timeout)
+      })
+    let timer = async (timeout) => {
+      while (count.value < endtime.value && isstop.value) {
+        if (isstop.value == true) {
+          await sleep(time)
+          count.value++
+          fcon.step = count.value
+          newcount.value = count.value
+          // newtime();
+        }
       }
     }
-  };
 
-  timer(time); 
-  }else{
-    isstop.value = false;//暂停
-    playshow.value=true;
-    suspendshow.value=false;
-}
+    timer(time)
+  } else {
+    isstop.value = false //暂停
+    playshow.value = true
+    suspendshow.value = false
+  }
 }
 //  下一页
 function increment() {
-  currentrow1.value=false;
-  isstop.value = false;
+  currentrow1.value = false
+  isstop.value = false
   if (count.value == endtime.value) {
-    return;
+    return
   }
-  count.value++;
-  newcount.value = count.value;
-  fcon.step = count.value;
+  count.value++
+  newcount.value = count.value
+  fcon.step = count.value
   //newtime();
 }
 //回到上一页
 function Prev() {
-  currentrow1.value=false;
-  isstop.value = false;
-  count.value--;
-  fcon.step = count.value;
-  newcount.value = count.value;
+  currentrow1.value = false
+  isstop.value = false
+  count.value--
+  fcon.step = count.value
+  newcount.value = count.value
   //newtime();
 }
 // 时间计算
 const newtime = () => {
-  timeshow.value=true;
-  time.value = null;
-  oldtime.value= sessionStorage.getItem('acctime');
-  console.log(oldtime.value);
-  time.value = (new Date(oldtime.value).getTime()) / 1000;
-  if ( count.value == 2) {
-    let time2 = (count.value - 1) * 60 + time.value;
-    timeline.value = timescount(time2);
+  timeshow.value = true
+  time.value = null
+  oldtime.value = sessionStorage.getItem("acctime")
+  console.log(oldtime.value)
+  time.value = new Date(oldtime.value).getTime() / 1000
+  if (count.value == 2) {
+    let time2 = (count.value - 1) * 60 + time.value
+    timeline.value = timescount(time2)
   } else {
-    let time2 = (count.value) * 60 + time.value;
-    timeline.value = timescount(time2);
+    let time2 = count.value * 60 + time.value
+    timeline.value = timescount(time2)
   }
-
-
-};
+}
 function sliderchange(val) {
-  suspendshow.value=false;
-    playshow.value=true;
-  isstop.value = false;
-  newcount.value = count.value;
-  fcon.step = count.value;
-
+  suspendshow.value = false
+  playshow.value = true
+  isstop.value = false
+  newcount.value = count.value
+  fcon.step = count.value
 }
 function vtkGridRead() {
-   aid.value=props.aid
-  fcon.aid = aid.value;
-  console.log(fcon.aid)
+  initVtk();
+   vtkObj.fcon = createGassControl()
+  const fcon = vtkObj.fcon
+  aid.value = props.aid
+  fcon.step = count.value
+  fcon.aid = aid.value
+  const params = {
+    transCode: "D40003",
+    aid: aid.value
+  }
+  request(params).then((res) => {
+    endtime.value = res.steps
+    fcon
+      .initGemetry(aid.value)
+      .then((result) => {
+        console.log(fcon.polydata)
+        vtkScalarRead(count.value) //步数
+      })
+      .catch((err) => {})
+      .catch((err) => {})
+  })
+}
+function vtkScalarRead(step) {
+  const fcon = vtkObj.fcon
   fcon
-    .initGemetry(aid.value)
+    .getScalrsByStep(step)
     .then((result) => {
-        console.log(result);
-        fcon
-    .getScalrsByStep(fcon.step)
-    vtkmodel.renderWindowWith.resize();
+      console.log(fcon.scalar)
+      vtkShow()
+    })
+    .catch((err) => {
+      console.log(err)
     })
-    .catch((err) => {});
 }
 
 // watch(
@@ -224,7 +292,7 @@ function vtkGridRead() {
 //     fcon.step = newVal;
 //     getMonitor();
 //     vtkScalarRead();
- 
+
 //  //   vtkScalarRead();
 // if( newVal>=endtime.value){
 //   playshow.value=true;
@@ -232,39 +300,45 @@ function vtkGridRead() {
 //    isstop.value = false;
 // }
 //   },
- 
+
 //   { deep: true }
 // ); //深度监视
 
-
-     defineExpose({expdialog,vtkGridRead});
-   </script>
+defineExpose({ expdialog, vtkGridRead })
+</script>
    <style  lang="scss" scoped>
-.exp{
-  
-    display: flex;
-    .expleft{
-        width: 68%;
-        border-radius: 0px 0px 0px 0px;
+.exp {
+  display: flex;
+  .expleft {
+    width: 68%;
+    border-radius: 0px 0px 0px 0px;
     border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-image: linear-gradient(
+        180deg,
+        rgba(31, 107, 255, 1),
+        rgba(31, 107, 255, 0.48)
+      )
+      1 1;
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-        margin-right: 2%;
-    }
-    .expright{
-        padding: 10px;
-        width: 30%;
-        border-radius: 0px 0px 0px 0px;
+    margin-right: 2%;
+  }
+  .expright {
+    padding: 10px;
+    width: 30%;
+    border-radius: 0px 0px 0px 0px;
     border: 1px solid;
-    border-image: linear-gradient(180deg, rgba(31, 107, 255, 1), rgba(31, 107, 255, 0.48)) 1 1;
+    border-image: linear-gradient(
+        180deg,
+        rgba(31, 107, 255, 1),
+        rgba(31, 107, 255, 0.48)
+      )
+      1 1;
     box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
-
-    }
+  }
 }
-.tanniu{
-display: flex;
-justify-content:space-between;
-align-items: center;
-
+.tanniu {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
-   </style>
+</style>