左侧导航背景色修改绿色
This commit is contained in:
parent
84ced2e300
commit
15606013a9
|
|
@ -11,15 +11,15 @@ $panGreen: #30B08F;
|
|||
// 默认菜单主题风格
|
||||
$base-menu-color:#bfcbd9;
|
||||
$base-menu-color-active:#f4f4f5;
|
||||
$base-menu-background:#304156;
|
||||
$base-menu-background:#00594F;
|
||||
$base-logo-title-color: #ffffff;
|
||||
|
||||
$base-menu-light-color:rgba(0,0,0,.70);
|
||||
$base-menu-light-background:#ffffff;
|
||||
$base-logo-light-title-color: #001529;
|
||||
|
||||
$base-sub-menu-background:#1f2d3d;
|
||||
$base-sub-menu-hover:#001528;
|
||||
$base-sub-menu-background:#02423b;
|
||||
$base-sub-menu-hover:#0a302c;
|
||||
|
||||
// 自定义暗色菜单风格
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -5,21 +5,37 @@
|
|||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
|
||||
<div>食堂订单及销量趋势</div>
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
|
||||
<div>
|
||||
<el-radio-group v-model="type1" @change="changType1">
|
||||
<el-radio-button :label="1">近7日</el-radio-button>
|
||||
<el-radio-button :label="2">近30日</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
|
||||
<div>商超订单及销量趋势</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
|
||||
<div>
|
||||
<el-radio-group v-model="type2" @change="changType2">
|
||||
<el-radio-button :label="1">近7日</el-radio-button>
|
||||
<el-radio-button :label="2">近30日</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
|
||||
<div>本月菜品销量排名</div>
|
||||
<div id="lineChartThree" style="width: 100%;height: 380px;margin-bottom: 20px;"></div>
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">本月菜品销量排名</div>
|
||||
<div id="lineChartThree" style="width: 100%;height: 410px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;">
|
||||
<div>订单类型占比</div>
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">订单类型占比</div>
|
||||
<div id="barChartFour" style="width: 100%;height: 220px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -105,24 +121,24 @@ export default {
|
|||
return {
|
||||
topAreaOptions:[
|
||||
{
|
||||
"num": 27,
|
||||
"rate": "92.86",
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日食堂营业额（元）",
|
||||
"lastDate": "2025-05-15"
|
||||
},{
|
||||
"num": 3,
|
||||
"rate": "50.00",
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日食堂订单量（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"num": 1,
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日就餐人数（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"num": 6,
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日菜品数量（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
|
|
@ -140,6 +156,8 @@ export default {
|
|||
"lastDate": "2025-05-15"
|
||||
}
|
||||
],
|
||||
type1:1,
|
||||
type2:1,
|
||||
lineChartData: lineChartData.newVisitis
|
||||
}
|
||||
},
|
||||
|
|
@ -156,19 +174,29 @@ export default {
|
|||
this.topAreaOptions = response.data.data;
|
||||
});
|
||||
},
|
||||
changType1(e){
|
||||
console.log(this.type1)
|
||||
this.InitEChartsOne()
|
||||
},
|
||||
InitEChartsOne() {
|
||||
let chartData=[]
|
||||
let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
|
||||
let monthDate = []
|
||||
let xDate = []
|
||||
let salesData = []
|
||||
let orderData = []
|
||||
getCanteenOrdersAndSalesTrendsApi({type:"1"}).then((response) => {
|
||||
getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
chartData = response.data;
|
||||
chartData.forEach((item,index)=>{
|
||||
monthDate.push(item.orderDate)
|
||||
salesData.push(item.salesValue)
|
||||
orderData.push(item.orderValue)
|
||||
})
|
||||
})
|
||||
if(this.type1==1){
|
||||
xDate= weekDate
|
||||
}else{
|
||||
xDate = monthDate
|
||||
}
|
||||
var option = {
|
||||
// title: {
|
||||
// text: "食品经营情况",
|
||||
|
|
@ -178,6 +206,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
data: ["销售额", "订单量"],
|
||||
icon:"rect",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -193,7 +222,7 @@ export default {
|
|||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: weekDate,
|
||||
data: xDate,
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
|
|
@ -271,19 +300,29 @@ export default {
|
|||
});
|
||||
});
|
||||
},
|
||||
changType2(e){
|
||||
console.log(this.type2)
|
||||
this.InitEChartsTwo()
|
||||
},
|
||||
InitEChartsTwo() {
|
||||
let chartData=[]
|
||||
let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
|
||||
let monthDate = []
|
||||
let xDate = []
|
||||
let salesData = []
|
||||
let orderData = []
|
||||
getSupermarketOrderAndSalesTrendApi({type:"1"}).then((response) => {
|
||||
getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
|
||||
chartData = response.data;
|
||||
chartData.forEach((item,index)=>{
|
||||
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: "食品经营情况",
|
||||
|
|
@ -293,6 +332,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
data: ["销售额", "订单量"],
|
||||
icon:"rect",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -308,7 +348,7 @@ export default {
|
|||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: weekDate,
|
||||
data: xDate,
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
|
|
@ -428,8 +468,7 @@ export default {
|
|||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
offset: 100,
|
||||
|
||||
offset: 100,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
align: "left",
|
||||
|
|
|
|||
Loading…
Reference in New Issue