常规上传

src/components/timeControl/index.vue

@@ -1,30 +1,5 @@
 <template>
   <div class="timeControlBox">
-    <el-slider
-      style="width: 96%"
-      v-model="sTimeRange"
-      :min="0"
-      :max="sliderMax"
-      size="small"
-      placement="bottom"
-      range
-      :marks="marks"
-      :format-tooltip="sliderFormatTooltip"
-      :disabled="isPlay"
-      @input="sliderChange"
-    />
-    <el-progress
-      class="timeControlProgress"
-      :style="`left:${progressLeft}%; width:${progressWidth}%`"
-      :text-inside="true"
-      striped
-      striped-flow
-      indeterminate
-      :duration="80"
-      :stroke-width="6"
-      :percentage="percentage"
-      :format="progressFormat"
-    />
     <el-button
       class="playBtn"
       :icon="isPlay ? VideoPause : VideoPlay"
@@ -32,6 +7,34 @@
       circle
       @click="playProgress"
     />
+    <div style="width: 96%; position: relative">
+      <el-slider
+        style="width: 98%; margin-left: 2%"
+        v-model="sTimeRange"
+        :min="0"
+        :max="sliderMax"
+        size="small"
+        placement="bottom"
+        range
+        :marks="marks"
+        :format-tooltip="sliderFormatTooltip"
+        :disabled="isPlay"
+        @input="sliderChange"
+      />
+      <!-- :style="`left:${progressLeft}%; width:${progressWidth}`" -->
+      <el-progress
+        class="timeControlProgress"
+        :style="`left:calc(2% + ${progressLeft}%); width:calc(${progressWidth}% - 2%)`"
+        :text-inside="true"
+        striped
+        striped-flow
+        indeterminate
+        :duration="80"
+        :stroke-width="6"
+        :percentage="percentage"
+        :format="progressFormat"
+      />
+    </div>
   </div>
 </template>
 
@@ -72,7 +75,7 @@ export default {
       sTimeRange: [0, 0],
       sliderMax: 0,
       progressLeft: 0,
-      progressWidth: 96,
+      progressWidth: 100,
       percentage: 0,
       marks: {},
       cloudJson: [],
@@ -134,7 +137,7 @@ export default {
     this.sTimeRange = [0, this.sliderMax];
     let marks = {};
     this.cloudJson.forEach((ele, index) => {
-      if (index % 2 === 0) {
+      if (index % parseInt(this.cloudJson.length / 10) === 0) {
         marks[index] = ele.date.split(" ")[1];
       }
     });
@@ -190,10 +193,10 @@ export default {
 
     sliderChange(value) {
       this.progressLeft = parseFloat(
-        (value[0] / (this.cloudJson.length - 1)) * 96
+        (value[0] / (this.cloudJson.length - 1)) * 100
       );
       this.progressWidth =
-        (value[1] / (this.cloudJson.length - 1)) * 96 - this.progressLeft;
+        (value[1] / (this.cloudJson.length - 1)) * 100 - this.progressLeft;
       this.setpLeft = 0;
       this.resetData();
     },
@@ -292,7 +295,8 @@ export default {
             this.percentage = p >= 100 ? 100 : p;
             this.switchMapLayer();
           },
-          this.controlMode === "wind" ? 20000 : 2000
+          // this.controlMode === "wind" ? 20000 : 2000
+          500
         );
       } else {
         clearInterval(this.progressTimmer);
@@ -504,20 +508,25 @@ export default {
 .timeControlBox {
   position: relative;
   width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
 
   .timeControlProgress {
     position: absolute;
     top: 9px;
     user-select: none;
     pointer-events: none;
+
+    .el-progress-bar__inner {
+      background: #00e5ff;
+    }
   }
 
   .playBtn {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 32px;
-    height: 32px;
+    width: 20px;
+    height: 20px;
     background: rgba(0, 0, 0, 0, 0.5);
     border: 0;
   }
@@ -554,11 +563,20 @@ export default {
 
   .playBtn {
     .el-icon {
-      font-size: 42px;
+      font-size: 24px;
       svg {
         color: #fff;
       }
     }
   }
+
+  .timeControlProgress {
+    .el-progress-bar__inner {
+      background-color: #00e5ff;
+    }
+  }
+  .el-slider__button {
+    border-color: rgba(22, 162, 201, 0.8);
+  }
 }
 </style>

src/main.js

@@ -13,6 +13,8 @@ import 'element-plus/dist/index.css'
 
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+import 'animate.css'
+
 const app = createApp(App)
 
 app.use(ElementPlus)

src/views/cesium.vue

@@ -79,9 +79,14 @@
       @showDetail="menuComTSty"
       @backStations="backStations"
     /> -->
-    <weatherView ref="weatherView" :basicGeoJson="basicGeoJson" @coverOnChange="coverOnChange"
-     @resetChangeWind="resetChangeWind" @resetChangeStation="resetChangeStation" />
-    <!-- <timeControl class="timeControl" :mode="controlMode" :viewer="viewer" />  -->
+    <weatherView
+      ref="weatherView"
+      :basicGeoJson="basicGeoJson"
+      :showControl="showControl"
+      @coverOnChange="coverOnChange"
+      @resetChangeWind="resetChangeWind"
+      @resetChangeStation="resetChangeStation"
+    />
   </div>
 </template>
 
@@ -142,7 +147,6 @@ import bwshan from "@/assets/windimgs/fanSvg/bwshan.png";
 import windHome from "@/components/windHome/index.vue";
 import windPro from "@/components/windProDetail/windProblem.vue";
 import cesiumwindView from "./cesiumComponents/cesiumwindView.vue";
-import timeControl from "@/components/timeControl/index.vue";
 
 export default {
   name: "CesiumMap",
@@ -153,7 +157,7 @@ export default {
     windHome,
     windPro,
     cesiumwindView,
-    timeControl,
+
     headerView,
     weatherView,
   },
@@ -238,7 +242,8 @@ export default {
       showTypeViewer: true,
       stationValue: ["Wind", "Fire", "Solar", "Storage"],
       controlMode: "",
-      cityWeather: {}
+      cityWeather: {},
+      showControl: false,
     };
   },
 
@@ -247,7 +252,6 @@ export default {
   },
 
   mounted() {
-    
     this.initEventListener();
     this.initCesium();
     if (this.showDevInfoBox) {
@@ -268,7 +272,6 @@ export default {
   },
 
   methods: {
-
     changeType(value) {
       this.stationValue = value;
       this.allStationentitys.forEach(({ entity, handler }) => {
@@ -302,10 +305,8 @@ export default {
         this.controlMode = this.controlMode === "temp" ? "" : "temp";
         this.switchTemperatureLayerr(val.check);
       } else {
-        ElMessage({
-          message: '暂无数据',
-          type: 'warning',
-        })
+        console.log(11111111111111111111111111);
+        this.showControl = !this.showControl;
       }
     },
     test() {
@@ -1663,7 +1664,18 @@ export default {
     showAllStation(viewer, station, type) {
       station.forEach((e, index) => {
         if (e.energytype === type) {
-          this.showStationFn(viewer, e, index, type ==="Wind" ? fc : type ==="Fire" ? hd : type ==="Storage" ? chu : gf);
+          this.showStationFn(
+            viewer,
+            e,
+            index,
+            type === "Wind"
+              ? fc
+              : type === "Fire"
+              ? hd
+              : type === "Storage"
+              ? chu
+              : gf
+          );
         }
         // if (e.energytype === "Wind") {
         //   this.showStationFn(viewer, e, index, fc);