数据总览页面修改

This commit is contained in:
zzyuan 2025-06-23 16:40:05 +08:00
parent f18cb1949f
commit a664075dc1
2 changed files with 98 additions and 16 deletions

30
src/api/kitchen/index.js Normal file
View File

@ -0,0 +1,30 @@
import request from '@/utils/request'
// 数据总览接口
export function getHomePageInfoApi(data) {
return request({
url: '/smart-canteen/kitchen_home_page/information',
method: 'get',
headers: {
"merchant-id":"378915229716713472",
},
params: data
})
}

View File

@ -11,12 +11,40 @@
<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>
<div style="display: flex;flex-direction: row-reverse;">
<el-date-picker
v-model="dateRange1"
type="daterange"
align="right"
size="mini"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd" style="width: 220px"
:picker-options="pickerOptions" @change="changDate1">
</el-date-picker>
</div>
<div id="barChartOne" style="width: 100%;height: 350px;margin-bottom: 20px;"></div> <div id="barChartOne" style="width: 100%;height: 350px;margin-bottom: 20px;"></div>
</div> </div>
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;"> <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>
<div style="display: flex;flex-direction: row-reverse;">
<el-date-picker
v-model="dateRange2"
type="daterange"
align="right"
size="mini"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd" style="width: 220px"
:picker-options="pickerOptions" @change="changDate2">
</el-date-picker>
</div>
<div id="barChartTwo" style="width: 100%;height: 350px;margin-bottom: 20px;"></div> <div id="barChartTwo" style="width: 100%;height: 350px;margin-bottom: 20px;"></div>
</div> </div>
</el-col> </el-col>
@ -58,12 +86,10 @@
import PanelGroup from './dashboard/PanelGroup' import PanelGroup from './dashboard/PanelGroup'
import SubGroup from './dashboard/SubGroup' import SubGroup from './dashboard/SubGroup'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { getDataScreeningModelApi, import { getThisMonthSDishSalesRankingApi,
getCanteenOrdersAndSalesTrendsApi,
getSupermarketOrderAndSalesTrendApi,
getThisMonthSDishSalesRankingApi,
getProportionOfOrderTypesApi getProportionOfOrderTypesApi
} from "@/api/index"; } from "@/api/index";
import { getHomePageInfoApi } from "@/api/kitchen/index";
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
@ -103,9 +129,35 @@ export default {
"num3": 3, "num3": 3,
"num4": 4, "num4": 4,
}, },
type1:1, dateRange1:[new Date(),new Date()],
type2:1, dateRange2:[new Date(),new Date()],
type3:1, pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const start = new Date();
const end = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
picker.$emit('pick', [start, end]);
}
},{
text: '最近一个月',
onClick(picker) {
const start = new Date();
const end = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
},{
text: '最近三个月',
onClick(picker) {
const start = new Date();
const end = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
picker.$emit('pick', [start, end]);
}
}]
},
myCharts1:null, myCharts1:null,
myCharts2:null, myCharts2:null,
myCharts3:null, myCharts3:null,
@ -136,16 +188,16 @@ export default {
} }
}, },
getTopData(){ getTopData(){
// getDataScreeningModelApi({}).then((response) => { getHomePageInfoApi({}).then((response) => {
// this.topAreaOptions = response.data.data; // this.topAreaOptions = response.data.data;
// }); });
}, },
changType1(e){ changDate1(){
console.log(this.type1)
this.InitEChartsOne() this.InitEChartsOne()
this.myCharts1.resize(); this.myCharts1.resize();
}, },
InitEChartsOne() { InitEChartsOne() {
console.log(this.dateRange1)
var chartData=[] var chartData=[]
// getProportionOfOrderTypesApi({type:this.type3}).then((response) => { // getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
// chartData = response.data; // chartData = response.data;
@ -282,12 +334,12 @@ export default {
// }); // });
// }); // });
}, },
changType2(e){ changDate2(){
console.log(this.type2)
this.InitEChartsTwo() this.InitEChartsTwo()
this.myCharts2.resize(); this.myCharts2.resize();
}, },
InitEChartsTwo() { InitEChartsTwo() {
console.log(this.dateRange2)
var chartData=[] var chartData=[]
// getProportionOfOrderTypesApi({type:this.type3}).then((response) => { // getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
// chartData = response.data; // chartData = response.data;