2.4 0.2

package.json

@@ -15,6 +15,7 @@
     "element-plus": "^2.5.1",
     "exports-loader": "^1.1.0",
     "js-cookie": "2.2.0",
+    "pinia": "^2.1.7",
     "sass": "^1.69.7",
     "sass-loader": "^13.3.3",
     "save": "^2.9.0",

src/App.vue

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

src/view/evolutionView.vue

@@ -22,7 +22,7 @@
    <!-- table表 -->
    <div class="btn2" style="text-align: right;">
     <el-button type="success" @click="newtable();newaddshow=true;">新建</el-button>
-       <el-button >开始演化</el-button>
+       <el-button  @click="beginEvolve()">开始演化</el-button>
       
      </div>
    <el-table   v-loading="loading" :data="tableData"  :max-height="tableHeight"  @row-click="rowclick"  style="width: 100%" >
@@ -205,7 +205,7 @@
    <!-- table表 -->
    <div class="btn2" style="text-align: right;">
     <el-button  type="success" @click="newtable();waaddshow=true">新建</el-button>
-    <el-button >开始演化</el-button>
+    <el-button  @click="beginEvolve()">开始演化</el-button>
       
      </div>
    <el-table   v-loading="loading" :data="tableDataw"  :max-height="tableHeight"  @row-click="rowclick"  style="width: 100%" >
@@ -335,20 +335,38 @@
      </template>
      <!-- //defineProps,,defineExpose -->
    <script setup>
-   import { ref, onMounted, reactive} from "vue";
+   import { ref, onMounted, reactive,toRefs} 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 tableHeight=ref(200)
-  //  const props= defineProps(['title1']);
+ const props= defineProps({
+  dialogVisiblerz: {
+        type: Boolean,
+        default: false,
+    }
+ });
+ //const {dialogVisiblerz} = toRefs(props,'dialogVisiblerz')
+let emit= defineEmits(['getthislog','logonclick'])
+let isdialogVisiblerz=ref(true);
   //  const emit=defineEmits (["getdata"]);父组件调子组件
   //  const title1=ref("1")
+  // 心跳包的参数
+  
+  let websock=ref(null);
+  let times=ref({
+      lockReconnect: false, //是否真正建立连接
+      timeout: 28 * 1000, //30秒一次心跳
+      timeoutObj: null, //心跳倒计时
+      serverTimeout0bj: null, //
+      timeoutnum: null, //断开重连倒计时
+  })
    let userId=ref("5f06c8bc77234f969d13e160b54c27e3");
    let isshow=ref(false);
    let sum=ref('1')
-   let url=ref("http://localhost:8080/?aid=1")
+   let url=ref("http://localhost:8080/?aid=5")
    let title=ref()
    let selectstr=ref('');
    let input3=ref("");
@@ -405,6 +423,7 @@
 const activeName = ref('Fire');
 const gdxiugai=ref({});
 const currentPage4 = ref(1);
+let logs=ref("");
 let gdadd=ref("0");
 let jcadd=ref();
 const pageSize4 = ref(5)
@@ -812,14 +831,128 @@ function handleDeletede(index,row){
           .catch((err) => {
           })
 }
-//   灾情源的修改接口
 
