546 lines
17 KiB
Vue
546 lines
17 KiB
Vue
<template>
|
|
<div class="dashboard-editor-container">
|
|
<el-row>
|
|
<el-col :span="12">
|
|
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
|
<div style="display: flex;align-items: center;">
|
|
<img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
|
|
<div style="font-size: 24px;font-weight: 600;">
|
|
智慧用水
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
|
|
<div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
|
|
<div style="margin-right: 10px;">日用水量</div>
|
|
<count-to :start-val="0" :end-val="8.56" :duration="2000" class="card-panel-num" />
|
|
<div style="margin-left: 10px;">m³</div>
|
|
</div>
|
|
<div style="width: 50%;display: flex;align-items: center;">
|
|
<div style="margin-right: 10px;">累计用水量</div>
|
|
<count-to :start-val="0" :end-val="168.41" :duration="2000" class="card-panel-num" />
|
|
<div style="margin-left: 10px;">m³</div>
|
|
</div>
|
|
</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;">
|
|
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">近期用水量对比</div>
|
|
</div>
|
|
<div id="lineChartOne" style="width: 100%;height: 200px;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;">
|
|
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">月度用水量对比</div>
|
|
</div>
|
|
<div id="lineChartTwo" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
|
<div style="display: flex;align-items: center;">
|
|
<img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
|
|
<div style="font-size: 24px;font-weight: 600;">
|
|
智慧用电
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
|
|
<div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
|
|
<div style="margin-right: 10px;">日用电量</div>
|
|
<count-to :start-val="0" :end-val="34.3" :duration="2000" class="card-panel-num" />
|
|
<div style="margin-left: 10px;">KW</div>
|
|
</div>
|
|
<div style="width: 50%;display: flex;align-items: center;">
|
|
<div style="margin-right: 10px;">累计用电量</div>
|
|
<count-to :start-val="0" :end-val="248.4" :duration="2000" class="card-panel-num" />
|
|
<div style="margin-left: 10px;">KW</div>
|
|
</div>
|
|
</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;">
|
|
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">近期用电量对比</div>
|
|
</div>
|
|
<div id="lineChartThree" style="width: 100%;height: 200px;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;">
|
|
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">月度用电量对比</div>
|
|
</div>
|
|
<div id="lineChartFour" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CountTo from 'vue-count-to'
|
|
import * as echarts from 'echarts'
|
|
import { getDataScreeningModelApi,
|
|
getCanteenOrdersAndSalesTrendsApi,
|
|
getSupermarketOrderAndSalesTrendApi,
|
|
getThisMonthSDishSalesRankingApi,
|
|
getProportionOfOrderTypesApi
|
|
} from "@/api/index";
|
|
export default {
|
|
name: 'Index',
|
|
components: {
|
|
CountTo
|
|
},
|
|
data() {
|
|
return {
|
|
topAreaOptions:[
|
|
{
|
|
"num": 0,
|
|
"rate": "0.00",
|
|
"name": "今日食堂营业额（元）",
|
|
"lastDate": "2025-05-15"
|
|
},{
|
|
"num": 0,
|
|
"rate": "0.00",
|
|
"name": "今日食堂订单量（个）",
|
|
"lastDate": "2025-05-15"
|
|
},
|
|
{
|
|
"num": 0,
|
|
"rate": "0.00",
|
|
"name": "今日就餐人数（个）",
|
|
"lastDate": "2025-05-15"
|
|
},
|
|
{
|
|
"num": 0,
|
|
"rate": "0.00",
|
|
"name": "今日菜品数量（个）",
|
|
"lastDate": "2025-05-15"
|
|
},
|
|
{
|
|
"num": 0,
|
|
"rate": "0.0",
|
|
"name": "今日超市营业额（元）",
|
|
"lastDate": "2025-05-15"
|
|
},
|
|
{
|
|
"num": 0,
|
|
"rate": "0.0",
|
|
"name": "今日超市订单量（个）",
|
|
"lastDate": "2025-05-15"
|
|
}
|
|
],
|
|
|
|
myCharts1:null,
|
|
myCharts2:null,
|
|
myCharts3:null,
|
|
myCharts4:null,
|
|
}
|
|
},
|
|
mounted(){
|
|
// this.getTopData()
|
|
this.InitEChartsOne()
|
|
this.InitEChartsTwo()
|
|
this.InitEChartsThree()
|
|
this.InitEChartsFour()
|
|
window.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
|
},
|
|
methods: {
|
|
$_sidebarResizeHandler(e) {
|
|
if (e.propertyName === 'width') {
|
|
console.log(e)
|
|
setTimeout(() => {
|
|
this.myCharts1.resize();
|
|
this.myCharts2.resize();
|
|
this.myCharts3.resize();
|
|
this.myCharts4.resize();
|
|
}, 500);
|
|
}
|
|
},
|
|
getTopData(){
|
|
getDataScreeningModelApi({}).then((response) => {
|
|
this.topAreaOptions = response.data.data;
|
|
});
|
|
},
|
|
InitEChartsOne() {
|
|
let chartData=[]
|
|
let weekDate=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
|
|
let monthDate = []
|
|
let xDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
|
|
let salesData = [6.8,7.5,6,7.4,6.9,2.2,1.8]
|
|
let orderData = [6.4,7.1,6.8,7.1,7.5,1.5,2]
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["本周", "上周"],
|
|
icon:"rect",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
top: "20%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
color: ["#4FA7FF", "#58F5CE"],
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: xDate,
|
|
},
|
|
],
|
|
yAxis: {
|
|
name: "本周/上周",
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "本周",
|
|
type: "line",
|
|
areaStyle: {
|
|
normal: {
|
|
type: "default",
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(79, 167, 255, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(79, 167, 255, 1)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
smooth: true,
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: "default" } },
|
|
},
|
|
data: salesData,
|
|
},
|
|
{
|
|
name: "上周",
|
|
type: "line",
|
|
areaStyle: {
|
|
normal: {
|
|
type: "default",
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(92, 255, 214, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(92, 255, 214, 1)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
smooth: true,
|
|
itemStyle: { normal: { areaStyle: { type: "default" } } },
|
|
data: orderData,
|
|
},
|
|
],
|
|
};
|
|
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
|
|
this.myCharts1.setOption(option)
|
|
},
|
|
InitEChartsTwo() {
|
|
let chartData=[]
|
|
let monthDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
|
|
let xDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
|
|
let salesData = [47,43,48,42,44,45,42,46,47,48,50,51]
|
|
// let orderData = [0,0,0,0,0,0,0,0,0,0,0,0]
|
|
var option = {
|
|
// title: {
|
|
// text: "食品经营情况",
|
|
// },
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
// legend: {
|
|
// data: ["本周", "上周"],
|
|
// icon:"rect",
|
|
// bottom: "0%",
|
|
// },
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
top: "20%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
color: ["#4FA7FF"],
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: xDate,
|
|
},
|
|
],
|
|
yAxis: {
|
|
name: "用水",
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "用水",
|
|
type: "line",
|
|
areaStyle: {
|
|
normal: {
|
|
type: "default",
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(79, 167, 255, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(79, 167, 255, 1)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
smooth: true,
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: "default" } },
|
|
},
|
|
data: salesData,
|
|
}
|
|
],
|
|
};
|
|
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
|
|
this.myCharts2.setOption(option)
|
|
},
|
|
InitEChartsThree() {
|
|
let chartData=[]
|
|
let weekDate=['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
|
|
let monthDate = []
|
|
let xDate = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
|
|
let salesData = [31,33,36,32,38,16,18]
|
|
let orderData = [30,34,36,32,36,15,14]
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
legend: {
|
|
data: ["本周", "上周"],
|
|
icon:"rect",
|
|
bottom: "0%",
|
|
},
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
top: "20%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
color: ["#4FA7FF", "#58F5CE"],
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: xDate,
|
|
},
|
|
],
|
|
yAxis: {
|
|
name: "本周/上周",
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "本周",
|
|
type: "line",
|
|
areaStyle: {
|
|
normal: {
|
|
type: "default",
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(79, 167, 255, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(79, 167, 255, 1)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
smooth: true,
|
|
itemStyle: {
|
|
normal: { areaStyle: { type: "default" } },
|
|
},
|
|
data: salesData,
|
|
},
|
|
{
|
|
name: "上周",
|
|
type: "line",
|
|
areaStyle: {
|
|
normal: {
|
|
type: "default",
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(92, 255, 214, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(92, 255, 214, 1)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
smooth: true,
|
|
itemStyle: { normal: { areaStyle: { type: "default" } } },
|
|
data: orderData,
|
|
},
|
|
],
|
|
};
|
|
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
|
|
this.myCharts3.setOption(option)
|
|
// // 根据页面大小自动响应图表大小
|
|
// window.addEventListener("resize3", function () {
|
|
// myCharts3.resize();
|
|
// });
|
|
},
|
|
InitEChartsFour() {
|
|
let chartData=[]
|
|
let monthDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
|
|
let xDate = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
|
|
let orderData = [175,180,182,174,176,189,196,189,175,178,174,178]
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
// legend: {
|
|
// data: ["用电"],
|
|
// icon:"rect",
|
|
// bottom: "0%",
|
|
// },
|
|
grid: {
|
|
left: "5%",
|
|
right: "5%",
|
|
top: "20%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
color: ["#58F5CE"],
|
|
calculable: true,
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: xDate,
|
|
},
|
|
],
|
|
yAxis: {
|
|
name: "用电",
|
|
type: "value",
|
|
},
|
|
series: [
|
|
{
|
|
name: "用电",
|
|
type: "line",
|
|
areaStyle: {
|
|
normal: {
|
|
type: "default",
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(92, 255, 214, 1)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(92, 255, 214, 1)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
smooth: true,
|
|
itemStyle: { normal: { areaStyle: { type: "default" } } },
|
|
data: orderData,
|
|
},
|
|
],
|
|
};
|
|
this.myCharts4 = echarts.init(document.querySelector('#lineChartFour'));
|
|
this.myCharts4.setOption(option)
|
|
// 根据页面大小自动响应图表大小
|
|
// window.addEventListener("resize4", function () {
|
|
// myCharts4.resize();
|
|
// });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dashboard-editor-container {
|
|
padding: 15px;
|
|
background-color: rgb(240, 242, 245);
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
background: #fff;
|
|
padding: 16px 16px 0;
|
|
margin-bottom: 32px;
|
|
}
|
|
}
|
|
.card-panel-num {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
@media (max-width:1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|