new_irbs/irbs.frontend/src/views/report/RptRatingIndustryFocusDist.vue

<template>
  <div class="h-full">
    <q-splitter v-model="state.splitterModel" horizontal class="h-full">
      <template #before>
        <w-grid
          ref="rptRatingIndustryFocusDistGridRef"
          title="客户评级行业集中度分布报表"
          :data-url="Environment.apiContextPath('api/irbs/rptRatingIndustryFocusDist/list')"
          :sort-no="true"
          :checkbox-selection="false"
          :query-form-cols-num="4"
          :query-form-fields="rptRatingIndustryFocusDistGrid.queryFormFields"
          :columns="rptRatingIndustryFocusDistGrid.tableColumns"
          :toolbar-actions="rptRatingIndustryFocusDistGrid.buttons"
          :pageable="false"
          :dense="true"
          @after-request-data="afterRequestData"
        ></w-grid>
      </template>
      <template #after>
        <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="ratio" icon="timelapse" 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: state.legendData,
                      },
                      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, // 鼠标滚动触发平移
                        },
                      ],
                      grid: {
                        top: '15%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                      },
                      xAxis: {
                        type: 'category',
                        data: state.xData,
                        axisLabel: {
                          //x轴文字的配置
                          show: true,
                          interval: 0, //使x轴文字显示全
                          rotate: 10,
                        },
                        axisTick: {
                          alignWithLabel: true,
                        },
                      },
                      yAxis: [
                        {
                          type: 'value',
                        },
                        // {
                        //   type: 'value',
                        //   interval: 10,
                        //   axisLabel: {
                        //     formatter: '{value} %',
                        //   },
                        // },
                      ],
                      series: state.seriesData,
                    }"
                  ></w-echarts>
                </q-tab-panel>
                <q-tab-panel name="ratio" class="w-full h-full p-0">
                  <w-echarts
                    :option="{
                      tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                          type: 'shadow',
                        },
                      },
                      toolbox: {
                        feature: {
                          saveAsImage: { show: true },
                        },
                      },
                      legend: {
                        data: state.ratioSeriesData,
                      },
                      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, // 鼠标滚动触发平移
                        },
                      ],
                      grid: {
                        top: '15%',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                      },
                      xAxis: {
                        type: 'category',
                        data: state.xData,
                        axisLabel: {
                          //x轴文字的配置
                          show: true,
                          interval: 0, //使x轴文字显示全
                          rotate: 10,
                        },
                        axisTick: {
                          alignWithLabel: true,
                        },
                      },
                      yAxis: [
                        {
                          type: 'value',
                          interval: 10,
                          axisLabel: {
                            formatter: '{value} %',
                          },
                        },
                      ],
                      series: state.ratioSeriesData,
                    }"
                  ></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, RatioFormat } from '@/views/custRating/CustRating.ts';

const rptRatingIndustryFocusDistGridRef = ref();

const state = reactive({
  splitterModel: 55,
  echartsSplitterModel: 50,
  tab: 'cust',
  legendData: <any>[],
  xData: <any>[],
  seriesData: <any>[],
  ratioLegendData: <any>[],
  ratioSeriesData: <any>[],
});

const afterRequestData = (data) => {
  if (data && data.length > 0) {
    state.xData = [];
    state.seriesData = [];
    state.legendData = [];
    state.ratioSeriesData = [];
    const ratingLevel = <any>[];
    const totalData = {};
    for (let i = 1; i < rptRatingIndustryFocusDistGrid.tableColumns.length; i++) {
      ratingLevel.push([
        rptRatingIndustryFocusDistGrid.tableColumns[i]['label'],
        [rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][0]['name'], rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][1]['name']],
      ]);
      totalData[rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][0]['name']] = [];
      totalData[rptRatingIndustryFocusDistGrid.tableColumns[i]['columns'][1]['name']] = [];
    }
    data.forEach((item) => {
      state.xData.push(item['industryName']);

      Object.keys(totalData).forEach((key) => {
        if (key.indexOf('Ratio') > -1) {
          totalData[key].push(item[key] && typeof item[key] === 'number' ? Round(item[key] * 100, 2) : 0);
        } else {
          totalData[key].push(item[key] ? item[key] : 0);
        }
      });
    });
    ratingLevel.forEach((item) => {
      const cntSerie = {
        name: item[0] + '客户数',
        emphasis: {
          focus: 'series',
        },
        type: 'bar',
        barWidth: '5%',
        data: totalData[item[1][0]],
      };
      state.seriesData.push(cntSerie);
      state.legendData.push(item[0] + '客户数');
      const ratioSerie = { name: item[0] + '占比', type: 'line', data: totalData[item[1][1]] };
      state.ratioSeriesData.push(ratioSerie);
      state.ratioLegendData.push(item[0] + '占比');
    });
  }
};

