应收实收

src/view/tiip/kanban/Finance.vue

 <style lang="less">
     .Finance{
+        .card{
+            background: #fff;
+            border-radius: 7px;
+            box-shadow: 1px 1px 3px #aaa;
+            padding: 10px;
+            margin: 10px;
+            >.title{
+                font-size: 12px !important;
+                font-weight: 600;
+            }
+            >.should{
+                display: flex;
+                text-align: center;
+                min-height:60px;
+                >div{
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    width: 50%;
+                    >span{
+                        padding:2px 0;
+                        &:nth-child(2){
+                            font-weight: bold;
+                            font-size: 23px;
+                        }
+                    }
+                }
+            }
+            >.actual{
+                display: flex;
+                text-align: center;
+                min-height:40px;
+                >div{
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-between;
+                    width: 50%;
+                    &:last-child{
+                        border-left:2px solid #03A9F4;
+                    }
+                    >span{
+                        padding:2px 0;
+                    }
+                }
+            }
+        }
         >div{
             >.title_{
                 display: inline-block;
@@ -39,8 +85,36 @@
 </style>
 <template>
     <div class="Finance" :style="list.length==0&&'background:#fff;height:100%;'">
-        <div v-for="(v,k) in list" :key='k' v-if="list.length>0">
-            <!-- <div class="title_">{{v.sName}}</div> -->
+        <div class="card">
+            <span class="title">应收应付</span>
+            <div class="should">
+                <div>
+                    <span>应收账款</span>
+                    <span>{{(list.filter(v=>v.sName=="应收")[0]&&list.filter(v=>v.sName=="应收")[0].nAmount||0).toLocaleString()}}</span>
+                    <span>余额：{{(list.filter(v=>v.sName=="应收")[0]&&list.filter(v=>v.sName=="应收")[0].nCloseAmount||0).toLocaleString()}}</span>
+                </div>
+                <div>
+                    <span>应付账款</span>
+                    <span style="color:red;">{{(list.filter(v=>v.sName=="应付")[0]&&list.filter(v=>v.sName=="应付")[0].nAmount||0).toLocaleString()}}</span>
+                    <span>余额：{{(list.filter(v=>v.sName=="应付")[0]&&list.filter(v=>v.sName=="应付")[0].nCloseAmount||0).toLocaleString()}}</span>
+                </div>
+            </div>
+        </div>
+        <div class="card">
+            <span class="title">实收实付</span>
+            <div class="actual">
+                <div>
+                    <span>{{(list.filter(v=>v.sName=="实付")[0]&&list.filter(v=>v.sName=="实付")[0].nAmount||0).toLocaleString()}}</span>
+                    <span>实收账款</span>
+                </div>
+                <div>
+                    <span style="color:red;">{{(list.filter(v=>v.sName=="实付")[0]&&list.filter(v=>v.sName=="实付")[0].nAmount||0).toLocaleString()}}</span>
+                    <span>实付账款</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- <div v-for="(v,k) in list" :key='k' v-if="list.length>0">
             <div class="card">
                 <span style="font-size:15px;">{{v.sName}}</span>
                 <div>
@@ -61,7 +135,7 @@
                     </XCircle>
                 </div>
             </div>
-        </div>
+        </div> -->
         <img src="@/assets/noData.jpg" style="width:100%;" v-if="list.length==0"/>
     </div>
 </template>