front / ningxia-credit-web · Files

<template>
  <div class="body_wrap">
    <div class="w80">
      <div class="common_con mb10">
        <el-row :gutter="40">
          <el-col :span="2" style="position: relative">
            <div class="col_title title_color_0" v-if="state.enterpriseInfo.name">
              <div>{{state.enterpriseInfo.name.substring(0, 2)}}</div>
              <div>{{state.enterpriseInfo.name.substring(2, 4)}}</div>
            </div>
          </el-col>
          <el-col :span="21">
            <!--企业信息模块-->
            <el-descriptions :column="4">
              <template v-for="col in state.columnsList">
                <el-descriptions-item v-if="col.prop != 'regStatus'" :label="col.label">
                  <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>
              <template #title>
                <div class="mb10">
                  {{state.enterpriseInfo.name}}
                  <el-tag class="ml20" type="success">{{state.enterpriseInfo.status}}</el-tag>
                </div>
                <!--        <div>
                          <el-tag class="mr10" type="info" v-for="tag in state.enterpriseInfo.tags" size="small">{{tag}}</el-tag>
                        </div>-->
              </template>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="w80">
      <div class="common_con mb10">
        <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 v-for="item in state.creditAnalysis" class="analyst_content">{{item.name}}：{{item.value}}</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="common_con mb10">
        <el-row :gutter="40">
          <el-col :span="10">
            <div id="levelId" style="width: 100%; height: 400px"></div>
          </el-col>
          <el-col :span="14" style="display: flex; align-items: center">
            <div style="width: 100%">
              <el-row style="text-align: center">
                <el-col :span="8">
                  <div style="float: left">
                    <div style="font-size: 40px">{{state.creditDataInfo.creditLv}}</div>
                    <div>信用级别</div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div style="font-size: 40px">
                    {{state.creditDataInfo.creditLimitLast}}
                    <span style="font-size: 20px" class="mr10">万元</span>
                    <el-button circle type="primary" icon="Bottom" @click="handleAdd('reduceQuotaOpen', '下调额度')"></el-button>
                  </div>
                  <div>
                    <span class="mr10" style="">建议授信额度</span>
                  </div>
                </el-col>
              </el-row>
              <div class="mt20 mb20">
                等级释义：{{state.creditDataInfo.creditRemark}}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="common_con mb10">
        <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 class="common_con" style="text-align: center">
        <el-tag type="danger" v-if="state.creditDataInfo.creditLimitAdd !== null && state.creditDataInfo.creditLimitAdd > 0">
          您存在审核中的增加额度申请
        </el-tag>
        <el-tag type="success" v-if="state.creditDataInfo.creditLimitAdd < 0">
          您的申请增加额度请求审核通过
        </el-tag>
      </div>
    </div>

    <div class="w80">
      <div style="margin: 50px 0 80px; text-align: center">
        <el-button size="large" @click="handleUp">重新测算</el-button>
        <el-button plain size="large" type="primary" @click="handleAdd('changeQuotaOpen', '调增授信额度申请')">申请增加授信额度</el-button>
        <el-button type="primary" size="large" v-if="isHaveButton('front:getCreditReport')" :loading="state.isSubmit" @click="handleSubmit">生成授信报告</el-button>
      </div>
    </div>
  </div>

  <change-quota :title="state.title" :open="state[state.dialogNameOpen]" :open-name="state.dialogNameOpen" @handleClose="handleClose" :rowInfo="state.creditDataInfo"></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';
  import router from "../../router";
  import { creditInfo } from './../../store/index'
  let creditInfoAct = creditInfo()
  import { storeToRefs } from 'pinia';
  import {isHaveButton} from "../../utils/until.ts";
  let { getCreditId } = storeToRefs(creditInfoAct)

  let state = reactive({
    enterpriseInfo: {},
    columnsList: [{
      label: "法定代表人",
      prop: "operName"
    }, {
      label: "注册资本",
      prop: "registCapiNew"
    }, {
      label: "成立日期",
      prop: "startDate",
    }, {
      label: "注册地址",
      prop: "address"
    }],
    isSubmit: false,
    changeQuotaOpen: false,
    reduceQuotaOpen: false,
    dialogNameOpen: "",
    searchName: "",
    creditAnalysis: [],
    creditDataInfo: {},
    title: ""
  })

  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: 1 },
            { text: '基本素质', max: 1 },
            { text: '高管素质', max: 1 },
            { text: '经营稳定性', max: 1 },
            { text: '财务状况', max: 1 },
          ],
          center: ['50%', '50%'],
          radius: 120,
          axisName: {
            color: '#fff',
            backgroundColor: '#666',
            borderRadius: 3,
            padding: [3, 5]
          }
        }
      ],
      series: [
        {
          type: 'radar',
          data: [
            {
              value: [0, 0, 0, 0, 0],
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);

  }

  let levelId = () => {

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

    option = {
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          radius: 180,
          center: ['50%', '65%'],
          axisLine: {
            show: true,
            lineStyle: {
              width: 30,
              color: [[0.3, '#E63929'], [0.5, '#F7860E'], [0.7, '#EBD31B'], [0.9, '#91D02A'], [1.0, '#4AA941']]
            }
          },
          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: 36,
            fontSize: 16
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}',
            offsetCenter: [0, '40%'],
            color: 'inherit'
          },
          data: [
            {
              value: 0,
              name: "总分"
            }
          ]
        }
      ]
    };

    option && myChart.setOption(option);

  }

  const route = useRoute();


  let handleUp = () => {
    router.push('/addCredit?name=' + state.creditDataInfo.ename)
  }

  let handleAdd = (name: string, dialogTitle: string) => {
    state[name] = true
    state.dialogNameOpen = name
    state.title = dialogTitle
  }

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

  let handleSubmit = () => {
    if (state.creditDataInfo.creditLimitAdd !== null && state.creditDataInfo.creditLimitAdd > 0) {
      ElMessage.error("您存在审核中的增加额度申请")
    } else {
      let cgId = localStorage.getItem("creditId")
      state.isSubmit = true
      api.submitDataGet({cgId: cgId}, "/web/creditGrantingInfo/genPdf").then((res: any)=> {
        state.isSubmit = false
        ElMessage.success("操作成功")
        router.push("/creditDetail?name=" + state.creditDataInfo.ename)
        window.open(res.data.url,"_blank")
      }).finally(()=> {
        state.isSubmit = false
      })
    }
    // router.push('/creditReportView?name=' + state.searchName)
  }

  let getCreditResult = () => {
    // let cgId = getCreditId.value
    let cgId = localStorage.getItem('creditId')
    // let cgId = 78
    api.getInfoList({cgId: cgId}, '/web/creditGrantingInfo/getCreditResult').then((res: any)=> {
      state.creditAnalysis = JSON.parse(res.data.creditAnalysis)
      state.creditDataInfo = res.data

      /*if (state.creditDataInfo.creditReport) {
        router.push("/creditDetail?name=" + state.creditDataInfo.ename)
      }*/

      let radarData: any = []
      let radarTitleData: any = []
      state.creditAnalysis.forEach((item: object)=> {
        radarTitleData.push({text: item.name, max: 1})
        radarData.push(item.scoreRate)
      })
      let myChart = echarts.init(document.getElementById("enterpriseAnalystId"))
      myChart.setOption({
        radar: [
          {
            indicator: radarTitleData
          }
        ],
        series:[{
          data: [
            {
              value: radarData,
              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
                  }
                ])
              }
            }
          ]
        }]
      })
      myChart.resize()

      let levelChart = echarts.init(document.getElementById("levelId"))
      levelChart.setOption({
        series:[{
          data: [
            {
              value: state.creditDataInfo.comprehensiveRate,
              name: "总分"
            }
          ]
        }]
      })
      levelChart.resize()
    })
  }

  onMounted(()=> {
    state.searchName = route.query.name
    getBaseInfo()
    // 图1
    enterpriseRadarInit()
    // 图2
    levelId()
    // 获取结果
    getCreditResult()
  })

</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;
}
</style>