You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
580 lines
18 KiB
580 lines
18 KiB
<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" v-if="chartData.sll.length"/>
|
|
</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.money | NumberFormat">
|
|
<a-tooltip title="平台营业额" slot="action">
|
|
<a-icon type="info-circle-o" />
|
|
</a-tooltip>
|
|
<div>
|
|
<mini-area :data-source="chartData.moneyData" v-if="chartData.moneyData.length"/>
|
|
</div>
|
|
<template slot="footer">今日营业额：<span>{{ todayMoney }}</span></template>
|
|
</chart-card>
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
<chart-card :loading="loading" title="报名用户数" :total="cardCount.open | NumberFormat">
|
|
<a-tooltip title="用户报名用户数" slot="action">
|
|
<a-icon type="info-circle-o" />
|
|
</a-tooltip>
|
|
<div>
|
|
<mini-area :data-source="chartData.open" v-if="chartData.open.length"/>
|
|
</div>
|
|
<template slot="footer">今日报名用户数：<span>{{ todayOpen }}</span></template>
|
|
</chart-card>
|
|
</a-col>
|
|
|
|
|
|
|
|
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
|
|
<chart-card :loading="loading" title="主理人数量" :total="cardCount.adminUser | NumberFormat">
|
|
<a-tooltip title="今日主理人数量" slot="action">
|
|
<a-icon type="info-circle-o" />
|
|
</a-tooltip>
|
|
<div>
|
|
<mini-area :data-source="chartData.adminUser" v-if="chartData.adminUser.length"/>
|
|
</div>
|
|
<template slot="footer">今日主理人数量：<span>{{ todayAdminUser }}</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'}">-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <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-row>-->
|
|
<!-- </a-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <a-tab-pane loading="true" tab="平台营业额" key="2">-->
|
|
<!-- <a-row>-->
|
|
<!-- <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
|
|
<!-- <index-bar title="营业额总数" />-->
|
|
<!-- </a-col>-->
|
|
<!-- </a-row>-->
|
|
<!-- </a-tab-pane>-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <a-tab-pane loading="true" tab="报名用户数" key="3">-->
|
|
<!-- <a-row>-->
|
|
<!-- <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
|
|
<!-- <index-bar title="新增报名用户数" />-->
|
|
<!-- </a-col>-->
|
|
<!-- </a-row>-->
|
|
<!-- </a-tab-pane>-->
|
|
|
|
|
|
<!-- <a-tab-pane loading="true" tab="主理人数量" key="4">-->
|
|
<!-- <a-row>-->
|
|
<!-- <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
|
|
<!-- <index-bar title="新增主理人数量" />-->
|
|
<!-- </a-col>-->
|
|
<!-- </a-row>-->
|
|
<!-- </a-tab-pane>-->
|
|
|
|
<!-- </a-tabs>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- </a-card>-->
|
|
|
|
|
|
</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'
|
|
import dayjs from 'dayjs'
|
|
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},
|
|
]
|
|
|
|
import { getAction,putAction } from '@/api/manage'
|
|
export default {
|
|
name: "IndexBdc",
|
|
components: {
|
|
ATooltip,
|
|
ACol,
|
|
ChartCard,
|
|
MiniArea,
|
|
MiniBar,
|
|
DashChartDemo,
|
|
BarMultid,
|
|
IndexBar
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
analysisData : {},
|
|
cardCount:{
|
|
sll:100,
|
|
bjl:87,
|
|
isll:15,
|
|
ibjl:9,
|
|
adminUser : 0,//主理人
|
|
money : 0,//营业额
|
|
open: 0,//报名
|
|
},
|
|
|
|
todaySll:0,
|
|
todayBjl:54,
|
|
todayISll:13,
|
|
todayIBjl:7,
|
|
todayAdminUser : 0,//主理人
|
|
todayMoney : 0,//营业额
|
|
todayOpen : 0,//报名
|
|
|
|
chartData:{
|
|
sll:[],
|
|
bjl:[],
|
|
isll:[],
|
|
ibjl:[],
|
|
adminUser : [],//主理人
|
|
moneyData : [],//营业额 money
|
|
open: [],//报名
|
|
},
|
|
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:{
|
|
loadData (){
|
|
try {
|
|
// 获取系统消息
|
|
getAction("/sys/annountCement/listByUser").then((res) => {
|
|
if (res.success) {
|
|
// this.analysisData = res.result
|
|
console.log("统计数据", res)
|
|
const beginDay = new Date().getTime()
|
|
|
|
// 主理人数量
|
|
this.todayAdminUser = res.result.openIdAdminUserToday
|
|
this.cardCount.adminUser = res.result.openIdAdminUserTotal
|
|
// this.chartData.adminUser = res.result.openIdAdminUserData
|
|
|
|
let adminUserData = []
|
|
for(let k in res.result.openIdAdminUserData){
|
|
adminUserData.push({
|
|
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
|
|
y : res.result.openIdAdminUserData[k]
|
|
})
|
|
}
|
|
this.chartData.adminUser = adminUserData
|
|
|
|
console.log('this.chartData.adminUser', this.chartData.adminUser);
|
|
|
|
|
|
|
|
// 注册数量
|
|
this.todaySll = res.result.openIdUserToday
|
|
this.cardCount.sll = res.result.openIdUserTotal
|
|
// this.chartData.sll = res.result.openIdUserData
|
|
|
|
for(let k in res.result.openIdUserData){
|
|
this.chartData.sll.push({
|
|
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
|
|
y : res.result.openIdUserData[k]
|
|
})
|
|
}
|
|
|
|
// 营业额
|
|
this.todayMoney = res.result.openIdMoneyUserToday
|
|
this.cardCount.money = res.result.openIdMoneyUserTotal
|
|
// this.chartData.money = res.result.openIdMoneyUserData
|
|
for(let k in res.result.openIdMoneyData){
|
|
this.chartData.moneyData.push({
|
|
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
|
|
y : res.result.openIdMoneyData[k]
|
|
})
|
|
}
|
|
|
|
// 报名 openIdOpenUserToday
|
|
this.todayOpen = res.result.openIdOpenUserToday
|
|
this.cardCount.open = res.result.openIdOpenUserTotal
|
|
// this.chartData.open = res.result.openIdOpenUserData
|
|
for(let k in res.result.openIdOpenUserData){
|
|
this.chartData.open.push({
|
|
x: dayjs(new Date(beginDay + 1000 * 60 * 60 * 24 * 1)).format('YYYY-MM-DD'),
|
|
y : res.result.openIdOpenUserData[k]
|
|
})
|
|
}
|
|
}
|
|
}).catch(error => {
|
|
console.error("统计查询报错",error);//这行打印permissionName is undefined
|
|
this.stopTimer = true;
|
|
console.log("清理timer");
|
|
});
|
|
} catch (err) {
|
|
this.stopTimer = true;
|
|
console.error("统计过程报错",err);
|
|
}
|
|
},
|
|
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()
|
|
this.loadData()
|
|
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>
|