收支分析

web/src/pinia/collection/Collection.js

@@ -11,7 +11,7 @@ export const collectionOperate = defineStore('payment', () => {
       if (res.code === 0) {
         paymentList.length = 0
         paymentList.push(...res.data)
-        // console.log(paymentList)
+        console.log(paymentList)
       }
     })
   }

web/src/view/finance/financeAnalysis/financeAnalysis.vue

@@ -2,7 +2,7 @@
   <div>
     <el-row
       class="bg-white"
-      style="height: 90px"
+      style="height: 80px"
       align="middle"
     >
       <el-col
@@ -11,9 +11,9 @@
       >
         <span class="analysisTitle">收支分析</span>
       </el-col>
-      <el-col :span="14">
+      <el-col :span="13">
         <el-row>
-          <el-col :span="8">
+          <el-col :span="10">
             <el-row
               justify="center"
               align="middle"
@@ -34,7 +34,7 @@
               <el-text>项目名称</el-text>
             </el-row>
           </el-col>
-          <el-col :span="4">
+          <el-col :span="7">
             <el-row
               justify="center"
               align="middle"
@@ -55,23 +55,23 @@
               <el-text>项目金额</el-text>
             </el-row>
           </el-col>
-          <el-col :span="4">
+          <el-col :span="7">
             <el-row
-                justify="center"
-                align="middle"
+              justify="center"
+              align="middle"
             >
               <el-text
-                  style="font-size: 20px;color: #409eff;"
-                  tag="b"
-                  :line-clamp="1"
+                style="font-size: 20px;color: #409eff;"
+                tag="b"
+                :line-clamp="1"
               >
                 {{ projectMessage.name }}
               </el-text>
             </el-row>
             <el-row
-                justify="center"
-                align="middle"
-                style="margin-top: 8px"
+              justify="center"
+              align="middle"
+              style="margin-top: 8px"
             >
               <el-text>项目收款</el-text>
             </el-row>
@@ -79,13 +79,15 @@
         </el-row>
       </el-col>
       <el-col
-        :span="2"
+        :span="3"
         :offset="4"
+        class="flex justify-center"
       >
         <el-button
           text
           :icon="Menu"
           size="large"
+          style="font-size: 18px"
           @click="listShow = true"
         >
           项目列表
@@ -93,9 +95,54 @@
       </el-col>
     </el-row>
     <el-row
-      class="bg-white mt-5"
+      class="mt-5"
       style="height: 150px"
-    />
+      justify="space-between"
+    >
+      <el-col
+        :span="4"
+        class="bg-white"
+      >
+        <el-row style="height: 100px" align="middle">
+          <el-col :span="13" :offset="1">
+            <el-text>项目收款</el-text>
+          </el-col>
+          <el-col
+            :span="9"
+            class="flex justify-center"
+          >
+            <el-image
+              :src="iconCollection"
+              class="iconStyle"
+            />
+          </el-col>
+        </el-row>
+        <el-row style="height: 50px" align="middle">
+          <el-col :span="4" :offset="1">
+            <el-image
+                :src="iconAmount"
+                class="countIcon"
+            />
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col
+        :span="4"
+        class="bg-white"
+      />
+      <el-col
+        :span="4"
+        class="bg-white"
+      />
+      <el-col
+        :span="4"
+        class="bg-white"
+      />
+      <el-col
+        :span="4"
+        class="bg-white"
+      />
+    </el-row>
     <el-row
       class="bg-white mt-5"
       style="height: 540px"
@@ -172,6 +219,8 @@ import { Menu, Search } from '@element-plus/icons-vue'
 import { ref, onMounted, reactive, computed } from 'vue'
 import { getProjectList, getProjectMessage } from '@/api/project'
 import { collectionOperate } from '@/pinia/collection/Collection'
+import iconCollection from '@/assets/Collection.png'
+import iconAmount from '@/assets/amount.png'
 defineOptions({
   name: 'FinanceAnalysis'
 })
@@ -204,12 +253,13 @@ const buttonType = computed(() => (state) => {
 })
 
 const projectAmount = computed(() => {
-  // const price = ref(parseInt(projectMessage.price))
-  const price = ref(482000)
+  const price = ref(parseInt(projectMessage.price))
+  // const price = ref(4892703)
   if (price.value < 10000) {
     return price.value + '元'
   } else {
-    return (price.value / 10000).toFixed(4) + '万元'
+    const tenThousand = (price.value / 10000).toFixed(4)
+    return parseFloat(tenThousand) + '万元'
   }
 })
 // 方法
@@ -245,6 +295,7 @@ const changePage = (page) => {
 }
 
 const incomeExpenses = (code) => {}
+
 </script>
 
 <style lang="scss" scoped>
@@ -252,4 +303,12 @@ const incomeExpenses = (code) => {}
     font-size: 20px;
     font-weight: 520;
   }
+  .iconStyle{
+    width: 70px;
+    height: 80px;
+  }
+  .countIcon{
+    width: 28px;
+    height: 28px;
+  }
 </style>