极速版

zhouhailu

2021-03-01 a1233e83a388bba42073ab22a494e3823dbe1a42

极速版

 src/router/routers.js

@@ -181,6 +181,17 @@
    component: Main,
    children: [
      {
        path: '/EvaluationResultPage',
        name: 'EvaluationResultPage',
        meta: {
          notCache: true,
          hideInMenu: true,
          icon: 'custom custom-fenxi',
          title: '违约率与RAROC分析'
        },
        component: () => import('@/view/accessReport/EvaluationResultPage.vue')
      },
      {
        path: '/accessReportList',
        name: 'accessReportList',
        meta: {

 src/view/accessReport/EvaluationResultPage.vue

New file
@@ -0,0 +1,723 @@
<template>
  <div style="min-width: 1000px;position: relative;">
    <Spin v-if="loading" fix>
      <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
      <div>Loading</div>
    </Spin>
    <showProjectMessage v-if="isShowProjectMessage"></showProjectMessage>
    <div>
      <Card style="margin-top: 12px;">
        <div class="customTitle">
          <Icon custom="custom custom-fenxi"></Icon>
          违约率分析
        </div>
        <span style="float: right;margin-top: -30px">
             <Button  icon="md-arrow-back"
                      type="primary"
                      size="large"
                       @click="creatAssessBack">返回</Button>
          </span>
      </Card>
      <Card style="margin-top: 12px;position: relative;">
        <!--<Card>-->
          <!--<div>-->
            <!--<Icon v-if="customIcon == 'custom custom-quxiao'" custom="custom custom-quxiao"-->
                  <!--style="color: #ed4014;margin-right: 6px;"></Icon>-->
            <!--<Icon v-else custom="custom custom-jinru" style="color: #2d8cf0;margin-right: 6px;"></Icon>-->
            <!--<div v-html="tips" style="display: inline-block;"></div>-->
            <!--<Button type="primary" custom-icon="custom custom-kaishifenxi"-->
                    <!--:disabled="!status"-->
                    <!--@click="getList(false)"-->
                    <!--style="margin-left: 10px;">开始分析-->
            <!--</Button>-->
            <!--<Button v-show="showButton"-->
                    <!--type="primary"-->
                    <!--custom-icon="custom custom-chakan"-->
                    <!--@click="projCacuStatusModal = true"-->
                    <!--style="margin-left: 10px;">查看进度-->
            <!--</Button>-->
          <!--</div>-->
        <!--</Card>-->
        <div style="position: relative;">
          <div style="position: absolute;right: 0;top: 11px;z-index: 7;">
            <span>生成时间 : </span>
            <span v-show="pageType == 'page1'">{{page1Msg.dateTime ? page1Msg.dateTime : '--'}}</span>
            <span v-show="pageType == 'page2'">{{page2Msg.dateTime ? page2Msg.dateTime : '--'}}</span>
          </div>
          <Tabs v-model="pageType" type="card" style="margin-top:0px;">
            <TabPane name="page1" label="违约率分析">
              <ul class="lists_readAndEdit clearfix" style="margin-top: 0;margin-bottom: 12px;">
                <div style="width: 50%;float: left;">
                  <li class="list"
                      style="width: 400px;padding-left:210px;height: 40px;line-height: 40px;margin: 10px auto 0;float: none;">
                  <span class="list_name" style="top:0;width: 180px;">
                    <Icon custom="custom custom-jine" style="color: #2d8cf0;font-size: 26px;margin-right: 10px;"></Icon>
                    综合预期损失金额(元)
                  </span>
                    <span style="font-size: 20px;color: #2d8cf0;">{{page1Msg.echartsData && page1Msg.echartsData[0] ? CustomMethods.numTo$(page1Msg.echartsData[0].value) : '--'}}</span>
                  </li>
                </div>
                <div style="width: 50%;float: left;">
                  <li class="list"
                      style="width: 300px;padding-left:195px;height: 40px;line-height: 40px;margin: 10px auto 0;float: none;">
                  <span class="list_name" style="top:0;width: 165px;">
                    <Icon custom="custom custom-sunshi"
                          style="color: #bb6a56;font-size: 26px;margin-right: 10px;"></Icon>
                    综合预期损失率(%)
                  </span>
                    <span style="font-size: 20px;color: #bb6a56;">{{page1Msg.echartsData && page1Msg.echartsData[1] ? CustomMethods.numTo$(page1Msg.echartsData[1].value) : '--'}}</span>
                  </li>
                </div>
              </ul>
              <Table v-show="pageType == 'page1'" border :columns="page1Msg.thead" :data="page1Msg.list" border></Table>
            </TabPane>
            <!--<TabPane name="page2" label="RAROC分析">-->
              <!--<Table v-show="pageType == 'page2'" border :columns="page2MsgColumns" :data="page2Msg.list"-->
                     <!--border></Table>-->
            <!--</TabPane>-->
          </Tabs>
        </div>
      </Card>
    </div>
    <!--分析-->
    <Modal
      v-model="projCacuStatusModal"
      id="projCacuStatusModal"
      footer-hide
      :mask-closable="false"
      class-name="vertical-center-modal"
      width="900">
      <div slot="header" style="font-size: 30px;font-weight:600;color: #2d8cf0;text-align: center;margin-top: 20px;">
        维优风控智能决策引擎
      </div>
      <div>
        <div class="clearfix" style="width: 100%;margin-top: 20px;padding-left: 26px;">
          <div class="selectedItemBox itemBox">
            <div class="circleBox">
              <div class="circle">
                <Icon class="icon" custom="custom custom-kaishifenxi1" size="36"/>
              </div>
            </div>
            <div class="bottomBox">
              <div class="verticaLine"></div>
              <div class="clearfix lineBox">
                <div class="leftLine1"></div>
                <div :class="stuate > 0 ? 'selectedRightLine1 rightLine':'rightLine'"></div>
                <div class="point">1</div>
              </div>
            </div>
            <div class="title">
              开始分析
            </div>
          </div>
          <div :class="stuate > 0 ? 'selectedItemBox itemBox':'itemBox'">
            <div class="circleBox">
              <div class="circle">
                <Icon class="icon" custom="custom custom-yewushuju" size="36"/>
              </div>
            </div>
            <div class="bottomBox">
              <div class="verticaLine"></div>
              <div class="clearfix lineBox">
                <div class="leftLine2"></div>
                <div :class="stuate > 1 ? 'selectedRightLine2 rightLine':'rightLine'"></div>
                <div class="point">2</div>
              </div>
            </div>
            <div class="title">
              业务数据
            </div>
          </div>
          <div :class="stuate > 1 ? 'selectedItemBox itemBox':'itemBox'">
            <div class="circleBox">
              <div class="circle">
                <Icon class="icon" custom="custom custom-fenximoxing" size="36"/>
              </div>
            </div>
            <div class="bottomBox">
              <div class="verticaLine"></div>
              <div class="clearfix lineBox">
                <div class="leftLine3"></div>
                <div :class="stuate > 2 ? 'selectedRightLine3 rightLine':'rightLine'"></div>
                <div class="point">3</div>
              </div>
            </div>
            <div class="title">
              分析模型
            </div>
          </div>
          <div :class="stuate > 2 ? 'selectedItemBox itemBox':'itemBox'">
            <div class="circleBox">
              <div class="circle">
                <Icon class="icon" custom="custom custom-juecejieguo" size="36"/>
              </div>
            </div>
            <div class="bottomBox">
              <div class="verticaLine"></div>
              <div class="clearfix lineBox">
                <div class="leftLine4"></div>
                <div :class="stuate > 3 ? 'selectedRightLine4 rightLine':'rightLine'"></div>
                <div class="point">4</div>
              </div>
            </div>
            <div class="title">
              决策结果
            </div>
          </div>
          <div :class="stuate > 3 ? 'selectedItemBox itemBox':'itemBox'">
            <div class="circleBox">
              <div class="circle">
                <Icon class="icon" custom="custom custom-wanchengfenxi" size="36"/>
              </div>
            </div>
            <div class="bottomBox">
              <div class="verticaLine"></div>
              <div class="clearfix lineBox">
                <div class="leftLine5"></div>
                <div :class="stuate > 3 ? 'selectedRightLine5 rightLine':'rightLine'"></div>
                <div class="point">5</div>
              </div>
            </div>
            <div class="title">
              完成分析
            </div>
          </div>
        </div>
        <div style="font-size: 20px;text-align: center;margin-top: 20px;margin-bottom: 20px;">
          <Icon v-if="customIcon == 'custom custom-pinggu'" class="icon demo-spin-icon-load" type="ios-loading"
                size="24"
                style="color:#64a1f6;"/>
          <Icon v-else class="icon" :custom="customIcon" size="24" :style="{color:iconColor}"/>
          {{modalTips}}
          <span v-if="closeTip" style="color: #2d8cf0;">{{closeTip}}</span>
          <span v-if="closeTip">秒后自动关闭</span>
        </div>
      </div>
    </Modal>
    <!--分析-->
  </div>
</template>

<script>
  import axios from '@/libs/api.request'
  import showProjectMessage from '@/view/components/customs/showProjectMessageC.vue'
  import $ from 'jquery'
  import {mapActions, mapMutations} from 'vuex'

  export default {
    name: 'app',
    components: {
      showProjectMessage,

    },
    data () {
      return {
        ProjId: 1,//项目Id
        pageType: 'page1',//页面类型
        loading: true,//loading
        isShowProjectMessage:true,//是否显示showProjectMessage

        tips: '您已进入违约率与RAROC分析设计页面，请开始进行分析！',//提示信息
        status: true,//开始分析按钮是否可用  true为可用
        page1Msg: {
          list: [],//表格数据
          thead: [],//表头数据
          echartsData: [],//圆环数据
          dateTime: '',
          type: 'info'
        },
        page2Msg: {
          list: [],
          dateTime: '',
          type: 'info'
        },
        showButton:false,//查看进度button是否展示
        projCacuStatusModal: false,//
        stuate: 0,//状态值
        timeInterval: null,
        modalTips: '',
        customIcon: '',
        iconColor: '',
        closeTip:'',//关闭提示
        RId:0,
      }
    },
    mounted () {
      this.RId=this.$route.query.RId
      this.ProjId = localStorage.getItem('RiskProjectId')
      this.getCacuStatus()
      this.getList(true)
    },
    methods: {
      ...mapActions([
        'getUserInfo'
      ]),
      ...mapMutations([
        'setDefaultworkflow'
      ]),
      creatAssessBack(){
        this.$router.push({path:'/accessReportList'})
      },
      /**
       * 更细状态
       */
      updata(){
        this.getUserInfo().then(res => {
          this.$store.commit('setDefaultworkflow', res.Data.defaultworkflow)
          this.isShowProjectMessage = false
          this.$nextTick(()=>{
            this.isShowProjectMessage = true
          })
        })
      },
      /**
       * 获取表格数据
       */
      getList (bool) {
        let data = {
          ProjId: this.ProjId,
          HistoryFlag: bool,
          RId:this.RId
        }
        if (!bool) {
          this.status = false
        }
        this.loading = true
        axios.request({
          url: '/projectEx/GetCashRAROCList',
          data,
          method: 'post'
        }).then(res => {
          if (res.data.Check) {
            if (bool) {
              if (res.data.Data) {
                this.page1Msg.dateTime = res.data.Data.dateTime
                this.page2Msg.dateTime = res.data.Data.dateTime
                this.page1Msg.echartsData = res.data.Data.flexTableOne.echarts
                this.page1Msg.list = res.data.Data.flexTableOne.list
                this.page1Msg.thead = res.data.Data.flexTableOne.thead
                this.page2Msg.list = res.data.Data.dtRAROC
                for (let i = 0; i < this.page1Msg.thead.length; i++) {
                  if (i < 1) {
                    this.page1Msg.thead[i].fixed = 'left'
                    this.page1Msg.thead[i].className = 'leftCell'
                  }
                  this.page1Msg.thead[i].minWidth = 215
                }
              }
              this.loading = false
            } else {
              this.updata()
              this.showButton = true
              this.projCacuStatusModal = true
              this.loading = false
              this.stuate = 0
              this.customIcon = 'custom custom-pinggu'
              this.tips = '系统开始分析违约率和RAROC，请稍后…'
              this.modalTips = '系统开始分析违约率和RAROC，请稍后…'
              this.iconColor = '#64a1f6'
              setTimeout(()=>{
                this.getProjCacuStatus()
              },1500)
              this.timeInterval = setInterval(() => {
                this.getProjCacuStatus()
              }, 4000)
            }
          } else {
            if (bool) {
              this.page1Msg.list = []
              this.page1Msg.thead = []
              this.page2Msg.list = []
            } else {
              this.tips = res.data.Msg
            }
            this.loading = false
          }
        }, res => {
          if (bool) {
            this.page1Msg.list = []
            this.page1Msg.thead = []
            this.page2Msg.list = []
          } else {
            this.tips = res.data.Msg
          }
          this.loading = false
        })
      },
      /**
       * 获取状态
       */
      getCacuStatus () {
        let data = {
          ProjId: this.ProjId,
          RId:this.RId
        }
        axios.request({
          url: '/projectEx/GetCacuStatus',
          data,
          method: 'post'
        }).then(res => {
          if (res.data.Check) {
            if (res.data.Data == 'PopUp' && !this.timeInterval) {
              this.showButton = true
              this.customIcon = 'custom custom-pinggu'
              this.status = false
              this.projCacuStatusModal = true
              this.getProjCacuStatus()
              this.timeInterval = setInterval(() => {
                this.getProjCacuStatus()
              }, 4000)
            } else if (res.data.Data === '') {
              this.getList(true)
              this.status = true
            }
            this.tips = res.data.Msg
          } else {
            this.status = false
            this.tips = res.data.Msg
          }
          this.loading = false
        }, res => {
          this.loading = false
          this.status = false
        })
      },
      /**
       * 轮询获取状态
       */
      getProjCacuStatus () {
        let data = {
          id: this.ProjId,
        }
        axios.request({
          url: '/project/GetProjCacuStatus',
          data,
          method: 'post'
        }).then(res => {
          if (res.data.Check) {
            this.modalTips = res.data.Data.CacuStatusInfo
            if (res.data.Data.CacuStatusId != 5) {
              this.stuate = res.data.Data.CacuStatusId
            }
            if (res.data.Data.CacuStatusId > 3) {
              this.showButton = false
              clearInterval(this.timeInterval)
            }
            if (res.data.Data.CacuStatusId == 4) {
              this.updata()
              this.customIcon = 'custom custom-queding'
              this.iconColor = '#19be6b'
              this.closeTip = '5'
              setTimeout(()=>{
                this.closeTip = '4'
              },1000)
              setTimeout(()=>{
                this.closeTip = '3'
              },2000)
              setTimeout(()=>{
                this.closeTip = '2'
              },3000)
              setTimeout(()=>{
                this.closeTip = '1'
              },4000)
              setTimeout(()=>{
                this.closeTip = ''
                this.projCacuStatusModal = false
              },5000)
              this.getList(true)
            } else if (res.data.Data.CacuStatusId == 5) {
              this.updata()
              this.status = false
              this.customIcon = 'custom custom-quxiao'
              this.iconColor = '#ed4014'
            }
          } else {

          }
          this.tips = res.data.Data ? res.data.Data.CacuStatusInfo : ''
        }, res => {
          this.tips = res.data.Data ? res.data.Data.CacuStatusInfo : ''
        })
      },

    },
    computed: {
      page2MsgColumns () {
        let columns = []
        columns.push({
          title: '开始日期',
          key: 'StartDate',
          minWidth: 120,
          fixed:'left'
        })
        columns.push({
          title: '结束日期',
          key: 'PlanTimeShort',
          minWidth: 120,
          fixed:'left'
        })
        columns.push({
          title: '天数(天)',
          key: 'DaysShow',
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.DaysShow))
          },
          minWidth: 100
        })
        columns.push({
          title: '期初剩余本金(元)',
          key: 'InitLeftCash',
          minWidth: 215,
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.InitLeftCash))
          }
        })
        columns.push({
          title: '归还金额(元)',
          key: 'CashFlowAll',
          minWidth: 215,
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.CashFlowAll))
          }
        })
        columns.push({
          title: '归还本金(元)',
          key: 'ReturnCash',
          minWidth: 215,
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.ReturnCash))
          }
        })
        columns.push({
          title: '利息收入(元)',
          key: 'InterestIncome',
          minWidth: 215,
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.InterestIncome))
          }
        })
        columns.push({
          title: '期末剩余本金(元)',
          key: 'LeftCash',
          minWidth: 215,
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.LeftCash))
          }
        })
        columns.push({
          title: '资金成本(元)',
          key: 'CashCost',
          minWidth: 215,
          align: 'right',
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.CashCost))
          }
        })
        columns.push({
          title: '风险成本(元)',
          key: 'RiskCost',
          align: 'right',
          minWidth: 215,
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.RiskCost))
          }
        })
        columns.push({
          title: '风险调整收益(元)',
          key: 'RiskAdjustROI',
          align: 'right',
          minWidth: 215,
          render: (h, params) => {
            return h('span', this.CustomMethods.numTo$(params.row.RiskAdjustROI))
          }
        })
        return columns
      }
    }
  }
</script>
<style lang="less">
  .itemBox {
    width: 165px;
    float: left;

    .circleBox {
      width: 68px;
      height: 68px;
      margin: 0 auto;
      border-radius: 34px;
      border: 1px solid #999999;
      padding: 2px;

      .circle {
        width: 100%;
        height: 100%;
        background-color: #ebecf0;
        border-radius: 32px;

        .icon {
          line-height: 64px;
          text-align: center;
          display: block;
          color: #999999;
        }
      }
    }

    .bottomBox {
      .verticaLine {
        width: 2px;
        height: 28px;
        margin: 0 auto;
        background-color: #d7d7d7;
      }

      .lineBox {
        position: relative;

        .leftLine1, .leftLine2, .leftLine3, .leftLine4, .leftLine5 {
          width: 50%;
          height: 10px;
          background-color: #e0e2e8;
          /*background-color: #e0e2e8;*/
          /*background-image: linear-gradient(141deg,#e0e2e8 0%,#81dffa 100%);*/
          float: left;
        }

        .rightLine {
          width: 50%;
          height: 10px;
          background-color: #e0e2e8;
          float: left;
        }

        .point {
          width: 26px;
          height: 26px;
          border-radius: 13px;
          position: absolute;
          top: -9px;
          left: 50%;
          margin-left: -13px;
          font-size: 20px;
          line-height: 26px;
          text-align: center;
          background-color: #e6e7ee;
          color: #999999;
        }
      }
    }

    .title {
      width: 100%;
      float: left;
      text-align: center;
      font-size: 18px;
      margin-top: 18px;
      color: #999999;
    }
  }

  .selectedItemBox {
    .circleBox {
      border: 1px solid #5094f1;

      .circle {
        background-color: #5094f1;
        background-image: linear-gradient(141deg, #85eafa 0%, #4e93f1 100%);

        .icon {
          color: white;
        }
      }
    }

    .bottomBox {
      .verticaLine {
        background-color: #5094f1;
      }

      .lineBox {
        .leftLine1 {
          background-color: #84e9fa;
          background-image: linear-gradient(141deg, #84e9fa 0%, #81dffa 100%);
        }

        .selectedRightLine1 {
          background-color: #81dffa;
          background-image: linear-gradient(141deg, #81dffa 0%, #78c6f9 100%);
        }

        .leftLine2 {
          background-color: #78c6f9;
          background-image: linear-gradient(141deg, #78c6f9 0%, #6dadf7 100%);
        }

        .selectedRightLine2 {
          background-color: #6dadf7;
          background-image: linear-gradient(141deg, #6dadf7 0%, #5f9df5 100%);
        }

        .leftLine3 {
          background-color: #5f9df5;
          background-image: linear-gradient(141deg, #5f9df5 0%, #4b92f0 100%);
        }

        .selectedRightLine3 {
          background-color: #4b92f0;
          background-image: linear-gradient(141deg, #4b92f0 0%, #398aec 100%);
        }

        .leftLine4 {
          background-color: #398aec;
          background-image: linear-gradient(141deg, #398aec 0%, #2784e7 100%);
        }

        .selectedRightLine4 {
          background-color: #2784e7;
          background-image: linear-gradient(141deg, #2784e7 0%, #2784e7 100%);
        }

        .leftLine5 {
          background-color: #2784e7;
          background-image: linear-gradient(141deg, #2784e7 0%, #2784e7 100%);
        }

        .selectedRightLine5 {
          background-color: #2784e7;
          background-image: linear-gradient(141deg, #2784e7 0%, #2784e7 100%);
        }

        .point {
          background-color: #2784e7;
          background-image: linear-gradient(141deg, #2784e7 0%, #2784e7 100%);
          color: white;
        }
      }
    }

    .title {
      color: #333333;
    }
  }

  #projCacuStatusModal .ivu-modal-header {
    border-bottom: none;
  }

  #projCacuStatusModal .vertical-center-modal { //modal垂直居中
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }
</style>

 src/view/accessReport/accessReportList.vue

@@ -29,6 +29,16 @@
        <Table ref="accessList" border :columns="accessListColumns" :data="accessList"
                style="margin-top: 12px" class="assessClass">
          <template slot="action" slot-scope="params">
            <Tooltip content="查看" class="tableActionMargin"  theme="light" transfer max-width="200"
                     placement="top" v-show="params.row.EvaState===4">
              <Icon custom="custom custom-chakan" size="18"
                    :class="defaultassetsmode? 'disabledIcon' : 'actionIcon'" @click="CheckAccessColumns(params.row)"/>
            </Tooltip>
            <Tooltip content="查看" v-show="params.row.EvaState!=4" class="tableActionMargin"  theme="light" transfer max-width="200"
                     placement="top">
              <Icon custom="custom custom-chakan" size="18"
                    :class="defaultassetsmode||params.row.EvaState!=4 ? 'disabledIcon' : 'actionIcon'"/>
            </Tooltip>
            <Tooltip content="编辑" class="tableActionMargin"  theme="light" transfer max-width="200"
                     placement="top">
              <Icon custom="custom custom-bianji" size="18"
@@ -132,6 +142,12 @@
  },
  methods: {
    /**
     *  点击查看报告
     **/
    CheckAccessColumns(params){
      this.$router.push({path:'/EvaluationResultPage',query:{ RId:params.Id}})
    },
    /**
     *  评估报告搜索
     **/
    searchClick(){

 src/view/accessReport/chooseAssess.vue

@@ -291,7 +291,7 @@
          </div>
          <div style="text-align: center;margin-bottom: 12px;margin-top: -25px">
            <Card>
                <Button type="primary" @click="back" style="margin-right: 15px" size="large"  :disabled="current=='0'">上一步</Button>
                <Button type="primary" @click="back" style="margin-right: 15px" size="large"  :disabled="current=='0'" v-show="current!=6">上一步</Button>
                <Button type="primary" @click="next" style="margin-left: 15px;" size="large" v-show="current!=6">下一步</Button>
            </Card>
          </div>