+// 开始演化
+function beginEvolve(){
+
+initWebSocket();
+}
+//演化过程
+const beginprocess = () =>{
+// function beginprocess(){
+  const params = {
+        transCode: 'D00008',
+        aid:aid.value,
+        stype:activeName.value,
+        }
+        request(params)
+          .then((res) => { 
+          emit("logonclick",true)
+          })
+          .catch((err) => {
+          })
+}
+// 日志
+
+function initWebSocket() {
+      //初始化weosocket
+
+      // const wsuri = "ws://192.168.0.43:8087//websocket?projectId="+this.pid; ws://192.168.0.131/diswebsocket?projectId=5
+      const wsurl =
+        "ws://" +
+        process.env.VUE_APP_BASE_websokt +
+        "/diswebsocket?projectId=" +'5'
+        // aid.value;
+        websock = new WebSocket(wsurl);
+        websock.onopen = websocketonopen;
+        websock.onmessage = websocketonmessage;
+        websock.onerror = websocketonerror;
+        websock.onclose = websocketclose;
+    }
+
+ 	// Websoket连接成功事件
+   const websocketonopen = (res) => {
+      console.log("WebSocket连接成功", res);
+      start();
+      beginprocess();
+    };
+    // Websoket接收消息事件
+    const websocketonmessage = (res) => {
+     // console.log("数据", res);
+      logs.value=res.data;
+      emit('getthislog',logs.value);
+      if(res.data.includes("Simulating")){
+        let  data=res.data.replace(/\s/g, "");
+      console.log(data);
+        let num=data.match(/hour(\S*)minute/)[1];///hour(\S*)minut/
+        console.log(num)
+      }
+      
+      reset();
+    };
+    // Websoket连接错误事件
+    const websocketonerror = (res) => {
+      console.log("连接错误", res);
+      socket.close();
+      reconnect();
+    };
+    // Websoket断开事件
+    const websocketclose = (res) => {
+      console.log("断开连接", res);
+    };
+      // 创建 websocket 的实例
+
+     // 心跳包
+     const reconnect = () => {
+      if (times.value.lockReconnect) return;
+      times.value.lockReconnect = true;
+      //没连接上会一直重连，设置延迟避免请求过多
+      times.value.timeoutnum && clearTimeout(times.value.timeoutnum);
+      times.value.timeoutnum = setTimeout(function () {
+        //新连接
+     initWebSocket();
+        times.value.lockReconnect = false;
+      }, 10000);
+    }
+    const  reset = () => {
+      //重置心跳
+      clearTimeout(times.value.timeoutObj);
+      clearTimeout(times.value.serverTimeoutObj);
+    start();
+    }
+    const start = () => {
+      //开启心跳
+      times.value.timeoutObj && clearTimeout(times.value.timeoutObj);
+      times.value.serverTimeoutObj && clearTimeout(times.value.serverTimeoutObj);
+      times.value.timeoutObj = setTimeout(function () {
+        //这里发送一个心跳，后端收到后，返回一个心跳消息
+        if (websock.readyState == 1) {
+          //如果连接正常
+         websock.send("heartCheck");
+        } else {
+          //否则重连
+          reconnect();
+        }
+        times.value.serverTimeoutObj = setTimeout(function () {
+          // 超时关闭
+          websock.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
+        }, times.value.timeout);
+      }, times.value.timeout);
+    }
    onMounted(()=>{
     init();
    //getdata();
    })
+       // 组件被销毁之前，清空 sock 对象
+  //  onBeforeUnmount(() => {
+  //     // 关闭连接
+  //     websocketclose;
+  //     // 销毁 websocket 实例对象
+  //     socket = null;
+  //   });
+
    
