资金看板-完善-数据暂时没有对接

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 煤科建管平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.149:8899'
+VITE_APP_BASE_API = 'http://192.168.110.180:8899'
 
 # 无人机接口地址
 

src/views/largeScreen/components/RevenueContractCard.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="stat-card" :style="customStyles">
+    <!-- 标题区域 -->
+    <div class="stat-card__title">{{ title }}</div>
+    
+    <!-- 数值区域 -->
+    <div class="stat-card__value-container">
+      <span class="stat-card__value">{{ formattedValue }}</span>
+      <span class="stat-card__unit">{{ unit }}</span>
+    </div>
+    
+    <!-- 底部信息区域 -->
+    <div class="stat-card__footer">
+      <div class="stat-card__trend">
+        <img 
+          class="stat-card__trend-icon" 
+          :src="'/src/assets/large/' + trendIcon+'.png'" 
+          :alt="trendDirection === 'up' ? '上升' : '下降'"
+        >
+        <span class="stat-card__trend-text">{{ trendText }}</span>
+      </div>
+      <img 
+        class="stat-card__badge" 
+        :src="'/src/assets/large/'+badgeIcon+'.png'" 
+        alt="徽章图标"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 卡片标题
+  title: {
+    type: String,
+    default: '收入合同'
+  },
+  // 数值
+  value: {
+    type: Number,
+    default: 205805.17
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '万元'
+  },
+  // 增长率
+  growthRate: {
+    type: Number,
+    default: 3.2
+  },
+  // 增长对比周期
+  period: {
+    type: String,
+    default: '较上月'
+  },
+  // 趋势方向 (up/down)
+  trendDirection: {
+    type: String,
+    default: 'up',
+    validator: (value) => ['up', 'down'].includes(value)
+  },
+  // 趋势图标
+  trendIcon: {
+    type: String,
+    default: 'up'
+  },
+  // 徽章图标
+  badgeIcon: {
+    type: String,
+    default: 'top1'
+  },
+  // 卡片自定义样式
+  customStyles: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 格式化数值为带千分位的字符串
+const formattedValue = computed(() => {
+  return props.value.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+});
+
+// 生成趋势文本
+const trendText = computed(() => {
+  return `${props.growthRate}% ${props.period}`;
+});
+</script>
+
+<style lang="scss" scoped>
+.stat-card {
+  width: 225px;
+  height: 147px;
+  background-color: rgba(29, 214, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+  border: 1px solid rgba(29, 214, 255, 0.1);
+  border-radius: 4px; // 增加轻微圆角，提升视觉效果
+  
+  &__title {
+    font-size: 14px;
+    color: #8FABBF;
+    line-height: 20px;
+  }
+  
+  &__value-container {
+    display: flex;
+    align-items: baseline;
+  }
+  
+  &__value {
+    font-size: 24px;
+    color: #fff;
+    line-height: 30px;
+    margin-right: 5px;
+    font-weight: bold;
+  }
+  
+  &__unit {
+    color: #8FABBF;
+    font-size: 14px;
+  }
+  
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  &__trend {
+    display: flex;
+    align-items: center;
+  }
+  
+  &__trend-icon {
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+  }
+  
+  &__trend-text {
+    font-size: 14px;
+    color: #8FABBF;
+  }
+  
+  &__badge {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+// 为下降趋势添加不同颜色
+:deep(.stat-card__trend-text) {
+  color: v-bind('trendDirection === "up" ? "#8FABBF" : "#ff4d4f"');
+}
+</style>

src/views/largeScreen/components/bottomboxconpoent.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="bottom_box">
+        <div class="bottom_box_title">收入合同</div>
+        <div>
+            <span class="bottom_box_number">205,805.17</span>
+            <span>万元</span>
+        </div>
+        <div class="bottom_box_bottom">
+            <el-progress :percentage="50" color="rgba(255, 147, 42, 1)" />
+        </div>
+        <div class="bottom_box_text">
+            成本率
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+.bottom_box {
+    width: 225px;
+    height: 147px;
+    height: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+
+    .bottom_box_title,
+    .bottom_box_text {
+      color: rgba(143, 171, 191, 1);
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .bottom_box_number {
+      font-size: 24px;
+      color: #fff;
+      line-height: 30px;
+    }
+  }
+</style>

src/views/largeScreen/components/centerPage.vue

@@ -1,8 +1,55 @@
 <template>
   <div class="centerPage">
+    <div>
+      <div style="height: 147px;width: 100%;display: flex;justify-content: space-between;">
+        <!-- <div class="top_box">
+          <div class="top_box_title">收入合同</div>
+          <div>
+            <span class="top_box_number">205,805.17</span>
+            <span>万元</span>
+          </div>
+          <div class="top_box_bottom">
+            <div>
+              <img class="up_img" src="@/assets/large/up.png" alt=""></img>
+              <span class="top_box_title"> 3.2% 较上月</span>
+            </div>
+            <img class="top_img" src="@/assets/large/top1.png" alt=""></img>
+          </div>
+        </div> -->
+        <RevenueContractCard title="收入合同" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="up"
+          badgeIcon="top1" period="较上月" />
+        <RevenueContractCard title="支出合同" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="up"
+          badgeIcon="top2" period="较上月" />
+        <RevenueContractCard title="合同利润" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="down"
+          badgeIcon="top3" period="较上月" />
+        <RevenueContractCard title="工程变更" :value="156234.89" :growthRate="-1.5" trendDirection="up" trendIcon="up"
+          badgeIcon="top4" period="较上月" />
+      </div>
+    </div>
     <div class="centerPage_map">
       <div ref="mapRef" class="map-container" style="width: 100%; height: 100%" />
     </div>
+    <div>
+      <div style="height: 147px;width: 100%;display: flex;justify-content: space-between;">
+        <!-- <div class="bottom_box">
+          <div class="bottom_box_title">收入合同</div>
+          <div>
+            <span class="bottom_box_number">205,805.17</span>
+            <span>万元</span>
+          </div>
+          <div class="bottom_box_bottom">
+            <el-progress :percentage="50" color="rgba(255, 147, 42, 1)" />
+          </div>
+          <div class="bottom_box_text">
+            成本率
+          </div>
+        </div> -->
+        <bottomboxconpoent> </bottomboxconpoent>
+        <bottomboxconpoent> </bottomboxconpoent>
+        <bottomboxconpoent> </bottomboxconpoent>
+        <bottomboxconpoent> </bottomboxconpoent>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,6 +57,8 @@
 // import { getPowerStationOverview } from '@/api/large';
 import * as echarts from 'echarts';
 import china from '@/assets/china.json';
+import RevenueContractCard from './RevenueContractCard.vue';
+import bottomboxconpoent from './bottomboxconpoent.vue';
 const data = ref<any>({});
 
 // 地图容器引用
@@ -168,9 +217,12 @@ onUnmounted(() => {
   padding: 0 10px 10px 10px;
 
   box-sizing: border-box;
+
   .centerPage_map {
     width: 100%;
-    height: 100%;
+    height: 60%;
   }
+
+  
 }
 </style>

src/views/largeScreen/components/rightPage.vue

@@ -93,7 +93,6 @@ onMounted(() => {
 .rightPage {
   width: 100%;
   height: 100%;
-  background: #0c1e35;
   box-sizing: border-box;
   // padding: 5px;
 }
@@ -118,7 +117,7 @@ onMounted(() => {
   border: 1px solid rgba(29, 214, 255, 0.3);
   box-sizing: border-box;
   padding: 10px 5px;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .inflowData {
@@ -173,7 +172,7 @@ onMounted(() => {
 
 .progress {
   width: 100%;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 :deep(.progress_text) {