From c1dfd78d180a76141d5359638a7b05d1e3a7c22c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 14 Jun 2022 12:31:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Tables/Tables/TableScrollBoard/config.ts  |  29 ++
 .../Tables/Tables/TableScrollBoard/config.vue | 121 ++++++
 .../Tables/Tables/TableScrollBoard/data.json  |  12 +
 .../Tables/Tables/TableScrollBoard/index.ts   |  14 +
 .../Tables/Tables/TableScrollBoard/index.vue  | 355 ++++++++++++++++++
 .../components/Tables/Tables/index.ts         |   3 +-
 6 files changed, 533 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..e39ddded
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.ts
@@ -0,0 +1,29 @@
+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'],
+  dataset: dataJson,
+  index: true,
+  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
+{
+  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..9dd1e12d
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/config.vue
@@ -0,0 +1,121 @@
+<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-number
+          v-model:value="optionData.headerHeight"
+          :min="1"
+          size="small"
+          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="表头背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.headerBGC"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="奇数行背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.oddRowBGC"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="偶数行背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.evenRowBGC"
+        ></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, watch } 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,
+  },
+})
+
+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){
+    // @ts-ignore
+    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.json
new file mode 100644
index 00000000..2508e6ff
--- /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"]
+]
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..0ceb94bb
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/tables/table_scrollboard.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..9792e796
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableScrollBoard/index.vue
@@ -0,0 +1,355 @@
+<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: ${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;
+        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 } 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 { rowNum, headerHeight, index, backgroundColor } = toRefs(props.chartConfig.option)
+
+const status = reactive({
+  defaultConfig: {
+    /**
+     * @description Board header
+     * @type {Array<String>}
+     * @default header = []
+     * @example header = ['column1', 'column2', 'column3']
+     */
+    header: [],
+    /**
+     * @description Board dataset
+     * @type {Array<Array>}
+     * @default dataset = []
+     */
+    dataset: [],
+    /**
+     * @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 = 2
+     */
+    waitTime: 2,
+    /**
+     * @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: [{
+    ceils: [],
+    rowIndex: 0,
+    scroll: 0
+  }],
+  widths: [],
+  heights: [0],
+  avgHeight: 0,
+  aligns: [],
+  animationIndex: 0,
+  animationHandler: 0,
+  updater: 0,
+  needCalc: false
+})
+
+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 { dataset, index, headerBGC, rowNum } = status.mergedConfig
+  if (index) {
+    dataset = dataset.map((row:any, i:number) => {
+      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
+    })
+  }
+  dataset = dataset.map((ceils:any, i:number) => ({ ceils, rowIndex: i }))
+  const rowLength = dataset.length
+  if (rowLength > rowNum && rowLength < 2 * rowNum) {
+    dataset = [...dataset, ...dataset]
+  }
+  dataset = dataset.map((d:any, i:number) => ({ ...d, scroll: i }))
+
+  status.rowsData = dataset
+  status.rows = dataset
+}
+
+const calcWidths = () => {
+  const { mergedConfig, rowsData } = status
+  const { columnWidth, header } = mergedConfig
+  const usedWidth = columnWidth.reduce((all:any, ws:number) => all + ws, 0)
+  let columnNum = 0
+  if (rowsData[0]) {
+    columnNum = (rowsData[0] as any).ceils.length
+  } else if (header.length) {
+    columnNum = header.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, dataset } = mergedConfig
+  let allHeight = h.value
+  if (header.length) allHeight -= headerHeight
+  const avgHeight = allHeight / rowNum
+  status.avgHeight = avgHeight
+  if (!onresize) status.heights = new Array(dataset.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*1000))
+    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*1000 - 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(
+  () => props.chartConfig.option,
+  () => {
+    onRestart()
+  },
+  {deep:true}
+)
+
+// 数据更新 (默认更新 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 {
+      transition: all 0.3s;
+    }
+  }
+
+  .rows {
+    overflow: hidden;
+
+    .row-item {
+      display: flex;
+      font-size: 14px;
+      transition: all 0.3s;
+      overflow: hidden;
+    }
+  }
+}
+</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]