Commit 2cf19e92 authored by 张恒's avatar 张恒

1.调整路由;

2.引入axios;
parent 4af4cc3e
<template>
<div>
<div class="ar_nav">
<router-link class="ar_button" to="/ar_bar/company">结算单位</router-link>
<router-link class="ar_button" to="/ar_bar/monthly">开票月份</router-link>
</div>
<router-view style="height: 90%"></router-view>
</div>
</template>
<script>
export default {
name: "ArBar",
data() {
return {}
},
}
</script>
<style scoped>
.ar_nav {
height: 10%;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.ar_button {
width: 10%;
border-radius: 0.5rem;
background-image: linear-gradient(to bottom, #0933AD, transparent);
padding: 0.5rem;
color: white;
font-size: 20px;
font-weight: bold;
line-height: 2rem;
text-align: center;
}
</style>
<template>
<div id="ar_company_bar"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "ArCompanyBar",
data() {
return {
barChart: {
title: {
show: true,
text: "已开票未收款(结算单位)",
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: 0
},
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: "40%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 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",
},
}
]
},
myChart: null
}
},
methods: {
resizeChart() {
if (this.myChart) {
this.myChart.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)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
<template>
<div id="ar_monthly_bar"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "ArMonthlyBar",
data() {
return {
barChart: {
title: {
show: true,
text: "已开票未收款(开票月份)",
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"
}
}],
series: [
{
type: 'bar',
data: [25002, 57873, 71168, 41098, 25002, 57873, 71168, 41098],
barWidth: "40%",
showBackground: true,
backgroundStyle: {
color: 'rgba(255, 255, 255, 0.1)'
},
itemStyle: {
barBorderRadius: 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",
},
}
]
},
myChart: null
}
},
methods: {
resizeChart() {
if (this.myChart) {
this.myChart.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.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
}
}
</script>
<template> <template>
<div id="main_bar_chart" @click="goChart"/> <div id="ar_summary_bar" @click="goArBar"/>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
export default { export default {
name: "MainBarChart", name: "ArSummaryBar",
data() { data() {
return { return {
barChart: { barChart: {
...@@ -14,17 +14,16 @@ export default { ...@@ -14,17 +14,16 @@ export default {
color: "#FFFFFF", color: "#FFFFFF",
fontSize: "12" fontSize: "12"
}, },
tooltip: {},
grid: { grid: {
containLabel: true,
top: "10%", top: "10%",
bottom: "10%" bottom: '0'
}, },
xAxis: { xAxis: {
data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'], data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
axisLabel: { axisLabel: {
color: "#FFFFFF", color: "#FFFFFF",
fontSize: "12", fontSize: "12",
margin: "15"
}, },
axisTick: { axisTick: {
show: false show: false
...@@ -45,9 +44,8 @@ export default { ...@@ -45,9 +44,8 @@ export default {
}], }],
series: [ series: [
{ {
name: '应收账款',
type: 'bar', type: 'bar',
data: [5002, 57873, 1987, 71168, 41098], data: [50002, 57873, 11987, 71168, 41098],
barWidth: "40%", barWidth: "40%",
showBackground: true, showBackground: true,
backgroundStyle: { backgroundStyle: {
...@@ -76,21 +74,28 @@ export default { ...@@ -76,21 +74,28 @@ export default {
} }
}, },
methods: { methods: {
goArBar() {
this.$router.push({path: "/ar_bar"})
},
resizeChart() { resizeChart() {
if (this.myChart) { if (this.myChart) {
this.myChart.resize(); this.myChart.resize();
} }
},
goChart() {
this.$router.push({path: "/chart"})
} }
}, },
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毫秒延迟执行,解决组件没有渲染完成就开始绘制图表的问题 // 设置500毫秒延迟执行,解决组件没有渲染完成就开始绘制图表的问题
setTimeout(() => { setTimeout(() => {
let mainBarChart = document.getElementById('main_bar_chart') this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
this.myChart = echarts.init(mainBarChart) this.arSummaryBar.setOption(this.barChart);
this.myChart.setOption(this.barChart);
// 监听窗口大小变化,重绘图表 // 监听窗口大小变化,重绘图表
window.addEventListener('resize', this.resizeChart); window.addEventListener('resize', this.resizeChart);
}, 500) }, 500)
......
...@@ -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>
<main-bar-chart style="width: 100%; height: 64%;"></main-bar-chart> <ar-summary-bar 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;">
...@@ -51,7 +51,7 @@ import DisplayBoard from "./components/container/display-board.vue"; ...@@ -51,7 +51,7 @@ import DisplayBoard from "./components/container/display-board.vue";
import Showcase from "./components/container/showcase.vue"; import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-card.vue"; import ContrastCard from "./components/card/contrast-card.vue";
import SimpleCard from "./components/card/simple-card.vue"; import SimpleCard from "./components/card/simple-card.vue";
import MainBarChart from "./components/chart/main-bar-chart.vue"; import ArSummaryBar from "./components/chart/ar-summary-bar.vue";
import WinnersList from "./components/card/winners-list.vue"; import WinnersList from "./components/card/winners-list.vue";
export default { export default {
...@@ -60,7 +60,7 @@ export default { ...@@ -60,7 +60,7 @@ export default {
DisplayBoard, DisplayBoard,
ContrastCard, ContrastCard,
SimpleCard, SimpleCard,
MainBarChart, ArSummaryBar,
WinnersList WinnersList
}, },
data() { data() {
......
<template> <template>
<div class="page"> <div class="page">
<div class="head"> <div class="head" @click="goIndex">
<div class="text_left"> <div class="text_left">
<span>2023-08-01</span> <span>2023-08-01</span>
<span>17:18:29</span> <span>17:18:29</span>
...@@ -15,16 +15,16 @@ ...@@ -15,16 +15,16 @@
</template> </template>
<script> <script>
import axios from "axios";
window.axios = axios
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js') window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css') require('materialize-css')
export default { export default {
name: 'app', name: 'app',
// 页面加载之前 methods: {
created() { goIndex() {
}, this.$router.push({path: '/'})
// 页面加载后 }
mounted() {
this.$router.push("/index");
} }
} }
</script> </script>
......
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Main from '../index.vue' import Index from '../../databoard/index.vue'
import index from '../../databoard/index.vue' import ArBar from "../../databoard/components/chart/ar-bar.vue";
import MainBarChart from "../../databoard/components/chart/main-bar-chart.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 WinnersList from "../../databoard/components/card/winners-list.vue";
Vue.use(Router) Vue.use(Router)
...@@ -11,18 +12,42 @@ export default new Router({ ...@@ -11,18 +12,42 @@ export default new Router({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'index', redirect: '/index'
component: Main
}, },
{ {
path: '/index', path: '/index',
name: 'index', name: 'index',
component: index component: Index
},
{
path: '/ar_bar',
component: ArBar,
children: [
{
path: '/ar_bar',
redirect: '/ar_bar/company'
},
{
path: '/ar_bar/company',
name: 'arCompanyBar',
component: ArCompanyBar
},
{
path: '/ar_bar/monthly',
name: 'arMonthlyBar',
component: ArMonthlyBar
}
]
},
{
path: '/ar_company_bar',
name: 'arCompanyBar',
component: ArCompanyBar
}, },
{ {
path: '/chart', path: '/ar_monthly_bar',
name: 'chart', name: 'arMonthlyBar',
component: MainBarChart component: ArMonthlyBar
}, },
{ {
path: '/winner_list', path: '/winner_list',
......
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