commit

package-lock.json

@@ -1610,8 +1610,7 @@
         "@types/json-schema": {
             "version": "7.0.12",
             "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.12.tgz",
-            "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==",
-            "dev": true
+            "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA=="
         },
         "@types/mime": {
             "version": "1.3.2",
@@ -4219,6 +4218,14 @@
             "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
             "dev": true
         },
+        "copy-anything": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+            "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+            "requires": {
+                "is-what": "^3.14.1"
+            }
+        },
         "copy-concurrently": {
             "version": "1.0.5",
             "resolved": "https://registry.npmmirror.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -5295,7 +5302,6 @@
             "version": "0.1.8",
             "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
             "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-            "dev": true,
             "requires": {
                 "prr": "~1.0.1"
             }
@@ -6960,8 +6966,7 @@
         "image-size": {
             "version": "0.5.5",
             "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
-            "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-            "dev": true
+            "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ=="
         },
         "immutable": {
             "version": "4.3.1",
@@ -7557,6 +7562,11 @@
                 "call-bind": "^1.0.2"
             }
         },
+        "is-what": {
+            "version": "3.14.1",
+            "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+            "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA=="
+        },
         "is-windows": {
             "version": "1.0.2",
             "resolved": "https://registry.npmmirror.com/is-windows/-/is-windows-1.0.2.tgz",
@@ -7732,6 +7742,11 @@
             "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
             "dev": true
         },
+        "klona": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmmirror.com/klona/-/klona-2.0.6.tgz",
+            "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="
+        },
         "launch-editor": {
             "version": "2.6.0",
             "resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.6.0.tgz",
@@ -7759,6 +7774,73 @@
                 "jquery": "^3.1.1"
             }
         },
+        "less": {
+            "version": "4.1.3",
+            "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
+            "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+            "requires": {
+                "copy-anything": "^2.0.1",
+                "errno": "^0.1.1",
+                "graceful-fs": "^4.1.2",
+                "image-size": "~0.5.0",
+                "make-dir": "^2.1.0",
+                "mime": "^1.4.1",
+                "needle": "^3.1.0",
+                "parse-node-version": "^1.0.1",
+                "source-map": "~0.6.0",
+                "tslib": "^2.3.0"
+            },
+            "dependencies": {
+                "mime": {
+                    "version": "1.6.0",
+                    "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+                    "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+                    "optional": true
+                },
+                "tslib": {
+                    "version": "2.6.1",
+                    "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.1.tgz",
+                    "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
+                }
+            }
+        },
+        "less-loader": {
+            "version": "7.3.0",
+            "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-7.3.0.tgz",
+            "integrity": "sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg==",
+            "requires": {
+                "klona": "^2.0.4",
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0"
+            },
+            "dependencies": {
+                "json5": {
+                    "version": "2.2.3",
+                    "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
+                    "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
+                },
+                "loader-utils": {
+                    "version": "2.0.4",
+                    "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
+                    "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                },
+                "schema-utils": {
+                    "version": "3.3.0",
+                    "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
+                    "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+                    "requires": {
+                        "@types/json-schema": "^7.0.8",
+                        "ajv": "^6.12.5",
+                        "ajv-keywords": "^3.5.2"
+                    }
+                }
+            }
+        },
         "levn": {
             "version": "0.3.0",
             "resolved": "https://registry.npmmirror.com/levn/-/levn-0.3.0.tgz",
@@ -8235,8 +8317,7 @@
         "ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
-            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-            "dev": true
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
         },
         "multicast-dns": {
             "version": "6.2.3",
@@ -8301,6 +8382,37 @@
             "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
             "dev": true
         },
+        "needle": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz",
+            "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+            "optional": true,
+            "requires": {
+                "debug": "^3.2.6",
+                "iconv-lite": "^0.6.3",
+                "sax": "^1.2.4"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "3.2.7",
+                    "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+                    "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+                    "optional": true,
+                    "requires": {
+                        "ms": "^2.1.1"
+                    }
+                },
+                "iconv-lite": {
+                    "version": "0.6.3",
+                    "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+                    "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+                    "optional": true,
+                    "requires": {
+                        "safer-buffer": ">= 2.1.2 < 3.0.0"
+                    }
+                }
+            }
+        },
         "negotiator": {
             "version": "0.6.3",
             "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
@@ -8784,6 +8896,11 @@
                 "lines-and-columns": "^1.1.6"
             }
         },
