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

jsk

This commit is contained in:
jiask 2025-10-13 09:29:38 +08:00
parent ef9d08eeb2
commit e7144e35b5
1 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/index_v1.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<h3 style="font-weight: 600;">数据总览</h3> <!-- <h3 style="font-weight: 600;">数据总览</h3>
<panel-group :topData="topAreaOptions"/> <panel-group :topData="topAreaOptions"/>
<el-row> <el-row>
<el-col :span="16"> <el-col :span="16">
@ -10,29 +10,29 @@
<div> <div>
<el-radio-group v-model="type1" @change="changType1"> <el-radio-group v-model="type1" @change="changType1">
<el-radio-button :label="1">近7日</el-radio-button> <el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button> <el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
</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;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>
<el-radio-group v-model="type2" @change="changType2"> <el-radio-group v-model="type2" @change="changType2">
<el-radio-button :label="1">近7日</el-radio-button> <el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button> <el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
</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;border-radius: 4px;"> <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">近30天菜品销量排名</div> <div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600">近30天菜品销量排名</div>
<div id="lineChartThree" style="width: 100%;height: 380px;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;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;">
@ -40,32 +40,32 @@
<div> <div>
<el-radio-group v-model="type3" @change="changType3"> <el-radio-group v-model="type3" @change="changType3">
<el-radio-button :label="1">近7日</el-radio-button> <el-radio-button :label="1">近7日</el-radio-button>
<el-radio-button :label="2">近30日</el-radio-button> <el-radio-button :label="2">近30日</el-radio-button>
</el-radio-group> </el-radio-group>
</div> </div>
</div> </div>
<div id="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div> <div id="barChartFour" style="width: 100%;height: 235px;margin-bottom: 20px;"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
-->
</div> </div>
</template> </template>
<script> <script>
import PanelGroup from './dashboard/PanelGroup' import PanelGroup from './dashboard/PanelGroup'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { getDataScreeningModelApi, import { getDataScreeningModelApi,
getCanteenOrdersAndSalesTrendsApi, getCanteenOrdersAndSalesTrendsApi,
getSupermarketOrderAndSalesTrendApi, getSupermarketOrderAndSalesTrendApi,
getThisMonthSDishSalesRankingApi, getThisMonthSDishSalesRankingApi,
getProportionOfOrderTypesApi getProportionOfOrderTypesApi
} from "@/api/index"; } from "@/api/index";
export default { export default {
name: 'Index', name: 'Index',
components: { components: {
PanelGroup PanelGroup
@ -124,7 +124,7 @@ export default {
this.InitEChartsTwo() this.InitEChartsTwo()
this.InitEChartsThree() this.InitEChartsThree()
this.InitEChartsFour() this.InitEChartsFour()
window.addEventListener('transitionend', this.$_sidebarResizeHandler) window.addEventListener('transitionend', this.$_sidebarResizeHandler)
}, },
methods: { methods: {
$_sidebarResizeHandler(e) { $_sidebarResizeHandler(e) {
@ -138,10 +138,10 @@ export default {
}, 500); }, 500);
} }
}, },
getTopData(){ getTopData(){
getDataScreeningModelApi({}).then((response) => { getDataScreeningModelApi({}).then((response) => {
this.topAreaOptions = response.data.data; this.topAreaOptions = response.data.data;
}); });
}, },
changType1(e){ changType1(e){
console.log(this.type1) console.log(this.type1)
@ -162,7 +162,7 @@ export default {
weekDate.push(item.weekday) weekDate.push(item.weekday)
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){ if(this.type1==1){
xDate= weekDate xDate= weekDate
@ -171,7 +171,7 @@ export default {
} }
var option = { var option = {
// title: { // title: {
// text: "食品经营情况", // text: "食品经营情况",
// }, // },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -188,7 +188,7 @@ export default {
bottom: "10%", bottom: "10%",
containLabel: true, containLabel: true,
}, },
color: ["#4FA7FF", "#58F5CE"], color: ["#4FA7FF", "#58F5CE"],
calculable: true, calculable: true,
xAxis: [ xAxis: [
{ {
@ -265,8 +265,8 @@ export default {
], ],
}; };
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne')); this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
this.myCharts1.setOption(option) this.myCharts1.setOption(option)
}); });
}, },
changType2(e){ changType2(e){
console.log(this.type2) console.log(this.type2)
@ -287,7 +287,7 @@ export default {
weekDate.push(item.weekday) weekDate.push(item.weekday)
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){ if(this.type2==1){
xDate= weekDate xDate= weekDate
@ -296,7 +296,7 @@ export default {
} }
var option = { var option = {
// title: { // title: {
// text: "食品经营情况", // text: "食品经营情况",
// }, // },
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -313,7 +313,7 @@ export default {
bottom: "10%", bottom: "10%",
containLabel: true, containLabel: true,
}, },
color: ["#4FA7FF", "#58F5CE"], color: ["#4FA7FF", "#58F5CE"],
calculable: true, calculable: true,
xAxis: [ xAxis: [
{ {
@ -390,10 +390,10 @@ export default {
], ],
}; };
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo')); this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
this.myCharts2.setOption(option) this.myCharts2.setOption(option)
}); });
}, },
InitEChartsThree() { InitEChartsThree() {
var getName = []; var getName = [];
var getValue = []; var getValue = [];
var chartData=[] var chartData=[]
@ -401,13 +401,13 @@ export default {
chartData = response.data.slice(0, 10); chartData = response.data.slice(0, 10);
chartData.forEach((item,index)=>{ chartData.forEach((item,index)=>{
getName.push(item.name) getName.push(item.name)
getValue.push(item.num) getValue.push(item.num)
}) })
var max = Math.max.apply(null, getValue); var max = Math.max.apply(null, getValue);
var getMax = []; var getMax = [];
for (var i = 0; i < getName.length; i++) { for (var i = 0; i < getName.length; i++) {
getMax.push(max+20); getMax.push(max+20);
} }
var option = { var option = {
backgroundColor: "#fff", backgroundColor: "#fff",
grid: { grid: {
@ -434,7 +434,7 @@ export default {
{ {
type: "category", type: "category",
inverse: true, inverse: true,
offset: 100, offset: 100,
axisLabel: { axisLabel: {
show: true, show: true,
align: "left", align: "left",
@ -595,14 +595,14 @@ export default {
}, },
}, },
], ],
}; };
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree')); this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
this.myCharts3.setOption(option) this.myCharts3.setOption(option)
// // 根据页面大小自动响应图表大小 // // 根据页面大小自动响应图表大小
// window.addEventListener("resize3", function () { // window.addEventListener("resize3", function () {
// myCharts3.resize(); // myCharts3.resize();
// }); // });
}); });
}, },
changType3(e){ changType3(e){
console.log(this.type3) console.log(this.type3)
@ -643,7 +643,7 @@ export default {
} }
} }
m2R2Data.push(obj) m2R2Data.push(obj)
}) })
// var m2R2Data = [ // var m2R2Data = [
// { // {
@ -651,13 +651,13 @@ export default {
// legendname: "种类02", // legendname: "种类02",
// name: "种类02 310", // name: "种类02 310",
// itemStyle: { color: "#5085f2" }, // itemStyle: { color: "#5085f2" },
// }, // },
// { // {
// value: 335, // value: 335,
// legendname: "种类05", // legendname: "种类05",
// name: "种类05 335", // name: "种类05 335",
// itemStyle: { color: "#f2719a" }, // itemStyle: { color: "#f2719a" },
// }, // },
// { // {
// value: 335, // value: 335,
// legendname: "种类08", // legendname: "种类08",
@ -741,9 +741,9 @@ export default {
data: m2R2Data, data: m2R2Data,
}, },
], ],
}; };
this.myCharts4 = echarts.init(document.querySelector('#barChartFour')); this.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
this.myCharts4.setOption(option) this.myCharts4.setOption(option)
// 根据页面大小自动响应图表大小 // 根据页面大小自动响应图表大小
// window.addEventListener("resize4", function () { // window.addEventListener("resize4", function () {
// myCharts4.resize(); // myCharts4.resize();