From 681fea2024227f2c73bb6d844f678fbb3a0706c9 Mon Sep 17 00:00:00 2001
From: likunming <likunming@163.com>
Date: Sat, 13 Jul 2024 16:41:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=95=BF=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/report/RptRatingDistribution.vue    | 282 +++++++++++++-----
 1 file changed, 214 insertions(+), 68 deletions(-)

diff --git a/irbs.frontend/src/views/report/RptRatingDistribution.vue b/irbs.frontend/src/views/report/RptRatingDistribution.vue
index dadf6f1..30a3574 100644
--- a/irbs.frontend/src/views/report/RptRatingDistribution.vue
+++ b/irbs.frontend/src/views/report/RptRatingDistribution.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="h-full">
-    <q-splitter v-model="splitterModel" horizontal class="h-full">
+    <q-splitter v-model="state.splitterModel" horizontal class="h-full">
       <template #before>
         <w-grid
           ref="rptRatingDistributionGridRef"
-          title="客户评级分布报表"
+          title="客户评级分布列表"
           :data-url="Environment.apiContextPath('api/irbs/rptRatingDistribution/list')"
           :sort-no="true"
           :dense="true"
@@ -14,84 +14,230 @@
           :columns="rptRatingDistributionGrid.columns"
           :toolbar-actions="rptRatingDistributionGrid.buttons"
           :pageable="false"
+          @after-request-data="afterRequestData"
         ></w-grid>
       </template>
-
       <template #after>
-        <w-echarts
-          :option="{
-            tooltip: {
-              trigger: 'axis',
-              axisPointer: {
-                type: 'shadow',
-              },
-            },
-            grid: {
-              top: '10%',
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true,
-            },
-            dataZoom: [
-              {
-                type: 'slider',
-                show: true, // 是否显示滚动条
-                borderColor: '#e3e3e3', // 边框颜色
-                showDetail: false, // 是否显示detail，即拖拽时显示详细数值信息
-                startValue: 0, // 开始数值
-                endValue: 8, // 结束数值
-                filterMode: 'empty',
-                width: '80%', // 滚动条宽度
-                height: 8, // 滚动条高度
-                left: 'center', // 居中显示
-                zoomLoxk: true, // 是否锁定选择区域的大小
-                handleSize: 0, // 控制手柄的尺寸
-                bottom: 0, // 距离容器下侧的距离
-              },
-              {
-                type: 'inside',
-                zoomOnMouseWheel: false, // 滚动不触发缩放
-                moveOnMouseMove: true, // 鼠标移动触发平移
-                moveOnMouseWheel: true, // 鼠标滚动触发平移
-              },
-            ],
-            xAxis: {
-              type: 'category',
-              data: ['AAA', 'AA', 'A', 'BBB', 'BB', 'B', 'CCC', 'CC', 'C', 'D'],
-              axisTick: {
-                alignWithLabel: true,
-              },
-            },
-            yAxis: [
-              {
-                type: 'value',
-              },
-            ],
-            series: [
-              {
-                name: '数量',
-                type: 'bar',
-                barWidth: '20%',
-                data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-              },
-            ],
-          }"
-        ></w-echarts>
+        <div class="h-full">
+          <q-splitter v-model="state.echartsSplitterModel" unit="px" horizontal disable class="w-full h-full">
+            <template #before>
+              <q-tabs v-model="state.tab" inline-label indicator-color="primary" align="left" :breakpoint="1">
+                <q-tab name="cust" icon="account_box" label="全部客户" />
+                <q-tab name="creditBalance" icon="currency_yen" label="信贷余额" />
+              </q-tabs>
+            </template>
+            <template #after>
+              <q-tab-panels
+                v-model="state.tab"
+                :keep-alive="true"
+                animated
+                swipeable
+                vertical
+                transition-prev="jump-up"
+                transition-next="jump-up"
+                class="w-full h-full"
+              >
+                <q-tab-panel name="cust" class="w-full h-full p-0">
+                  <w-echarts
+                    :option="{
+                      tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow',
+                        },
+                      },
+                      toolbox: {
+                        feature: {
+                          saveAsImage: { show: true },
+                        },
+                      },
+                      legend: {
+                        data: ['客户数', '本月新增客户数', '违约客户数', '占比', '本月新增占比', '违约占比'],
+                      },
+                      grid: {
+                        top: '15%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true,
+                      },
+                      xAxis: {
+                        type: 'category',
+                        data: state.xData,
+                        axisTick: {
+                          alignWithLabel: true,
+                        },
+                      },
+                      yAxis: [
+                        {
+                          type: 'value',
+                        },
+                        {
+                          type: 'value',
+                          interval: 10,
+                          axisLabel: {
+                            formatter: '{value} %',
+                          },
+                        },
+                      ],
+                      series: [
+                        {
+                          name: '客户数',
+                          type: 'bar',
+                          barWidth: '20%',
+                          data: state.custData.number,
+                        },
+                        {
+                          name: '占比',
+                          type: 'line',
+                          yAxisIndex: 1,
+                          data: state.custData.ratio,
+                        },
+                        {
+                          name: '本月新增客户数',
+                          type: 'bar',
+                          barWidth: '20%',
+                          data: state.custData.addNumber,
+                        },
+                        {
+                          name: '本月新增占比',
+                          type: 'line',
+                          yAxisIndex: 1,
+                          data: state.custData.addRatio,
+                        },
+                        {
+                          name: '违约客户数',
+                          type: 'bar',
+                          barWidth: '20%',
+                          data: state.custData.defaultNumber,
+                        },
+                        {
+                          name: '违约占比',
+                          type: 'line',
+                          yAxisIndex: 1,
+                          data: state.custData.defaultRatio,
+                        },
+                      ],
+                    }"
+                  ></w-echarts>
+                </q-tab-panel>
+                <q-tab-panel name="creditBalance" class="w-full h-full p-0">
+                  <w-echarts
+                    :option="{
+                      tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                          type: 'shadow',
+                        },
+                      },
+                      toolbox: {
+                        feature: {
+                          saveAsImage: { show: true },
+                        },
+                      },
+                      legend: {
+                        data: ['信贷余额', '占比'],
+                      },
+                      grid: {
+                        top: '15%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true,
+                      },
+                      xAxis: {
+                        type: 'category',
+                        data: state.xData,
+                        axisTick: {
+                          alignWithLabel: true,
+                        },
+                      },
+                      yAxis: [
+                        {
+                          type: 'value',
+                        },
+                        {
+                          type: 'value',
+                          interval: 10,
+                          axisLabel: {
+                            formatter: '{value} %',
+                          },
+                        },
+                      ],
+                      series: [
+                        {
+                          name: '信贷余额',
+                          type: 'bar',
+                          barWidth: '20%',
+                          data: state.custData.creditBalance,
+                        },
+                        {
+                          name: '占比',
+                          type: 'line',
+                          yAxisIndex: 1,
+                          data: state.custData.creditRatio,
+                        },
+                      ],
+                    }"
+                  ></w-echarts>
+                </q-tab-panel>
+              </q-tab-panels>
+            </template>
+          </q-splitter>
+        </div>
       </template>
     </q-splitter>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { useQuasar } from 'quasar';
