From 1784e79c83f0018dc61486c5769658b9d4294c89 Mon Sep 17 00:00:00 2001
From: wangzhiqiang <wangzhiqiang@qq.com>
Date: Mon, 13 Jun 2022 17:21:34 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E8=A1=A8--=E6=9C=AA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tables/Tables/TableScrollBoard/config.ts  |  30 ++
 .../Tables/Tables/TableScrollBoard/config.vue |  70 ++++
 .../Tables/Tables/TableScrollBoard/data.json  |  12 +
 .../Tables/Tables/TableScrollBoard/index.ts   |  14 +
 .../Tables/Tables/TableScrollBoard/index.vue  | 376 ++++++++++++++++++
 .../components/Tables/Tables/index.ts         |   3 +-
 6 files changed, 504 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/components/Tables/Tables/TableScrollBoard/config.ts
 create mode 100644 src/packages/components/Tables/Tables/TableScrollBoard/config.vue
 create mode 100644 src/packages/components/Tables/Tables/TableScrollBoard/data.json
 create mode 100644 src/packages/components/Tables/Tables/TableScrollBoard/index.ts
 create mode 100644 src/packages/components/Tables/Tables/TableScrollBoard/index.vue

diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/config.ts b/src/packages/components/Tables/Tables/TableScrollBoard/config.ts
new file mode 100644
index 00000000..ab9f01b2
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.ts
@@ -0,0 +1,30 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TableScrollBoardConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const option = {
+  header: ['列1', '列2', '列3'],
+  data: [
+    ['行1列1', '行1列2', '行1列3'],
+    ['行2列1', '行2列2', '行2列3'],
+    ['行3列1', '行3列2', '行3列3'],
+    ['行4列1', '行4列2', '行4列3'],
+    ['行5列1', '行5列2', '行5列3'],
+    ['行6列1', '行6列2', '行6列3'],
+    ['行7列1', '行7列2', '行7列3'],
+    ['行8列1', '行8列2', '行8列3'],
+    ['行9列1', '行9列2', '行9列3'],
+    ['行10列1', '行10列2', '行10列3']
+  ],
+  index: true,
+  columnWidth: [30,100,100],
+  align: ['center']
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = TableScrollBoardConfig.key
+  public chartConfig = cloneDeep(TableScrollBoardConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
new file mode 100644
index 00000000..bd7c34c5
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
@@ -0,0 +1,70 @@
+<template>
+  <CollapseItem name="列表" :expanded="true">
+    <SettingItemBox name="基础">
+      <SettingItem name="表行数">
+        <n-input-number
+          v-model:value="optionData.rowNum"
+          :min="1"
+          size="small"
+          placeholder="请输入自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="轮播时间(s)">
+        <n-input-number
+          v-model:value="optionData.waitTime"
+          :min="1"
+          size="small"
+          placeholder="请输入轮播时间"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="数值单位">
+        <n-input
+          v-model:value="optionData.unit"
+          size="small"
+          placeholder="数值单位"
+        ></n-input>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="样式">
+      <SettingItem name="主体颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.color"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="数据颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="底部线条">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.borderColor"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
+</script>
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/data.json b/src/packages/components/Tables/Tables/TableScrollBoard/data.json
new file mode 100644
index 00000000..f9ffeab3
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/data.json
@@ -0,0 +1,12 @@
+[
+  ['行1列1', '行1列2', '行1列3'],
+  ['行2列1', '行2列2', '行2列3'],
+  ['行3列1', '行3列2', '行3列3'],
+  ['行4列1', '行4列2', '行4列3'],
+  ['行5列1', '行5列2', '行5列3'],
+  ['行6列1', '行6列2', '行6列3'],
+  ['行7列1', '行7列2', '行7列3'],
+  ['行8列1', '行8列2', '行8列3'],
+  ['行9列1', '行9列2', '行9列3'],
+  ['行10列1', '行10列2', '行10列3']
+]
\ No newline at end of file
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/index.ts b/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
new file mode 100644
index 00000000..e2070edf
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/tables/tables_list.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const TableScrollBoardConfig: ConfigType = {
+  key: 'TableScrollBoard',
+  chartKey: 'VTableScrollBoard',
+  conKey: 'VCTableScrollBoard',
+  title: '轮播列表',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  image
+}
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
new file mode 100644
index 00000000..93f5e1bb
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="dv-scroll-board">
+    <div class="header" v-if="status.header.length && status.mergedConfig"
+      :style="`background-color: ${status.mergedConfig.headerBGC};`">
+      <div class="header-item" v-for="(headerItem, i) in status.header" :key="`${headerItem}${i}`" :style="`
+        height: ${status.mergedConfig.headerHeight}px;
+        line-height: ${status.mergedConfig.headerHeight}px;
+        width: ${status.widths[i]}px;
+      `" :align="status.aligns[i]" v-html="headerItem" />
+    </div>
+
+    <div v-if="status.mergedConfig" class="rows"
+      :style="`height: ${height - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`">
+      <div class="row-item" v-for="(row, ri) in status.rows" :key="`${row.toString()}${row.scroll}`" :style="`
+        height: ${status.heights[ri]}px;
+        line-height: ${status.heights[ri]}px;
+        background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+      `">
+        <div class="ceil" v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`"
+          :style="`width: ${status.widths[ci]}px;`" :align="status.aligns[ci]" v-html="ceil" />
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, onUnmounted, reactive, toRefs, watch, onMounted, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import merge from 'lodash/merge'
+import cloneDeep from 'lodash/cloneDeep'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+// 这里能拿到图表宽高等
+const { w, h } = toRefs(props.chartConfig.attr)
+// 这里能拿到上面 config.ts 里的 option 数据
+const { colors, dur, backgroundColor } = toRefs(props.chartConfig.option)
+
+const height = ref(h)
+
+const status = reactive({
+  defaultConfig: {
+    /**
+     * @description Board header
+     * @type {Array<String>}
+     * @default header = []
+     * @example header = ['column1', 'column2', 'column3']
+     */
+    header: [],
+    /**
+     * @description Board data
+     * @type {Array<Array>}
+     * @default data = []
+     */
+    data: [],
+    /**
+     * @description Row num
+     * @type {Number}
+     * @default rowNum = 5
+     */
+    rowNum: 5,
+    /**
+     * @description Header background color
+     * @type {String}
+     * @default headerBGC = '#00BAFF'
+     */
+    headerBGC: '#00BAFF',
+    /**
+     * @description Odd row background color
+     * @type {String}
+     * @default oddRowBGC = '#003B51'
+     */
+    oddRowBGC: '#003B51',
+    /**
+     * @description Even row background color
+     * @type {String}
+     * @default evenRowBGC = '#003B51'
+     */
+    evenRowBGC: '#0A2732',
+    /**
+     * @description Scroll wait time
+     * @type {Number}
+     * @default waitTime = 2000
+     */
+    waitTime: 2000,
+    /**
+     * @description Header height
+     * @type {Number}
+     * @default headerHeight = 35
+     */
+    headerHeight: 35,
+    /**
+     * @description Column width
+     * @type {Array<Number>}
+     * @default columnWidth = []
+     */
+    columnWidth: [],
+    /**
+     * @description Column align
+     * @type {Array<String>}
+     * @default align = []
+     * @example align = ['left', 'center', 'right']
+     */
+    align: [],
+    /**
+     * @description Show index
+     * @type {Boolean}
+     * @default index = false
+     */
+    index: false,
+    /**
+     * @description index Header
+     * @type {String}
+     * @default indexHeader = '#'
+     */
+    indexHeader: '#',
+    /**
+     * @description Carousel type
+     * @type {String}
+     * @default carousel = 'single'
+     * @example carousel = 'single' | 'page'
+     */
+    carousel: 'single',
+    /**
+     * @description Pause scroll when mouse hovered
+     * @type {Boolean}
+     * @default hoverPause = true
+     * @example hoverPause = true | false
+     */
+    hoverPause: true
+  },
+  mergedConfig: props.chartConfig.option,
+  header: [],
+  rowsData: [],
+  rows: [],
+  widths: [],
+  heights: [0],
+  avgHeight: 0,
+  aligns: [],
+  animationIndex: 0,
+  animationHandler: 0,
+  updater: 0,
+  needCalc: false
+})
+
+watch(() => props.chartConfig.option, (newVal) => {
+  status.mergedConfig = newVal
+  stopAnimation()
+  status.animationIndex = 0
+  calcData()
+})
+
+const calcData = () => {
+  mergeConfig()
+  calcHeaderData()
+  calcRowsData()
+  calcWidths()
+  calcHeights()
+  calcAligns()
+  animation(true)
+}
+
+onMounted(()=> {
+  calcData()
+})
+
+const mergeConfig = () => {
+  status.mergedConfig = merge(cloneDeep(status.defaultConfig), props.chartConfig.option)
+}
+
+const calcHeaderData = () => {
+  let { header, index, indexHeader } = status.mergedConfig
+  if (!header.length) {
+    status.header = []
+    return
+  }
+  header = [...header]
+  if (index) header.unshift(indexHeader)
+  status.header = header
+}
+
+const calcRowsData = () => {
+  let { data, index, headerBGC, rowNum } = status.mergedConfig
+  if (index) {
+    data = data.map((row, i) => {
+      row = [...row]
+      const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${i + 1}</span>`
+      row.unshift(indexTag)
+      return row
+    })
+  }
+  data = data.map((ceils, i) => ({ ceils, rowIndex: i }))
+  const rowLength = data.length
+  if (rowLength > rowNum && rowLength < 2 * rowNum) {
+    data = [...data, ...data]
+  }
+  data = data.map((d, i) => ({ ...d, scroll: i }))
+
+  status.rowsData = data
+  status.rows = data
+}
+
+const calcWidths = () => {
+  const { mergedConfig, rowsData } = status
+  const { columnWidth, header } = mergedConfig
+  const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
+  let columnNum = 0
+  if (rowsData[0]) {
+    columnNum = rowsData[0].ceils.length
+  } else if (header.length) {
+    columnNum = header.length
+  }
+  const avgWidth = (w - usedWidth) / (columnNum - columnWidth.length)
+  const widths = new Array(columnNum).fill(avgWidth)
+  status.widths = merge(widths, columnWidth)
+}
+
+const calcHeights = (onresize = false) => {
+  const { mergedConfig, header } = status
+  const { headerHeight, rowNum, data } = mergedConfig
+  let allHeight = h
+  if (header.length) allHeight -= headerHeight
+  const avgHeight = allHeight / rowNum
+  status.avgHeight = avgHeight
+  if (!onresize) status.heights = new Array(data.length).fill(avgHeight)
+}
+
+const calcAligns = () => {
+  const { header, mergedConfig } = status
+
+  const columnNum = header.length
+
+  let aligns = new Array(columnNum).fill('left')
+
+  const { align } = mergedConfig
+
+  status.aligns = merge(aligns, align)
+}
+
+const animation = async (start = false) => {
+  const { needCalc } = status
+
+  if (needCalc) {
+    calcRowsData()
+    calcHeights()
+    status.needCalc = false
+  }
+
+  let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status
+  const { waitTime, carousel, rowNum } = mergedConfig
+  const rowLength = rowsData.length
+  if (rowNum >= rowLength) return
+  if (start) {
+    await new Promise(resolve => setTimeout(resolve, waitTime))
+    if (updater !== status.updater) return
+  }
+  const animationNum = carousel === 'single' ? 1 : rowNum
+  let rows = rowsData.slice(animationIndex)
+  rows.push(...rowsData.slice(0, animationIndex))
+  status.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+  status.heights = new Array(rowLength).fill(avgHeight)
+  await new Promise(resolve => setTimeout(resolve, 300))
+  if (updater !== status.updater) return
+  status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
+  animationIndex += animationNum
+  const back = animationIndex - rowLength
+  if (back >= 0) animationIndex = back
+  status.animationIndex = animationIndex
+  status.animationHandler = setTimeout(animation, waitTime - 300) as any
+}
+
+const stopAnimation = () => {
+  status.updater = (status.updater + 1) % 999999
+  if (!status.animationHandler) return
+  clearTimeout(status.animationHandler)
+}
+
+const onRestart = async () => {
+  if (!status.mergedConfig) return
+  stopAnimation()
+  calcData()
+}
+
+watch(
+  () => w.value,
+  () => {
+    onRestart()
+  }
+)
+
+watch(
+  () => h.value,
+  () => {
+    onRestart()
+  }
+)
+
+// watch(
+//   () => rowNum.value,
+//   () => {
+//     onRestart()
+//   }
+// )
+
+// 数据更新
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    onRestart()
+  }
+)
+
+// 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
+useChartDataFetch(props.chartConfig, useChartEditStore)
+
+onUnmounted(() => {
+  stopAnimation()
+})
+
+</script>
+
+<style lang="scss" scoped>
+.dv-scroll-board {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+
+  .text {
+    padding: 0 10px;
+    box-sizing: border-box;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    font-size: 15px;
+
+    .header-item {
+      .text {
+      }
+      transition: all 0.3s;
+    }
+  }
+
+  .rows {
+    overflow: hidden;
+
+    .row-item {
+      display: flex;
+      font-size: 14px;
+      transition: all 0.3s;
+    }
+
+    .ceil {
+      // .text;
+    }
+
+    .index {
+      border-radius: 3px;
+      padding: 0px 10px;
+    }
+  }
+}
+</style>
diff --git a/src/packages/components/Tables/Tables/index.ts b/src/packages/components/Tables/Tables/index.ts
index a2443e35..388951a9 100644
--- a/src/packages/components/Tables/Tables/index.ts
+++ b/src/packages/components/Tables/Tables/index.ts
@@ -1,5 +1,6 @@
 import { TableListConfig } from './TableList'
 import { TableCommonConfig } from './TableCommon'
 import { TableCategoryConfig } from './TableCategory'
+import { TableScrollBoardConfig } from './TableScrollBoard'
 
-export default [TableListConfig, TableCommonConfig, TableCategoryConfig]
+export default [TableListConfig, TableScrollBoardConfig, TableCommonConfig, TableCategoryConfig]

From 62dc625363243ffde2c247528804609660905469 Mon Sep 17 00:00:00 2001
From: 13050022537 <184177677@qq.com>
Date: Mon, 13 Jun 2022 20:49:19 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/tables/table_scrollboard.png | Bin 0 -> 6960 bytes
 .../Tables/Tables/TableScrollBoard/config.ts  |  31 ++++---
 .../Tables/Tables/TableScrollBoard/config.vue |  72 +++++++++++++---
 .../TableScrollBoard/{data.json => data.js}   |   2 +-
 .../Tables/Tables/TableScrollBoard/index.ts   |   2 +-
 .../Tables/Tables/TableScrollBoard/index.vue  |  79 ++++++------------
 6 files changed, 105 insertions(+), 81 deletions(-)
 create mode 100644 src/assets/images/chart/tables/table_scrollboard.png
 rename src/packages/components/Tables/Tables/TableScrollBoard/{data.json => data.js} (95%)

diff --git a/src/assets/images/chart/tables/table_scrollboard.png b/src/assets/images/chart/tables/table_scrollboard.png
new file mode 100644
index 0000000000000000000000000000000000000000..355ca73a510f9e57c5d4d80183c26a46eed9fb2b
GIT binary patch
literal 6960
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
CW~hh&

literal 0
HcmV?d00001

diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/config.ts b/src/packages/components/Tables/Tables/TableScrollBoard/config.ts
index ab9f01b2..b93dfc24 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/config.ts
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.ts
@@ -2,28 +2,27 @@ import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { TableScrollBoardConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
-import dataJson from './data.json'
+import dataJson from './data'
 
 export const option = {
   header: ['列1', '列2', '列3'],
-  data: [
-    ['行1列1', '行1列2', '行1列3'],
-    ['行2列1', '行2列2', '行2列3'],
-    ['行3列1', '行3列2', '行3列3'],
-    ['行4列1', '行4列2', '行4列3'],
-    ['行5列1', '行5列2', '行5列3'],
-    ['行6列1', '行6列2', '行6列3'],
-    ['行7列1', '行7列2', '行7列3'],
-    ['行8列1', '行8列2', '行8列3'],
-    ['行9列1', '行9列2', '行9列3'],
-    ['行10列1', '行10列2', '行10列3']
-  ],
+  dataset: dataJson,
   index: true,
-  columnWidth: [30,100,100],
-  align: ['center']
+  columnWidth: [30, 100, 100],
+  align: ['center','right','right','right'],
+  rowNum: 5,
+  waitTime: 2,
+  headerHeight: 35,
+  carousel: 'single',
+  headerBGC: '#00BAFF',
+  oddRowBGC: '#003B51',
+  evenRowBGC: '#0A2732',
 }
 
-export default class Config extends publicConfig implements CreateComponentType {
+export default class Config
+  extends publicConfig
+  implements CreateComponentType
+{
   public key = TableScrollBoardConfig.key
   public chartConfig = cloneDeep(TableScrollBoardConfig)
   public option = cloneDeep(option)
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
index bd7c34c5..85a56595 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
@@ -17,35 +17,67 @@
           placeholder="请输入轮播时间"
         ></n-input-number>
       </SettingItem>
-      <SettingItem name="数值单位">
-        <n-input
-          v-model:value="optionData.unit"
+      <SettingItem name="表头高度">
+        <n-input-number
+          v-model:value="optionData.headerHeight"
+          :min="1"
           size="small"
-          placeholder="数值单位"
+          placeholder="请输入表头高度"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="显示行号">
+        <n-switch size="small" v-model:value="optionData.index" />
+      </SettingItem>
+      
+    </SettingItemBox>
+
+    <SettingItemBox name="配置" :alone="true">
+      <SettingItem name="表头数据">
+        <n-input
+          v-model:value="header"
+          :min="1"
+          size="small"
+          placeholder="表头数据(英文','分割)"
+        ></n-input>
+      </SettingItem>
+      <SettingItem name="列对齐方式">
+        <n-input
+          v-model:value="align"
+          :min="1"
+          size="small"
+          placeholder="对齐方式(英文','分割)"
+        ></n-input>
+      </SettingItem>
+      <SettingItem name="列宽度">
+        <n-input
+          v-model:value="columnWidth"
+          :min="1"
+          size="small"
+          placeholder="列宽度(英文','分割)"
         ></n-input>
       </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="样式">
-      <SettingItem name="主体颜色">
+      <SettingItem name="表头背景色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.color"
+          v-model:value="optionData.headerBGC"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="数据颜色">
+      <SettingItem name="奇数行背景色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.textColor"
+          v-model:value="optionData.oddRowBGC"
         ></n-color-picker>
       </SettingItem>
-      <SettingItem name="底部线条">
+      <SettingItem name="偶数行背景色">
         <n-color-picker
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.borderColor"
+          v-model:value="optionData.evenRowBGC"
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
@@ -53,7 +85,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from 'vue'
+import { PropType, ref, watch } from 'vue'
 import {
   CollapseItem,
   SettingItemBox,
@@ -67,4 +99,22 @@ const props = defineProps({
     required: true,
   },
 })
+
+const header = ref(props.optionData.header.toString())
+const align = ref(props.optionData.align.toString())
+const columnWidth = ref(props.optionData.columnWidth.toString())
+
+watch([header, align, columnWidth],([headerNew,alignNew,columnWidthNew],[headerOld,alignOld,columnWidthOld])=>{
+  if(headerNew !== headerOld){
+    props.optionData.header = headerNew.split(',')
+  }
+  if(alignNew !== alignOld){
+    props.optionData.align = alignNew.split(',')
+  }
+  if(columnWidthNew !== columnWidthOld){
+    props.optionData.columnWidth = columnWidthNew.split(',')
+  }
+})
+
+
 </script>
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/data.json b/src/packages/components/Tables/Tables/TableScrollBoard/data.js
similarity index 95%
rename from src/packages/components/Tables/Tables/TableScrollBoard/data.json
rename to src/packages/components/Tables/Tables/TableScrollBoard/data.js
index f9ffeab3..267c2ffc 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/data.json
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/data.js
@@ -1,4 +1,4 @@
-[
+export default [
   ['行1列1', '行1列2', '行1列3'],
   ['行2列1', '行2列2', '行2列3'],
   ['行3列1', '行3列2', '行3列3'],
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/index.ts b/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
index e2070edf..0ceb94bb 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
@@ -1,4 +1,4 @@
-import image from '@/assets/images/chart/tables/tables_list.png'
+import image from '@/assets/images/chart/tables/table_scrollboard.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
diff --git a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
index 93f5e1bb..f029412e 100644
--- a/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
@@ -10,7 +10,7 @@
     </div>
 
     <div v-if="status.mergedConfig" class="rows"
-      :style="`height: ${height - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`">
+      :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`">
       <div class="row-item" v-for="(row, ri) in status.rows" :key="`${row.toString()}${row.scroll}`" :style="`
         height: ${status.heights[ri]}px;
         line-height: ${status.heights[ri]}px;
@@ -42,9 +42,7 @@ const props = defineProps({
 // 这里能拿到图表宽高等
 const { w, h } = toRefs(props.chartConfig.attr)
 // 这里能拿到上面 config.ts 里的 option 数据
-const { colors, dur, backgroundColor } = toRefs(props.chartConfig.option)
-
-const height = ref(h)
+// const { rowNum, headerHeight, index, backgroundColor } = toRefs(props.chartConfig.option)
 
 const status = reactive({
   defaultConfig: {
@@ -56,11 +54,11 @@ const status = reactive({
      */
     header: [],
     /**
-     * @description Board data
+     * @description Board dataset
      * @type {Array<Array>}
-     * @default data = []
+     * @default dataset = []
      */
-    data: [],
+    dataset: [],
     /**
      * @description Row num
      * @type {Number}
@@ -88,9 +86,9 @@ const status = reactive({
     /**
      * @description Scroll wait time
      * @type {Number}
-     * @default waitTime = 2000
+     * @default waitTime = 2
      */
-    waitTime: 2000,
+    waitTime: 2,
     /**
      * @description Header height
      * @type {Number}
@@ -151,13 +149,6 @@ const status = reactive({
   needCalc: false
 })
 
-watch(() => props.chartConfig.option, (newVal) => {
-  status.mergedConfig = newVal
-  stopAnimation()
-  status.animationIndex = 0
-  calcData()
-})
-
 const calcData = () => {
   mergeConfig()
   calcHeaderData()
@@ -188,49 +179,49 @@ const calcHeaderData = () => {
 }
 
 const calcRowsData = () => {
-  let { data, index, headerBGC, rowNum } = status.mergedConfig
+  let { dataset, index, headerBGC, rowNum } = status.mergedConfig
   if (index) {
-    data = data.map((row, i) => {
+    dataset = dataset.map((row, i) => {
       row = [...row]
       const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${i + 1}</span>`
       row.unshift(indexTag)
       return row
     })
   }
-  data = data.map((ceils, i) => ({ ceils, rowIndex: i }))
-  const rowLength = data.length
+  dataset = dataset.map((ceils, i) => ({ ceils, rowIndex: i }))
+  const rowLength = dataset.length
   if (rowLength > rowNum && rowLength < 2 * rowNum) {
-    data = [...data, ...data]
+    dataset = [...dataset, ...dataset]
   }
-  data = data.map((d, i) => ({ ...d, scroll: i }))
+  dataset = dataset.map((d, i) => ({ ...d, scroll: i }))
 
-  status.rowsData = data
-  status.rows = data
+  status.rowsData = dataset
+  status.rows = dataset
 }
 
 const calcWidths = () => {
   const { mergedConfig, rowsData } = status
   const { columnWidth, header } = mergedConfig
-  const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
+  const usedWidth = columnWidth.reduce((all, ws) => all + ws, 0)
   let columnNum = 0
   if (rowsData[0]) {
     columnNum = rowsData[0].ceils.length
   } else if (header.length) {
     columnNum = header.length
   }
-  const avgWidth = (w - usedWidth) / (columnNum - columnWidth.length)
+  const avgWidth = (w.value - usedWidth) / (columnNum - columnWidth.length)
   const widths = new Array(columnNum).fill(avgWidth)
   status.widths = merge(widths, columnWidth)
 }
 
 const calcHeights = (onresize = false) => {
   const { mergedConfig, header } = status
-  const { headerHeight, rowNum, data } = mergedConfig
-  let allHeight = h
+  const { headerHeight, rowNum, dataset } = mergedConfig
+  let allHeight = h.value
   if (header.length) allHeight -= headerHeight
   const avgHeight = allHeight / rowNum
   status.avgHeight = avgHeight
-  if (!onresize) status.heights = new Array(data.length).fill(avgHeight)
+  if (!onresize) status.heights = new Array(dataset.length).fill(avgHeight)
 }
 
 const calcAligns = () => {
@@ -253,13 +244,13 @@ const animation = async (start = false) => {
     calcHeights()
     status.needCalc = false
   }
-
   let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status
   const { waitTime, carousel, rowNum } = mergedConfig
+
   const rowLength = rowsData.length
   if (rowNum >= rowLength) return
   if (start) {
-    await new Promise(resolve => setTimeout(resolve, waitTime))
+    await new Promise(resolve => setTimeout(resolve, waitTime*1000))
     if (updater !== status.updater) return
   }
   const animationNum = carousel === 'single' ? 1 : rowNum
@@ -274,7 +265,7 @@ const animation = async (start = false) => {
   const back = animationIndex - rowLength
   if (back >= 0) animationIndex = back
   status.animationIndex = animationIndex
-  status.animationHandler = setTimeout(animation, waitTime - 300) as any
+  status.animationHandler = setTimeout(animation, waitTime*1000 - 300) as any
 }
 
 const stopAnimation = () => {
@@ -303,19 +294,13 @@ watch(
   }
 )
 
-// watch(
-//   () => rowNum.value,
-//   () => {
-//     onRestart()
-//   }
-// )
-
 // 数据更新
 watch(
-  () => props.chartConfig.option.dataset,
+  () => props.chartConfig.option,
   () => {
     onRestart()
-  }
+  },
+  {deep:true}
 )
 
 // 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
@@ -348,8 +333,6 @@ onUnmounted(() => {
     font-size: 15px;
 
     .header-item {
-      .text {
-      }
       transition: all 0.3s;
     }
   }
@@ -361,15 +344,7 @@ onUnmounted(() => {
       display: flex;
       font-size: 14px;
       transition: all 0.3s;
-    }
-
-    .ceil {
-      // .text;
-    }
-
-    .index {
-      border-radius: 3px;
-      padding: 0px 10px;
+      overflow: hidden;
     }
   }
 }