bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

左侧导航背景色修改绿色

This commit is contained in:
zzyuan 2025-05-19 14:07:22 +08:00
parent 84ced2e300
commit 15606013a9
2 changed files with 62 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/styles/variables.scss
View File

@ -11,15 +11,15 @@ $panGreen: #30B08F;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; $base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5; $base-menu-color-active:#f4f4f5;
$base-menu-background:#304156; $base-menu-background:#00594F;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color:rgba(0,0,0,.70);
$base-menu-light-background:#ffffff; $base-menu-light-background:#ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background:#1f2d3d; $base-sub-menu-background:#02423b;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#0a302c;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**

71
src/views/index_v1.vue
View File

@ -5,21 +5,37 @@
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;"> <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 id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
</div> </div>
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;"> <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="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 id="lineChartTwo" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
</div> </div>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;"> <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="lineChartThree" style="width: 100%;height: 380px;margin-bottom: 20px;"></div> <div id="lineChartThree" style="width: 100%;height: 410px;margin-bottom: 20px;"></div>
</div> </div>
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;"> <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 id="barChartFour" style="width: 100%;height: 220px;margin-bottom: 20px;"></div>
</div> </div>
@ -105,24 +121,24 @@ export default {
return { return {
topAreaOptions:[ topAreaOptions:[
{ {
"num": 27, "num": 0,
"rate": "92.86", "rate": "0.00",
"name": "今日食堂营业额（元）", "name": "今日食堂营业额（元）",
"lastDate": "2025-05-15" "lastDate": "2025-05-15"
},{ },{
"num": 3, "num": 0,
"rate": "50.00", "rate": "0.00",
"name": "今日食堂订单量（个）", "name": "今日食堂订单量（个）",
"lastDate": "2025-05-15" "lastDate": "2025-05-15"
}, },
{ {
"num": 1, "num": 0,
"rate": "0.00", "rate": "0.00",
"name": "今日就餐人数（个）", "name": "今日就餐人数（个）",
"lastDate": "2025-05-15" "lastDate": "2025-05-15"
}, },
{ {
"num": 6, "num": 0,
"rate": "0.00", "rate": "0.00",
"name": "今日菜品数量（个）", "name": "今日菜品数量（个）",
"lastDate": "2025-05-15" "lastDate": "2025-05-15"
@ -140,6 +156,8 @@ export default {
"lastDate": "2025-05-15" "lastDate": "2025-05-15"
} }
], ],
type1:1,
type2:1,
lineChartData: lineChartData.newVisitis lineChartData: lineChartData.newVisitis
} }
}, },
@ -156,19 +174,29 @@ export default {
this.topAreaOptions = response.data.data; this.topAreaOptions = response.data.data;
}); });
}, },
changType1(e){
console.log(this.type1)
this.InitEChartsOne()
},
InitEChartsOne() { InitEChartsOne() {
let chartData=[] let chartData=[]
let weekDate=["周一","周二","周三","周四","周五","周六","周日"] let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
let monthDate = [] let monthDate = []
let xDate = []
let salesData = [] let salesData = []
let orderData = [] let orderData = []
getCanteenOrdersAndSalesTrendsApi({type:"1"}).then((response) => { getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
chartData = response.data; chartData = response.data;
chartData.forEach((item,index)=>{ chartData.forEach((item,index)=>{
monthDate.push(item.orderDate) monthDate.push(item.orderDate)
salesData.push(item.salesValue) salesData.push(item.salesValue)
orderData.push(item.orderValue) orderData.push(item.orderValue)
}) })
if(this.type1==1){
xDate= weekDate
}else{
xDate = monthDate
}
var option = { var option = {
// title: { // title: {
// text: "食品经营情况", // text: "食品经营情况",
@ -178,6 +206,7 @@ export default {
}, },
legend: { legend: {
data: ["销售额", "订单量"], data: ["销售额", "订单量"],
icon:"rect",
bottom: "0%", bottom: "0%",
}, },
grid: { grid: {
@ -193,7 +222,7 @@ export default {
{ {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: weekDate, data: xDate,
}, },
], ],
yAxis: { yAxis: {
@ -271,19 +300,29 @@ export default {
}); });
}); });
}, },
changType2(e){
console.log(this.type2)
this.InitEChartsTwo()
},
InitEChartsTwo() { InitEChartsTwo() {
let chartData=[] let chartData=[]
let weekDate=["周一","周二","周三","周四","周五","周六","周日"] let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
let monthDate = [] let monthDate = []
let xDate = []
let salesData = [] let salesData = []
let orderData = [] let orderData = []
getSupermarketOrderAndSalesTrendApi({type:"1"}).then((response) => { getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
chartData = response.data; chartData = response.data;
chartData.forEach((item,index)=>{ chartData.forEach((item,index)=>{
monthDate.push(item.orderDate) monthDate.push(item.orderDate)
salesData.push(item.salesValue) salesData.push(item.salesValue)
orderData.push(item.orderValue) orderData.push(item.orderValue)
}) })
if(this.type2==1){
xDate= weekDate
}else{
xDate = monthDate
}
var option = { var option = {
// title: { // title: {
// text: "食品经营情况", // text: "食品经营情况",
@ -293,6 +332,7 @@ export default {
}, },
legend: { legend: {
data: ["销售额", "订单量"], data: ["销售额", "订单量"],
icon:"rect",
bottom: "0%", bottom: "0%",
}, },
grid: { grid: {
@ -308,7 +348,7 @@ export default {
{ {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: weekDate, data: xDate,
}, },
], ],
yAxis: { yAxis: {
@ -429,7 +469,6 @@ export default {
type: "category", type: "category",
inverse: true, inverse: true,
offset: 100, offset: 100,
axisLabel: { axisLabel: {
show: true, show: true,
align: "left", align: "left",