【历史回顾】使用正确的数据，写死，傻逼

public/chart.html

@@ -19,6 +19,7 @@
   <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 src="./history.js"></script>
 
   <script type="text/javascript">
     const timeList = [
@@ -53,17 +54,26 @@
     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 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
+      const corpList = historyRawData['阶段任务信息'][timeIdx].children.map((item) => {
+        return {
+          companyName: item['品牌'],
+          description: item['简介'],
+          id: item['序号'],
+          name: item['名称'],
+          story: item['故事'],
+        }
       })
-      const corpList = res.data.data.records
 
       dataForRender.nodes = [
         {
@@ -79,9 +89,9 @@
 
       for (const iterator of corpList) {
         const newNode = {
-          name: iterator.companyName,
+          name: iterator.companyName || iterator.name,
           id: iterator.id.toString(),
-          symbolSize: iterator.importance || 50,
+          symbolSize: iterator.importance || (100 * Math.random()),
           itemStyle: {
             color: randomColor()
           }

public/chart4app.html

@@ -22,6 +22,7 @@
   <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 src="./history.js"></script>
 
   <script type="text/javascript">
     const timeList = [
@@ -56,17 +57,26 @@
     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 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
+      const corpList = historyRawData['阶段任务信息'][timeIdx].children.map((item) => {
+        return {
+          companyName: item['品牌'],
+          description: item['简介'],
+          id: item['序号'],
+          name: item['名称'],
+          story: item['故事'],
+        }
       })
-      const corpList = res.data.data.records
 
       dataForRender.nodes = [
         {
@@ -82,9 +92,9 @@
 
       for (const iterator of corpList) {
         const newNode = {
-          name: iterator.companyName,
+          name: iterator.companyName || iterator.name,
           id: iterator.id.toString(),
-          symbolSize: iterator.importance || 50,
+          symbolSize: iterator.importance || (100 * Math.random()),
           itemStyle: {
             color: randomColor()
           }

src/api.js

@@ -1,4 +1,5 @@
 import axios from "axios"
+import historyRawData from "@/assets/mock/history.json"
 
 // axios({
 //   method: 'post',
@@ -14,37 +15,57 @@ import axios from "axios"
 // })
 
 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
+  //   })
+  // },
   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,
+    const ret = historyRawData['阶段任务信息'].find((item) => {
+      return item['所属阶段'] === stage
+    }).children.map((item) => {
+      return {
+        companyName: item['品牌'],
+        description: item['简介'],
+        id: item['序号'],
+        name: item['名称'],
         stage,
-      },
-    }).then((res) => {
-      return res.data.data.records
+        story: item['故事'],
+      }
     })
+    return Promise.resolve(ret)
   },
-  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
-    })
-  }
+  // 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

@@ -87,6 +87,7 @@ import {
   computed,
   watch,
 } from 'vue'
+import dataRaw from "@/assets/mock/history.json"
 
 export default {
   name: 'HistoryView',
@@ -103,16 +104,6 @@ export default {
       '创新驱动',
       '追梦未来',
     ]
-    const timeDescList = [
-      '开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述开埠通商的描述',
-      '曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述曲折发展的描述',
-      '步履维艰的描述步履维艰的描述步履维艰的描述步履维艰的描述步履维艰的描述',
-      '筚路蓝缕的描述筚路蓝缕的描述筚路蓝缕的描述筚路蓝缕的描述筚路蓝缕的描述',
-      '改革开放的描述改革开放的描述改革开放的描述改革开放的描述改革开放的描述',
-      '战略负重的描述战略负重的描述战略负重的描述战略负重的描述战略负重的描述',
-      '创新驱动的描述创新驱动的描述创新驱动的描述创新驱动的描述创新驱动的描述',
-      '追梦未来的描述追梦未来的描述追梦未来的描述追梦未来的描述追梦未来的描述',
-    ]
     const corpList = reactive({
       value: [],
     })
@@ -145,14 +136,14 @@ export default {
         const targetCorp = corpList.value.find((item) => {
           return item.id.toString() === activeCorpId.value.toString()
         })
-        return targetCorp?.companyName || ''
+        return targetCorp?.companyName || targetCorp?.name || ''
       }
     })
     const articleDesc = computed(() => {
       if (activeCorpId.value === '') {
         return ''
       } else if (activeCorpId.value === 'time-node') {
-        return timeDescList[activeTimeIdx.value]
+        return dataRaw['阶段介绍'][activeTimeIdx.value]['介绍']
       } else {
         const targetCorp = corpList.value.find((item) => {
           return item.id.toString() === activeCorpId.value.toString()
@@ -382,12 +373,6 @@ 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;
@@ -395,6 +380,8 @@ export default {
         margin-top: 10px;
       }
       >.txt {
+        max-height: calc(100vh - 400px);
+        overflow: auto;
         font-size: 20px;
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
@@ -402,7 +389,13 @@ export default {
         line-height: 23px;
         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;