<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>