-   defineExpose({isshow,getdata})
+   defineExpose({isshow,getdata,logs})
    </script>
    <style scoped>
    .demo-pagination-block + .demo-pagination-block {
@@ -838,7 +971,7 @@ function handleDeletede(index,row){
      position: relative;
      top: 49px;
      left: 89px;
-     z-index: 2018;
+     z-index: 1110;
      border-radius: 5px;
      box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
      background-color: #fff;

src/view/index.vue

@@ -1,302 +1,373 @@
 <template>
-    <div class="bgcolor">
-   <vtkContainermodel  />
-      <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">当前时间：{{ count }}</div>
-            <div class="block">
-              <el-form-item label="物理量">
-                <el-cascader
-                  transfer="true"
-                  placeholder="灾情/物理量"
-                  clearable
-                  :popper-append-to-body="false"
-                  v-model="arrvalue"
-                  :options="options"
-                  @change="handleChange($event)"
-                ></el-cascader>
-              </el-form-item>
-            </div>
-            <div class="block">
-              <span class="demonstration">动画开始</span>
-              <el-slider
-                :max="endtime"
-                :min="starttime"
-                v-model="count"
-                @change="sliderchange"
-              ></el-slider>
-              <span class="demonstration">动画结束</span>
-            </div>
-  
-            <div class="itemlist">
-              <div class="item" @click="play(500)">播&nbsp;&nbsp;放</div>
-              <div class="item" @click="suspend">暂&nbsp;&nbsp;停</div>
-              <div class="item" @click="Prev">上一分钟</div>
-              <div class="item" @click="increment">下一分钟</div>
-            </div>
-            <div class="dialog-footer">
-              <span class="btn" @click="dialogVisible = false">关 闭</span>
-            </div>
+  <div>
+    <vtkContainer />
+    <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">当前时间：{{ count }}</div>
+          <div class="block">
+            <el-form-item label="物理量">
+              <el-cascader
+                transfer="true"
+                placeholder="灾情/物理量"
+                clearable
+                :popper-append-to-body="false"
+                v-model="arrvalue"
+                :options="options"
+                @change="handleChange($event)"
+              ></el-cascader>
+            </el-form-item>
+          </div>
+          <div class="block">
+            <span class="demonstration">动画开始</span>
+            <el-slider
+              :max="endtime"
+              :min="starttime"
+              v-model="count"
+              @change="sliderchange"
+            ></el-slider>
+            <span class="demonstration">动画结束</span>
+          </div>
+
+          <div class="itemlist">
+            <div class="item" @click="play(500)">播&nbsp;&nbsp;放</div>
+            <div class="item" @click="suspend">暂&nbsp;&nbsp;停</div>
+            <div class="item" @click="Prev">上一分钟</div>
+            <div class="item" @click="increment">下一分钟</div>
+          </div>
+          <div class="dialog-footer">
+            <span class="btn" @click="dialogVisible = false">关 闭</span>
           </div>
         </div>
       </div>
-
-          <div>
-      
-     <evolutionView ref="evolution" />
-    </div>
     </div>
-  </template>
-  
-  <script setup>
-  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 { ref, onMounted, reactive } from "vue";
-  import evolutionView  from "./evolutionView.vue"
-  import vtkContainermodel  from "./model.vue"
+    <!-- 内容 -->
+        <!-- 内容 -->
+        <!-- 日志 -->
+        <el-dialog
+    v-model="dialog.dialogVisible"
+    title="日志"
+    width="30%"
+    :left="rizhi.left"
+    :top="rizhi.top"
+    :modal="false"
+    :close-on-click-modal="false"
+    draggable
+    :before-close="handleClose"
+ class="dialog_class"
+  >
+
+  <div class="footerTextBox">
+                <el-input
+                  class="footerText"
+                  type="textarea"
+                  id="textarea_id"
+                  v-model="rizhi.logs"
+                ></el-input>
+              </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialog.dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialog.dialogVisible = false">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+        <div>
+          <!-- :title1="title1" -->
+   <evolutionView ref="evolution" :dialogVisiblerz="dialog.dialogVisible" @getthislog="getthislog" @logonclick=logonclick />
+  </div>
+  </div>
+</template>
+
+<script setup>
+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 { ref, onMounted, reactive,nextTick } from "vue";
+import evolutionView  from "./evolutionView.vue"
+import vtkContainer  from "./vtkContainer.vue"
+// import {RouterView,RouterLink} from "vue-router"
+// const router=RouterView();
+
+// const props = {};
+let time = 3 * 60;
+let evolution=ref();
+let listArray = reactive([
+  { id: 0, img: p1, name: "灾情演化" },
+  { id: 1, img: p2, name: "演化过程" },
+  { id: 2, img: p3, name: "灾情历史" },
+  { id: 3, img: p4, name: "日志" },
+]);
+// let title1=ref("我是父组件")
+let dialogVisible = ref(false);
+let dialog=ref({
+  dialogVisible:false
+})
+let rizhi=ref({
+  top:"50px",
+  logs:'',
+  left:"90px"
+});
+let newlog=ref("");
+let log=ref("");
+let num = ref(4);
+let starttime = ref(1);
+let endtime = ref(60);
+let timenum = ref(2);
+let isstop = ref(false);
+let arrvalue = reactive([]);
+let options = reactive([
+  {
+    value: "fire",
+    label: "火灾",
+    children: [
+      {
+        value: "Temperature",
+        label: "温度",
+      },
+      {
+        value: "Pressure",
+        label: "压强",
+      },
+      {
+        value: "SO2",
+        label: "SO2",
+      },
+      {
+        value: "CO2",
+        label: "CO2",
+      },
+    ],
+  },
+  {
+    value: "Water",
+    label: "水灾",
+    children: [
+      {
+        value: "Height",
+        label: "水位高度",
+      },
+    ],
+  },
+]);
+function add(id) {
+  if (id == 0) {
+    evolution.value.isshow=true;
+    evolution.value.getdata();
+    dialogVisible.value = false;
+    dialog.value.dialogVisible=false;
+  }else if(id==1){
+    // router.push("/myDemo");
+
+}
+  else if(id==2){
+    dialogVisible.value = true;
+    evolution.value.isshow=false;
+    dialog.value.dialogVisible=false;
+  }else if(id==3){
+    dialog.value.dialogVisible=true;
+    dialogVisible.value = false;
+    evolution.value.isshow=false;
+  }else{
 
-  let time = 3 * 60;
-  let evolution=ref();
-  let listArray = reactive([
-    { id: 0, img: p1, name: "灾情演化" },
-    { id: 1, img: p2, name: "演化过程" },
-    { id: 2, img: p3, name: "灾情历史" },
-    { id: 3, img: p4, name: "日志" },
-  ]);
-  // 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 options = reactive([
-    {
-      value: "fire",
-      label: "火灾",
-      children: [
-        {
-          value: "Temperature",
-          label: "温度",
-        },
-        {
-          value: "Pressure",
-          label: "压强",
-        },
-        {
-          value: "SO2",
-          label: "SO2",
-        },
-        {
-          value: "CO2",
-          label: "CO2",
-        },
-      ],
-    },
-    {
-      value: "Water",
-      label: "水灾",
-      children: [
-        {
-          value: "Height",
-          label: "水位高度",
-        },
-      ],
-    },
-  ]);
-  function add(id) {
-    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;
+
+}
+function handleChange(val) {
+  arrvalue = val;
+  min.value = 0.0;
+  max.value = 1.0;
+  changeScalar();
+}
+//暂停
+function suspend() {
+  isstop.value = false;
+  console.log(isstop.value);
+}
+//滑块
+function sliderchange(val) {
+  // console.log(val);
+  changeScalar();
+}
+
+//播放
+function play(time) {
+  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);
+      changeScalar();
+      count.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;
-    max.value = 1.0;
-    changeScalar();
-  }
-  //暂停
-  function suspend() {
-    isstop.value = false;
-    console.log(isstop.value);
-  }
-  //滑块
-  function sliderchange(val) {
-    // console.log(val);
-    changeScalar();
-  }
-  
-  //播放
-  function play(time) {
-    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);
-        changeScalar();
-        count.value++;
-        // }
-      }
-    };
-    timer(time);
-  }
-  //回到上一页
-  function Prev() {
-    isstop.value = false;
-    count.value--;
-    changeScalar();
-  }
- 
+  };
+  timer(time);
+}
+//回到上一页
+function Prev() {
+  isstop.value = false;
+  count.value--;
+  changeScalar();
+}
+// 日志
+// 日志弹框
+function logonclick(val){
+  dialog.value.dialogVisible=val;
+  rizhi.value.logs='';
+}
+function  getthislog(val) {
+    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(() => {
+});
+//  关闭弹窗
+function handleClose(){
+  dialog.value.dialogVisible=false;
+}
+
+</script>
+
+<style>
+.controls,.snow{
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  background: white;
+  padding: 12px;
+}
+.haha {
+  color: #fff;
+}
+.tool {
+  position: fixed;
+  top: 50px;
+  left: 20px;
+
+  z-index: 205;
+}
+.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 {
+  color: #fff;
+  display: inline-block;
+}
+.img .el-image {
+  width: 34px;
+}
+.leftdialong {
+  padding: 15px;
+  width: 300px;
+  position: relative;
+  top: -248px;
+  left: 69px;
+  border-radius: 5px;
+  box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
+}
+.leftdialong .el-form-item__label {
+  font-size: 12px;
+  color: #fff !important;
+  padding-left: 6px;
+}
+.time {
+  color: #fff;
+  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);
+  color: #fff;
+}
+.dialog-footer {
+  margin-top: 30px;
+  text-align: right;
+}
+.block {
+  display: flex;
+}
+.demonstration {
+  padding: 5px 5px 5px 0;
+  font-size: 12px;
+  color: #fff;
+  display: inline-block;
+  width: 100px;
+  height: 24px;
+  line-height: 24px;
+}
+.block .el-slider {
+  padding: 0 5px;
+}
+.cascadeer .el-cascader {
+  width: 100%;
+}
+.cascadeer .asterisk-left {
+  width: 100% !important;
+  font-size: 12px;
+}
+.btn {
+  background-color: rgba(255, 255, 255, 0.1);
+  margin: 5px;
+  padding: 5px 9px;
+  border-radius: 5px;
+  font-size: 14px;
+  transform: scale(0.8);
+  color: #fff;
+}
+.snow_log{
+  width: 300px;
+  height: 230px;
+}
+
+#textarea_id{
+  height: 200px;
+}
+.dialog_class{
+margin-left: 90px !important;
+}
+body{
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+}
+</style>
 
