front / ningxia-credit-web · Files

<template>
  <div class="body_wrap">
    <div class="w80">
      <div class="common_con mb10">
        <!--企业信息模块-->
        <div class="apply_title">{{state.enterpriseInfo.name}}授信申请报告</div>

        <div class="model_wrap">
          <div class="model_title">
            <el-icon class="mr10" size="24px"><Bell /></el-icon>
            <span>企业基本信息</span>
          </div>
          <el-descriptions :column="2" border>
            <template v-for="col in state.columnsList">
              <el-descriptions-item :label="col.label" :span="col.span" width="100px">
                <template v-if="col.prop.indexOf(',') > -1">
                  {{state.enterpriseInfo[col.prop.split(',')[0]] + '至' + state.enterpriseInfo[col.prop.split(',')[1]]}}
                </template>
                <template v-else-if="col.type && col.type === 'date'">
                  {{DateUtil.formatDate(state.enterpriseInfo[col.prop])}}
                </template>
                <template v-else>
                  {{contentFormat(state.enterpriseInfo[col.prop])}}
                </template>
              </el-descriptions-item>
            </template>
          </el-descriptions>
        </div>

        <div class="model_wrap">
          <div class="model_title">
            <el-icon class="mr10" size="24px"><Bell /></el-icon>
            <span>评级信息</span>
          </div>
          <el-card shadow="never">
            <el-row :gutter="40">
              <el-col :span="12">
                <div id="enterpriseAnalystId" style="width: 100%; height: 400px"></div>
              </el-col>
              <el-col :span="12" style="display: flex; align-items: center">
                <div>
                  <h3>企业各维度分析：</h3>
                  <div class="analyst_content">成长性：此处是企业成长性维度的相关描述性话术。</div>
                  <div class="analyst_content">成长性：此处是企业成长性维度的相关描述性话术。</div>
                  <div class="analyst_content">成长性：此处是企业成长性维度的相关描述性话术。</div>
                  <div class="analyst_content">成长性：此处是企业成长性维度的相关描述性话术。</div>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="40">
              <el-col :span="12">
                <div id="levelId" style="width: 100%; height: 400px"></div>
              </el-col>
              <el-col :span="12" style="display: flex; align-items: center">
                <el-row>
                  <el-col :span="24">
                    <div style="font-size: 20px"><span style="font-size: 14px">信用级别：</span>A</div>
                  </el-col>
                  <el-col :span="24">
                    <div style="font-size: 20px"><span style="font-size: 14px">建议授信额度：</span>3200<span style="font-size: 20px">万元</span></div>
                  </el-col>
                  <el-col :span="24">
                    <div style="font-size: 20px"><span style="font-size: 14px">测评有效期：</span>3200<span style="font-size: 20px">万元</span></div>
                  </el-col>
                  <el-col :span="24">
                    <div style="font-size: 20px"><span style="font-size: 14px">等级释义：</span>目标公司信用良好，目前往来交易无问题。</div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </div>

        <div class="model_wrap">
          <div class="model_title">
            <el-icon class="mr10" size="24px"><Bell /></el-icon>
            <span>财务信息</span>
          </div>

          <el-table :data="[]" border class="own_table">
            <el-table-column v-for="item in state.financialData" :label="item.label" :prop="item.prop"></el-table-column>
          </el-table>
        </div>

        <div class="model_wrap">
          <div class="model_title">
            <el-icon class="mr10" size="24px"><Bell /></el-icon>
            <span>公共记录</span>
          </div>

          <div class="table_wrap" v-for="item in state.modelTableList">
            <div class="table_title">
              {{item.modelTitle}}
            </div>
            <el-table :data="[]" border class="own_table">
              <el-table-column v-for="item in state.financialData" :label="item.label" :prop="item.prop"></el-table-column>
            </el-table>
          </div>

        </div>

        <div class="model_wrap">
          <div class="model_title">
            <el-icon class="mr10" size="24px"><Bell /></el-icon>
            <span>授信补充信息</span>
          </div>

          <div class="table_wrap">
            <div class="table_title">
              抵押物信息
            </div>
            <el-table :data="[]" border class="own_table">
              <el-table-column v-for="item in state.financialData" :label="item.label" :prop="item.prop"></el-table-column>
            </el-table>
          </div>

          <div class="table_wrap">
            <div class="table_title">
              担保信息
            </div>
            <el-table :data="[]" border class="own_table">
              <el-table-column v-for="item in state.financialData" :label="item.label" :prop="item.prop"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <div class="common_con">
        <div style="padding: 30px 50px">
          <h3>企业授信智能测算说明</h3>
          <div class="mb10">1、联合信用征信根据历史交易数据、企业特征、历史账期、历史履约情况、企业征信数据等大数据进行企业授信额度计算；</div>
          <div class="mb10">2、运用创新研发的预测模型计算企业授信额度，样本数据符合率高达90%以上；</div>
          <div class="mb10">3、计算出的企业授信额度仅供参考，不代表任何商业担保或承诺。</div>
        </div>
      </div>
    </div>

    <div class="w80">
      <div style="margin: 50px 0 80px; text-align: center">
        <el-button type="primary" size="large" :loading="state.isSubmit" @click="handleSubmit">下载授信报告</el-button>
      </div>
    </div>
  </div>

  <change-quota title="调增授信额度申请" :open="state.changeQuotaOpen" open-name="changeQuotaOpen" @handleClose="handleClose"></change-quota>
