419 lines
15 KiB
Vue
419 lines
15 KiB
Vue
<template>
|
|
<div class="formula realTime historyData">
|
|
<div class="page-content">
|
|
<div class="table-title">
|
|
<img src="../../assets/image/real-time.png" alt="" />
|
|
历史数据
|
|
</div>
|
|
<div class="flex-view">
|
|
<div class="input-btn">
|
|
<span>快速查询</span>
|
|
<div class="btn btn-w66" @click="active = 0" :class="active == 0 ? 'blue' : 'off'">
|
|
今日
|
|
</div>
|
|
<div class="btn btn-w66" @click="active = 1" :class="active == 1 ? 'blue' : 'off'">
|
|
昨日
|
|
</div>
|
|
<div class="btn btn-w66" @click="active = 2" :class="active == 2 ? 'blue' : 'off'">
|
|
自定义
|
|
</div>
|
|
</div>
|
|
<div class="input-sel-time">
|
|
<span>时间段</span>
|
|
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至"
|
|
start-placeholder="开始时间" end-placeholder="结束时间">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="input-btn ">
|
|
<div class="btn blue" @click="search">
|
|
查询
|
|
</div>
|
|
<div class="btn blue" @click="download">
|
|
下载
|
|
</div>
|
|
<div class="btn blue" @click="openModel">
|
|
数据统计
|
|
</div>
|
|
<!-- <div class="btn blue">
|
|
日/夜平均时间范围设置
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-view">
|
|
<el-table :data="tableData" :row-class-name="tableRowClassName" max-height="520" style="width: 100%">
|
|
<el-table-column min-width='180' prop="time" label="时间"></el-table-column>
|
|
<el-table-column min-width='150' :label="item" v-for="item, index in tableList" :key="index">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row['data' + index] }}</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
:current-page="currentPage" :page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500]"
|
|
:page-size="pageSize" layout="->,total, sizes, prev, pager, next, jumper" :total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<el-dialog title="数据统计" class="vrcode-model" :append-to-body="true" :visible.sync="addModel" width="80%">
|
|
<el-button class="model-return-btn" type="primary" @click="addModel = false">返 回</el-button>
|
|
<div class="model-title">数据统计</div>
|
|
<div class="flex-view">
|
|
<div class="input-btn">
|
|
<span>快速查询</span>
|
|
<div class="btn btn-w66" @click="active1 = 0" :class="active1 == 0 ? 'blue' : 'off'">
|
|
今日
|
|
</div>
|
|
<div class="btn btn-w66" @click="active1 = 1" :class="active1 == 1 ? 'blue' : 'off'">
|
|
昨日
|
|
</div>
|
|
<div class="btn btn-w66" @click="active1 = 2" :class="active1 == 2 ? 'blue' : 'off'">
|
|
自定义
|
|
</div>
|
|
</div>
|
|
<div class="input-sel-time">
|
|
<span>时间段</span>
|
|
<el-date-picker v-model="dateRange1" type="datetimerange" range-separator="至"
|
|
start-placeholder="开始时间" end-placeholder="结束时间">
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="input-btn ">
|
|
<div class="btn blue" @click="search1">
|
|
查询
|
|
</div>
|
|
<div class="btn blue" @click="download1">
|
|
下载
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-view" style="padding-bottom: 20px;">
|
|
<el-table :data="tableData1" :row-class-name="tableRowClassName" max-height="520" style="width: 100%">
|
|
<el-table-column min-width='180' prop="time" label="时间"></el-table-column>
|
|
<el-table-column min-width='150' prop="envirnmentName" label="名称"></el-table-column>
|
|
<el-table-column min-width='150' prop="dif" label="差值"></el-table-column>
|
|
<el-table-column min-width='150' prop="max" label="最大值"></el-table-column>
|
|
<el-table-column min-width='150' prop="min" label="最小值"></el-table-column>
|
|
<el-table-column min-width='150' prop="avg" label="平均值"></el-table-column>
|
|
|
|
</el-table>
|
|
<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
|
|
:current-page="currentPage1" :page-sizes="[10, 20, 50, 100, 200, 500, 1000, 1500]"
|
|
:page-size="pageSize1" layout="->,total, sizes, prev, pager, next, jumper" :total="total1">
|
|
</el-pagination>
|
|
</div>
|
|
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// 本页面内后缀带1的都是数据分析弹窗的数据 不带1的都是页面初始的
|
|
import { Loading } from 'element-ui';
|
|
export default {
|
|
data() {
|
|
return {
|
|
active: 0,
|
|
dateRange: [],
|
|
tableData: [],
|
|
currentPage: 1,
|
|
pageSize: 10,
|
|
tableList: [],
|
|
total: 0,
|
|
loading: null,
|
|
|
|
addModel:false,
|
|
active1: 0,
|
|
dateRange1: [],
|
|
tableData1: [],
|
|
currentPage1: 1,
|
|
pageSize1: 10,
|
|
tableList1: [],
|
|
total1: 0,
|
|
}
|
|
},
|
|
watch: {
|
|
active(newVal, oldVal) {
|
|
if (newVal != 2) {
|
|
this.dataInit()
|
|
}
|
|
},
|
|
active1(newVal, oldVal) {
|
|
if (newVal != 2) {
|
|
this.dataInit1()
|
|
}
|
|
},
|
|
$route(newVal, oldVal) {
|
|
const that = this;
|
|
const store = this.$store.state
|
|
|
|
this.dataInit()
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.dataInit()
|
|
},
|
|
methods: {
|
|
openModel() {
|
|
this.addModel = true
|
|
setTimeout(() => {
|
|
this.dataInit1()
|
|
}, 0);
|
|
},
|
|
getTime(time) {
|
|
// 中国标准时间
|
|
var chinaTime = new Date(time);
|
|
|
|
// 将中国标准时间转换为UTC时间
|
|
var utcTime = new Date(chinaTime.getTime() - chinaTime.getTimezoneOffset() * 60000);
|
|
|
|
// 将UTC时间转换为2024-02-17 00:00:00格式
|
|
var formattedTime = utcTime.toISOString().slice(0, 19).replace('T', ' ');
|
|
return formattedTime
|
|
},
|
|
search1() {
|
|
this.dataInit1()
|
|
},
|
|
dataInit1() {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: '加载中',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
if (this.active1 == 0) {
|
|
this.timeInit(1)
|
|
} else if (this.active1 == 1) {
|
|
this.yesterdayTime(1)
|
|
}
|
|
this.pageSize1 = 10
|
|
this.currentPage1 = 1
|
|
setTimeout(() => {
|
|
this.getData1()
|
|
}, 0);
|
|
},
|
|
dataInit() {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: '加载中',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
if (this.active == 0) {
|
|
this.timeInit()
|
|
} else if (this.active == 1) {
|
|
this.yesterdayTime()
|
|
}
|
|
this.pageSize = 10
|
|
this.currentPage = 1
|
|
setTimeout(() => {
|
|
this.getData()
|
|
}, 0);
|
|
},
|
|
download1() {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: '加载中',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
var store = this.$store.state
|
|
var index = store.equipmentIndex;
|
|
var data = {
|
|
equipmentId: store.equipmentList[index - 1].deviceId,
|
|
startTime: this.getTime(this.dateRange1[0]),
|
|
endTime: this.getTime(this.dateRange1[1]),
|
|
page: this.currentPage1,
|
|
pageSize: this.pageSize1,
|
|
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
|
|
}
|
|
this.api.selFsAvgdatadownload(data).then(res => {
|
|
// 创建一个blob对象
|
|
this.loading.close()
|
|
const blob = new Blob([res.data], { type: 'text/csv' });
|
|
|
|
// 创建一个a标签
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
|
|
// 设置文件名
|
|
link.setAttribute('download', 'filename.csv');
|
|
|
|
// 模拟点击下载
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
|
|
// 清理资源
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url);
|
|
})
|
|
},
|
|
download() {
|
|
this.loading = this.$loading({
|
|
lock: true,
|
|
text: '加载中',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
});
|
|
var store = this.$store.state
|
|
var index = store.equipmentIndex;
|
|
var data = {
|
|
equipmentId: store.equipmentList[index - 1].deviceId,
|
|
startTime: this.getTime(this.dateRange[0]),
|
|
endTime: this.getTime(this.dateRange[1]),
|
|
page: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
|
|
}
|
|
this.api.loadHistorydata(data).then(res => {
|
|
// 创建一个blob对象
|
|
this.loading.close()
|
|
const blob = new Blob([res.data], { type: 'text/csv' });
|
|
|
|
// 创建一个a标签
|
|
const url = window.URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
|
|
// 设置文件名
|
|
link.setAttribute('download', 'filename.csv');
|
|
|
|
// 模拟点击下载
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
|
|
// 清理资源
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(url);
|
|
})
|
|
},
|
|
getData1() {
|
|
var store = this.$store.state
|
|
var index = store.equipmentIndex;
|
|
var data = {
|
|
equipmentId: store.equipmentList[index - 1].deviceId,
|
|
startTime: this.getTime(this.dateRange1[0]),
|
|
endTime: this.getTime(this.dateRange1[1]),
|
|
page: this.currentPage1,
|
|
pageSize: this.pageSize1,
|
|
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
|
|
}
|
|
this.api.selFsAvgdata(data).then(res => {
|
|
this.loading.close()
|
|
if (res.data.code == 200) {
|
|
this.tableData1 = res.data.data.data
|
|
this.total1 = res.data.data.totalCount
|
|
}
|
|
})
|
|
},
|
|
getData() {
|
|
var store = this.$store.state
|
|
var index = store.equipmentIndex;
|
|
var data = {
|
|
equipmentId: store.equipmentList[index - 1].deviceId,
|
|
startTime: this.getTime(this.dateRange[0]),
|
|
endTime: this.getTime(this.dateRange[1]),
|
|
page: this.currentPage,
|
|
pageSize: this.pageSize,
|
|
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
|
|
}
|
|
this.api.selFsTime(data).then(res => {
|
|
this.loading.close()
|
|
if (res.data.code == 200) {
|
|
this.tableList = []
|
|
this.tableData = []
|
|
this.total = res.data.data.totalCount
|
|
res.data.data.data[0].equipment.forEach((el, index) => {
|
|
this.tableList.push(el.environmentDataId + '(' + el.formula
|
|
+ ')')
|
|
})
|
|
|
|
res.data.data.data.forEach((el, index) => {
|
|
const processedData = {
|
|
time: el.updateTime
|
|
};
|
|
|
|
el.equipment.forEach((item, index) => {
|
|
processedData[`data${index}`] = item.environmentData;
|
|
});
|
|
this.tableData.push(processedData)
|
|
})
|
|
|
|
|
|
}
|
|
})
|
|
},
|
|
yesterdayTime(index) {
|
|
// 获取当前日期
|
|
var today = new Date();
|
|
|
|
// 获取昨天的日期
|
|
var yesterday = new Date(today);
|
|
yesterday.setDate(today.getDate() - 1);
|
|
|
|
// 设置时间为00:00
|
|
yesterday.setHours(0, 0, 0, 0);
|
|
var start = yesterday.toISOString();
|
|
|
|
// 设置时间为23:59
|
|
yesterday.setHours(23, 59, 59, 999);
|
|
var end = yesterday.toISOString();
|
|
if(index==1){
|
|
this.dateRange1 = [start, end]
|
|
}else{
|
|
this.dateRange = [start, end]
|
|
}
|
|
},
|
|
timeInit(index) {
|
|
const start = new Date()
|
|
start.setHours(0, 0, 0, 0)
|
|
const end = new Date()
|
|
if(index==1){
|
|
this.dateRange1 = [start, end]
|
|
}else{
|
|
this.dateRange = [start, end]
|
|
}
|
|
},
|
|
search() {
|
|
this.dataInit()
|
|
},
|
|
handleSizeChange1(val) {
|
|
this.pageSize1 = val
|
|
setTimeout(() => {
|
|
this.getData1()
|
|
}, 0);
|
|
},
|
|
handleCurrentChange1(val) {
|
|
this.currentPage1 = val
|
|
setTimeout(() => {
|
|
this.getData1()
|
|
}, 0);
|
|
},
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
setTimeout(() => {
|
|
this.getData()
|
|
}, 0);
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val
|
|
setTimeout(() => {
|
|
this.getData()
|
|
}, 0);
|
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
|
if (rowIndex % 2 == 1) {
|
|
return 'warning-row';
|
|
} else if (rowIndex % 2 == 0) {
|
|
return 'success-row';
|
|
}
|
|
return '';
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss"></style> |