From f0b21b3bf95cbaa8b709b50332e638eeeffac82e 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: Fri, 1 Apr 2022 16:49:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/tables/tables_list.png       | Bin 0 -> 3816 bytes
 .../Tables/Tables/TableCategory/config.ts     |  14 --
 .../{tableCommon => TableList}/config.ts      |   6 +-
 .../Tables/Tables/TableList/config.vue        |  76 ++++++
 .../{tableCommon => TableList}/data.json      |   0
 .../Tables/Tables/TableList/index.ts          |  14 ++
 .../Tables/Tables/TableList/index.vue         | 227 ++++++++++++++++++
 .../components/Tables/Tables/index.ts         |   3 +-
 .../Tables/Tables/tableCommon/config.vue      |  75 +-----
 .../Tables/Tables/tableCommon/index.vue       | 222 +----------------
 10 files changed, 332 insertions(+), 305 deletions(-)
 create mode 100644 src/assets/images/chart/tables/tables_list.png
 delete mode 100644 src/packages/components/Tables/Tables/TableCategory/config.ts
 rename src/packages/components/Tables/Tables/{tableCommon => TableList}/config.ts (87%)
 create mode 100644 src/packages/components/Tables/Tables/TableList/config.vue
 rename src/packages/components/Tables/Tables/{tableCommon => TableList}/data.json (100%)
 create mode 100644 src/packages/components/Tables/Tables/TableList/index.ts
 create mode 100644 src/packages/components/Tables/Tables/TableList/index.vue

diff --git a/src/assets/images/chart/tables/tables_list.png b/src/assets/images/chart/tables/tables_list.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcac1c1620e4a9f44d11c1c938421be6ca0a9876
GIT binary patch
literal 3816
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
Vb64u=o!I~PG&Quul%p?3{SWMcuLl4C

literal 0
HcmV?d00001

diff --git a/src/packages/components/Tables/Tables/TableCategory/config.ts b/src/packages/components/Tables/Tables/TableCategory/config.ts
deleted file mode 100644
index 4260e118..00000000
--- a/src/packages/components/Tables/Tables/TableCategory/config.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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
-}
diff --git a/src/packages/components/Tables/Tables/tableCommon/config.ts b/src/packages/components/Tables/Tables/TableList/config.ts
similarity index 87%
rename from src/packages/components/Tables/Tables/tableCommon/config.ts
rename to src/packages/components/Tables/Tables/TableList/config.ts
index 23c2b6f5..75fbff2c 100644
--- a/src/packages/components/Tables/Tables/tableCommon/config.ts
+++ b/src/packages/components/Tables/Tables/TableList/config.ts
@@ -1,6 +1,6 @@
 import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { TableCommonConfig } from './index'
+import { TableListConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
@@ -32,7 +32,7 @@ export const option = {
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
-  public key = TableCommonConfig.key
-  public chartConfig = cloneDeep(TableCommonConfig)
+  public key = TableListConfig.key
+  public chartConfig = cloneDeep(TableListConfig)
   public option = option
 }
diff --git a/src/packages/components/Tables/Tables/TableList/config.vue b/src/packages/components/Tables/Tables/TableList/config.vue
new file mode 100644
index 00000000..6cee7d78
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableList/config.vue
@@ -0,0 +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>
diff --git a/src/packages/components/Tables/Tables/tableCommon/data.json b/src/packages/components/Tables/Tables/TableList/data.json
similarity index 100%
rename from src/packages/components/Tables/Tables/tableCommon/data.json
rename to src/packages/components/Tables/Tables/TableList/data.json
diff --git a/src/packages/components/Tables/Tables/TableList/index.ts b/src/packages/components/Tables/Tables/TableList/index.ts
new file mode 100644
index 00000000..d8e24f1c
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableList/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 TableListConfig: ConfigType = {
+  key: 'TableList',
+  chartKey: 'VTableList',
+  conKey: 'VCTableList',
+  title: '排名列表',
+  category: ChatCategoryEnum.TABLE,
+  categoryName: ChatCategoryEnumName.TABLE,
+  package: PackagesCategoryEnum.TABLES,
+  image
+}
diff --git a/src/packages/components/Tables/Tables/TableList/index.vue b/src/packages/components/Tables/Tables/TableList/index.vue
new file mode 100644
index 00000000..6516c4fb
--- /dev/null
+++ b/src/packages/components/Tables/Tables/TableList/index.vue
@@ -0,0 +1,227 @@
+<template>
+  <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;
+
+  .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>
diff --git a/src/packages/components/Tables/Tables/index.ts b/src/packages/components/Tables/Tables/index.ts
index f342f04f..a2443e35 100644
--- a/src/packages/components/Tables/Tables/index.ts
+++ b/src/packages/components/Tables/Tables/index.ts
@@ -1,4 +1,5 @@
+import { TableListConfig } from './TableList'
 import { TableCommonConfig } from './TableCommon'
 import { TableCategoryConfig } from './TableCategory'
 
-export default [TableCommonConfig, TableCategoryConfig]
+export default [TableListConfig, TableCommonConfig, TableCategoryConfig]
diff --git a/src/packages/components/Tables/Tables/tableCommon/config.vue b/src/packages/components/Tables/Tables/tableCommon/config.vue
index 6cee7d78..542020b3 100644
--- a/src/packages/components/Tables/Tables/tableCommon/config.vue
+++ b/src/packages/components/Tables/Tables/tableCommon/config.vue
@@ -1,76 +1,13 @@
 <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>
+  <div>
 
-    <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>
+  </div>
 </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>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/packages/components/Tables/Tables/tableCommon/index.vue b/src/packages/components/Tables/Tables/tableCommon/index.vue
index 6516c4fb..07db6abc 100644
--- a/src/packages/components/Tables/Tables/tableCommon/index.vue
+++ b/src/packages/components/Tables/Tables/tableCommon/index.vue
@@ -1,227 +1,13 @@
 <template>
-  <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>
+
   </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'
+<script setup>
 
-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;
 
-  .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>
+</style>
\ No newline at end of file