<template>
|
<div>
|
<el-container>
|
<!-- <el-header style="text-align:right; font-size:15px ">
|
<i class="el-icon-s-data" style="font-size: 15px;color:rgb(226,207,207);margin-right:10px;"></i>
|
<span style="color:rgb(226,207,207);">净化器开启率</span>
|
</el-header> -->
|
|
<el-main>
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
<!-- <el-form-item label="设备编号">
|
<el-select class="checkbox" v-model="devId" placeholder="请选择设备编号">
|
<el-option
|
v-for="item in options"
|
:key="item.label"
|
:label="item.label"
|
:value="item.label">
|
</el-option>
|
</el-select> -->
|
<el-form-item label="店铺名和设备编号">
|
<el-cascader
|
:options="options"
|
:show-all-levels="false"
|
:props="{ expandTrigger: 'hover' }"
|
placeholder="请选择店铺名和设备编号"
|
v-model="value"
|
style="margin-right: 32px"
|
>
|
</el-cascader>
|
</el-form-item>
|
|
<el-form-item label="开始日期">
|
<el-date-picker
|
v-model="begin"
|
type="date"
|
placeholder="选择日期"
|
value-format="YYYY-MM-DD"
|
>
|
</el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="结束日期">
|
<el-date-picker
|
v-model="end"
|
type="date"
|
placeholder="选择日期"
|
value-format="YYYY-MM-DD"
|
>
|
</el-date-picker>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button type="primary" @click="fetchData">生成折线图</el-button>
|
</el-form-item>
|
</el-form>
|
|
<el-card v-loading="loading">
|
<div class="chart-container" ref="chart" v-show="!isNoData"></div>
|
<el-empty v-show="isNoData" :image-size="200" />
|
</el-card>
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
import axiosInstanceInstance from '../../../utils/request.js';
|
export default {
|
data() {
|
return {
|
isNoData:false,
|
loading: false,
|
chartData: [], //保存查询的结果
|
devId: '', //设备编号
|
begin: '2023-05-01', //开始时间
|
end: '2023-05-15', //结束时间
|
value: ['付小姐在成都', 'qinshi_31010320210010'], //保存选择的店铺名称和设备名称
|
options: [
|
{
|
value: '付小姐在成都',
|
label: '付小姐在成都',
|
children: [
|
{
|
value: 'qinshi_31010320210010',
|
label: 'qinshi_31010320210010'
|
}
|
]
|
},
|
{
|
value: '吉刻联盟',
|
label: '吉刻联盟 ',
|
children: [
|
{
|
value: 'qinshi_31010320200006',
|
label: 'qinshi_31010320200006'
|
}
|
]
|
},
|
{
|
value: '家在塔啦',
|
label: '家在塔啦',
|
children: [
|
{
|
value: 'hengzhiyuan_64480047347215',
|
label: 'hengzhiyuan_64480047347215'
|
}
|
]
|
},
|
{
|
value: '狼来了',
|
label: '狼来了 ',
|
children: [
|
{
|
value: 'zhuoquan_31011020175012',
|
label: 'zhuoquan_31011020175012'
|
}
|
]
|
},
|
{
|
value: '乐凯撒星游店',
|
label: '乐凯撒星游店',
|
children: [
|
{
|
value: 'qinshi_31010320200007',
|
label: 'qinshi_31010320200007'
|
}
|
]
|
},
|
{
|
value: '馨远美食小镇（哈尼美食广场）',
|
label: '馨远美食小镇（哈尼美食广场）',
|
children: [
|
{
|
value: 'hengzhiyuan_64480047078091',
|
label: 'hengzhiyuan_64480047078091'
|
}
|
]
|
},
|
{
|
value: '棒约翰',
|
label: '棒约翰',
|
children: [
|
{
|
value: 'qinshi_31010320190005',
|
label: 'qinshi_31010320190005'
|
}
|
]
|
},
|
{
|
value: '弄堂咪道',
|
label: '弄堂咪道',
|
children: [
|
{
|
value: 'zhuoquan_31011020175008',
|
label: 'zhuoquan_31011020175008'
|
}
|
]
|
},
|
{
|
value: '杨记齐齐哈尔烤肉',
|
label: '杨记齐齐哈尔烤肉',
|
children: [
|
{
|
value: 'zhuoquan_31011020175002',
|
label: 'zhuoquan_31011020175002'
|
}
|
]
|
},
|
{
|
value: '上海稔传餐饮管理有限公司（人生一串）',
|
label: '上海稔传餐饮管理有限公司（人生一串）',
|
children: [
|
{
|
value: 'GLHB00000000016004',
|
label: 'GLHB00000000016004'
|
}
|
]
|
},
|
{
|
value: '缘家',
|
label: '缘家',
|
children: [
|
{
|
value: 'fucheng310104200914',
|
label: 'fucheng310104200914'
|
}
|
]
|
},
|
{
|
value: '泉盛餐饮（上海）有限公司（食其家）',
|
label: '泉盛餐饮（上海）有限公司（食其家）',
|
children: [
|
{
|
value: 'GLHB00000000016155',
|
label: 'GLHB00000000016155'
|
}
|
]
|
},
|
{
|
value: '丰茂烤串',
|
label: '丰茂烤串',
|
children: [
|
{
|
value: 'GLHB00000000016011',
|
label: 'GLHB00000000016011'
|
}
|
]
|
},
|
{
|
value: '上海泰煌餐饮管理有限公司（泰煌鸡）',
|
label: '上海泰煌餐饮管理有限公司（泰煌鸡）',
|
children: [
|
{
|
value: 'GLHB00000000010279',
|
label: 'GLHB00000000010279'
|
}
|
]
|
},
|
{
|
value: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
|
label: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
|
children: [
|
{
|
value: 'GLHB00000000010504',
|
label: 'GLHB00000000010504'
|
}
|
]
|
}
|
]
|
};
|
},
|
mounted() {
|
// 默认加载付小姐在成都 5月1号到15号的
|
this.fetchData();
|
},
|
methods: {
|
fetchData() {
|
if (
|
this.begin >= this.end &&
|
(this.begin != null || this.end != null) &&
|
(this.begin != '' || this.end != '')
|
) {
|
alert('请输入有效的时间段');
|
return;
|
}
|
let params = {};
|
if (this.value[1]) {
|
params['devId'] = this.value[1];
|
}
|
if (this.begin) {
|
params['begin'] = this.begin;
|
}
|
if (this.end) {
|
params['end'] = this.end;
|
}
|
this.loading = true;
|
axiosInstanceInstance
|
.get('data/id', { params: params })
|
.then((response) => {
|
this.chartData = response.data.data;
|
this.loading = false;
|
if(response.data.data.length==0){
|
alert('该时段无数据')
|
this.isNoData = true
|
return
|
}
|
// 移除空数据状态
|
this.isNoData = false
|
this.drawChart();
|
});
|
},
|
drawChart() {
|
let dateList = [];
|
|
let puOpenRate = [];
|
|
//比率
|
this.chartData.forEach((item) => {
|
dateList.push(item.fumeDate); //x轴日期
|
|
puOpenRate.push(item.purifierOpenRate.slice(0, -1));
|
});
|
|
let chart = echarts.init(this.$refs.chart);
|
chart.setOption({
|
title: {
|
text: '净化器开启率'
|
//left: 'center'
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
tooltip: {},
|
|
legend: {
|
data: ['净化器开启率']
|
},
|
toolbox: {
|
//工具栏
|
feature: {
|
dataZoom: {
|
//区域缩放
|
yAxisIndex: 'none'
|
},
|
restore: {}, //配置项还原
|
saveAsImage: {} //保存为图片
|
}
|
},
|
xAxis: {
|
data: dateList
|
},
|
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
show: true,
|
interval: 'auto',
|
formatter: '{value} %'
|
}
|
},
|
series: [
|
{
|
name: '净化器开启率',
|
type: 'line',
|
data: puOpenRate
|
}
|
]
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.el-card {
|
margin-top: 40px;
|
border-radius: 9px;
|
}
|
.chart-container {
|
width: 100%;
|
height: 540px;
|
}
|
.el-header {
|
background-color: #000205;
|
color: #333;
|
line-height: 60px;
|
}
|
</style>
|
