fix: 账户统计功能优化。

src/views/invest/accountsBalance/index.vue

@@ -4,7 +4,7 @@
       <div class="title">查询条件</div>
       <el-form :model="queryParams" ref="queryRef" :inline="true" :rules="rules" label-width="100px">
         <el-form-item label="账户类型" prop="type">
-          <el-select v-model="queryParams.dataType" placeholder="请选择账户类型" clearable>
+          <el-select v-model="queryParams.dataType" placeholder="请选择账户类型" @change="handleChange" clearable>
             <el-option v-for="dict in account_type" :key="dict.value" :label="dict.label" :value="dict.value" />
           </el-select>
         </el-form-item>
@@ -27,18 +27,51 @@
       </div>
     </div>
     <div class="main-con" style="height: calc(100% - 1.45rem)">
-      <div class="summary-con">
+      <div class="summary-con" style="height: 115px">
         <div class="right-con" v-hasPermi="['invest:debitCard']">
           <div class="img">
             <img src="@/assets/images/average.png" alt="" />
           </div>
           <div class="item-wrap">
-            <div class="title">储蓄账户可用余额</div>
+            <div class="title">储蓄账户余额</div>
+            <div>
+              <span class="num">{{ accountsBalance.debitAllBalance }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-hasPermi="['invest:debitCard']">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">储蓄卡余额</div>
             <div>
               <span class="num">{{ accountsBalance.debitBalance }}</span> <span class="unit"></span>
             </div>
           </div>
         </div>
+        <div class="right-con" v-hasPermi="['invest:debitCard']">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">I类储蓄卡余额</div>
+            <div>
+              <span class="num">{{ accountsBalance.idebitBalance }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
+        <div class="right-con" v-hasPermi="['invest:debitCard']">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">II类储蓄卡余额</div>
+            <div>
+              <span class="num">{{ accountsBalance.iidebitBalance }}</span> <span class="unit"></span>
+            </div>
+          </div>
+        </div>
         <div class="right-con" v-hasPermi="['invest:creditCard']">
           <div class="img">
             <img src="@/assets/images/average.png" alt="" />
@@ -50,6 +83,8 @@
             </div>
           </div>
         </div>
+      </div>
+      <div class="summary-con" style="height: 110px">
         <div class="right-con" v-hasPermi="['invest:creditCard']">
           <div class="img">
             <img src="@/assets/images/average.png" alt="" />
@@ -61,17 +96,6 @@
             </div>
           </div>
         </div>
-        <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
-          <div class="img">
-            <img src="@/assets/images/average.png" alt="" />
-          </div>
-          <div class="item-wrap">
-            <div class="title">投资账户余额</div>
-            <div>
-              <span class="num">{{ accountsBalance.investBalance }}</span>
-            </div>
-          </div>
-        </div>
         <div class="center-con" v-hasPermi="['invest:onlineLend']">
           <div class="img">
             <img src="@/assets/images/average.png" alt="" />
@@ -83,6 +107,39 @@
             </div>
           </div>
         </div>
+        <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">投资账户余额</div>
+            <div>
+              <span class="num">{{ accountsBalance.investBalance }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">期货投资账户余额</div>
+            <div>
+              <span class="num">{{ accountsBalance.futuresBalance }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="center-con" v-hasPermi="['invest:futureStocks:list']">
+          <div class="img">
+            <img src="@/assets/images/average.png" alt="" />
+          </div>
+          <div class="item-wrap">
+            <div class="title">股票投资账户余额</div>
+            <div>
+              <span class="num">{{ accountsBalance.stocksBalance }}</span>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="title-con">
         <div class="title">记账账户查询统计</div>
@@ -90,14 +147,15 @@
           <el-radio-group v-model="radioVal" @change="handleRadioChange">
             <el-radio-button label="柱状图" />
             <el-radio-button label="折线图" />
-            <el-radio-button label="表格" />
+            <el-radio-button label="账户余额" />
+            <el-radio-button label="信用卡可用余额" />
           </el-radio-group>
         </div>
       </div>
       <div class="content-con">
-        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 170px)"></div>
-        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 170px)"></div>
-        <el-table v-show="radioVal === '表格'" v-loading="loading" :data="accountsBalance.accountsBalancesList" height="calc(100% - 170px)">
+        <div v-show="radioVal === '柱状图'" class="chart" id="chartBar" style="height: calc(100% - 225px); margin-top: -10px"></div>
+        <div v-show="radioVal === '折线图'" class="chart" id="chartLine" style="height: calc(100% - 225x); margin-top: -10px"></div>
+        <el-table v-show="radioVal === '账户余额'" v-loading="loading" :data="accountsBalance.accountsBalancesList" height="calc(100% - 245px)">
           <el-table-column label="序号" width="50" type="index" align="center">
             <template #default="scope">
               <span>{{ scope.$index + 1 }}</span>
@@ -106,6 +164,15 @@
           <el-table-column label="记账账户" align="center" prop="account" />
           <el-table-column label="可用余额" align="center" prop="availableLimit" />
         </el-table>
+        <el-table v-show="radioVal === '信用卡可用余额'" v-loading="loading" :data="accountsBalance.creditBalancesList" height="calc(100% - 245px)">
+          <el-table-column label="序号" width="50" type="index" align="center">
+            <template #default="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="信用卡名称" align="center" prop="account" />
+          <el-table-column label="可用余额" align="center" prop="availableLimit" />
+        </el-table>
       </div>
     </div>
   </div>
@@ -151,6 +218,10 @@ const data = reactive({
 })
 
 const { queryParams, rules } = toRefs(data)
+const handleChange = (id) => {
+  queryParams.value.dataType = id
+  getList()
+}
 const today = new Date()
 const end = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)
 const start = end
@@ -290,17 +361,25 @@ const drawBar = (data) => {
         type: 'bar',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
         itemStyle: {
-          color: '#2283cf'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         }
       }
     ],
     // 添加点击事件的处理函数
     emphasis: {
-      itemStyle: {
-        color: '#2283cf',
-        barWidth: 20 // 根据需求调整数值大小，单位是像素
-      },
-      barWidth: 24 // 根据需求调整数值大小，单位是像素
+      // itemStyle: {
+      //   color: '#2283cf',
+      //   barWidth: 20 // 根据需求调整数值大小，单位是像素
+      // },
+      // barWidth: 24 // 根据需求调整数值大小，单位是像素
     }
   }
 
@@ -364,7 +443,15 @@ const drawLine = (data) => {
           color: '#4181c9'
         },
         itemStyle: {
-          color: '#4181c9'
+          // 此处可以是一个固定颜色值，也可以是一个回调函数根据数据动态计算颜色
+          color: function (params) {
+            // 这里可以根据需要设置不同的颜色，比如根据数据值
+            if (params.data <= 0) {
+              return 'green'
+            } else if (params.data > 0) {
+              return 'red'
+            }
+          }
         },
         smooth: true,
         symbol: 'emptyCircle',