Skip to content

S
shld-databoard-ui
Commit 3534f43e authored by 王礼鸿 Baimax Wang's avatar 王礼鸿 Baimax Wang
Browse files
Options

营业额详情提交

parent 93b3b0fd
Hide whitespace changes
Inline Side-by-side
Showing with 494 additions and 7 deletions
src/module/databoard/assets/index.css
View file @ 3534f43e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
--container-border-color: #0d53b7; /* 容器边框色 */ --container-border-color: #0d53b7; /* 容器边框色 */
--container-shadow-color: #0930A9; /* 容器阴影色 */ --container-shadow-color: #0930A9; /* 容器阴影色 */
--corner-background-color: #0E5FFF; /* 容器角标色 */ --corner-background-color: #0E5FFF; /* 容器角标色 */
--card-background-color: #04175566; /* 卡片背景色 */ --card-background-color: #041755; /* 卡片背景色 */
--card-border1-color: #3673A3; /* 卡片边框色1 */ --card-border1-color: #3673A3; /* 卡片边框色1 */
--card-border2-color: #19EBFF; /* 卡片边框色2 */ --card-border2-color: #19EBFF; /* 卡片边框色2 */
--white-text-color: white; /* 白色文本 */ --white-text-color: white; /* 白色文本 */
......
src/module/databoard/components/chart/ring-pie-chart.vue
View file @ 3534f43e
...@@ -14,7 +14,7 @@ export default { ...@@ -14,7 +14,7 @@ export default {
}, },
series: [ series: [
{ {
name: '', name: this.name,
type: 'pie', type: 'pie',
radius: ['40%', '70%'], radius: ['40%', '70%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
...@@ -46,6 +46,10 @@ export default { ...@@ -46,6 +46,10 @@ export default {
data(newValue, oldValue){ data(newValue, oldValue){
this.option.data = newValue; this.option.data = newValue;
this.chart.setOption(this.option); this.chart.setOption(this.option);
},
name(newName, oldName){
this.option.series.name = newName;
this.chart.setOption(this.option);
} }
}, },
methods: { methods: {
......
src/module/databoard/components/layout/title-content-mark.vue
View file @ 3534f43e
<template> <template>
<div class="bd" :class="{'center-bd': isCenter}"> <div class="bd" :class="{'center-bd': isCenter}">
<div class="title" v-if="title" :class="{'center-title': isCenter}" :style="{'--titleHeight': titleHeight}"> <div class="title" v-if="title" :class="{'center-title': isCenter}" :style="titleStyle,{'--titleHeight': titleHeight}">
{{title}} {{title}}
</div> </div>
<div class="content" :style="{'--titleHeight': titleHeight}"> <div class="content" :style="{'--titleHeight': titleHeight}">
...@@ -47,6 +47,9 @@ export default { ...@@ -47,6 +47,9 @@ export default {
isBold:{ isBold:{
type: Boolean, type: Boolean,
}, },
titleStyle:{
type: [String,Object],
},
contentStyle:{ contentStyle:{
type: [String,Object], type: [String,Object],
}, },
......
src/module/databoard/databoard/turnover-detail.vue 0 → 100644
View file @ 3534f43e
<template>
<div class="turnover-detail">
<div class="card-board">
<contrast-card v-for="data in currentData.head" style="height: 100%;width: 20%;" @click.native="selectLegend(data)">
<title-content-mark style="color: #369afa;float: left;width: 40%;font-size: 18px" :title-style="{'font-weight': 'bold'}" :title="data.title" :content="data.amount" isBold/>
<div style="width: 60%; height: 100%; float:left; padding: 2% 2% 0 8%; line-height: 60px; display: flex; align-items: center;font-size: 16px;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
<table-column style="float: left;width: 40%;" :data="data.hb" name="amount"/>
<table-column style="float: left;width: 35%;" :data="data.hb" name="rate" cell-style-js="var res = {color: '#5eeef4'}; if(data.indexOf('+') !== -1){res.color = '#fee064'} res;"/>
</div>
</contrast-card>
</div>
<div class="menu">
<input type="button" :class="{'selectedBtn': currentBtn === 'day'}" value="日统计" @click="changeDimension('day')">
<input type="button" :class="{'selectedBtn': currentBtn === 'month'}" value="月统计" @click="changeDimension('month')">
<input type="button" :class="{'selectedBtn': currentBtn === 'year'}" value="年统计" @click="changeDimension('year')">
</div>
<div class="chart">
<div ref="chart" style="width: 100%;height: 100%;" @click=""/>
</div>
</div>
</template>
<script>
import TitleContentMark from "../components/layout/title-content-mark.vue";
import TableColumn from "../components/table/table-column.vue";
import ContrastCard from "../components/card/contrast-card.vue";
import * as echarts from "_echarts@5.4.3@echarts";
export default {
name:"TurnoverDetail",
components: {ContrastCard, TableColumn, TitleContentMark},
data() {
return {
currentData: {},
mockDataDay:{
head:{
"营业额":{
title: "营业额",
amount: "20,303",
hb: [
{
title: "昨日",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "21,000",
rate: "+4.92%",
}
]
},
"汽运营业额":{
title: "汽运营业额",
amount: "10,000",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-10.00%",
},
{
title: "上月",
amount: "10,000",
rate: "+0.00%",
}
]
},
"水运营业额":{
title: "水运营业额",
amount: "20,303",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-10.00%",
},
{
title: "上月",
amount: "10,000",
rate: "+0.00%",
}
]
},
"铁运营业额":{
title: "铁运营业额",
amount: "303",
hb: [
{
title: "昨日",
amount: "300",
rate: "-1.00%",
},
{
title: "上月",
amount: "301",
rate: "+0.64%",
}
]
}
},
detail:[
{ date: '2月1日', '汽运(元)': 0, '水运(元)': 747, '铁运(元)': 674 },
{ date: '2月2日', '汽运(元)': 300, '水运(元)': 786, '铁运(元)': 848 },
{ date: '2月3日', '汽运(元)': 500, '水运(元)': 547, '铁运(元)': 256 },
{ date: '2月4日', '汽运(元)': 100, '水运(元)': 632, '铁运(元)': 677 },
{ date: '2月5日', '汽运(元)': 300, '水运(元)': 167, '铁运(元)': 176 },
{ date: '2月6日', '汽运(元)': 800, '水运(元)': 264, '铁运(元)': 584 },
{ date: '2月7日', '汽运(元)': 100, '水运(元)': 116, '铁运(元)': 110 },
{ date: '2月8日', '汽运(元)': 500, '水运(元)': 527, '铁运(元)': 610 },
{ date: '2月9日', '汽运(元)': 1000, '水运(元)': 277, '铁运(元)': 625 },
{ date: '2月10日', '汽运(元)': 358, '水运(元)': 854, '铁运(元)': 775 },
{ date: '2月11日', '汽运(元)': 290, '水运(元)': 801, '铁运(元)': 355 },
{ date: '2月12日', '汽运(元)': 239, '水运(元)': 648, '铁运(元)': 837 },
{ date: '2月13日', '汽运(元)': 413, '水运(元)': 375, '铁运(元)': 175 },
{ date: '2月14日', '汽运(元)': 379, '水运(元)': 678, '铁运(元)': 462 },
{ date: '2月15日', '汽运(元)': 470, '水运(元)': 787, '铁运(元)': 707 },
{ date: '2月16日', '汽运(元)': 893, '水运(元)': 507, '铁运(元)': 645 },
{ date: '2月17日', '汽运(元)': 544, '水运(元)': 473, '铁运(元)': 471 },
{ date: '2月18日', '汽运(元)': 387, '水运(元)': 799, '铁运(元)': 615 },
{ date: '2月19日', '汽运(元)': 123, '水运(元)': 942, '铁运(元)': 988 },
{ date: '2月20日', '汽运(元)': 795, '水运(元)': 518, '铁运(元)': 481 },
{ date: '2月21日', '汽运(元)': 885, '水运(元)': 917, '铁运(元)': 716 },
{ date: '2月22日', '汽运(元)': 327, '水运(元)': 682, '铁运(元)': 947 },
{ date: '2月23日', '汽运(元)': 599, '水运(元)': 768, '铁运(元)': 284 },
{ date: '2月24日', '汽运(元)': 731, '水运(元)': 665, '铁运(元)': 408 },
{ date: '2月25日', '汽运(元)': 569, '水运(元)': 150, '铁运(元)': 358 },
{ date: '2月26日', '汽运(元)': 642, '水运(元)': 747, '铁运(元)': 697 },
{ date: '2月27日', '汽运(元)': 963, '水运(元)': 674, '铁运(元)': 532 },
{ date: '2月28日', '汽运(元)': 522, '水运(元)': 273, '铁运(元)': 587 },
]
},
mockDataMonth:{
head:{
"营业额":{
title: "营业额",
amount: "20,303",
hb: [
{
title: "上月",
amount: "21,000",
rate: "-3.32%",
},
{
title: "去年",
amount: "21,000",
rate: "+4.92%",
}
]
},
"汽运营业额":{
title: "汽运营业额",
amount: "10,000",
hb: [
{
title: "上月",
amount: "11,000",
rate: "-10.00%",
},
{
title: "去年",
amount: "10,000",
rate: "+0.00%",
}
]
},
"水运营业额":{
title: "水运营业额",
amount: "20,303",
hb: [
{
title: "上月",
amount: "11,000",
rate: "-10.00%",
},
{
title: "去年",
amount: "10,000",
rate: "+0.00%",
}
]
},
"铁运营业额":{
title: "铁运营业额",
amount: "303",
hb: [
{
title: "上月",
amount: "300",
rate: "-1.00%",
},
{
title: "去年",
amount: "301",
rate: "+0.64%",
}
]
}
},
detail:[
{ date: '1月', '汽运(元)': 544, '水运(元)': 747, '铁运(元)': 674 },
{ date: '2月', '汽运(元)': 387, '水运(元)': 747, '铁运(元)': 674 },
{ date: '3月', '汽运(元)': 123, '水运(元)': 747, '铁运(元)': 674 },
{ date: '4月', '汽运(元)': 795, '水运(元)': 747, '铁运(元)': 674 },
{ date: '5月', '汽运(元)': 885, '水运(元)': 747, '铁运(元)': 674 },
{ date: '6月', '汽运(元)': 327, '水运(元)': 747, '铁运(元)': 674 },
{ date: '7月', '汽运(元)': 599, '水运(元)': 747, '铁运(元)': 674 },
{ date: '8月', '汽运(元)': 731, '水运(元)': 747, '铁运(元)': 674 },
{ date: '9月', '汽运(元)': 569, '水运(元)': 747, '铁运(元)': 674 },
{ date: '10月', '汽运(元)': 642, '水运(元)': 747, '铁运(元)': 674 },
{ date: '11月', '汽运(元)': 963, '水运(元)': 747, '铁运(元)': 674 },
{ date: '12月', '汽运(元)': 522, '水运(元)': 747, '铁运(元)': 674 },
]
},
mockDataYear:{
head:{
"营业额":{
title: "营业额",
amount: "20,303",
hb: [
{
title: "去年",
amount: "21,000",
rate: "-3.32%",
},
]
},
"汽运营业额":{
title: "汽运营业额",
amount: "10,000",
hb: [
{
title: "去年",
amount: "11,000",
rate: "-10.00%",
},
]
},
"水运营业额":{
title: "水运营业额",
amount: "20,303",
hb: [
{
title: "去年",
amount: "11,000",
rate: "-10.00%",
},
]
},
"铁运营业额":{
title: "铁运营业额",
amount: "303",
hb: [
{
title: "去年",
amount: "300",
rate: "-1.00%",
},
]
}
},
detail:[
{ date: '2022年', '汽运(元)': 544, '水运(元)': 747, '铁运(元)': 674 },
{ date: '2023年', '汽运(元)': 387, '水运(元)': 747, '铁运(元)': 674 },
]
},
chart: null,
currentBtn: "day",
currentLegend: '汽运(元)',
chartOption:{
legend: {
textStyle: {
color: 'white'
}
},
tooltip: {},
dataset: {
dimensions: ['date', '汽运(元)', '水运(元)', '铁运(元)'],
source: []
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
rotate: 45,
color: 'white'
}
},
yAxis: {
axisLabel: {
color: 'white'
}
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#00CCD2'},
{offset: 1, color: '#00A2FF'}
]
},
},
{
type: 'bar',
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#FFFAB7'},
{offset: 1, color: '#FFF459'}
]
},
},
{
type: 'bar',
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{offset: 0, color: '#81FBB8'},
{offset: 1, color: '#28C76F'}
]
},
},
{
type: 'line',
color: 'red',
data: []
}
]
}
}
},
watch: {},
methods: {
resizeChart() {
if (this.chart) {
this.chart.resize();
}
},
changeDimension(dimension){
this.currentBtn = dimension;
switch (dimension) {
case 'day':
this.currentData = this.mockDataDay;
this.refreshChart();
break;
case 'month':
this.currentData = this.mockDataMonth;
this.refreshChart();
break;
case 'year':
this.currentData = this.mockDataYear;
this.refreshChart();
break;
default:
return;
}
},
refreshChart(){
this.chartOption.dataset.source = this.currentData.detail
if (this.chart){
this.chart.setOption(this.chartOption);
}
},
selectLegend(data){
let name;
this.chart.dispatchAction({
type: 'legendAllSelect'
});
switch (data.title) {
case '营业额':
break;
case '汽运营业额':
name = "汽运(元)";
break;
case '水运营业额':
name = "水运(元)";
break;
case '铁运营业额':
name = "铁运(元)";
break;
default:
break;
}
if (name){
this.chart.dispatchAction({
type: 'legendInverseSelect'
});
this.chart.dispatchAction({
type: 'legendSelect',
name: name
})
this.chartOption.series[3].encode = {x: 'date',y: name};
this.chartOption.series[3].data = undefined;
}else {
this.chartOption.series[3].data = [];
}
this.chart.setOption(this.chartOption);
},
},
mounted() {
this.currentData = this.mockDataDay;
this.refreshChart();
setTimeout(() => {
let chartDom = this.$refs.chart;
this.chart = echarts.init(chartDom);
this.chart.setOption(this.chartOption);
window.addEventListener('resize', this.resizeChart);
}, 500)
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
},
props:{
},
}
</script>
<style scoped>
.turnover-detail{
width: 100%;
height: 100%;
}
.card-board{
width: 100%;
height: 25%;
display: flex;
justify-content: space-between;
padding: 2rem;
}
.menu{
width: 100%;
height: 5%;
display: flex;
align-items: center;
padding-left: 5%;
}
.chart{
width: 100%;
height: 70%;
}
input[type="button"]{
height: 80%;
margin: 0.5%;
border: none;
font-size: 12px;
border-radius: 25px;
padding: 0 10px;
color: #00c8d6;
background-color: #1234a1;
}
.selectedBtn{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
.unSelectedBtn{
color: #00c8d6;
background-color: #1234a1;
}
</style>
src/module/databoard/index.vue
View file @ 3534f43e
<template> <template>
<div class="main" @click="testClick"> <div class="main">
<div class="middle"> <div class="middle">
<display-board class="trade_left" title="营业情况"> <display-board class="trade_left" 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;">
<contrast-card v-for="data in mockData.yyqk" style="height: 28%;"> <contrast-card v-for="data in mockData.yyqk" style="height: 28%;" @click.native="routerTo(paths[data.title])">
<title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/> <title-content-mark style="width: 40%;color: #369afa;float: left;" :title="data.title" :content="data.amount" :mark="data.unit"/>
<div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;"> <div style="width: 60%; height: 100%; float:left; padding: 4% 4% 0 12%; line-height: 26px;; display: flex; align-items: center;">
<table-column style="float: left;width: 25%;" :data="data.hb" name="title"/> <table-column style="float: left;width: 25%;" :data="data.hb" name="title"/>
...@@ -104,7 +104,6 @@ import MainBarChart from "./components/chart/main-bar-chart.vue"; ...@@ -104,7 +104,6 @@ import MainBarChart from "./components/chart/main-bar-chart.vue";
import WinnersList from "./components/card/winners-list.vue"; 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 * as echarts from "_echarts@5.4.3@echarts";
import RingPieChart from "./components/chart/ring-pie-chart.vue"; import RingPieChart from "./components/chart/ring-pie-chart.vue";
export default { export default {
...@@ -348,6 +347,11 @@ export default { ...@@ -348,6 +347,11 @@ export default {
] ]
}, },
}, },
paths:{
"营业额": "/turnover-detail",
"成本": "/turnover-detail",
"毛利": "/turnover-detail",
},
charts:{} charts:{}
} }
}, },
...@@ -364,7 +368,9 @@ export default { ...@@ -364,7 +368,9 @@ export default {
this.charts[chartsKey].resize(); this.charts[chartsKey].resize();
} }
}, },
testClick(){ routerTo(path){
console.log(path)
this.$router.push({path: path});
} }
}, },
mounted() { mounted() {
......
src/module/index/router/index_router.js
View file @ 3534f43e
...@@ -4,6 +4,7 @@ import Main from '../index.vue' ...@@ -4,6 +4,7 @@ import Main from '../index.vue'
import index from '../../databoard/index.vue' import index from '../../databoard/index.vue'
import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue"; import MainBarChart from "../../databoard/components/chart/main-bar-chart.vue";
import WinnersList from "../../databoard/components/card/winners-list.vue"; import WinnersList from "../../databoard/components/card/winners-list.vue";
import TurnoverDetail from "../../databoard/databoard/turnover-detail.vue";
Vue.use(Router) Vue.use(Router)
...@@ -28,6 +29,11 @@ export default new Router({ ...@@ -28,6 +29,11 @@ export default new Router({
path: '/winner_list', path: '/winner_list',
name: 'winnerList', name: 'winnerList',
component: WinnersList component: WinnersList
},
{
path: '/turnover-detail',
name: 'turnoverDetail',
component: TurnoverDetail
} }
] ]
}) })
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