ShangHaiInustrialMuseum/src/views/History.vue

<template>
  <div class="history">
    <iframe
      id="iframe-echart"
      src="./chart.html"
      frameborder="0"
    />

    <h1>
      {{ timeNameList[activeTimeIdx] }}
    </h1>
    <menu>
      <img
        class="circle-no-light"
        src="@/assets/images/circle-no-light.png"
        alt=""
        draggable="false"
      >
      <img
        class="circle"
        src="@/assets/images/circle.png"
        alt=""
        draggable="false"
      >
      <ul>
        <li
          v-for="(time, idx) in timeNameList"
          :key="idx"
          :class="{active: activeTimeIdx === idx}"
          @click="onClickTimeItem(idx)"
        >
          <div
            class="point"
          />
          {{ time }}
        </li>
      </ul>
    </menu>

    <article>
      <h2>{{ articleTitle }}</h2>
      <img
        class="splitter"
        src="@/assets/images/splitter-history-top.png"
        alt=""
        draggable="false"
      >
      <div class="txt-wrapper">
        <img
          v-show="articleBannerUrl"
          class="banner"
          :src="articleBannerUrl"
          alt=""
          draggable="false"
        >
        <div
          class="txt"
          v-html="articleDesc"
        />
        <button
          v-show="activeTimeIdx !== 0"
          class="left"
          @click="onClickLeftArrow"
        />
        <button
          v-show="activeTimeIdx !== timeNameList.length - 1"
          class="right"
          @click="onClickRightArrow"
        />
      </div>
      <img
        class="splitter"
        src="@/assets/images/splitter-history-bottom.png"
        alt=""
        draggable="false"
      >
    </article>
  </div>
</template>

<script>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  computed,
  watch,
} from 'vue'
import dataRaw from "@/assets/mock/history.json"

export default {
  name: 'HistoryView',
  setup () {
    const myIframe = ref(null)

    const timeNameList = [
      '开埠通商',
      '曲折发展',
      '步履维艰',
      '筚路蓝缕',
      '改革开放',
      '战略负重',
      '创新驱动',
      '追梦未来',
    ]
    const corpList = reactive({
      value: [],
    })

    const activeTimeIdx = ref(0)
    function onClickLeftArrow() {
      if (activeTimeIdx.value > 0) {
        activeTimeIdx.value--
      }
    }
    function onClickRightArrow() {
      if (activeTimeIdx.value < timeNameList.length - 1) {
        activeTimeIdx.value++
      }
    }
    watch(activeTimeIdx, async (newV) => {
      if (document.getElementById('iframe-echart')?.contentWindow?.changeTime) {
        document.getElementById('iframe-echart').contentWindow.changeTime(newV)
      }
      corpList.value = await api.getHistoryList({ stage: timeNameList[newV] })
    }, { immediate: true })

    const activeCorpId = ref('')
    const articleTitle = computed(() => {
      if (activeCorpId.value === '') {
        return ''
      } else if (activeCorpId.value === '-1') {
        return timeNameList[activeTimeIdx.value]
      } else {
        const targetCorp = corpList.value.find((item) => {
          return item.id.toString() === activeCorpId.value.toString()
        })
        return targetCorp?.name || targetCorp?.companyName || ''
      }
    })
    const articleDesc = computed(() => {
      if (activeCorpId.value === '') {
        return ''
      } else if (activeCorpId.value === '-1') {
        return dataRaw['阶段介绍'][activeTimeIdx.value]['介绍']
      } else {
        const targetCorp = corpList.value.find((item) => {
          return item.id.toString() === activeCorpId.value.toString()
        })
        return targetCorp?.description || targetCorp?.story || ''
      }
    })
    const articleBannerUrl = ref('')
    watch(activeCorpId, async (newV) => {
      if (newV === '') {
        articleBannerUrl.value = ''
      } else if (newV === '-1') {
        articleBannerUrl.value = ''
      } else {
        const corpDetail = await api.getHistoryDetail(newV)
        articleBannerUrl.value = corpDetail?.file[0]?.filePath ? process.env.VUE_APP_API_ORIGIN + corpDetail?.file[0]?.filePath : ''
      }
    })
    watch(activeTimeIdx, () => {
      articleBannerUrl.value = ''
    })
    function onClickTimeItem(idx) {
      activeTimeIdx.value = idx
      activeCorpId.value = ''
    }

    function onIframeMessage(e) {
      console.log('iframe message: ', e.data)
      if (e.data.startsWith && e.data.startsWith('node-selected: ')) {
        activeCorpId.value = e.data.split('node-selected: ')[1]
      }
    }
    onMounted(() => {
      window.addEventListener('message', onIframeMessage)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('message', onIframeMessage)
    })

    return {
      timeNameList,
      activeTimeIdx,
      onClickLeftArrow,
      onClickRightArrow,
      activeCorpId,
      articleTitle,
      articleDesc,
      articleBannerUrl,
      onClickTimeItem,
    }
  }
}
</script>

