1.30 0.3

src/view/tool.vue

@@ -0,0 +1,302 @@
+<template>
+    <div>
+      <div class="tool">
+  
+        <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>
+          <div>
+
+    </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";
+  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){
+  }
+    else if(id==0){
+    
+      evolution.value.isshow=true;
+      evolution.value.getdata();
+      dialogVisible.value = false;
+    }
+  }
+
+  
+  // 用来修改状态、触发更新的函数
+  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;
+      }
+    }
+  }
+  //时间
+  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) {
+    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) {
+        await sleep(time);
+        changeScalar();
+        count.value++;
+      }
+    };
+    timer(time);
+  }
+  //回到上一页
+  function Prev() {
+    isstop.value = false;
+    count.value--;
+    changeScalar();
+  }
+  // 用来修改状态、触发更新的函数
+  function increment() {
+    isstop.value = false;
+    if (count.value == endtime.value) {
+      return;
+    }
+    count.value++;
+    changeScalar();
+  }
+ 
+
+  
+  </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>
+