历史回顾-时代标签

public/chart.html

@@ -238,7 +238,6 @@
           })
         }
       }
-      console.log(nodesForRender, 'SFHLKSDFJLK');
       showAll()
       window.parent.postMessage('fetch data done', '*')
     })

src/views/HistoryNew.vue

@@ -22,8 +22,8 @@
         draggable="false"
       >
     </div>
-    <div class="stage-name">
-      <h1>开埠通商</h1>
+    <div class="current-stage-name">
+      <h1>{{ stageList[currentTimeIdx].name }}</h1>
       <img
         class="underline"
         src="@/assets/images/underline-history-stage.png"
@@ -58,6 +58,22 @@
         }"
       />
     </div>
+    <div
+      v-for="stageLabel in stageLabelList"
+      :key="stageLabel.name"
+      class="stage-label"
+      :style="{
+        left: stageLabel.left + 'px',
+      }"
+    >
+      {{ stageLabel.name }}
+      <img
+        draggable="false"
+        src="@/assets/images/star.png"
+        alt=""
+        class="star"
+      >
+    </div>
     <HistoryPersonCard
       :name="'sdkfjksd'"
       :img="require('@/assets/images/icon_music_on.png')"
@@ -84,15 +100,17 @@
 </template>
 
 <script>
-import { reactive, toRefs, ref, watch, onMounted, onBeforeUnmount, } from 'vue'
+import { reactive, toRefs, ref, watch, onMounted, onBeforeUnmount, computed } from 'vue'
 import HistoryPersonCard from "@/components/HistoryPersonCard.vue"
+import axios from "axios"
+
 export default {
   components: {
     HistoryPersonCard,
   },
   setup () {
     // 时代阶段
-    const stageList = [
+    const stageList = reactive([
       {
         name: '开埠通商',
         startTime: '1843',
@@ -157,8 +175,36 @@ export default {
         endTimeFriendly: '本世纪三十年代',
         components: '上海工业再创辉煌',
       },
-    ]
-    const currentTimeIdx = ref(0)
+    ])
+
+    // 获取数据
+    Promise.allSettled(stageList.map((stageItem) => {
+      return axios({
+        method: 'post',
+        url: `https://sit-shgybwg.4dage.com/api/show/history/pageList`,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          stage: stageItem.name
+        },
+      }).then((res) => {
+        return res.data.data.records
+      }).then((res) => {
+        stageItem.personList = res
+        const personWidth = 450
+        stageItem.width = personWidth * res.length
+      })
+    })).then((res) => {
+      // 计算各个时代的起始终止位置
+      let temp = 0
+      for (const stageItem of stageList) {
+        stageItem.startPos = temp
+        stageItem.endPos = temp + stageItem.width
+        temp = stageItem.endPos
+      }
+      maxTranslateLength.value = stageList[stageList.length - 1].endPos - window.innerWidth
+    })
 
     // 用户操作相关
     const isMouseDown = ref(false)
@@ -168,7 +214,7 @@ export default {
     // 镜头平移相关
     const moveSpeed = ref(0)
     const translateLength = ref(0)
-    const maxTranslateLength = ref(1000000)
+    const maxTranslateLength = ref(0)
 
     // 用户操作改变镜头平移速度
     function onTouchStart(e) {
@@ -246,11 +292,18 @@ export default {
     //   this.setLongImageTranslateLengthRecord(null)
     // }
 
-
-    // 根据镜头平移距离计算当前时代
+    /**
+     * 当前时代相关
+     */
+    const currentTimeIdx = ref(0)
     watch(translateLength, (vNew) => {
-    }, {
-      immediate: true,
+      for (let index = 0; index < stageList.length; index++) {
+        const stageItem = stageList[index]
+        if (vNew >= stageItem.startPos && vNew <= stageItem.endPos) {
+          currentTimeIdx.value = index
+          break
+        }
+      }
     })
 
     // 时间轴
@@ -277,6 +330,22 @@ export default {
       gearFrameIdx.value = framePassed % gearFrameNumberTotal
     })
 
+    // 各个时代标签
+    const stageLabelList = computed(() => {
+      return stageList.map((item) => {
+        return {
+          name: item.name,
+          initialLeft: item.startPos + 50,
+          left: item.startPos + 50,
+        }
+      })
+    })
+    watch(translateLength, (vNew) => {
+      for (const iterator of stageLabelList.value) {
+        iterator.left = iterator.initialLeft - vNew
+      }
+    })
+
     return {
       onTouchStart,
       onTouchEnd,
@@ -288,6 +357,9 @@ export default {
       timeAxisScaleRepeat,
       computeTimeAxisScaleOpacity,
       gearFrameIdx,
+      stageList,
+      currentTimeIdx,
+      stageLabelList,
     }
   }
 }
@@ -318,7 +390,7 @@ export default {
       width: 100%;
     }
   }
-  >.stage-name {
+  >.current-stage-name {
     position: absolute;
     left: 50%;
     top: 150px;
@@ -346,5 +418,21 @@ export default {
       background-color: #91886b;
     }
   }
+  >.stage-label{
+    position: absolute;
+    bottom: 15.7%;
+    font-size: 96px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 97px;
+    white-space: pre;
+    >img.star{
+      position: absolute;
+      left: 0;
+      top: 0;
+      transform: translate(-50%, -80%);
+    }
+  }
 }
 </style>