去掉图表示例相关文件
This commit is contained in:
zer0Black
@@ -1,683 +0,0 @@
|
|||||||
<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="受理量统计" :data-source="[]"/>
|
|
||||||
</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">
|
|
||||||
<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">
|
|
||||||
<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 DashChartDemo from '@/components/chart/DashChartDemo'
|
|
||||||
import BarMultid from '@/components/chart/BarMultid'
|
|
||||||
import Bar from '@/components/chart/Bar'
|
|
||||||
import { getAction } from '@/api/manage'
|
|
||||||
import { filterObj, evil } 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,
|
|
||||||
Bar,
|
|
||||||
LineChartMultid,
|
|
||||||
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
|
|
||||||
}
|
|
||||||
const 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 () {
|
|
||||||
const param = { flowStatus: '-3' }
|
|
||||||
param.pageNo = this.ipagination.current
|
|
||||||
param.pageSize = this.ipagination.pageSize
|
|
||||||
return filterObj(param)
|
|
||||||
},
|
|
||||||
formatRespectiveHoldCert (value) {
|
|
||||||
return (value + '' === '1' || evil(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; let two = ''
|
|
||||||
for (const a in res.result) {
|
|
||||||
const tempNum = Number(res.result[a].max)
|
|
||||||
if (tempNum > one) {
|
|
||||||
one = tempNum
|
|
||||||
two = res.result[a].name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const 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; let two2 = ''
|
|
||||||
for (const a in res.result) {
|
|
||||||
if (res.result[a].name + '' === two + '') {
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
const tempNum = Number(res.result[a].max)
|
|
||||||
if (tempNum > one2) {
|
|
||||||
one2 = tempNum
|
|
||||||
two2 = res.result[a].name
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const 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) {
|
|
||||||
const map = res.result
|
|
||||||
for (const key in map) {
|
|
||||||
const dataStr = key
|
|
||||||
const value = map[key]
|
|
||||||
const 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) {
|
|
||||||
const map = res.result
|
|
||||||
for (const key in map) {
|
|
||||||
const dataStr = key
|
|
||||||
const value = map[key]
|
|
||||||
const 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) {
|
|
||||||
const map = res.result
|
|
||||||
for (const key in map) {
|
|
||||||
const dataStr = key
|
|
||||||
const value = map[key]
|
|
||||||
const 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) {
|
|
||||||
const map = res.result
|
|
||||||
for (const key in map) {
|
|
||||||
const dataStr = key
|
|
||||||
const value = map[key]
|
|
||||||
const 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>
|
|
||||||
@@ -1,318 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
<a-tabs defaultActiveKey="1" @change="callback">
|
|
||||||
<a-tab-pane tab="柱状图" key="1">
|
|
||||||
<a-row>
|
|
||||||
<a-col :span="10">
|
|
||||||
<a-radio-group :value="barType" @change="statisticst">
|
|
||||||
<a-radio-button value="year">按年统计</a-radio-button>
|
|
||||||
<a-radio-button value="month">按月统计</a-radio-button>
|
|
||||||
<a-radio-button value="category">按类别统计</a-radio-button>
|
|
||||||
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-col>
|
|
||||||
<div class="statistic" ref="echartBar"></div>
|
|
||||||
</a-row>
|
|
||||||
</a-tab-pane>
|
|
||||||
|
|
||||||
<a-tab-pane tab="饼状图" key="2">
|
|
||||||
<a-row :gutter="24">
|
|
||||||
<a-col :span="10">
|
|
||||||
<a-radio-group :value="pieType" @change="statisticst">
|
|
||||||
<a-radio-button value="year">按年统计</a-radio-button>
|
|
||||||
<a-radio-button value="month">按月统计</a-radio-button>
|
|
||||||
<a-radio-button value="category">按类别统计</a-radio-button>
|
|
||||||
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-col>
|
|
||||||
<div class="statistic" ref="echartPie"></div>
|
|
||||||
</a-row>
|
|
||||||
</a-tab-pane>
|
|
||||||
</a-tabs>
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import {
|
|
||||||
getAction
|
|
||||||
} from '@/api/manage'
|
|
||||||
// 引入echarts
|
|
||||||
import * as echarts from 'echarts'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ArchivesStatisticst',
|
|
||||||
components: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
barType: 'year',
|
|
||||||
pieType: 'year',
|
|
||||||
// 数据集
|
|
||||||
countSource: [],
|
|
||||||
barValue: [],
|
|
||||||
pieValue: [],
|
|
||||||
// 统计图类型
|
|
||||||
tabStatus: 'bar',
|
|
||||||
url: {
|
|
||||||
getYearCountInfo: '/mock/api/report/getYearCountInfo',
|
|
||||||
getMonthCountInfo: '/mock/api/report/getMonthCountInfo',
|
|
||||||
getCntrNoCountInfo: '/mock/api/report/getCntrNoCountInfo',
|
|
||||||
getCabinetCountInfo: '/mock/api/report/getCabinetCountInfo'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const url = this.url.getYearCountInfo
|
|
||||||
this.loadDate(url, 'year', {})
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadDate (url, type, param) {
|
|
||||||
getAction(url, param, 'get').then((res) => {
|
|
||||||
// console.log(res)
|
|
||||||
if (res.success) {
|
|
||||||
this.countSource = []
|
|
||||||
if (type === 'year') {
|
|
||||||
this.getYearCountSource(res.result)
|
|
||||||
}
|
|
||||||
if (type === 'month') {
|
|
||||||
this.getMonthCountSource(res.result)
|
|
||||||
}
|
|
||||||
if (type === 'category') {
|
|
||||||
this.getCategoryCountSource(res.result)
|
|
||||||
}
|
|
||||||
if (type === 'cabinet') {
|
|
||||||
this.getCabinetCountSource(res.result)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const that = this
|
|
||||||
that.$message.warning(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 按年统计
|
|
||||||
getYearCountSource (data) {
|
|
||||||
const yearList = []
|
|
||||||
const yearCountList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
yearList.push(item.year)
|
|
||||||
yearCountList.push(item.yearcount)
|
|
||||||
})
|
|
||||||
const pieList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
const a = {
|
|
||||||
value: item.yearcount,
|
|
||||||
name: item.year
|
|
||||||
}
|
|
||||||
pieList.push(a)
|
|
||||||
})
|
|
||||||
// 判断类型
|
|
||||||
if (this.tabStatus === 'bar') {
|
|
||||||
this.barChart(yearList, yearCountList)
|
|
||||||
} else {
|
|
||||||
this.TieChart(pieList)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 按月统计
|
|
||||||
getMonthCountSource (data) {
|
|
||||||
const monthList = []
|
|
||||||
const monthCountList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
monthList.push(item.month)
|
|
||||||
monthCountList.push(item.monthcount)
|
|
||||||
})
|
|
||||||
const pieList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
const a = {
|
|
||||||
value: item.monthcount,
|
|
||||||
name: item.month
|
|
||||||
}
|
|
||||||
pieList.push(a)
|
|
||||||
})
|
|
||||||
// 判断类型
|
|
||||||
if (this.tabStatus === 'bar') {
|
|
||||||
this.barChart(monthList, monthCountList)
|
|
||||||
} else {
|
|
||||||
this.TieChart(pieList)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 按类别统计
|
|
||||||
getCategoryCountSource (data) {
|
|
||||||
const cateList = []
|
|
||||||
const cateCountList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
cateList.push(item.classifyname)
|
|
||||||
cateCountList.push(item.cntrnocount)
|
|
||||||
})
|
|
||||||
const pieList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
const a = {
|
|
||||||
value: item.cntrnocount,
|
|
||||||
name: item.classifyname
|
|
||||||
}
|
|
||||||
pieList.push(a)
|
|
||||||
})
|
|
||||||
// 判断类型
|
|
||||||
if (this.tabStatus === 'bar') {
|
|
||||||
this.barChart(cateList, cateCountList)
|
|
||||||
} else {
|
|
||||||
this.TieChart(pieList)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 按柜号统计
|
|
||||||
getCabinetCountSource (data) {
|
|
||||||
const cabinetList = []
|
|
||||||
const cabinetCountList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
cabinetList.push(item.cabinetname)
|
|
||||||
cabinetCountList.push(item.cabinetcocunt)
|
|
||||||
})
|
|
||||||
const pieList = []
|
|
||||||
data.forEach((item) => {
|
|
||||||
const a = {
|
|
||||||
value: item.cabinetcocunt,
|
|
||||||
name: item.cabinetname
|
|
||||||
}
|
|
||||||
pieList.push(a)
|
|
||||||
})
|
|
||||||
// 判断类型
|
|
||||||
if (this.tabStatus === 'bar') {
|
|
||||||
this.barChart(cabinetList, cabinetCountList)
|
|
||||||
} else {
|
|
||||||
this.TieChart(pieList)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 柱状图方法
|
|
||||||
barChart (list, countList) {
|
|
||||||
// console.log(list,countList)
|
|
||||||
const myChart = echarts.init(this.$refs.echartBar)
|
|
||||||
// 指定图表的配置项和数据
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: '档案统计'
|
|
||||||
},
|
|
||||||
tooltip: {},
|
|
||||||
legend: {
|
|
||||||
data: ['y']
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: list
|
|
||||||
},
|
|
||||||
yAxis: {},
|
|
||||||
series: [{
|
|
||||||
name: 'y',
|
|
||||||
type: 'bar',
|
|
||||||
data: countList
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option)
|
|
||||||
},
|
|
||||||
// 饼状图方法
|
|
||||||
TieChart (pieList) {
|
|
||||||
const myChart = echarts.init(this.$refs.echartPie)
|
|
||||||
// 指定图表的配置项和数据
|
|
||||||
const option = {
|
|
||||||
title: {
|
|
||||||
text: '档案统计',
|
|
||||||
left: 'center'
|
|
||||||
},
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
left: 'left'
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
name: pieList.name,
|
|
||||||
type: 'pie',
|
|
||||||
radius: '50%',
|
|
||||||
data: pieList,
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
|
||||||
myChart.setOption(option)
|
|
||||||
},
|
|
||||||
// 选择统计图类别
|
|
||||||
callback (key) {
|
|
||||||
if (key === '1') {
|
|
||||||
this.tabStatus = 'bar'
|
|
||||||
this.queryDatebar()
|
|
||||||
} else {
|
|
||||||
this.tabStatus = 'pie'
|
|
||||||
this.queryDatepie()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 选择统计类别
|
|
||||||
statisticst (e) {
|
|
||||||
if (this.tabStatus === 'pie') {
|
|
||||||
this.pieType = e.target.value
|
|
||||||
this.queryDatepie()
|
|
||||||
} else {
|
|
||||||
this.barType = e.target.value
|
|
||||||
this.queryDatebar()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 按月份查询
|
|
||||||
queryDatebar () {
|
|
||||||
if (this.barValue.length > 0) {
|
|
||||||
this.getUrl(this.barType, {
|
|
||||||
startTime: this.barValue[0]._d,
|
|
||||||
endTime: this.barValue[1]._d
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.getUrl(this.barType, {})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
queryDatepie () {
|
|
||||||
if (this.pieValue.length > 0) {
|
|
||||||
this.getUrl(this.pieType, {
|
|
||||||
startTime: this.pieValue[0]._d,
|
|
||||||
endTime: this.pieValue[1]._d
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.getUrl(this.pieType, {})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 选择请求url
|
|
||||||
getUrl (type, param) {
|
|
||||||
let url = ''
|
|
||||||
if (type === 'year') {
|
|
||||||
url = this.url.getYearCountInfo
|
|
||||||
}
|
|
||||||
if (type === 'month') {
|
|
||||||
url = this.url.getMonthCountInfo
|
|
||||||
}
|
|
||||||
if (type === 'category') {
|
|
||||||
url = this.url.getCntrNoCountInfo
|
|
||||||
}
|
|
||||||
if (type === 'cabinet') {
|
|
||||||
url = this.url.getCabinetCountInfo
|
|
||||||
}
|
|
||||||
this.loadDate(url, type, param)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.statistic {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin-top: 50px;
|
|
||||||
width: 100%;
|
|
||||||
height: 600px
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
<template>
|
|
||||||
<a-card :bordered="false">
|
|
||||||
<a-tabs defaultActiveKey="1">
|
|
||||||
<!-- 柱状图 -->
|
|
||||||
<a-tab-pane tab="柱状图" key="1">
|
|
||||||
<bar title="销售额排行" :dataSource="barData" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 多列柱状图 -->
|
|
||||||
<a-tab-pane tab="多列柱状图" key="2">
|
|
||||||
<bar-multid title="多列柱状图" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 迷你柱状图 -->
|
|
||||||
<a-tab-pane tab="迷你柱状图" key="3">
|
|
||||||
<mini-bar :dataSource="barData" :width="400" :height="200"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 面积图 -->
|
|
||||||
<a-tab-pane tab="面积图" key="4">
|
|
||||||
<area-chart-ty title="销售额排行" :dataSource="areaData" x="月份" y="销售额" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 迷你面积图 -->
|
|
||||||
<a-tab-pane tab="迷你面积图" key="5">
|
|
||||||
<div style="padding-top: 100px;width:600px;height:200px">
|
|
||||||
<mini-area :dataSource="areaData" x="月份" y="销售额" :height="height"/>
|
|
||||||
</div>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 多行折线图 -->
|
|
||||||
<a-tab-pane tab="多行折线图" key="6">
|
|
||||||
<line-chart-multid title="多行折线图" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 饼图 -->
|
|
||||||
<a-tab-pane tab="饼图" key="7">
|
|
||||||
<pie title="饼图" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 雷达图 -->
|
|
||||||
<a-tab-pane tab="雷达图" key="8">
|
|
||||||
<radar title="雷达图" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 仪表盘 -->
|
|
||||||
<a-tab-pane tab="仪表盘" key="9">
|
|
||||||
<dash-chart-demo title="仪表盘" :value="9" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 进度条 -->
|
|
||||||
<a-tab-pane tab="进度条" key="10">
|
|
||||||
<mini-progress :percentage="30" :target="40" :height="30"/>
|
|
||||||
<mini-progress :percentage="51" :target="60" :height="30" color="#FFA500"/>
|
|
||||||
<mini-progress :percentage="66" :target="80" :height="30" color="#1E90FF"/>
|
|
||||||
<mini-progress :percentage="74" :target="70" :height="30" color="#FF4500"/>
|
|
||||||
<mini-progress :percentage="92" :target="100" :height="30" color="#49CC49"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- 排名列表 -->
|
|
||||||
<a-tab-pane tab="排名列表" key="11">
|
|
||||||
<rank-list title="门店销售排行榜" :list="rankList" style="width: 600px;margin: 0 auto;"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- TransferBar -->
|
|
||||||
<a-tab-pane tab="TransferBar" key="12">
|
|
||||||
<transfer-bar title="年度消耗流量一览表" :data="barData" x="月份" y="流量(Mb)" :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- Trend -->
|
|
||||||
<a-tab-pane tab="Trend" key="13">
|
|
||||||
<trend title="Trend" term="Trend：" :percentage="30"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- Liquid -->
|
|
||||||
<a-tab-pane tab="Liquid" key="14">
|
|
||||||
<liquid :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
<!-- BarAndLine -->
|
|
||||||
<a-tab-pane tab="BarAndLine" key="15">
|
|
||||||
<bar-and-line :height="height"/>
|
|
||||||
</a-tab-pane>
|
|
||||||
</a-tabs>
|
|
||||||
</a-card>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import AreaChartTy from '@/components/chart/AreaChartTy'
|
|
||||||
import Bar from '@/components/chart/Bar'
|
|
||||||
import BarMultid from '@/components/chart/BarMultid'
|
|
||||||
import DashChartDemo from '@/components/chart/DashChartDemo'
|
|
||||||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
|
||||||
import Liquid from '@/components/chart/Liquid'
|
|
||||||
import MiniBar from '@/components/chart/MiniBar'
|
|
||||||
import MiniArea from '@/components/chart/MiniArea'
|
|
||||||
import MiniProgress from '@/components/chart/MiniProgress'
|
|
||||||
import Pie from '@/components/chart/Pie'
|
|
||||||
import Radar from '@/components/chart/Radar'
|
|
||||||
import RankList from '@/components/chart/RankList'
|
|
||||||
import TransferBar from '@/components/chart/TransferBar'
|
|
||||||
import Trend from '@/components/chart/Trend'
|
|
||||||
import BarAndLine from '@/components/chart/BarAndLine'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'ViserChartDemo',
|
|
||||||
components: {
|
|
||||||
Bar,
|
|
||||||
MiniBar,
|
|
||||||
BarMultid,
|
|
||||||
AreaChartTy,
|
|
||||||
LineChartMultid,
|
|
||||||
Pie,
|
|
||||||
Radar,
|
|
||||||
DashChartDemo,
|
|
||||||
MiniProgress,
|
|
||||||
RankList,
|
|
||||||
TransferBar,
|
|
||||||
Trend,
|
|
||||||
Liquid,
|
|
||||||
MiniArea,
|
|
||||||
BarAndLine
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
height: 420,
|
|
||||||
rankList: [],
|
|
||||||
barData: [],
|
|
||||||
areaData: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
setTimeout(() => {
|
|
||||||
this.loadBarData()
|
|
||||||
this.loadAreaData()
|
|
||||||
this.loadRankListData()
|
|
||||||
}, 100)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
loadData (x, y, max, min, before = '', after = '月') {
|
|
||||||
const data = []
|
|
||||||
for (let i = 0; i < 12; i += 1) {
|
|
||||||
data.push({
|
|
||||||
[x]: `${before}${i + 1}${after}`,
|
|
||||||
[y]: Math.floor(Math.random() * max) + min
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
// 加载柱状图数据
|
|
||||||
loadBarData () {
|
|
||||||
this.barData = this.loadData('x', 'y', 1000, 200)
|
|
||||||
},
|
|
||||||
// 加载AreaChartTy的数据
|
|
||||||
loadAreaData () {
|
|
||||||
this.areaData = this.loadData('x', 'y', 500, 100)
|
|
||||||
},
|
|
||||||
loadRankListData () {
|
|
||||||
this.rankList = this.loadData('name', 'total', 2000, 100, '北京朝阳 ', ' 号店')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user