办结及工作台
This commit is contained in:
parent
8a96904fa7
commit
2872fe834c
@ -205,7 +205,7 @@
|
|||||||
<i class="f24 el-icon-wallet color-4E5969"></i>
|
<i class="f24 el-icon-wallet color-4E5969"></i>
|
||||||
<div class="pl-4 f14">类案</div>
|
<div class="pl-4 f14">类案</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn">
|
<div class="flex-row justify-content-between align-items-center cursor-pointer bottom-case-btn" @click="handleChangeCaseStatus()">
|
||||||
<i class="f24 el-icon-document-checked color-4E5969"></i>
|
<i class="f24 el-icon-document-checked color-4E5969"></i>
|
||||||
<div class="pl-4 f14">办结</div>
|
<div class="pl-4 f14">办结</div>
|
||||||
</div>
|
</div>
|
||||||
@ -571,16 +571,31 @@ export default {
|
|||||||
}).then(() => {
|
}).then(() => {
|
||||||
if(!this.$clickThrottle()) { return }//防止重复点击
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||||
api.updateResultStatus(data).then(res => {
|
api.updateResultStatus(data).then(res => {
|
||||||
this.getCaseInfoById()
|
|
||||||
this.$message({message: '案件标记成功', type: "success",customClass:'messageZindex'})
|
this.$message({message: '案件标记成功', type: "success",customClass:'messageZindex'})
|
||||||
thiis.getCaseInfoById()
|
this.$refs.layoutContent.getCaseInfoById();
|
||||||
})
|
})
|
||||||
|
|
||||||
}).catch(() => {});
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
// 办结
|
||||||
|
async handleChangeCaseStatus(){
|
||||||
|
let data={
|
||||||
|
id:this.caseId,
|
||||||
|
caseStatus:2
|
||||||
|
}
|
||||||
|
this.$confirm("请确定是否将案件办结?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(() => {
|
||||||
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
||||||
|
api.updateResultStatus(data).then(res => {
|
||||||
|
this.$message({message: '案件办结成功', type: "success",customClass:'messageZindex'})
|
||||||
|
})
|
||||||
|
|
||||||
|
}).catch(() => {});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
async callingInfo() {
|
async callingInfo() {
|
||||||
try {
|
try {
|
||||||
let res = await api.callingInfo({})
|
let res = await api.callingInfo({})
|
||||||
|
|||||||
@ -6,112 +6,113 @@
|
|||||||
<span>你好，{{userInfo.realName || userInfo.showName ||'-'}}</span>
|
<span>你好，{{userInfo.realName || userInfo.showName ||'-'}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-row justify-content-between work-main p-16">
|
<div class="flex-row justify-content-between work-main p-16">
|
||||||
<div class="border-radius-4 flex-column casework1">
|
<div class="flex-column ">
|
||||||
<div class="flex-row justify-content-between case-title">
|
<div class="border-radius-4 flex-column casework1">
|
||||||
<span>案件进展情况</span>
|
<div class="flex-row justify-content-between case-title">
|
||||||
<span>
|
<span>案件进展情况</span>
|
||||||
<el-select v-model="queryParamJZ.id"
|
<span>
|
||||||
placeholder="请选择案件包"
|
<el-select v-model="queryParamJZ.id"
|
||||||
class="width100" size="mini" @change="JZChange">
|
placeholder="请选择案件包"
|
||||||
<el-option
|
class="width100" size="mini" @change="JZChange">
|
||||||
v-for="item in casePkOptions"
|
<el-option
|
||||||
:key="item.id"
|
v-for="item in casePkOptions"
|
||||||
:label="item.pkgName"
|
:key="item.id"
|
||||||
:value="item.id">
|
:label="item.pkgName"
|
||||||
</el-option>
|
:value="item.id">
|
||||||
</el-select>
|
</el-option>
|
||||||
</span>
|
</el-select>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-16 case-progress-cont">
|
||||||
|
<div class="case-progress">
|
||||||
|
<span class="case-pro1">
|
||||||
|
<p>案件总量</p>
|
||||||
|
<p><a>{{caseprogressObj.caseTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro2">
|
||||||
|
<p>已办结案件</p>
|
||||||
|
<p><a>{{caseprogressObj.finishTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro3">
|
||||||
|
<p>未触达</p>
|
||||||
|
<p><a>{{caseprogressObj.notReachTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro1">
|
||||||
|
<p>调解中</p>
|
||||||
|
<p><a>{{caseprogressObj.mediatingTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro2">
|
||||||
|
<p>调解成功</p>
|
||||||
|
<p><a>{{caseprogressObj.mediateSuccess}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro3">
|
||||||
|
<p>已签署协议</p>
|
||||||
|
<p><a>{{caseprogressObj.signTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro1">
|
||||||
|
<p>已司法确认</p>
|
||||||
|
<p><a>{{caseprogressObj.judicialTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
<span class="case-pro2">
|
||||||
|
<p>已赋强公证</p>
|
||||||
|
<p><a>{{caseprogressObj.notarizationTotal}}</a>件</p>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-16 case-progress-cont">
|
<div class="flex-column casework-1 p-16">
|
||||||
<div class="case-progress">
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
<span class="case-pro1">
|
<span class="f18 f-weight500">本人触达率</span>
|
||||||
<p>案件总量</p>
|
</div>
|
||||||
<p><a>{{caseprogressObj.caseTotal}}</a>件</p>
|
<div class="case-pk-cont flex-row">
|
||||||
</span>
|
<div>
|
||||||
<span class="case-pro2">
|
<div id="echartsReachrate" style="width: 254px; height: 264px; ">
|
||||||
<p>已办结案件</p>
|
|
||||||
<p><a>{{caseprogressObj.finishTotal}}</a>件</p>
|
</div>
|
||||||
</span>
|
<span class="resultplan" >
|
||||||
<span class="case-pro3">
|
<p><a class="color-000 f22">0</a>人</p>
|
||||||
<p>未触达</p>
|
<p>触达率<a class="color-000">0</a>%</p>
|
||||||
<p><a>{{caseprogressObj.notReachTotal}}</a>件</p>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
<span class="case-pro1">
|
<div class="flex-column justify-content-center">
|
||||||
<p>调解中</p>
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">0</a><a>已触达债务人数</a></span>
|
||||||
<p><a>{{caseprogressObj.mediatingTotal}}</a>件</p>
|
<span class="flex-column align-items-center color-86909C mt-16"><a class="color-000 f16">0</a><a>未触达债务人数</a></span>
|
||||||
</span>
|
</div>
|
||||||
<span class="case-pro2">
|
|
||||||
<p>调解成功</p>
|
|
||||||
<p><a>{{caseprogressObj.mediateSuccess}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro3">
|
|
||||||
<p>已签署协议</p>
|
|
||||||
<p><a>{{caseprogressObj.signTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro1">
|
|
||||||
<p>已司法确认</p>
|
|
||||||
<p><a>{{caseprogressObj.judicialTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro2">
|
|
||||||
<p>已赋强公证</p>
|
|
||||||
<p><a>{{caseprogressObj.notarizationTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-radius-4 flex-column casework2">
|
<div class="casework2">
|
||||||
<div class="flex-row justify-content-between case-pk-title">
|
<div class="border-radius-4 flex-column casework2-1">
|
||||||
<span>待办案件跟进状态</span>
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
|
<span>待办案件跟进状态</span>
|
||||||
|
</div>
|
||||||
|
<div class="case-follow-cont flex-row ">
|
||||||
|
<div class="donotfollowup1">
|
||||||
|
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f20 mb-32">今日待跟进案件</a><a class="f48">{{statisticCasesData.todayCasesToFollowUp == undefined ? 0 : statisticCasesData.todayCasesToFollowUp}}</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="donotfollowup2">
|
||||||
|
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f20 mb-32">超3天未跟进案件</a><a class="f48">{{statisticCasesData.overThreeDaysUnfollowedCases == undefined ? 0 : statisticCasesData.overThreeDaysUnfollowedCases}}</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="donotfollowup3">
|
||||||
|
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f20 mb-32">超5天未跟进案件</a><a class="f48">{{statisticCasesData.overFiveDaysUnfollowedCases == undefined ? 0 : statisticCasesData.overFiveDaysUnfollowedCases}}</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="donotfollowup4">
|
||||||
|
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f20 mb-32">新案未跟进案件</a><a class="f48">{{statisticCasesData.newUnfollowedCases == undefined ? 0 : statisticCasesData.newUnfollowedCases}}</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="case-follow-cont">
|
<div class="border-radius-4 flex-column casework2-2 p-16">
|
||||||
<div class="donotfollowup1">
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f48">{{statisticCasesData.todayCasesToFollowUp}}</a><a class="f16">今日待跟进案件</a></span>
|
<span class="f18 f-weight500">预约回款情况</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="donotfollowup2">
|
<div class="case-pk-cont flex-column">
|
||||||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f48">{{statisticCasesData.overThreeDaysUnfollowedCases}}</a><a class="f16">超3天未跟进案件</a></span>
|
<div id="echartsCaserefund" style="width: 100%; height: 285px; ">
|
||||||
</div>
|
|
||||||
<div class="donotfollowup3">
|
</div>
|
||||||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f48">{{statisticCasesData.overFiveDaysUnfollowedCases}}</a><a class="f16">超5天未跟进案件</a></span>
|
|
||||||
</div>
|
|
||||||
<div class="donotfollowup4">
|
|
||||||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')"><a class="f48">{{statisticCasesData.newUnfollowedCases}}</a><a class="f16">新案未跟进案件</a></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="border-radius-4 flex-column casework3">
|
<div class="border-radius-4 flex-column casework3">
|
||||||
<div class="flex-column pie-chart">
|
|
||||||
<div class="flex-row justify-content-between case-pk-title">
|
|
||||||
<span>调解成功率</span>
|
|
||||||
<div class="flex-row">
|
|
||||||
<span>
|
|
||||||
<el-select v-model="queryParamCGL.id"
|
|
||||||
placeholder="请选择案件包"
|
|
||||||
class="width100" size="mini" @change="SuccessRateChange">
|
|
||||||
<el-option
|
|
||||||
v-for="item in casePkOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.pkgName"
|
|
||||||
:value="item.id">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="case-pk-cont flex-column">
|
|
||||||
<div>
|
|
||||||
<div id="echartsSankey" style="width: 370px; height: 270px; margin-left: 10px">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<span class="resultplan" v-if="mediation_success_rate.caseTotal > 0 ">{{ (mediation_success_rate.mediateSuccess/mediation_success_rate.caseTotal).toFixed(2) }} %</span>
|
|
||||||
<span class="resultplan" v-else>0 %</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row justify-content-between">
|
|
||||||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.caseTotal}}</a><a>总案件数</a></span>
|
|
||||||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateSuccess}}</a><a>调解成功</a></span>
|
|
||||||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateFail}}</a><a>调解失败</a></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-column item-trace">
|
<div class="flex-column item-trace">
|
||||||
<div class="flex-row justify-content-between case-pk-title">
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
<span>事项追踪</span>
|
<span>事项追踪</span>
|
||||||
@ -143,6 +144,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-column pie-chart">
|
||||||
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
|
<span>调解成功率</span>
|
||||||
|
<div class="flex-row">
|
||||||
|
<span>
|
||||||
|
<el-select v-model="queryParamCGL.id"
|
||||||
|
placeholder="请选择案件包"
|
||||||
|
class="width100" size="mini" @change="SuccessRateChange">
|
||||||
|
<el-option
|
||||||
|
v-for="item in casePkOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.pkgName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="case-pk-cont flex-column">
|
||||||
|
<div>
|
||||||
|
<div id="echartsSankey" style="width: 370px; height: 215px; margin-left: 10px">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<span class="resultplan" v-if="mediation_success_rate.caseTotal > 0 ">{{ (mediation_success_rate.mediateSuccess/mediation_success_rate.caseTotal).toFixed(2) }} %</span>
|
||||||
|
<span class="resultplan" v-else>0 %</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row justify-content-between">
|
||||||
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.caseTotal}}</a><a>总案件数</a></span>
|
||||||
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateSuccess}}</a><a>调解成功</a></span>
|
||||||
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateFail}}</a><a>调解失败</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -265,6 +301,8 @@
|
|||||||
this.getCaseapkList()
|
this.getCaseapkList()
|
||||||
this.getstatisticcases()
|
this.getstatisticcases()
|
||||||
this.getstatistic_trace()
|
this.getstatistic_trace()
|
||||||
|
this.ReachrateCharts()
|
||||||
|
this.CaserefundCharts()
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -313,49 +351,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 导入
|
|
||||||
handleImport(){
|
|
||||||
this.importCaseDialog={
|
|
||||||
title:'批量导入案件',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 案件分配
|
|
||||||
handleCaseAllocation(row){
|
|
||||||
if((row.caseTotal - row.assignTotal) <= 0)
|
|
||||||
{
|
|
||||||
this.$message({
|
|
||||||
showClose: true,
|
|
||||||
message: '该案件包没有待分配的案件！',
|
|
||||||
type: 'warning'
|
|
||||||
});
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
this.caseAllocationDialog={
|
|
||||||
title:'案件分配',
|
|
||||||
ObjectInfo:row
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 单条删除
|
|
||||||
handleDelete(row){
|
|
||||||
this.$confirm("请确定是否删除此条数据?", "提示", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning",
|
|
||||||
}).then(() => {
|
|
||||||
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
||||||
pkapi.CasePkgdeleteById({id:row.id}).then((res) => {
|
|
||||||
|
|
||||||
this.$message.success("删除成功");
|
|
||||||
this.getCaseInfoList(1)
|
|
||||||
|
|
||||||
});
|
|
||||||
}).catch(() => {});
|
|
||||||
},
|
|
||||||
SuccessRateChange(){
|
SuccessRateChange(){
|
||||||
this.drawCharts()
|
this.drawCharts()
|
||||||
},
|
},
|
||||||
@ -387,7 +382,7 @@
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['40%', '70%'],
|
radius: ['60%', '85%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -413,6 +408,109 @@
|
|||||||
_that.myEcharts.setOption(option, true);
|
_that.myEcharts.setOption(option, true);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 本人触达率
|
||||||
|
async ReachrateCharts () {
|
||||||
|
if (this.myEchartsReachrate) {
|
||||||
|
this.myEchartsReachrate.clear();
|
||||||
|
}
|
||||||
|
this.myEchartsReachrate = this.$echarts.init(
|
||||||
|
document.getElementById("echartsReachrate")
|
||||||
|
);
|
||||||
|
let _that = this;
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 22,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: "5%",
|
||||||
|
left: "center",
|
||||||
|
show: false, //取消显示图例
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['60%', '85%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: false, //hover圆环中的列子
|
||||||
|
fontSize: 40,
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 0, name: '未触达债务人数',itemStyle:{color:'#E1EDF4'} },
|
||||||
|
{ value: 0, name: '已触达债务人数' ,itemStyle:{color:'#E4F3CE'}},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
_that.myEchartsReachrate.setOption(option, true);
|
||||||
|
|
||||||
|
},
|
||||||
|
// 预约回款情况
|
||||||
|
async CaserefundCharts () {
|
||||||
|
let case_rank_rate = [0,0,0,0,0,0,0]
|
||||||
|
if (this.myEchartsCaseRefund) {
|
||||||
|
this.myEchartsCaseRefund.clear();
|
||||||
|
}
|
||||||
|
this.myEchartsCaseRefund = this.$echarts.init(
|
||||||
|
document.getElementById("echartsCaserefund")
|
||||||
|
);
|
||||||
|
let _that = this;
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '2%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar',
|
||||||
|
name:'预约回款金额',
|
||||||
|
color:'#FBA440'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar',
|
||||||
|
name:'回款金额',
|
||||||
|
color:'#4091FB'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
_that.myEchartsCaseRefund.setOption(option, true);
|
||||||
|
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
@ -439,7 +537,7 @@
|
|||||||
padding: 20px;
|
padding: 20px;
|
||||||
.case-title{
|
.case-title{
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding-top: 10px;
|
// padding-top: 10px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color:#1D2129;
|
color:#1D2129;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -470,79 +568,123 @@
|
|||||||
}
|
}
|
||||||
.case-pro1{width: 155px;height: 105px;}
|
.case-pro1{width: 155px;height: 105px;}
|
||||||
}
|
}
|
||||||
.casework2{
|
.casework-1{
|
||||||
background-color: #E1EDF4;
|
background-color: #fff;
|
||||||
min-height:496px;
|
border-radius: 8px;
|
||||||
margin:4px 0 0 0;
|
margin-top: 15px;
|
||||||
width: calc(100% - 830px);
|
|
||||||
padding: 18px;
|
|
||||||
color: #4E5969;
|
|
||||||
.case-pk-title{
|
.case-pk-title{
|
||||||
span:first-child{
|
span:first-child{
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color:#1D2129;
|
color:#1D2129;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.case-pk-btn{
|
|
||||||
width: 90px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 30px;
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.case-follow-cont{
|
.case-pk-cont{
|
||||||
.donotfollowup1{
|
padding: 10px 0;
|
||||||
background:url(../../../assets/image/workbench/donotfollowup1.png) no-repeat;
|
position: relative;
|
||||||
background-size: 100% 100%;
|
.resultplan{
|
||||||
width: calc(50% - 10px);
|
color: #86909C;
|
||||||
height: 400px;
|
font-size: 16px;
|
||||||
padding-top: 140px;
|
position: absolute;
|
||||||
|
left: 65px;
|
||||||
|
top: 110px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 125px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
float: left;
|
p{padding: 0;margin: 0;}
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.donotfollowup2{
|
|
||||||
background:url(../../../assets/image/workbench/donotfollowup2.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width: calc(50% - 10px);
|
|
||||||
height: 400px;
|
|
||||||
padding-top: 140px;
|
|
||||||
text-align: center;
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.donotfollowup3{
|
|
||||||
background:url(../../../assets/image/workbench/donotfollowup3.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width: calc(50% - 10px);
|
|
||||||
height: 400px;
|
|
||||||
padding-top: 140px;
|
|
||||||
text-align: center;
|
|
||||||
float: left;
|
|
||||||
margin-right: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.donotfollowup4{
|
|
||||||
background:url(../../../assets/image/workbench/donotfollowup4.png) no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
width: calc(50% - 10px);
|
|
||||||
height: 400px;
|
|
||||||
padding-top: 140px;
|
|
||||||
text-align: center;
|
|
||||||
float: left;
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.casework2{
|
||||||
|
width: calc(100% - 830px);
|
||||||
|
.casework2-1{
|
||||||
|
background-color: #E1EDF4;
|
||||||
|
min-height:496px;
|
||||||
|
margin:4px 0 0 0;
|
||||||
|
|
||||||
|
padding: 18px;
|
||||||
|
color: #4E5969;
|
||||||
|
|
||||||
|
|
||||||
|
.case-pk-title{
|
||||||
|
span:first-child{
|
||||||
|
font-size: 18px;
|
||||||
|
color:#1D2129;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.case-pk-btn{
|
||||||
|
width: 90px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.case-follow-cont{
|
||||||
|
padding: 15px 0 30px 0;
|
||||||
|
.donotfollowup1{
|
||||||
|
background:url(../../../assets/image/workbench/donotfollowup1.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: calc(50% - 10px);
|
||||||
|
height: 462px;
|
||||||
|
padding-top: 140px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.donotfollowup2{
|
||||||
|
background:url(../../../assets/image/workbench/donotfollowup2.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: calc(50% - 10px);
|
||||||
|
height: 462px;
|
||||||
|
padding-top: 140px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.donotfollowup3{
|
||||||
|
background:url(../../../assets/image/workbench/donotfollowup4.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: calc(50% - 10px);
|
||||||
|
height: 462px;
|
||||||
|
padding-top: 140px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.donotfollowup4{
|
||||||
|
background:url(../../../assets/image/workbench/donotfollowup3.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: calc(50% - 10px);
|
||||||
|
height: 462px;
|
||||||
|
padding-top: 140px;
|
||||||
|
text-align: center;
|
||||||
|
float: left;
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.casework2-2{
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.casework3{
|
.casework3{
|
||||||
min-height:496px;
|
min-height:496px;
|
||||||
@ -550,6 +692,7 @@
|
|||||||
margin:4px 0 0 0;
|
margin:4px 0 0 0;
|
||||||
color: #4E5969;
|
color: #4E5969;
|
||||||
.pie-chart{
|
.pie-chart{
|
||||||
|
margin-top: 18px;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -563,13 +706,13 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
.case-pk-cont{
|
.case-pk-cont{
|
||||||
padding: 20px 0;
|
padding: 10px 0 10px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
.resultplan{
|
.resultplan{
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 115px;
|
left: 115px;
|
||||||
top: 130px;
|
top: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -582,7 +725,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-trace{
|
.item-trace{
|
||||||
margin-top: 20px;
|
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -595,7 +737,7 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
.case-pk-cont{
|
.case-pk-cont{
|
||||||
padding: 10px 0 0px 0;
|
padding: 21px 0 0px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
.resultplan{
|
.resultplan{
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
@ -610,11 +752,11 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
div{
|
div{
|
||||||
margin-top:5px;
|
margin-top:10px;
|
||||||
margin-bottom:10px;
|
margin-bottom:15px;
|
||||||
color: #4E5969;
|
color: #4E5969;
|
||||||
background-color:#F7F8FA ;
|
background-color:#F7F8FA ;
|
||||||
padding: 12px;
|
padding: 14px 12px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
a{
|
a{
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
@ -6,153 +6,144 @@
|
|||||||
<span>你好，{{userInfo.realName || userInfo.showName ||'-'}}</span>
|
<span>你好，{{userInfo.realName || userInfo.showName ||'-'}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-row justify-content-between work-main p-16">
|
<div class="flex-row justify-content-between work-main p-16">
|
||||||
<div class="border-radius-4 flex-column casework1">
|
<div class="flex-column ">
|
||||||
<div class="flex-row justify-content-between case-title">
|
<div class="border-radius-4 flex-column casework1">
|
||||||
<span>案件进展情况</span>
|
<div class="flex-row justify-content-between case-title">
|
||||||
<span>
|
<span>案件进展情况</span>
|
||||||
<el-select v-model="queryParamJZ.id"
|
|
||||||
placeholder="请选择案件包"
|
|
||||||
class="width100" size="mini" @change="progressChange">
|
|
||||||
<el-option
|
|
||||||
v-for="item in casePkOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.pkgName"
|
|
||||||
:value="item.id">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="p-16 case-progress-cont">
|
|
||||||
<div class="case-progress">
|
|
||||||
<span class="case-pro1">
|
|
||||||
<p>案件总量</p>
|
|
||||||
<p><a>{{caseprogressObj.caseTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro2">
|
|
||||||
<p>案件待分</p>
|
|
||||||
<p><a>{{caseprogressObj.unassignTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro3">
|
|
||||||
<p>未触达</p>
|
|
||||||
<p><a>{{caseprogressObj.notReachTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro1">
|
|
||||||
<p>调解中</p>
|
|
||||||
<p><a>{{caseprogressObj.mediatingTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro2">
|
|
||||||
<p>调解成功</p>
|
|
||||||
<p><a>{{caseprogressObj.mediateSuccess}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro3">
|
|
||||||
<p>已签署协议</p>
|
|
||||||
<p><a>{{caseprogressObj.signTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro1">
|
|
||||||
<p>已司法确认</p>
|
|
||||||
<p><a>{{caseprogressObj.judicialTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
<span class="case-pro2">
|
|
||||||
<p>已赋强公证</p>
|
|
||||||
<p><a>{{caseprogressObj.notarizationTotal}}</a>件</p>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-radius-4 flex-column casework2">
|
|
||||||
<div class="flex-row justify-content-between case-pk-title">
|
|
||||||
<span>待分配案件包</span>
|
|
||||||
<div class="flex-row">
|
|
||||||
<span>
|
<span>
|
||||||
<el-select v-model="queryParamFP.pkgName"
|
<el-select v-model="queryParamJZ.id"
|
||||||
clearable placeholder="请选择案件包"
|
placeholder="请选择案件包"
|
||||||
@change="handleSearch()"
|
class="width100" size="mini" @change="progressChange">
|
||||||
class="width100" size="mini">
|
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in casePkOptions"
|
v-for="item in casePkOptions"
|
||||||
:key="item.pkgName"
|
:key="item.id"
|
||||||
:label="item.pkgName"
|
:label="item.pkgName"
|
||||||
:value="item.pkgName">
|
:value="item.id">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</span>
|
</span>
|
||||||
<span class="case-pk-btn ml-16" @click="handleImport"><i class="el-icon-upload2"></i>批量导入</span>
|
|
||||||
<!-- <span class="case-pk-btn"><i class="el-icon-plus"></i>添加案件</span> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="p-16 case-progress-cont">
|
||||||
</div>
|
<div class="case-progress">
|
||||||
<div class="case-pk-cont flex-column">
|
<span class="case-pro1">
|
||||||
<el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
|
<p>案件总量</p>
|
||||||
<div v-for="(item,index) in tableData" :key="index" class="case-pk-list">
|
<p><a>{{caseprogressObj.caseTotal}}</a>件</p>
|
||||||
<div class="flex-row justify-content-between mb-8">
|
</span>
|
||||||
<span class="f20 f-weight500">{{item.pkgName}}</span>
|
<span class="case-pro2">
|
||||||
<span class="cursor-pointer" @click="jumpUrl(`/case-management?dataKey=casepack&pkgId=${item.id}`)">查看详情 ></span>
|
<p>案件待分</p>
|
||||||
</div>
|
<p><a>{{caseprogressObj.unassignTotal}}</a>件</p>
|
||||||
<div class="flex-row mb-16">
|
</span>
|
||||||
<span>{{item.entrustingAgencyName}}</span>
|
<span class="case-pro3">
|
||||||
<span class="ml-16">委案日期：{{item.planStartTime | formaDate('yyyy-MM-dd')}}</span>
|
<p>未触达</p>
|
||||||
</div>
|
<p><a>{{caseprogressObj.notReachTotal}}</a>件</p>
|
||||||
<div class="flex-row justify-content-between case-pk-num mb-16">
|
</span>
|
||||||
<span>
|
<span class="case-pro1">
|
||||||
<p><a>{{item.caseTotal}}</a>件</p>
|
<p>调解中</p>
|
||||||
案件总量
|
<p><a>{{caseprogressObj.mediatingTotal}}</a>件</p>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span class="case-pro2">
|
||||||
<p><a>{{item.assignTotal}}</a>件</p>
|
<p>调解成功</p>
|
||||||
已分案件数
|
<p><a>{{caseprogressObj.mediateSuccess}}</a>件</p>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span class="case-pro3">
|
||||||
<p><a>{{item.caseTotal - item.assignTotal}}</a>件</p>
|
<p>已签署协议</p>
|
||||||
待分案件数
|
<p><a>{{caseprogressObj.signTotal}}</a>件</p>
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span class="case-pro1">
|
||||||
<p><a>{{item.months}}</a>个月</p>
|
<p>已司法确认</p>
|
||||||
委案期限
|
<p><a>{{caseprogressObj.judicialTotal}}</a>件</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span class="case-pro2">
|
||||||
<div class="flex-row justify-content-end mb-8">
|
<p>已赋强公证</p>
|
||||||
<el-button size="mini" type="primary" @click="handleCaseAllocation(item)">案件分配</el-button>
|
<p><a>{{caseprogressObj.notarizationTotal}}</a>件</p>
|
||||||
<!-- <el-button size="mini" @click="handleEdit(scope)">预设还款方案</el-button> -->
|
|
||||||
<!-- <el-button size="mini" @click="handleDelete(item)">删除</el-button> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-radius-4 flex-column casework3">
|
|
||||||
<div class="flex-column pie-chart">
|
|
||||||
<div class="flex-row justify-content-between case-pk-title">
|
|
||||||
<span>调解成功率</span>
|
|
||||||
<div class="flex-row">
|
|
||||||
<span>
|
|
||||||
<el-select v-model="queryParamCGL.id"
|
|
||||||
placeholder="请选择案件包"
|
|
||||||
class="width100" size="mini" @change="SuccessRateChange">
|
|
||||||
<el-option
|
|
||||||
v-for="item in casePkOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.pkgName"
|
|
||||||
:value="item.id">
|
|
||||||
</el-option>
|
|
||||||
</el-select>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-column casework-1 p-16">
|
||||||
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
|
<span class="f18 f-weight500">办案量排行榜</span>
|
||||||
|
</div>
|
||||||
<div class="case-pk-cont flex-column">
|
<div class="case-pk-cont flex-column">
|
||||||
<div>
|
<div id="echartsCaserank" style="width: 370px; height: 285px; ">
|
||||||
<div id="echartsSankey" style="width: 370px; height: 270px; margin-left: 10px">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<span class="resultplan" v-if="mediation_success_rate.caseTotal > 0 ">{{ (mediation_success_rate.mediateSuccess/mediation_success_rate.caseTotal).toFixed(2) }} %</span>
|
|
||||||
<span class="resultplan" v-else>0 %</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex-row justify-content-between">
|
|
||||||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.caseTotal}}</a><a>总案件数</a></span>
|
|
||||||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateSuccess}}</a><a>调解成功</a></span>
|
|
||||||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateFail}}</a><a>调解失败</a></span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="casework2">
|
||||||
|
<div class="border-radius-4 flex-column casework2-1">
|
||||||
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
|
<span>待办案件包</span>
|
||||||
|
<div class="flex-row">
|
||||||
|
<span>
|
||||||
|
<el-select v-model="queryParamFP.pkgName"
|
||||||
|
clearable placeholder="请选择案件包"
|
||||||
|
@change="handleSearch()"
|
||||||
|
class="width100" size="mini">
|
||||||
|
<el-option
|
||||||
|
v-for="item in casePkOptions"
|
||||||
|
:key="item.pkgName"
|
||||||
|
:label="item.pkgName"
|
||||||
|
:value="item.pkgName">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</span>
|
||||||
|
<span class="case-pk-btn ml-16" @click="handleImport"><i class="el-icon-upload2"></i>批量导入</span>
|
||||||
|
<!-- <span class="case-pk-btn"><i class="el-icon-plus"></i>添加案件</span> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="case-pk-cont flex-column">
|
||||||
|
<el-scrollbar :style="'height:'+`${leftContentHeight}`+'px'">
|
||||||
|
<div v-for="(item,index) in tableData" :key="index" class="case-pk-list">
|
||||||
|
<div class="flex-row justify-content-between mb-8">
|
||||||
|
<span class="f20 f-weight500">{{item.pkgName}}</span>
|
||||||
|
<span class="cursor-pointer" @click="jumpUrl(`/case-management?dataKey=casepack&pkgName=${item.pkgName}`)">查看详情 ></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row mb-16">
|
||||||
|
<span>{{item.entrustingAgencyName}}</span>
|
||||||
|
<span class="ml-16">委案日期：{{item.planStartTime | formaDate('yyyy-MM-dd')}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row justify-content-between case-pk-num mb-16">
|
||||||
|
<span>
|
||||||
|
<p><a>{{item.caseTotal}}</a>件</p>
|
||||||
|
案件总量
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<p><a>{{item.assignTotal}}</a>件</p>
|
||||||
|
已分案件数
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<p><a>{{item.caseTotal - item.assignTotal}}</a>件</p>
|
||||||
|
待分案件数
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
<p><a>{{item.months}}</a>个月</p>
|
||||||
|
委案期限
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row justify-content-end mb-8">
|
||||||
|
<el-button size="mini" type="primary" @click="handleCaseAllocation(item)">案件分配</el-button>
|
||||||
|
<!-- <el-button size="mini" @click="handleEdit(scope)">预设还款方案</el-button> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-radius-4 flex-column casework2-2 p-16">
|
||||||
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
|
<span class="f18 f-weight500">预约回款情况</span>
|
||||||
|
</div>
|
||||||
|
<div class="case-pk-cont flex-column">
|
||||||
|
<div id="echartsCaserefund" style="width: 100%; height: 285px; ">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border-radius-4 flex-column casework3">
|
||||||
<div class="flex-column item-trace">
|
<div class="flex-column item-trace">
|
||||||
<div class="flex-row justify-content-between case-pk-title">
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
<span>事项追踪</span>
|
<span>事项追踪</span>
|
||||||
@ -184,6 +175,39 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex-column pie-chart">
|
||||||
|
<div class="flex-row justify-content-between case-pk-title">
|
||||||
|
<span>调解成功率</span>
|
||||||
|
<div class="flex-row">
|
||||||
|
<span>
|
||||||
|
<el-select v-model="queryParamCGL.id"
|
||||||
|
placeholder="请选择案件包"
|
||||||
|
class="width100" size="mini" @change="SuccessRateChange">
|
||||||
|
<el-option
|
||||||
|
v-for="item in casePkOptions"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.pkgName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="case-pk-cont flex-column">
|
||||||
|
<div>
|
||||||
|
<div id="echartsSankey" style="width: 370px; height: 216px; margin-left: 10px">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<span class="resultplan" v-if="mediation_success_rate.caseTotal > 0 ">{{ (mediation_success_rate.mediateSuccess/mediation_success_rate.caseTotal).toFixed(2) }} %</span>
|
||||||
|
<span class="resultplan" v-else>0 %</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row justify-content-between">
|
||||||
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.caseTotal}}</a><a>总案件数</a></span>
|
||||||
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateSuccess}}</a><a>调解成功</a></span>
|
||||||
|
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">{{mediation_success_rate.mediateFail}}</a><a>调解失败</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -204,7 +228,7 @@
|
|||||||
import api from "@/services/caseManagement";
|
import api from "@/services/caseManagement";
|
||||||
import workApi from "@/services/workbenchApi";
|
import workApi from "@/services/workbenchApi";
|
||||||
import pkapi from "@/services/casePackageManagement";
|
import pkapi from "@/services/casePackageManagement";
|
||||||
import { color } from "echarts";
|
import { color } from "echarts";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
importPackageDialog: () => import('../case-package/components/importPackageDialog'),//导入
|
importPackageDialog: () => import('../case-package/components/importPackageDialog'),//导入
|
||||||
@ -288,9 +312,9 @@ import { color } from "echarts";
|
|||||||
},
|
},
|
||||||
// 获取抽屉drawer的内容高度
|
// 获取抽屉drawer的内容高度
|
||||||
leftContentHeight(){
|
leftContentHeight(){
|
||||||
let oh = document.documentElement.clientHeight;
|
// let oh = document.documentElement.clientHeight;
|
||||||
if(oh > 971){oh = 971}
|
// if(oh > 971){oh = 971}
|
||||||
return oh-256
|
return 510
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -315,6 +339,8 @@ import { color } from "echarts";
|
|||||||
this.getCaseInfoList()
|
this.getCaseInfoList()
|
||||||
this.getstatisticcases()
|
this.getstatisticcases()
|
||||||
this.getstatistic_trace()
|
this.getstatistic_trace()
|
||||||
|
this.CaseloadrankCharts()
|
||||||
|
this.CaserefundCharts()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
jumpUrl (url) {
|
jumpUrl (url) {
|
||||||
@ -402,22 +428,6 @@ import { color } from "echarts";
|
|||||||
ObjectInfo:row
|
ObjectInfo:row
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 单条删除
|
|
||||||
handleDelete(row){
|
|
||||||
this.$confirm("请确定是否删除此条数据?", "提示", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning",
|
|
||||||
}).then(() => {
|
|
||||||
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
||||||
pkapi.CasePkgdeleteById({id:row.id}).then((res) => {
|
|
||||||
|
|
||||||
this.$message.success("删除成功");
|
|
||||||
this.getCaseInfoList(1)
|
|
||||||
|
|
||||||
});
|
|
||||||
}).catch(() => {});
|
|
||||||
},
|
|
||||||
SuccessRateChange(){
|
SuccessRateChange(){
|
||||||
this.drawCharts()
|
this.drawCharts()
|
||||||
},
|
},
|
||||||
@ -449,7 +459,7 @@ import { color } from "echarts";
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['40%', '70%'],
|
radius: ['60%', '85%'],
|
||||||
avoidLabelOverlap: false,
|
avoidLabelOverlap: false,
|
||||||
label: {
|
label: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -475,6 +485,112 @@ import { color } from "echarts";
|
|||||||
_that.myEcharts.setOption(option, true);
|
_that.myEcharts.setOption(option, true);
|
||||||
|
|
||||||
},
|
},
|
||||||
|
// 办案量排行榜
|
||||||
|
async CaseloadrankCharts () {
|
||||||
|
let operateMethodOptions=[]
|
||||||
|
await api.getCurrGroupUserList().then(res => {
|
||||||
|
if (!res.code) {
|
||||||
|
res.forEach(element => {
|
||||||
|
operateMethodOptions.push(element.realName)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let case_rank_rate = [0,0,0,0,0,0,0]
|
||||||
|
if (this.myEchartsCaseRank) {
|
||||||
|
this.myEchartsCaseRank.clear();
|
||||||
|
}
|
||||||
|
this.myEchartsCaseRank = this.$echarts.init(
|
||||||
|
document.getElementById("echartsCaserank")
|
||||||
|
);
|
||||||
|
let _that = this;
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false, //取消显示图例
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top:'5%',
|
||||||
|
left: '1%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 1]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: operateMethodOptions,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
itemStyle: {
|
||||||
|
color: '#FBA440'
|
||||||
|
},
|
||||||
|
type: 'bar',
|
||||||
|
data: case_rank_rate
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
_that.myEchartsCaseRank.setOption(option, true);
|
||||||
|
|
||||||
|
},
|
||||||
|
// 预约回款情况
|
||||||
|
async CaserefundCharts () {
|
||||||
|
let case_rank_rate = [0,0,0,0,0,0,0]
|
||||||
|
if (this.myEchartsCaseRefund) {
|
||||||
|
this.myEchartsCaseRefund.clear();
|
||||||
|
}
|
||||||
|
this.myEchartsCaseRefund = this.$echarts.init(
|
||||||
|
document.getElementById("echartsCaserefund")
|
||||||
|
);
|
||||||
|
let _that = this;
|
||||||
|
var option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '2%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar',
|
||||||
|
name:'预约回款金额',
|
||||||
|
color:'#FBA440'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
data: [120, 200, 150, 80, 70, 110, 130],
|
||||||
|
type: 'bar',
|
||||||
|
name:'回款金额',
|
||||||
|
color:'#4091FB'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
_that.myEchartsCaseRefund.setOption(option, true);
|
||||||
|
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
@ -497,11 +613,10 @@ import { color } from "echarts";
|
|||||||
background:url(../../assets/image/workbench/work-left-bg.png) no-repeat;
|
background:url(../../assets/image/workbench/work-left-bg.png) no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
// min-height:496px;
|
// min-height:496px;
|
||||||
width: 400px;
|
width: 412px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
.case-title{
|
.case-title{
|
||||||
height: 60px;
|
height: 50px;
|
||||||
padding-top: 10px;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color:#1D2129;
|
color:#1D2129;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -532,59 +647,72 @@ import { color } from "echarts";
|
|||||||
}
|
}
|
||||||
.case-pro1{width: 155px;height: 105px;}
|
.case-pro1{width: 155px;height: 105px;}
|
||||||
}
|
}
|
||||||
|
.casework-1{
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
.casework2{
|
.casework2{
|
||||||
background-color: #E1EDF4;
|
width: calc(100% - 850px);
|
||||||
min-height:496px;
|
.casework2-1{
|
||||||
margin:4px 0 0 0;
|
background-color: #E1EDF4;
|
||||||
width: calc(100% - 830px);
|
height:578px;
|
||||||
padding: 18px;
|
margin:4px 0 0 0;
|
||||||
color: #4E5969;
|
|
||||||
.case-pk-title{
|
padding: 18px;
|
||||||
span:first-child{
|
color: #4E5969;
|
||||||
font-size: 18px;
|
.case-pk-title{
|
||||||
color:#1D2129;
|
span:first-child{
|
||||||
font-weight: 500;
|
font-size: 18px;
|
||||||
}
|
color:#1D2129;
|
||||||
.case-pk-btn{
|
font-weight: 500;
|
||||||
width: 90px;
|
}
|
||||||
font-size: 14px;
|
.case-pk-btn{
|
||||||
text-align: center;
|
width: 90px;
|
||||||
line-height: 30px;
|
font-size: 14px;
|
||||||
display: inline-block;
|
text-align: center;
|
||||||
cursor: pointer;
|
line-height: 30px;
|
||||||
|
display: inline-block;
|
||||||
}
|
cursor: pointer;
|
||||||
}
|
|
||||||
.case-pk-cont{
|
|
||||||
.case-pk-list{
|
|
||||||
background-color: #fff;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-top: 20px;
|
|
||||||
.case-pk-num{
|
|
||||||
background-color: #F7F8FA;
|
|
||||||
height:85px ;
|
|
||||||
padding-top: 20px;
|
|
||||||
span{
|
|
||||||
|
|
||||||
width: 25%;
|
|
||||||
text-align: center;
|
|
||||||
border-right: solid 2px #e5e6e8;
|
|
||||||
height: 45px;
|
|
||||||
p{margin: 0;
|
|
||||||
a{
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
span:last-child{border-right: 0;}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.case-pk-cont{
|
||||||
}
|
.case-pk-list{
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 20px;
|
||||||
|
.case-pk-num{
|
||||||
|
background-color: #F7F8FA;
|
||||||
|
height:85px ;
|
||||||
|
padding-top: 20px;
|
||||||
|
span{
|
||||||
|
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
border-right: solid 2px #e5e6e8;
|
||||||
|
height: 45px;
|
||||||
|
p{margin: 0;
|
||||||
|
a{
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span:last-child{border-right: 0;}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.casework2-2{
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.casework3{
|
.casework3{
|
||||||
min-height:496px;
|
min-height:496px;
|
||||||
@ -592,6 +720,7 @@ import { color } from "echarts";
|
|||||||
margin:4px 0 0 0;
|
margin:4px 0 0 0;
|
||||||
color: #4E5969;
|
color: #4E5969;
|
||||||
.pie-chart{
|
.pie-chart{
|
||||||
|
margin-top: 18px;
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -605,13 +734,13 @@ import { color } from "echarts";
|
|||||||
|
|
||||||
}
|
}
|
||||||
.case-pk-cont{
|
.case-pk-cont{
|
||||||
padding: 20px 0;
|
padding: 10px 0 10px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
.resultplan{
|
.resultplan{
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 115px;
|
left: 115px;
|
||||||
top: 130px;
|
top: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -624,7 +753,6 @@ import { color } from "echarts";
|
|||||||
}
|
}
|
||||||
|
|
||||||
.item-trace{
|
.item-trace{
|
||||||
margin-top: 20px;
|
|
||||||
padding: 18px;
|
padding: 18px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -652,11 +780,11 @@ import { color } from "echarts";
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
div{
|
div{
|
||||||
margin-top:5px;
|
margin-top:10px;
|
||||||
margin-bottom:10px;
|
margin-bottom:15px;
|
||||||
color: #4E5969;
|
color: #4E5969;
|
||||||
background-color:#F7F8FA ;
|
background-color:#F7F8FA ;
|
||||||
padding: 12px;
|
padding: 14px 12px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
a{
|
a{
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user