【历史回顾】对接接口

.env

@@ -0,0 +1 @@
+VUE_APP_API_ORIGIN=https://sit-shgybwg.4dage.com

README.md

@@ -2,6 +2,6 @@
 https://culture.4dage.com/demo/ShangHaiGongYe/index.html#/history
 
 ## 部署测试环境
-文件存放位置：
+文件存放位置：/Default/阿里云/项目节点/项目测试/阿里云-四维时代-项目测试服务器-8.135.106.227/home/data/museum_shanghai_gongye_data/web
 
 访问url：https://sit-shgybwg.4dage.com/web/index.html#/general

public/chart.html

@@ -18,86 +18,20 @@
   <div id="container" style="height: 100%"></div>
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script type="text/javascript" src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
   <script type="text/javascript">
-    const testData = [
-      {
-        name: '开埠通商',
-        desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
-        corps: [
-          {
-            name: '李鸿章',
-            brand: '创办江南制造局、上海机器织布局。',
-            desc: '',
-            story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',
-            importance: 30,
-            id: '1'
-          },
-          {
-            name: '徐寿',
-            brand: '上海江南制造总局',
-            desc: '清代著名科学家，上海江南制造总局襄办。',
-            story: '',
-            importance: 40,
-            id: '2'
-          },
-          {
-            name: '刘永康',
-            brand: '正泰橡皮物品制造厂',
-            desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',
-            story: '',
-            importance: 50,
-            id: '3'
-          },
-        ]
-      },
-      {
-        name: '曲折发展',
-        desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
-        corps: [
-          {
-            name: '黄佐卿',
-            brand: '裕晋纱厂',
-            desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',
-            story: '',
-            importance: 30,
-            id: '1'
-          },
-          {
-            name: '孙多森、孙多鑫',
-            brand: '阜丰面粉厂',
-            desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',
-            story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',
-            importance: 30,
-            id: '2'
-          },
-          {
-            name: '严裕棠',
-            brand: '大隆机器厂',
-            desc: '1902年开办的大隆机器厂',
-            story: '',
-            importance: 30,
-            id: '3'
-          },
-          {
-            name: '张士德、刘致祥',
-            brand: '中国精益眼镜公司',
-            desc: '1911年集资开设中国精益眼镜公司',
-            story: '',
-            importance: 30,
-            id: '4'
-          },
-          {
-            name: '荣宗敬、荣德生',
-            brand: '第一家面粉厂、申新纺织公司',
-            desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',
-            story: '荣氏企业：上海民族工业的重要台柱之一。',
-            importance: 30,
-            id: '5'
-          },
-        ]
-      },
+    const timeList = [
+      '开埠通商',
+      '曲折发展',
+      '步履维艰',
+      '筚路蓝缕',
+      '改革开放',
+      '战略负重',
+      '创新驱动',
+      '追梦未来',
     ]
-
+    
     function randomColor() {
       return '#' + Math.floor(
           (
@@ -116,13 +50,25 @@
       useDirtyRect: false
     });
     
-    function showChart(timeIdx) {
+    async function showChart(timeIdx) {
       myChart.clear()
       
+      const res = await axios({
+        method: 'post',
+        url: `https://sit-shgybwg.4dage.com/api/show/history/pageList`,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          stage: timeList[timeIdx]
+        },
+      })
+      const corpList = res.data.data.records
+
       dataForRender.nodes = [
         {
-          name: testData[timeIdx].name,
-          id: '0',
+          name: timeList[timeIdx],
+          id: 'time-node',
           symbolSize: 100,
           itemStyle: {
             color: randomColor()
@@ -131,18 +77,18 @@
       ]
       dataForRender.edges = []
 
-      for (const iterator of testData[timeIdx].corps) {
+      for (const iterator of corpList) {
         const newNode = {
-          name: iterator.brand,
-          id: iterator.id,
-          symbolSize: iterator.importance,
+          name: iterator.companyName,
+          id: iterator.id.toString(),
+          symbolSize: iterator.importance || 50,
           itemStyle: {
             color: randomColor()
           }
         }
         dataForRender.nodes.push(newNode)
       }
-      // 除了代表时代的那个节点，其他节点的尺寸归一化到[10, 70]
+      // 除了代表时代的那个节点，其他节点的尺寸归一化
       let vMax = Number.NEGATIVE_INFINITY
       let vMin = Number.POSITIVE_INFINITY
       const vMaxNew = 50
@@ -168,16 +114,28 @@
           iterator.symbolSize = vMinNew + (iterator.symbolSize - vMin) * scale
         }
       }
-      // console.log(dataForRender.nodes);
+      // 画边
       for (let i = 0; i < dataForRender.nodes.length; i++) {
         for (let j = i + 1; j < dataForRender.nodes.length; j++) {
           const hasCenterNode = (i === 0 || j === 0)
-          const newEdge = {
-            source: dataForRender.nodes[i].id,
-            target: dataForRender.nodes[j].id,
-            value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * (hasCenterNode ? 10 : 1), // 值越大，连接的两个节点间斥力越小。
+          if (hasCenterNode) {
+            const newEdge = {
+              source: dataForRender.nodes[i].id,
+              target: dataForRender.nodes[j].id,
+              value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * 10, // 值越大，连接的两个节点间斥力越小。
+            }
+            dataForRender.edges.push(newEdge)
+          } else {
+            const newEdge = {
+              source: dataForRender.nodes[i].id,
+              target: dataForRender.nodes[j].id,
+              value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * 1, // 值越大，连接的两个节点间斥力越小。
+              lineStyle: {
+                opacity: 0,
+              }
+            }
+            dataForRender.edges.push(newEdge)
           }
-          dataForRender.edges.push(newEdge)
         }
       }
       // console.log(dataForRender);
@@ -234,11 +192,11 @@
 
       setTimeout(() => {
         // 等myChart上注册了select回调后再执行
-        // 一开始自动选中0号节点，也就是表示时代的那个
+        // 一开始自动选中表示时代的那个节点
         myChart.dispatchAction({
           type: 'select',
           seriesIndex: 0,
-          name: testData[timeIdx].name,
+          name: timeList[timeIdx],
         })
       }, 0);
     }
@@ -250,8 +208,7 @@
       if (params.dataType === 'node') { // 用户选中节点触发的
         window.parent.postMessage(`node-selected: ${dataForRender.nodes[params.dataIndexInside].id}`, '*')
       } else if (params.type === 'select') { // 程序里调用dispatchAction触发的，且type为select
-        console.log('iframe message: emitting...');
-        window.parent.postMessage(`node-selected: 0`, '*')
+        window.parent.postMessage(`node-selected: ${dataForRender.nodes[0].id}`, '*')
       }
     }
     myChart.on('select', onSelect)

public/chart4app.html

@@ -21,84 +21,18 @@
   <div id="container" style="height: 100%"></div>
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script type="text/javascript" src="https://cdn.staticfile.org/echarts/5.4.2/echarts.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
   <script type="text/javascript">
-    const testData = [
-      {
-        name: '开埠通商',
-        desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
-        corps: [
-          {
-            name: '李鸿章',
-            brand: '创办江南制造局、上海机器织布局。',
-            desc: '',
-            story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',
-            importance: 30,
-            id: '1'
-          },
-          {
-            name: '徐寿',
-            brand: '上海江南制造总局',
-            desc: '清代著名科学家，上海江南制造总局襄办。',
-            story: '',
-            importance: 40,
-            id: '2'
-          },
-          {
-            name: '刘永康',
-            brand: '正泰橡皮物品制造厂',
-            desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',
-            story: '',
-            importance: 50,
-            id: '3'
-          },
-        ]
-      },
-      {
-        name: '曲折发展',
-        desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
-        corps: [
-          {
-            name: '黄佐卿',
-            brand: '裕晋纱厂',
-            desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',
-            story: '',
-            importance: 30,
-            id: '1'
-          },
-          {
-            name: '孙多森、孙多鑫',
-            brand: '阜丰面粉厂',
-            desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',
-            story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',
-            importance: 30,
-            id: '2'
-          },
-          {
-            name: '严裕棠',
-            brand: '大隆机器厂',
-            desc: '1902年开办的大隆机器厂',
-            story: '',
-            importance: 30,
-            id: '3'
-          },
-          {
-            name: '张士德、刘致祥',
-            brand: '中国精益眼镜公司',
-            desc: '1911年集资开设中国精益眼镜公司',
-            story: '',
-            importance: 30,
-            id: '4'
-          },
-          {
-            name: '荣宗敬、荣德生',
-            brand: '第一家面粉厂、申新纺织公司',
-            desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',
-            story: '荣氏企业：上海民族工业的重要台柱之一。',
-            importance: 30,
-            id: '5'
-          },
-        ]
-      },
+    const timeList = [
+      '开埠通商',
+      '曲折发展',
+      '步履维艰',
+      '筚路蓝缕',
+      '改革开放',
+      '战略负重',
+      '创新驱动',
+      '追梦未来',
     ]
 
     function randomColor() {
@@ -119,13 +53,25 @@
       useDirtyRect: false
     });
     
-    function showChart(timeIdx) {
+    async function showChart(timeIdx) {
       myChart.clear()
       
+      const res = await axios({
+        method: 'post',
+        url: `https://sit-shgybwg.4dage.com/api/show/history/pageList`,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          stage: timeList[timeIdx]
+        },
+      })
+      const corpList = res.data.data.records
+
       dataForRender.nodes = [
         {
-          name: testData[timeIdx].name,
-          id: '0',
+          name: timeList[timeIdx],
+          id: 'time-node',
           symbolSize: 100,
           itemStyle: {
             color: randomColor()
@@ -134,18 +80,18 @@
       ]
       dataForRender.edges = []
 
-      for (const iterator of testData[timeIdx].corps) {
+      for (const iterator of corpList) {
         const newNode = {
-          name: iterator.brand,
-          id: iterator.id,
-          symbolSize: iterator.importance,
+          name: iterator.companyName,
+          id: iterator.id.toString(),
+          symbolSize: iterator.importance || 50,
           itemStyle: {
             color: randomColor()
           }
         }
         dataForRender.nodes.push(newNode)
       }
-      // 除了代表时代的那个节点，其他节点的尺寸归一化到[10, 70]
+      // 除了代表时代的那个节点，其他节点的尺寸归一化
       let vMax = Number.NEGATIVE_INFINITY
       let vMin = Number.POSITIVE_INFINITY
       const vMaxNew = 50
@@ -171,16 +117,28 @@
           iterator.symbolSize = vMinNew + (iterator.symbolSize - vMin) * scale
         }
       }
-      // console.log(dataForRender.nodes);
+      // 画边
       for (let i = 0; i < dataForRender.nodes.length; i++) {
         for (let j = i + 1; j < dataForRender.nodes.length; j++) {
           const hasCenterNode = (i === 0 || j === 0)
-          const newEdge = {
-            source: dataForRender.nodes[i].id,
-            target: dataForRender.nodes[j].id,
-            value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * (hasCenterNode ? 10 : 1), // 值越大，连接的两个节点间斥力越小。
+          if (hasCenterNode) {
+            const newEdge = {
+              source: dataForRender.nodes[i].id,
+              target: dataForRender.nodes[j].id,
+              value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * 10, // 值越大，连接的两个节点间斥力越小。
+            }
+            dataForRender.edges.push(newEdge)
+          } else {
+            const newEdge = {
+              source: dataForRender.nodes[i].id,
+              target: dataForRender.nodes[j].id,
+              value: dataForRender.nodes[i].symbolSize * dataForRender.nodes[j].symbolSize * 1, // 值越大，连接的两个节点间斥力越小。
+              lineStyle: {
+                opacity: 0,
+              }
+            }
+            dataForRender.edges.push(newEdge)
           }
-          dataForRender.edges.push(newEdge)
         }
       }
       // console.log(dataForRender);
@@ -237,11 +195,11 @@
 
       setTimeout(() => {
         // 等myChart上注册了select回调后再执行
-        // 一开始自动选中0号节点，也就是表示时代的那个
+        // 一开始自动选中表示时代的那个节点
         myChart.dispatchAction({
           type: 'select',
           seriesIndex: 0,
-          name: testData[timeIdx].name,
+          name: timeList[timeIdx],
         })
       }, 0);
     }
@@ -258,7 +216,7 @@
         }
       } else if (params.type === 'select') { // 程序里调用dispatchAction触发的，且type为select
         if (window.vuplex) {
-          window.vuplex.postMessage({ type: 'select-id', message: '0' });
+          window.vuplex.postMessage({ type: 'select-id', message: dataForRender.nodes[0].id });
         } else {
           console.error('不存在window.vuplex!');
         }

public/record.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <title>wgchen</title>
-  <link rel="shortcut icon" href="#" />
-  <meta name="keywords" content="https://wgchen.blog.csdn.net">
-  <meta name="keywords" content="技术文章">
-  <meta name="keywords" content="博客">
-  <meta name="keywords" content="willem">
-  <meta name="keywords" content="ycc">
-</head>
-
-<body>
-
-  <video class="video" width="600px" controls></video>
-  <button class="record-btn">record</button>
-
-  <script>
-    let btn = document.querySelector(".record-btn")
-    console.log(navigator);
-    console.log(navigator.mediaDevices);
-    btn.addEventListener("click", async function () {
-      let stream = await navigator.mediaDevices.getDisplayMedia({
-        video: true
-      })
-
-      // 需要更好的浏览器支持
-      const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?
-        "video/webm; codecs=vp9" :
-        "video/webm"
-      let mediaRecorder = new MediaRecorder(stream, {
-        mimeType: mime
-      })
-
-      let chunks = []
-      mediaRecorder.addEventListener('dataavailable', function (e) {
-        chunks.push(e.data)
-      })
-
-      mediaRecorder.addEventListener('stop', function () {
-        let blob = new Blob(chunks, {
-          type: chunks[0].type
-        })
-        let url = URL.createObjectURL(blob)
-
-        let video = document.querySelector("video")
-        video.src = url
-
-        let a = document.createElement('a')
-        a.href = url
-        a.download = 'video.webm'
-        a.click()
-      })
-
-      // 必须手动启动
-      mediaRecorder.start()
-    })
-  </script>
-
-</body>
-
-</html>

src/App.vue

@@ -133,11 +133,11 @@ export default {
       var canvas = document.querySelector("#unity-canvas")
 
       var buildUrl = "unity/Build"
-      var loaderUrl = buildUrl + "/SHIndustryMuseum_1.9.loader.js"
+      var loaderUrl = buildUrl + "/SHIndustryMuseum_2.0.loader.js"
       var config = {
-        dataUrl: buildUrl + "/SHIndustryMuseum_1.9.data.unityweb",
-        frameworkUrl: buildUrl + "/SHIndustryMuseum_1.9.framework.js.unityweb",
-        codeUrl: buildUrl + "/SHIndustryMuseum_1.9.wasm.unityweb",
+        dataUrl: buildUrl + "/SHIndustryMuseum_2.0.data.unityweb",
+        frameworkUrl: buildUrl + "/SHIndustryMuseum_2.0.framework.js.unityweb",
+        codeUrl: buildUrl + "/SHIndustryMuseum_2.0.wasm.unityweb",
         streamingAssetsUrl: "StreamingAssets",
         companyName: "DefaultCompany",
         productName: "SHIndustryMuseum",

src/api.js

@@ -1,4 +1,4 @@
-// import axios from "axios"
+import axios from "axios"
 
 // axios({
 //   method: 'post',
@@ -14,4 +14,37 @@
 // })
 
 export default {
+  getHistoryList({
+    pageNum = 0,
+    pageSize = 0,
+    searchKey = '',
+    stage = '',
+  } = {}) {
+    return axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/history/pageList`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+      data: {
+        pageNum,
+        pageSize,
+        searchKey,
+        stage,
+      },
+    }).then((res) => {
+      return res.data.data.records
+    })
+  },
+  getHistoryDetail(id) {
+    return axios({
+      method: 'get',
+      url: `${process.env.VUE_APP_API_ORIGIN}/api/show/history/detail/${id}`,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }).then((res) => {
+      return res.data.data
+    })
+  }
 }

src/views/History.vue

@@ -7,7 +7,7 @@
     />
 
     <h1>
-      {{ timeList[activeTimeIdx].name }}
+      {{ timeNameList[activeTimeIdx] }}
     </h1>
     <menu>
       <img
@@ -24,7 +24,7 @@
       >
       <ul>
         <li
-          v-for="(time, idx) in timeList"
+          v-for="(time, idx) in timeNameList"
           :key="idx"
           :class="{active: activeTimeIdx === idx}"
           @click="onClickTimeItem(idx)"
@@ -32,7 +32,7 @@
           <div
             class="point"
           />
-          {{ time.name }}
+          {{ time }}
         </li>
       </ul>
     </menu>
@@ -46,6 +46,13 @@
         draggable="false"
       >
       <div class="txt-wrapper">
+        <img
+          v-show="articleBannerUrl"
+          class="banner"
+          :src="articleBannerUrl"
+          alt=""
+          draggable="false"
+        >
         <div
           class="txt"
           v-html="articleDesc"
@@ -56,7 +63,7 @@
           @click="onClickLeftArrow"
         />
         <button
-          v-show="activeTimeIdx !== timeList.length - 1"
+          v-show="activeTimeIdx !== timeNameList.length - 1"
           class="right"
           @click="onClickRightArrow"
         />
@@ -78,6 +85,7 @@ import {
   onMounted,
   onBeforeUnmount,
   computed,
+  watch,
 } from 'vue'
 
 export default {
@@ -85,120 +93,30 @@ export default {
   setup () {
     const myIframe = ref(null)
 
-    const timeList = reactive([
-      {
-        name: '开埠通商',
-        desc: '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
-        corps: [
-          {
-            name: '李鸿章',
-            brand: '创办江南制造局、上海机器织布局。',
-            desc: '',
-            story: '江南制造总局：中国民族工业从此起步；上海机器织布局：开创中国近代纺织业之先河。',
-            importance: 30,
-            id: '1'
-          },
-          {
-            name: '徐寿',
-            brand: '上海江南制造总局',
-            desc: '清代著名科学家，上海江南制造总局襄办。',
-            story: '',
-            importance: 40,
-            id: '2'
-          },
-          {
-            name: '刘永康',
-            brand: '正泰橡皮物品制造厂',
-            desc: '创办正泰橡皮物品制造厂，首创“回力”商标。',
-            story: '',
-            importance: 50,
-            id: '3'
-          },
-        ]
-      },
-      {
-        name: '曲折发展',
-        desc: '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
-        corps: [
-          {
-            name: '黄佐卿',
-            brand: '裕晋纱厂',
-            desc: '1895年投资的裕晋纱厂在上海杨树浦路落成并开工投产',
-            story: '',
-            importance: 30,
-            id: '1'
-          },
-          {
-            name: '孙多森、孙多鑫',
-            brand: '阜丰面粉厂',
-            desc: '1900年集资创办上海第一家民族机器面粉厂“阜丰面粉厂”',
-            story: '孙氏通、孚、丰集团：官办企业转化为民族资本企业的典型。',
-            importance: 30,
-            id: '2'
-          },
-          {
-            name: '严裕棠',
-            brand: '大隆机器厂',
-            desc: '1902年开办的大隆机器厂',
-            story: '',
-            importance: 30,
-            id: '3'
-          },
-          {
-            name: '张士德、刘致祥',
-            brand: '中国精益眼镜公司',
-            desc: '1911年集资开设中国精益眼镜公司',
-            story: '',
-            importance: 30,
-            id: '4'
-          },
-          {
-            name: '荣宗敬、荣德生',
-            brand: '第一家面粉厂、申新纺织公司',
-            desc: '第一家面粉厂，1915年，荣氏兄弟又创建申新纺织公司，人称“棉纱大王”。1919年至1921年，又发起和参与了上海华商面粉交易所、纱布交易所，成为上海民族工业的重要台柱之一。',
-            story: '荣氏企业：上海民族工业的重要台柱之一。',
-            importance: 30,
-            id: '5'
-          },
-        ]
-      },
-      {
-        name: '步履维艰',
-        desc: '',
-        corps: [
-        ]
-      },
-      {
-        name: '筚路蓝缕',
-        desc: '',
-        corps: [
-        ]
-      },
-      {
-        name: '改革开放',
-        desc: '',
-        corps: [
-        ]
-      },
-      {
-        name: '战略负重',
-        desc: '',
-        corps: [
-        ]
-      },
-      {
-        name: '创新驱动',
-        desc: '',
-        corps: [
-        ]
-      },
-      {
-        name: '追梦未来',
-        desc: '',
-        corps: [
-        ]
-      },
-    ])
+    const timeNameList = [
+      '开埠通商',
+      '曲折发展',
+      '步履维艰',
+      '筚路蓝缕',
+      '改革开放',
+      '战略负重',
+      '创新驱动',
+      '追梦未来',
+    ]
+    const timeDescList = [
+      '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
+      '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
+      '步履维艰的描述步履维艰的描述步履维艰的描述步履维艰的描述步履维艰的描述',
+      '筚路蓝缕的描述筚路蓝缕的描述筚路蓝缕的描述筚路蓝缕的描述筚路蓝缕的描述',
+      '改革开放的描述改革开放的描述改革开放的描述改革开放的描述改革开放的描述',
+      '战略负重的描述战略负重的描述战略负重的描述战略负重的描述战略负重的描述',
+      '创新驱动的描述创新驱动的描述创新驱动的描述创新驱动的描述创新驱动的描述',
+      '追梦未来的描述追梦未来的描述追梦未来的描述追梦未来的描述追梦未来的描述',
+    ]
+    const corpList = reactive({
+      value: [],
+    })
+
     const activeTimeIdx = ref(0)
     function onClickLeftArrow() {
       if (activeTimeIdx.value > 0) {
@@ -206,39 +124,59 @@ export default {
       }
     }
     function onClickRightArrow() {
-      if (activeTimeIdx.value < timeList.length - 1) {
+      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 === '0') {
-        return timeList[activeTimeIdx.value].name
+      } else if (activeCorpId.value === 'time-node') {
+        return timeNameList[activeTimeIdx.value]
       } else {
-        const targetCorp = timeList[activeTimeIdx.value].corps.find((item) => {
-          return item.id === activeCorpId.value
+        const targetCorp = corpList.value.find((item) => {
+          return item.id.toString() === activeCorpId.value.toString()
         })
-        return targetCorp?.brand
+        return targetCorp?.companyName || ''
       }
     })
     const articleDesc = computed(() => {
       if (activeCorpId.value === '') {
         return ''
-      } else if (activeCorpId.value === '0') {
-        return timeList[activeTimeIdx.value].desc
+      } else if (activeCorpId.value === 'time-node') {
+        return timeDescList[activeTimeIdx.value]
       } else {
-        const targetCorp = timeList[activeTimeIdx.value].corps.find((item) => {
-          return item.id === activeCorpId.value
+        const targetCorp = corpList.value.find((item) => {
+          return item.id.toString() === activeCorpId.value.toString()
         })
-        return targetCorp?.desc || targetCorp?.story
+        return targetCorp?.description || targetCorp?.story || ''
       }
     })
+    const articleBannerUrl = ref('')
+    watch(activeCorpId, async (newV) => {
+      if (newV === '') {
+        articleBannerUrl.value = ''
+      } else if (newV === 'time-node') {
+        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 = ''
-      document.getElementById('iframe-echart').contentWindow.changeTime(idx)
     }
 
     function onIframeMessage(e) {
@@ -255,13 +193,14 @@ export default {
     })
 
     return {
-      timeList,
+      timeNameList,
       activeTimeIdx,
       onClickLeftArrow,
       onClickRightArrow,
       activeCorpId,
       articleTitle,
       articleDesc,
+      articleBannerUrl,
       onClickTimeItem,
     }
   }
@@ -443,10 +382,19 @@ export default {
       position: relative;
       padding-left: 40px;
       padding-right: 35px;
+      min-height: 40px;
+      &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+      &::-webkit-scrollbar-thumb {
+        background: rgba(220, 231, 240, 0.2);
+        border-radius: 2px;
+      }
+      > img.banner {
+        width: 100%;
+        max-height: 300px;
+        object-fit: contain;
+        margin-top: 10px;
+      }
       >.txt {
-        min-height: 40px;
-        max-height: 500px;
-        overflow: auto;
         font-size: 20px;
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
@@ -454,11 +402,7 @@ export default {
         line-height: 23px;
         padding-right: 10px;
         margin-right: -10px;
-        &::-webkit-scrollbar { background: transparent; width: 4px; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
-        &::-webkit-scrollbar-thumb {
-          background: rgba(220, 231, 240, 0.2);
-          border-radius: 2px;
-        }
+
       }
       >button {
         width: 36px;