工作台相关业务
This commit is contained in:
parent
894d5f4c56
commit
edd54800ee
BIN
src/assets/image/workbench/icon-bg.png
Normal file
BIN
src/assets/image/workbench/icon-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
src/assets/image/workbench/work-bg.png
Normal file
BIN
src/assets/image/workbench/work-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
BIN
src/assets/image/workbench/work-left-bg.png
Normal file
BIN
src/assets/image/workbench/work-left-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 390 KiB |
@ -28,13 +28,13 @@
|
||||
clearable placeholder="请选择委案机构"
|
||||
@keydown.enter.native="handleSearch"
|
||||
class="width100">
|
||||
<el-option
|
||||
v-for="item in financialProductsTypeOptions"
|
||||
:key="item.code"
|
||||
:label="item.codeName"
|
||||
:value="item.code">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-option
|
||||
v-for="item in financialProductsTypeOptions"
|
||||
:key="item.code"
|
||||
:label="item.codeName"
|
||||
:value="item.code">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
@ -110,7 +110,7 @@
|
||||
<el-table-column prop="pkgName" label="案件包名称" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="entrustingAgencyName" label="委案机构" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="channel" label="委案渠道" show-overflow-tooltip ></el-table-column>
|
||||
<el-table-column prop="planStartTime" label="委案时间" show-overflow-tooltip >
|
||||
<el-table-column prop="planStartTime" label="委案日期" show-overflow-tooltip >
|
||||
<template slot-scope="scope">
|
||||
<span >{{ scope.row.planStartTime | formaDate("yyyy-MM-dd") }}</span>
|
||||
</template>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<LayoutHeader />
|
||||
<div class="layout-bottom-wrap">
|
||||
<!-- <SideMenu /> -->
|
||||
<div class="layout-bottom-right-content p-16">
|
||||
<div class="layout-bottom-right-content" :class="currentName == '/workbench' ? '':' p-16'">
|
||||
<el-scrollbar :style="'height:'+`${contentHeight}`+'px'">
|
||||
<router-view></router-view>
|
||||
</el-scrollbar>
|
||||
@ -23,7 +23,13 @@ export default {
|
||||
let oh = document.documentElement.clientHeight;
|
||||
return oh-85
|
||||
|
||||
}
|
||||
} ,
|
||||
currentPath() {
|
||||
return this.$route.path; // 获取当前路由的路径
|
||||
},
|
||||
currentName() {
|
||||
return this.$route.name; // 获取当前路由的名称
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -43,6 +49,7 @@ export default {
|
||||
width: calc(100% - 0px);
|
||||
height: calc(100%);
|
||||
background-color: #f6f4f4;
|
||||
font-size: 14px;
|
||||
}
|
||||
.layout-content-wrap{
|
||||
width: 100%;
|
||||
|
||||
590
src/pages/workbench/index-old.vue
Normal file
590
src/pages/workbench/index-old.vue
Normal file
@ -0,0 +1,590 @@
|
||||
<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>
|
||||
@ -1,192 +1,172 @@
|
||||
<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>
|
||||
<!-- <el-scrollbar :style="'height:'+`${contentHeight}`+'px'"> -->
|
||||
<div class="layout-content-wrap flex-column">
|
||||
<div class="work-hello">
|
||||
<span>你好，李德生</span>
|
||||
</div>
|
||||
<div class="flex-row justify-content-between work-main p-16">
|
||||
<div class="border-radius-4 flex-column casework1">
|
||||
<div class="flex-row justify-content-between case-title">
|
||||
<span>案件进展情况</span>
|
||||
<span>
|
||||
<el-select v-model="queryParam.entrustingAgencyName"
|
||||
clearable placeholder="请选择案件包"
|
||||
@keydown.enter.native="handleSearch"
|
||||
class="width100" size="mini">
|
||||
<el-option
|
||||
v-for="item in casePkOptions"
|
||||
:key="item.code"
|
||||
:label="item.codeName"
|
||||
:value="item.code">
|
||||
</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>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro2">
|
||||
<p>案件待分</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro3">
|
||||
<p>未触达</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro1">
|
||||
<p>调解中</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro2">
|
||||
<p>调解成功</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro3">
|
||||
<p>已签署协议</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro1">
|
||||
<p>已司法确认</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
<span class="case-pro2">
|
||||
<p>已赋强公证</p>
|
||||
<p><a>99</a>件</p>
|
||||
</span>
|
||||
</div>
|
||||
</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 class="border-radius-4 flex-column casework2">
|
||||
<div class="flex-row justify-content-between case-pk-title">
|
||||
<span>待分配案件包</span>
|
||||
<div class="flex-row">
|
||||
<span>
|
||||
<el-select v-model="queryParam.entrustingAgencyName"
|
||||
clearable placeholder="请选择案件包"
|
||||
@keydown.enter.native="handleSearch"
|
||||
class="width100" size="mini">
|
||||
<el-option
|
||||
v-for="item in casePkOptions"
|
||||
:key="item.code"
|
||||
:label="item.codeName"
|
||||
:value="item.code">
|
||||
</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">
|
||||
<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&pkgId=${item.id}`)">查看详情 ></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>
|
||||
<el-button size="mini" @click="handleDelete(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="border-radius-4 flex-row justify-content-between casework3">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<!-- 编辑 -->
|
||||
<editCaseDrawer v-if="editCaseDrawer" :editCaseDrawer.sync="editCaseDrawer"/>
|
||||
<mediatorPerformanceDetail v-if="detailDrawer" :detailDrawer.sync="detailDrawer"/>
|
||||
<!-- </el-scrollbar> -->
|
||||
|
||||
<!-- 导入 -->
|
||||
<importPackageDialog v-if="importCaseDialog" :importCaseDialog.sync="importCaseDialog" />
|
||||
<!-- 案件分配-->
|
||||
<caseAllocationDialog v-if="caseAllocationDialog" :caseAllocationDialog.sync="caseAllocationDialog" />
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/services/caseManagement";
|
||||
import workApi from "@/services/workbenchApi";
|
||||
import pkapi from "@/services/casePackageManagement";
|
||||
export default {
|
||||
components: {
|
||||
editCaseDrawer: () => import('../mediation-management/components/editCaseDrawer'),//编辑
|
||||
mediatorPerformanceDetail: () => import('../statistical-analysis/components/mediatorPerformanceDetail.vue'),
|
||||
importPackageDialog: () => import('../case-package/components/importPackageDialog'),//导入
|
||||
caseAllocationDialog: () => import('../case-package/components/caseAllocationDialog'),//案件分配
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
casePkOptions:[],//案件包
|
||||
queryParam: {
|
||||
pkgName:'',//案件包名称
|
||||
entrustingAgencyName: '',//委案机构
|
||||
endTime: '',//结束时间
|
||||
beginTime:'',//开始时间
|
||||
willEnd:'',
|
||||
current:1,
|
||||
size:100,
|
||||
},
|
||||
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: [],
|
||||
|
||||
caseAllocationDialog:null,//案件分配弹框
|
||||
importCaseDialog:null,//导入
|
||||
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
radioRanking:{
|
||||
handler() {
|
||||
this.total_performance_chart()
|
||||
}
|
||||
},
|
||||
radio1:{
|
||||
handler() {
|
||||
this.total_recycling_chart()
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
computed:{
|
||||
// 获取抽屉drawer的内容高度
|
||||
@ -196,370 +176,179 @@
|
||||
|
||||
}
|
||||
},
|
||||
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.getCaseInfoList(1)
|
||||
},
|
||||
mounted(){
|
||||
this.getDict()
|
||||
this.getCaseStatusEnum()
|
||||
this.getMediateStatusEnum()
|
||||
this.topStatistics()
|
||||
this.recentStatistics()
|
||||
this.total_recycling_chart()
|
||||
this.total_performance_chart()
|
||||
}
|
||||
methods: {
|
||||
jumpUrl (url) {
|
||||
this.$router.push(url);
|
||||
},
|
||||
// 列表数据
|
||||
getCaseInfoList(val){
|
||||
this.queryParam.planBegin = this.queryParam.beginTime
|
||||
this.queryParam.planEnd = this.queryParam.endTime
|
||||
this.queryParam.current = val
|
||||
pkapi.getCasePkgQuery(this.queryParam).then(res => {
|
||||
if (!res.code) {
|
||||
this.tableData = res.records;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 导入
|
||||
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(() => {});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</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{
|
||||
background-color: #f6f4f4;
|
||||
border-radius: 15px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
.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;
|
||||
background:url(../../assets/image/workbench/work-left-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// min-height:496px;
|
||||
width: 400px;
|
||||
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;
|
||||
}
|
||||
.case-progress{
|
||||
background:url(../../assets/image/workbench/icon-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
height: 460px;
|
||||
margin: auto;
|
||||
color: #4E5969;
|
||||
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: #1D2129;font-size: 22px;}
|
||||
}
|
||||
.case-pro1{width: 155px;height: 105px;}
|
||||
}
|
||||
.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;
|
||||
background-color: #E1EDF4;
|
||||
min-height:496px;
|
||||
margin:4px 0 0 0;
|
||||
width: calc(100% - 830px);
|
||||
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-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;}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.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;
|
||||
margin:4px 0 0 0;
|
||||
min-height:496px;
|
||||
width: 400px;
|
||||
background-color: #E1EDF4;
|
||||
}
|
||||
.casework4{
|
||||
background: linear-gradient(101.33deg, #0FBEAF 0.46%, #079D87 100%);
|
||||
@ -570,21 +359,5 @@ position: relative;
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user