-  //安装时
-  onMounted(() => {
-  
-  });
-  </script>
-  
-  <style>
-  .controls {
-    position: absolute;
-    top: 25px;
-    left: 25px;
-    background: white;
-    padding: 12px;
-  }
-  .haha {
-    color: #fff;
-  }
-  .tool {
-    position: fixed;
-    top: 50px;
-    left: 20px;
-  
-    z-index: 205;
-  }
-  .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 {
-    color: #fff;
-    display: inline-block;
-  }
-  .img .el-image {
-    width: 34px;
-  }
-  .leftdialong {
-    padding: 15px;
-    width: 300px;
-    position: relative;
-    top: -248px;
-    left: 69px;
-    border-radius: 5px;
-    box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
-  }
-  .leftdialong .el-form-item__label {
-    font-size: 12px;
-    color: #fff !important;
-    padding-left: 6px;
-  }
-  .time {
-    color: #fff;
-    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);
-    color: #fff;
-  }
-  .dialog-footer {
-    margin-top: 30px;
-    text-align: right;
-  }
-  .block {
-    display: flex;
-  }
-  .demonstration {
-    padding: 5px 5px 5px 0;
-    font-size: 12px;
-    color: #fff;
-    display: inline-block;
-    width: 100px;
-    height: 24px;
-    line-height: 24px;
-  }
-  .block .el-slider {
-    padding: 0 5px;
-  }
-  .cascadeer .el-cascader {
-    width: 100%;
-  }
-  .cascadeer .asterisk-left {
-    width: 100% !important;
-    font-size: 12px;
-  }
-  .btn {
-    background-color: rgba(255, 255, 255, 0.1);
-    margin: 5px;
-    padding: 5px 9px;
-    border-radius: 5px;
-    font-size: 14px;
-    transform: scale(0.8);
-    color: #fff;
-  }
-  body{
-      width: 100%;
-      height: 100vh;
-      margin: 0;
-    padding: 0;
-    background-color:#404c64;
-  }
-  </style>
-  

src/view/model.vue

@@ -1,245 +0,0 @@
-<template>
-  <div>
-    <div>
-      <!--button @click="increment">Count is: {{ count }}</button-->
-    </div>
-    <div id="vtkContainer" />
-
-        <div>
-          <!-- :title1="title1" -->
-
-  </div>
-  </div>
-</template>
-
-<script setup>
-import * as d3 from "d3-scale";
-import { formatDefaultLocale } from "d3-format";
-import { ref, onMounted, reactive } 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 {RouterView,RouterLink} from "vue-router"
-// const router=RouterView();
-
-// const props = {};
-let time = 3 * 60;
-let evolution=ref();
-// 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([]);
-
-function add(id) {
-  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;
-  }
-}
-// 响应式状态
-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 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);
-  };
-}
-//安装时
-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();
-});
-</script>
-

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"
@@ -30,24 +30,6 @@
               ></el-cascader>
             </el-form-item>
           </div>
-          <!-- <el-form-item
-          label="动画开始"
-      
-        >
-          <el-input
-               v-model="starttime"
-            autocomplete="off"
-          ></el-input>
-        </el-form-item>
-         <el-form-item
-          label="动画结束"
-      
-        >
-          <el-input
-                 v-model="endtime"
-            autocomplete="off"
-          ></el-input>
-        </el-form-item> -->
           <div class="block">
             <span class="demonstration">动画开始</span>
             <el-slider
