|
<template>
|
<div class="page-header">
|
|
<el-radio disabled v-model="radio" label="选中且禁用" >徐汇区 天耀桥 田上坊</el-radio>
|
|
<div class="page-label" >
|
<span class="shop-label">店铺名</span>
|
<div>
|
<el-input v-model="shopname" placeholder="店铺名"></el-input>
|
</div>
|
<el-select v-model="value" placeholder="请选择" >
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- <el-form-item label="开始日期" class="form-time-lable1"> -->
|
<div class="time-label">
|
<span>开始日期 </span>
|
<el-date-picker
|
v-model="begin"
|
type="datetime"
|
placeholder="选择日期"
|
value-format="YYYY-MM-DD HH:mm:ss">
|
</el-date-picker>
|
</div>
|
<div class="time-label">
|
<!-- </el-form-item> -->
|
<span>结束日期 </span>
|
<!-- <el-form-item label="结束日期" class="form-time-lable2"> -->
|
<el-date-picker
|
v-model="end"
|
type="datetime"
|
placeholder="选择日期"
|
value-format="YYYY-MM-DD HH:mm:ss">
|
</el-date-picker>
|
</div>
|
<!-- </el-form-item> -->
|
</div>
|
<div style="display: flex; justify-content: right; margin-right: 160px;">
|
<el-button type="primary" @click="isRepeat">统计分析</el-button>
|
<el-button type="primary" @click="toSql">入库管理</el-button>
|
</div>
|
|
|
<!-- <span style="margin-left: 200px; ">分析耗时：{{gapT}}ms</span>
|
<el-divider direction="vertical"></el-divider>
|
<span>结果条数：{{total}}</span>
|
<el-divider direction="vertical"></el-divider>
|
<span>已写入数据库：{{isWrite}}</span> -->
|
<!-- <br/> -->
|
<div style="display: flex; justify-content: right; margin-right: 110px;">
|
<span >分析耗时：{{gapT}}ms</span>
|
<el-divider direction="vertical"></el-divider>
|
<span>结果条数：{{total}}</span>
|
<el-divider direction="vertical"></el-divider>
|
</div>
|
<br/>
|
<!-- </el-form> -->
|
<!-- </el-card> -->
|
<!-- </el-header> -->
|
|
<!-- <el-main> -->
|
<div class="table" v-show="!isNoData">
|
<el-table :data="displayData" border="" id="table" ref="table" height="500px" v-loading="loading" >
|
<el-table-column type="index" label="序号" :index="indexMethod" v-if="showColumn.num"> </el-table-column> <!--绑定一个方法，将返回值赋给index,即表格每行数据的下标-->
|
<el-table-column prop="fumeDevId" label="设备编号" v-if="showColumn.deviceid" fixed> </el-table-column>
|
<el-table-column prop="fumeDate" label="日期" v-if="showColumn.date"> </el-table-column>
|
<el-table-column prop="fumeDayMin" label="日最小值" v-if="showColumn.min"></el-table-column>
|
<el-table-column prop="fumeDayMax" label="日最大值" v-if="showColumn.max"> </el-table-column>
|
<el-table-column prop="fumeDayAverage" label="日均值" v-if="showColumn.average"> </el-table-column>
|
<el-table-column prop="purifierOpenRate" label="净化净化器开启率器" v-if="showColumn.opening"> </el-table-column>
|
<el-table-column prop="fumeMinuteExceedingNum" label="分钟数据日超标条数" v-if="showColumn.exceeding"> </el-table-column>
|
<el-table-column prop="fumeOverStandardRate" label="超标率" v-if="showColumn.overstanding"> </el-table-column>
|
<el-table-column prop="fumeDataEfficiency" label=" 数据有效率" v-if="showColumn.efficiency"> </el-table-column>
|
<el-table-column prop="dailyOnlineRate" label="日在线率" v-if="showColumn.daily"> </el-table-column>
|
<el-table-column prop="noonOnlineRate" label="中午在线率" v-if="showColumn.noonline"> </el-table-column>
|
|
<el-table-column prop="nightOnlineRate" label="晚上在线率" v-if="showColumn.nightline"> </el-table-column>
|
<el-table-column prop="keyOnlineRate" label="重点时段在线率" v-if="showColumn.keyline"> </el-table-column>
|
<el-table-column prop="noonValidRate" label="中午有效率" v-if="showColumn.noonvalid"> </el-table-column>
|
|
<el-table-column prop="nightValidRate" label="晚上有效率" v-if="showColumn.nightvalid"> </el-table-column>
|
<el-table-column prop="keyValidRate" label="重点时段有效率" v-if="showColumn.keyvalid"> </el-table-column>
|
<el-table-column prop="noonOpeningCount" label="中午开启率" v-if="showColumn.noonopen"> </el-table-column>
|
<el-table-column prop="nightOpeningCount" label="晚上开启率" v-if="showColumn.nightopen"> </el-table-column>
|
<el-table-column prop="keyOpeningRate" label="重点时段开启率" v-if="showColumn.keyopen"> </el-table-column>
|
<el-table-column prop="noonExceedingNum" label="中午超标率" v-if="showColumn.nooneceeding"> </el-table-column>
|
<el-table-column prop="nightExceedingNum" label="晚上超标率" v-if="showColumn.nightexceeding"> </el-table-column>
|
<el-table-column prop="keyExceedingRate" label="重点时段超标率" v-if="showColumn.keyexceeding"> </el-table-column>
|
|
<el-table-column fixed="right" align="center">
|
<template v-slot:header>
|
<i-ep-setting
|
style="font-size: 22px;
|
cursor: pointer"
|
@click="showColumnOption">
|
</i-ep-setting>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<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>
|
</div>
|
<el-empty v-show="isNoData" :image-size="200" />
|
</template>
|
|
|
|
<script>
|
import axiosInstanceInstance from '../../utils/request.js'
|
export default {
|
data() {
|
return {
|
isNoData:true,
|
loading:false,
|
radio: '选中且禁用',
|
gapT:0, //分析的过程方法耗时
|
isRepeated:0, //0 不重复 1重复
|
isWrite:'否',
|
shopname:'',
|
begin:'',
|
end:'',
|
afterAnalysis:[], //保存分析后的结果
|
displayData:[], //每页展示的数据
|
isShowColumn: false,
|
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,
|
},
|
value: '', //下拉框值
|
options: [{
|
value: '付小姐在成都',
|
label: '付小姐在成都'
|
}, {
|
value: '吉刻联盟',
|
label: '吉刻联盟'
|
}, {
|
value: '家在塔啦',
|
label: '家在塔啦'
|
}, {
|
value: '狼来了',
|
label: '狼来了'
|
}, {
|
value: '乐凯撒星游店',
|
label: '乐凯撒星游店'
|
},{
|
value: '馨远美食小镇（哈尼美食广场）',
|
label: '馨远美食小镇（哈尼美食广场）'
|
},{
|
value: '棒约翰',
|
label: '棒约翰'
|
},{
|
value: '弄堂咪道',
|
label: '弄堂咪道'
|
},{
|
value: '杨记齐齐哈尔烤肉',
|
label: '杨记齐齐哈尔烤肉'
|
},{
|
value: '上海稔传餐饮管理有限公司（人生一串）',
|
label: '上海稔传餐饮管理有限公司（人生一串）'
|
},{
|
value: '缘家',
|
label: '缘家'
|
},{
|
value: '泉盛餐饮（上海）有限公司（食其家）',
|
label: '泉盛餐饮（上海）有限公司（食其家）'
|
},{
|
value: '丰茂烤串',
|
label: '丰茂烤串'
|
},{
|
value: '上海泰煌餐饮管理有限公司（泰煌鸡）',
|
label: '上海泰煌餐饮管理有限公司（泰煌鸡）'
|
},{
|
value: '徐汇区辰熙餐馆(小铁君串烧居酒屋)',
|
label: '徐汇区辰熙餐馆(小铁君串烧居酒屋)'
|
}],
|
|
}
|
},
|
mounted(){
|
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: {
|
|
|
//分析数据
|
analysisData(){
|
|
let startTime=new Date().getTime();
|
let params = {}
|
if (this.shopname) {
|
params['shopname'] = this.shopname;
|
}
|
if (this.value) {
|
params['value'] = this.value; //下拉框值
|
}
|
if(this.begin){
|
params['begin']=this.begin
|
}
|
if(this.end){
|
params['end'] = this.end
|
}
|
|
axiosInstanceInstance.get('/data/input',{params:params})
|
.then(response => {
|
this.afterAnalysis = response.data.data
|
this.loading = false
|
console.log('返回的数据为',response.data.data);
|
if(response.data.data.length==0){
|
alert('该时段无数据')
|
this.isNoData = true
|
return
|
}
|
// 移除空数据状态
|
this.isNoData = false
|
this.total = this.afterAnalysis.length;
|
this.handleCurrentChange(1); // 默认显示第一页
|
|
//this.showOnPage() 在页面上展示数据
|
})
|
|
let endTime=new Date().getTime()
|
this.gapT=endTime-startTime
|
},
|
|
//是否重复
|
isRepeat(){
|
if (this.begin > this.end) {
|
alert('请输入正确的时间范围');
|
return;
|
}
|
let params = {}
|
if (this.shopname) {
|
params['shopname'] = this.shopname;
|
}
|
if(this.begin){
|
params['begin']=this.begin
|
}
|
if(this.end){
|
params['end'] = this.end
|
}
|
this.loading=true
|
axiosInstanceInstance.get('/data/search',{params:params})
|
.then(response => {
|
this.isRepeated=response.data.data
|
console.log('请求',this.isRepeated);
|
})
|
|
setTimeout(() => {
|
console.log('请求后',this.isRepeated);
|
if(this.isRepeated>0){
|
alert('该店铺的时段已存在分析数据,请重新选择')
|
return
|
}else{
|
this.analysisData()
|
console.log('执行了');
|
}
|
}, 1000);
|
|
},
|
|
|
//写入MySql
|
toSql(){
|
this.afterAnalysis.forEach((item)=>{
|
console.log(item);
|
let jsonData=JSON.stringify(item)
|
console.log(jsonData);
|
axiosInstanceInstance.post('/data/tosql',jsonData,{headers:{
|
'Content-Type':'application/json'
|
}}).then((result)=>{
|
console.log(result);
|
})
|
|
})
|
alert('已成功写入数据库')
|
this.isWrite='是'
|
},
|
|
|
handleSizeChange(val) {
|
this.pageSize = val;
|
this.handleCurrentChange(1); // 改变每页显示数目时跳到第一页
|
},
|
handleCurrentChange(val) {
|
const startIndex = (val - 1) * this.pageSize;
|
const endIndex = startIndex + this.pageSize;
|
this.displayData = this.afterAnalysis.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;
|
},
|
|
},
|
creaete(){
|
|
},
|
watch: {
|
// 监听复选框配置列所有的变化
|
checkList: {
|
handler: function (newnew) {
|
// console.log(newnew);
|
this.showColumn = newnew;
|
// 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
|
this.$nextTick(() => {
|
this.$refs.table.doLayout();
|
});
|
},
|
deep: true,
|
immediate: true
|
},
|
|
|
},
|
|
|
|
}
|
|
|
</script>
|
|
<style>
|
/* 卡片 */
|
.box-card {
|
/* width: 1700px; */
|
height: 180px;
|
}
|
.el-radio {
|
margin-top: 15px;
|
margin-left: 5px;
|
}
|
.page-header {
|
display: flex;
|
}
|
.page-label {
|
display: flex;
|
margin-top: 15px;
|
margin-right: 3px;
|
}
|
.shop-label {
|
margin-top: 5px;
|
}
|
/* 时间选择 */
|
.time-label {
|
margin-top: 15px;
|
margin-left: 20px;
|
white-space: nowrap;
|
}
|
/* 表格 */
|
.table {
|
/* margin: 10px,0px,10px,10px; */
|
margin: 10px;
|
}
|
/* 店铺名称标签 */
|
.form-lable {
|
margin-top: 15px;
|
}
|
/* 时间开始标签 */
|
.form-time-lable1 {
|
margin-left: 60px;
|
margin-top: 15px;
|
}
|
/* 时间结束 */
|
.form-time-lable2 {
|
margin-top: 15px;
|
}
|
.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>
|
