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