1.9

src/view/index/explode.vue

@@ -1,11 +1,73 @@
 <template>
-  <div id="expleft1" style="width:750px;height:500px;position: absolute;z-index: 9999999;">
-    <h1>1212</h1>
+  <div v-show="isexpdialog" class="dialog_class4 bgcolor tianjia  foter_l tianjia">
+    <div class="expcontent">
+      <h1 class="headertiele">一维瓦斯爆炸演化</h1>
+    <div class="exp">
+      <div class="expleft" id="expleft1"></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="isexpdialog = false">取消</el-button></div>
+            </div>
+            <div class="footerbtn flex1">
+                <div class="borderimg"><el-button  @click="quding()">
+                        确定
+                    </el-button></div>
+            </div>
+        </div>
+    </div>
+ 
   </div>
   <!-- 一维瓦斯爆炸弹出列表-->
-  
 </template>
-   <script setup>
+<script setup>
 import zhCn from "element-plus/es/locale/lang/zh-cn"
 import { ref, onMounted, reactive } from "vue"
 import { RouterView, RouterLink } from "vue-router"
@@ -33,13 +95,14 @@ import vtkLight from "@kitware/vtk.js/Rendering/Core/Light";
 const props = defineProps({
   aid: Number
 })
-let expdialog = ref(false)
+let isexpdialog = ref(false)
 const strResultFormatlist = ref([])
 const formInline = ref({
   user: "11",
-  region: "",
+  region: "Pressure",
   date: ""
 })
+let arr=[];
 let currentrow1 = ref(false)
 let activeNames1 = ref(["2"])
 let starttime = ref(1)
@@ -51,14 +114,41 @@ let playshow = ref(true)
 const isstop = ref(false)
 let suspendshow = ref(false)
 let showfalse = ref(false)
+let initFlag=false;
 let aid = ref()
 let vtkObj = {}
 let max, min;
