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