</template>

<script setup lang="ts">
  import DateUtil from "../../utils/date.js";
  import * as api from "../../interface/api.ts";
  import * as echarts from 'echarts';

  let state = reactive({
    enterpriseInfo: {},
    columnsList: [
      {
        label: "企业名称",
        prop: "name"
      },{
        label: "法定代表人",
        prop: "legalPersonName"
      }, {
        label: "注册资本",
        prop: "regCapital"
      }, {
        label: "成立日期",
        prop: "estiblishTime",
        type: 'date'
      }, {
        label: "企业性质",
        prop: "regCapital"
      }, {
        label: "企业类型",
        prop: "regCapital"
      }, {
        label: "注册地址",
        prop: "regLocation",
        span: 2,
      }, {
        label: "经营范围",
        prop: "businessScope",
        span: 2,
      }
    ],
    isSubmit: false,
    changeQuotaOpen: false,
    financialData: [
      {
        label: '年份',
        prop: 'year'
      }, {
        label: '资产总计',
        prop: 'year'
      },
    ],
    modelTableList: [
      {
        modelTitle: '股权出质'
      },
      {
        modelTitle: '民事案件'
      }
    ],
    searchName: "",
  })

  let contentFormat = (content: any) => {
    if (content === undefined) {
      return "--"
    } else if (typeof content === 'string' && content.indexOf("[{") > -1) {
      let json = JSON.parse(content)
      let temp: any = []
      json.forEach((item: object) => {
        temp.push(JSON.stringify(item))
      })
      return temp.join(",")
    }
    return content
  }

  let getBaseInfo = () => {
    api.getBaseInfo({name: state.searchName}).then((res: any)=> {
      if (res) {
        state.enterpriseInfo = Object.assign( {}, res.data)
      }
    })
  }

  let enterpriseRadarInit = () => {
    var chartDom = document.getElementById('enterpriseAnalystId');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      color: ['#FF917C'],
      legend: {},
      radar: [
        {
          indicator: [
            { text: '资本背景', max: 150 },
            { text: '成长性', max: 150 },
            { text: '企业规模', max: 150 },
            { text: '风险状况', max: 120 },
            { text: '经营质量', max: 108 },
          ],
          center: ['50%', '50%'],
          radius: 120,
          axisName: {
            color: '#fff',
            backgroundColor: '#666',
            borderRadius: 3,
            padding: [3, 5]
          }
        }
      ],
      series: [
        {
          type: 'radar',
          data: [
            {
              value: [100, 93, 50, 90, 70],
              areaStyle: {
                color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                  {
                    color: 'rgba(255, 145, 124, 0.1)',
                    offset: 0
                  },
                  {
                    color: 'rgba(255, 145, 124, 0.9)',
                    offset: 1
                  }
                ])
              }
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);

  }

  let levelId = () => {

    var chartDom = document.getElementById('levelId');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#67e0e3'],
                [0.7, '#37a2da'],
                [1, '#fd666d']
              ]
            }
          },
          pointer: {
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            distance: -30,
            length: 8,
            lineStyle: {
              color: '#fff',
              width: 2
            }
          },
          splitLine: {
            distance: -30,
            length: 30,
            lineStyle: {
              color: '#fff',
              width: 4
            }
          },
          axisLabel: {
            color: 'inherit',
            distance: 40,
            fontSize: 20
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}',
            color: 'inherit'
          },
          data: [
            {
              value: 70
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);

  }

  const route = useRoute();

  let handleCancel = () => {

  }

  let handleAdd = (name: string) => {
    state[name] = true
  }

  let handleClose = (name: string, value: boolean, isRefresh: boolean) => {
    state[name] = value
  }

  let handleSubmit = () => {

  }

  onMounted(()=> {
    state.searchName = route.query.name
    getBaseInfo()
    enterpriseRadarInit()
    levelId()
  })

</script>

<style scoped>
.col_title {
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  font-size: 22px;
  padding: 5px;
  position: absolute;
  right: 0;
  div {
    letter-spacing: 10px;
    padding-left: 10px;
  }
  &.title_color_0, &.title_color_5 {
    background-color: #93BBF2;
  }
  &.title_color_1, &.title_color_6 {
    background-color: #93DDF2;
  }
  &.title_color_2, &.title_color_7 {
    background-color: #B693F2;
  }
  &.title_color_3, &.title_color_8 {
    background-color: #F6AEAE;
  }
  &.title_color_4, &.title_color_9 {
    background-color: #EEC5AB;
  }
}
.analyst_content {
  margin-bottom: 10px;
}

.apply_title {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding: 50px 0 80px;
}

.model_wrap {
  margin-bottom: 40px;
}

.model_title {
  display: flex;
  margin-bottom: 20px;
  font-size: 20px;
}

.table_wrap {
  padding-bottom: 30px;
}

.table_title {
  text-align: center;
  padding-bottom: 20px;
}
</style>