@@ -65,20 +47,48 @@
             <div class="item" @click="Prev">上一分钟</div>
             <div class="item" @click="increment">下一分钟</div>
           </div>
-          <!-- <button @click="inOpacity">透明度： {{ opacity }}</button> -->
           <div class="dialog-footer">
             <span class="btn" @click="dialogVisible = false">关 闭</span>
-            <!-- <el-button>关 闭</el-button> -->
-            <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
           </div>
         </div>
       </div>
     </div>
     <!-- 内容 -->
         <!-- 内容 -->
+        <!-- 日志 -->
+        <el-dialog
+    v-model="dialog.dialogVisible"
+    title="日志"
+    width="30%"
+    :left="rizhi.left"
+    :top="rizhi.top"
+    :modal="false"
+    :close-on-click-modal="false"
+    draggable
+    :before-close="handleClose"
+ class="dialog_class"
+  >
+
+  <div class="footerTextBox">
+                <el-input
+                  class="footerText"
+                  type="textarea"
+                  id="textarea_id"
+                  v-model="rizhi.logs"
+                ></el-input>
+              </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialog.dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="dialog.dialogVisible = false">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
         <div>
           <!-- :title1="title1" -->
-   <evolutionView ref="evolution" />
+   <evolutionView ref="evolution" :dialogVisiblerz="dialog.dialogVisible" @getthislog="getthislog" @logonclick=logonclick />
   </div>
   </div>
 </template>
@@ -89,22 +99,7 @@ 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 } 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 { ref, onMounted, reactive,nextTick } from "vue";
 import evolutionView  from "./evolutionView.vue"
 // import {RouterView,RouterLink} from "vue-router"
 // const router=RouterView();
@@ -120,6 +115,16 @@ let listArray = reactive([
 ]);
 // let title1=ref("我是父组件")
 let dialogVisible = ref(false);
+let dialog=ref({
+  dialogVisible:false
+})
+let rizhi=ref({
+  top:"50px",
+  logs:'',
+  left:"90px"
+});
+let newlog=ref("");
+let log=ref("");
 let num = ref(4);
 let starttime = ref(1);
 let endtime = ref(60);
