feat: 新增轮播图表

2026-04-23 00:00:12 +08:00 · 2022-04-01 16:36:22 +08:00
parent 2b0f8a817c
commit 97df02c07e
23 changed files with 382 additions and 32 deletions
@@ -0,0 +1,14 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TableCategoryConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#3faacb', '#fff'],
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = TableCategoryConfig.key
+  public chartConfig = cloneDeep(TableCategoryConfig)
+  public option = option
+}
@@ -1,10 +1,10 @@
 <template>
  <div>
-    表格
+
  </div>
 </template>

-<script setup lang="ts">
+<script setup>

 </script>

@@ -0,0 +1,38 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TableCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const option = {
+  data: dataJson,
+  // 表行数
+  rowNum: 5,
+  // 轮播时间
+  waitTime: 2,
+  // 数值单位
+  unit: '',
+  // 自动排序
+  sort: true,
+  color: '#1370fb',
+  textColor: '#ffffff',
+  borderColor: '#1370fb80',
+  carousel: 'single',
+  // 格式化
+  valueFormatter({ value }) {
+    const reverseNumber = (value + '').split('').reverse()
+    let valueStr = ''
+    while (reverseNumber.length) {
+      const seg = reverseNumber.splice(0, 3).join('')
+      valueStr += seg
+      if (seg.length === 3) valueStr += ','
+    }
+    return valueStr.split('').reverse().join('')
+  }
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = TableCommonConfig.key
+  public chartConfig = cloneDeep(TableCommonConfig)
+  public option = option
+}
@@ -1,6 +1,76 @@
 <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>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.sort" size="small" />
+          <n-text>自动排序</n-text>
+        </n-space>
+      </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/ChartItemSetting/index'
+import { option } from './config'

+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
 </script>
@@ -0,0 +1,14 @@
+[
+  { "name": "荣成", "value": 26700 },
+  { "name": "河南", "value": 20700 },
+  { "name": "河北", "value": 18700 },
+  { "name": "徐州", "value": 17800 },
+  { "name": "漯河", "value": 16756 },
+  { "name": "三门峡", "value": 12343 },
+  { "name": "郑州", "value": 9822 },
+  { "name": "周口", "value": 8912 },
+  { "name": "濮阳", "value": 6834 },
+  { "name": "信阳", "value": 5875 },
+  { "name": "新乡", "value": 3832 },
+  { "name": "大同", "value": 1811 }
+]
@@ -1,13 +1,227 @@
 <template>
-  <div>
-    表格
+  <div class="go-tables-rank" :style="`color: ${textColor}`">
+    <div
+      class="row-item"
+      v-for="(item, i) in status.rows"
+      :key="item.toString() + item.scroll"
+      :style="`height: ${status.heights[i]}px;`"
+    >
+      <div class="ranking-info">
+        <div class="rank" :style="`color: ${color}`">No.{{ item.ranking }}</div>
+        <div class="info-name" v-html="item.name" />
+        <div class="ranking-value" :style="`color: ${textColor}`">
+          {{
+            status.mergedConfig.valueFormatter
+              ? status.mergedConfig.valueFormatter(item)
+              : item.value
+          }}
+          {{unit}}
+        </div>
+      </div>
+      <div class="ranking-column" :style="`border-color: ${borderColor}`">
+        <div class="inside-column" :style="`width: ${item.percent}%;background-color: ${color}`">
+          <div class="shine" />
+        </div>
+      </div>
+    </div>
  </div>
 </template>

 <script setup lang="ts">
+import { PropType, onUnmounted, reactive, ref, toRefs, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import merge from 'lodash/merge'

+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { rowNum, unit, color, textColor, borderColor } = toRefs(props.chartConfig.option)
+
+const status = reactive({
+  mergedConfig: props.chartConfig.option,
+  rowsData: [],
+  rows: [],
+  heights: [],
+  animationIndex: 0,
+  animationHandler: '',
+  updater: 0,
+})
+
+const onResize = () => {
+  if (!status.mergedConfig) return
+  stopAnimation()
+  calcHeights(true)
+  animation(true)
+}
+
+watch(
+  () => w.value,
+  () => {
+    onResize()
+  }
+)
+watch(
+  () => h.value,
+  () => {
+    onResize()
+  }
+)
+watch(
+  () => rowNum.value,
+  () => {
+    onResize()
+  }
+)
+
+const calcRowsData = () => {
+  let { data, rowNum, sort } = status.mergedConfig
+  sort &&
+    data.sort(({ value: a }, { value: b }) => {
+      if (a > b) return -1
+      if (a < b) return 1
+      if (a === b) return 0
+    })
+  const value = data.map(({ value }) => value)
+  const min = Math.min(...value) || 0
+  // abs of min
+  const minAbs = Math.abs(min)
+  const max = Math.max(...value) || 0
+  // abs of max
+  const maxAbs = Math.abs(max)
+  const total = max + minAbs
+  data = data.map((row, i) => ({
+    ...row,
+    ranking: i + 1,
+    percent: ((row.value + minAbs) / total) * 100,
+  }))
+  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 calcHeights = (onresize = false) => {
+  const { rowNum, data } = status.mergedConfig
+  const avgHeight = h.value / rowNum
+  status.avgHeight = avgHeight
+  if (!onresize) status.heights = new Array(data.length).fill(avgHeight)
+}
+
+const animation = async (start = 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, 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)
+}
+
+const stopAnimation = () => {
+  status.updater = (status.updater + 1) % 999999
+  if (!status.animationHandler) return
+  clearTimeout(status.animationHandler)
+}
+
+const init = () => {
+  calcRowsData()
+  calcHeights()
+  animation(true)
+}
+
+init()
+
+onUnmounted(() => {
+  stopAnimation()
+})
 </script>

 <style lang="scss" scoped>
+@include go('tables-rank') {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;

-</style>
+  .row-item {
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .ranking-info {
+    display: flex;
+    width: 100%;
+    font-size: 13px;
+
+    .rank {
+      width: 40px;
+    }
+
+    .info-name {
+      flex: 1;
+    }
+  }
+
+  .ranking-column {
+    border-bottom: 2px solid #1370fb80;
+    margin-top: 5px;
+
+    .inside-column {
+      position: relative;
+      height: 6px;
+      margin-bottom: 2px;
+      border-radius: 1px;
+      overflow: hidden;
+    }
+
+    .shine {
+      position: absolute;
+      left: 0%;
+      top: 2px;
+      height: 2px;
+      width: 50px;
+      transform: translateX(-100%);
+      background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
+      animation: shine 3s ease-in-out infinite alternate;
+    }
+  }
+}
+
+@keyframes shine {
+  80% {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
+}
+</style>
@@ -1,5 +1,5 @@
 export enum ChatCategoryEnum {
-  TABLE = 'TABLE',
+  TABLE = 'Tables',
 }

 export enum ChatCategoryEnumName {