From b4a023570fad2b0487adb4e04ed9785bdf6de2b9 Mon Sep 17 00:00:00 2001
From: fengsen <2548667232@qq.com>
Date: Thu, 21 Aug 2025 14:18:21 +0800
Subject: [PATCH] =?UTF-8?q?title=E7=BB=84=E4=BB=B6=E3=80=81progress?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/large/title_bottom.png             | Bin 0 -> 323 bytes
 src/assets/large/title_icon.png               | Bin 0 -> 731 bytes
 .../components/ProgressComponent.vue          | 120 ++++++++++++++++++
 .../largeScreen/components/TitleComponent.vue |  56 ++++++++
 src/views/largeScreen/components/leftPage.vue |  30 ++++-
 5 files changed, 203 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/large/title_bottom.png
 create mode 100644 src/assets/large/title_icon.png
 create mode 100644 src/views/largeScreen/components/ProgressComponent.vue
 create mode 100644 src/views/largeScreen/components/TitleComponent.vue

diff --git a/src/assets/large/title_bottom.png b/src/assets/large/title_bottom.png
new file mode 100644
index 0000000000000000000000000000000000000000..156eef85bc959b36e4da4cb63478b74cefc77036
GIT binary patch
literal 323
zcmeAS@N?(olHy`uVBq!ia0y~yU=;?kc{tdB<i~cc13-$gILO_JVcj{Imp~3nv6E*A
z2N2Y7q;vrJZ#`WcLn`LHy}L1&$x(pyg6!#BhprO7!srlZ>nRU@Xf&8PJpLjS=Dmfv
zN`K!2@AzF0vX}IN4Bs==M&HufIkhk<xvXvN-C4h0?a&Qewch#O*Q*~*t$_*{7(U4L
zbb{yu6Y`gDJ76sMwj8MP%(w5SzF+;s9P%KZ>w}`6{bu1Q+x9;zENjy}?H#{$UsUxO
zzJOV$T|oL0It&Ftv_z5*3y5x$5M~5Y4T{Gg(jI5{K*D>}&Ub%rw0^W@+AZs{)!*k-
l=Xp<g^?E{iZRrj)eg9_!s&CrU{ZbyJ&C}J-Wt~$(6966qa<2dY

literal 0
HcmV?d00001

diff --git a/src/assets/large/title_icon.png b/src/assets/large/title_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..caa02d94c5f84b78ecdf665a2d4d5baaff204884
GIT binary patch
literal 731
zcmV<10wn#3P)<h;3K|Lk000e1NJLTq001EX002b@1^@s6#DR|^00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrg-Jv~RA_<i*|BRAVI0Qs=lAAnqcMp&5DK>GU{QL(
z(V;`p28Ubv4|FKF3X1d(>Cn2kcIevmTv9cNOV>LgIEfBoJPTJew0G~%rEhtw#q=(B
zmk9UW0+;X!PsmFy#9NCyAa-z4a%jW#F@}g=SO;g1BzHi<p{H(Vd<Ye@4`K(h<j^zM
z8xKNHvX}K-!x85}namXrp-OqKWC*<!<{BMw9+YUVbP=kUbBWXe06=5{Vhw_KE^~P{
zh?o@!Re?|$m$~T4z0JET-@4JG@2{iA@sIH!de;_2Z+=0%oPRvE?7xp5_TNSi{C6@}
zgkINNDs|1J(sp>rEB$WN?!So^k9wRdLUm}|puL$@V{c~FxbyR)9A&P=2)$9~N(G_!
z=Uh$qx%H_<|2#iZN2t_XOxT(A*aO1>;Cyb;U&noB2t5KU5G(*2O^-Vf!}-#pv*SJ&
zgdPKJL1@o;>_fsKf|EN!%Y?uh18WoUwOt@o1wvIIR0Tp+AXEiHRUlLaLRBDC6M~Sm
z4#-_FkLBh%02rrt*E|55yxnSpr42#tToL+%)BBGd-fWqeifl015M*VIpkWvAR?E7-
zy#J~a9@PxU*uPVHmD?XiMgYK^#|HpV4TEYe4C<BWS2ayUtala|)gUmcfgwYq76!HJ
z(NV1|kFUmgjgb+mP#B?qrQ!Q%_+>dL*H40a(zy~N^ai3l7)+N3n7;Wn$y})*^e&p~
zGS7?k!OW@&`P!a<3WVzaK@ejd61xDh`Exez6K=WOE)i@7QakQrBUH04n*eMOYyw6)
z?h_;Qnl4++upwXrFvo(>OEOpL2vwZ9GDGMMn=2QD-bHiej!@}y{RVo{IZ+793qSw>
N002ovPDHLkV1kumL5KhV

literal 0
HcmV?d00001

diff --git a/src/views/largeScreen/components/ProgressComponent.vue b/src/views/largeScreen/components/ProgressComponent.vue
new file mode 100644
index 0000000..8620b37
--- /dev/null
+++ b/src/views/largeScreen/components/ProgressComponent.vue
@@ -0,0 +1,120 @@
+<template>
+    <div class="progress_component">
+        <div class="title">
+            <span class="progress_title">{{ title }}</span>
+            <span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
+        </div>
+        <div class="roboto">
+            <span>{{ value }}</span>
+            <span>{{ unit }}</span>
+        </div>
+        <div class="my_el_progress">
+            <el-progress 
+                :percentage="progressPercentage" 
+                :color="progressColor" 
+                :show-text="false" 
+            />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+    // 标题文本
+    title: {
+        type: String,
+        required: true,
+        default: '指标名称'
+    },
+    // 数值
+    value: {
+        type: String,
+        required: true,
+        default: '0.00'
+    },
+    // 单位
+    unit: {
+        type: String,
+        default: '万元'
+    },
+    // 百分比变化值（如：-327.55%）
+    percentageChange: {
+        type: String,
+        required: true,
+        default: '0.00%'
+    },
+    // 进度条百分比
+    progressPercentage: {
+        type: Number,
+        required: true,
+        default: 0
+    },
+    // 进度条颜色，默认红色
+    progressColor: {
+        type: String,
+        default: 'rgba(255, 77, 79, 1)'
+    }
+});
+
+// 计算百分比变化的样式类（红色或绿色）
+const percentageClass = computed(() => {
+    // 检查变化值是否为正数
+    const isPositive = props.percentageChange.startsWith('+') || 
+                      (!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
+    return isPositive ? 'green' : 'red';
+});
+</script>
+
+<style lang="scss" scoped>
+.progress_component {
+    width: 100%;
+    height: 100%;
+
+    :deep(.el-progress-bar__outer) {
+        background-color: transparent;
+    }
+
+    :deep(.el-progress-bar__inner),
+    :deep(.el-progress-bar__outer) {
+        border-radius: unset;
+    }
+
+    .my_el_progress {
+        margin-top: 15px;
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        font-size: 12px;
+    }
+
+    .progress_title {
+        color: rgba(143, 171, 191, 1);
+        font-size: 12px;
+        font-family: SourceHanSansCN-Regular;
+        font-weight: 400;
+    }
+
+    .roboto {
+        font-family: Roboto-Regular;
+        font-weight: 400;
+    }
+
+    .red {
+        color: rgba(255, 77, 79, 1);
+    }
+
+    .green {
+        color: rgba(0, 227, 150, 1);
+    }
+}
+</style>
+    
\ No newline at end of file
diff --git a/src/views/largeScreen/components/TitleComponent.vue b/src/views/largeScreen/components/TitleComponent.vue
new file mode 100644
index 0000000..46ed988
--- /dev/null
+++ b/src/views/largeScreen/components/TitleComponent.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="large_title">
+        <div class="title">
+            <img class="title_icon" src="@/assets/large/title_icon.png" alt=""></img>
+            <div class="title_text">{{ title }}</div>
+        </div>
+        <img class="title_bottom" src="@/assets/large/title_bottom.png" alt="">
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+// 定义组件属性，使组件可配置
+const props = defineProps({
+    // 标题文本
+    title: {
+        type: String,
+        required: true,
+        default: '标题'
+    },
+})
+</script>
+
+<style lang="scss">
+.large_title {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .title {
+        display: flex;
+        margin-bottom: 15px;
+    }
+
+    .title_icon {
+        width: 10px;
+        height: 24px;
+        margin-right: 15px;
+    }
+
+    .title_text {
+        font-size: 24px;
+        font-family: Rang_men_zheng_title;
+        font-weight: 400;
+        color: rgba(226, 235, 241, 1);
+    }
+
+    .title_bottom {
+        width: 100%;
+        height: 5px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/largeScreen/components/leftPage.vue b/src/views/largeScreen/components/leftPage.vue
index 4638875..804ea76 100644
--- a/src/views/largeScreen/components/leftPage.vue
+++ b/src/views/largeScreen/components/leftPage.vue
@@ -1,13 +1,37 @@
 <template>
-  <div class="leftPage">左边</div>
+  <div class="leftPage">
+    <!--  -->
+    <div class="kpi_box">
+      <TitleComponent :title="'支付KPI'"/>
+      <div style="height: 100px;"></div>
+      <ProgressComponent 
+        title="营业收入" 
+        value="123,456.78" 
+        percentageChange="+25.30%" 
+        progressPercentage="75" 
+        progressColor="rgba(0, 227, 150, 1)"
+      />
+    </div>
+
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup>
+import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
+import TitleComponent  from './TitleComponent.vue';
+import ProgressComponent from './ProgressComponent.vue';
+</script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .leftPage {
   width: 100%;
   height: 100%;
   background: #0c1e35;
+
+  .kpi_box {
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
 }
 </style>