-import { Environment, EnumTools, DictionaryTools, Options, Formater, axios, NotifyManager } from 'platform-core';
 import { Round } from '@/views/custRating/CustRating.ts';
+import { axios, Environment, Formater } from 'platform-core';
+import { useQuasar } from 'quasar';
+import { reactive, ref } from 'vue';
 
 const $q = useQuasar();
 const rptRatingDistributionGridRef = ref();
-const splitterModel = ref(60);
+const state = reactive({
+  splitterModel: 60,
+  echartsSplitterModel: 50,
+  tab: 'cust',
+  xData: <any>[],
+  custData: {
+    number: <any>[],
+    ratio: <any>[],
+    addNumber: <any>[],
+    addRatio: <any>[],
+    defaultNumber: <any>[],
+    defaultRatio: <any>[],
+    creditBalance: <any>[],
+    creditRatio: <any>[],
+  },
+});
+
+const afterRequestData = () => {
+  const rows = rptRatingDistributionGridRef.value.getRows();
+  state.xData = [];
+  state.custData.number = [];
+  state.custData.ratio = [];
+  state.custData.addNumber = [];
+  state.custData.addRatio = [];
+  state.custData.defaultNumber = [];
+  state.custData.defaultRatio = [];
+  state.custData.creditBalance = [];
+  state.custData.creditRatio = [];
+  rows.forEach((item) => {
+    state.xData.push(item['ratingLevel']);
+    state.custData.number.push(item['custCnt']);
+    state.custData.ratio.push(item['custRatio'] && typeof item['custRatio'] === 'number' ? Round(item['custRatio'] * 100, 2) : 0);
+    state.custData.addNumber.push(item['currInctCnt']);
+    state.custData.addRatio.push(item['currInctRatio'] && typeof item['currInctRatio'] === 'number' ? Round(item['currInctRatio'] * 100, 2) : 0);
+    state.custData.defaultNumber.push(item['defCustCnt']);
+    state.custData.defaultRatio.push(item['defCustRatio'] && typeof item['defCustRatio'] === 'number' ? Round(item['defCustRatio'] * 100, 2) : 0);
+    state.custData.creditBalance.push(item['borrBal']);
+    state.custData.creditRatio.push(item['borrBalRatio'] && typeof item['borrBalRatio'] === 'number' ? Round(item['borrBalRatio'] * 100, 2) : 0);
+  });
+};
 
 const rptRatingDistributionGrid = {
   buttons: [
@@ -173,7 +319,7 @@ const rptRatingDistributionGrid = {
     },
   ],
   columns: [
-    { label: '<span>评级</span><br/>等级', name: 'ratingLevel', align: 'center' },
+    { label: '评级等级', name: 'ratingLevel', align: 'center' },
     {
       label: '全部客户',
       name: 'totalCustHeader',