855 lines
37 KiB
Vue
855 lines
37 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <el-scrollbar :style="'height:'+`${contentHeight}`+'px'"> -->
|
||
<div class="layout-content-wrap flex-column">
|
||
<div class="work-hello">
|
||
<span>你好，{{userInfo.realName || userInfo.showName ||'-'}}</span>
|
||
</div>
|
||
<div class="flex-row justify-content-between work-main p-16">
|
||
<div class="flex-column ">
|
||
<div class="border-radius-4 flex-column casework1">
|
||
<div class="flex-row justify-content-between case-title">
|
||
<span>案件进展情况</span>
|
||
<span>
|
||
<el-select v-model="queryParamJZ.id"
|
||
placeholder="请选择案件包"
|
||
class="width100" size="mini" @change="JZChange">
|
||
<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>
|
||
<img src="../../../assets/image/workbench/progress1.png">
|
||
</span>
|
||
<span class="case-pro2">
|
||
<p>已办结案件</p>
|
||
<p><a>{{caseprogressObj.finishTotal}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress8.png">
|
||
</span>
|
||
<span class="case-pro3">
|
||
<p>未触达</p>
|
||
<p><a>{{caseprogressObj.notReachTotal}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress3.png">
|
||
</span>
|
||
<span class="case-pro4">
|
||
<p>调解中</p>
|
||
<p><a>{{caseprogressObj.mediatingTotal}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress2.png">
|
||
</span>
|
||
<span class="case-pro5">
|
||
<p>调解成功</p>
|
||
<p><a>{{caseprogressObj.mediateSuccess}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress5.png">
|
||
</span>
|
||
<span class="case-pro6">
|
||
<p>已签署协议</p>
|
||
<p><a>{{caseprogressObj.signTotal}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress6.png">
|
||
</span>
|
||
<span class="case-pro7">
|
||
<p>已司法确认</p>
|
||
<p><a>{{caseprogressObj.judicialTotal}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress4.png">
|
||
</span>
|
||
<span class="case-pro8">
|
||
<p>已赋强公证</p>
|
||
<p><a>{{caseprogressObj.notarizationTotal}}</a>件</p>
|
||
<img src="../../../assets/image/workbench/progress7.png">
|
||
</span>
|
||
</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-row">
|
||
<div>
|
||
<div id="echartsReachrate" style="width: 254px; height: 264px; ">
|
||
|
||
</div>
|
||
<span class="resultplan" >
|
||
<p><a class="color-000 f22">0</a>人</p>
|
||
<p>触达率<a class="color-000">0</a>%</p>
|
||
</span>
|
||
</div>
|
||
<div class="flex-column justify-content-center">
|
||
<span class="flex-column align-items-center color-86909C"><a class="color-000 f16">0</a><a>已触达债务人数</a></span>
|
||
<span class="flex-column align-items-center color-86909C mt-16"><a class="color-000 f16">0</a><a>未触达债务人数</a></span>
|
||
</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>
|
||
<div class="case-follow-cont flex-row ">
|
||
<div class="donotfollowup1">
|
||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')">
|
||
<a><img src="../../../assets/image/workbench/Follow4.png" width="80"></a>
|
||
<a class="f24 mt-16 mb-16">今日待跟进案件</a>
|
||
<a class="f48 color-165DFF">{{statisticCasesData.todayCasesToFollowUp == undefined ? 0 : statisticCasesData.todayCasesToFollowUp}}</a>
|
||
</span>
|
||
</div>
|
||
<div class="donotfollowup2">
|
||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')">
|
||
<a><img src="../../../assets/image/workbench/Follow1.png" width="80"></a>
|
||
<a class="f24 mt-16 mb-16">超3天未跟进案件</a>
|
||
<a class="f48 color-165DFF">{{statisticCasesData.overThreeDaysUnfollowedCases == undefined ? 0 : statisticCasesData.overThreeDaysUnfollowedCases}}</a>
|
||
</span>
|
||
</div>
|
||
<div class="donotfollowup3">
|
||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')">
|
||
<a><img src="../../../assets/image/workbench/Follow2.png" width="80"></a>
|
||
<a class="f24 mt-16 mb-16">超5天未跟进案件</a>
|
||
<a class="f48 color-165DFF">{{statisticCasesData.overFiveDaysUnfollowedCases == undefined ? 0 : statisticCasesData.overFiveDaysUnfollowedCases}}</a>
|
||
</span>
|
||
</div>
|
||
<div class="donotfollowup4">
|
||
<span class="flex-column cursor-pointer" @click="jumpUrl('/mediation-management')">
|
||
<a><img src="../../../assets/image/workbench/Follow3.png" width="80"></a>
|
||
<a class="f24 mt-16 mb-16">新案未跟进案件</a>
|
||
<a class="f48 color-165DFF">{{statisticCasesData.newUnfollowedCases == undefined ? 0 : statisticCasesData.newUnfollowedCases}}</a>
|
||
</span>
|
||
</div>
|
||
</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-row justify-content-between case-pk-title">
|
||
<span>事项追踪</span>
|
||
</div>
|
||
<div class="case-pk-cont">
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:0,title:'发送短信追踪'}">
|
||
<span><i class="el-icon-message f16 mr-4"></i>发送短信</span><span><a>{{traceData.smsTrackingCount.failed ? traceData.smsTrackingCount.failed :'0'}}</a>/<a>{{traceData.smsTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:1,title:'智能电话外呼追踪'}">
|
||
<span><i class="el-icon-service f16 mr-4"></i>智能电话外呼</span><span><a>{{traceData.intelligentCallTrackingCount.failed ? traceData.intelligentCallTrackingCount.failed :'0'}}</a>/<a>{{traceData.intelligentCallTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:2,title:'在线视频调解追踪'}">
|
||
<span><i class="el-icon-video-camera f16 mr-4"></i>在线视频调解</span><span><a>{{traceData.videoAppointmentTrackingCount.failed ? traceData.videoAppointmentTrackingCount.failed :'0'}}</a>/<a>{{traceData.videoAppointmentTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:3,title:'文书生成追踪'}">
|
||
<span><i class="el-icon-document-checked f16 mr-4"></i>文书生成</span><span><a>{{traceData.documentGenerationTrackingCount.failed ? traceData.documentGenerationTrackingCount.failed :'0'}}</a>/<a>{{traceData.documentGenerationTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:4,title:'文书签字追踪'}">
|
||
<span><i class="el-icon-reading f16 mr-4"></i>文书签字</span><span><a>{{traceData.documentSignatureTrackingCount.failed ? traceData.documentSignatureTrackingCount.failed :'0'}}</a>/<a>{{traceData.documentSignatureTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:5,title:'协议文书签章追踪'}">
|
||
<span><i class="el-icon-coordinate f16 mr-4"></i>协议文书签章</span><span><a>{{traceData.electronicSealTrackingCount.failed ? traceData.electronicSealTrackingCount.failed :'0'}}</a>/<a>{{traceData.electronicSealTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:6,title:'文书送达追踪'}">
|
||
<span><i class="el-icon-mobile-phone f16 mr-4"></i>文书送达</span><span><a>{{traceData.documentDeliveryTrackingCount.failed ? traceData.documentDeliveryTrackingCount.failed :'0'}}</a>/<a>{{traceData.documentDeliveryTrackingCount.total}}</a></span>
|
||
</div>
|
||
<div class="flex-row justify-content-between cursor-pointer" @click="eventTraDialog={traceType:7,title:'还款凭证登记'}">
|
||
<span><i class="el-icon-school f16 mr-4"></i>还款凭证登记</span><span><a>{{traceData.repaymentRecordTrackingCount.failed ? traceData.repaymentRecordTrackingCount.failed :'0'}}</a>/<a>{{traceData.repaymentRecordTrackingCount.total}}</a></span>
|
||
</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>
|
||
<!-- </el-scrollbar> -->
|
||
|
||
<!-- 导入 -->
|
||
<importPackageDialog v-if="importCaseDialog" :importCaseDialog.sync="importCaseDialog" />
|
||
<!-- 案件分配-->
|
||
<caseAllocationDialog v-if="caseAllocationDialog" :caseAllocationDialog.sync="caseAllocationDialog" />
|
||
|
||
<!-- 事项追踪 -->
|
||
<eventTracingDialog v-if="eventTraDialog" :eventTraDialog.sync="eventTraDialog" />
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import api from "@/services/caseManagement";
|
||
import workApi from "@/services/workbenchApi";
|
||
import pkapi from "@/services/casePackageManagement";
|
||
export default {
|
||
components: {
|
||
importPackageDialog: () => import('../../case-package/components/importPackageDialog'),//导入
|
||
caseAllocationDialog: () => import('../../case-package/components/caseAllocationDialog'),//案件分配
|
||
eventTracingDialog: () => import('../../event-tracing/index.vue'),//事项追踪
|
||
},
|
||
data() {
|
||
return {
|
||
userInfo:{},
|
||
eventTraDialog:null,//事项追踪
|
||
casePkOptions:[],//案件包
|
||
queryParamJZ: {
|
||
pkgName:'',//案件包名称
|
||
id:'',
|
||
},
|
||
caseprogressObj:{},
|
||
queryParamCGL: {
|
||
pkgName:'',//案件包名称
|
||
id:'',
|
||
},
|
||
|
||
identifier:this.$store.state.userinfo.identifier,
|
||
detailDrawer:null,
|
||
editCaseDrawer:null,//编辑
|
||
|
||
caseAllocationDialog:null,//案件分配弹框
|
||
importCaseDialog:null,//导入
|
||
|
||
myEcharts: null,
|
||
traceData:{
|
||
"smsTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
},
|
||
"intelligentCallTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
},
|
||
"repaymentRecordTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
},
|
||
"documentSignatureTrackingCount": {
|
||
"total": 1,
|
||
"failed": 0
|
||
},
|
||
"documentDeliveryTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
},
|
||
"electronicSealTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
},
|
||
"documentGenerationTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
},
|
||
"videoAppointmentTrackingCount": {
|
||
"total": 0,
|
||
"failed": 0
|
||
}
|
||
},
|
||
statisticCasesData:{},
|
||
mediation_success_rate:{caseTotal:0,mediateSuccess:0,mediateFail:0},
|
||
|
||
};
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
computed:{
|
||
// 获取抽屉drawer的内容高度
|
||
contentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-66
|
||
|
||
},
|
||
// 获取抽屉drawer的内容高度
|
||
leftContentHeight(){
|
||
let oh = document.documentElement.clientHeight;
|
||
return oh-256
|
||
|
||
}
|
||
},
|
||
mounted(){
|
||
if(JSON.parse(sessionStorage.getItem('userInfo'))){
|
||
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
|
||
}
|
||
|
||
// 判断当前登录人角色，如果是普通调解员，则默认展示区域且不可选择
|
||
let identifier = this.$store.state.userinfo.identifier
|
||
if(identifier=='mediator'){
|
||
this.deptDisabled = true
|
||
this.queryParam.deptId = this.$store.state.userinfo.deptId
|
||
}else{
|
||
this.deptDisabled = false
|
||
}
|
||
|
||
this.getCaseapkList()
|
||
this.getstatisticcases()
|
||
this.getstatistic_trace()
|
||
this.ReachrateCharts()
|
||
this.CaserefundCharts()
|
||
|
||
},
|
||
methods: {
|
||
jumpUrl (url) {
|
||
this.$router.push(url);
|
||
},
|
||
JZChange(){
|
||
this.getCaseapkStatistics()
|
||
},
|
||
// 案件进展情况
|
||
getCaseapkStatistics(){
|
||
workApi.getmy_case_pkg_statistics({id:this.queryParamJZ.id}).then(res => {
|
||
if (!res.code) {
|
||
this.caseprogressObj = res
|
||
}
|
||
})
|
||
},
|
||
// 所有案件包数据
|
||
getCaseapkList(){
|
||
workApi.getmy_case_pkg({size:100,current:1}).then(res => {
|
||
if (!res.code) {
|
||
this.casePkOptions = res;
|
||
if(this.casePkOptions.length > 0 )
|
||
{
|
||
this.queryParamJZ.id = this.casePkOptions[0].id
|
||
this.queryParamCGL.id = this.casePkOptions[0].id
|
||
}
|
||
}
|
||
this.getCaseapkStatistics()
|
||
this.drawCharts()
|
||
})
|
||
},
|
||
// 待办汇总
|
||
getstatisticcases(){
|
||
workApi.statistic_cases({current:1,size:100}).then(res => {
|
||
if (!res.code) {
|
||
this.statisticCasesData = res;
|
||
}
|
||
})
|
||
},
|
||
// 追踪汇总
|
||
getstatistic_trace(){
|
||
workApi.statistic_trace({current:1,size:100}).then(res => {
|
||
if (!res.code) {
|
||
this.traceData = res;
|
||
}
|
||
})
|
||
},
|
||
SuccessRateChange(){
|
||
this.drawCharts()
|
||
},
|
||
// 结果统计图
|
||
async drawCharts () {
|
||
this.mediation_success_rate = await workApi.getmy_case_pkg_statistics({id:this.queryParamCGL.id})
|
||
if (this.myEcharts) {
|
||
this.myEcharts.clear();
|
||
}
|
||
this.myEcharts = this.$echarts.init(
|
||
document.getElementById("echartsSankey")
|
||
);
|
||
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: this.mediation_success_rate.mediateFail, name: '调解失败',itemStyle:{color:'#a7e054'} },
|
||
{ value: this.mediation_success_rate.mediateSuccess, name: '调解成功' ,itemStyle:{color:'#bee18adb'}},
|
||
]
|
||
}
|
||
]
|
||
};
|
||
_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:'#c0def0'} },
|
||
{ value: 0, name: '已触达债务人数' ,itemStyle:{color:'#cdeaa2'}},
|
||
]
|
||
}
|
||
]
|
||
};
|
||
_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);
|
||
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.work-hello{
|
||
background:url(../../../assets/image/workbench/work-bg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 96px;
|
||
padding: 25px 0 0 40px;
|
||
span{font-size:28px;color: #4E5969;}
|
||
}
|
||
.work-main{
|
||
height: 971px;
|
||
background-color: #f6f4f4;
|
||
border-radius: 15px;
|
||
margin-top: -10px;
|
||
}
|
||
.casework1{
|
||
background:url(../../../assets/image/workbench/work-left-bg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
// min-height:496px;
|
||
width: 412px;
|
||
padding: 20px;
|
||
.case-title{
|
||
height: 60px;
|
||
// padding-top: 10px;
|
||
font-size: 18px;
|
||
color:#1D2129;
|
||
font-weight: 500;
|
||
}
|
||
.case-progress-cont{
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
font-size: 18px;
|
||
}
|
||
.case-progress{
|
||
// background:url(../../../assets/image/workbench/icon-bg.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
height: 460px;
|
||
margin: auto;
|
||
color: #fff;
|
||
span{
|
||
padding: 15px 0 0px 15px;
|
||
width: 153px;
|
||
height: 105px;
|
||
display: inline-block;
|
||
margin-bottom: 13px;
|
||
line-height: 30px;
|
||
}
|
||
span:nth-child(even){
|
||
margin-left: 20px;
|
||
}
|
||
span p{padding: 0;margin: 0;}
|
||
span a{color: #fff;font-size: 22px;}
|
||
.case-pro1,.case-pro2,.case-pro3,.case-pro4,.case-pro5,.case-pro6,
|
||
.case-pro7,.case-pro8
|
||
{
|
||
width: 157px;height: 105px;
|
||
position: relative;
|
||
border-radius: 8px;
|
||
|
||
img{
|
||
width:50px ;
|
||
right:10px;
|
||
position:absolute;
|
||
}
|
||
}
|
||
.case-pro1
|
||
{
|
||
background-image: linear-gradient(to right,#0fdfdc,pink)
|
||
}
|
||
.case-pro2
|
||
{
|
||
background-image: linear-gradient(to right,pink,#ffd900)
|
||
}
|
||
.case-pro3
|
||
{
|
||
background-image: linear-gradient(to right,#ffd900,#ff0000cb)
|
||
}
|
||
.case-pro4
|
||
{
|
||
background-image: linear-gradient(to right,#ff0000cb,#59a8ff)
|
||
}
|
||
.case-pro5
|
||
{
|
||
background-image: linear-gradient(to right,#59a8ff,#b0d65e)
|
||
}
|
||
.case-pro6
|
||
{
|
||
background-image: linear-gradient(to right,#b0d65e,#dbf41e)
|
||
}
|
||
.case-pro7
|
||
{
|
||
background-image: linear-gradient(to right,#dbf41e,#df5964a7)
|
||
}
|
||
.case-pro8
|
||
{
|
||
background-image: linear-gradient(to right,#df5964a7,#df313fc2)
|
||
}
|
||
}
|
||
}
|
||
.casework-1{
|
||
background-color: #ec9dd82b;
|
||
border-radius: 8px;
|
||
margin-top: 15px;
|
||
|
||
.case-pk-title{
|
||
span:first-child{
|
||
font-size: 18px;
|
||
color:#1D2129;
|
||
font-weight: 500;
|
||
}
|
||
|
||
}
|
||
.case-pk-cont{
|
||
padding: 10px 0;
|
||
position: relative;
|
||
.resultplan{
|
||
color: #86909C;
|
||
font-size: 16px;
|
||
position: absolute;
|
||
left: 65px;
|
||
top: 110px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 125px;
|
||
text-align: center;
|
||
p{padding: 0;margin: 0;}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
.casework2{
|
||
width: calc(100% - 850px);
|
||
.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: 100px;
|
||
text-align: center;
|
||
float: left;
|
||
margin-top: 20px;
|
||
|
||
// .ollowupimg{
|
||
// background:url(../../../assets/image/workbench/donotfollowup1.png) no-repeat;
|
||
// }
|
||
}
|
||
.donotfollowup2{
|
||
background:url(../../../assets/image/workbench/donotfollowup2.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
width: calc(50% - 10px);
|
||
height: 462px;
|
||
padding-top: 100px;
|
||
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: 100px;
|
||
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: 100px;
|
||
text-align: center;
|
||
float: left;
|
||
margin-left: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
.casework2-2{
|
||
background-color: #e2eb5321;
|
||
border-radius: 8px;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
.casework3{
|
||
min-height:496px;
|
||
width: 400px;
|
||
margin:4px 0 0 0;
|
||
color: #4E5969;
|
||
.pie-chart{
|
||
margin-top: 18px;
|
||
padding: 18px;
|
||
background-color: #ef806d42;
|
||
border-radius: 8px;
|
||
|
||
.case-pk-title{
|
||
span:first-child{
|
||
font-size: 18px;
|
||
color:#1D2129;
|
||
font-weight: 500;
|
||
}
|
||
|
||
}
|
||
.case-pk-cont{
|
||
padding: 10px 0 10px 0;
|
||
position: relative;
|
||
.resultplan{
|
||
font-size: 32px;
|
||
position: absolute;
|
||
left: 115px;
|
||
top: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 165px;
|
||
text-align: center;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.item-trace{
|
||
padding: 14px 18px;
|
||
background-color: #d1f1dc4f;
|
||
border-radius: 8px;
|
||
.case-pk-title{
|
||
span:first-child{
|
||
font-size: 18px;
|
||
color:#1D2129;
|
||
font-weight: 500;
|
||
}
|
||
|
||
}
|
||
.case-pk-cont{
|
||
padding: 20px 0 0px 0;
|
||
position: relative;
|
||
.resultplan{
|
||
font-size: 32px;
|
||
position: absolute;
|
||
left: 115px;
|
||
top: 130px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 165px;
|
||
text-align: center;
|
||
}
|
||
div{
|
||
margin-top:10px;
|
||
margin-bottom:15px;
|
||
color: #4E5969;
|
||
background-color:#F7F8FA ;
|
||
padding: 14px 12px;
|
||
border-radius: 2px;
|
||
a{
|
||
font-weight: 600;
|
||
}
|
||
a:first-child{
|
||
color: #E8535A;
|
||
}
|
||
span i{color: red;}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.casework4{
|
||
background: linear-gradient(101.33deg, #0FBEAF 0.46%, #079D87 100%);
|
||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
|
||
position: relative;
|
||
}
|
||
.caseworkicon1{background: linear-gradient(165.96deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
|
||
opacity: 0.1;width: 80px;
|
||
}
|
||
.casework1 img,.casework3 img,.casework4 img{position: absolute;right:25px;top:45px}
|
||
|
||
</style> |