供应链首页接口对接
This commit is contained in:
parent
3d5003c927
commit
dbbfb5f13c
|
|
@ -12,8 +12,6 @@ export function getIndexDataApi(data) {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 实时查询供应商评分-排名
|
||||
export function supplierScorePageApi(data) {
|
||||
return request({
|
||||
|
|
@ -31,6 +29,3 @@ export function supplierScorePageApi(data) {
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -69,12 +69,6 @@
|
|||
<script>
|
||||
import PanelGroup from './dashboard/PanelGroup'
|
||||
import * as echarts from 'echarts'
|
||||
import { getDataScreeningModelApi,
|
||||
getCanteenOrdersAndSalesTrendsApi,
|
||||
getSupermarketOrderAndSalesTrendApi,
|
||||
getThisMonthSDishSalesRankingApi,
|
||||
getProportionOfOrderTypesApi
|
||||
} from "@/api/index";
|
||||
import {
|
||||
getIndexDataApi,
|
||||
supplierScorePageApi
|
||||
|
|
@ -136,6 +130,7 @@ export default {
|
|||
"lastDate": "2025-05-15"
|
||||
}
|
||||
],
|
||||
allChartData:{},
|
||||
type1:1,
|
||||
type2:1,
|
||||
type3:1,
|
||||
|
|
@ -149,13 +144,7 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getTopData()
|
||||
this.InitEChartsOne()
|
||||
this.InitEChartsTwo()
|
||||
this.InitEChartsThree()
|
||||
this.InitEChartsFour()
|
||||
this.InitEChartsFive()
|
||||
this.InitEChartsSix()
|
||||
this.getChartData()
|
||||
window.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -173,75 +162,72 @@ export default {
|
|||
}
|
||||
},
|
||||
handleTabClick(){
|
||||
console.log(this.activeName)
|
||||
this.getTopData()
|
||||
this.getChartData()
|
||||
},
|
||||
getTopData(){
|
||||
getChartData(){
|
||||
getIndexDataApi({type:this.activeName}).then((response) => {
|
||||
if(response.code==200){
|
||||
this.allChartData = response.data;
|
||||
this.topAreaOptions = [
|
||||
{
|
||||
"num": response.data.totalOrderAmount.thisNum,
|
||||
"num": response.data.totalOrderAmount.thisNum||0,
|
||||
"rate": response.data.totalOrderAmount.percent+'',
|
||||
"name": "采购订单总额（元）"
|
||||
},{
|
||||
"num": response.data.totalOrderNum.thisNum,
|
||||
"num": response.data.totalOrderNum.thisNum||0,
|
||||
"rate": response.data.totalOrderNum.percent+'',
|
||||
"name": "采购订单数量（个）"
|
||||
},
|
||||
{
|
||||
"num": response.data.unFinshOrderNum.thisNum,
|
||||
"num": response.data.unFinshOrderNum.thisNum||0,
|
||||
"rate": response.data.unFinshOrderNum.percent+'',
|
||||
"name": "未验收完成采购订单数（个）"
|
||||
},
|
||||
{
|
||||
"num": response.data.totalOrderGoodsNum.thisNum,
|
||||
"num": response.data.totalOrderGoodsNum.thisNum||0,
|
||||
"rate": response.data.totalOrderGoodsNum.percent+'',
|
||||
"name": "采购订单货品总数"
|
||||
},
|
||||
{
|
||||
"num": response.data.storeNum.thisNum,
|
||||
"num": response.data.storeNum.thisNum||0,
|
||||
"rate": response.data.storeNum.percent+'',
|
||||
"name": "入库货品数量"
|
||||
},
|
||||
{
|
||||
"num": response.data.outboundNum.thisNum,
|
||||
"num": response.data.outboundNum.thisNum||0,
|
||||
"rate": response.data.outboundNum.percent+'',
|
||||
"name": "出库货品数量"
|
||||
},
|
||||
{
|
||||
"num": response.data.storeAmount.thisNum,
|
||||
"num": response.data.storeAmount.thisNum||0,
|
||||
"rate": response.data.storeAmount.percent+'',
|
||||
"name": "入库总金额（元）"
|
||||
},
|
||||
{
|
||||
"num": response.data.outboundAmount.thisNum,
|
||||
"num": response.data.outboundAmount.thisNum||0,
|
||||
"rate": response.data.outboundAmount.percent+'',
|
||||
"name": "出库总金额（元）"
|
||||
}
|
||||
];
|
||||
this.InitEChartsOne()
|
||||
this.InitEChartsTwo()
|
||||
this.InitEChartsThree()
|
||||
this.InitEChartsFour()
|
||||
this.InitEChartsFive()
|
||||
this.InitEChartsSix()
|
||||
}else{
|
||||
this.$modal.msgError("获取图表数据失败！");
|
||||
}
|
||||
});
|
||||
},
|
||||
InitEChartsOne() {
|
||||
let chartData=[]
|
||||
// let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
|
||||
let weekDate=[]
|
||||
let monthDate = []
|
||||
let chartData=this.allChartData.orderSupplier;
|
||||
let xDate = []
|
||||
let salesData = []
|
||||
let orderData = []
|
||||
getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
chartData = response.data;
|
||||
chartData.forEach((item,index)=>{
|
||||
weekDate.push(item.weekday)
|
||||
monthDate.push(item.orderDate)
|
||||
salesData.push(item.salesValue)
|
||||
orderData.push(item.orderValue)
|
||||
xDate.push(item.name)
|
||||
salesData.push(item.count)
|
||||
})
|
||||
if(this.type1==1){
|
||||
xDate= weekDate
|
||||
}else{
|
||||
xDate = monthDate
|
||||
}
|
||||
var option = {
|
||||
// title: {
|
||||
// text: "食品经营情况",
|
||||
|
|
@ -249,11 +235,11 @@ export default {
|
|||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["销售额", "订单量"],
|
||||
icon:"rect",
|
||||
bottom: "0%",
|
||||
},
|
||||
// legend: {
|
||||
// data: ["销售额", "订单量"],
|
||||
// icon:"rect",
|
||||
// bottom: "0%",
|
||||
// },
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
|
|
@ -268,136 +254,22 @@ export default {
|
|||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: xDate,
|
||||
axisLabel: {
|
||||
formatter: function (value, index) {
|
||||
value = value.length > 5 ? value.slice(0, 5) + '...' : value
|
||||
return value;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
name: "销售额/订单量",
|
||||
name: "订单量",
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "销售额",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(79, 167, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(79, 167, 255, 1)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: { areaStyle: { type: "default" } },
|
||||
},
|
||||
data: salesData,
|
||||
},
|
||||
{
|
||||
name: "订单量",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(92, 255, 214, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(92, 255, 214, 1)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
itemStyle: { normal: { areaStyle: { type: "default" } } },
|
||||
data: orderData,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
|
||||
this.myCharts1.setOption(option)
|
||||
});
|
||||
},
|
||||
InitEChartsTwo() {
|
||||
let chartData=[]
|
||||
// let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
|
||||
let weekDate=[]
|
||||
let monthDate = []
|
||||
let xDate = []
|
||||
let salesData = []
|
||||
let orderData = []
|
||||
getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
|
||||
chartData = response.data;
|
||||
chartData.forEach((item,index)=>{
|
||||
weekDate.push(item.weekday)
|
||||
monthDate.push(item.orderDate)
|
||||
salesData.push(item.salesValue)
|
||||
orderData.push(item.orderValue)
|
||||
})
|
||||
if(this.type2==1){
|
||||
xDate= weekDate
|
||||
}else{
|
||||
xDate = monthDate
|
||||
}
|
||||
var option = {
|
||||
// title: {
|
||||
// text: "食品经营情况",
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["销售额", "订单量"],
|
||||
icon:"rect",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
top: "20%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
color: ["#4FA7FF", "#58F5CE"],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: xDate,
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
name: "销售额/订单量",
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "销售额",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
|
|
@ -425,7 +297,59 @@ export default {
|
|||
normal: { areaStyle: { type: "default" } },
|
||||
},
|
||||
data: salesData,
|
||||
}
|
||||
],
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
|
||||
this.myCharts1.setOption(option)
|
||||
},
|
||||
InitEChartsTwo() {
|
||||
let chartData=this.allChartData.orderCanteen;
|
||||
let xDate = []
|
||||
let orderData = []
|
||||
chartData.forEach((item,index)=>{
|
||||
xDate.push(item.name)
|
||||
orderData.push(item.count)
|
||||
})
|
||||
var option = {
|
||||
// title: {
|
||||
// text: "食品经营情况",
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
// legend: {
|
||||
// data: ["销售额", "订单量"],
|
||||
// icon:"rect",
|
||||
// bottom: "0%",
|
||||
// },
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
top: "20%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
color: ["#4FA7FF", "#58F5CE"],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: xDate,
|
||||
axisLabel: {
|
||||
formatter: function (value, index) {
|
||||
value = value.length > 5 ? value.slice(0, 5) + '...' : value
|
||||
return value;
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
name: "订单量",
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "订单量",
|
||||
type: "line",
|
||||
|
|
@ -459,10 +383,8 @@ export default {
|
|||
};
|
||||
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
|
||||
this.myCharts2.setOption(option)
|
||||
});
|
||||
},
|
||||
changType3(e){
|
||||
console.log(this.type3)
|
||||
this.InitEChartsThree()
|
||||
this.myCharts3.resize();
|
||||
},
|
||||
|
|
@ -470,11 +392,14 @@ export default {
|
|||
var getName = [];
|
||||
var getValue = [];
|
||||
var chartData=[]
|
||||
getThisMonthSDishSalesRankingApi().then((response) => {
|
||||
chartData = response.data.slice(0, 10);
|
||||
if(this.type3==1){//出库
|
||||
chartData = this.allChartData.outImsRanking
|
||||
}else{//入库
|
||||
chartData = this.allChartData.intoImsRanking
|
||||
}
|
||||
chartData.forEach((item,index)=>{
|
||||
getName.push(item.name)
|
||||
getValue.push(item.num)
|
||||
getValue.push(item.count)
|
||||
})
|
||||
var max = Math.max.apply(null, getValue);
|
||||
var getMax = [];
|
||||
|
|
@ -675,65 +600,32 @@ export default {
|
|||
// window.addEventListener("resize3", function () {
|
||||
// myCharts3.resize();
|
||||
// });
|
||||
});
|
||||
},
|
||||
InitEChartsFour() {
|
||||
var chartData=[]
|
||||
getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
|
||||
chartData = response.data;
|
||||
var chartData=this.allChartData.acceptanceProportion
|
||||
var m2R2Data = []
|
||||
var sumNum = 0
|
||||
chartData.forEach((item,index)=>{
|
||||
let obj = {}
|
||||
sumNum=sumNum+item.num
|
||||
sumNum=sumNum+item.count
|
||||
if(index==0){
|
||||
obj = {
|
||||
value: item.num,
|
||||
value: item.count,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
name: item.name+' '+ item.count,
|
||||
itemStyle: { color: "#5085f2" },
|
||||
}
|
||||
}
|
||||
if(index==1){
|
||||
obj = {
|
||||
value: item.num,
|
||||
value: item.count,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
itemStyle: { color: "#f2719a" },
|
||||
}
|
||||
}
|
||||
if(index==2){
|
||||
obj = {
|
||||
value: item.num,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
name: item.name+' '+ item.count,
|
||||
itemStyle: { color: "#fdb301" },
|
||||
}
|
||||
}
|
||||
m2R2Data.push(obj)
|
||||
})
|
||||
|
||||
// var m2R2Data = [
|
||||
// {
|
||||
// value: 310,
|
||||
// legendname: "种类02",
|
||||
// name: "种类02 310",
|
||||
// itemStyle: { color: "#5085f2" },
|
||||
// },
|
||||
// {
|
||||
// value: 335,
|
||||
// legendname: "种类05",
|
||||
// name: "种类05 335",
|
||||
// itemStyle: { color: "#f2719a" },
|
||||
// },
|
||||
// {
|
||||
// value: 335,
|
||||
// legendname: "种类08",
|
||||
// name: "种类08 335",
|
||||
// itemStyle: { color: "#fdb301" },
|
||||
// }
|
||||
// ];
|
||||
|
||||
var option = {
|
||||
title: [
|
||||
{
|
||||
|
|
@ -812,12 +704,8 @@ export default {
|
|||
};
|
||||
this.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
|
||||
this.myCharts4.setOption(option)
|
||||
// 根据页面大小自动响应图表大小
|
||||
// window.addEventListener("resize4", function () {
|
||||
// myCharts4.resize();
|
||||
// });
|
||||
});
|
||||
},
|
||||
//供应商排名接口-单独开发
|
||||
InitEChartsFive() {
|
||||
var getName = [];
|
||||
var getValue = [];
|
||||
|
|
@ -1030,66 +918,42 @@ export default {
|
|||
});
|
||||
},
|
||||
InitEChartsSix() {
|
||||
var chartData=[]
|
||||
getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
|
||||
chartData = response.data;
|
||||
var chartData=this.allChartData.inventoryProportion
|
||||
var m2R2Data = []
|
||||
var sumNum = 0
|
||||
chartData.forEach((item,index)=>{
|
||||
let obj = {}
|
||||
sumNum=sumNum+item.num
|
||||
sumNum=sumNum+item.count
|
||||
if(index==0){
|
||||
obj = {
|
||||
value: item.num,
|
||||
value: item.count,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
name: item.name+' '+ item.count,
|
||||
itemStyle: { color: "#5085f2" },
|
||||
}
|
||||
}
|
||||
if(index==1){
|
||||
obj = {
|
||||
value: item.num,
|
||||
value: item.count,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
name: item.name+' '+ item.count,
|
||||
itemStyle: { color: "#f2719a" },
|
||||
}
|
||||
}
|
||||
if(index==2){
|
||||
obj = {
|
||||
value: item.num,
|
||||
value: item.count,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
name: item.name+' '+ item.count,
|
||||
itemStyle: { color: "#fdb301" },
|
||||
}
|
||||
}
|
||||
m2R2Data.push(obj)
|
||||
})
|
||||
|
||||
// var m2R2Data = [
|
||||
// {
|
||||
// value: 310,
|
||||
// legendname: "种类02",
|
||||
// name: "种类02 310",
|
||||
// itemStyle: { color: "#5085f2" },
|
||||
// },
|
||||
// {
|
||||
// value: 335,
|
||||
// legendname: "种类05",
|
||||
// name: "种类05 335",
|
||||
// itemStyle: { color: "#f2719a" },
|
||||
// },
|
||||
// {
|
||||
// value: 335,
|
||||
// legendname: "种类08",
|
||||
// name: "种类08 335",
|
||||
// itemStyle: { color: "#fdb301" },
|
||||
// }
|
||||
// ];
|
||||
|
||||
var option = {
|
||||
title: [
|
||||
{
|
||||
text: "订单总数",
|
||||
text: "库存总数",
|
||||
subtext: sumNum + "个",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
|
|
@ -1164,11 +1028,6 @@ export default {
|
|||
};
|
||||
this.myCharts6 = echarts.init(document.querySelector('#barChartSix'));
|
||||
this.myCharts6.setOption(option)
|
||||
// 根据页面大小自动响应图表大小
|
||||
// window.addEventListener("resize4", function () {
|
||||
// myCharts4.resize();
|
||||
// });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue