refactor(largeScreen): 重构大屏展示组件

- 修改 ProgressComponent 组件，增加 isShowPrice 属性控制是否显示价格
- 更新 rightPage 组件，添加新的 ProgressComponent 实例
- 优化 tender/plan/index.vue 页面结构，简化代码

src/views/largeScreen/components/ProgressComponent.vue

@@ -4,16 +4,12 @@
             <span class="progress_title">{{ title }}</span>
             <span :class="percentageClass" class="roboto">{{ percentageChange }}</span>
         </div>
-        <div class="roboto">
+        <div class="roboto" v-if="isShowPrice">
             <span>{{ value }}</span>
             <span>{{ unit }}</span>
         </div>
         <div class="my_el_progress">
-            <el-progress 
-                :percentage="progressPercentage" 
-                :color="progressColor" 
-                :show-text="false" 
-            />
+            <el-progress :percentage="progressPercentage" :color="progressColor" :show-text="false" />
         </div>
     </div>
 </template>
@@ -56,14 +52,19 @@ const props = defineProps({
     progressColor: {
         type: String,
         default: 'rgba(255, 77, 79, 1)'
+    },
+    // 是否显示价格
+    isShowPrice: {
+        type: Boolean,
+        default: true
     }
 });
 
 // 计算百分比变化的样式类（红色或绿色）
 const percentageClass = computed(() => {
     // 检查变化值是否为正数
-    const isPositive = props.percentageChange.startsWith('+') || 
-                      (!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
+    const isPositive = props.percentageChange.startsWith('+') ||
+        (!props.percentageChange.startsWith('-') && props.percentageChange !== '0.00%');
     return isPositive ? 'green' : 'red';
 });
 </script>
@@ -73,6 +74,7 @@ const percentageClass = computed(() => {
     width: 100%;
     height: 100%;
     margin-bottom: 10px;
+
     :deep(.el-progress-bar__outer) {
         background-color: transparent;
     }
@@ -116,5 +118,4 @@ const percentageClass = computed(() => {
         color: rgba(0, 227, 150, 1);
     }
 }
-</style>
-    
+</style>

src/views/largeScreen/components/rightPage.vue

@@ -29,10 +29,12 @@
         <EchartBox :option="barOption" />
       </div>
       <div class="progress">
-        <div class="progress_item">
+        <!-- <div class="progress_item">
           <div class="title">项目进度</div>
           <div class="number">100%</div>
-        </div>
+        </div> -->
+        <ProgressComponent title="现金比率" value="123,456.78" percentageChange="3479.61%" :progressPercentage="100"
+          progressColor="rgba(29, 214, 255, 1)" :isShowPrice="false" class="progress_text" />
       </div>
     </div>
   </div>
@@ -42,6 +44,7 @@
 import TitleComponent from './TitleComponent.vue';
 import EchartBox from '@/components/EchartBox/index.vue';
 import { getLineOption, getBarOptions } from './optionList';
+import ProgressComponent from './ProgressComponent.vue';
 
 const lineOption = ref();
 const barOption = ref();
@@ -94,6 +97,7 @@ onMounted(() => {
   box-sizing: border-box;
   // padding: 5px;
 }
+
 .funds {
   width: 100%;
   // height: 40%;
@@ -101,11 +105,13 @@ onMounted(() => {
   box-sizing: border-box;
   padding: 10px 5px;
 }
+
 .funds_echarts {
   width: 100%;
   height: 25vh;
   padding: 10px 0 0 0;
 }
+
 .cashFlow {
   width: 100%;
   // height: 50%;
@@ -114,6 +120,7 @@ onMounted(() => {
   padding: 10px 5px;
   margin-top: 20px;
 }
+
 .inflowData {
   width: 100%;
   height: 12vh;
@@ -122,6 +129,7 @@ onMounted(() => {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
+
   .inflow {
     width: 100%;
     height: 100%;
@@ -141,12 +149,14 @@ onMounted(() => {
       color: #fff;
       padding-bottom: 10px;
     }
+
     .number {
       font-size: 24px;
       // font-weight: 500;
       color: #fff;
       padding-bottom: 10px;
     }
+
     .unit {
       font-size: 12px;
       // font-weight: 500;
@@ -154,12 +164,21 @@ onMounted(() => {
     }
   }
 }
+
 .inflow_echarts {
   width: 100%;
   height: 25vh;
   margin-top: 20px;
 }
+
 .progress {
   width: 100%;
+  margin-top: 20px;
+}
+
+:deep(.progress_text) {
+  .roboto {
+    color: #fff;
+  }
 }
 </style>