<style lang="less" scoped>
.history {
  >iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  >h1 {
    position: absolute;
    top: 51px;
    left: 81px;
    max-width: 50%;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    font-size: 48px;
    font-family: Source Han Sans CN-Heavy, Source Han Sans CN;
    font-weight: 800;
    color: #FFFFFF;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid rgba(217, 217, 217, 0.2);
    border-bottom: 1px solid rgba(217, 217, 217, 0.2);
  }
  >menu {
    position: absolute;
    top: 214px;
    left: 0;
    >img.circle-no-light {
      position: absolute;
      top: -20%;
      left: -60px;
      height: 130%;
      pointer-events: none;
    }
    >img.circle {
      position: absolute;
      top: -20%;
      left: -60px;
      height: 130%;
      pointer-events: none;
      z-index: 1;
    }
    >ul {
      >li {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        background: linear-gradient(270deg, #3A454F 0%, rgba(22,28,33,0) 100%);
        // border-radius: 3px;
        border: 1px solid;
        border-left: none;
        border-image: linear-gradient(270deg, rgba(78, 96, 112, 1), rgba(78, 96, 112, 0)) 1 1;
        margin-bottom: 15px;
        font-size: 20px;
        font-family: Source Han Sans CN-Light, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        // backdrop-filter: blur(10px); // 会导致产生层叠上下文！！！使得圆点无法在弧线上层！！！
        padding-right: 14px;
        cursor: pointer;
        position: relative;
        >.point {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: #D1DCE5;
          box-shadow: 0px 0px 12px 0px #6D9DC6, 0px 0px 8px 0px #6D9DC6;
          z-index: 2;
        }
        &:hover {
          background: linear-gradient(270deg, #B0A179 0%, rgba(255,209,91,0) 100%);
          border-image: linear-gradient(270deg, rgba(176, 161, 121, 1), rgba(176, 161, 121, 0)) 1 1;
        }
        &.active {
          font-size: 22px;
          font-family: Source Han Sans CN-Bold, Source Han Sans CN;
          font-weight: bold;
          color: #FFFFFF;
          text-shadow: 0px 0px 10px #8B7C54;
          >.point {
            background: #FFFFFF;
            box-shadow: 0px 0px 12px 0px #FFD15B, 0px 0px 8px 0px #FFD15B, 0px 0px 10px 0px #FFD15B, 0px 0px 5px 0px #FFD15B;
          }
        }
        &:nth-of-type(1) {
          width: calc(170px + 25px * 1);
          >.point {
            margin-right: calc(48px + 80px);
          }
        }
        &:nth-of-type(2) {
          width: calc(170px + 25px * 2);
          >.point {
            margin-right: calc(43px + 80px);
          }
        }
        &:nth-of-type(3) {
          width: calc(170px + 25px * 3);
          >.point {
            margin-right: calc(50px + 80px);
          }
        }
        &:nth-of-type(4) {
          width: calc(170px + 25px * 4);
          >.point {
            margin-right: calc(65px + 80px);
          }
        }
        &:nth-of-type(5) {
          width: calc(170px + 25px * 3);
          >.point {
            margin-right: calc(40px + 80px);
          }
        }
        &:nth-of-type(6) {
          width: calc(170px + 25px * 2);
          >.point {
            margin-right: calc(23px + 80px);
          }
        }
        &:nth-of-type(7) {
          width: calc(170px + 25px * 1);
          >.point {
            margin-right: calc(15px + 80px);
          }
        }
        &:nth-of-type(8) {
          width: 170px;
          >.point {
            margin-right: calc(17px + 80px);
          }
        }
      }
    }
  }

  >article {
    position: absolute;
    top: 134px;
    right: 114px;
    width: 458px;
    @media only screen and (max-width: 1700px) {
      right: 20px;
    }
    >h2 {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #FFFFFF;
      text-shadow: 0px 0px 9px #B0A179;
      margin-bottom: 28px;
      &::before {
        content: '';
        display: inline-block;
        margin-right: 10px;
        width: 3px;
        height: 3px;
        background: #B0A179;
      }
    }
    >img.splitter {
      width: 100%;
      margin-bottom: 25px;
    }
    >.txt-wrapper {
      margin-bottom: 20px;
      position: relative;
      padding-left: 40px;
      padding-right: 40px;
      > img.banner {
        width: 100%;
        max-height: 300px;
        object-fit: contain;
        margin-top: 10px;
      }
      >.txt {
        max-height: calc(100vh - 400px);
        overflow: auto;
        font-size: 20px;
        font-family: Source Han Sans CN-Light, Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.5;
        padding-right: 10px;
        margin-right: -10px;
        white-space: pre-wrap;
        text-indent: 2em;
        &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
        &::-webkit-scrollbar-thumb {
          background: rgba(220, 231, 240, 0.2);
          border-radius: 2px;
        }
      }
      >button {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-size: 90%;
        background-repeat: no-repeat;
        &.left {
          left: 0;
          background-image: url(@/assets/images/arrow_left.png);
          background-position: left center;
        }
        &.right {
          right: 0;
          background-image: url(@/assets/images/arrow_right.png);
          background-position: right center;
        }
      }
    }
  }
}
</style>