添加滚动列表

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)

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>

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'],

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'
 

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;
     }
   }
 }