const rptRatingIndustryFocusDistGrid = {
  buttons: [
    {
      extend: 'query',
      click: () => {
        const QueryParams = rptRatingIndustryFocusDistGridRef.value.getQueryForm().getData();
        axios.get(Environment.apiContextPath('api/irbs/rptRatingIndustryFocusDist/list'), { params: QueryParams }).then((resp) => {
          rptRatingIndustryFocusDistGridRef.value.setLocalData(resp.data);
        });
      },
    },
    'reset',
    'separator',
    'export',
    'separator',
  ],
  queryFormFields: [
    { label: '报表日期', name: 'ratingMonth', type: 'date', defaultValue: '2023-07-01' },
    {
      label: '模型敞口',
      name: 'modelCode',
      type: 'select',
      options: [
        { value: 'WHM1', label: '政府投融资平台' },
        { value: 'WHM2', label: '事业单位' },
        { value: 'WHM3', label: '银行类金融机构' },
        { value: 'WHM41', label: '金融租赁与消费金融公司' },
        { value: 'WHM42', label: '证券公司' },
        { value: 'WHM43', label: '其他非银行金融机构' },
        { value: 'WHM44', label: '基金公司' },
        { value: 'WHM5', label: '新建企业' },
        { value: 'WHM6', label: '综合性集团' },
        { value: 'WHM7', label: '大型其他行业' },
        { value: 'WHM8', label: '中小微其他行业' },
        { value: 'WHM9', label: '大中型租赁和商务服务行业' },
        { value: 'WHM10', label: '小微租赁和商务服务业' },
        { value: 'WHM12', label: '房地产业' },
        { value: 'WHM13', label: '大中型农林牧渔业' },
        { value: 'WHM14', label: '小微农林牧渔业' },
        { value: 'WHM15', label: '大型建筑业' },
        { value: 'WHM16', label: '中小微建筑业' },
        { value: 'WHM17', label: '大中型制造业' },
        { value: 'WHM18', label: '小微制造业' },
        { value: 'WHM19', label: '大中型批发和零售业' },
        { value: 'WHM20', label: '小微批发和零售业' },
        { value: 'WHM22', label: '科技行业' },
      ],
    },
    {
      label: '分支机构',
      name: 'managerOrgCode',
      type: 'select',
      options: [
        { value: '01002', label: '总行营业部' },
        { value: '01003', label: 'JJJS开发区支行' },
        { value: '01005', label: 'XF支行' },
        { value: '01006', label: 'GCZ支行' },
        { value: '01007', label: 'ZL支行' },
        { value: '01008', label: 'HKJ支行' },
        { value: '01009', label: 'HL支行' },
        { value: '01010', label: 'LJ支行' },
        { value: '01012', label: 'GG分行' },
        { value: '01013', label: 'ZY支行' },
        { value: '01014', label: 'ZD支行' },
        { value: '01015', label: 'HK支行' },
        { value: '01016', label: 'DS支行' },
        { value: '01017', label: 'LF支行' },
        { value: '01018', label: 'GS支行' },
        { value: '01019', label: 'LX支行' },
        { value: '01020', label: 'BX支行' },
        { value: '01021', label: 'ZQ支行' },
        { value: '01022', label: 'JF支行' },
        { value: '01023', label: 'CC支行' },
        { value: '01024', label: 'LQ支行' },
        { value: '01025', label: 'DH支行' },
        { value: '01027', label: 'SGH支行' },
      ],
    },
  ],
  tableColumns: [
    { label: '所属行业', name: 'industryName', align: 'left' },
    {
      name: 'AAA+',
      label: 'AAA+',
      columns: [
        { label: '客户数', name: 'aaaPlusCnt', align: 'center' },
        { label: '占比', name: 'aaaPlusRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'AAA',
      label: 'AAA',
      columns: [
        { label: '客户数', name: 'aaaCnt', align: 'center' },
        { label: '占比', name: 'aaaRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'AA+',
      label: 'AA+',
      columns: [
        { label: '客户数', name: 'aaPlusCnt', align: 'center' },
        { label: '占比', name: 'aaPlusRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'AA',
      label: 'AA',
      columns: [
        { label: '客户数', name: 'aaCnt', align: 'center' },
        { label: '占比', name: 'aaRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'AA-',
      label: 'AA-',
      columns: [
        { label: '客户数', name: 'aaMinusCnt', align: 'center' },
        { label: '占比', name: 'aaMinusRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'A+',
      label: 'A+',
      columns: [
        { label: '客户数', name: 'aPlusCnt', align: 'center' },
        { label: '占比', name: 'aPlusRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'A',
      label: 'A',
      columns: [
        { label: '客户数', name: 'aCnt', align: 'center' },
        { label: '占比', name: 'aRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'A-',
      label: 'A-',
      columns: [
        { label: '客户数', name: 'aMinusCnt', align: 'center' },
        { label: '占比', name: 'aMinusRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'BBB',
      label: 'BBB',
      columns: [
        { label: '客户数', name: 'bbbCnt', align: 'center' },
        { label: '占比', name: 'bbbRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'BB',
      label: 'BB',
      columns: [
        { label: '客户数', name: 'bbCnt', align: 'center' },
        { label: '占比', name: 'bbRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'B',
      label: 'B',
      columns: [
        { label: '客户数', name: 'bCnt', align: 'center' },
        { label: '占比', name: 'bRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'CCC',
      label: 'CCC',
      columns: [
        { label: '客户数', name: 'cccCnt', align: 'center' },
        { label: '占比', name: 'cccRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'CC',
      label: 'CC',
      columns: [
        { label: '客户数', name: 'ccCnt', align: 'center' },
        { label: '占比', name: 'ccRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'C',
      label: 'C',
      columns: [
        { label: '客户数', name: 'cCnt', align: 'center' },
        { label: '占比', name: 'cRatio', align: 'center', format: RatioFormat },
      ],
    },
    {
      name: 'D',
      label: 'D',
      columns: [
        { label: '客户数', name: 'dCnt', align: 'center' },
        { label: '占比', name: 'dRatio', align: 'center', format: RatioFormat },
      ],
    },
  ],
};
</script>