Skip to content

S
shld-databoard-ui
You need to sign in or sign up before continuing.
Commit d6e7fc58 authored by 张恒's avatar 张恒
Browse files
Options

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

parent 2cf19e92
Hide 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 @@ ...@@ -2,9 +2,9 @@
<div class="winner_list"> <div class="winner_list">
<table> <table>
<tbody> <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><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"> <td v-for="(col, idz) in row.column" :key="idz">
<p class="key_span">{{ col.key }}</p> <p class="key_span">{{ col.key }}</p>
<p class="value_span">{{ col.value }}</p> <p class="value_span">{{ col.value }}</p>
...@@ -15,43 +15,23 @@ ...@@ -15,43 +15,23 @@
</div> </div>
</template> </template>
<script> <script>
import DisplayBoard from "../container/display-board.vue";
export default { export default {
name: "WinnersList", name: "WinnersList",
components: {DisplayBoard}, props: {
props: {}, rows: {
data() { type: Array,
return { default: [
rows: [ {title: '标题列', column: [{key: '字段', value: '0'}]},
{ {title: '标题列', column: [{key: '字段', value: '0'}]},
title: "XX有限公司", {title: '标题列', column: [{key: '字段', value: '0'}]}
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}]
}
] ]
};
},
methods: {
goWinnerList() {
this.$router.push({path: '/winner_list'})
} }
} },
data() {
return {};
},
methods: {}
}; };
</script> </script>
<style scoped> <style scoped>
......
src/module/databoard/components/chart/ar-company-bar.vue
View file @ d6e7fc58
...@@ -9,6 +9,7 @@ export default { ...@@ -9,6 +9,7 @@ export default {
name: "ArCompanyBar", name: "ArCompanyBar",
data() { data() {
return { return {
arCompanyBar: null,
barChart: { barChart: {
title: { title: {
show: true, show: true,
...@@ -26,18 +27,23 @@ export default { ...@@ -26,18 +27,23 @@ export default {
bottom: '10%' bottom: '10%'
}, },
xAxis: { 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: { axisLabel: {
color: "#FFFFFF", color: "#FFFFFF",
fontSize: "12", fontSize: "12",
interval: 0, interval: 0,
rotate: 0 rotate: 20
}, },
axisTick: { axisTick: {
show: false show: false
} },
}, },
yAxis: [{ yAxis: {
type: "value", type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
...@@ -49,63 +55,84 @@ export default { ...@@ -49,63 +55,84 @@ export default {
color: "#FFFFFFAA", color: "#FFFFFFAA",
fontSize: "16" fontSize: "16"
} }
}], },
series: [ series: {
{ type: 'bar',
type: 'bar', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
data: [25002, 57873, 11987, 71168, 41098, 25002, 57873, 11987, 71168, 41098], barWidth: "40%",
barWidth: "40%", showBackground: true,
showBackground: true, backgroundStyle: {
backgroundStyle: { color: 'rgba(255, 255, 255, 0.1)'
color: 'rgba(255, 255, 255, 0.1)' },
}, itemStyle: {
itemStyle: { borderRadius: 10,
barBorderRadius: 10, },
}, color: {
color: { type: 'linear',
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
x: 0, y: 0, x2: 0, y2: 1, colorStops: [
colorStops: [ {offset: 0, color: '#00CCD2'},
{offset: 0, color: '#00CCD2'}, {offset: 1, color: '#00A2FF'}
{offset: 1, color: '#00A2FF'} ]
] },
}, label: {
label: { show: true,
show: true, position: 'top',
position: 'top', color: "#FFFFFF",
color: "#FFFFFF", },
}, emphasis: {
focus: 'self',
blurScope: 'coordinateSystem'
} }
] }
}, },
myChart: null
} }
}, },
methods: { 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() { resizeChart() {
if (this.myChart) { if (this.arCompanyBar) {
this.myChart.resize(); this.arCompanyBar.resize();
} }
}, },
}, },
mounted() { mounted() {
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题 // 获取图表数据
setTimeout(() => { window.axios.post("/api/query/dash_board/action/get_ar_company_bar", {
let arCompanyBar = document.getElementById('ar_company_bar') headers: {'content-type': 'application/json'}
this.myChart = echarts.init(arCompanyBar) }).then(res => {
this.myChart.setOption(this.barChart) let data = res.data.data
let that = this console.log("arCompanyBar", data)
this.myChart.on('click', function(params) { let xAxisData = []
that.$router.push({path: '/ar_bar/company', query: {name: params.name}}) let seriesData = []
}); for (let item of data) {
// 监听窗口大小变化，重绘图表 xAxisData.push(item.settle_company)
window.addEventListener('resize', this.resizeChart); seriesData.push(item.unregister_amount)
}, 500) }
this.barChart.xAxis.data = xAxisData
this.barChart.series.data = seriesData
this.drawArCompanyBar()
}).catch(err => {
console.log(err);
}
);
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.resizeChart); window.removeEventListener("resize", this.resizeChart);
} }
} }
</script> </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 { ...@@ -37,7 +37,7 @@ export default {
show: false show: false
} }
}, },
yAxis: [{ yAxis: {
type: "value", type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
...@@ -49,58 +49,81 @@ export default { ...@@ -49,58 +49,81 @@ export default {
color: "#FFFFFFAA", color: "#FFFFFFAA",
fontSize: "16" fontSize: "16"
} }
}], },
series: [ series: {
{ type: 'bar',
type: 'bar', data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098],
data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098], barWidth: "40%",
barWidth: "40%", showBackground: true,
showBackground: true, backgroundStyle: {
backgroundStyle: { color: 'rgba(255, 255, 255, 0.1)'
color: 'rgba(255, 255, 255, 0.1)' },
}, itemStyle: {
itemStyle: { borderRadius: 10,
barBorderRadius: 10, },
}, color: {
color: { type: 'linear',
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
x: 0, y: 0, x2: 0, y2: 1, colorStops: [
colorStops: [ {offset: 0, color: '#00CCD2'},
{offset: 0, color: '#00CCD2'}, {offset: 1, color: '#00A2FF'}
{offset: 1, color: '#00A2FF'} ]
] },
}, label: {
label: { show: true,
show: true, position: 'top',
position: 'top', color: "#FFFFFF",
color: "#FFFFFF", },
}, emphasis: {
focus: 'self',
blurScope: 'coordinateSystem'
} }
] }
}, },
myChart: null arMonthlyBar: null
} }
}, },
methods: { 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() { resizeChart() {
if (this.myChart) { if (this.arMonthlyBar) {
this.myChart.resize(); this.arMonthlyBar.resize();
} }
}, },
}, },
mounted() { mounted() {
// 设置500毫秒延迟执行，解决组件没有渲染完成就开始绘制图表的问题 // 获取图表数据
setTimeout(() => { window.axios.post("/api/query/dash_board/action/get_ar_monthly_bar", {
let arCompanyBar = document.getElementById('ar_monthly_bar') headers: {'content-type': 'application/json'}
this.myChart = echarts.init(arCompanyBar) }).then(res => {
this.myChart.setOption(this.barChart) let data = res.data.data
let that = this console.log("arMonthlyBar", data)
this.myChart.on('click', function(params) { let xAxisData = []
that.$router.push({path: '/ar_bar/monthly', query: {name: params.name}}) let seriesData = []
}); for (let item of data) {
// 监听窗口大小变化，重绘图表 xAxisData.push(item.settle_month)
window.addEventListener('resize', this.resizeChart); seriesData.push(item.unregister_amount)
}, 500) }
this.barChart.xAxis.data = xAxisData
this.barChart.series.data = seriesData
this.drawArMonthlyBar()
}).catch(err => {
console.log(err);
});
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.resizeChart); 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> <template>
<div id="ar_summary_bar" @click="goArBar"/> <div id="ar_summary_bar"/>
</template> </template>
<script> <script>
...@@ -9,6 +9,7 @@ export default { ...@@ -9,6 +9,7 @@ export default {
name: "ArSummaryBar", name: "ArSummaryBar",
data() { data() {
return { return {
arSummaryBar: null,
barChart: { barChart: {
textStyle: { textStyle: {
color: "#FFFFFF", color: "#FFFFFF",
...@@ -29,7 +30,7 @@ export default { ...@@ -29,7 +30,7 @@ export default {
show: false show: false
} }
}, },
yAxis: [{ yAxis: {
type: "value", type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
...@@ -41,64 +42,51 @@ export default { ...@@ -41,64 +42,51 @@ export default {
color: "#FFFFFFAA", color: "#FFFFFFAA",
fontSize: "16" fontSize: "16"
} }
}], },
series: [ series: {
{ type: 'bar',
type: 'bar', data: [0, 0, 0, 0, 0],
data: [50002, 57873, 11987, 71168, 41098], barWidth: "40%",
barWidth: "40%", showBackground: true,
showBackground: true, backgroundStyle: {
backgroundStyle: { color: 'rgba(255, 255, 255, 0.1)'
color: 'rgba(255, 255, 255, 0.1)' },
}, itemStyle: {
itemStyle: { borderRadius: 10,
barBorderRadius: 10, },
}, color: {
color: { type: 'linear',
type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
x: 0, y: 0, x2: 0, y2: 1, colorStops: [
colorStops: [ {offset: 0, color: '#00CCD2'},
{offset: 0, color: '#00CCD2'}, {offset: 1, color: '#00A2FF'}
{offset: 1, color: '#00A2FF'} ]
] },
}, label: {
label: { show: true,
show: true, position: 'top',
position: 'top', color: "#FFFFFF",
color: "#FFFFFF", },
}, }
}
]
}, },
myChart: null
} }
}, },
methods: { methods: {
goArBar() { drawArSummaryBar(seriesData) {
this.$router.push({path: "/ar_bar"}) if (!this.arSummaryBar) {
this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
}
this.barChart.series.data = seriesData
this.arSummaryBar.setOption(this.barChart);
}, },
resizeChart() { resizeChart() {
if (this.myChart) { if (this.arSummaryBar) {
this.myChart.resize(); this.arSummaryBar.resize();
} }
} }
}, },
mounted() { mounted() {
// 获取图表数据 window.addEventListener('resize', this.resizeChart);
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() { beforeDestroy() {
window.removeEventListener("resize", this.resizeChart); window.removeEventListener("resize", this.resizeChart);
......
src/module/databoard/index.vue
View file @ d6e7fc58
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<simple-card style="width: 30%;height: 100%">content</simple-card> <simple-card style="width: 30%;height: 100%">content</simple-card>
<simple-card style="width: 30%;height: 100%">content</simple-card> <simple-card style="width: 30%;height: 100%">content</simple-card>
</div> </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>
<display-board class="trade_right" title="账款情况"> <display-board class="trade_right" title="账款情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;"> <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="middle"> <div class="middle">
<display-board class="trade_left" title="已开票未收款"> <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> </display-board>
<div class="trade_middle" style="border: none;box-shadow: none;"> <div class="trade_middle" style="border: none;box-shadow: none;">
<div style="display: flex; justify-content: space-between; height: 50%;"> <div style="display: flex; justify-content: space-between; height: 50%;">
...@@ -65,10 +65,60 @@ export default { ...@@ -65,10 +65,60 @@ export default {
}, },
data() { data() {
return { 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: { 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> </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' ...@@ -4,7 +4,8 @@ import Index from '../../databoard/index.vue'
import ArBar from "../../databoard/components/chart/ar-bar.vue"; import ArBar from "../../databoard/components/chart/ar-bar.vue";
import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue"; import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-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) Vue.use(Router)
...@@ -21,6 +22,7 @@ export default new Router({ ...@@ -21,6 +22,7 @@ export default new Router({
}, },
{ {
path: '/ar_bar', path: '/ar_bar',
name: 'arBar',
component: ArBar, component: ArBar,
children: [ children: [
{ {
...@@ -32,27 +34,21 @@ export default new Router({ ...@@ -32,27 +34,21 @@ export default new Router({
name: 'arCompanyBar', name: 'arCompanyBar',
component: ArCompanyBar component: ArCompanyBar
}, },
{
path: '/ar_bar/company/monthly',
name: 'arCompanyMonthlyBar',
component: ArCompanyMonthlyBar
},
{ {
path: '/ar_bar/monthly', path: '/ar_bar/monthly',
name: 'arMonthlyBar', name: 'arMonthlyBar',
component: 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