581 lines
14 KiB
Vue
581 lines
14 KiB
Vue
<template>
|
||
<div style="padding: 10px; box-sizing: border-box">
|
||
<div>
|
||
<div class="mumber-box">
|
||
<div class="mumber" v-for="(it, index) in data.Statistics" :key="index">
|
||
<div class="mum-left">
|
||
<img class="index-img" :src="'/src/assets/erp/index-icon' + (index + 1) + '.svg'" />
|
||
</div>
|
||
<div class="mum-right">
|
||
<div class="mum-title">{{ it.name }}（万元）</div>
|
||
<div class="mum">{{ it.num }}</div>
|
||
<div class="mum-than">
|
||
{{ index > 1 ? '环比' : '同比' }} {{ it.pecent }}%
|
||
<Icon
|
||
:icon="it.isUp ? 'ant-design:caret-up-outlined' : 'ant-design:caret-down-outlined'"
|
||
:color="it.isUp ? '#3dba84' : '#ee3b3b'"
|
||
:size="14"
|
||
class="icon"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a-row :gutter="10">
|
||
<a-col :span="6">
|
||
<div class="box-bg">
|
||
<div class="box-bg-title">
|
||
<span class="title-text">本月销售占比</span>
|
||
</div>
|
||
<div class="item" ref="homePieChart"></div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="18">
|
||
<div class="box-bg">
|
||
<div class="box-bg-title">
|
||
<span class="title-text">销售分析</span>
|
||
</div>
|
||
<div class="item" ref="homeLineChart"></div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="6">
|
||
<div class="box-bg">
|
||
<div class="box-bg-title">
|
||
<span class="title-text">本月收入占比</span>
|
||
</div>
|
||
<div class="item" ref="homePieChart2"></div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="7">
|
||
<div class="box-bg" style="position: relative">
|
||
<div class="box-bg-title">
|
||
<span class="title-text">出库产品分析</span>
|
||
</div>
|
||
<div class="total">
|
||
<div>{{ data.total }}万元</div>
|
||
<div class="text">总出库产品金额</div>
|
||
</div>
|
||
<div class="item" ref="homeBar2Chart"></div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="11">
|
||
<div class="box-bg">
|
||
<div class="box-bg-title">
|
||
<span class="title-text">本年利润偏差分析</span>
|
||
</div>
|
||
<div class="item" ref="homeBarChart"></div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, nextTick, reactive, ref, unref, markRaw } from 'vue';
|
||
import {
|
||
getSaleDataInfo,
|
||
getProportionSaleInfo,
|
||
getSaleAnalysisInfo,
|
||
getProportionIncomeInfo,
|
||
getProductAnalysisInfo,
|
||
getProfitInfo,
|
||
} from '/@/api/erp/report/sales';
|
||
import Icon from '/@/components/Icon/index';
|
||
import * as echarts from 'echarts';
|
||
|
||
const formate = (name) => {
|
||
let str = name + '：';
|
||
data.dataOne.forEach((o: any) => {
|
||
if (name == o.name) {
|
||
str += o.value + '万元';
|
||
}
|
||
});
|
||
return str;
|
||
};
|
||
const data = reactive({
|
||
colors: ['#5E95FF', '#00CACF', '#FF9100', '#995EFF', '#5E6EFF'],
|
||
Statistics: [] as any[],
|
||
dataOne: [],
|
||
// 玫瑰饼图
|
||
pieOption: {
|
||
color: ['#7EAAFF', '#5887E3', '#5E75E6', '#6D68F8', '#9E9BFC', '#8CB1F9'],
|
||
legend: {
|
||
orient: 'horizontal',
|
||
x: 'center',
|
||
y: 'bottom',
|
||
top: '78%',
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 20,
|
||
padding: [5, 5, 5, 5],
|
||
textStyle: {
|
||
color: '#85878e',
|
||
},
|
||
formatter: formate,
|
||
},
|
||
series: {
|
||
name: '',
|
||
center: ['50%', '32%'],
|
||
type: 'pie',
|
||
radius: [0, 85],
|
||
roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 0,
|
||
},
|
||
label: {
|
||
color: '#6e7079',
|
||
overflow: 'none',
|
||
formatter: '{b}\n{d}%',
|
||
},
|
||
data: [],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
lineOption: {
|
||
color: ['#5E95FF', '#995EFF'],
|
||
title: {
|
||
text: '单位：%',
|
||
left: 20,
|
||
textStyle: {
|
||
color: '#333',
|
||
fontWeight: 'normal',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
legend: {
|
||
itemWidth: 20,
|
||
itemHeight: 10,
|
||
itemGap: 20,
|
||
right: 20,
|
||
textStyle: {
|
||
color: '#85878e',
|
||
},
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [] as any[],
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
},
|
||
series: [] as any[],
|
||
},
|
||
|
||
// 占比饼图
|
||
pie2Option: {
|
||
color: ['#00FFE5', '#5E95FF', '#995EFF'],
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(51, 51, 51, 0.7)',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
formatter: '{b}<br/>{c}' + '万元<br/>' + '{d}%',
|
||
},
|
||
legend: {
|
||
bottom: '10%',
|
||
left: 'center',
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 20,
|
||
textStyle: {
|
||
color: '#85878e',
|
||
},
|
||
},
|
||
series: {
|
||
type: 'pie',
|
||
radius: ['40%', '60%'],
|
||
center: ['50%', '38%'],
|
||
avoidLabelOverlap: false,
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [] as any[],
|
||
},
|
||
},
|
||
|
||
bar2Option: {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
backgroundColor: 'rgba(51, 51, 51, 0.7)',
|
||
textStyle: {
|
||
color: '#fff',
|
||
},
|
||
formatter: '{b}<br/>{c}' + '万元',
|
||
},
|
||
grid: {
|
||
top: 90,
|
||
left: 20,
|
||
right: 30,
|
||
bottom: 20,
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
data: [] as any[],
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
yAxis: {},
|
||
series: {
|
||
name: '',
|
||
type: 'pictorialBar',
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(221, 221, 221, 0.2)',
|
||
},
|
||
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
||
itemStyle: {
|
||
opacity: 1,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#5E95FF', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#695EFF', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
emphasis: {
|
||
itemStyle: {
|
||
opacity: 1,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#FFF45E', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#FF9100', // 100% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
},
|
||
data: [] as any[],
|
||
z: 10,
|
||
},
|
||
},
|
||
total: 0,
|
||
|
||
barOption: {
|
||
color: ['#00CACF', '#5E95FF', '#FF9100'],
|
||
title: {
|
||
text: '单位：万元',
|
||
left: 20,
|
||
textStyle: {
|
||
color: '#333',
|
||
fontWeight: 'normal',
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
grid: {
|
||
left: 20,
|
||
right: 30,
|
||
bottom: 20,
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
itemWidth: 20,
|
||
itemHeight: 10,
|
||
itemGap: 20,
|
||
right: 20,
|
||
textStyle: {
|
||
color: '#85878e',
|
||
},
|
||
data: ['预计利润', '实际利润', '偏差率'],
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [] as any[],
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
min: 0,
|
||
max: 0,
|
||
interval: 50,
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
axisLabel: {
|
||
formatter: '{value} %',
|
||
},
|
||
},
|
||
],
|
||
series: [] as any[],
|
||
},
|
||
});
|
||
|
||
const homePieChart = ref<HTMLDivElement>();
|
||
const homePieChart2 = ref<HTMLDivElement>();
|
||
const homeLineChart = ref<HTMLDivElement>();
|
||
const homeBar2Chart = ref<HTMLDivElement>();
|
||
const homeBarChart = ref<HTMLDivElement>();
|
||
|
||
onMounted(async () => {
|
||
let res = await getSaleDataInfo();
|
||
data.Statistics = res || [];
|
||
let res1 = await getProportionSaleInfo();
|
||
data.dataOne = res1 || [];
|
||
data.pieOption.series.data = data.dataOne;
|
||
let res2 = await getSaleAnalysisInfo();
|
||
data.lineOption.series = [];
|
||
data.lineOption.xAxis.data = [];
|
||
res2.forEach((o, i) => {
|
||
let arr: any[] = [];
|
||
o.data.forEach((k: any) => {
|
||
arr.push(k.value);
|
||
if (i == 1) data.lineOption.xAxis.data.push(k.name);
|
||
});
|
||
let obj = {
|
||
name: o.name,
|
||
type: 'line',
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: i === 0 ? '#5E95FF' : '#995EFF',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#fff',
|
||
},
|
||
]),
|
||
},
|
||
smooth: true,
|
||
data: arr,
|
||
};
|
||
data.lineOption.series.push(obj);
|
||
});
|
||
let res3 = await getProportionIncomeInfo();
|
||
res3.forEach((o) => {
|
||
let obj = {
|
||
name: o.name,
|
||
value: o.value,
|
||
label: {
|
||
show: false,
|
||
},
|
||
};
|
||
data.pie2Option.series.data.push(obj);
|
||
});
|
||
let res4 = await getProductAnalysisInfo();
|
||
res4.forEach((o) => {
|
||
data.bar2Option.xAxis.data.push(o.name);
|
||
data.bar2Option.series.data.push(o.value);
|
||
data.total += o.value;
|
||
});
|
||
let res5 = await getProfitInfo();
|
||
let total: any = [];
|
||
res5.forEach((o, i) => {
|
||
let arr: any[] = [];
|
||
o.data.forEach((k: any) => {
|
||
arr.push(k.value);
|
||
if (i == 1) data.barOption.xAxis.data.push(k.name);
|
||
});
|
||
let obj: any = {
|
||
name: o.name,
|
||
type: o.name == '偏差率' ? 'line' : 'bar',
|
||
data: arr,
|
||
};
|
||
if (o.name == '偏差率') {
|
||
obj.yAxisIndex = 1;
|
||
} else {
|
||
total = total.concat(arr);
|
||
}
|
||
data.barOption.series.push(obj);
|
||
});
|
||
data.barOption.yAxis[0].max = Math.max.apply(null, total);
|
||
|
||
nextTick(() => {
|
||
let myChart = markRaw(echarts.init(unref(homePieChart) as HTMLDivElement));
|
||
myChart.setOption(data.pieOption, true);
|
||
myChart.resize(); //显示区域大小发生改变更新图表
|
||
|
||
let myChart2 = markRaw(echarts.init(unref(homePieChart2) as HTMLDivElement));
|
||
myChart2.setOption(data.pie2Option, true);
|
||
myChart2.resize(); //显示区域大小发生改变更新图表
|
||
|
||
let myChart4 = markRaw(echarts.init(unref(homeLineChart) as HTMLDivElement));
|
||
myChart4.setOption(data.lineOption, true);
|
||
myChart4.resize(); //显示区域大小发生改变更新图表
|
||
|
||
let myChart5 = markRaw(echarts.init(unref(homeBar2Chart) as HTMLDivElement));
|
||
myChart5.setOption(data.bar2Option, true);
|
||
myChart5.resize(); //显示区域大小发生改变更新图表
|
||
|
||
let myChart6 = markRaw(echarts.init(unref(homeBarChart) as HTMLDivElement));
|
||
myChart6.setOption(data.barOption, true);
|
||
myChart6.resize(); //显示区域大小发生改变更新图表
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.title-chose {
|
||
float: right;
|
||
margin-right: 20px;
|
||
|
||
span {
|
||
text-align: center;
|
||
padding: 0 12px;
|
||
display: inline-block;
|
||
color: #333;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
margin-left: 10px;
|
||
|
||
&.cur,
|
||
&:active {
|
||
background-color: #5e95ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-bg {
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
border-radius: 5px;
|
||
box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);
|
||
|
||
.total {
|
||
margin: 20px 20px 0;
|
||
height: 46px;
|
||
padding: 0 10px;
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
box-shadow: 0 3px 6px 1px rgb(0 0 0 / 16%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
align-items: center;
|
||
color: #5e95ff;
|
||
|
||
.text {
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
color: #707070;
|
||
}
|
||
}
|
||
|
||
.box-bg-title {
|
||
border-bottom: 1px solid #eee;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
font-size: 16px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.title-text {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.item {
|
||
padding: 10px 10px 0;
|
||
height: 312px;
|
||
}
|
||
}
|
||
|
||
.mumber-box {
|
||
margin: 2px -5px 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.mumber {
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
margin: 0 5px;
|
||
flex: 1;
|
||
height: 120px;
|
||
background: #fff;
|
||
box-shadow: 0 3px 6px 1px rgb(0 0 0 / 10%);
|
||
border-radius: 5px;
|
||
|
||
.mum-left {
|
||
float: left;
|
||
width: 24%;
|
||
margin-top: 6px;
|
||
|
||
.index-img {
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.mum-right {
|
||
margin-left: 6%;
|
||
float: left;
|
||
width: 70%;
|
||
|
||
.mum-title {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mum {
|
||
font-size: 24px;
|
||
font-weight: bolder;
|
||
line-height: 40px;
|
||
color: #5e95ff;
|
||
}
|
||
|
||
.mum-than {
|
||
font-size: 14px;
|
||
|
||
.icon {
|
||
padding-left: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ant-col {
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|