519 lines
18 KiB
Vue
519 lines
18 KiB
Vue
<template>
|
||
<div class="page-header-index-wide">
|
||
<a-row :gutter="24">
|
||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||
<chart-card :loading="loading" title="受理量" :total="cardCount.sll | NumberFormat">
|
||
<a-tooltip title="指标说明" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<div>
|
||
<mini-area :data-source="chartData.sll" />
|
||
</div>
|
||
<template slot="footer">今日受理量：<span>{{ todaySll }}</span></template>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||
<chart-card :loading="loading" title="办结量" :total="cardCount.bjl | NumberFormat">
|
||
<a-tooltip title="指标说明" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<div>
|
||
<mini-area :data-source="chartData.bjl"/>
|
||
</div>
|
||
<template slot="footer">今日办结量：<span>{{ todayBjl }}</span></template>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||
<chart-card :loading="loading" title="用户受理量" :total="cardCount.isll | NumberFormat">
|
||
<a-tooltip title="指标说明" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<div>
|
||
<mini-bar :datasource="chartData.isll" :height="50"/>
|
||
</div>
|
||
<template slot="footer">用户今日受理量：<span>{{ todayISll }}</span></template>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
||
<chart-card :loading="loading" title="用户办结量" :total="cardCount.ibjl | NumberFormat">
|
||
<a-tooltip title="指标说明" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<div>
|
||
<mini-bar :datasource="chartData.ibjl" :height="50"/>
|
||
</div>
|
||
<template slot="footer">用户今日办结量：<span>{{ todayIBjl }}</span></template>
|
||
</chart-card>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
|
||
<div class="salesCard">
|
||
<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||
<div class="extra-item">
|
||
<a>今日</a>
|
||
<a>本周</a>
|
||
<a>本月</a>
|
||
<a>本年</a>
|
||
</div>
|
||
<a-range-picker :style="{width: '256px'}" />
|
||
</div>
|
||
|
||
<a-tab-pane loading="true" tab="受理监管" key="1">
|
||
<a-row>
|
||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||
<index-bar title="受理量统计" />
|
||
</a-col>
|
||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||
|
||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||
<div class="item-group">
|
||
<a-row>
|
||
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-card>
|
||
|
||
</a-col>
|
||
</a-row>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane tab="交互监管" key="2">
|
||
<a-row>
|
||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||
<bar-multid :sourceData="jhjgData" :fields="jhjgFields" title="平台与部门交互量统计"></bar-multid>
|
||
</a-col>
|
||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||
|
||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||
<div class="item-group">
|
||
<a-row>
|
||
<a-col :class="'more-btn'" :span="12" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-card>
|
||
|
||
</a-col>
|
||
</a-row>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane tab="存储监管" key="4">
|
||
<a-row>
|
||
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
|
||
<a-row>
|
||
<template v-if="diskInfo && diskInfo.length>0">
|
||
<a-col :span="12" v-for="(item,index) in diskInfo" :key=" 'diskInfo'+index ">
|
||
<dash-chart-demo :title="item.name" :datasource="item.restPPT"></dash-chart-demo>
|
||
</a-col>
|
||
</template>
|
||
</a-row>
|
||
</a-col>
|
||
|
||
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
|
||
|
||
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
|
||
<div class="item-group">
|
||
<a-row>
|
||
<a-col :class="'more-btn'" :span="10" v-for="(item,index) in registerTypeList" :key=" 'registerType'+index ">
|
||
<a-button @click="goPage(index)" style="margin-bottom:10px" size="small" type="primary" ghost>{{ item.text }}</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</a-card>
|
||
|
||
</a-col>
|
||
</a-row>
|
||
</a-tab-pane>
|
||
|
||
</a-tabs>
|
||
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-row :gutter="12">
|
||
<a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">
|
||
|
||
<a-tabs v-model="indexBottomTab" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
|
||
<div class="extra-wrapper" slot="tabBarExtraContent">
|
||
<a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
|
||
<a-radio-button value="转移登记">转移登记</a-radio-button>
|
||
<a-radio-button value="抵押登记">抵押登记</a-radio-button>
|
||
<a-radio-button value="">所有</a-radio-button>
|
||
</a-radio-group>
|
||
</div>
|
||
|
||
<a-tab-pane loading="true" tab="业务流程限时监管" key="1">
|
||
|
||
<a-table :dataSource="dataSource1" size="default" rowKey="id" :columns="columns" :pagination="ipagination1" @change="tableChange1">
|
||
<template slot="flowRate" slot-scope="text, record, index">
|
||
<a-progress :strokeColor="getPercentColor(record.flowRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.flowRate)" style="width:80px" />
|
||
</template>
|
||
</a-table>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane loading="true" tab="业务节点限时监管" key="2">
|
||
<a-table :dataSource="dataSource2" size="default" rowKey="id" :columns="columns2" :pagination="ipagination2" @change="tableChange2">
|
||
<template slot="flowRate" slot-scope="text, record, index">
|
||
<span style="color: red;">{{ record.flowRate }}小时</span>
|
||
</template>
|
||
</a-table>
|
||
</a-tab-pane>
|
||
|
||
</a-tabs>
|
||
|
||
|
||
</a-card>
|
||
</a-row>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import ACol from "ant-design-vue/es/grid/Col"
|
||
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
|
||
import ChartCard from '@/components/ChartCard'
|
||
import MiniBar from '@/components/chart/MiniBar'
|
||
import MiniArea from '@/components/chart/MiniArea'
|
||
import IndexBar from '@/components/chart/IndexBar'
|
||
import BarMultid from '@/components/chart/BarMultid'
|
||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
||
|
||
const jhjgData = [
|
||
{ type: '房管', '1月': 900, '2月': 1120, '3月': 1380, '4月': 1480, '5月': 1450, '6月': 1100, '7月':1300, '8月':900,'9月':1000 ,'10月':1200 ,'11月':600 ,'12月':900 },
|
||
{ type: '税务', '1月':1200, '2月': 1500, '3月': 1980, '4月': 2000, '5月': 1000, '6月': 600, '7月':900, '8月':1100,'9月':1300 ,'10月':2000 ,'11月':900 ,'12月':1100 },
|
||
{ type: '不动产', '1月':2000, '2月': 1430, '3月': 1300, '4月': 1400, '5月': 900, '6月': 500, '7月':600, '8月':1000,'9月':600 ,'10月':1000 ,'11月':1500 ,'12月':1200 }
|
||
]
|
||
|
||
const jhjgFields=[
|
||
'1月','2月','3月','4月','5月','6月',
|
||
'7月','8月','9月','10月','11月','12月'
|
||
]
|
||
|
||
const xljgData = [
|
||
{type:'一月',"房管":1.12,"税务":1.55,"不动产":1.2},
|
||
{type:'二月',"房管":1.65,"税务":1.32,"不动产":1.42},
|
||
{type:'三月',"房管":1.85,"税务":1.1,"不动产":1.5},
|
||
|
||
{type:'四月',"房管":1.33,"税务":1.63,"不动产":1.4},
|
||
{type:'五月',"房管":1.63,"税务":1.8,"不动产":1.7},
|
||
{type:'六月',"房管":1.85,"税务":1.98,"不动产":1.8},
|
||
|
||
{type:'七月',"房管":1.98,"税务":1.5,"不动产":1.76},
|
||
{type:'八月',"房管":1.48,"税务":1.2,"不动产":1.3},
|
||
{type:'九月',"房管":1.41,"税务":1.9,"不动产":1.6},
|
||
|
||
{type:'十月',"房管":1.1,"税务":1.1,"不动产":1.4},
|
||
{type:'十一月',"房管":1.85,"税务":1.6,"不动产":1.5},
|
||
{type:'十二月',"房管":1.5,"税务":1.4,"不动产":1.3}
|
||
]
|
||
const xljgFields=["房管","税务","不动产"]
|
||
|
||
const dataCol1 = [{
|
||
title: '业务号',
|
||
align:"center",
|
||
dataIndex: 'reBizCode'
|
||
},{
|
||
title: '业务类型',
|
||
align:"center",
|
||
dataIndex: 'type'
|
||
},{
|
||
title: '受理人',
|
||
align:"center",
|
||
dataIndex: 'acceptBy'
|
||
},{
|
||
title: '受理时间',
|
||
align:"center",
|
||
dataIndex: 'acceptDate'
|
||
},{
|
||
title: '当前节点',
|
||
align:"center",
|
||
dataIndex: 'curNode'
|
||
},{
|
||
title: '办理时长',
|
||
align:"center",
|
||
dataIndex: 'flowRate',
|
||
scopedSlots: { customRender: 'flowRate' }
|
||
}];
|
||
const dataSource1=[
|
||
{reBizCode:"1",type:"转移登记",acceptBy:'张三',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:60},
|
||
{reBizCode:"2",type:"抵押登记",acceptBy:'李四',acceptDate:"2019-01-23",curNode:"领导审核",flowRate:30},
|
||
{reBizCode:"3",type:"转移登记",acceptBy:'王武',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:20},
|
||
{reBizCode:"4",type:"转移登记",acceptBy:'赵楼',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:80},
|
||
{reBizCode:"5",type:"转移登记",acceptBy:'钱就',acceptDate:"2019-12-12",curNode:"任务分派",flowRate:90},
|
||
{reBizCode:"6",type:"转移登记",acceptBy:'孙吧',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||
{reBizCode:"7",type:"抵押登记",acceptBy:'周大',acceptDate:"2019-04-13",curNode:"任务分派",flowRate:100},
|
||
{reBizCode:"8",type:"抵押登记",acceptBy:'吴二',acceptDate:"2019-05-09",curNode:"任务上报",flowRate:50},
|
||
{reBizCode:"9",type:"抵押登记",acceptBy:'郑爽',acceptDate:"2019-07-12",curNode:"任务处理",flowRate:63},
|
||
{reBizCode:"20",type:"抵押登记",acceptBy:'林有',acceptDate:"2019-12-12",curNode:"任务打回",flowRate:59},
|
||
{reBizCode:"11",type:"转移登记",acceptBy:'码云',acceptDate:"2019-09-10",curNode:"任务签收",flowRate:87},
|
||
]
|
||
|
||
const dataCol2 = [{
|
||
title: '业务号',
|
||
align:"center",
|
||
dataIndex: 'reBizCode'
|
||
},{
|
||
title: '受理人',
|
||
align:"center",
|
||
dataIndex: 'acceptBy'
|
||
},{
|
||
title: '发起时间',
|
||
align:"center",
|
||
dataIndex: 'acceptDate'
|
||
},{
|
||
title: '当前节点',
|
||
align:"center",
|
||
dataIndex: 'curNode'
|
||
},{
|
||
title: '超时时间',
|
||
align:"center",
|
||
dataIndex: 'flowRate',
|
||
scopedSlots: { customRender: 'flowRate' }
|
||
}];
|
||
const dataSource2=[
|
||
{reBizCode:"A001",type:"转移登记",acceptBy:'张四',acceptDate:"2019-01-22",curNode:"任务分派",flowRate:12},
|
||
{reBizCode:"A002",type:"抵押登记",acceptBy:'李吧',acceptDate:"2019-01-23",curNode:"任务签收",flowRate:3},
|
||
{reBizCode:"A003",type:"转移登记",acceptBy:'王三',acceptDate:"2019-01-25",curNode:"任务处理",flowRate:24},
|
||
{reBizCode:"A004",type:"转移登记",acceptBy:'赵二',acceptDate:"2019-11-22",curNode:"部门审核",flowRate:10},
|
||
{reBizCode:"A005",type:"转移登记",acceptBy:'钱大',acceptDate:"2019-12-12",curNode:"任务签收",flowRate:8},
|
||
{reBizCode:"A006",type:"转移登记",acceptBy:'孙就',acceptDate:"2019-03-06",curNode:"任务处理",flowRate:10},
|
||
{reBizCode:"A007",type:"抵押登记",acceptBy:'周晕',acceptDate:"2019-04-13",curNode:"部门审核",flowRate:24},
|
||
{reBizCode:"A008",type:"抵押登记",acceptBy:'吴有',acceptDate:"2019-05-09",curNode:"部门审核",flowRate:30},
|
||
{reBizCode:"A009",type:"抵押登记",acceptBy:'郑武',acceptDate:"2019-07-12",curNode:"任务分派",flowRate:1},
|
||
{reBizCode:"A0010",type:"抵押登记",acceptBy:'林爽',acceptDate:"2019-12-12",curNode:"部门审核",flowRate:16},
|
||
{reBizCode:"A0011",type:"转移登记",acceptBy:'码楼',acceptDate:"2019-09-10",curNode:"部门审核",flowRate:7},
|
||
]
|
||
|
||
export default {
|
||
name: "IndexBdc",
|
||
components: {
|
||
ATooltip,
|
||
ACol,
|
||
ChartCard,
|
||
MiniArea,
|
||
MiniBar,
|
||
DashChartDemo,
|
||
BarMultid,
|
||
IndexBar
|
||
},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
cardCount:{
|
||
sll:100,
|
||
bjl:87,
|
||
isll:15,
|
||
ibjl:9
|
||
},
|
||
|
||
todaySll:60,
|
||
todayBjl:54,
|
||
todayISll:13,
|
||
todayIBjl:7,
|
||
|
||
chartData:{
|
||
sll:[],
|
||
bjl:[],
|
||
isll:[],
|
||
ibjl:[]
|
||
},
|
||
jhjgFields,
|
||
jhjgData,
|
||
|
||
xljgData,
|
||
xljgFields,
|
||
|
||
diskInfo:[
|
||
{name:"C盘",restPPT:7},
|
||
{name:"D盘",restPPT:5}
|
||
],
|
||
|
||
registerTypeList:[{
|
||
text:"业务受理"
|
||
},{
|
||
text:"业务管理"
|
||
},{
|
||
text:"文件管理"
|
||
},{
|
||
text:"信息查询"
|
||
}],
|
||
|
||
dataSource1:[],
|
||
dataSource2:[],
|
||
columns:dataCol1,
|
||
columns2:dataCol2,
|
||
ipagination1:{
|
||
current: 1,
|
||
pageSize: 5,
|
||
pageSizeOptions: ['10', '20', '30'],
|
||
showTotal: (total, range) => {
|
||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||
},
|
||
showQuickJumper: true,
|
||
showSizeChanger: true,
|
||
total: 0,
|
||
|
||
},
|
||
ipagination2:{
|
||
current: 1,
|
||
pageSize: 5,
|
||
pageSizeOptions: ['10', '20', '30'],
|
||
showTotal: (total, range) => {
|
||
return range[0] + "-" + range[1] + " 共" + total + "条"
|
||
},
|
||
showQuickJumper: true,
|
||
showSizeChanger: true,
|
||
total: 0,
|
||
},
|
||
indexRegisterType:"转移登记",
|
||
indexBottomTab:"1"
|
||
|
||
}
|
||
},
|
||
methods:{
|
||
goPage(){
|
||
this.$message.success("根据业务自行处理跳转页面!")
|
||
},
|
||
changeRegisterType(e){
|
||
this.indexRegisterType = e.target.value
|
||
if(this.indexBottomTab=="1"){
|
||
this.loadDataSource1()
|
||
}else{
|
||
this.loadDataSource2()
|
||
}
|
||
},
|
||
tableChange1(pagination){
|
||
this.ipagination1.current = pagination.current
|
||
this.ipagination1.pageSize = pagination.pageSize
|
||
this.queryTimeoutInfo()
|
||
},
|
||
tableChange2(pagination){
|
||
this.ipagination2.current = pagination.current
|
||
this.ipagination2.pageSize = pagination.pageSize
|
||
this.queryNodeTimeoutInfo()
|
||
},
|
||
getFlowRateNumber(value){
|
||
return Number(value)
|
||
},
|
||
getPercentFormat(value){
|
||
if(value==100){
|
||
return "超时"
|
||
}else{
|
||
return value+"%"
|
||
}
|
||
},
|
||
getPercentColor(value){
|
||
let p = Number(value)
|
||
if(p>=90 && p<100){
|
||
return 'rgb(244, 240, 89)'
|
||
}else if(p>=100){
|
||
return 'red'
|
||
}else{
|
||
return 'rgb(16, 142, 233)'
|
||
}
|
||
},
|
||
|
||
loadDataSource1(){
|
||
this.dataSource1 = dataSource1.filter(item=>{
|
||
if(!this.indexRegisterType){
|
||
return true
|
||
}
|
||
return item.type==this.indexRegisterType
|
||
})
|
||
},
|
||
loadDataSource2(){
|
||
this.dataSource2 = dataSource2.filter(item=>{
|
||
if(!this.indexRegisterType){
|
||
return true
|
||
}
|
||
return item.type==this.indexRegisterType
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.loadDataSource1()
|
||
this.loadDataSource2()
|
||
setTimeout(() => {
|
||
this.loading = !this.loading
|
||
}, 1000)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.extra-wrapper {
|
||
line-height: 55px;
|
||
padding-right: 24px;
|
||
|
||
.extra-item {
|
||
display: inline-block;
|
||
margin-right: 24px;
|
||
|
||
a {
|
||
margin-left: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-group {
|
||
padding: 20px 0 8px 24px;
|
||
font-size: 0;
|
||
a {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
margin-bottom: 13px;
|
||
width: 25%;
|
||
}
|
||
}
|
||
|
||
.item-group {
|
||
.more-btn {
|
||
margin-bottom: 13px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.list-content-item {
|
||
color: rgba(0, 0, 0, .45);
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-size: 14px;
|
||
margin-left: 40px;
|
||
}
|
||
|
||
@media only screen and (min-width: 1600px) {
|
||
.list-content-item{
|
||
margin-left:60px;
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 1300px) {
|
||
.list-content-item{
|
||
margin-left:20px;
|
||
}
|
||
.width-hidden4{
|
||
display:none
|
||
}
|
||
}
|
||
.list-content-item{
|
||
span{line-height: 20px;}
|
||
}
|
||
.list-content-item{
|
||
p{margin-top: 4px;margin-bottom:0;line-height:22px;}
|
||
}
|
||
.anty-list-cust {
|
||
.ant-list-item-meta{flex: 0.3 !important;}
|
||
}
|
||
.anty-list-cust {
|
||
.ant-list-item-content{flex:1 !important; justify-content:flex-start !important;margin-left: 20px;}
|
||
}
|
||
|
||
|
||
</style> |