add chart/Timeline page

src/api/news.js

@@ -0,0 +1,14 @@
+import { delete0, get, post } from '@/utils/request'
+
+const newsApi = {
+  newsListApi: '/api/content/post/news/list',
+  newsDetailApi: '/api/content/post/news/detail'
+}
+
+export function getNewsList(page) {
+  return get(newsApi.newsListApi + '?pn=' + page)
+}
+
+export function getNewsDetail(newsId) {
+  return get(newsApi.newsDetailApi + '/' + newsId)
+}

src/router/chart.js

@@ -2,6 +2,7 @@ const ChartIndex = () => import('views/chart/ChartIndex')
 const ChartMap = () => import('views/chart/ChartMap')
 const HeatMap = () => import('views/chart/HeatMap')
 const LineChart = () => import('views/chart/LineChart')
+const Timeline = () => import('views/chart/Timeline')
 
 export default {
   path: '/chart',
@@ -32,6 +33,12 @@ export default {
       name: '折线图',
       component: LineChart,
       meta: { needAuth: false }
+    },
+    {
+      path: '/chart/timeline',
+      name: 'Timeline',
+      component: Timeline,
+      meta: { needAuth: false }
     }
   ]
 }

src/views/chart/ChartIndex.vue

@@ -29,6 +29,10 @@
             <i class="el-icon-map-location" />
             <span slot="title">折线图</span>
           </el-menu-item>
+          <el-menu-item index="/chart/timeline">
+            <i class="el-icon-map-location" />
+            <span slot="title">Timeline</span>
+          </el-menu-item>
         </el-menu>
       </el-col>
       <el-col :md="2" />

src/views/chart/Timeline.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <el-row class="movie-list">
+      <el-timeline style="margin-left: 50%">
+        <el-timeline-item
+          v-for="(item, index) in dataList"
+          :key="index"
+          :timestamp="item.dateTime"
+          placement="top"
+        >
+          <div v-if="item.data !== null" style="display: flex; align-items: center;height: 50px;margin-bottom: 50px">
+            <el-card
+              :style="{
+                width: '500px',
+                left: item.data.master ? '-520px' : null,
+                position: 'absolute'
+              }"
+            >
+              <h2>{{ item.data.auditorUserName }}</h2>
+              <p style="margin-top: 5px">
+                {{ item.data.auditorUserName !== null ? item.data.approvalOpinion : '发起审批' }} - {{ item.dateTime }}
+              </p>
+            </el-card>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Timeline',
+  data() {
+    return {
+      reverse: false,
+      dataList: [],
+      dataList1: []
+    }
+  },
+  created() {
+    document.title = 'Timeline'
+    // this.getDayData()
+    this.getDateData()
+  },
+  methods: {
+    getDayData() {
+      var start = new Date('2025/07/30')
+      for (var i = 0; i < 24; i++) {
+        const item = {
+          dateTime: this.formatTime(start),
+          data: null
+        }
+        this.dataList.push(item)
+        start = this.incrByMonth1(start)
+      }
+
+      var date1 = new Date(25, 7, 30, 23, 33, 0)
+      const item1 = {
+        dateTime: this.formatTime(date1),
+        data: {
+          num: Math.floor(Math.random() * 10000),
+          auditorUserName: 'song',
+          roleName: 'user',
+          approvalOpinion: 'pass',
+          master: true
+        }
+      }
+      this.dataList.push(item1)
+    },
+    getDateData() {
+      var current = new Date()
+      var start = new Date('2024/12/01')
+      while (start.getTime() < current.getTime()) {
+        const item = {
+          dateTime: this.formatDate(start),
+          data: null
+        }
+        this.dataList.push(item)
+
+        var date1 = new Date(start)
+        this.getData2(date1)
+        start = this.incrByMonth(start)
+      }
+
+      const item = {
+        dateTime: this.formatDate(start),
+        data: null
+      }
+      this.dataList.push(item)
+    },
+    getData2(date1) {
+      date1.setDate(Math.ceil(Math.random() * 30))
+      const item1 = {
+        dateTime: this.formatDate(date1),
+        data: null
+      }
+
+      var data = null
+      var i = Math.ceil(Math.random() * 10)
+      console.log('i = ' + i + ', date = ' + date1)
+      if (i % 2 === 0) {
+        data = {
+          num: Math.floor(Math.random() * 10000),
+          auditorUserName: 'hao',
+          roleName: 'user',
+          approvalOpinion: 'pass',
+          master: true
+        }
+      } else {
+        data = {
+          num: Math.floor(Math.random() * 10000),
+          auditorUserName: 'song',
+          roleName: 'user',
+          approvalOpinion: 'pass',
+          master: false
+        }
+      }
+      item1.data = data
+      this.dataList.push(item1)
+    },
+    formatDate(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      return `${year}-${this.pad(month)}-${this.pad(day)}`
+    },
+    formatTime(date) {
+      const hour = date.getHours()
+      const minute = date.getMinutes()
+      const second = date.getSeconds()
+      return `${this.pad(hour)}:${this.pad(minute)}:${this.pad(second)}`
+    },
+    formatDateTime(date) {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      const hour = date.getHours()
+      const minute = date.getMinutes()
+      const second = date.getSeconds()
+      return `${year}-${this.pad(month)}-${this.pad(day)} ${this.pad(hour)}:${this.pad(minute)}:${this.pad(second)}`
+    },
+    pad(num) {
+      return num.toString().padStart(2, '0')
+    },
+    incrByMonth(date) {
+      var year = date.getFullYear()
+      var month = date.getMonth()
+      var day = date.getDate()
+      if (month < 11) {
+        month += 1
+      } else {
+        month = 0
+        year += 1
+      }
+      return new Date(year, month, day)
+    },
+    incrByMonth1(date) {
+      var year = date.getFullYear()
+      var month = date.getMonth()
+      var day = date.getDate()
+      var hour = date.getHours()
+      var minute = date.getMinutes()
+      minute = 0
+      var second = date.getSeconds()
+      second = 0
+      if (hour < 24) {
+        hour += 1
+      } else {
+        hour = 0
+        day += 1
+      }
+      return new Date(year, month, day, hour, minute, second)
+    },
+    refresh() {
+      this.$message.info('refresh')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.card-style {
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 1px;
+  padding-right: 1px;
+}
+
+.movie-list {
+  padding-top: 3px;
+  padding-left: 3px;
+  padding-right: 3px;
+}
+</style>