TimeAxis 时间轴

时间轴。

代码演示

基本用法

基本用法。

<template>
  <div class="box">
    <div class="timeline-box">
      <f-radio-group v-model:value="layout">
        <f-radio v-for="item in layouts" :key="item" :value="item">{{ item }}</f-radio>
      </f-radio-group>
      <br />
      <f-radio-group v-model:value="mode">
        <f-radio v-for="item in modes" :key="item" :value="item">{{ item }}</f-radio>
      </f-radio-group>

      <f-time-axis :layout="layout" :mode="mode">
        <f-time-axis-item>
          <template #dot>
            <smile-outlined />
          </template>
          <div>进程1</div>
          <div style="color: #999">2020-04-09</div>
        </f-time-axis-item>

        <f-time-axis-item>
          <template #dot>
            <robot-outlined />
          </template>
          <template #label>
            <div style="color: #999">2020-04-09</div>
          </template>
          <div>进程2进程2进程2进程2进程2进程2进程2进程2进程2进程2</div>
          <div>进程2进程2进程2进程2进程2进程2进程2进程2进程2进程2</div>
          <div style="color: #999">2020-04-09</div>
        </f-time-axis-item>

        <f-time-axis-item label="2020-04-09">
          <div>进程3</div>
          <div style="color: #999">2020-04-09</div>
        </f-time-axis-item>
        
        <f-time-axis-item>
          <template #dot>
            <star-outlined />
          </template>
          <div>进程4</div>
          <div style="color: #999">2020-04-09</div>
        </f-time-axis-item>

        <f-time-axis-item>
          <div>进程5</div>
          <div style="color: #999">2020-04-09</div>
        </f-time-axis-item>
      </f-time-axis>
    </div>
  </div>
</template>
<script lang="ts">
import { ref } from 'vue'
import { defineComponent } from 'vue'
import { SmileOutlined, RobotOutlined, StarOutlined, ThunderboltOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  components: {
    SmileOutlined,
    RobotOutlined,
    StarOutlined,
    ThunderboltOutlined,
  },
  setup() {
    const layouts = ['horizontal', 'vertical'] as const
    const modes = ['left', 'right', 'bottom', 'top', 'alternate'] as const

    const layout = ref<typeof layouts[number]>('vertical')
    const mode = ref<typeof modes[number]>('right')

    return {
      layouts,
      modes,
      layout,
      mode,
    }
  },
})
</script>

日志时间轴

日志时间轴。

<template>
  <div class="box">
    <FTimeAxisLogs :timeList="timeList" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const timeList = [
      {
        comment: '由fs_product_test修改',
        createdAt: '2023-11-30 12:10:45',
        children: [
          { comment: '由fs_product_test新增' },
          {
            comment:
              '由fs_product_test修改\n1、:修改了bom类型,旧值为：产品bom,新值为：采购bom\n2、:修改了是否标准品,旧值为：true,新值为：false\n',
          },
        ],
      },
      {
        comment: '由fs_product_test修改',
        createdAt: '2023-11-29 18:23:36',
        children: [
          {
            comment: '由fs_product_test修改',
          },
        ],
      },
      {
        comment: '由Medy.Zhang新增',
        createdAt: '2023-11-29 17:47:58',
        children: [
          {
            comment:
              "由Medy.Zhang新增 新增了bom编码,值为：150005 新增了bom名称,值为：RS8260, 2U Rack Server, 4 x Intel® Xeon® Scalable Processors, Up to 6TB of Memory, 24 x 2.5'' Hot-swap SAS/SATA/SSD Drive Bays, 4 x RJ45 1GbE Ports, 1600W Redundant 新增了主单位,值为：台 新增了基本数量,值为：1 新增了版本号,值为：v1.0 新增了版本说明,值为： 新增了bom类型,值为：产品bom 新增了是否标准品,值为：true",
          },
        ],
      },
    ]

    return {
      timeList,
    }
  },
})
</script>

API

TimeAxis props

参数	说明	类型	默认值
layout	通过设置 layout 可以改变时间轴和内容的布局方式	horizontal | vertical	vertical
mode	通过设置 mode 可以改变时间轴和内容的相对位置	left | right | bottom | top | alternate	horizontal布局默认right, vertical布局默认bottom
lineOffset	时间轴线的偏移量	number	horizontal布局默认left2px, vertical布局默认top-2px
labelSize	label尺寸大小，设置为null时为100%	number | null	horizontal布局默认height18px, vertical布局默认width80px

TimeAxisItem props

时间轴的每一个节点。

参数	说明	类型	默认值	版本
color	指定圆圈颜色 blue, red, green，或自定义的色值	string	#378EEF
dot	自定义时间轴点	string|slot	-
label	设置标签	slot	-

TimeAxisLogs props

时间轴日志组件。

参数	说明	类型	默认值	版本
timeList	时间轴日志数据	{createdAt: string, comment: string, children: [{ comment: string }]}[]	[]
defaultShow	默认是否显示折叠内容	boolean	true
labelSize	label默认长度	number	132

更多配置可参照TimeAxisItem