<template>
|
<div class="p-4">
|
<ChartGroupCard class="enter-y" :loading="loading" type="bdc" />
|
<BdcTabCard class="!my-4 enter-y" :loading="loading" />
|
<a-row>
|
<a-col :span="24">
|
<a-card :loading="loading" :class="{ 'anty-list-cust': true }" :bordered="false">
|
<a-tabs v-model:activeKey="indexBottomTab" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
|
<template #rightExtra>
|
<div class="extra-wrapper">
|
<a-radio-group v-model:value="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>
|
</template>
|
|
<a-tab-pane tab="业务流程限时监管" key="1">
|
<a-table
|
:dataSource="dataSource"
|
size="default"
|
rowKey="reBizCode"
|
:columns="table.columns"
|
:pagination="ipagination"
|
@change="tableChange"
|
>
|
<template #flowRate="{ text, record, index }">
|
<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="dataSource1"
|
size="default"
|
rowKey="reBizCode"
|
:columns="table1.columns"
|
:pagination="ipagination1"
|
@change="tableChange1"
|
>
|
<template #flowRate="{ text, record, index }">
|
<span style="color: red">{{ record.flowRate }}小时</span>
|
</template>
|
</a-table>
|
</a-tab-pane>
|
</a-tabs>
|
</a-card>
|
</a-col>
|
</a-row>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref, unref } from 'vue';
|
import { Progress } from 'ant-design-vue';
|
import ChartGroupCard from '../components/ChartGroupCard.vue';
|
import BdcTabCard from '../components/BdcTabCard.vue';
|
import LineMulti from '/@/components/chart/LineMulti.vue';
|
import HeadInfo from '/@/components/chart/HeadInfo.vue';
|
import { table, table1 } from '../data';
|
|
const loading = ref(true);
|
|
setTimeout(() => {
|
loading.value = false;
|
}, 500);
|
|
const indexBottomTab = ref('1');
|
const indexRegisterType = ref('转移登记');
|
const dataSource = ref([]);
|
const dataSource1 = ref([]);
|
const ipagination = ref(table.ipagination);
|
const ipagination1 = ref(table1.ipagination);
|
|
function changeRegisterType(e) {
|
indexRegisterType.value = e.target.value;
|
if (unref(indexBottomTab) == '1') {
|
loadDataSource();
|
} else {
|
loadDataSource1();
|
}
|
}
|
|
function tableChange(pagination) {
|
ipagination.value.current = pagination.current;
|
ipagination.value.pageSize = pagination.pageSize;
|
loadDataSource();
|
}
|
|
function tableChange1(pagination) {
|
ipagination1.value.current = pagination.current;
|
ipagination1.value.pageSize = pagination.pageSize;
|
loadDataSource1();
|
}
|
|
function getFlowRateNumber(value) {
|
return +value;
|
}
|
|
function getPercentFormat(value) {
|
if (value == 100) {
|
return '超时';
|
} else {
|
return value + '%';
|
}
|
}
|
|
function getPercentColor(value) {
|
let p = +value;
|
if (p >= 90 && p < 100) {
|
return 'rgb(244, 240, 89)';
|
} else if (p >= 100) {
|
return 'red';
|
} else {
|
return 'rgb(16, 142, 233)';
|
}
|
}
|
|
function loadDataSource() {
|
dataSource.value = table.dataSource.filter((item) => {
|
if (!unref(indexRegisterType)) {
|
return true;
|
}
|
return item.type == unref(indexRegisterType);
|
});
|
}
|
|
function loadDataSource1() {
|
dataSource1.value = table1.dataSource.filter((item) => {
|
if (!unref(indexRegisterType)) {
|
return true;
|
}
|
return item.type == unref(indexRegisterType);
|
});
|
}
|
|
loadDataSource();
|
loadDataSource1();
|
</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, 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>
|
