348 lines
14 KiB
HTML
348 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
|
<script type="text/javascript" src="./libs/vue.minV2.5.17.js"></script>
|
|
<script type="text/javascript" src="./libs/axios.minV0.18.0.js"></script>
|
|
<script type="text/javascript" src="./libs/element-uiV2.15.1.js"></script>
|
|
<script type="text/javascript" src="./libs/iview.minV2.0.js"></script>
|
|
<script type="text/javascript" src="./libs/crypto-jsv4.0.0.js"></script>
|
|
<script type="text/javascript" src="./libs/jquery.minV3.5.1.js"></script>
|
|
<script type="text/javascript" src="./libs/moment.minV2.24.0.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="./styles/iviewV2.0.css" />
|
|
<link rel="stylesheet" href="./styles/element-uiV2.15.1.css" />
|
|
<title id="titname">demo</title>
|
|
<style type="text/css" media="screen">
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
font: 14px Microsoft YaHei;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
/* background: url(./assets/images/login.png) no-repeat; */
|
|
/* background: url(./assets/login/bg.jpg) no-repeat; */
|
|
background-size: 100% 100%;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.content {
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
margin-top: 1%;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.content .list-table {
|
|
height: calc(100% - 60px);
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.preDealtail .label {
|
|
margin: 40px 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-table--scrollable-x .el-table__body-wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.el-table__fixed-right {
|
|
right: 5px !important;
|
|
/* 竖向滚动条宽度 */
|
|
height: 100%;
|
|
}
|
|
|
|
.el-table__fixed-right {
|
|
right: 0px !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.el-table__fixed-right .el-table__fixed-body-wrapper {
|
|
height: auto !important;
|
|
bottom: 4px !important;
|
|
max-height: 100% !important
|
|
}
|
|
|
|
.el-table__fixed-right-patch {
|
|
width: 5px !important;
|
|
}
|
|
|
|
.el-table__fixed {
|
|
height: auto !important;
|
|
bottom: 0px !important;
|
|
}
|
|
|
|
.el-table__fixed .el-table__fixed-body-wrapper {
|
|
height: 503px !important;
|
|
bottom: 0px !important;
|
|
max-height: 100% !important
|
|
}
|
|
|
|
.el-table--scrollable-x .el-table__fixed {
|
|
height: auto !important;
|
|
bottom: 0px !important;
|
|
}
|
|
|
|
.el-table--scrollable-x .el-table__fixed-right {
|
|
bottom: 0px !important;
|
|
}
|
|
|
|
.el-table--scrollable-y .el-table__fixed-right {
|
|
right: 5px !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar {
|
|
height: 7px !important;
|
|
}
|
|
|
|
.el-table--fluid-height .el-table__fixed {
|
|
bottom: 0px !important;
|
|
}
|
|
|
|
.el-button {
|
|
border-radius: 0px !important;
|
|
}
|
|
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 0px;
|
|
height: 6px;
|
|
}
|
|
|
|
/* //注意:hover */
|
|
.el-table__body-wrapper:hover::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
|
|
/* // 滚动条的滑块 */
|
|
.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
background-color: #ddd;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.el-table__body-wrapper {
|
|
height: 510px !important;
|
|
}
|
|
|
|
.el-scrollbar__wrap::-webkit-scrollbar {
|
|
width: 6PX !important;
|
|
height: 6PX !important;
|
|
}
|
|
|
|
|
|
.el-table__fixed,
|
|
.el-table__fixed-right {
|
|
height: calc(100% - 6PX) !important;
|
|
}
|
|
|
|
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right {
|
|
height: 100% !important;
|
|
bottom: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.el-table--scrollable-y .el-table__fixed-right {
|
|
right: 6PX !important;
|
|
}
|
|
|
|
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right {
|
|
right: 0 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- <div > -->
|
|
|
|
<div class="content" id="app">
|
|
<div>
|
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
|
<el-form-item label="开始时间：">
|
|
<div>
|
|
<el-date-picker v-model="addForm.date_range_start" type="date" placeholder="开始日期"
|
|
:picker-options="pickerOptions0" key="day">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="结束时间：">
|
|
<div>
|
|
<el-date-picker v-model="addForm.date_range_end" type="date" placeholder="结束日期"
|
|
:picker-options="pickerOptions1" key="day">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
<el-button type="success" @click="onExport" style="background: #57c7d4;border:#57c7d4">导出</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="list-table">
|
|
<span>数据列表：</span>
|
|
<el-table :data="tableData" ref="table" border style="width: 100%; margin-top: 20px" max-height="700"
|
|
min-height="500" height="600"
|
|
:header-cell-style="{'text-align':'center','background':'rgb(235,235,235)'}"
|
|
:cell-style="{'text-align':'center'}">
|
|
<el-table-column prop="device_id" label="能量表编号" fixed width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="place" label="能量表位置" fixed width="173">
|
|
</el-table-column>
|
|
<el-table-column prop="supply_water_temperature" label="供水温度(℃)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="return_water_temperature" label="回水温度(℃)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="instantaneous_delivery" label="瞬时流量(m³/h)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="instant_heat" label="瞬时热量(GJ/h)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="positive_cumulative_heat" label="正累计热量(GJ/h)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="negative_cumulative_heat" label="负累计热量(GJ/h)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="net_cumulative_heat" label="净累计热量(GJ/h)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="positive_total_flow" label="正累积流量(m³)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="negative_total_flow" label="负累积流量(m³)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="cumulative_traffic" label="净累积流量(m³)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="accumulated_traffic_day" label="今天累积流量(m³)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="accumulated_traffic_month" label="本月累积流量(m³)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="accumulated_traffic_year" label="今年累积流量(m³)" width="150">
|
|
</el-table-column>
|
|
<el-table-column prop="acquisition_time" label="采集时间" width="200">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
form: {
|
|
},
|
|
addForm: {
|
|
date_range_end: moment().format("YYYY-MM-DD"),
|
|
date_range_start: moment().subtract(7, 'days').format("YYYY-MM-DD"),
|
|
},
|
|
pickerOptions0: { //结束时间不能大于开始时间
|
|
disabledDate: (time) => {
|
|
if (app.addForm.date_range_end) {
|
|
return time.getTime() > new Date(app.addForm.date_range_end).getTime();
|
|
}
|
|
}
|
|
},
|
|
pickerOptions1: {
|
|
disabledDate: (time) => {
|
|
if (app.addForm.date_range_start) {
|
|
return time.getTime() < new Date(app.addForm.date_range_start).getTime() - 1 *
|
|
24 * 60 * 60 * 1000; //可以选择同一天
|
|
}
|
|
}
|
|
},
|
|
tableData: [],
|
|
},
|
|
mounted() {
|
|
let timeData = {
|
|
start_date: moment(this.addForm.date_range_start).format("YYYY-MM-DD"),
|
|
end_date: moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
|
}
|
|
this.getTabel(timeData)
|
|
},
|
|
methods: {
|
|
//获取表格数据
|
|
getTabel(date) {
|
|
let timeData = date
|
|
axios({
|
|
method: "POST",
|
|
url: "http://172.16.1.253:8087/Vue/Energy.aspx/getEnergyList",
|
|
data: timeData,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
}).then((res) => {
|
|
this.tableData = res.data.d
|
|
for (let i = 0; i < this.tableData.length; i++) {
|
|
this.tableData[i].create_time = this.formatStringDate(this.tableData[i].create_time)
|
|
this.tableData[i].acquisition_time = this.formatStringDate(this.tableData[i].acquisition_time)
|
|
}
|
|
})
|
|
},
|
|
//通过筛选时间查询
|
|
onSubmit() {
|
|
let timeData = {
|
|
start_date: moment(this.addForm.date_range_start).format("YYYY-MM-DD"),
|
|
end_date: moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
|
}
|
|
this.getTabel(timeData)
|
|
},
|
|
//导出列表
|
|
onExport() {
|
|
let timeData = {
|
|
start_date: moment(this.addForm.date_range_start).format("YYYY-MM-DD"),
|
|
end_date: moment(this.addForm.date_range_end).format("YYYY-MM-DD")
|
|
}
|
|
this.downloadFile('http://172.16.1.253:8087/Vue/ExportEnergy.ashx?start_date=' + timeData.start_date + '&end_date=' + timeData.end_date)
|
|
},
|
|
downloadFile(url) {
|
|
fetch(url)
|
|
.then(response => {
|
|
var disposition = response.headers.get('Content-Disposition');
|
|
var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
|
|
var matches = filenameRegex.exec(disposition);
|
|
var filename = matches != null && matches[1] ? matches[1].replace(/['"]/g, '') : 'download';
|
|
|
|
return response.blob().then(blob => {
|
|
var a = document.createElement('a');
|
|
var url = window.URL.createObjectURL(blob);
|
|
a.href = url;
|
|
a.download = decodeURIComponent(filename);
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
});
|
|
})
|
|
.catch(error => console.error('下载文件时出错:', error));
|
|
},
|
|
|
|
//时间戳转化方法
|
|
formatStringDate(jsondate) {
|
|
jsondate = jsondate.replace("/Date(", "").replace(")/", "");
|
|
if (jsondate.indexOf("+") > 0) {
|
|
jsondate = jsondate.substring(0, jsondate.indexOf("+"));
|
|
}
|
|
else if (jsondate.indexOf("-") > 0) {
|
|
jsondate = jsondate.substring(0, jsondate.indexOf("-"));
|
|
}
|
|
var date = new Date(parseInt(jsondate, 10));
|
|
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
|
var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
|
var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hour + ":" + minute + ":" + second;
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |