Files
JeecgBoot/ant-design-vue-jeecg/src/views/jeecg/report/Analysis.vue

698 lines
22 KiB
Java

<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 :dataSource="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 :dataSource="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"/>
</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"/>
</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">
<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 :dataSource="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="3">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<line-chart-multid :dataSource="xljgData" :fields="xljgFields" title="平台与部门交互效率统计"></line-chart-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 default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
<div class="extra-wrapper" slot="tabBarExtraContent">
<a-radio-group defaultValue="1">
<a-radio-button value="1">转移登记</a-radio-button>
<a-radio-button value="2">抵押登记</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="ipagination">
<template slot="flowRate" slot-scope="text, record, index">
<a-progress :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="ipagination">
<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 ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import AreaChartTy from '@/components/chart/AreaChartTy'
import DashChartDemo from '@/components/chart/DashChartDemo'
import BarMultid from '@/components/chart/BarMultid'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Trend from '@/components/Trend'
import { getAction } from '@/api/manage'
import { filterObj } from '@/utils/util'
import moment from 'dayjs'
const rankList = []
for (let i = 0; i < 7; i++) {
rankList.push({
name: '白鹭岛 ' + (i+1) + ' 号店',
total: 1234.56 - i * 100
})
}
const dataCol1 = [{
title: '业务号',
align:"center",
dataIndex: 'reBizCode'
},{
title: '权利类型',
align:"center",
dataIndex: 'droitType'
},{
title: '登记类型',
align:"center",
dataIndex: 'registeType'
},{
title: '座落',
align:"center",
dataIndex: 'beLocated'
},{
title: '权利人',
align:"center",
dataIndex: 'qlr'
},{
title: '义务人',
align:"center",
dataIndex: 'ywr'
},{
title: '受理人',
align:"center",
dataIndex: 'acceptBy'
},{
title: '受理时间',
align:"center",
dataIndex: 'acceptDate'
},{
title: '当前节点',
align:"center",
dataIndex: 'curNode'
},{
title: '办理进度',
align:"center",
dataIndex: 'flowRate',
scopedSlots: { customRender: 'flowRate' }
}];
const dataCol2 = [{
title: '业务号',
align:"center",
dataIndex: 'reBizCode'
},{
title: '权利类型',
align:"center",
dataIndex: 'droitType'
},{
title: '登记类型',
align:"center",
dataIndex: 'registeType'
},{
title: '座落',
align:"center",
dataIndex: 'beLocated'
},{
title: '权利人',
align:"center",
dataIndex: 'qlr'
},{
title: '义务人',
align:"center",
dataIndex: 'ywr'
},{
title: '受理人',
align:"center",
dataIndex: 'acceptBy'
},{
title: '发起时间',
align:"center",
dataIndex: 'acceptDate'
},{
title: '当前节点',
align:"center",
dataIndex: 'curNode'
},{
title: '超时时间',
align:"center",
dataIndex: 'flowRate',
scopedSlots: { customRender: 'flowRate' }
}];
const jhjgData = [
{ type: '房管', '一月': 900, '二月': 1120, '三月': 1380, '四月': 1480, '五月': 1450, '六月': 1100, '七月':1300, '八月':900,'九月':1000 ,'十月':1200 ,'十一月':600 ,'十二月':900 },
{ type: '税务', '一月':1200, '二月': 1500, '三月': 1980, '四月': 2000, '五月': 1000, '六月': 600, '七月':900, '八月':1100,'九月':1300 ,'十月':2000 ,'十一月':900 ,'十二月':1100 },
{ type: '不动产', '一月':2000, '二月': 1430, '三月': 1300, '四月': 1400, '五月': 900, '六月': 500, '七月':600, '八月':1000,'九月':600 ,'十月':1000 ,'十一月':1500 ,'十二月':1200 }
]
const jhjgFields=[
'一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'
]
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=["房管","税务","不动产"]
export default {
name: "Analysis",
components: {
ATooltip,
ACol,
ChartCard,
MiniArea,
MiniBar,
MiniProgress,
RankList,
Bar,
Trend,
LineChartMultid,
AreaChartTy,
DashChartDemo,
BarMultid
},
data() {
return {
xljgData,
xljgFields,
jhjgData,
jhjgFields,
loading: true,
rankList,
zsll:0,
zbjl:0,
todaySll:0,
todayBjl:0,
todayISll:0,
todayIBjl:0,
registerTypeList:[{
text:"业务受理"
},{
text:"业务管理"
},{
text:"文件管理"
},{
text:"信息查询"
}],
// 分页参数
ipagination:{
current: 1,
pageSize: 5,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " " + total + ""
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
//数据集
dataSource:[],
dataSource1:[],
dataSource2:[],
url:{
analysis:"/sps/register/analysis",
list:"sps/register/virtualList",
countSll:"sps/register/sllTenDaysCount",
countBjl:"sps/register/bjlTenDaysCount",
countISll:'sps/register/ISllTenDaysCount',
countIBjl:'sps/register/IBjlTenDaysCount',
queryDiskInfo:'sys/actuator/redis/queryDiskInfo'
},
chartData:{
sll:[],
bjl:[],
isll:[],
ibjl:[]
},
cardCount:{
sll:0,
bjl:0,
isll:0,
ibjl:0
},
columns:dataCol1,
columns2:dataCol2,
diskInfo:[]
}
},
methods:{
goPage(index){
if(index==0){
this.$router.push({
path: '/isps/registerStepForm',
name: 'isps-registerStepForm',
});
}else if(index==1){
this.$router.push({
path: '/isps/registerList',
name: 'isps-registerList',
});
}else if(index==2){
this.$router.push({
path: '/isps/fileManage',
name: 'isps-fileManage',
});
}else if(index==3){
this.$router.push({
path: '/isps/infoSearch',
name: 'isps-infoSearch',
});
}
},
loadList (arg){
if(arg===1){
this.ipagination.current = 1;
}
var params = this.getQueryParams();//查询条件
getAction(this.url.list,params).then((res)=>{
console.log("dsdsd",res.result)
this.dataSource1 = res.result.data1;
this.dataSource2 = res.result.data2;
this.ipagination.total = 5;
});
},
getQueryParams(){
var param = {flowStatus:"-3"};
param.pageNo = this.ipagination.current;
param.pageSize = this.ipagination.pageSize;
return filterObj(param);
},
formatRespectiveHoldCert(value){
return (value=="1"||eval(value))?"":""
},
formatCertFormat(value){
if(value=="1"){
return "单一版"
}else if(value=="2"){
return "集成版"
}else{
return value;
}
},
getFlowRateNumber(value){
return Number(value)
},
getFlowPercent(record){
if(record.flowStatus=="3"){
return 100
}else if(record.flowStatus=="0"){
return 0
}else{
return record.flowRate
}
},
getFlowStatus(status){
if(status=="4"){
return "exception";
}else if(status=="0"){
return "normal";
}else if(status=="3"){
return "success";
}else{
return "active";
}
},
queryCount(){
getAction(this.url.analysis).then((res)=>{
if(res.success){
this.cardCount = res.result
}
console.log(res);
});
},
loadDiskInfo(){
getAction(this.url.queryDiskInfo).then((res)=>{
if(res.success){
console.log(res.result)
let one=0,two="";
for(let a in res.result){
let tempNum = Number(res.result[a].max)
if(tempNum>one){
one = tempNum
two = res.result[a].name
}
}
let ontItem = res.result.filter((item)=>{return item.name == two})[0]
ontItem.restPPT = ontItem.restPPT/10
this.diskInfo.push(ontItem);
if(res.result.length>1){
let one2=0,two2="";
for(let a in res.result){
if(res.result[a].name == two){
continue;
}
let tempNum = Number(res.result[a].max)
if(tempNum>one2){
one2 = tempNum
two2 = res.result[a].name
}
}
let one2Item = res.result.filter((item)=>{return item.name == two2})[0]
one2Item.restPPT = one2Item.restPPT/10
this.diskInfo.push(one2Item);
}
}else{
console.log(res.message)
}
})
},
loadChartData(){
getAction(this.url.countSll).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todaySll = map[today];
}
this.chartData.sll.push({
x: dataStr,
y: value
});
}
}
}),
getAction(this.url.countBjl).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todayBjl = map[today];
}
this.chartData.bjl.push({
x: dataStr,
y: value
});
}
}
}),
getAction(this.url.countISll).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todayISll = map[today];
}
this.chartData.isll.push({
x: key,
y: value
});
}
}
}),
getAction(this.url.countIBjl).then((res)=>{
if(res.success){
let map = res.result;
for(var key in map){
let dataStr = key;
let value = map[key];
let today = moment(new Date()).format('YYYY-MM-DD');
if(dataStr == today){
this.todayIBjl = map[today];
}
this.chartData.ibjl.push({
x: key,
y: value
});
}
}
})
}
},
created() {
this.loadDiskInfo()
this.queryCount();
this.loadChartData();
this.loadList(1);
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>