+watch(
+  () => [formInline.region, count.value, aid.value],
+  (newVal, oldVal) => {
+  
+    if(initFlag){
+      console.log(count.value);
+       if (newVal[1] != oldVal[1]) {
+      console.log("步数改变", newVal[1], oldVal[1]);
+      if (vtkObj.fcon) {
+        console.log(count.value);
+        vtkScalarRead(count.value); //步数
+      }
+    }
+    if (newVal[0] != oldVal[0]) {
+      console.log("标量改变", newVal[0], oldVal[0]);
+      if (vtkObj.fcon) {
+        vtkShow();
+      }
+    }
+
+    }
+  },
+  { deep: true }
+); //深度监视
 onMounted(() => {
   const rootContainer = document.getElementById("expleft1")
   // rootContainer.style.position = "relative"
   // rootContainer.style.width = "100%"
   // rootContainer.style.height = "100%"
+  vtkObj.fcon = createGassControl();
+  const fcon = vtkObj.fcon;
   vtkObj.renderWindow = vtkGenericRenderWindow.newInstance()
   vtkObj.renderWindow.setContainer(rootContainer)
   vtkObj.jgMapper = vtkMapper.newInstance()
@@ -91,9 +181,11 @@ onMounted(() => {
   light.setColor(1.0, 1.0, 1.0) // 白色环境光
   light.setIntensity(3.0) // 强度为1.0
   vtkObj.renderWindow.getRenderer().addLight(light)
+
 })
-function initVtk(){
-  
+
+function initVtk() {
+
 }
 function generateTicks(numberOfTicks) {
   return (helper) => {
@@ -120,19 +212,19 @@ function generateTicks(numberOfTicks) {
   }
 }
 function vtkShow() {
-  console.log("执行了")
+  console.log("执行了1111")
   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")
+  const scalarArray = fcon.scalar.get(formInline.region)
   if (!scalarArray || !fcon.polydata) {
     return
   }
   // console.log("scalarArray:", scalarArray);
   const dataArray = vtkDataArray.newInstance({
-    name: "Pressure",
+    name:formInline.region,
     size: fcon.polydata.getNumberOfPoints()
   })
   // console.log(dataArray);
@@ -141,7 +233,7 @@ function vtkShow() {
   mapper.setInputData(fcon.polydata)
   getMinMax(scalarArray)
   mapper.setScalarRange(parseFloat(min.toFixed(3)), parseFloat(max.toFixed(3))) //设置范围
-  scalarBarActor.setAxisLabel("Pressure")
+  scalarBarActor.setAxisLabel(formInline.region)
 
   mapper.clearColorArrays() //强制重建颜色
   actor.getProperty().setOpacity(props.count) //设置错误的透明度使得页面重新加载  不设置不刷新页面
@@ -152,7 +244,7 @@ function vtkShow() {
 
   vtkObj.renderWindow.getRenderer().resetCamera();
   vtkObj.renderWindow.getRenderWindow().render();
-
+  initFlag=true;
 }
 function getMinMax(scalars) {
   // console.log("getMinMax:",scalars);
@@ -178,6 +270,7 @@ onBeforeUnmount(() => {
 })
 // 播放暂停
 const play = (time) => {
+  const fcon = vtkObj.fcon;
   showfalse.value = !showfalse.value
   currentrow1.value = false
   if (showfalse.value) {
@@ -209,6 +302,7 @@ const play = (time) => {
 }
 //  下一页
 function increment() {
+  const fcon = vtkObj.fcon
   currentrow1.value = false
   isstop.value = false
   if (count.value == endtime.value) {
@@ -221,6 +315,7 @@ function increment() {
 }
 //回到上一页
 function Prev() {
+  const fcon = vtkObj.fcon
   currentrow1.value = false
   isstop.value = false
   count.value--
@@ -244,6 +339,9 @@ const newtime = () => {
   }
 }
 function sliderchange(val) {
+  vtkObj.fcon = createGassControl();
+  const fcon = vtkObj.fcon
+
   suspendshow.value = false
   playshow.value = true
   isstop.value = false
@@ -252,7 +350,6 @@ function sliderchange(val) {
 }
 function vtkGridRead() {
   initVtk();
-   vtkObj.fcon = createGassControl()
   const fcon = vtkObj.fcon
   aid.value = props.aid
   fcon.step = count.value
@@ -266,79 +363,119 @@ function vtkGridRead() {
     fcon
       .initGemetry(aid.value)
       .then((result) => {
-        console.log(fcon.polydata)
         vtkScalarRead(count.value) //步数
       })
-      .catch((err) => {})
-      .catch((err) => {})
-  })
+      .catch((err) => { })
+  
+  }).catch((err) => { })
 }
 function vtkScalarRead(step) {
+  strResultFormatlist.value = [];
+  arr=[];
+  let i=0;
   const fcon = vtkObj.fcon
   fcon
     .getScalrsByStep(step)
     .then((result) => {
-      console.log(fcon.scalar)
+     // console.log(fcon.scalar)
+      fcon.scalar.forEach((value, key) => {
+        //arr.push(key)
+        i=i+1
+        strResultFormatlist.value.push({
+            id: i,
+            name:key ,
+            value:key ,
+          
+          });
+      })
+    console.log(    strResultFormatlist.value);
       vtkShow()
     })
     .catch((err) => {
       console.log(err)
     })
 }
-
-// watch(
-//   newcount,
-//   (newVal, oldVal) => {
-//     fcon.step = newVal;
-//     getMonitor();
-//     vtkScalarRead();
-
-//  //   vtkScalarRead();
-// if( newVal>=endtime.value){
-//   playshow.value=true;
-//   suspendshow.value=false;
-//    isstop.value = false;
-// }
-//   },
-
-//   { deep: true }
-// ); //深度监视
-
-defineExpose({ expdialog, vtkGridRead })
+ //深度监视
+const regionchange=(val)=>{
+  formInline.region=val;
+}
+const quding=()=>{
+  isexpdialog.value=false;
+}
+defineExpose({ isexpdialog, vtkGridRead })
 </script>
-   <style  lang="scss" scoped>
+<style  lang="scss" scoped>
 .exp {
   display: flex;
+
   .expleft {
-    width: 68%;
+    width: 70%;
     border-radius: 0px 0px 0px 0px;
     border: 1px solid;
-    border-image: linear-gradient(
-        180deg,
+    border-image: linear-gradient(180deg,
         rgba(31, 107, 255, 1),
-        rgba(31, 107, 255, 0.48)
-      )
-      1 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%;
+    height: 600px;
   }
+
   .expright {
     padding: 10px;
-    width: 30%;
+    width: 340px;
     border-radius: 0px 0px 0px 0px;
     border: 1px solid;
-    border-image: linear-gradient(
-        180deg,
+    border-image: linear-gradient(180deg,
         rgba(31, 107, 255, 1),
-        rgba(31, 107, 255, 0.48)
-      )
-      1 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;
 }
+
+.expcontent {
+  position: absolute;
+  left: 25%;
+  top: 100px;
+  width: 50%;
+
+  padding: 10px;
+  z-index: 11111;
+  background-color:rgba(13, 22, 57, 0.96);
+  border: 1px solid;
+  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);
+}
+.headertiele{
+  color: #fff;
+  text-align: left;
+  padding: 0 20px;
+  font-size: 16px;
+  font-family: 'YouShe';
+}
+// #expleft1{
+//   width:750px;
+//   height:500px;
+//   left:25%;
+//   top: 25%;
+//   background-color:rgba(12, 97, 197, 1);
+//   border: 1px solid;
+//     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);
+//   position: absolute;
+//   z-index: 11111;
+//   color: #fff;
+// }
 </style>

src/view/index/first-left.vue

@@ -216,7 +216,7 @@
 
 </div>
   <htmldialog ref="htmldialogref" :classradio="props.classradio" :isshow='isshow' @funidshow="funidshow"/>
-  <exploderow  ref="exploderef"   v-show="firstshow" :aid="aid"/>
+  <exploderow  ref="exploderef"  :aid="aid"/>
 </template>
 <script setup>
 import { ref, onMounted, reactive, } from "vue";
@@ -876,7 +876,7 @@ const handleDelete=(event)=>{
 }
 emitter.on('handleSelect',(data)=>{
   firstshow.value=false;
-  exploderef.value.expdialog=false;
+  exploderef.value.isexpdialog=false;
 
  
   });
@@ -1131,7 +1131,7 @@ function vtkScalarRead() {
 }
 //一维瓦斯爆炸演化
 const explode=()=>{
-  exploderef.value.expdialog=true;
+  exploderef.value.isexpdialog=true;
   exploderef.value.vtkGridRead();
 }
 onUnmounted(() =>{