+        "parse-node-version": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+            "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA=="
+        },
         "parse5": {
             "version": "5.1.1",
             "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
@@ -10236,8 +10353,7 @@
         "prr": {
             "version": "1.0.1",
             "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
-            "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-            "dev": true
+            "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw=="
         },
         "pseudomap": {
             "version": "1.0.2",
@@ -10817,8 +10933,7 @@
         "safer-buffer": {
             "version": "2.1.2",
             "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
-            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-            "dev": true
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
         },
         "sass": {
             "version": "1.64.2",
@@ -10866,8 +10981,7 @@
         "sax": {
             "version": "1.2.4",
             "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
-            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-            "dev": true
+            "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
         },
         "schema-utils": {
             "version": "1.0.0",

package.json

@@ -20,6 +20,8 @@
         "jsencrypt": "^3.3.2",
         "json-bigint": "^1.0.0",
         "layui-layer": "^1.0.9",
+        "less": "^4.1.3",
+        "less-loader": "^7.3.0",
         "screenfull": "^5.1.0",
         "vue": "^2.6.11",
         "vue-native-websocket": "^2.0.15",

src/components/TimeLine/index.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="timeLineContent">
+    <div class="timeLine">
+      <el-row class="timeLine_row">
+        <el-col :span="3">
+          <div class="play">
+            <i
+              :title="
+                nextStatus === 'play'
+                  ? '播放'
+                  : nextStatus === 'pause'
+                  ? '暂停'
+                  : ''
+              "
+              :class="
+                nextStatus === 'play'
+                  ? 'el-icon-video-play'
+                  : nextStatus === 'pause'
+                  ? 'el-icon-video-pause'
+                  : ''
+              "
+              @click="onTimeControlClick(nextStatus)"
+            ></i>
+          </div>
+        </el-col>
+        <el-col :span="21" class="slider__tooltip_content">
+          <div class="my-slider__tooltip" :style="style">
+            <el-button class="my-slider__tooltip-wrapper" size="mini">
+              {{ timeDataArray[timeControlLayerIndex] }}
+            </el-button>
+          </div>
+          <el-slider
+            :show-stops="true"
+            v-model="timeControlLayerIndex"
+            :show-tooltip="false"
+            :min="min"
+            :max="max"
+            @change="onTimeControlChange"
+          >
+          </el-slider
+        ></el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["showLayers", "timeDataArray"],
+  data() {
+    return {
+      nextStatus: "play",
+      isClockActive: false,
+      timeControlLayerIndex: 0, //当前索引
+      timeControlPauseTime: 2, // 播放时间间隔，秒
+      playSpeed: 1000,
+      min: 0,
+      max: this.timeDataArray.length - 1,
+    };
+  },
+
+  mounted() {},
+  methods: {
+    onTimeControlClick(value) {
+      switch (value) {
+        case "play":
+          if (this.isClockActive) {
+            this.$message("正在播放中");
+          } else {
+            this.isClockActive = true;
+            this.nextStatus = "pause";
+            //播放轮播
+            this.timeClockTick();
+          }
+          break;
+        case "pause":
+          this.isClockActive = false;
+          this.nextStatus = "play";
+          break;
+        default:
+          break;
+      }
+    },
+    timeClockTick() {
+      if (!this.isClockActive) {
+        return;
+      }
+      this.showNextTimeLayer();
+      setTimeout(
+        this.timeClockTick,
+        this.timeControlPauseTime * this.playSpeed
+      ); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
+    },
+    showNextTimeLayer() {
+      let timeControlLayerIndex = this.timeControlLayerIndex;
+      let timeDataArray = this.timeDataArray;
+      timeControlLayerIndex++;
+      if (timeControlLayerIndex >= timeDataArray.length) {
+        timeControlLayerIndex = 0;
+      }
+      this.timeControlLayerIndex = timeControlLayerIndex;
+      this.$emit("showLayers", this.timeDataArray[timeControlLayerIndex]);
+    },
+    onTimeControlChange(value) {
+      this.timeControlLayerIndex = value;
+      this.$emit("showLayers", this.timeDataArray[value]);
+    },
+    timestepToolTip(index) {
+      return this.timeDataArray[index];
+    },
+  },
+  watch: {
+    value(newValue) {
+      this.timeControlLayerIndex = newValue;
+    },
+  },
+  computed: {
+    style() {
+      const length = this.max - this.min,
+        progress = this.timeControlLayerIndex - this.min,
+        left = (progress / length) * 100;
+      console.log(length, progress, left);
+      return {
+        paddingLeft: `${left}%`,
+      };
+    },
+  },
+  destroyed: function () {
+    this.isClockActive = false;
+  },
+};
+</script>
+<style lang="less" scoped>
+.timeLineContent {
+  position: relative;
+  .my-slider__tooltip {
+    text-align: left;
+    .my-slider__tooltip-wrapper {
+      height: 32px;
+      transform: translateX(-50%);
+      top: -50%;
+      background: rgba(0, 0, 0, 0.75);
+      border-radius: 4px;
+      color: #fff;
+      padding: 6px 8px;
+      border: none;
+      outline: none;
+      margin-bottom: 7px;
+      &::after {
+        position: absolute;
+        border-left: 9px solid transparent;
+        border-right: 9px solid transparent;
+        border-top: 9px solid rgba(0, 0, 0, 0.75);
+        content: " ";
+        display: block;
+        width: 0;
+        height: 0;
+        bottom: -8px;
+        left: 46px;
+        pointer-events: auto;
+      }
+    }
+  }
+  .slider__tooltip_content {
+    position: absolute;
+    left: 89px;
+    top: -39px;
+    padding-right: 20px;
+  }
+  .el-slider__stop {
+    margin-top: -1px;
+  }
+  .timeLine_row {
+    margin-top: 15px;
+  }
+  .el-slider__runway {
+    height: 4px;
+  }
+  .el-slider__button {
+    width: 12px;
+    height: 12px;
+  }
+}
+.timeLine {
+  position: fixed;
+  bottom: 10px;
+  left: 150px;
+  width: 700px;
+  height: 65px;
+  background-image: url('~@/assets/image/header-bg.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .play {
+    text-align: center;
+    background: #fff;
+    width: 36px;
+    height: 36px;
+    margin: 0 auto;
+    border-radius: 50%;
+    i {
+      font-size: 36px;
+      margin: "auto";
+      color: #0e6cac;
+    }
+  }
+}
+</style>

src/views/simulation/index.vue

@@ -18,6 +18,7 @@
         <el-button icon="el-icon-minus" circle @click="small()"></el-button>
       </div>
     </el-row>
+    <TimeLine :showLayers="showLayers" :timeDataArray="timeDataArray" class="TimeLine"></TimeLine>
   </div>
 </template>
 <script>
@@ -26,8 +27,12 @@ import fireController from "@/api/fireController.js";
 import { getToken } from "@/utils";
 import axios from "axios";
 import satelliteModel from '@/assets/model/satelite.glb';
+import TimeLine from '@/components/TimeLine/index.vue';
 import { mapGetters } from "vuex";
 export default {
+  components: {
+    TimeLine
+  },
   computed: {
     ...mapGetters([
       "dimension"
@@ -62,7 +67,9 @@ export default {
       handler2D: null,
       image: null,
       modeltooltip: null,
-      id: 1
+      id: 1,
+      showLayers: null,
+      timeDataArray: ['Time 1', 'Time 2', 'Time 3', 'Time 4']
     };
   },
   watch: {
@@ -81,6 +88,7 @@ export default {
   },
   created() {
     this.getData();
+    
   },
   mounted() {
     this.cesiumInit();
@@ -838,6 +846,7 @@ this.viewer3D.entities.values.forEach(entity => {
 
 .container{
   height: 100%;
+  position: relative;
 }
 .modeltooltip {
   position: absolute;
@@ -955,4 +964,10 @@ this.viewer3D.entities.values.forEach(entity => {
   font-size: 14px;
   /* right: 20px; */
 }
+.TimeLine{
+  position: absolute;
+  left: 21%;
+  bottom: 15px;
+  transform: translateX(-50%);
+}
 </style>