From 92921431668181fb6d3387368c751ccc40aba8cf Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 28 十一月 2025 17:14:32 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev-dataBoard'
---
src/views/DataBoard/components/DataBoardTableView.vue | 118 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 118 insertions(+), 0 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardTableView.vue b/src/views/DataBoard/components/DataBoardTableView.vue
new file mode 100644
index 0000000..4d41ac2
--- /dev/null
+++ b/src/views/DataBoard/components/DataBoardTableView.vue
@@ -0,0 +1,118 @@
+<template>
+ <div class="data-board-table">
+ <div class="data-board-table-item title">
+ <div class="data-board-table-item-icon">鎺掑悕</div>
+ <div class="data-board-table-item-content">浼佷笟鍚�</div>
+ <div class="data-board-table-item-num">{{ customerName }}</div>
+ </div>
+ <div
+ v-for="(item, index) in props.tableData"
+ :key="index"
+ class="data-board-table-item"
+ :class="{ isOdd: index % 2 === 0 }"
+ >
+ <div class="data-board-table-item-icon">
+ <img
+ class="data-board-table-item-icon-img"
+ v-if="index < 3"
+ :src="iconList[index]"
+ alt=""
+ />
+ <span class="data-board-table-item-icon-index" v-else>{{ index + 1 }}</span>
+ </div>
+ <div class="data-board-table-item-content ellipsis">{{ item.name }}</div>
+ <div class="data-board-table-item-num">
+ {{ `${isMoney ? toThousand(item.value) : item.value}${unit}` }}
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import DataBoardTableIcon1 from '@/assets/dataBoard/data-board-table-icon1.png';
+import DataBoardTableIcon2 from '@/assets/dataBoard/data-board-table-icon2.png';
+import DataBoardTableIcon3 from '@/assets/dataBoard/data-board-table-icon3.png';
+import { toThousand } from '@/utils';
+
+defineOptions({
+ name: 'DataBoardTableView',
+});
+
+type Props = {
+ tableData?: any[];
+ unit: string;
+ isMoney?: boolean;
+ customerName: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ isMoney: false,
+});
+
+const iconList = [DataBoardTableIcon1, DataBoardTableIcon2, DataBoardTableIcon3];
+</script>
+
+<style lang="scss" scoped>
+@use '@/style/common.scss' as *;
+
+.data-board-table {
+ display: flex;
+ padding: 0 14px 11px;
+ flex-direction: column;
+ min-height: 270px;
+
+ .data-board-table-item {
+ display: grid;
+ align-items: center;
+ height: 37px;
+ font-size: 14px;
+ color: #ffffff;
+ background-position: bottom center;
+ background-repeat: no-repeat;
+ background-size: 100% 2px;
+ grid-template-columns: 60px 3fr 2fr;
+ background-image: linear-gradient(
+ to right,
+ rgba(150, 150, 150, 0),
+ rgb(121, 121, 121),
+ rgba(150, 150, 150, 0)
+ );
+
+ &.title {
+ font-size: 14px;
+ color: #9d9d9d;
+ }
+
+ &.isOdd {
+ background-color: #141c2f;
+ }
+
+ .data-board-table-item-icon {
+ display: flex;
+ justify-content: center;
+
+ .data-board-table-item-icon-img {
+ width: 24px;
+ height: 28px;
+ }
+
+ .data-board-table-item-icon-index {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 34px;
+ height: 16px;
+ font-size: 14px;
+ font-family: YouSheBiaoTiHei Regular;
+ color: #ffffff;
+ background-color: #3e4b68;
+ transform: skewX(-30deg);
+ }
+ }
+
+ .data-board-table-item-num {
+ text-align: right;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1