front / strategy-eigine-ui · Files

<template>
  <el-dialog
    :title="title"
    v-if="open"
    :visible.sync="open"
    width="1000px"
    append-to-body
    top="10vh"
    custom-class="new_dialog"
  >
    <div style="margin-left: 95%">
      <el-button type="text" @click="getPdf('企业风控报告')">导出</el-button>
    </div>
    <div id="pdfDom">
      <div class="box" v-if="data.applyCreditType == 1">
        <div>
          <p>申请时间</p>
          <p>{{ parseTime(data.applyTime) }}</p>
        </div>
        <div>
          <p>申请产品</p>
          <p>{{ ProductCode(data.applyProductCode) }}</p>
        </div>
        <div>
          <p>风控类型</p>
          <p>{{ queryDict(data.applyCreditType, dict.type.file_risk_type) }}</p>
        </div>
        <div>
          <p>风控结果</p>
          <p>{{ queryDict(data.applyStatus, dict.type.file_examine_type) }}</p>
        </div>
      </div>
      <div class="box2" v-if="data.applyCreditType == 2">
        <div class="pingfen">
          <Ex1 ref="ex" :percentage.sync="data.creditScore"></Ex1>
        </div>
        <div class="content">
          <div class="chanpin">
            <div>
              <span>申请产品：</span
              ><b>{{ ProductCode(data.applyProductCode) }}</b>
            </div>
            <div v-if="data.applyProductCode == 'CSINK'">
              <span>碳量（T）：</span><b>{{ data.carbonContent }}</b>
            </div>
          </div>
          <div class="neirong">
            <div>
              <span>申请额度(元)：</span><b>{{ data.applyAmount }}</b>
            </div>
            <div>
              <span>建议额度(元)：</span><b>{{ data.resultAmount }}</b>
            </div>
            <div v-if="data.applyProductCode == 'CSINK'">
              <span>碳汇估算额度(元)：</span><b>{{ data.resultMoney }}</b>
            </div>
            <div><span>申请时间：</span>{{ parseTime(data.applyTime) }}</div>
            <div>
              <span>风控类型：</span
              >{{ queryDict(data.applyCreditType, dict.type.file_risk_type) }}
            </div>
          </div>
          <div class="pingji">
            <div>
              <img src="@/assets/image/jiangzhuang.png" alt="" />
              <div class="titelP">评级</div>
            </div>
            <div class="size">{{ data.createLevel }}</div>
          </div>
        </div>
      </div>
      <el-descriptions title="客户基本信息" :size="size" :column="3" border>
        <el-descriptions-item label="企业名称">{{
          data.entName
        }}</el-descriptions-item>
        <el-descriptions-item label="统一社会信用代码">{{
          data.creditCode
        }}</el-descriptions-item>
        <el-descriptions-item label="法定代表人手机号">{{
          data.operatorPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="经办人手机号">{{
          data.phone
        }}</el-descriptions-item>
        <el-descriptions-item label="经办人名称">{{
          data.name
        }}</el-descriptions-item>
        <el-descriptions-item label="经办人身份证号码">{{
          data.idCard
        }}</el-descriptions-item>
        <el-descriptions-item label="联系地址">{{
          data.contactAddress
        }}</el-descriptions-item>
      </el-descriptions>
      <div class="demo-image__placeholder">
        <div class="block">
          <span class="demonstration">企业营业执照</span>
          <el-image :src="zhizhao"></el-image>
        </div>
        <div class="block">
          <span class="demonstration">经办人身份证正面照</span>
          <el-image :src="zhengmian"></el-image>
        </div>
        <div class="block">
          <span class="demonstration">经办人身份证反面照</span>
          <el-image :src="fanmian">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
      <el-descriptions title="企业实控人信息">
        <el-descriptions-item label="实控人名称">{{
          data.controlName
        }}</el-descriptions-item>
        <el-descriptions-item label="实控人身份证号码">{{
          data.controlIdCard
        }}</el-descriptions-item>
        <el-descriptions-item label="实控人手机号">{{
          data.controlPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="婚姻状况"
          >{{ queryDict(data.maritalStatus, dict.type.sys_marriag_type) }}
        </el-descriptions-item>
        <el-descriptions-item label="学历"
          >{{ queryDict(data.education, dict.type.sys_education_type) }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="demo-image__placeholder">
        <div class="block2">
          <span class="demonstration">实控人身份证正面照</span>
          <el-image :src="zhengmian"></el-image>
        </div>
        <div class="block2">
          <span class="demonstration">实控人身份证反面照</span>
          <el-image :src="fanmian">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
      </div>
      <h4>规则状态</h4>
      <div>
        <el-table
          v-loading="loading"
          :data="postList"
          :border="false"
          :span-method="objectSpanMethod"
        >
          <el-table-column label="策略节点" align="center" prop="groupName" />
          <el-table-column label="规则" align="center" prop="rule">
            <template slot-scope="scope">
              <span v-if="scope.row.targetEncrypt">
                <!-- {{ scope.row.targetEncrypt }} -->
                {{ scope.row.targetBaseName }} {{ scope.row.judgeName }}
                {{ scope.row.threshold }}
                <!-- {{ getPostList(scope.row.targetEncrypt, scope.row.threshold) }} -->
              </span>
              <span v-else
                >{{ scope.row.targetBaseName }} {{ scope.row.judgeName }}
                {{ scope.row.threshold }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="取值" align="center" prop="targetValue">
            <template slot-scope="scope">
              <span v-if="scope.row.targetEncrypt">
                <!-- {{ getPostList(scope.row.targetEncrypt, scope.row.targetValue) }} -->
                {{ scope.row.targetValue }}
              </span>
              <span v-else>{{ scope.row.targetValue }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结果" align="center" prop="hit">
            <template slot-scope="scope">
              <span v-if="scope.row.execType == 0">
                <span v-if="scope.row.hit == 0">未命中</span>
                <span v-else style="color: rgb(255, 77, 79)">命中</span>
              </span>
              <span v-else-if="scope.row.execType == 1">
                {{ scope.row.score }}分
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { selectAll, ossDownloadFile, listData } from "@/api/postList/list";
import Ex1 from "./ex1.vue";
export default {
  name: "seeMobile",
  components: { Ex1 },
  dicts: [
    "sys_normal_disable",
    "sys_education_type",
    "sys_marriag_type",
    "file_risk_type",
    "file_examine_type",
  ],
  data() {
    return {
      open: false,
      // 弹出层标题
      title: "",
      loading: true,
      reverse: true,
      postList: [],
      data: {},
      zhengmian: "",
      fanmian: "",
      zhizhao: "",
      product: [],
      size: "",
    };
  },
  methods: {
    cancel() {
      this.open = false;
      this.form = {};
    },
    see(res) {
      this.data = res;
      this.postList = res.strategyRuleItemResult;
      this.loading = false;
      this.open = true;
      this.title = "查看风控申请";
      var lis = {
        pageNum: 1,
        pageSize: 10000,
      };
      selectAll(lis).then((response) => {
        this.product = response.data;
      });
      var url = {
        fileIdentifyingCode: res.idCardFront,
        expire: 10000,
      };
      ossDownloadFile(url).then((response) => {
        this.zhengmian = response.data.result.url;
      });
      var url2 = {
        fileIdentifyingCode: res.idCardReverse,
        expire: 10000,
      };
      ossDownloadFile(url2).then((response) => {
        this.fanmian = response.data.result.url;
      });
      var url3 = {
        fileIdentifyingCode: res.businessLicense,
        expire: 10000,
      };
      ossDownloadFile(url3).then((response) => {
        this.zhizhao = response.data.result.url;
      });
    },
    ProductCode(t) {
      for (var i = 0; i < this.product.length; i++) {
        if (t == this.product[i].businessCode) {
          return this.product[i].name;
        }
      }
    },
    //？？？？？未知错误暂未解决 不知道为什么查询接口匹配码表就渲染不出来
    // getPostList(obj, str) {
    //   let p = {
    //     pageNum: 1,
    //     pageSize: 100,
    //     dictType: obj,
    //   };
    //   listData(p).then((res) => {
    //     var arr = []
    //     var arr = res.rows;
    //     for (var i = 0; i < arr.length; i++) {
    //       if (str == arr[i].dictValue) {
    //         console.log(arr[i].dictLabel);
    //         return arr[i].dictLabel;
    //       }
    //     }
    //   });
    // },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      switch (columnIndex) {
        case 0:
          return this.mergeComon("groupName", rowIndex);
        // case 1:
        //   return this.mergeComon("groupName", rowIndex);
        //   // eslint-disable-next-line no-unreachable
        //   break;
        // case 2:
        //   return this.mergeComon("groupName", rowIndex);
      }
    },
    mergeComon(id, rowIndex) {
      // 合并单元格
      var idName = this.postList[rowIndex][id];
      if (rowIndex > 0) {
        if (this.postList[rowIndex][id] != this.postList[rowIndex - 1][id]) {
          var i = rowIndex;
          var num = 0;
          while (i < this.postList.length) {
            if (this.postList[i][id] === idName) {
              i++;
              num++;
            } else {
              i = this.postList.length;
            }
          }
          return {
            rowspan: num,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 1,
          };
        }
      } else {
        var i = rowIndex;
        var num = 0;
        while (i < this.postList.length) {
          if (this.postList[i][id] === idName) {
            i++;
            num++;
          } else {
            i = this.postList.length;
          }
        }
        return {
          rowspan: num,
          colspan: 1,
        };
      }
    },
  },
};
</script>

<style>
.box {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.demo-image__placeholder {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-bottom: 40px;
}

.demonstration {
  line-height: 60px;
}

.block {
  width: 200px;
}

.block2 {
  width: 200px;
}

.new_dialog {
  height: 80%;
  overflow: hidden;
  overflow-y: scroll;
}

h4 {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}
.box2 {
  width: 96%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: 140px;
  margin-bottom: 30px;
}
.box2 .pingfen {
  width: 240px;
  height: 100%;
  margin-top: -70px;
  margin-left: -20px;
}
.content {
  position: relative;
}
.content span {
  width: 100px;
  display: inline-block;
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
}
.neirong {
  display: flex;
  flex-wrap: wrap;
}
.neirong div {
  width: 50%;
  margin-top: 20px;
}
.neirong div:nth-child(1) b,
.neirong div:nth-child(2) b {
  font-size: 24px;
}
.neirong div:nth-child(1) b {
  color: #f96868;
}
.neirong div:nth-child(2) b {
  color: #15c377;
}
.chanpin {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.chanpin div {
  width: 50%;
}
.chanpin div b {
  width: 50%;
  font-size: 18px;
}
.pingji {
  position: absolute;
  top: 0px;
  right: -50px;
  display: flex;
  flex-wrap: wrap;
  width: 180px;
}
.pingji img {
  height: 50px;
}
.titelP {
  width: 50px;
  text-align: center;
  margin-top: -10px;
}
.size {
  line-height: 70px;
  font-size: 40px;
  color: #d9534f;
}
#pdfDom {
  padding: 30px;
}
</style>