Skip to content

S
shld-databoard-ui
Commit d6e7fc58 authored by 张恒's avatar 张恒
Browse files
Options

应收账款列表及柱状图页面

parent 2cf19e92
Show whitespace changes
Inline Side-by-side
Showing with 535 additions and 194 deletions
src/module/databoard/components/card/winners-list.vue
View file @ d6e7fc58
......@@ -2,9 +2,9 @@
<div class="winner_list">
<table>
<tbody>
<tr v-for="(row, idx) in rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<tr v-for="(row, idx) in $props.rows" :key="idx" :style="{height: 100 / rows.length + '%'}">
<td><div class="col_number">{{ idx + 1 }}</div></td>
<td class="winner_span" @click="goWinnerList">{{ row.title }}</td>
<td class="winner_span">{{ row.title }}</td>
<td v-for="(col, idz) in row.column" :key="idz">
<p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p>
......@@ -15,43 +15,23 @@
</div>
</template>
<script>
import DisplayBoard from "../container/display-board.vue";
export default {
name: "WinnersList",
components: {DisplayBoard},
props: {},
data() {
return {
rows: [
{
title: "XX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
},
{
title: "XXXXXX有限公司",
column: [{key: "结算量（万吨）", value: 202012}, {key: "未收款（万元）", value: 202012}]
}
props: {
rows: {
type: Array,
default: [
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]},
{title: '标题列', column: [{key: '字段', value: '0'}]}
]
};
},
methods: {
goWinnerList() {
this.$router.push({path: '/winner_list'})
}
}
},
data() {
return {};
},
methods: {}
};
</script>
<style scoped>
......
src/module/databoard/components/chart/ar-company-bar.vue
View file @ d6e7fc58
......@@ -9,6 +9,7 @@ export default {
name: "ArCompanyBar",
data() {
return {
arCompanyBar: null,
barChart: {
title: {
show: true,
......@@ -26,18 +27,23 @@ export default {
bottom: '10%'
},
xAxis: {
data: ['XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司'],
data: [
'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司',
],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
interval: 0,
rotate: 0
rotate: 20
},
axisTick: {
show: false
}
},
yAxis: [{
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
......@@ -49,18 +55,17 @@ export default {
color: "#FFFFFFAA",
fontSize: "16"
}
}],
series: [
{
},
series: {
type: 'bar',
data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 10,
borderRadius: 10,
},
color: {
type: 'linear',
......@@ -75,37 +80,59 @@ export default {
position: 'top',
color: "#FFFFFF",
},
emphasis: {
focus: 'self',
blurScope: 'coordinateSystem'
}
}
]
},
myChart: null
}
},
methods: {
// 绘制图表
drawArCompanyBar() {
if (!this.arCompanyBar) {
this.arCompanyBar = echarts.init(document.getElementById('ar_company_bar'))
// 监听柱条点击事件，跳转子页面
let that = this
this.arCompanyBar.on('click', function (params) {
that.$router.push({path: '/ar_bar/company/monthly', query: {company: params.name}})
});
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}
this.arCompanyBar.setOption(this.barChart);
},
// 重绘图表
resizeChart() {
if (this.myChart) {
this.myChart.resize();
if (this.arCompanyBar) {
this.arCompanyBar.resize();
}
},
},
mounted() {
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
setTimeout(() => {
let arCompanyBar = document.getElementById('ar_company_bar')
this.myChart = echarts.init(arCompanyBar)
this.myChart.setOption(this.barChart)
let that = this
this.myChart.on('click', function(params) {
that.$router.push({path: '/ar_bar/company', query: {name: params.name}})
});
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}, 500)
// 获取图表数据
window.axios.post("/api/query/dash_board/action/get_ar_company_bar", {
headers: {'content-type': 'application/json'}
}).then(res => {
let data = res.data.data
console.log("arCompanyBar", data)
let xAxisData = []
let seriesData = []
for (let item of data) {
xAxisData.push(item.settle_company)
seriesData.push(item.unregister_amount)
}
this.barChart.xAxis.data = xAxisData
this.barChart.series.data = seriesData
this.drawArCompanyBar()
}).catch(err => {
console.log(err);
}
);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
src/module/databoard/components/chart/ar-company-monthly-bar.vue 0 → 100644
View file @ d6e7fc58
<template>
<div id="ar_company_monthly_bar"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "ArCompanyMonthlyBar",
data() {
return {
arCompanyMonthlyBar: null,
barChart: {
title: {
show: true,
text: "XXXXXX股份有限公司 已开票未收款（开票月份）",
left: "center",
textStyle: {color: "white"}
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '10%'
},
xAxis: {
data: ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08',],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
interval: 0,
rotate: 0
},
axisTick: {
show: false
}
},
yAxis: [{
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
axisLabel: {
show: false,
color: "#FFFFFFAA",
fontSize: "16"
}
}, {
type: "value",
position: "left",
show: false,
max: 1
}],
series: [
{
type: 'bar',
data: [0, 0, 0, 0, 0, 0, 0, 0],
barWidth: "40%",
yAxisIndex: 0,
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
borderRadius: 10,
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
},
label: {
show: true,
position: 'top',
color: "#FFFFFF",
},
},
{
type: "line",
barWidth: "40%",
yAxisIndex: 1,
data: [0, 0, 0, 0, 0, 0, 0, 0]
}
]
},
}
},
methods: {
// 绘制图表
drawArCompanyMonthlyBar() {
if (!this.arCompanyMonthlyBar) {
this.arCompanyMonthlyBar = echarts.init(document.getElementById('ar_company_monthly_bar'))
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}
this.arCompanyMonthlyBar.setOption(this.barChart);
},
resizeChart() {
if (this.arCompanyMonthlyBar) {
this.arCompanyMonthlyBar.resize();
}
},
},
mounted() {
// 调整图表标题
let company = this.$route.query.company
if (!company) {
this.$router.push("/ar_bar/company")
}
this.barChart.title.text = company + " 已开票未收款（开票月份）"
// 获取图表数据
window.axios.post("/api/query/dash_board/action/get_ar_company_monthly_bar", {
headers: {'content-type': 'application/json'},
aux: {company: company},
}).then(res => {
let data = res.data.data
console.log("arCompanyMonthlyBar", data)
let xAxisData = []
let seriesData0 = []
let seriesData1 = []
for (let item of data) {
xAxisData.push(item.settle_month)
seriesData0.push(item.unregister_amount)
seriesData1.push(item.percentage)
}
this.barChart.xAxis.data = xAxisData
this.barChart.series[0].data = seriesData0
this.barChart.series[1].data = seriesData1
this.drawArCompanyMonthlyBar()
}).catch(err => {
console.log(err);
});
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
src/module/databoard/components/chart/ar-monthly-bar.vue
View file @ d6e7fc58
......@@ -37,7 +37,7 @@ export default {
show: false
}
},
yAxis: [{
yAxis: {
type: "value",
splitLine: {
lineStyle: {
......@@ -49,9 +49,8 @@ export default {
color: "#FFFFFFAA",
fontSize: "16"
}
}],
series: [
{
},
series: {
type: 'bar',
data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098],
barWidth: "40%",
......@@ -60,7 +59,7 @@ export default {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 10,
borderRadius: 10,
},
color: {
type: 'linear',
......@@ -75,32 +74,56 @@ export default {
position: 'top',
color: "#FFFFFF",
},
emphasis: {
focus: 'self',
blurScope: 'coordinateSystem'
}
}
]
},
myChart: null
arMonthlyBar: null
}
},
methods: {
// 绘制图表
drawArMonthlyBar() {
if (!this.arMonthlyBar) {
this.arMonthlyBar = echarts.init(document.getElementById('ar_monthly_bar'))
// 监听柱条点击事件，跳转子页面
let that = this
this.arMonthlyBar.on('click', function (params) {
that.$router.push({path: '/ar_bar/monthly/company', query: {month: params.name}})
});
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}
this.arMonthlyBar.setOption(this.barChart);
},
// 重绘图表
resizeChart() {
if (this.myChart) {
this.myChart.resize();
if (this.arMonthlyBar) {
this.arMonthlyBar.resize();
}
},
},
mounted() {
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
setTimeout(() => {
let arCompanyBar = document.getElementById('ar_monthly_bar')
this.myChart = echarts.init(arCompanyBar)
this.myChart.setOption(this.barChart)
let that = this
this.myChart.on('click', function(params) {
that.$router.push({path: '/ar_bar/monthly', query: {name: params.name}})
// 获取图表数据
window.axios.post("/api/query/dash_board/action/get_ar_monthly_bar", {
headers: {'content-type': 'application/json'}
}).then(res => {
let data = res.data.data
console.log("arMonthlyBar", data)
let xAxisData = []
let seriesData = []
for (let item of data) {
xAxisData.push(item.settle_month)
seriesData.push(item.unregister_amount)
}
this.barChart.xAxis.data = xAxisData
this.barChart.series.data = seriesData
this.drawArMonthlyBar()
}).catch(err => {
console.log(err);
});
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
......
src/module/databoard/components/chart/ar-monthly-company-bar.vue 0 → 100644
View file @ d6e7fc58
<template>
<div id="ar_monthly_company_bar"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "ArMonthlyCompanyBar",
data() {
return {
arMonthlyCompanyBar: null,
barChart: {
title: {
show: true,
text: "XXXX-XX 已开票未收款（结算单位）",
left: "center",
textStyle: {color: "white"}
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '10%'
},
xAxis: {
data: ['XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司', 'XXXXXX股份有限公司'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
interval: 0,
rotate: 20
},
axisTick: {
show: false
}
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
axisLabel: {
show: false,
color: "#FFFFFFAA",
fontSize: "16"
}
},
series: {
type: 'bar',
data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098],
barWidth: "60%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
borderRadius: 10,
},
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
},
label: {
show: true,
position: 'top',
color: "#FFFFFF",
},
}
},
}
},
methods: {
// 绘制图表
drawArMonthlyCompanyBar() {
if (!this.arMonthlyCompanyBar) {
this.arMonthlyCompanyBar = echarts.init(document.getElementById('ar_monthly_company_bar'))
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}
this.arMonthlyCompanyBar.setOption(this.barChart);
},
resizeChart() {
if (this.arMonthlyCompanyBar) {
this.arMonthlyCompanyBar.resize();
}
},
},
mounted() {
// 调整图表标题
let month = this.$route.query.month
if (!month) {
this.$router.push("/ar_bar/monthly")
}
this.barChart.title.text = month + " 已开票未收款（结算单位）"
// 获取图表数据
window.axios.post("/api/query/dash_board/action/get_ar_monthly_company_bar", {
headers: {'content-type': 'application/json'},
aux: {month: month},
}).then(res => {
let data = res.data.data
console.log("arMonthlyCompanyBar", data)
let xAxisData = []
let seriesData = []
for (let item of data) {
xAxisData.push(item.settle_company)
seriesData.push(item.unregister_amount)
}
this.barChart.xAxis.data = xAxisData
this.barChart.series.data = seriesData
this.drawArMonthlyCompanyBar()
}).catch(err => {
console.log(err);
});
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
src/module/databoard/components/chart/ar-summary-bar.vue
View file @ d6e7fc58
<template>
<div id="ar_summary_bar" @click="goArBar"/>
<div id="ar_summary_bar"/>
</template>
<script>
......@@ -9,6 +9,7 @@ export default {
name: "ArSummaryBar",
data() {
return {
arSummaryBar: null,
barChart: {
textStyle: {
color: "#FFFFFF",
......@@ -29,7 +30,7 @@ export default {
show: false
}
},
yAxis: [{
yAxis: {
type: "value",
splitLine: {
lineStyle: {
......@@ -41,18 +42,17 @@ export default {
color: "#FFFFFFAA",
fontSize: "16"
}
}],
series: [
{
},
series: {
type: 'bar',
data: [50002, 57873, 11987, 71168, 41098],
data: [0, 0, 0, 0, 0],
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 10,
borderRadius: 10,
},
color: {
type: 'linear',
......@@ -68,37 +68,25 @@ export default {
color: "#FFFFFF",
},
}
]
},
myChart: null
}
},
methods: {
goArBar() {
this.$router.push({path: "/ar_bar"})
drawArSummaryBar(seriesData) {
if (!this.arSummaryBar) {
this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
}
this.barChart.series.data = seriesData
this.arSummaryBar.setOption(this.barChart);
},
resizeChart() {
if (this.myChart) {
this.myChart.resize();
if (this.arSummaryBar) {
this.arSummaryBar.resize();
}
}
},
mounted() {
// 获取图表数据
window.axios.post("/api/query/dash_board/action/get_ar_summary_bar", {
headers: {'content-type': 'application/json'}
}).then(res => {
this.barChart.series[0].data = res.data.data;
}).catch(err => {
console.log("获取应收账款数据失败", err);
});
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题
setTimeout(() => {
this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
this.arSummaryBar.setOption(this.barChart);
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
......
src/module/databoard/index.vue
View file @ d6e7fc58
......@@ -14,7 +14,7 @@
<simple-card style="width: 30%;height: 100%">content</simple-card>
<simple-card style="width: 30%;height: 100%">content</simple-card>
</div>
<ar-summary-bar style="width: 100%; height: 64%;"></ar-summary-bar>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board>
<display-board class="trade_right" title="账款情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
......@@ -26,7 +26,7 @@
</div>
<div class="middle">
<display-board class="trade_left" title="已开票未收款">
<winners-list style="height: 96%"/>
<winners-list style="height: 96%" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
</display-board>
<div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;">
......@@ -65,10 +65,60 @@ export default {
},
data() {
return {
arCompanyList: [
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
{title: "XX有限公司", column: [{key: "未收款（万元）", value: 0}]},
]
}
},
methods: {
// 跳转已开票未收款页面
goArBar() {
this.$router.push('/ar_bar')
},
// 获取应收账款数据
getArSummaryBar() {
window.axios.post("/api/query/dash_board/action/get_ar_summary_bar", {
headers: {'content-type': 'application/json'}
}).then(res => {
let data = res.data.data
let seriesData = []
seriesData.push(data.unsettled_amount)
seriesData.push(data.settled_amount)
seriesData.push(data.unregister_amount)
seriesData.push(data.receivable_amount)
seriesData.push(data.cancelled_amount)
this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getArCompanyList() {
window.axios.post("/api/query/dash_board/action/get_ar_company_list", {
headers: {'content-type': 'application/json'},
}).then(res => {
if (res.data.data.length) {
this.arCompanyList = res.data.data
}
}).catch(err => {
console.log(err);
});
}
},
mounted() {
this.getArSummaryBar();
this.getArCompanyList();
}
};
</script>
<style scoped>
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
</style>
src/module/index/router/index_router.js
View file @ d6e7fc58
......@@ -4,7 +4,8 @@ import Index from '../../databoard/index.vue'
import ArBar from "../../databoard/components/chart/ar-bar.vue";
import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
import WinnersList from "../../databoard/components/card/winners-list.vue";
import ArCompanyMonthlyBar from "../../databoard/components/chart/ar-company-monthly-bar.vue";
import ArMonthlyCompanyBar from "../../databoard/components/chart/ar-monthly-company-bar.vue";
Vue.use(Router)
......@@ -21,6 +22,7 @@ export default new Router({
},
{
path: '/ar_bar',
name: 'arBar',
component: ArBar,
children: [
{
......@@ -32,27 +34,21 @@ export default new Router({
name: 'arCompanyBar',
component: ArCompanyBar
},
{
path: '/ar_bar/company/monthly',
name: 'arCompanyMonthlyBar',
component: ArCompanyMonthlyBar
},
{
path: '/ar_bar/monthly',
name: 'arMonthlyBar',
component: ArMonthlyBar
},{
path: '/ar_bar/monthly/company',
name: 'arMonthlyCompanyBar',
component: ArMonthlyCompanyBar
}
]
},
{
path: '/ar_company_bar',
name: 'arCompanyBar',
component: ArCompanyBar
},
{
path: '/ar_monthly_bar',
name: 'arMonthlyBar',
component: ArMonthlyBar
},
{
path: '/winner_list',
name: 'winnerList',
component: WinnersList
}
]
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment