feat: 列表下的表格 重写轮播列表

@@ -14,7 +14,9 @@ enum Api {
   DEVICE_PROFILE = '/device_profile/me/list',
   DEVICE = '/device',
   VIDEOURL = '/video/url/',
-  GEOJSONURL = '/map/geo_json/'
+  GEOJSONURL = '/map/geo_json/',
+  DEVICE_URL = '/device',
+  GET_ATTRBUTELIST = '/device/attributes/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -113,3 +115,15 @@ export const getGeoJsonMap = (code: number, level: string) =>
   defHttp.get({
     url: `${Api.GEOJSONURL}${code}/${level}`
   })
+
+// 获取设备详情
+export const getDeviceDetail = (id: string) =>
+  defHttp.get({
+    url: Api.DEVICE_URL + `/${id}`
+  })
+
+// 获取产品属性
+export const getAttribute = (deviceProfileId: string) =>
+  defHttp.get({
+    url: `${Api.GET_ATTRBUTELIST}${deviceProfileId}`
+  })

@@ -75,7 +75,7 @@ export const useChartDataFetch = (
               echartsUpdateHandle(value)
               // 更新回调函数
               if (updateCallback) {
-                updateCallback(value)
+                updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表，这里传过去当前组件的信息
               }
             } catch (error) {
               console.error(error)

@@ -49,6 +49,7 @@ export const useChartInteract = (
             Object.keys(item.interactFn).forEach(key => {
               if (Params.value[key]) {
                 Params.value[key] = param[item.interactFn[key]]
+                console.log(Params.value[key])
               }
               if (Header.value[key]) {
                 Header.value[key] = param[item.interactFn[key]]

@@ -16,6 +16,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   chartConfig: {
@@ -58,6 +59,11 @@ watch(
     deep: true
   }
 )
+
+// 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数) 解决给另一个下拉框赋值
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
+  option.value.dataset = resData
+})
 </script>
 
 <style lang="scss" scoped>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideTableScrollBoardConfig } 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 PublicConfigClass implements CreateComponentType {
+  public key = OverrideTableScrollBoardConfig.key
+  public chartConfig = cloneDeep(OverrideTableScrollBoardConfig)
+  public option = cloneDeep(option)
+}

+<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>
+      <SettingItem name="轮播方式">
+        <n-select
+          v-model:value="optionData.carousel"
+          :options="[
+            { label: '单条轮播', value: 'single' },
+            { label: '整页轮播', value: 'page' },
+          ]"
+        />
+      </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()
+const align = ref()
+const columnWidth = ref()
+
+watch(
+  () => props.optionData,
+  newData => {
+    header.value = props.optionData.header.toString()
+    align.value = props.optionData.align.toString()
+    columnWidth.value = props.optionData.columnWidth.toString()
+  },
+  {
+    deep: false,
+    immediate: true
+  }
+)
+
+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>

+[
+  ["行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"]
+]

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Tables/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideTableScrollBoard', true)
+
+export const OverrideTableScrollBoardConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '设备最新数据轮播列表',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'table_scrollboard.png'
+}

+<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'
+import { getDeviceDetail, getAttribute } from '@/api/external/common/index'
+
+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 () => {
+  try {
+    if (!status.mergedConfig) return
+    stopAnimation()
+    calcData()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+watch(
+  () => w.value,
+  () => {
+    onRestart()
+  }
+)
+
+watch(
+  () => h.value,
+  () => {
+    onRestart()
+  }
+)
+
+// 数据更新
+watch(
+  () => props.chartConfig.option,
+  () => {
+    onRestart()
+  },
+  { deep: true }
+)
+
+// 数据更新 (默认更新 dataset，若更新之后有其它操作，可添加回调函数)
+//特殊处理 获取属性，把标识符转为物模型的属性名称
+useChartDataFetch(props.chartConfig, useChartEditStore, async (resData: any[], res: any) => {
+  const { requestParams } = res
+  if (!requestParams) return
+  const { Params } = requestParams
+  if (!Params) return
+  const { entityId } = Params
+  const thingsModel = await handleDeviceProfileAttributes(entityId)
+  const { attribute } = thingsModel as any
+  const resDataFormat = resData.reduce((acc, curr) => {
+    attribute.forEach((item: any) => {
+      if (item.identifier === curr[0]) {
+        curr[0] = item.name
+      }
+    })
+    acc.push(curr)
+    return [...acc]
+  }, [])
+  props.chartConfig.option.dataset = resDataFormat
+  onRestart()
+})
+
+onUnmounted(() => {
+  stopAnimation()
+})
+
+const handleDeviceProfileAttributes = async (entityId: string) => {
+  const deviceDetailRes = await getDeviceDetail(entityId)
+  const { deviceProfileId } = deviceDetailRes
+  if (!deviceProfileId) return
+  const attributeRes = await getAttribute(deviceProfileId)
+  const dataFormat = handleDataFormat(deviceDetailRes, attributeRes)
+  return dataFormat
+}
+
+const handleDataFormat = (deviceDetail: any, attributes: any) => {
+  const { name, tbDeviceId } = deviceDetail
+  const attribute = attributes.map((item: any) => ({
+    identifier: item.identifier,
+    name: item.name,
+    detail: item.detail
+  }))
+  return {
+    name,
+    tbDeviceId,
+    attribute
+  }
+}
+</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>

@@ -49,6 +49,7 @@ import { Decorates09Config } from '@/packages/components/external/Decorates/Deco
 import { Decorates10Config } from '@/packages/components/external/Decorates/Decorates/Decorates10'
 import { Decorates11Config } from '@/packages/components/external/Decorates/Decorates/Decorates11'
 import { Decorates12Config } from '@/packages/components/external/Decorates/Decorates/Decorates12'
+import { OverrideTableScrollBoardConfig } from '@/packages/components/external/Tables/Tables/OverrideTableScrollBoard'
 
 
 /**
@@ -112,6 +113,10 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideWaterPoloConfig)//重写图表下的水球图
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideDialConfig)//重写图表下的表盘
   //
+
+  //列表
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.TABLES, OverrideTableScrollBoardConfig)//重写列表下的轮播列表
+  //
 }
 
 /**