@@ -161,84 +166,31 @@ let options = reactive([
   },
 ]);
 function add(id) {
-  if (id == 2) {
-    dialogVisible.value = true;
-    evolution.value.isshow=false;
+  if (id == 0) {
+    evolution.value.isshow=true;
+    evolution.value.getdata();
+    dialogVisible.value = false;
+    dialog.value.dialogVisible=false;
   }else if(id==1){
     // router.push("/myDemo");
 
 }
-  else if(id==0){
-  
-    evolution.value.isshow=true;
-    evolution.value.getdata();
+  else if(id==2){
+    dialogVisible.value = true;
+    evolution.value.isshow=false;
+    dialog.value.dialogVisible=false;
+  }else if(id==3){
+    dialog.value.dialogVisible=true;
     dialogVisible.value = false;
-  }
-}
-// 响应式状态
-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);//面
+    evolution.value.isshow=false;
+  }else{
 
-// 用来修改状态、触发更新的函数
-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;
@@ -280,131 +232,35 @@ 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){
+  dialog.value.dialogVisible=val;
+  rizhi.value.logs='';
+}
+function  getthislog(val) {
+    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(){
+  dialog.value.dialogVisible=false;
+}
+
 </script>
 
 <style>
-.controls {
+.controls,.snow{
   position: absolute;
   top: 25px;
   left: 25px;
@@ -502,4 +358,21 @@ onMounted(() => {
   transform: scale(0.8);
   color: #fff;
 }
+.snow_log{
+  width: 300px;
+  height: 230px;
+}
+
+#textarea_id{
+  height: 200px;
+}
+.dialog_class{
+margin-left: 90px !important;
+}
+body{
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+}
 </style>
+

src/view/vtkContainer.vue

@@ -0,0 +1,395 @@
+<template>
+
+    <div id="vtkContainer" />
+ 
+    <!-- 内容 -->
+   
+
+</template>
+
+<script setup>
+
+import * as d3 from "d3-scale";
+import { formatDefaultLocale } from "d3-format";
+import { ref, onMounted, reactive } 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 { createFireControl } from "../control/fireControl.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 vtkConeSource from "@kitware/vtk.js/Filters/Sources/ConeSource";
+import vtkSphereMapper from "@kitware/vtk.js/Rendering/Core/SphereMapper";
+import vtkPixelSpaceCallbackMapper from "@kitware/vtk.js/Rendering/Core/PixelSpaceCallbackMapper";
+import vtkSphereSource from "@kitware/vtk.js/Filters/Sources/SphereSource";
+
+import vtkAxesActor from "@kitware/vtk.js/Rendering/Core/AxesActor";
+import vtkCubeAxesActor from "@kitware/vtk.js/Rendering/Core/CubeAxesActor";
+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();
+
+// 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([]);
+
+// 响应式状态
+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 fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+const renderer = fullScreenRenderer.getRenderer();
+const renderWindow = fullScreenRenderer.getRenderWindow();
+const mapper = vtkMapper.newInstance();
+const actor = vtkActor.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 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 <= 15; index++) {
+  //   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);
+  //     scalarWAll.value[index] = scalars;
+  //   });
+  // }
+  //火灾
+  for (let index = 1; index <= 4; index++) {
+    const reader = vtkUnstructuredDataReader.newInstance();
+    const url =
+      "http://192.168.0.131:8187/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&transCode=D00009&userId=5f06c8bc77234f969d13e160b54c27e3&aid=5&stype=Fire&step=";
+    reader.setUrl(url + index).then(() => {
+      console.log("url + index ", index);
+      const scalars = reader.getOutputData(1);
+      scalarFAll.value[index] = scalars;
+      console.log("url end  ");
+    });
+  }
+  console.log("scalarAll.value:", scalarFAll);
+}
+//设置
+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);
+  };
+}
+//安装时
+onMounted(() => {
+  arrvalue = ["Water", "Height"];
+  // const sphereSource = vtkSphereSource.newInstance({
+  //   center: [495960.36, 5402540.18, -424.27],
+  //   radius: 3.02,
+  //   phiResolution: 20,
+  //   thetaResolution:20,
+  // });
+
+  // const mapper1 = vtkMapper.newInstance();
+  // mapper1.setInputConnection(sphereSource.getOutputPort());
+  // const actor1 = vtkActor.newInstance();
+  // actor1.setMapper(mapper1);
+  // actor1.getProperty().setColor([0.95, 0.45, 0.95]);
+  // renderer.addActor(actor1);
+
+// choices include triangle, star, arrow4points, arrow6points
+  const initialValues = { base:-0.1,shape: 'arrow4points',center: [495960.36, 5402540.18, -424.27],width: 20.0,height:20,direction:[0,1,1] };
+   
+  // const triangleFilter = vtkTriangleFilter.newInstance();
+  const shapeSource2 = vtk2DShape.newInstance(initialValues);
+  // triangleFilter.setInputConnection(shapeSource2.getOutputPort());
+
+  const mapper2 = vtkMapper.newInstance();
+  mapper2.setInputConnection(shapeSource2.getOutputPort());
+  const actor2 = vtkActor.newInstance();
+  actor2.setMapper(mapper2);
+  renderer.addActor(actor2);
+
+  // const cubeAxes = vtkCubeAxesActor.newInstance();
+  // cubeAxes.setCamera(renderer.getActiveCamera());
+  // cubeAxes.setDataBounds(actor1.getBounds());
+  // renderer.addActor(cubeAxes);
+
+
+  // const axesActor = vtkAxesActor.newInstance();
+  // renderer.addActor(axesActor);
+
+
+
+  renderer.resetCamera();
+  renderWindow.render();
+  fireRead();
+});
+
+function fireRead() {
+  var fcon = createFireControl();
+  fcon
+    .initGemetry()
+    .then((result) => {
+      fcon
+        .initScalrs()
+        .then((result) => {
+          const scalarArray = fcon.scalars[3].get("Pressure");
+          // console.log("scalarArray:", scalarArray);
+          const dataArray = vtkDataArray.newInstance({
+            name: arrvalue[1],
+            size: fcon.polydata.getNumberOfPoints(),
+          });
+          dataArray.setData(scalarArray);
+          fcon.polydata.getPointData().setScalars(dataArray);
+          mapper.setInputData(fcon.polydata);
+          getMinMax(scalarArray);
+          mapper.setScalarRange(min.value, max.value); //设置范围
+          actor.setMapper(mapper);
+          renderer.addActor(actor);
+
+          initScalarBar();
+          renderer.resetCamera();
+          renderWindow.render();
+        })
+        .catch((err) => {});
+    })
+    .catch((err) => {});
+}
+
+// 初始化 bar
+function initScalarBar() {
+  const scalarBarActor = vtkScalarBarActor.newInstance();
+  let lut = mapper.getLookupTable();
+  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);
+  renderer.addActor(scalarBarActor);
+}
+</script>
+
+<style>
+.controls {
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  background: white;
+  padding: 12px;
+}
+.haha {
+  color: #fff;
+}
+.tool {
+  position: fixed;
+  top: 50px;
+  left: 20px;
+
+  z-index: 205;
+}
+.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 {
+  color: #fff;
+  display: inline-block;
+}
+.img .el-image {
+  width: 34px;
+}
+.leftdialong {
+  padding: 15px;
+  width: 300px;
+  position: relative;
+  top: -248px;
+  left: 69px;
+  border-radius: 5px;
+  box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.1);
+}
+.leftdialong .el-form-item__label {
+  font-size: 12px;
+  color: #fff !important;
+  padding-left: 6px;
+}
+.time {
+  color: #fff;
+  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);
+  color: #fff;
+}
+.dialog-footer {
+  margin-top: 30px;
+  text-align: right;
+}
+.block {
+  display: flex;
+}
+.demonstration {
+  padding: 5px 5px 5px 0;
+  font-size: 12px;
+  color: #fff;
+  display: inline-block;
+  width: 100px;
+  height: 24px;
+  line-height: 24px;
+}
+.block .el-slider {
+  padding: 0 5px;
+}
+.cascadeer .el-cascader {
+  width: 100%;
+}
+.cascadeer .asterisk-left {
+  width: 100% !important;
+  font-size: 12px;
+}
+.btn {
+  background-color: rgba(255, 255, 255, 0.1);
+  margin: 5px;
+  padding: 5px 9px;
+  border-radius: 5px;
+  font-size: 14px;
+  transform: scale(0.8);
+  color: #fff;
+}
+</style>

vue.config.js

@@ -52,7 +52,8 @@ module.exports = defineConfig({
        // target: 'http://192.168.0.43:8081/',
         // target: 'https://www.gzchain.org.cn/managersvc/', //后端接口地址
         secure: false, //接受使用https
-      }
+      },
+      
     },
     open: false,//不自动打开浏览器
     // overlay: {