Skip to content

S
shld-databoard-ui
You need to sign in or sign up before continuing.
Commit 6d2a50a0 authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang
Browse files
Options

Merge remote-tracking branch 'origin/release_uat' into release_uat

parents b49b5d47 535602cd
Hide whitespace changes
Inline Side-by-side
Showing with 328 additions and 33 deletions
build/webpack.base.conf.js
View file @ 6d2a50a0
......@@ -36,7 +36,7 @@ module.exports = {
{
test: /\.(js|mjs)$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('/node_modules/js-base64')]
include: [resolve('src'), resolve('test'),resolve('/node_modules/js-base64'),resolve('/node_modules/axios')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
......
src/module/databoard/components/chart/ar-bar.vue 0 → 100644
View file @ 6d2a50a0
<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>
src/module/databoard/components/chart/ar-company-bar.vue 0 → 100644
View file @ 6d2a50a0
<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>
src/module/databoard/components/chart/ar-monthly-bar.vue 0 → 100644
View file @ 6d2a50a0
<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>
src/module/databoard/components/chart/main-bar-chart.vue → src/module/databoard/components/chart/ar-summary-bar.vue
View file @ 6d2a50a0
<template>
<div id="main_bar_chart" @click="goChart"/>
<div id="ar_summary_bar" @click="goArBar"/>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MainBarChart",
name: "ArSummaryBar",
data() {
return {
barChart: {
......@@ -14,17 +14,16 @@ export default {
color: "#FFFFFF",
fontSize: "12"
},
tooltip: {},
grid: {
containLabel: true,
top: "10%",
bottom: "10%"
bottom: '0'
},
xAxis: {
data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
margin: "15"
},
axisTick: {
show: false
......@@ -45,9 +44,8 @@ export default {
}],
series: [
{
name: '应收账款',
type: 'bar',
data: [5002, 57873, 1987, 71168, 41098],
data: [50002, 57873, 11987, 71168, 41098],
barWidth: "40%",
showBackground: true,
backgroundStyle: {
......@@ -76,21 +74,28 @@ export default {
}
},
methods: {
goArBar() {
this.$router.push({path: "/ar_bar"})
},
resizeChart() {
if (this.myChart) {
this.myChart.resize();
}
},
goChart() {
this.$router.push({path: "/chart"})
}
},
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(() => {
let mainBarChart = document.getElementById('main_bar_chart')
this.myChart = echarts.init(mainBarChart)
this.myChart.setOption(this.barChart);
this.arSummaryBar = echarts.init(document.getElementById('ar_summary_bar'))
this.arSummaryBar.setOption(this.barChart);
// 监听窗口大小变化，重绘图表
window.addEventListener('resize', this.resizeChart);
}, 500)
......
src/module/databoard/index.vue
View file @ 6d2a50a0
......@@ -20,7 +20,7 @@
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'" isCenter isBold/>
</simple-card>
</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 class="trade_right" title="账款情况">
<div style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
......@@ -100,7 +100,7 @@ import DisplayBoard from "./components/container/display-board.vue";
import Showcase from "./components/container/showcase.vue";
import ContrastCard from "./components/card/contrast-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 TitleContentMark from "./components/layout/title-content-mark.vue";
import TableColumn from "./components/table/table-column.vue";
......@@ -115,7 +115,7 @@ export default {
DisplayBoard,
ContrastCard,
SimpleCard,
MainBarChart,
ArSummaryBar,
WinnersList
},
data() {
......
src/module/index/index.vue
View file @ 6d2a50a0
<template>
<div class="page">
<div class="head">
<div class="head" @click="goIndex">
<div class="text_left">
<span>2023-08-01</span>
<span>17:18:29</span>
......@@ -15,16 +15,16 @@
</template>
<script>
import axios from "axios";
window.axios = axios
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
export default {
name: 'app',
// 页面加载之前
created() {
},
// 页面加载后
mounted() {
this.$router.push("/index");
methods: {
goIndex() {
this.$router.push({path: '/'})
}
}
}
</script>
......
src/module/index/router/index_router.js
View file @ 6d2a50a0
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../index.vue'
import index from '../../databoard/index.vue'
import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue";
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 TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
......@@ -12,18 +13,42 @@ export default new Router({
routes: [
{
path: '/',
name: 'index',
component: Main
redirect: '/index'
},
{
path: '/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',
name: 'chart',
component: MainBarChart
path: '/ar_monthly_bar',
name: 'arMonthlyBar',
component: ArMonthlyBar
},
{
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