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

数据总览页面修改

This commit is contained in:
zzyuan 2025-06-12 16:07:56 +08:00
parent 01b3ea14cf
commit 7a4eb580a9
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/dashboard/PanelGroup.vue
View File

@ -10,7 +10,7 @@
</div> </div>
<div> <div>
<div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)>=0"> <div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)>=0">
<div style="font-size: 12px;color: #07B78A;"> <div style="font-size: 14px;color: #07B78A;">
同比上次 +{{item.rate}}％ 同比上次 +{{item.rate}}％
</div> </div>
<div> <div>
@ -18,7 +18,7 @@
</div> </div>
</div> </div>
<div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)<0"> <div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)<0">
<div style="font-size: 12px;color: #d81e06;"> <div style="font-size: 14px;color: #d81e06;">
同比上次 {{item.rate}}％ 同比上次 {{item.rate}}％
</div> </div>
<div> <div>
@ -220,6 +220,7 @@ export default {
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05);
padding: 20px; padding: 20px;
border-radius: 4px;
// &:hover { // &:hover {
// .icon-message { // .icon-message {
@ -245,7 +246,7 @@ export default {
} }
.card-panel-num { .card-panel-num {
font-size: 24px; font-size: 28px;
color: #000; color: #000;
} }
} }

38
src/views/index_v1.vue
View File

@ -4,7 +4,7 @@
<panel-group :topData="topAreaOptions"/> <panel-group :topData="topAreaOptions"/>
<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;border-radius: 4px;">
<div style="display: flex;justify-content: space-between;align-items: center;"> <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 style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
<div> <div>
@ -16,7 +16,7 @@
</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;border-radius: 4px;">
<div style="display: flex;justify-content: space-between;align-items: center;"> <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 style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
<div> <div>
@ -30,13 +30,21 @@
</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;border-radius: 4px;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">本月菜品销量排名</div> <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">近30天菜品销量排名</div>
<div id="lineChartThree" style="width: 100%;height: 410px;margin-bottom: 20px;"></div> <div id="lineChartThree" style="width: 100%;height: 380px;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;border-radius: 4px;">
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">订单类型占比</div> <div style="display: flex;justify-content: space-between;align-items: center;">
<div id="barChartFour" style="width: 100%;height: 220px;margin-bottom: 20px;"></div> <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">订单类型占比</div>
<div>
<el-radio-group v-model="type3" @change="changType3">
<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="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>
</div> </div>
@ -118,6 +126,7 @@ export default {
], ],
type1:1, type1:1,
type2:1, type2:1,
type3:1,
myCharts1:null, myCharts1:null,
myCharts2:null, myCharts2:null,
myCharts3:null, myCharts3:null,
@ -152,6 +161,7 @@ export default {
changType1(e){ changType1(e){
console.log(this.type1) console.log(this.type1)
this.InitEChartsOne() this.InitEChartsOne()
this.myCharts1.resize();
}, },
InitEChartsOne() { InitEChartsOne() {
let chartData=[] let chartData=[]
@ -276,6 +286,7 @@ export default {
changType2(e){ changType2(e){
console.log(this.type2) console.log(this.type2)
this.InitEChartsTwo() this.InitEChartsTwo()
this.myCharts2.resize();
}, },
InitEChartsTwo() { InitEChartsTwo() {
let chartData=[] let chartData=[]
@ -401,7 +412,7 @@ export default {
var getName = []; var getName = [];
var getValue = []; var getValue = [];
var chartData=[] var chartData=[]
getThisMonthSDishSalesRankingApi({type:"2"}).then((response) => { getThisMonthSDishSalesRankingApi().then((response) => {
chartData = response.data; chartData = response.data;
chartData.forEach((item,index)=>{ chartData.forEach((item,index)=>{
getName.push(item.name) getName.push(item.name)
@ -418,7 +429,7 @@ export default {
left: "10%", left: "10%",
right: "2%", right: "2%",
bottom: "2%", bottom: "2%",
top: "2%", top: "10%",
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {
@ -607,9 +618,14 @@ export default {
// }); // });
}); });
}, },
changType3(e){
console.log(this.type3)
this.InitEChartsFour()
this.myCharts4.resize();
},
InitEChartsFour() { InitEChartsFour() {
var chartData=[] var chartData=[]
getProportionOfOrderTypesApi({type:"2"}).then((response) => { getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
chartData = response.data; chartData = response.data;
var m2R2Data = [] var m2R2Data = []
var sumNum = 0 var sumNum = 0