Skip to content

S
shld-databoard-ui
Commit 814838a6 authored by Inner peace's avatar Inner peace
Browse files
Options

同期对比

parent 61981560
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 416 additions and 10113 deletions
package-lock.json
View file @ 814838a6
This diff is collapsed.
package.json
View file @ 814838a6
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^1.4.0", "axios": "^1.4.0",
"echarts": "^5.4.3", "echarts": "^5.5.1",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"jquery": "^3.2.1", "jquery": "^3.2.1",
"js-base64": "^3.7.5", "js-base64": "^3.7.5",
......
src/module/api/apiList.js
View file @ 814838a6
...@@ -42,6 +42,13 @@ export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/ ...@@ -42,6 +42,13 @@ export const getBusinessConditionDatasByYear = (cur_day) => fetch('/api/query/*/
} }
}, 'POST'); }, 'POST');
//明细页营业额汇年 -同期对比
export const getBusinessConditionDatasByYoy = (cur_day) => fetch('/api/query/*/action/get_business_condition_datas_by_yoy', {
aux: {
cur_day: cur_day
}
}, 'POST');
// 应收账款汇总 // 应收账款汇总
export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_summary_bar", {}, "POST") export const arSummaryBar = () => fetch("/api/query/dash_board/action/get_ar_summary_bar", {}, "POST")
......
src/module/databoard/components/chart/line-axis-chart.vue 0 → 100644
View file @ 814838a6
<template>
<div ref="chart" @click=""/>
</template>
<script>
export default {
name: "LineAxisChart",
data() {
return {
option: {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
}
}
};
</script>
<style scoped>
</style>
src/module/databoard/databoard/turnover-detail.vue
View file @ 814838a6
...@@ -22,6 +22,8 @@ ...@@ -22,6 +22,8 @@
@click="changeDimension('month')"> @click="changeDimension('month')">
<input type="button" :class="{'selectedBtn': currentBtn === 'year'}" value="年统计" <input type="button" :class="{'selectedBtn': currentBtn === 'year'}" value="年统计"
@click="changeDimension('year')"> @click="changeDimension('year')">
<input type="button" :class="{'selectedBtn': currentBtn === 'yoy'}" value="同期对比"
@click="changeDimension('yoy')">
</div> </div>
<div class="chart"> <div class="chart">
<div ref="chart" style="width: 100%;height: 100%;" @click=""/> <div ref="chart" style="width: 100%;height: 100%;" @click=""/>
...@@ -42,7 +44,8 @@ export default { ...@@ -42,7 +44,8 @@ export default {
components: {ContrastCard, TableColumn, TitleContentMark}, components: {ContrastCard, TableColumn, TitleContentMark},
data() { data() {
return { return {
today: moment().format("yyyy-MM-DD"), today: "2023-05-18",
// today: moment().format("yyyy-MM-DD"),
curPageCode: this.$route.query.code ? this.$route.query.code : "yye", curPageCode: this.$route.query.code ? this.$route.query.code : "yye",
currentData: {}, currentData: {},
mockDataDay: { mockDataDay: {
...@@ -199,13 +202,101 @@ export default { ...@@ -199,13 +202,101 @@ export default {
] ]
}, },
}, },
]
},
discountOption : {
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {
textStyle: {
color: 'white'
}
},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: '#5470C6'
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'Precipitation ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
// prettier-ignore
data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
}
],
yAxis: [
{ {
type: 'value'
}
],
series: [
{
name: 'Precipitation(2015)',
type: 'line',
xAxisIndex: 1,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
1000, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Precipitation(2016)',
type: 'line', type: 'line',
color: 'red', smooth: true,
lineStyle:{ emphasis: {
width: 3, focus: 'series'
}, },
data: [] data: [
2, 5.9, 11.1, 18.7, 48.3, 69.2, 21.6, 46.6, 55.4, 18.4, 10.3, 2000
]
} }
] ]
} }
...@@ -245,6 +336,10 @@ export default { ...@@ -245,6 +336,10 @@ export default {
await this.getYearDate(); await this.getYearDate();
this.refreshChart(); this.refreshChart();
break; break;
case 'yoy':
await this.getYearYoyDate();
this.refreshDiscountChart();
break;
default: default:
return; return;
} }
...@@ -252,11 +347,38 @@ export default { ...@@ -252,11 +347,38 @@ export default {
refreshChart() { refreshChart() {
this.chartOption.dataset.source = this.currentData.detail this.chartOption.dataset.source = this.currentData.detail
if (this.chart) { if (this.chart) {
this.chart.dispose();
let chartDom = this.$refs.chart;
this.chart = echarts.init(chartDom);
this.chart.setOption(this.chartOption); this.chart.setOption(this.chartOption);
} }
}, },
refreshDiscountChart(tspt) {
this.chart.dispose();
let chartDom = this.$refs.chart;
this.chart = echarts.init(chartDom);
this.discountOption.xAxis = this.currentData.detail.sumData.xAxis
this.discountOption.series = this.currentData.detail.sumData.series
if(tspt==10){
this.discountOption.xAxis = this.currentData.detail.tspt10.xAxis
this.discountOption.series = this.currentData.detail.tspt10.series
}
if(tspt==20){
this.discountOption.xAxis = this.currentData.detail.tspt20.xAxis
this.discountOption.series = this.currentData.detail.tspt20.series
}
if(tspt==30){
this.discountOption.xAxis = this.currentData.detail.tspt30.xAxis
this.discountOption.series = this.currentData.detail.tspt30.series
}
this.chart.setOption(this.discountOption);
},
selectLegend(title) { selectLegend(title) {
let name; let name;
let tspt;
this.chart.dispatchAction({ this.chart.dispatchAction({
type: 'legendAllSelect' type: 'legendAllSelect'
}); });
...@@ -265,52 +387,64 @@ export default { ...@@ -265,52 +387,64 @@ export default {
break; break;
case '汽运营业额': case '汽运营业额':
name = "汽运(万元)"; name = "汽运(万元)";
tspt = 10;
break; break;
case '水运营业额': case '水运营业额':
name = "水运(万元)"; name = "水运(万元)";
tspt = 30;
break; break;
case '铁运营业额': case '铁运营业额':
name = "铁运(万元)"; name = "铁运(万元)";
tspt = 20;
break; break;
case '汽运成本': case '汽运成本':
name = "汽运(万元)"; name = "汽运(万元)";
tspt = 10;
break; break;
case '水运成本': case '水运成本':
name = "水运(万元)"; name = "水运(万元)";
tspt = 30;
break; break;
case '铁运成本': case '铁运成本':
name = "铁运(万元)"; name = "铁运(万元)";
tspt = 20;
break; break;
case '汽运毛利': case '汽运毛利':
name = "汽运(万元)"; name = "汽运(万元)";
tspt = 10;
break; break;
case '水运毛利': case '水运毛利':
name = "水运(万元)"; name = "水运(万元)";
tspt = 30;
break; break;
case '铁运毛利': case '铁运毛利':
name = "铁运(万元)"; name = "铁运(万元)";
tspt = 20;
break; break;
default: default:
break; break;
} }
if (name) { if (this.currentBtn == 'yoy') {
this.chart.dispatchAction({ this.refreshDiscountChart(tspt)
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 { } else {
this.chartOption.series[3].data = []; 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.currentLegend = name;
this.currentCard = title;
this.chart.setOption(this.chartOption);
} }
this.currentLegend = name;
this.currentCard = title;
this.chart.setOption(this.chartOption);
}, },
//获取日维度数据 //获取日维度数据
async getDayDate() { async getDayDate() {
...@@ -324,6 +458,10 @@ export default { ...@@ -324,6 +458,10 @@ export default {
async getYearDate() { async getYearDate() {
this.currentData = await getTrunOver("year", this.curPageCode, this.today) this.currentData = await getTrunOver("year", this.curPageCode, this.today)
}, },
//获取月维度数据
async getYearYoyDate() {
this.currentData = await getTrunOver("yoy", this.curPageCode, this.today)
},
}, },
async mounted() { async mounted() {
await this.getDayDate(); await this.getDayDate();
......
src/module/databoard/databoard/turnoverDetail.js
View file @ 814838a6
...@@ -7,7 +7,8 @@ import { ...@@ -7,7 +7,8 @@ import {
getAllTypeBusinessConditionDetailByMonth, getAllTypeBusinessConditionDetailByMonth,
getBusinessConditionDatasByYear, getBusinessConditionDatasByYear,
getAllTypeBusinessConditionDatasByYear, getAllTypeBusinessConditionDatasByYear,
getAllTypeBusinessConditionDetailByYear getAllTypeBusinessConditionDetailByYear,
getBusinessConditionDatasByYoy
} from "../../api/apiList"; } 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";
import moment from 'moment' import moment from 'moment'
...@@ -59,6 +60,9 @@ export const getDetail = async function (dimension, type, cur_day) { ...@@ -59,6 +60,9 @@ export const getDetail = async function (dimension, type, cur_day) {
if (dimension == 'year') { if (dimension == 'year') {
res = await getAllTypeBusinessConditionDetailByYear(cur_day) res = await getAllTypeBusinessConditionDetailByYear(cur_day)
} }
if (dimension == 'yoy') {
res = await getBusinessConditionDatasByYoy(cur_day)
}
let data = res.data let data = res.data
return adapterDetailData(dimension, type, data) return adapterDetailData(dimension, type, data)
}; };
...@@ -72,7 +76,7 @@ export const reqDaySumData = async function (dimension, cur_day) { ...@@ -72,7 +76,7 @@ export const reqDaySumData = async function (dimension, cur_day) {
if (dimension == 'month') { if (dimension == 'month') {
res = await getBusinessConditionDataByMonth(cur_day); res = await getBusinessConditionDataByMonth(cur_day);
} }
if (dimension == 'year') { if (dimension == 'year' || dimension == 'yoy') {
res = await getBusinessConditionDatasByYear(cur_day); res = await getBusinessConditionDatasByYear(cur_day);
} }
let data = res.data let data = res.data
...@@ -88,7 +92,7 @@ export const reqDayTransportData = async function (dimension, cur_day) { ...@@ -88,7 +92,7 @@ export const reqDayTransportData = async function (dimension, cur_day) {
if (dimension == 'month') { if (dimension == 'month') {
res = await getAllTypeBusinessConditionDatasByMonth(cur_day); res = await getAllTypeBusinessConditionDatasByMonth(cur_day);
} }
if (dimension == 'year') { if (dimension == 'year' || dimension == 'yoy') {
res = await getAllTypeBusinessConditionDatasByYear(cur_day); res = await getAllTypeBusinessConditionDatasByYear(cur_day);
} }
let data = res.data let data = res.data
...@@ -117,7 +121,7 @@ export const adapterSumData = function (dimension, type, data) { ...@@ -117,7 +121,7 @@ export const adapterSumData = function (dimension, type, data) {
if (dimension == 'month') { if (dimension == 'month') {
res = adapterSumDataMonth(type, data); res = adapterSumDataMonth(type, data);
} }
if (dimension == 'year') { if (dimension == 'year' || dimension == 'yoy') {
res = adapterSumDataYear(type, data); res = adapterSumDataYear(type, data);
} }
return res; return res;
...@@ -275,6 +279,20 @@ export const adapterSumDataYear = function (type, data) { ...@@ -275,6 +279,20 @@ export const adapterSumDataYear = function (type, data) {
* @returns {any[]} * @returns {any[]}
*/ */
export const adapterDetailData = function (dimension, type, data) { export const adapterDetailData = function (dimension, type, data) {
if (dimension == 'yoy') {
return adapterYoyDetailData(dimension, type, data)
}else {
return adapterColumnarData(dimension, type, data)
}
}
/**
* 柱状图数据组装
* @param dimension
* @param type
* @param data
*/
export const adapterColumnarData = function (dimension, type, data) {
let list = new Array() let list = new Array()
let detail = null let detail = null
for (let key in data) { for (let key in data) {
...@@ -295,6 +313,126 @@ export const adapterDetailData = function (dimension, type, data) { ...@@ -295,6 +313,126 @@ export const adapterDetailData = function (dimension, type, data) {
return list; return list;
} }
export const adapterYoyDetailData = function (dimension, type, data) {
return adapterYoyData(type,data)
}
/**
* 折线图x
* @param dimension
* @param type
* @param data
*/
export const adapterYoyData = function (type, data) {
let pageDate = new Object();
//汇总数据
pageDate.sumData = adapterYoyYearData(data.cur_year+"汇总", data.pre_year+"汇总", type, data.year_data_sum)
//汽运数据
pageDate.tspt10 = adapterYoyYearData(data.cur_year+"汽运", data.pre_year+"汽运", type, data.year_data_transport.tspt_10)
//铁运数据
pageDate.tspt20 = adapterYoyYearData(data.cur_year+"铁运", data.pre_year+"铁运", type, data.year_data_transport.tspt_20)
//水运数据
pageDate.tspt30 = adapterYoyYearData(data.cur_year+"水运", data.pre_year+"水运", type, data.year_data_transport.tspt_30)
return pageDate;
}
export const adapterYoyYearData = function (year,pre_year, type, data) {
let pageDate = new Object();
let xAxis = new Array();
let series = new Array();
//汇总数据
let pre_year_sum_data = adapterYoySumData(type, data.pre_year_data) //去年同期对比
xAxis.push(adapterXAxisData(pre_year,"red", pre_year_sum_data.month));
series.push(adapterSeriesData(1,pre_year, pre_year_sum_data.lineData))
let cur_year_sum_data = adapterYoySumData(type, data.cur_year_data) //今年数据
xAxis.push(adapterXAxisData(year,"#00bbe5", cur_year_sum_data.month));
series.push(adapterSeriesData(null,year, cur_year_sum_data.lineData))
pageDate.xAxis = xAxis;
pageDate.series = series;
return pageDate;
}
export const adapterYoySumData = function (type, data) {
let yoyData = new Object();
let month = new Array()
let lineData = new Array()
if(data != null) {
for (var item of data) {
if (type == 'yye') {
lineData.push(item.cur_sell_settle_amount);
}
if (type == 'cb') {
lineData.push(item.cur_buy_settle_amount);
}
if (type == 'ml') {
lineData.push(item.cur_gross_profit_amount);
}
month.push(item.cur_month);
}
}
yoyData.month = month;
yoyData.lineData = lineData;
return yoyData;
}
/**
* x轴数据
* @param type
* @param color
* @param data
* @returns {{data, axisLine: {lineStyle: {color}, onZero: boolean}, axisTick: {alignWithLabel: boolean}, axisPointer: {label: {formatter: (function(*): *)}}, type: string}}
*/
export const adapterXAxisData = function (year,color, data) {
return {
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: color
}
},
axisPointer: {
label: {
formatter: function (params) {
return ((params.seriesData.length ? params.seriesData[0].name+ '：' + conver_amont(params.seriesData[0].value)+"万元": '')
);
}
}
},
data: data
}
}
/**
* 业务数据加载
* @param type
* @param colors
* @param data
* @returns {{data: number[], xAxisIndex: number, name: string, emphasis: {focus: string}, type: string, smooth: boolean}}
*/
export const adapterSeriesData = function (xAxisIndex,name, data) {
return {
name: name,
type: 'line',
xAxisIndex: xAxisIndex,
smooth: true,
emphasis: {
focus: 'series'
},
data: data
};
}
/** /**
* 详细数据转换 * 详细数据转换
* @param type * @param type
......
src/module/databoard/index.vue
View file @ 814838a6
...@@ -181,7 +181,8 @@ export default { ...@@ -181,7 +181,8 @@ export default {
}, },
data() { data() {
return { return {
today: moment().format("yyyy-MM-DD"), today: "2023-05-18",
// today: moment().format("yyyy-MM-DD"),
yyqk: { yyqk: {
yye: { yye: {
title: "营业额", title: "营业额",
......
src/module/index/index.html
View file @ 814838a6
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>联达供应链数据大屏</title> <title>联达供应链控制塔</title>
<!-- Google MD图标 --> <!-- Google MD图标 -->
<link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
......
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