590 lines
26 KiB
Vue
590 lines
26 KiB
Vue
<template>
|
|
<div>
|
|
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
|
<div class="layout-content-wrap">
|
|
<div class="border-radius-4 flex-row justify-content-between">
|
|
<div class="width100 flex-row justify-content-between mr-16 border-radius-4 casework1">
|
|
<div class="flex-column f14 color-fff line-height-30 p-16">
|
|
<a>待调解案件/件</a>
|
|
<a class="f32">{{statisticsObj.caseWait }}</a>
|
|
<a>金额 ￥{{statisticsObj.caseWaitAmount}}</a>
|
|
</div>
|
|
<div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
|
|
<img src="../../assets/image/workbench/Vector.png" width="30" height="30" alt="">
|
|
</div>
|
|
<div class="width100 flex-row justify-content-between mr-16 border-radius-4 casework2">
|
|
<div class="flex-column f14 color-fff line-height-30 p-16">
|
|
<a>暂存案件/件</a>
|
|
<a class="f32">{{statisticsObj.caseStaging}}</a>
|
|
<a>金额 ￥{{statisticsObj.caseStagingAmount}}</a>
|
|
</div>
|
|
<div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
|
|
<img src="../../assets/image/workbench/Subtract.png" width="30" height="30" alt="">
|
|
</div>
|
|
<div class="width100 flex-row justify-content-between mr-16 border-radius-4 casework3">
|
|
<div class="flex-column f14 color-fff line-height-30 p-16">
|
|
<a>今日调解失败数/件</a>
|
|
<a class="f32">{{statisticsObj.mediateFalse}}</a>
|
|
<a>金额 ￥{{statisticsObj.mediateFalseAmount}}</a>
|
|
</div>
|
|
<div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
|
|
<img src="../../assets/image/workbench/Subtract1.png" width="30" height="30" alt="">
|
|
</div>
|
|
<div class="width100 flex-row justify-content-between border-radius-4 casework4">
|
|
<div class="flex-column f14 color-fff line-height-30 p-16">
|
|
<a>今日调解成功数/件</a>
|
|
<a class="f32">{{statisticsObj.mediateSuccess}}</a>
|
|
<a>金额 ￥{{statisticsObj.mediateSuccessAmount}}</a>
|
|
</div>
|
|
<div class="flex-column f14 color-fff line-height-30 p-16 caseworkicon1"></div>
|
|
<img src="../../assets/image/workbench/Subtract2.png" width="30" height="30" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="border-radius-4 flex-row justify-content-between mt-16 ">
|
|
<div class="width30 p-16 flex-column mr-16 border-radius-4 border-solid-lighter-1 listwork1 background-color-fff">
|
|
<div class="mt-8 mb-16 f22">快速入口</div>
|
|
<div class="flex-column f14 p-24 color-fff border-radius-8 line-height-40 fastcase1 cursor-pointer" @click="casejump()">
|
|
<a class="f24">案件列表</a>
|
|
<a>案件快速跟踪处理</a>
|
|
</div>
|
|
<div class="flex-column mt-16 f14 p-24 color-fff border-radius-8 line-height-40 fastcase2 cursor-pointer" @click="performanceDetail()">
|
|
<a class="f24">个人业绩入口</a>
|
|
<a>快速查看个人业绩信息</a>
|
|
</div>
|
|
</div>
|
|
<div class="width70 p-16 border-radius-4 border-solid-lighter-1 listwork2 background-color-fff">
|
|
<div class="mt-8 mb-16 f22">最近调解案件</div>
|
|
<div>
|
|
<el-table :data="tableData" >
|
|
<el-table-column
|
|
v-for="(item, i) in tableHead"
|
|
:key="i"
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
:show-overflow-tooltip="item.showOverflowTooltip"
|
|
:width="item.width"
|
|
:sortable="item.sortable"
|
|
:formatter="item.formatter"
|
|
></el-table-column>
|
|
<el-table-column label="操作" width="90">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row align-items-center">
|
|
<div class="f14 color-1960F4 cursor-pointer mr-8" @click="handleDetail(scope)">查看详情</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="border-radius-4 flex-row justify-content-between mt-16 ">
|
|
<div class="width70 flex-column p-16 mr-16 border-radius-4 border-solid-lighter-1 seniority1 background-color-fff">
|
|
<div class="flex-row justify-content-between">
|
|
<a class="f22">调解案件数量统计</a>
|
|
<el-radio-group v-model="radio1" size="small">
|
|
<el-radio-button label="本年" ></el-radio-button>
|
|
<el-radio-button label="当月"></el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<span id="total_recycling_chart" class="mt-24"></span>
|
|
</div>
|
|
<div class="width30 flex-column p-16 border-radius-4 border-solid-lighter-1 seniority2 background-color-fff">
|
|
<div class="flex-row justify-content-between">
|
|
<a class="f22">本月业绩排行 TOP10</a>
|
|
<el-radio-group v-model="radioRanking" size="small">
|
|
<el-radio-button label="总案件" ></el-radio-button>
|
|
<el-radio-button label="成功案件"></el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<span id="total_performance_chart" class="mt-24"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
<!-- 编辑 -->
|
|
<editCaseDrawer v-if="editCaseDrawer" :editCaseDrawer.sync="editCaseDrawer"/>
|
|
<mediatorPerformanceDetail v-if="detailDrawer" :detailDrawer.sync="detailDrawer"/>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import api from "@/services/caseManagement";
|
|
import workApi from "@/services/workbenchApi";
|
|
export default {
|
|
components: {
|
|
editCaseDrawer: () => import('../mediation-management/components/editCaseDrawer'),//编辑
|
|
mediatorPerformanceDetail: () => import('../statistical-analysis/components/mediatorPerformanceDetail.vue'),
|
|
},
|
|
data() {
|
|
return {
|
|
identifier:this.$store.state.userinfo.identifier,
|
|
detailDrawer:null,
|
|
editCaseDrawer:null,//编辑
|
|
mediateStatusData:[],
|
|
caseStatusData:[],
|
|
financialProductsTypeOptions:[],
|
|
statisticsObj:{},
|
|
rankingList:[],
|
|
lineChartList:[],
|
|
radio1: '本年',
|
|
radioRanking: '总案件',
|
|
activeName: 'mediatorPerformance',
|
|
tableHead: [
|
|
{
|
|
prop: "caseName",
|
|
label: "案件名称",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
},
|
|
{
|
|
prop: "caseNo",
|
|
label: "案件编号",
|
|
showOverflowTooltip: true,
|
|
formatter:this.formatTable,
|
|
},
|
|
{
|
|
prop: "productTypeId",
|
|
label: "金融产品类型",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatProductType,
|
|
},
|
|
{
|
|
prop: "moneyAmount",
|
|
label: "案件金额",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
},
|
|
{
|
|
prop: "mediateTime",
|
|
label: "调解时间",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatTable,
|
|
},
|
|
{
|
|
prop: "caseStatus",
|
|
label: "调解状态",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatMediateStatusEnum,
|
|
},
|
|
{
|
|
prop: "resultStatus",
|
|
label: "案件状态",
|
|
showOverflowTooltip: true,
|
|
formatter: this.formatResultStatusEnum,
|
|
},
|
|
],
|
|
tableData: [],
|
|
};
|
|
},
|
|
watch: {
|
|
radioRanking:{
|
|
handler() {
|
|
this.total_performance_chart()
|
|
}
|
|
},
|
|
radio1:{
|
|
handler() {
|
|
this.total_recycling_chart()
|
|
}
|
|
}
|
|
},
|
|
computed:{
|
|
// 获取抽屉drawer的内容高度
|
|
contentHeight(){
|
|
let oh = document.documentElement.clientHeight;
|
|
return oh-66
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
// 详情
|
|
handleDetail(scope){
|
|
this.editCaseDrawer={
|
|
title:'案件详情',
|
|
data:scope.row
|
|
}
|
|
},
|
|
// 获取金融产品类型
|
|
getDict(){
|
|
let data = {
|
|
type:'financial'
|
|
}
|
|
api.getDict(data).then(res => {
|
|
if (!res.code) {
|
|
this.financialProductsTypeOptions = res;
|
|
}
|
|
})
|
|
},
|
|
// 获取案件状态枚举-调解状态
|
|
getMediateStatusEnum(){
|
|
api.getMediateStatusEnum({}).then(res => {
|
|
if (!res.code) {
|
|
this.mediateStatusData = res;
|
|
}
|
|
})
|
|
},
|
|
// 获取调解中案件状态枚举
|
|
getCaseStatusEnum(){
|
|
api.getCaseStatusEnum({}).then(res => {
|
|
if (!res.code) {
|
|
this.caseStatusData = res;
|
|
}
|
|
})
|
|
},
|
|
// 案件状态
|
|
formatMediateStatusEnum(row, column, cellValue, index){
|
|
// console.log('row',row)
|
|
let className = `status-btn case-status${row.caseStatus}`
|
|
let obj = this.mediateStatusData.find((item) => {
|
|
return item.code == row.caseStatus
|
|
})
|
|
return row.caseStatus != null ? <div class={className}>{obj.desc}</div> : '-'
|
|
},
|
|
formatResultStatusEnum(row, column, cellValue, index){
|
|
// console.log('row',row)
|
|
let className = `status-btn result-status${row.resultStatus}`
|
|
let obj = this.caseStatusData.find((item) => {
|
|
return item.code == row.resultStatus
|
|
})
|
|
return row.resultStatus != null ? <div class={className}>{obj.desc}</div> : '-'
|
|
|
|
},
|
|
formatProductType(row, column, cellValue, index){
|
|
let obj = this.financialProductsTypeOptions.find((item) => {
|
|
return item.code == row.productTypeId
|
|
})
|
|
return row.productTypeId != null ? <div>{obj?obj.codeName:'-'}</div> : '-'
|
|
},
|
|
topStatistics(){
|
|
workApi.topStatistics({}).then(res => {
|
|
if (!res.code) {
|
|
this.statisticsObj = res;
|
|
}
|
|
})
|
|
},
|
|
recentStatistics(){
|
|
workApi.recentStatistics({}).then(res => {
|
|
if (!res.code) {
|
|
this.tableData = res;
|
|
}
|
|
})
|
|
},
|
|
async total_recycling_chart(){
|
|
let type = 1;
|
|
if(this.radio1 != '本年'){type=2}
|
|
workApi.lineChartStatistics({type:type}).then(res => {
|
|
if (!res.code) {
|
|
this.lineChartList=res
|
|
this.radiolineChartChanage()
|
|
}
|
|
})
|
|
|
|
},
|
|
radiolineChartChanage()
|
|
{
|
|
var option = {
|
|
title: {
|
|
text: '调解案件数量统计',
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
|
},
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'Email',
|
|
type: 'line',
|
|
// stack: 'Total',
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|
}
|
|
]
|
|
};
|
|
if(this.radio1 == '本年')
|
|
{
|
|
let legendData=[]
|
|
let seriesData=[]
|
|
this.lineChartList.forEach(item => {
|
|
if(item.key == 'monthList')
|
|
{
|
|
item.value.forEach(item => {
|
|
legendData.push(item.name)
|
|
seriesData.push({
|
|
name: item.name,
|
|
type: 'line',
|
|
stack: item.name,
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: item.line
|
|
})
|
|
})
|
|
}
|
|
});
|
|
option.legend.data = legendData
|
|
option.xAxis[0].data = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
|
option.series = seriesData
|
|
}
|
|
else
|
|
{
|
|
let legendData=[]
|
|
let seriesData=[]
|
|
let thisDayNum=this.$util.mGetDate();
|
|
this.lineChartList.forEach(item => {
|
|
if(item.key == 'dayList')
|
|
{
|
|
item.value.forEach(item => {
|
|
legendData.push(item.name)
|
|
seriesData.push({
|
|
name: item.name,
|
|
type: 'line',
|
|
stack: item.name,
|
|
areaStyle: {},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: item.line
|
|
})
|
|
})
|
|
}
|
|
});
|
|
let xAxisData=['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号'
|
|
, '13号', '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号'
|
|
, '27号', '28号']
|
|
if(thisDayNum > 28)
|
|
{
|
|
for(let i=29; i <= thisDayNum;i++)
|
|
{
|
|
xAxisData.push(i+'号')
|
|
}
|
|
}
|
|
option.legend.data = legendData
|
|
option.xAxis[0].data = xAxisData
|
|
option.series = seriesData
|
|
console.log(option,'seriesData')
|
|
}
|
|
|
|
var myChart = this.$echarts.init(document.getElementById('total_recycling_chart'));
|
|
myChart.setOption(option);
|
|
|
|
},
|
|
async total_performance_chart(){
|
|
let type = 1;
|
|
if(this.radioRanking != '总案件'){type=2}
|
|
workApi.rankingStatistics({type:type}).then(res => {
|
|
if (!res.code) {
|
|
this.rankingList=res
|
|
this.radioRankingChanage()
|
|
}
|
|
})
|
|
},
|
|
radioRankingChanage()
|
|
{
|
|
var option = {
|
|
title: {
|
|
text: '本月业绩排行',
|
|
show:false
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: '{b} : {c}(件)'
|
|
},
|
|
legend: {show:false},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '1%',
|
|
top:'0%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
boundaryGap: [0, 0.01],
|
|
show:false
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
|
|
},
|
|
series: [
|
|
{
|
|
// name: '2011',
|
|
color:'#12BCF1',
|
|
type: 'bar',
|
|
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
|
}
|
|
]
|
|
};
|
|
if(this.radioRanking == '总案件')
|
|
{
|
|
let yAxisData=[]
|
|
let seriesData=[]
|
|
this.rankingList.forEach(item => {
|
|
if(item.key == 'allList')
|
|
{
|
|
let valnum=item.value.length-1;
|
|
item.value.forEach((item1,index) => {
|
|
yAxisData.push(item.value[valnum-index].userName)
|
|
seriesData.push(item.value[valnum-index].count)
|
|
})
|
|
}
|
|
});
|
|
option.yAxis.data = yAxisData
|
|
option.series[0].data = seriesData
|
|
}
|
|
else
|
|
{
|
|
let yAxisData=[]
|
|
let seriesData=[]
|
|
this.rankingList.forEach(item => {
|
|
if(item.key == 'successList')
|
|
{
|
|
let valnum=item.value.length-1;
|
|
item.value.forEach((item1,index) => {
|
|
yAxisData.push(item.value[valnum-index].userName)
|
|
seriesData.push(item.value[valnum-index].count)
|
|
})
|
|
}
|
|
});
|
|
option.yAxis.data = yAxisData
|
|
option.series[0].data = seriesData
|
|
}
|
|
var myChart = this.$echarts.init(document.getElementById('total_performance_chart'));
|
|
myChart.setOption(option);
|
|
|
|
},
|
|
performanceDetail()
|
|
{
|
|
if(this.identifier=='manager')
|
|
{
|
|
let jumpurl = '/statistical-analysis';
|
|
this.$store.commit('setRoutes',jumpurl)
|
|
this.$router.push(jumpurl)
|
|
}
|
|
else
|
|
{
|
|
let userData = this.$store.state.userinfo
|
|
this.detailDrawer = {title:'个人业绩',data:{row:{mediatorId:userData.id,mediatorName:userData.realName}}}
|
|
}
|
|
},
|
|
casejump(){
|
|
let jumpurl = ''
|
|
if(this.identifier=='manager')
|
|
{
|
|
jumpurl = '/case-management';
|
|
}
|
|
else
|
|
{
|
|
let resources = JSON.parse(sessionStorage.getItem('userInfo')).resources
|
|
this.menuTree = resources[0].children
|
|
if(JSON.stringify( this.menuTree).indexOf('mediation-management')>-1)
|
|
{
|
|
jumpurl = '/mediation-management';
|
|
}
|
|
}
|
|
if(jumpurl == '')
|
|
{
|
|
this.$message.warning('未赋予访问权限！')
|
|
}
|
|
else
|
|
{
|
|
this.$store.commit('setRoutes',jumpurl)
|
|
this.$router.push(jumpurl)
|
|
}
|
|
}
|
|
},
|
|
mounted(){
|
|
this.getDict()
|
|
this.getCaseStatusEnum()
|
|
this.getMediateStatusEnum()
|
|
this.topStatistics()
|
|
this.recentStatistics()
|
|
this.total_recycling_chart()
|
|
this.total_performance_chart()
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.casework1{
|
|
background: linear-gradient(101.33deg, #12BCF1 0.46%, #099AEA 100%);
|
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
|
|
height: 128px;
|
|
position: relative;
|
|
}
|
|
.casework2{
|
|
background: linear-gradient(101.33deg, #43A3FA 0.46%, #3B73F5 100%);
|
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
|
|
position: relative;
|
|
}
|
|
.casework3{
|
|
background: linear-gradient(101.33deg, #9B7DFF 0.46%, #6B5AFA 100%);
|
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12), 0px 4px 4px rgba(0, 0, 0, 0.04);
|
|
position: relative;
|
|
}
|
|
.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,.casework2 img,.casework3 img,.casework4 img{position: absolute;right:25px;top:45px}
|
|
.listwork1{height: 381px;
|
|
.fastcase1
|
|
{
|
|
height: 138px;
|
|
background:url(../../assets/image/workbench/fast_case1.png) no-repeat,linear-gradient(102.52deg, #3CA0FA 0.5%, #2F6AF5 143.58%);
|
|
background-size: 100% 100%;
|
|
}
|
|
.fastcase2
|
|
{
|
|
height: 138px;
|
|
background:url(../../assets/image/workbench/fast_case2.png) no-repeat,linear-gradient(101.33deg, #12BCF1 0.46%, #099AEA 100%);
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.seniority1{height: 427px;}
|
|
#total_recycling_chart{height: 420px;display: inline-block;width: 100%;}
|
|
#total_performance_chart{height: 335px;display: inline-block;width: 100%;}
|
|
</style> |