实况图弹窗

src/views/routineCommandMap/LeftSection/RealSituation.vue

@@ -2,21 +2,61 @@
   <div class="real-situation-container">
     <div class="common-title gradient-text">气温降水实况</div>
     <div class="tabs">
-      <div v-for="(item, index) in tabs" :key="index" :class="tabActive === index ? 'tab tab-active' : 'tab'" @click="clickTab(index)">{{ item.name }}</div>
+      <div v-for="(item, index) in tabs" :key="index" :class="tabActive === index ? 'tab tab-active' : 'tab'" @click="clickTab(index)">
+        {{ item.name }}
+      </div>
     </div>
-    <img class="img-box" :src="imgList[imgActive]" />
-<!--    <div class="temperature-box">-->
-<!--      <i class="decoration1" />-->
-<!--      <div class="temperature-content">-->
-<!--        <div class="temperature-item"></div>-->
-<!--      </div>-->
-<!--      <i class="decoration2" />-->
-<!--    </div>-->
+    <img class="img-box" :src="liveMapState.data[0].img" @click="handleShowDialog" />
+    <!--    <div class="temperature-box">-->
+    <!--      <i class="decoration1" />-->
+    <!--      <div class="temperature-content">-->
+    <!--        <div class="temperature-item"></div>-->
+    <!--      </div>-->
+    <!--      <i class="decoration2" />-->
+    <!--    </div>-->
+    <Dialog v-model="liveMapState.show" :title="tabs[tabActive].name" hide-footer>
+      <div class="img-box2">
+        <img v-show="liveMapState.activeIndex > -1" :src="liveMapState.data[liveMapState.activeIndex]?.img" />
+      </div>
+      <div class="tool-container">
+        <div class="tool-left">
+          <div class="text">播放速度</div>
+          <el-select
+            v-model="liveMapState.speed"
+            placeholder="请选择"
+            class="custom-select"
+            size="large"
+            popper-class="custom-select-popper"
+            :teleported="false"
+            style="width: 320px"
+          >
+            <el-option v-for="item in speedList" :key="item.value" :label="item.name" :value="item.value" />
+          </el-select>
+        </div>
+        <div class="tool-right">
+          <div class="prevIcon" @click="toPrevTime" />
+          <div class="playIcon" @click="toPlayTime" />
+          <div class="nextIcon" @click="toNextTime(true)" />
+        </div>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script lang="ts" setup name="RealSituation">
 import tempImg from '@/assets/images/routineCommandMap/realSituation/temp.jfif';
+import Dialog from '@/components/Dialog/index.vue';
+import img1 from '@/components/TimeAxis/tempImg/img1.jfif';
+import img2 from '@/components/TimeAxis/tempImg/img2.jfif';
+import img3 from '@/components/TimeAxis/tempImg/img3.jfif';
+import img4 from '@/components/TimeAxis/tempImg/img4.jfif';
+import img5 from '@/components/TimeAxis/tempImg/img5.jfif';
+import img6 from '@/components/TimeAxis/tempImg/img6.jfif';
+import img7 from '@/components/TimeAxis/tempImg/img7.jfif';
+import img8 from '@/components/TimeAxis/tempImg/img8.jfif';
+import img9 from '@/components/TimeAxis/tempImg/img9.jfif';
+import img10 from '@/components/TimeAxis/tempImg/img10.jfif';
+
 let tabActive = ref(0);
 let tabs = reactive([
   { name: '6h降水', value: '' },
@@ -28,16 +68,121 @@ let tabs = reactive([
 ]);
 const clickTab = (index) => {
   tabActive.value = index;
-
 };
-let imgActive = ref(0);
-let imgList = ref([]);
 let orderList = reactive({
   unit: '',
   dataList: []
 });
+const speedList = reactive([
+  { name: '1秒', value: 1 },
+  { name: '2秒', value: 2 }
+]);
+const liveMapState = reactive({
+  show: false,
+  activeIndex: 0,
+  speed: 1,
+  playing: false,
+  data: [
+    {
+      time: '00:15',
+      img: img1
+    },
+    {
+      time: '01:15',
+      img: img2
+    },
+    {
+      time: '01:45',
+      img: img3
+    },
+    {
+      time: '02:15',
+      img: img4
+    },
+    {
+      time: '03:15',
+      img: img5
+    },
+    {
+      time: '04:15',
+      img: img6
+    },
+    {
+      time: '05:15',
+      img: img7
+    },
+    {
+      time: '06:15',
+      img: img8
+    },
+    {
+      time: '07:15',
+      img: img9
+    },
+    {
+      time: '07:45',
+      img: img10
+    }
+  ]
+});
+watch(
+  () => liveMapState.show,
+  () => {
+    if (!liveMapState.show) {
+      liveMapState.playing = false;
+      liveMapState.activeIndex = 0;
+    }
+  },
+  {
+    immediate: true
+  }
+);
+const handleShowDialog = () => {
+  liveMapState.show = true;
+};
+// 返回上一个时间点
+const toPrevTime = () => {
+  liveMapState.playing = false;
+  if (liveMapState.activeIndex === 0) {
+    liveMapState.playing = false;
+  } else {
+    liveMapState.activeIndex -= 1;
+  }
+};
+
+// 播放
+const toPlayTime = () => {
+  liveMapState.playing = true;
+  if (liveMapState.activeIndex === liveMapState.data.length - 1) {
+    liveMapState.activeIndex = -1;
+  }
+  loopPlay();
+};
+
+// 循环播放
+const loopPlay = () => {
+  if (liveMapState.playing === false) return;
+  toNextTime();
+  //  && timeAxisState.activeIndex < timeAxisState.data.length - 1
+  if (liveMapState.playing) {
+    setTimeout(loopPlay, 1000 * liveMapState.speed);
+  }
+};
+
+// 前往下一个时间点
+const toNextTime = (flag?: boolean) => {
+  if (flag) {
+    liveMapState.playing = false;
+  } else if (!liveMapState.playing) {
+    return;
+  }
+  if (liveMapState.activeIndex === liveMapState.data?.length - 1) {
+    liveMapState.playing = false;
+  } else {
+    liveMapState.activeIndex += 1;
+  }
+};
 const initData = () => {
-  imgList.value = [tempImg];
   orderList = {
     unit: '(mm)',
     dataList: [
@@ -129,4 +274,50 @@ onMounted(() => {
     }
   }
 }
+.img-box2 {
+  width: 100%;
+  height: 1200px;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+.tool-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 120px;
+  font-size: 38px;
+  .tool-left {
+    display: flex;
+    align-items: center;
+    .text {
+      margin-right: 20px;
+    }
+  }
+  .tool-right {
+    display: flex;
+    align-items: center;
+    .prevIcon {
+      width: 69px;
+      height: 73px;
+      background: url('@/assets/images/timeAxis/prev.png') no-repeat;
+      cursor: pointer;
+    }
+    .playIcon {
+      width: 93px;
+      height: 93px;
+      background: url('@/assets/images/timeAxis/play.png') no-repeat;
+      cursor: pointer;
+    }
+    .nextIcon {
+      width: 69px;
+      height: 73px;
+      background: url('@/assets/images/timeAxis/next.png') no-repeat;
+      cursor: pointer;
+    }
+  }
+}
 </style>

src/views/routineCommandMap/LeftSection/index.vue

@@ -21,7 +21,7 @@ import RealSituation from './RealSituation.vue';
   font-size: 36px;
   margin-right: 65px;
   :deep(.video-card) {
-    animation-name: slideRight;
+    animation-name: slideLeft;
     animation-duration: 1.5s;
   }
 }