Skip to content

S
shld-databoard-ui
Commit e74c7067 authored by 潘自豪's avatar 潘自豪
Browse files
Options

冲突解决

parents 1bc8378e 110cae9e
Show whitespace changes
Inline Side-by-side
Showing with 622 additions and 208 deletions
src/module/api/apiList.js
View file @ e74c7067
...@@ -41,11 +41,15 @@ export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/ ...@@ -41,11 +41,15 @@ export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/
cur_day: cur_dayS cur_day: cur_dayS
} }
}, 'POST'); }, 'POST');
// 应收账款汇总
export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_summary_bar", {}, "POST")
// 应收账款列表
export const arCompanyList = () => fetch("/api/query/dash_board/action/get_ar_company_list", {}, "POST")
// 应收账款（结算单位）
export const arCompanyBar = () => fetch("/api/query/dash_board/action/get_ar_company_bar", {}, "POST")
// 应收账款（开票月份）
export const arMonthlyBar = () => fetch("/api/query/dash_board/action/get_ar_monthly_bar", {}, "POST")
// 结算单位 应收账款（开票月份）
export const arCompanyMonthlyBar = (company) => fetch("/api/query/dash_board/action/get_ar_company_monthly_bar", {aux: {company: company}}, "POST")
// 开票月份 应收账款（结算单位）
export const arMonthlyCompanyBar = (month) => fetch("/api/query/dash_board/action/get_ar_monthly_company_bar", {aux: {month: month}}, "POST")
src/module/databoard/components/card/winners-list.vue
View file @ e74c7067
...@@ -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 @ e74c7067
...@@ -4,11 +4,13 @@ ...@@ -4,11 +4,13 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import {arCompanyBar} from "../../../api/apiList";
export default { export default {
name: "ArCompanyBar", name: "ArCompanyBar",
data() { data() {
return { return {
arCompanyBar: null,
barChart: { barChart: {
title: { title: {
show: true, show: true,
...@@ -26,18 +28,23 @@ export default { ...@@ -26,18 +28,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,18 +56,17 @@ export default { ...@@ -49,18 +56,17 @@ export default {
color: "#FFFFFFAA", color: "#FFFFFFAA",
fontSize: "16" fontSize: "16"
} }
}], },
series: [ series: {
{
type: 'bar', 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%", barWidth: "40%",
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)' color: 'rgba(255, 255, 255, 0.1)'
}, },
itemStyle: { itemStyle: {
barBorderRadius: 10, borderRadius: 10,
}, },
color: { color: {
type: 'linear', type: 'linear',
...@@ -75,37 +81,56 @@ export default { ...@@ -75,37 +81,56 @@ export default {
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(() => { arCompanyBar().then(res => {
let arCompanyBar = document.getElementById('ar_company_bar') let data = res.data.data
this.myChart = echarts.init(arCompanyBar) let xAxisData = []
this.myChart.setOption(this.barChart) let seriesData = []
let that = this for (let item of data) {
this.myChart.on('click', function(params) { xAxisData.push(item.settle_company)
that.$router.push({path: '/ar_bar/company', query: {name: params.name}}) seriesData.push(item.unregister_amount)
}); }
// 监听窗口大小变化，重绘图表 this.barChart.xAxis.data = xAxisData
window.addEventListener('resize', this.resizeChart); this.barChart.series.data = seriesData
}, 500) 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 @ e74c7067
<template>
<div id="ar_company_monthly_bar"/>
</template>
<script>
import * as echarts from "echarts";
import {arCompanyMonthlyBar} from "../../../api/apiList";
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 + " 已开票未收款（开票月份）"
// 获取图表数据
arCompanyMonthlyBar(company).then(res => {
let data = res.data.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 @ e74c7067
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import {arMonthlyBar} from "../../../api/apiList";
export default { export default {
name: "ArMonthlyBar", name: "ArMonthlyBar",
...@@ -37,7 +38,7 @@ export default { ...@@ -37,7 +38,7 @@ export default {
show: false show: false
} }
}, },
yAxis: [{ yAxis: {
type: "value", type: "value",
splitLine: { splitLine: {
lineStyle: { lineStyle: {
...@@ -49,9 +50,8 @@ export default { ...@@ -49,9 +50,8 @@ 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%",
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
color: 'rgba(255, 255, 255, 0.1)' color: 'rgba(255, 255, 255, 0.1)'
}, },
itemStyle: { itemStyle: {
barBorderRadius: 10, borderRadius: 10,
}, },
color: { color: {
type: 'linear', type: 'linear',
...@@ -75,32 +75,53 @@ export default { ...@@ -75,32 +75,53 @@ export default {
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(() => { arMonthlyBar().then(res => {
let arCompanyBar = document.getElementById('ar_monthly_bar') let data = res.data.data
this.myChart = echarts.init(arCompanyBar) let xAxisData = []
this.myChart.setOption(this.barChart) let seriesData = []
let that = this for (let item of data) {
this.myChart.on('click', function(params) { xAxisData.push(item.settle_month)
that.$router.push({path: '/ar_bar/monthly', query: {name: params.name}}) 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() { 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 @ e74c7067
<template>
<div id="ar_monthly_company_bar"/>
</template>
<script>
import * as echarts from "echarts";
import {arMonthlyCompanyBar} from "../../../api/apiList";
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 + " 已开票未收款（结算单位）"
// 获取图表数据
arMonthlyCompanyBar(month).then(res => {
let data = res.data.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 @ e74c7067
<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,18 +42,17 @@ export default { ...@@ -41,18 +42,17 @@ export default {
color: "#FFFFFFAA", color: "#FFFFFFAA",
fontSize: "16" fontSize: "16"
} }
}], },
series: [ series: {
{
type: 'bar', type: 'bar',
data: [50002, 57873, 11987, 71168, 41098], data: [0, 0, 0, 0, 0],
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: {
barBorderRadius: 10, borderRadius: 10,
}, },
color: { color: {
type: 'linear', type: 'linear',
...@@ -68,37 +68,25 @@ export default { ...@@ -68,37 +68,25 @@ export default {
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.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); 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 @ e74c7067
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
isCenter isBold/> isCenter isBold/>
</simple-card> </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 <div
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,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%;">
...@@ -153,7 +153,7 @@ import WinnersList from "./components/card/winners-list.vue"; ...@@ -153,7 +153,7 @@ import WinnersList from "./components/card/winners-list.vue";
import TitleContentMark from "./components/layout/title-content-mark.vue"; import TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue"; import TableColumn from "./components/table/table-column.vue";
import RingPieChart from "./components/chart/ring-pie-chart.vue"; import RingPieChart from "./components/chart/ring-pie-chart.vue";
import {getBusinessConditionDatas} from "../api/apiList"; import {getBusinessConditionDatas, arSummaryBar, arCompanyList} from "../api/apiList";
import {calc_hb_str, calc_tb_str, conver_amont} from "../utils/numUtil"; import {calc_hb_str, calc_tb_str, conver_amont} from "../utils/numUtil";
export default { export default {
...@@ -170,8 +170,69 @@ export default { ...@@ -170,8 +170,69 @@ export default {
}, },
data() { data() {
return { return {
// today: moment().format("yyyy-MM-DD"),
today: '2023-06-19', today: '2023-06-19',
yyqk: {
yye: {
title: "营业额",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20,000",
rate: "+4.92%",
},
],
},
cb: {
title: "成本",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
]
},
ml: {
title: "毛利",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
}
},
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}]},
],
mockData: {
yyqk: { yyqk: {
yye: { yye: {
title: "营业额", title: "营业额",
...@@ -225,7 +286,6 @@ export default { ...@@ -225,7 +286,6 @@ export default {
], ],
}, },
}, },
mockData: {
zqk: { zqk: {
yszk: { yszk: {
title: "应收账款", title: "应收账款",
...@@ -410,7 +470,7 @@ export default { ...@@ -410,7 +470,7 @@ export default {
methods: { methods: {
cellStyleFunction(data) { cellStyleFunction(data) {
let res = {color: '#33ff66'}; let res = {color: '#33ff66'};
console.log(data+":"+data.indexOf('+')) console.log(data + ":" + data.indexOf('+'))
if (data.indexOf('-') !== -1) { if (data.indexOf('-') !== -1) {
res.color = '#ff3300' res.color = '#ff3300'
} }
...@@ -449,6 +509,35 @@ export default { ...@@ -449,6 +509,35 @@ export default {
this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount); this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount); this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
}) })
},
// 跳转已开票未收款页面
goArBar() {
this.$router.push('/ar_bar')
},
// 获取应收账款数据
getArSummaryBar() {
arSummaryBar().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() {
arCompanyList().then(res => {
if (res.data.data.length) {
this.arCompanyList = res.data.data
}
}).catch(err => {
console.log(err);
});
} }
}, },
...@@ -457,9 +546,18 @@ export default { ...@@ -457,9 +546,18 @@ export default {
setTimeout(() => { setTimeout(() => {
window.addEventListener('resize', this.resizeChart); window.addEventListener('resize', this.resizeChart);
}, 500) }, 500)
this.getArSummaryBar();
this.getArCompanyList();
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.resizeChart); window.removeEventListener("resize", this.resizeChart);
} }
}; };
</script> </script>
<style scoped>
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
</style>
src/module/index/index.vue
View file @ e74c7067
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
<span>星期三</span> <span>星期三</span>
</div> </div>
<div class="text_right"> <div class="text_right">
<span>刷新时间：10s</span> <span>刷新时间：{{ countDown }}s</span>
</div> </div>
</div> </div>
<router-view style="height: 90%"></router-view> <router-view style="height: 90%" v-if="isRouterAlive"></router-view>
</div> </div>
</template> </template>
...@@ -21,9 +21,38 @@ window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jqu ...@@ -21,9 +21,38 @@ window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jqu
require('materialize-css') require('materialize-css')
export default { export default {
name: 'app', name: 'app',
data() {
return {
countDown: 10,
isRouterAlive: true,
countDownTimer: null,
}
},
methods: { methods: {
goIndex() { goIndex() {
this.$router.push({path: '/'}) this.$router.push({path: '/'})
},
reload() {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
},
mounted() {
// 倒计时器
this.countDownTimer = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
this.reload()
this.countDown = 10
}
}, 1000)
},
beforeDestroy() {
// 倒计时器
if (this.countDownTimer) {
clearInterval(this.countDownTimer)
} }
} }
} }
......
src/module/index/router/index_router.js
View file @ e74c7067
...@@ -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";
import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue"; import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
Vue.use(Router) Vue.use(Router)
...@@ -22,6 +23,7 @@ export default new Router({ ...@@ -22,6 +23,7 @@ export default new Router({
}, },
{ {
path: '/ar_bar', path: '/ar_bar',
name: 'arBar',
component: ArBar, component: ArBar,
children: [ children: [
{ {
...@@ -34,26 +36,21 @@ export default new Router({ ...@@ -34,26 +36,21 @@ export default new Router({
component: ArCompanyBar component: ArCompanyBar
}, },
{ {
path: '/ar_bar/monthly', path: '/ar_bar/company/monthly',
name: 'arMonthlyBar', name: 'arCompanyMonthlyBar',
component: ArMonthlyBar component: ArCompanyMonthlyBar
}
]
},
{
path: '/ar_company_bar',
name: 'arCompanyBar',
component: ArCompanyBar
}, },
{ {
path: '/ar_monthly_bar', path: '/ar_bar/monthly',
name: 'arMonthlyBar', name: 'arMonthlyBar',
component: ArMonthlyBar component: ArMonthlyBar
}, },
{ {
path: '/winner_list', path: '/ar_bar/monthly/company',
name: 'winnerList', name: 'arMonthlyCompanyBar',
component: WinnersList component: ArMonthlyCompanyBar
}
]
}, },
{ {
path: '/turnover-detail', path: '/turnover-detail',
......
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