845 lines
40 KiB
Vue
845 lines
40 KiB
Vue
<template>
|
||
<div class="portraitPerson">
|
||
<div class="right-wrap-left-title f22 pl-16 f-weight600">人物画像</div>
|
||
<div class="flex-row">
|
||
<div class="right-wrap-left-tab" :style="'height:'+`${rightContentHeight}`+'px'">
|
||
<el-tooltip
|
||
popper-class="custom-tooltip"
|
||
effect="dark"
|
||
:content="portraitInfo.name+'的人物画像'"
|
||
placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 1" :class="rightActive == 1 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 1 ? `hx-1-active` : 'hx-1'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="身份信息" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 2" :class="rightActive == 2 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 2 ? `hx-2-active` : 'hx-2'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="地理位置" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 3" :class="rightActive == 3 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 3 ? `hx-3-active` : 'hx-3'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="经济状况" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 4" :class="rightActive == 4 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 4 ? `hx-4-active` : 'hx-4'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="雇佣状态" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 5" :class="rightActive == 5 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 5 ? `hx-5-active` : 'hx-5'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信用报告" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 6" :class="rightActive == 6 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 6 ? `hx-6-active` : 'hx-6'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信贷记录" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 7" :class="rightActive == 7 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 7 ? `hx-7-active` : 'hx-7'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="信用卡" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 8" :class="rightActive == 8 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 8 ? `hx-8-active` : 'hx-8'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="负债情况" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 9" :class="rightActive == 9 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 9 ? `hx-9-active` : 'hx-9'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="婚姻状况" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 11" :class="rightActive == 11 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 11 ? `hx-12-active` : 'hx-12'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="家庭成员" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 12" :class="rightActive == 12 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 12 ? `hx-11-active` : 'hx-11'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="消费行为" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 13" :class="rightActive == 13 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 13 ? `hx-13-active` : 'hx-13'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="还款行为" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 14" :class="rightActive == 14 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 14 ? `hx-14-active` : 'hx-14'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="风险评估" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 15" :class="rightActive == 15 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 15 ? `hx-15-active` : 'hx-15'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
<el-tooltip popper-class="custom-tooltip" effect="dark" content="建议措施" placement="right">
|
||
<div class="left-tab-icon flex-row justify-content-center align-items-center" @click="rightActive = 16" :class="rightActive == 16 ?'active':''">
|
||
<svg-icon :icon-class="rightActive == 16 ? `hx-16-active` : 'hx-16'" className="tabs-svg" />
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="right-wrap-left-content">
|
||
<div class="hx-1-content" v-if="rightActive == 1">
|
||
<div class="f12 pl-16 pt-16 pb-6">人物画像</div>
|
||
<el-scrollbar :style="'height:'+`${CommunicationcontentHeight}`+'px'">
|
||
<div class="p-16" :class="(portraitInfo.gender == 'Male'||portraitInfo.gender == '') ? 'personghximg':'personghximgw'">
|
||
<!-- 基本信息 -->
|
||
<div class="position_info character-info theme-blue">
|
||
<div class="character-info-title">基本信息</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">姓名</div>
|
||
<div class="character-info-details-text">{{portraitInfo.name}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">性别</div>
|
||
<div class="character-info-details-text">{{(portraitInfo.gender == 'Male' || portraitInfo.gender == '') ?'男':'女'}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">电话</div>
|
||
<div class="character-info-details-text">{{portraitInfo.phoneNumber}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">居住地</div>
|
||
<div class="character-info-details-text">{{ getAddress(portraitInfo.domicilePlace) }} {{portraitInfo.domicileAddress}} </div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">经济状况</div>
|
||
<div class="character-info-details-text">{{portraitInfo.economicStatus}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">雇佣状态</div>
|
||
<div class="character-info-details-text">{{portraitInfo.employmentStatus}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 家庭情况 -->
|
||
<div class="position_family character-info theme-green">
|
||
<div class="character-info-title">家庭情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">婚姻状况</div>
|
||
<div class="character-info-details-text">{{portraitInfo.maritalStatus}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">家庭成员</div>
|
||
<div class="character-info-details-text">{{portraitInfo.familyMembers}}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 执行情况 -->
|
||
<div class="position_carry character-info theme-pink">
|
||
<div class="character-info-title">执行情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">是否被执行</div>
|
||
<div class="character-info-details-text">{{portraitInfo.isExecuted =='Yes'?'是':'否'}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">机构黑名单</div>
|
||
<div class="character-info-details-text">{{portraitInfo.isBlacklisted =='Yes'?'是':'否'}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">是否失信人员</div>
|
||
<div class="character-info-details-text">{{portraitInfo.isUntrustworthy =='Yes'?'是':'否'}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- 财务资产情况 -->
|
||
<div class="position_finance character-info theme-yellow">
|
||
<div class="character-info-title">财务资产情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">信用等级</div>
|
||
<div class="character-info-details-text">{{portraitInfo.creditRating}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">逾期</div>
|
||
<div class="character-info-details-text">{{portraitInfo.overdue}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">欠款</div>
|
||
<div class="character-info-details-text">{{portraitInfo.arrears}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">信用卡</div>
|
||
<div class="character-info-details-text">{{portraitInfo.creditCardCount}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">信用卡额度</div>
|
||
<div class="character-info-details-text">{{portraitInfo.creditLimit}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">资产</div>
|
||
<div class="character-info-details-text">{{portraitInfo.assetSituation}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">还款行为</div>
|
||
<div class="character-info-details-text">{{portraitInfo.repaymentBehavior}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">消费行为</div>
|
||
<div class="character-info-details-text">{{portraitInfo.consumptionBehavior}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 风险情况 -->
|
||
<div class="position_risk character-info theme-pink2">
|
||
<div class="character-info-title">风险情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">风险评估</div>
|
||
<div class="character-info-details-text">{{portraitInfo.riskAssessment}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">建议措施</div>
|
||
<div class="character-info-details-text">{{portraitInfo.suggestedMeasures}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 适诉情况 -->
|
||
<div class="position_lawsuit character-info theme-purple">
|
||
<div class="character-info-title">适诉情况</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">还款意愿</div>
|
||
<div class="character-info-details-text">{{portraitInfo.repaymentWillingness}}</div>
|
||
</div>
|
||
<div class="character-info-details flex-row">
|
||
<div class="character-info-details-label">诉讼</div>
|
||
<div class="character-info-details-text">{{portraitInfo.litigationSituation}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
<div class="portrait-marker" v-if="rightActive != 1">
|
||
<el-scrollbar ref="scrollContainer" :style="'height:'+`${portraitcontentHeight}`+'px'">
|
||
<div ref="positionContainer" class="flex-column p-16">
|
||
<div class="f18">基本信息</div>
|
||
<div ref="targetPerson" class="f16 mt-16"><a class="dot"></a>身份信息</div>
|
||
<div class="person-info flex-column mt-16">
|
||
<span>姓名：<a class="color-000">{{portraitInfo.name}}</a></span>
|
||
<span>性别：<a class="color-000">{{(portraitInfo.gender == 'Male' || portraitInfo.gender == '') ? '男':'女'}}</a></span>
|
||
<span>年龄：<a class="color-000">{{portraitInfo.age}}</a></span>
|
||
<span>手机号码：<a class="color-000">{{portraitInfo.phoneNumber}}</a></span>
|
||
<span>身份证号：<a class="color-000">{{portraitInfo.idCardNumber}}</a></span>
|
||
</div>
|
||
<div ref="targetAddress" class="f16 mt-16"><a class="dot"></a>地理位置</div>
|
||
<div class="flex-column">
|
||
<span class="mt-8">户籍所在地：</span>
|
||
<span class="mt-8">
|
||
<el-cascader size="small" :placeholder="getAddress(portraitObj.domicilePlace)" v-model="portraitObj.domicilePlace" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
|
||
</span>
|
||
<span class="mt-8">
|
||
<el-input size="small" v-model="portraitObj.domicileAddress" placeholder="请输入详细地址,楼栋单元" maxlength="30"></el-input>
|
||
</span>
|
||
<span class="mt-8">常住地址：</span>
|
||
<span class="mt-8">
|
||
<!-- :placeholder="getAddress(portraitObj.residencePlace)" -->
|
||
<el-cascader size="small" :placeholder="getAddress(portraitObj.residencePlace)" v-model="portraitObj.residencePlace" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }"></el-cascader>
|
||
</span>
|
||
<span class="mt-8">
|
||
<el-input size="small" v-model="portraitObj.residenceAddress" placeholder="请输入详细地址,楼栋单元" maxlength="30"></el-input>
|
||
</span>
|
||
<span class="mt-8">工作地点：</span>
|
||
<span class="mt-8">
|
||
<el-cascader size="small" :placeholder="getAddress(portraitObj.workPlace)" v-model="portraitObj.workPlace" class="width100" :options="provinces" :props="{ lazy: true, lazyLoad: loadOptions }" ></el-cascader>
|
||
</span>
|
||
<span class="mt-8">
|
||
<el-input size="small" v-model="portraitObj.workAddress" placeholder="请输入详细地址,楼栋单元" maxlength="30"></el-input>
|
||
</span>
|
||
</div>
|
||
<div ref="targetRevenue" class="f18 mt-16">经济状况</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>经济状况</div>
|
||
<div class="box-list" >
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'REVENUE')" :key="index" @click="portraitObj.economicStatus = item.labelName " :class="portraitObj.economicStatus == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
</div>
|
||
<div ref="targetJob" class="f16 mt-16"><a class="dot"></a>雇佣状态</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'JOB')" :key="index" @click="portraitObj.employmentStatus = item.labelName " :class="portraitObj.employmentStatus == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
</div>
|
||
<div ref="targetCredit" class="f18 mt-16">信用历史</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>信用报告</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>信贷记录</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>信用卡</div>
|
||
<div class="f18 mt-16">财务资产和负债</div>
|
||
<div ref="targetProperty" class="f16 mt-16"><a class="dot"></a>财产情况</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'PROPERTY')" :key="index" @click="portraitObj.assetSituation = item.labelName " :class="portraitObj.assetSituation == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>有房</span>
|
||
<span>有车</span>
|
||
<span>存款</span>
|
||
<span>投资</span> -->
|
||
</div>
|
||
<div ref="targetLiability" class="f16 mt-16"><a class="dot"></a>负债情况</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'LIABILITY')" :key="index" @click="portraitObj.arrears = item.labelName " :class="portraitObj.arrears == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>多头借贷</span>
|
||
<span>信用卡负债</span>
|
||
<span>银行其他负债</span>
|
||
<span>非银负债</span>
|
||
<span>民间借贷或高利贷</span>
|
||
<span>负债0-10W</span>
|
||
<span>负债10-50W</span>
|
||
<span>负债50-100W</span>
|
||
<span>负债100W以上</span>
|
||
<span>存在还款竞争</span> -->
|
||
</div>
|
||
|
||
<div class="f18 mt-16">家庭状况</div>
|
||
<div ref="targetMatrimony" class="f16 mt-16"><a class="dot"></a>婚姻状况</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'MATRIMONY')" :key="index" @click="portraitObj.maritalStatus = item.labelName " :class="portraitObj.maritalStatus == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>未婚</span>
|
||
<span>已婚</span>
|
||
<span>离婚</span> -->
|
||
</div>
|
||
<div ref="targetFamily" class="f16 mt-16"><a class="dot"></a>家庭成员</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'FAMILY')" :key="index" @click="portraitObj.familyMembers = item.labelName " :class="portraitObj.familyMembers == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>无子女</span>
|
||
<span>有子女</span>
|
||
<span>有父母</span>
|
||
<span>无父母</span> -->
|
||
</div>
|
||
<div class="f18 mt-16">行为分析</div>
|
||
<div ref="targetConsumption" class="f16 mt-16"><a class="dot"></a>消费行为</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'CONSUMPTION')" :key="index" @click="portraitObj.consumptionBehavior = item.labelName " :class="portraitObj.consumptionBehavior == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>收入匹配消费</span>
|
||
<span>超前消费</span>
|
||
<span>滞后消费</span>
|
||
<span>日常消费</span>
|
||
<span>娱乐消费</span>
|
||
<span>奢侈品消费</span>
|
||
<span>冲动消费</span>
|
||
<span>本地消费</span>
|
||
<span>异地消费</span>
|
||
<span>线上消费</span>
|
||
<span>消费增长</span>
|
||
<span>消费下降</span> -->
|
||
</div>
|
||
<div ref="targetRepayment" class="f16 mt-16"><a class="dot"></a>还款行为</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'REPAYMENT')" :key="index" @click="portraitObj.repaymentBehavior = item.labelName " :class="portraitObj.repaymentBehavior == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>按时还</span>
|
||
<span>不按时还</span> -->
|
||
</div>
|
||
<div class="f18 mt-16">诉讼情况</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>涉诉讼</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'LAWSUIT')" :key="index" @click="portraitObj.litigationSituation = item.labelName " :class="portraitObj.litigationSituation == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>还款意愿</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'WILLINGNESS_TO_REPAY')" :key="index" @click="portraitObj.repaymentWillingness = item.labelName " :class="portraitObj.repaymentWillingness == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
</div>
|
||
<div ref="targetRisk" class="f18 mt-16">风险评估和建议</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>风险评估</div>
|
||
<div class="box-list">
|
||
<span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'RISK')" :key="index" @click="portraitObj.riskAssessment = item.labelName " :class="portraitObj.riskAssessment == item.labelName ? 'active':''">{{item.labelName}}</span>
|
||
<!-- <span>低风险</span>
|
||
<span>中风险</span>
|
||
<span>高风险</span> -->
|
||
</div>
|
||
<div class="f16 mt-16"><a class="dot"></a>建议措施</div>
|
||
<div class="box-list">
|
||
<!-- <span v-for="(item,index) in debtorProlabels.filter(item => item.labelGroup == 'RISK')" :key="index" @click="portraitObj.suggestedMeasures = item.labelName " :class="portraitObj.suggestedMeasures == item.labelName ? 'active':''">{{item.labelName}}</span> -->
|
||
<!-- <span>调整还款计划</span>
|
||
<span>增加收入</span>
|
||
<span>减少支出</span> -->
|
||
</div>
|
||
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import chinalist from 'china-location/dist/location.json';
|
||
import ChinaLocation from 'china-location';
|
||
import api from "@/services/caseManagement";
|
||
export default {
|
||
components: {
|
||
uploadFile: () => import('@/components/uploadFile.vue'),//上传
|
||
},
|
||
props: {
|
||
caseId: {
|
||
type: String,
|
||
default: () => {
|
||
return ''
|
||
},
|
||
},
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
debtorEntityList:[],
|
||
portraitInfo:{},
|
||
portraitObj:{
|
||
debtorId:'',
|
||
id:'',
|
||
domicilePlace:[],//债务人的户籍所在地（省/市/区）
|
||
domicileAddress:'',//债务人的户籍详细地址
|
||
residencePlace:[],//债务人的常住地（省/市/区）
|
||
residenceAddress:'',//债务人的常住详细地址
|
||
workPlace:[],//债务人的工作地（省/市/区）
|
||
workAddress:'',//债务人的工作详细地址
|
||
economicStatus:'',//债务人的经济状况描述
|
||
employmentStatus:'',//债务人的雇佣状态（如 Employed, Unemployed, Self-employed）
|
||
maritalStatus:'',//债务人的婚姻状况（如 Single, Married, Divorced）
|
||
familyMembers:'',//债务人的家庭成员信息（可以是 JSON 字符串）
|
||
isExecuted:'',//债务人是否被执行过法律程序（Yes 或 No）
|
||
isBlacklisted:'',//债务人是否被列入黑名单（Yes 或 No）
|
||
isUntrustworthy:'',//债务人是否有失信记录（Yes 或 No）
|
||
creditRating:'',//债务人的信用等级
|
||
overdue:'',//债务人的逾期情况描述
|
||
arrears:'',//债务人的欠款情况描述
|
||
creditCardCount:'',//债务人持有的信用卡数量
|
||
creditLimit:'',//债务人所有信用卡的总授信额度
|
||
assetSituation:'',//债务人的资产情况描述
|
||
consumptionBehavior:'',//债务人的消费行为模式描述
|
||
repaymentBehavior:'',//债务人的还款行为模式描述
|
||
repaymentWillingness:'',//债务人的还款意愿描述
|
||
litigationSituation:'',//债务人的诉讼情况描述
|
||
riskAssessment:'',//对债务人的风险评估结果
|
||
suggestedMeasures:'',//针对债务人情况提出的建议措施
|
||
},
|
||
initlocation: null,
|
||
provinces: [],
|
||
rightActive: 1,
|
||
debtorProlabels:[],
|
||
Rollposition:[{key:'targetPerson',active:1},{key:'targetPerson',active:2},{key:'targetAddress',active:3},{key:'targetRevenue',active:4},
|
||
{key:'targetJob',active:5},{key:'targetCredit',active:6},{key:'targetCredit',active:7},{key:'targetCredit',active:8},
|
||
{key:'targetLiability',active:9},{key:'targetMatrimony',active:10},{key:'targetMatrimony',active:11},
|
||
{key:'targetFamily',active:12},{key:'targetConsumption',active:13},{key:'targetRisk',active:14},{key:'targetRisk',active:15},
|
||
{key:'targetRisk',active:16},
|
||
],
|
||
};
|
||
},
|
||
computed: {
|
||
// 左侧
|
||
leftContentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 100
|
||
},
|
||
// 获取右侧滚动高度
|
||
rightContentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57
|
||
},
|
||
// 获取抽屉drawer的内容高度
|
||
OfficecontentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 185
|
||
},
|
||
CommunicationcontentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57 - 90
|
||
},
|
||
portraitcontentHeight() {
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh - 57 - 130
|
||
},
|
||
},
|
||
watch: {
|
||
// 监听文件列表的变化，重新整理内部数据
|
||
rightActive: {
|
||
immediate: true,
|
||
handler() {
|
||
setTimeout(() => {
|
||
this.scrollToPosition()
|
||
}, 200);
|
||
}
|
||
},
|
||
portraitObj: {
|
||
handler: function(newVal, oldVal) {
|
||
// 这里可以执行你需要的任何操作
|
||
// console.log('Object changed!')
|
||
setTimeout(() => {
|
||
this.handleSubmit()
|
||
}, 800);
|
||
},
|
||
deep: true // 确保深度监听
|
||
}
|
||
|
||
},
|
||
mounted() {
|
||
this.initlocation = new ChinaLocation(chinalist);
|
||
this.getCaseInfoById()
|
||
},
|
||
methods: {
|
||
isJsonString(str) {
|
||
try {
|
||
str.forEach(item =>{})
|
||
return true;
|
||
} catch (e) {
|
||
return false;
|
||
}
|
||
},
|
||
getAddress(residencePlace){
|
||
if(residencePlace == undefined || residencePlace == null || residencePlace == '')
|
||
{
|
||
return '请选择省市区(县)'
|
||
}
|
||
let residencePlaceNew = null
|
||
if(!this.isJsonString(residencePlace)){
|
||
residencePlaceNew = JSON.parse(residencePlace)
|
||
}
|
||
else
|
||
{
|
||
residencePlaceNew = residencePlace
|
||
}
|
||
|
||
const getlocation = new ChinaLocation(chinalist);
|
||
const newProvince = residencePlaceNew[0];
|
||
const newCity = residencePlaceNew[1];
|
||
const newDistrict = residencePlaceNew[2];
|
||
getlocation.changeProvince(newProvince);
|
||
getlocation.changeCity(newCity);
|
||
getlocation.changeDistrict(newDistrict);
|
||
getlocation.changeLocation(newProvince, newCity, newDistrict);
|
||
const newLocation = getlocation.getCurrentAddress();
|
||
return newLocation.province.name + '/' + newLocation.city.name + '/' + newLocation.district.name
|
||
|
||
},
|
||
scrollToPosition() {
|
||
const scrollbar = this.$refs.scrollContainer
|
||
if (scrollbar) {
|
||
const wrap = scrollbar.$refs.wrap;
|
||
if (wrap) {
|
||
let scrollTo = this.scrollToTarget()
|
||
// 假设你想滚动到距离顶部100像素的位置
|
||
// wrap.scrollTo(0, 500);
|
||
wrap.scrollTo({
|
||
left: 0,
|
||
top: scrollTo,
|
||
behavior: 'smooth' // 使用'smooth'让滚动平滑
|
||
});
|
||
}
|
||
}
|
||
},
|
||
scrollToTarget() {
|
||
let positionData = this.Rollposition.find(item =>{
|
||
return item.active == this.rightActive
|
||
})
|
||
const scrollContainer = this.$refs.positionContainer;
|
||
const targetElement = this.$refs[positionData.key];
|
||
|
||
// 计算滚动位置（这里简单设置为滚动到目标元素的顶部）
|
||
const scrollPosition = targetElement.offsetTop - scrollContainer.offsetTop;
|
||
return scrollPosition
|
||
},
|
||
// 省市县
|
||
loadOptions(node, resolve) {
|
||
const { level } = node;
|
||
console.log(level,'levellevellevellevel')
|
||
// 模拟异步加载数据
|
||
setTimeout(() => {
|
||
if(level == 0)
|
||
{
|
||
this.provinces = []
|
||
this.initlocation.currentProvinces.forEach(item =>{
|
||
this.provinces.push({value: item.code,label: item.name,leaf: false})
|
||
})
|
||
}
|
||
if(level == 1)
|
||
{
|
||
let location = new ChinaLocation(chinalist);
|
||
location.changeProvince(node.value);
|
||
let children = []
|
||
location.currentCities.forEach(item =>{
|
||
children.push({value: item.code,label: item.name,leaf: false})
|
||
})
|
||
resolve(children)
|
||
}
|
||
if(level == 2)
|
||
{
|
||
let location = new ChinaLocation(chinalist);
|
||
location.changeProvince(node.parent.value);
|
||
location.changeCity(node.value);
|
||
let children = []
|
||
location.currentDistricts.forEach(item =>{
|
||
children.push({value: item.code,label: item.name,leaf: true})
|
||
})
|
||
resolve(children)
|
||
}
|
||
}, 100);
|
||
},
|
||
// 获取详情
|
||
getCaseInfoById() {
|
||
api.getCaseInfoById(this.caseId).then(res => {
|
||
if (!res.code) {
|
||
this.debtorEntityList = res.debtorEntityList
|
||
}
|
||
this.getdebtorProfile()
|
||
})
|
||
},
|
||
// 标签列表
|
||
getdebtorProfile(){
|
||
api.debtorProfile_labels({}).then(res => {
|
||
if (!res.code) {
|
||
this.debtorProlabels = res;
|
||
}
|
||
})
|
||
// 查询当前债务人画像
|
||
let debtorId = ''
|
||
let debtors = this.debtorEntityList.find(item =>{ return item.role == 'DEBTOR'})
|
||
if(debtors != undefined)
|
||
{
|
||
debtorId = debtors.id
|
||
this.portraitObj.debtorId = debtorId
|
||
}
|
||
|
||
this.getByDebtorId()
|
||
},
|
||
// 获取人物画像列表
|
||
getByDebtorId(){
|
||
api.debtorProfile_getByDebtorId(this.portraitObj.debtorId).then(res => {
|
||
if (!res.code) {
|
||
// residencePlaceDes
|
||
this.portraitInfo = res;
|
||
this.portraitObj = res
|
||
}
|
||
})
|
||
},
|
||
// 自动修改人物画像标签
|
||
handleSubmit() {
|
||
// console.log(this.portraitObj,'this.mrObj')
|
||
if(this.portraitObj.id){
|
||
api.debtorProfile_edit(this.portraitObj).then(res => {
|
||
// this.getdebtorProfile()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.portraitPerson{
|
||
.right-wrap-left-title{
|
||
width: 100%;
|
||
line-height: 47px;
|
||
border-bottom: 1px solid var(--fill-3, #E5E6EB);
|
||
background-color: #F7F8FA;
|
||
}
|
||
.right-wrap-left-tab{
|
||
width: 48px;
|
||
background-color: #F7F8FA;
|
||
.left-tab-icon{
|
||
width: 100%;
|
||
height: 40px;
|
||
.tabs-svg{
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
.active {
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
.right-wrap-left-content{
|
||
width: 318px;
|
||
background-color: #FFFFFF;
|
||
|
||
.hx-1-content{
|
||
.personghximg{
|
||
background: url('~@/assets/image/Vector.png') no-repeat;
|
||
height: 100%;
|
||
display: block;
|
||
background-size: 80% auto;
|
||
background-position: top;
|
||
}
|
||
.personghximgw{
|
||
background: url('~@/assets/image/VectorWoman.png') no-repeat;
|
||
height: 100%;
|
||
display: block;
|
||
background-size: 67% auto;
|
||
background-position: top;
|
||
}
|
||
.character-info{
|
||
width: calc(50% - 5px);
|
||
// border: 1px solid;
|
||
padding: 4px;
|
||
color: #4E5969;
|
||
.character-info-title{
|
||
line-height: 20px;
|
||
font-size: 12px;
|
||
}
|
||
.character-info-details{
|
||
margin-bottom: 2px;
|
||
font-size: 10px;
|
||
.character-info-details-label{
|
||
width: 40%;
|
||
text-align: right;
|
||
line-height: 16px;
|
||
padding-right: 4px;
|
||
}
|
||
.character-info-details-text{
|
||
width: 60%;
|
||
text-align: left;
|
||
line-height: 16px;
|
||
padding-left: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// position_info position_family position_carry position_finance position_risk position_lawsuit
|
||
.position_info{position:absolute; top: 110px;top: 15%;left: 8px;}
|
||
.position_family{position:absolute; top: 300px;top: 38%;left: 8px;}
|
||
.position_carry{position:absolute; top: 400px;top: 52%;left: 8px;}
|
||
|
||
.position_finance{position:absolute; top: 160px;top: 25%;left: 160px;}
|
||
.position_risk{position:absolute; top: 350px;top: 52%;left: 160px;}
|
||
.position_lawsuit{position:absolute; top: 460px;top: 65%;left: 160px;}
|
||
|
||
.theme-blue{
|
||
.character-info-title{
|
||
color: #4787F0;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #BBD3FB;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #165DFFB2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
//
|
||
.theme-green{
|
||
.character-info-title{
|
||
color: #00A870;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #00B42A33;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #00B42AB2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-pink{
|
||
.character-info-title{
|
||
color: #F36DA0;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #F36DA033;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #F36DA0B2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-yellow{
|
||
.character-info-title{
|
||
color: #ED7B2F;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #ED7B2F33;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #ED7B2FB2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-pink2{
|
||
.character-info-title{
|
||
color: #F36D78;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #F36D7833;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #F36D78B2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-purple{
|
||
.character-info-title{
|
||
color: #936DF3;
|
||
}
|
||
.character-info-details{
|
||
.character-info-details-label{
|
||
background-color: #936DF333;
|
||
}
|
||
.character-info-details-text{
|
||
background-color: #936DF3B2;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.portrait-marker{
|
||
/* 方法1 */
|
||
.dot {
|
||
margin-left: 5px;
|
||
position: relative;
|
||
padding-left: 10px; /* 调整圆点与文本之间的距离 */
|
||
}
|
||
|
||
.dot::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background-color: #000; /* 圆点的颜色 */
|
||
}
|
||
|
||
.person-info{
|
||
color: #86909C;
|
||
border:solid 1px #E5E6EB;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
span{
|
||
padding: 5px 10px;
|
||
}
|
||
span:nth-child(even) {
|
||
background-color: #F7F8FA;
|
||
}
|
||
}
|
||
.box-list{
|
||
span{
|
||
border:solid 1px #E5E6EB;
|
||
border-radius: 3px;
|
||
padding: 5px 10px;
|
||
display: inline-block;
|
||
margin-top: 10px;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
}
|
||
span.active{
|
||
color: #BC6F60;
|
||
border: solid 1px #BC6F60;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.portraitPerson{
|
||
.el-scrollbar__view{height: 100%;}
|
||
}
|
||
</style> |