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-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;
// 自定义暗色菜单风格
/**

71
src/views/index_v1.vue
View File

@ -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="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: {
@ -429,7 +469,6 @@ export default {
type: "category",
inverse: true,
offset: 100,
axisLabel: {
show: true,
align: "left",