<template>
|
<div >
|
<el-container style="height: 900px; border: 2px solid #eee">
|
<!-- 边 -->
|
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
|
<el-menu >
|
<!-- :default-openeds="['1']" -->
|
<el-submenu index="1">
|
<template slot="title"><i class="el-icon-message"></i>导航一</template>
|
<el-menu-item-group title="完整数据">
|
<!-- <template slot="title">完整数据1</template> -->
|
<el-menu-item index="1-1">详细数据</el-menu-item>
|
|
<el-menu-item index="1-2">
|
<router-link to="/day" style="color: black"> 日数据折线图 </router-link>
|
</el-menu-item>
|
|
<el-menu-item index="1-3">
|
<router-link to="/xuhao" style="color: black"> 折线图 </router-link>
|
</el-menu-item>
|
|
</el-menu-item-group>
|
</el-submenu>
|
|
<el-submenu index="2">
|
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
|
<el-menu-item-group title="分组数据">
|
<!-- <template slot="title">分组一</template> -->
|
<el-menu-item index="2-1">
|
<router-link to="/online" style="color: black">监测设备在线率</router-link>
|
</el-menu-item>
|
<el-menu-item index="2-2">
|
<router-link to="/open" style="color: black"> 净化器开启率</router-link>
|
</el-menu-item>
|
<el-menu-item index="2-2">
|
<router-link to="/exceeding" style="color: black"> 数据超标率</router-link>
|
</el-menu-item>
|
<el-menu-item index="2-2">
|
<router-link to="/average" style="color: black">浓度均值</router-link>
|
</el-menu-item>
|
</el-menu-item-group>
|
</el-submenu>
|
</el-menu>
|
</el-aside>
|
|
<!-- 头 -->
|
<el-container>
|
<el-header>
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
|
<el-form-item label="店铺名和设备编号">
|
|
<el-cascader
|
:options="options"
|
:show-all-levels="false"
|
:props="{expandTrigger:'hover'}"
|
placeholder="请选择店铺名和设备编号"
|
v-model="form.value"
|
style="margin-right:32px; margin-top:10px">
|
</el-cascader>
|
</el-form-item>
|
|
|
<el-form-item label="开始日期">
|
<el-date-picker
|
v-model="form.begin"
|
type="date"
|
placeholder="选择日期"
|
value-format="YYYY-MM-DD"
|
style="margin-right:32px;margin-top: 10px;">
|
</el-date-picker >
|
</el-form-item>
|
|
<el-form-item label="结束日期">
|
<el-date-picker
|
v-model="form.end"
|
type="date"
|
placeholder="选择日期"
|
value-format="YYYY-MM-DD"
|
style="margin-top: 10px;">
|
</el-date-picker>
|
</el-form-item>
|
|
|
<el-form-item>
|
<el-button type="primary" @click="handleSubmit" style="margin-left:10px; margin-top: 10px; ">查询</el-button>
|
<el-button type="success" @click="exportDom" style="margin-left:460px; ">导出数据</el-button>
|
</el-form-item>
|
|
</el-form>
|
</el-header>
|
|
<!-- 内容 -->
|
<el-main>
|
<el-table :data="displayData" border="" id="table" ref="table">
|
<el-table-column type="index" label="序号" width="100" :index="indexMethod" v-if="showColumn.num"> </el-table-column> <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
|
<el-table-column prop="fumeDevId" label="设备编号" width="200" v-if="showColumn.deviceid"> </el-table-column>
|
<el-table-column prop="fumeDate" label="日期" width="200" v-if="showColumn.date"> </el-table-column>
|
<el-table-column prop="fumeDayMin" label="日最小值" width="200" v-if="showColumn.min"></el-table-column>
|
<el-table-column prop="fumeDayMax" label="日最大值" width="100" v-if="showColumn.max"> </el-table-column>
|
<el-table-column prop="fumeDayAverage" label="日均值" width="60" v-if="showColumn.average"> </el-table-column>
|
<el-table-column prop="purifierOpenRate" label="净化净化器开启率器" width="60" v-if="showColumn.opening"> </el-table-column>
|
<el-table-column prop="fumeMinuteExceedingNum" label="分钟数据日超标条数" width="60" v-if="showColumn.exceeding"> </el-table-column>
|
<el-table-column prop="fumeOverStandardRate" label="超标率" width="60" v-if="showColumn.overstanding"> </el-table-column>
|
<el-table-column prop="fumeDataEfficiency" label=" 数据有效率" width="60" v-if="showColumn.efficiency"> </el-table-column>
|
<el-table-column prop="dailyOnlineRate" label="日在线率" width="100" v-if="showColumn.daily"> </el-table-column>
|
<el-table-column prop="noonOnlineRate" label="中午在线率" width="100" v-if="showColumn.noonline"> </el-table-column>
|
|
<el-table-column prop="nightOnlineRate" label="晚上在线率" width="100" v-if="showColumn.nightline"> </el-table-column>
|
<el-table-column prop="keyOnlineRate" label="重点时段在线率" width="100" v-if="showColumn.keyline"> </el-table-column>
|
<el-table-column prop="noonValidRate" label="中午有效率" width="100" v-if="showColumn.noonvalid"> </el-table-column>
|
|
<el-table-column prop="nightValidRate" label="晚上有效率" width="100" v-if="showColumn.nightvalid"> </el-table-column>
|
<el-table-column prop="keyValidRate" label="重点时段有效率" width="100" v-if="showColumn.keyvalid"> </el-table-column>
|
<el-table-column prop="noonOpeningCount" label="中午开启率" width="100" v-if="showColumn.noonopen"> </el-table-column>
|
<el-table-column prop="nightOpeningCount" label="晚上开启率" width="100" v-if="showColumn.nightopen"> </el-table-column>
|
<el-table-column prop="keyOpeningRate" label="重点时段开启率" width="100" v-if="showColumn.keyopen"> </el-table-column>
|
<el-table-column prop="noonExceedingNum" label="中午超标率" width="100" v-if="showColumn.nooneceeding"> </el-table-column>
|
<el-table-column prop="nightExceedingNum" label="晚上超标率" width="100" v-if="showColumn.nightexceeding"> </el-table-column>
|
<el-table-column prop="keyExceedingRate" label="重点时段超标率" width="100" v-if="showColumn.keyexceeding"> </el-table-column>
|
|
<el-table-column fixed="right" width="100" align="center">
|
<template v-slot:header>
|
<i
|
class="el-icon-setting"
|
style="font-size: 22px; cursor: pointer"
|
@click="showColumnOption"
|
></i>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
|
|
<!--size-change 是pageSize 改变时会触发的事件,handleSizeChange是事件处理函数
|
current-change 是currentPage 改变时会触发的事件 -->
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="pageSize"
|
:total="total"
|
layout="total, sizes, prev, pager, next, jumper"
|
></el-pagination>
|
|
|
<!-- 配置列面板 -->
|
<transition name="fade">
|
<div class="columnOption" v-show="isShowColumn">
|
<div class="content">
|
<div class="head">选择显示字段</div>
|
<div class="body">
|
<el-checkbox v-model="checkList.num" disabled>编号</el-checkbox>
|
<el-checkbox v-model="checkList.deviceid" disabled>设备编号</el-checkbox>
|
<el-checkbox v-model="checkList.date">日期</el-checkbox>
|
<el-checkbox v-model="checkList.min">日最小值</el-checkbox>
|
<el-checkbox v-model="checkList.max">日最大值</el-checkbox>
|
<el-checkbox v-model="checkList.average">日均值</el-checkbox>
|
<el-checkbox v-model="checkList.opening">净化净化器开启率器</el-checkbox>
|
<el-checkbox v-model="checkList.exceeding">分钟数据日超标条数</el-checkbox>
|
<el-checkbox v-model="checkList.overstanding">超标率</el-checkbox>
|
<el-checkbox v-model="checkList.efficiency">数据有效率</el-checkbox>
|
<el-checkbox v-model="checkList.daily">日在线率</el-checkbox>
|
<el-checkbox v-model="checkList.noonline">中午在线率</el-checkbox>
|
<el-checkbox v-model="checkList.nightline">晚上在线率</el-checkbox>
|
<el-checkbox v-model="checkList.keyline">重点时段在线率</el-checkbox>
|
<el-checkbox v-model="checkList.noonvalid">中午有效率</el-checkbox>
|
<el-checkbox v-model="checkList.nightvalid">晚上有效率</el-checkbox>
|
<el-checkbox v-model="checkList.keyvalid">重点时段有效率</el-checkbox>
|
<el-checkbox v-model="checkList.noonopen">中午开启率</el-checkbox>
|
<el-checkbox v-model="checkList.nightopen">晚上开启率</el-checkbox>
|
<el-checkbox v-model="checkList.keyopen">重点时段开启率</el-checkbox>
|
<el-checkbox v-model="checkList.nooneceeding">中午超标率</el-checkbox>
|
<el-checkbox v-model="checkList.nightexceeding">晚上超标率</el-checkbox>
|
<el-checkbox v-model="checkList.keyexceeding">重点时段超标率</el-checkbox>
|
</div>
|
|
<div class="footer">
|
<el-button size="small" type="primary" plain @click="saveColumn"
|
>保存列配置</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</transition>
|
|
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
import axiosInstance from '../../../utils/request.js'
|
import * as XLSX from 'xlsx/xlsx.mjs';
|
export default {
|
data() {
|
return {
|
form: { //表单中
|
//devId:'', //设备编号
|
begin: '', //开始时间
|
end: '' , //结束时间
|
value:[], //保存选择的店铺名称和设备名称
|
},
|
isShowColumn: false,
|
tableData: [], //查询的全部数据
|
displayData:[], //每页展示的数据
|
jsonData: [] ,// 存放后端返回的json数据
|
currentPage: 1, //当前页
|
pageSize: 10, //每页条数
|
total: 0,
|
checkList: {},
|
showColumn: {
|
num:true,
|
deviceid:true,
|
date:true,
|
min:true,
|
max:true,
|
average:true,
|
opening:true,
|
exceeding:true,
|
overstanding:true,
|
efficiency:true,
|
daily:true,
|
noonline:true,
|
nightline:true,
|
keyline:true,
|
noonvalid:true,
|
nightvalid:true,
|
keyvalid:true,
|
noonopen:true,
|
nightopen:true,
|
keyopen:true,
|
nooneceeding:true,
|
nightexceeding:true,
|
keyexceeding:true,
|
},
|
|
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(){
|
//发送一部请求，获取数据
|
axiosInstance.get("/data/id").then((result)=>{
|
this.tableData=result.data.data
|
//this.tableData=result.data.data.rows 当访问/tiaojian 时
|
this.total = this.tableData.length;
|
this.handleCurrentChange(1); // 默认显示第一页
|
|
})
|
if(localStorage.getItem("columnSet")){
|
this.checkList = JSON.parse(localStorage.getItem("columnSet"))
|
}else{
|
this.checkList = {
|
num:true,
|
deviceid:true,
|
date:true,
|
min:true,
|
max:true,
|
average:true,
|
opening:true,
|
exceeding:true,
|
overstanding:true,
|
efficiency:true,
|
daily:true,
|
noonline:true,
|
nightline:true,
|
keyline:true,
|
noonvalid:true,
|
nightvalid:true,
|
keyvalid:true,
|
noonopen:true,
|
nightopen:true,
|
keyopen:true,
|
nooneceeding:true,
|
nightexceeding:true,
|
keyexceeding:true,
|
};
|
}
|
|
},
|
methods: {
|
handleSubmit() {
|
|
if((this.form.begin>=this.form.end)&&(this.form.begin!=null||this.form.end!=null)&&(this.form.begin!=''||this.form.end!='')){
|
alert("请输入有效的时间段")
|
return
|
}
|
|
let params = {}
|
if (this.form.value[1]) {
|
params['devId'] = this.form.value[1];
|
}
|
if (this.form.begin) {
|
params['begin'] = this.form.begin;
|
}
|
if (this.form.end) {
|
params['end'] = this.form.end;
|
}
|
|
axiosInstance.get('http://192.168.0.144:8080/data/id', {
|
params: params
|
}).then(response => {
|
this.tableData = response.data.data;
|
this.total = this.tableData.length;
|
this.handleCurrentChange(1); // 默认显示第一页
|
|
});
|
},
|
exportDom(){
|
const fields=['fumeDevId','fumeDate','fumeDayMin','fumeDayMax','fumeDayAverage','purifierOpenRate','fumeMinuteExceedingNum','fumeOverStandardRate','fumeDataEfficiency','dailyOnlineRate','noonOnlineRate','nightOnlineRate','keyOnlineRate','noonValidRate','nightValidRate','keyValidRate','noonOpeningCount','nightOpeningCount','keyOpeningRate','noonExceedingNum','nightExceedingNum','keyExceedingRate']
|
const itemsFormatted = this.tableData.map(item => {
|
const newItem = {};
|
fields.forEach(field => {
|
newItem[field] = item[field]
|
});
|
return newItem;
|
});
|
// 创建xlsx对象
|
const xls = XLSX.utils.json_to_sheet(itemsFormatted);
|
|
// // 编辑表头行 修改表头
|
xls['A1'].v = '设备编号';
|
xls['B1'].v = '日期';
|
xls['C1'].v = '日最小值';
|
xls['D1'].v = '日最大值';
|
xls['E1'].v = '日均值';
|
xls['F1'].v = '净化净化器开启率器';
|
xls['G1'].v = '分钟数据日超标条数';
|
xls['H1'].v = '超标率';
|
xls['I1'].v = '数据有效率';
|
xls['J1'].v = '日在线率';
|
xls['K1'].v = '中午在线率';
|
xls['L1'].v = '晚上在线率';
|
xls['M1'].v = '重点时段在线率';
|
xls['N1'].v = '中午有效率';
|
xls['O1'].v = '晚上有效率';
|
xls['P1'].v = '重点时段有效率';
|
xls['Q1'].v = '中午开启率';
|
xls['R1'].v = '晚上开启率';
|
xls['S1'].v = '重点时段开启率';
|
xls['T1'].v = '中午超标率';
|
xls['U1'].v = '晚上超标率';
|
xls['V1'].v = '重点时段超标率';
|
|
|
// 创建workbook，并把sheet添加进去
|
const wb = XLSX.utils.book_new();
|
XLSX.utils.book_append_sheet(wb, xls, "Sheet1");
|
|
// 将workbook转为二进制xlsx文件并下载
|
XLSX.writeFile(wb, '分析数据.xlsx');
|
|
|
|
},
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.handleCurrentChange(1); // 改变每页显示数目时跳到第一页
|
},
|
handleCurrentChange(val) {
|
const startIndex = (val - 1) * this.pageSize;
|
const endIndex = startIndex + this.pageSize;
|
this.displayData = this.tableData.slice(startIndex, endIndex);
|
|
},
|
//序号递增
|
indexMethod(index) {
|
|
return index + 1 + (this.currentPage - 1) * this.pageSize;
|
},
|
|
// 隐藏列部分
|
handleClick(row) {
|
console.log(row);
|
},
|
showColumnOption() {
|
this.isShowColumn = true;
|
},
|
saveColumn() {
|
localStorage.setItem("columnSet",JSON.stringify(this.checkList))
|
this.isShowColumn = false;
|
},
|
|
},
|
watch: {
|
// 监听复选框配置列所有的变化
|
checkList: {
|
handler: function (newnew,oldold) {
|
// console.log(newnew);
|
this.showColumn = newnew;
|
// 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
|
this.$nextTick(() => {
|
this.$refs.table.doLayout();
|
});
|
},
|
deep: true,
|
immediate: true
|
},
|
|
|
},
|
|
}
|
</script>
|
|
<style>
|
.el-header {
|
background-color: #eef0f3;
|
color: #e2cfcf;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
background: rgb(37, 8, 8);
|
color: #b42020;
|
}
|
|
|
|
.columnOption {
|
position: fixed;
|
z-index: 20;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.3);
|
display: flex;
|
flex-direction: row-reverse;
|
.content {
|
width: 100px;
|
height: 100%;
|
background-color: rgb(203, 223, 198);
|
.head {
|
width: 100%;
|
height: 44px;
|
border-bottom: 1px solid #000;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 12px;
|
}
|
.body {
|
width: 100%;
|
height: calc(100% - 88px);
|
box-sizing: border-box;
|
padding-top: 10px;
|
overflow-y: auto;
|
.items {
|
width: 100%;
|
height: 100%;
|
overflow-y: auto;
|
display: flex;
|
flex-direction: column;
|
.el-checkbox {
|
width: 100%;
|
height: 28px;
|
line-height: 28px;
|
margin-bottom: 14px;
|
display: inline-block;
|
font-family: PingFang SC;
|
font-style: normal;
|
font-weight: normal;
|
font-size: 14px;
|
color: #000;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
box-sizing: border-box;
|
padding-left: 14px;
|
}
|
.el-checkbox:hover {
|
background-color: #f5f7fa;
|
}
|
}
|
}
|
.footer {
|
width: 100%;
|
height: 44px;
|
border-top: 1px solid #000;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
}
|
/* 控制淡入淡出效果 */
|
.fade-enter-active,
|
.fade-leave-active {
|
transition: opacity 0.3s;
|
}
|
.fade-enter,
|
.fade-leave-to {
|
opacity: 0;
|
}
|
|
</style>
|
