|
|
@@ -0,0 +1,270 @@
|
|
|
+<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"
|
|
|
+
|
|
|
+ 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>
|
|
|
+
|
|
|
+ </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([]);
|
|
|
+const formInline = ref({
|
|
|
+ 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();
|
|
|
+onMounted(() => {
|
|
|
+fcon.step=count.value;
|
|
|
+});
|
|
|
+// 播放暂停
|
|
|
+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;
|
|
|
+}
|
|
|
+}
|
|
|
+// 下一页
|
|
|
+function increment() {
|
|
|
+ currentrow1.value=false;
|
|
|
+ isstop.value = false;
|
|
|
+ if (count.value == endtime.value) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ 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;
|
|
|
+ //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);
|
|
|
+ } else {
|
|
|
+ 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;
|
|
|
+
|
|
|
+}
|
|
|
+function vtkGridRead() {
|
|
|
+ aid.value=props.aid
|
|
|
+ fcon.aid = aid.value;
|
|
|
+ console.log(fcon.aid)
|
|
|
+ fcon
|
|
|
+ .initGemetry(aid.value)
|
|
|
+ .then((result) => {
|
|
|
+ console.log(result);
|
|
|
+ fcon
|
|
|
+ .getScalrsByStep(fcon.step)
|
|
|
+ vtkmodel.renderWindowWith.resize();
|
|
|
+ })
|
|
|
+ .catch((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});
|
|
|
+ </script>
|
|
|
+ <style lang="scss" scoped>
|
|
|
+.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;
|
|
|
+ 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;
|
|
|
+ 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);
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.tanniu{
|
|
|
+display: flex;
|
|
|
+justify-content:space-between;
|
|
|
+align-items: center;
|
|
|
+
|
|
|
+}
|
|
|
+ </style>
|
