代码如下：
<template>
<div class="data-container full settlement">
<el-row :gutter="20">
<el-col :span="13">
<ab-title title="日结算数据"/>
<el-row :gutter="20">
<el-col :span="8">
<div class="count_card" ref="dailyDate">
<div class="icon_box">
<i class="icon iconfont iconcaiwu"></i>
</div>
<div class="cont_text">
<h5>当日收入</h5>
<p>{{ incomeDay || 0 }}万元</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="count_card bg_green">
<div class="icon_box">
<i class="icon iconfont icondaikuan-xianxing"></i>
</div>
<div class="cont_text">
<h5>当日毛利</h5>
<p>{{ grossProfit || 0 }}万元</p>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="count_card bg_blue">
<div class="icon_box">
<i class="icon iconfont iconjifen"></i>
</div>
<div class="cont_text">
<h5>当日结算订单数量</h5>
<p>{{ orderQuantity || 0 }}</p>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<ab-title title="趋势图"/>
<el-card class="box-card">
<div class="constitute_echarts" ref="constitute"></div>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 10px;">
<el-col :span="12">
<ab-title title="收入毛利构成"/>
<el-card class="box-card">
<el-row :span="24" class="profix_water">
<el-col :span="12">
<div class="income_pine" ref="constituteLine"></div>
</el-col>
<el-col :span="12">
<div class="income_pine" ref="grossProfitLine"></div>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="12">
<ab-title title="预算完成情况"/>
<el-card class="box-card">
<el-row :span="24" class="profix_water">
<el-col :span="12">
<div class="constitute_water" ref="constituteIncome"></div>
</el-col>
<el-col :span="12">
<div class="constitute_water" ref="constituteProfit"></div>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
</el-col>
<el-col :span="11">
<el-row>
<el-col :span="24">
<ab-title title="业务分类展示"/>
<el-card class="box-card">
<div class="echarts_num" style="height: 250px;" ref="Classify">
<el-table
:data="tableList"
border
fit
height="250px"
style="width: 100%"
:header-cell-style="{textAlign: 'center'}"
:cell-style="{ textAlign: 'center' }">
<el-table-column
prop="businessCategory"
label="业务大类"
width="150">
</el-table-column>
<el-table-column
prop="businessClass"
label="业务中类"
width="150">
</el-table-column>
<el-table-column
prop="dayExpenditure"
label="当日支出(万)"
width="120">
</el-table-column>
<el-table-column
prop="dayGrossProfit"
label="当日毛利(万)"
width="120">
</el-table-column>
<el-table-column
prop="dayIncome"
label="当日收入(万)"
width="120">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
<el-row style="margin-top: 10px;">
<el-col :span="24">
<ab-title title="各公司当日情况"/>
<el-card class="box-card">
<div class="echarts_box" style="height: 250px;" ref="constituteBox" >
<el-table
:data="tableData"
border
fit
style="width: 100%"
height="250px"
:header-cell-style="{textAlign: 'center'}"
:cell-style="{ textAlign: 'center' }">
<el-table-column
prop="areaName"
label="地区名称"
width="100">
</el-table-column>
<el-table-column
prop="companyName"
label="公司名称"
width="250">
</el-table-column>
<el-table-column
prop="dayGrossProfit"
label="当日毛利(万)"
width="120">
</el-table-column>
<el-table-column
prop="dayRevenue"
label="当日收入(万)"
width="120">
</el-table-column>
<el-table-column
prop="orderQuantity"
label="当日结算订单数量"
width="140">
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
import EchartsMixins from "@/assets/js/echarts-mixins.js"
import { getdailyNum, getIncome, getcompanyNum, getClassify, getBudget } from "../../api/bi/settlement";
export default {
name: "settlement",
extends: EchartsMixins,
data() {
return {
incomeDay: '',
grossProfit: '',
orderQuantity: '',
tableData:[],
tableList:[]
}
},
mounted() {
this.dailySettle();
this.constitute();
this.grossClassify();
this.dailySituation();
this.getBudgetCompletion();
},
methods: {
// 日结算数据
dailySettle() {
getdailyNum().then(res => {
this.incomeDay =(Number(res.data.data.incomeDay)/10000).toFixed(2);
this.grossProfit =(Number(res.data.data.grossProfit)/10000).toFixed(2);
this.orderQuantity = res.data.data.orderQuantity;
})
},
// 趋势图
constitute() {
const constitute = this.$refs.constitute;
getIncome().then(res => {
let arr = res.data.data;
let xData = [];
let yData1 = [];
let yData2 = [];
let yData3 = [];
arr.forEach(item => {
xData.push(item.balanceDate);
yData1.push((Number(item.orderQuantity) / 10000).toFixed(2));
yData2.push((Number(item.income) / 10000).toFixed(2));
yData3.push((Number(item.grossProfit) / 10000).toFixed(2));
})
this.initCharts(constitute, {
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
},
formatter: '{b}<br />{a0}: {c0}万元<br />{a1}: {c1}万元<br />{a2}: {c2}万元'
},
legend: {
x: "center",
y: "0px",
textStyle: {
color: "#000c0c",
fontSize: 12
},
icon: "circle",
data: ["订单数量趋势", "收入趋势", "毛利趋势"]
},
dataZoom: [
{
type: "slider",
show: true,
height: 10,
left: "20%",
right: "20%",
bottom: "2%",
start: 0,
end: 100,
textStyle: {
color: "#000c0c",
fontSize: 11
}
},
{
type: "inside"
}
],
grid: {
right: "7%",
bottom: "10%",
left: "7%",
top: "45px",
containLabel: true
},
xAxis: [
{
type: "category",
data: xData,
name: "时间",
nameTextStyle: {
color: "#000c0c"
},
axisLine: {
lineStyle: {
color: "#0B4CA9"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#000c0c",
fontSize: 12
}
}
}
],
yAxis: [
{
type: "value",
name: "单位(万)",
nameTextStyle: {
color: "#000c0c"
},
position: "left",
axisLine: {
lineStyle: {
color: "#0B4CA9"
}
},
splitLine: {
lineStyle: {
color: "#0B4CA9"
}
},
axisLabel: {
color: "#000c0c",
fontSize: 12
}
}
],
series: [
{
name: "订单数量趋势",
type: "line",
yAxisIndex: 0,
symbolSize: 6,
itemStyle: {
normal: {
color: "#3077fc"
}
},
data: yData1
},
{
name: "收入趋势",
type: "line",
yAxisIndex: 0,
symbolSize: 6,
itemStyle: {
normal: {
color: "#3fe3e9"
}
},
data: yData2
},
{
name: "毛利趋势",
type: "line",
yAxisIndex: 0,
symbolSize: 6,
itemStyle: {
normal: {
color: "#d83a6c"
}
},
data: yData3
}
]
});
})
},
// 收入毛利构成统计图
grossProfitPie(arr){
const grossProfitLine = this.$refs.grossProfitLine;
let color = [
"#f87be2",
"#fdb301",
"#57e7ec",
"#8d7fec",
"#f2719a",
"#fca4bb",
"#f59a8f",
"#5085f2",
"#e75fc3",
"#cf9ef1"
];
let xdata = [];
let ydata = [];
if (arr && arr.length > 0) {
for (let i = 0; i < arr.length; i++) {
xdata.push(arr[i].businessClass)
ydata.push({
value: (Number(arr[i].dayGrossProfit) / 10000).toFixed(2),
name: arr[i].businessClass
})
}
}
this.initCharts(grossProfitLine, {
color: color,
title: {
text: "毛利构成图",
x: "center",
y:"top",
textStyle: {
color: "#747474",
fontSize: 12
},
},
legend: {
orient: "horizontal",
x: "center",
y: "bottom",
data: xdata,
itemWidth: 6,
itemHeight: 6,
itemGap: 8,
textStyle: {
color: "#000c0c",
fontSize:10
},
formatter: function (name) {
return "" + name;
}
},
series: [
{
type: "pie",
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["40%", "70%"],
center: ["50%", "45%"],
avoidLabelOverlap: false,
itemStyle: {
//图形样式
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 6
}
},
label: {
normal: {
show: false,
position: "center",
formatter: "{text|{b}}\n{c} ({d}%)",
rich: {
text: {
color: "#666",
fontSize: 14,
align: "center",
verticalAlign: "middle",
padding: 8
},
value: {
color: "#8693F3",
fontSize: 14,
align: "center",
verticalAlign: "middle"
}
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 14
}
}
},
data: ydata
}
]
})
},
constituteEcharts(arr) {
const constituteLine = this.$refs.constituteLine;
let color = [
"#f87be2",
"#fdb301",
"#57e7ec",
"#8d7fec",
"#f2719a",
"#fca4bb",
"#f59a8f",
"#5085f2",
"#e75fc3",
"#cf9ef1"
];
let xdata = [];
let ydata = [];
if (arr && arr.length > 0) {
for (let i = 0; i < arr.length; i++) {
xdata.push(arr[i].businessClass)
ydata.push({
value: (Number(arr[i].dayIncome) / 10000).toFixed(2),
name: arr[i].businessClass
})
}
}
this.initCharts(constituteLine, {
title: {
text: "收入构成图",
x: "center",
y:"top",
textStyle: {
color: "#747474",
fontSize:12
},
},
color: color,
legend: {
orient: "horizontal",
x: "center",
y: "bottom",
data: xdata,
itemWidth: 6,
itemHeight: 6,
itemGap: 8,
textStyle: {
color: "#000c0c",
fontSize:10
},
formatter: function (name) {
return "" + name;
}
},
series: [
{
type: "pie",
clockwise: false, //饼图的扇区是否是顺时针排布
minAngle: 2, //最小的扇区角度（0 ~ 360）
radius: ["40%", "70%"],
center: ["50%", "45%"],
avoidLabelOverlap: false,
itemStyle: {
//图形样式
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 6
}
},
label: {
normal: {
show: false,
position: "center",
formatter: "{text|{b}}\n{c} ({d}%)",
rich: {
text: {
color: "#666",
fontSize: 14,
align: "center",
verticalAlign: "middle",
padding: 8
},
value: {
color: "#8693F3",
fontSize: 14,
align: "center",
verticalAlign: "middle"
}
}
},
emphasis: {
show: true,
textStyle: {
fontSize: 14
}
}
},
data: ydata
}
]
})
},
// 预算完成情况
progressBar(data) {
const constituteIncome = this.$refs.constituteIncome;
this.initCharts(constituteIncome, {
color: ['rgb(165,250,251)'],
legend: {
show: true,
itemGap: 12,
data: ['毛利']
},
series: [{
type: 'pie',
clockWise: false,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: data,
name: '毛利',
label: {
normal: {
formatter: function(params){
return params.value+'%';
},
position: 'center',
show: true,
textStyle: {
fontSize: '20',
color: '#0580f2'
}
}
},
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#7bf8fe' // 0% 处的颜色
}, {
offset: 1,
color: '#294ebe' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
value: 100 - data
}]
}]
});
},
progressProfit(data) {
const constituteProfit = this.$refs.constituteProfit;
this.initCharts(constituteProfit, {
color: ['rgb(165,250,251)'],
legend: {
show: true,
itemGap: 12,
data: ['总收入']
},
series: [{
type: 'pie',
clockWise: false,
radius: ['50%', '66%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
},
hoverAnimation: false,
data: [{
value: data,
name: '总收入',
label: {
normal: {
formatter: function(params){
return params.value+'%';
},
position: 'center',
show: true,
textStyle: {
fontSize: '20',
color: '#0580f2'
}
}
},
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#7bf8fe' // 0% 处的颜色
}, {
offset: 1,
color: '#294ebe' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
}, {
value: 100 - data
}]
}]
});
},
// 各公司当日情况
dailySituation(){
const constituteBox = this.$refs.constituteBox;
getcompanyNum().then(res => {
this.tableData = res.data.data;
this.tableData.forEach(item => {
item.dayGrossProfit = ((item.dayGrossProfit)/10000).toFixed(2);
item.dayRevenue = ((item.dayRevenue)/10000).toFixed(2);
})
})
},
grossClassify(){
const Classify = this.$refs.Classify;
getClassify().then(res => {
this.tableList=res.data.data;
this.grossProfitPie(res.data.data);
this.constituteEcharts(res.data.data);
this.tableList.forEach(item => {
item.dayExpenditure = (Number(item.dayExpenditure)/10000).toFixed(2);
item.dayGrossProfit = (Number(item.dayGrossProfit)/10000).toFixed(2);
item.dayIncome = (Number(item.dayIncome)/10000).toFixed(2);
})
})
},
getBudgetCompletion() {
getBudget().then(res => {
const overallIncome = (Number(res.data.data.overallIncome) * 100).toFixed(2)
const grossProfit = (Number(res.data.data.grossProfit) * 100).toFixed(2)
this.progressBar(overallIncome);
this.progressProfit(grossProfit);
})
}
}
}
</script>
<style scoped lang="less">
.settlement {
overflow-y: auto;
.count_card {
display: flex;
align-items: center;
justify-content: flex-start;
background: #f0745e;
border-radius: 5px;
padding: 15px;
&.bg_green {
background: #f1a742;
}
&.bg_blue {
background: #3dbec5;
}
.icon_box {
color: #fff9;
.icon {
font-size: 30px;
}
}
.cont_text {
padding-left: 10px;
h5 {
color: #ffffffbf;
font-size: 16px;
}
p {
margin-top: 5px;
color: #ffffff;
font-size: 24px;
}
}
}
.constitute_echarts {
width: 100%;
height: 200px;
}
.income_pine {
width: 100%;
height: 200px;
}
.grossProfit_pine{
width: 100%;
height: 200px;
}
.constitute_water {
width: 100%;
height: 200px;
}
.profix_water {
align-items: center;
justify-content: flex-start;
}
}
.echarts_box{
width: 100%;
height: 200px;
}
.echarts_num{
width: 100%;
height: 200px;
}
</style>
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
