You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
483 lines
12 KiB
483 lines
12 KiB
<template> |
|
<div class="big-machine" v-loading="listLoading"> |
|
<div class="condition"> |
|
<div class="condition-left"> |
|
<el-select |
|
style="margin-right: 0.1rem" |
|
v-model="building" |
|
placeholder="请选择楼栋" |
|
clearable |
|
> |
|
<el-option |
|
v-for="(item, index) in builds" |
|
:key="index" |
|
:label="item.building_name" |
|
:value="item.id" |
|
/> |
|
</el-select> |
|
<el-date-picker |
|
v-model="dayDate" |
|
type="daterange" |
|
range-separator="至" |
|
value-format="yyyy-MM-dd" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
@change="dateChange" |
|
> |
|
</el-date-picker> |
|
<div class="success-btn" style="margin: 0 0.12rem"> |
|
<el-button type="success" @click="findData">查询</el-button> |
|
</div> |
|
<div class="warning-btn"> |
|
<el-button type="warning" @click="exportData">导出</el-button> |
|
</div> |
|
</div> |
|
</div> |
|
<el-table |
|
:data="postList" |
|
stripe |
|
:cell-style="tableRowStyle" |
|
highlight-current-row |
|
height="500" |
|
> |
|
<el-table-column |
|
type="index" |
|
:index="indexAdd" |
|
prop="number" |
|
label="序号" |
|
width="90" |
|
></el-table-column> |
|
<el-table-column label="所属楼栋" align="center" prop="buildingName" /> |
|
<el-table-column label="设备编号" align="center" prop="deviceNum" /> |
|
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
|
<el-table-column label="抄表时间" align="center" prop="curTime" /> |
|
<el-table-column label="采集读数" align="center" prop="curValue" /> |
|
<el-table-column label="用量(度)" align="center" prop="usedValue" /> |
|
<el-table-column label="倍率" align="center" prop="ratio" /> |
|
<el-table-column label="计算量(度)" align="center" prop="calcValue" /> |
|
</el-table> |
|
|
|
<pagination |
|
v-show="total > 0" |
|
:total="total" |
|
:page.sync="queryParams.pageNum" |
|
:limit.sync="queryParams.pageSize" |
|
@pagination="getList" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { formatDay } from "@/utils/datetime"; |
|
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
|
import { queryDeviceDatas } from "@/api/hotWater/energyQuery"; |
|
export default { |
|
data() { |
|
return { |
|
listLoading: false, |
|
dayDate: [], //日值 |
|
dialogVisible: false, |
|
building: "", //选中的楼栋 |
|
builds: [], //楼栋列表 |
|
// 遮罩层 |
|
loading: false, |
|
// 总条数 |
|
total: 0, |
|
// 表格数据 |
|
postList: [], |
|
// 查询参数 |
|
queryParams: { |
|
pageNum: 1, |
|
pageSize: 10, |
|
startTime: "", |
|
endTime: "", |
|
}, |
|
}; |
|
}, |
|
created() { |
|
// 在组件创建完成后，设置默认值 |
|
}, |
|
mounted() { |
|
this.initializeTimeDate(); |
|
this.getBuildList(); |
|
this.getList(); |
|
}, |
|
methods: { |
|
// 选中日期事件 |
|
dateChange() { |
|
// console.log("打印时间", this.timeform.time1); |
|
if (!this.dayDate) { |
|
this.$nextTick(() => { |
|
this.dayDate = []; |
|
}); |
|
} |
|
}, |
|
/** 查询楼栋 */ |
|
getBuildList() { |
|
let data = { |
|
systemType: "1", |
|
}; |
|
hotBuildList(data).then((res) => { |
|
if (res.code == 200) { |
|
// 只需要保留热水的系统 |
|
console.log("楼栋返回值", res); |
|
this.builds = res.rows; |
|
// console.log("筛选后的新结果", this.builds); |
|
this.building = res.rows[0].id; |
|
this.getList(); |
|
} |
|
}); |
|
}, |
|
// 初始化时间 |
|
initializeTimeDate() { |
|
let date = new Date(); //获取新的时间 |
|
//获取当前年份,并且转为字符串 |
|
let year = date.getFullYear().toString(); |
|
//获取当前月份，因为月份是要从0开始，此处要加1， |
|
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0' |
|
let month = |
|
date.getMonth() + 1 < 10 |
|
? "0" + (date.getMonth() + 1).toString() |
|
: (date.getMonth() + 1).toString(); |
|
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0' |
|
let day = |
|
date.getDate() < 10 |
|
? "0" + date.getDate().toString() |
|
: date.getDate().toString(); |
|
//字符串拼接，将开始时间和结束时间进行拼接 |
|
let start1 = year + "-" + month + "-01"; //当月第一天 |
|
let end1 = year + "-" + month + "-" + day; //当天 |
|
this.dayDate = [start1, end1]; // 更新 |
|
}, |
|
// 查询 |
|
findData() { |
|
this.queryParams.pageNum = 1; |
|
this.getList(); |
|
}, |
|
// 序号 |
|
indexAdd(index) { |
|
return ( |
|
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize |
|
); |
|
}, |
|
//请求数据 |
|
getList() { |
|
if (this.dayDate.length == 0) { |
|
this.initializeTimeDate(); |
|
} |
|
let data = { |
|
pageNum: this.queryParams.pageNum, |
|
pageSize: this.queryParams.pageSize, |
|
startDate: this.dayDate[0], |
|
endDate: this.dayDate[1], |
|
buildingId: this.building, |
|
deviceType: "16", |
|
}; |
|
console.log("查询数据参数", data); |
|
this.listLoading = true; |
|
queryDeviceDatas(data).then((res) => { |
|
console.log("返回", res); |
|
if (res.code == 200) { |
|
this.postList = res.rows; |
|
this.total = res.total; |
|
} else { |
|
this.postList = []; |
|
this.total = 0; |
|
} |
|
}); |
|
// 请求数据 |
|
// Just to simulate the time of the request |
|
setTimeout(() => { |
|
this.listLoading = false; |
|
}, 1.0 * 1000); |
|
}, |
|
// 导出 |
|
exportData() { |
|
if (this.dayDate.length == 0) { |
|
this.initializeTimeDate(); |
|
} |
|
let data = { |
|
pageNum: this.queryParams.pageNum, |
|
pageSize: this.total, |
|
startDate: this.dayDate[0], |
|
endDate: this.dayDate[1], |
|
buildingId: this.building, |
|
deviceType: "16", |
|
}; |
|
console.log("查询数据参数", data); |
|
queryDeviceDatas(data).then((res) => { |
|
console.log("返回", res); |
|
if (res.code == 200) { |
|
import("@/assets/excel/Export2Excel").then((excel) => { |
|
var tHeader = [ |
|
"所属楼栋", |
|
"设备编号", |
|
"设备名称", |
|
"抄表时间", |
|
"采集读数", |
|
"用量(度)", |
|
"倍率", |
|
"计算量(度)", |
|
]; // 导出的excel表头名信息 改参数 |
|
var filterVal = [ |
|
"buildingName", |
|
"deviceNum", |
|
"deviceName", |
|
"curTime", |
|
"curValue", |
|
"usedValue", |
|
"ratio", |
|
"calcValue", |
|
]; |
|
const data = this.formatJson(filterVal, res.rows); |
|
const autoWidth = true; |
|
excel.export_json_to_excel({ |
|
header: tHeader, //表头 |
|
data, //数据 |
|
filename: "电表读数报表", //名称 |
|
autoWidth: true, //宽度自适应 |
|
}); |
|
this.$message({ |
|
type: "success", |
|
message: "导出成功!", |
|
}); |
|
}); |
|
} else { |
|
this.$message.error("导出失败!"); |
|
} |
|
}); |
|
}, |
|
//格式转换,不需要改动 |
|
formatJson(filterVal, jsonData) { |
|
return jsonData.map((v) => |
|
filterVal.map((j) => { |
|
if (j === "installDate") { |
|
return format(v[j]); |
|
} else { |
|
return v[j]; |
|
} |
|
}) |
|
); |
|
}, |
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
|
if (columnIndex === 6 || columnIndex === 8) { |
|
return "color: #75d148;!important;text-align:center"; |
|
} |
|
// return "text-align:center"; |
|
}, |
|
}, |
|
}; |
|
</script> |
|
<style lang="scss" scoped> |
|
.condition { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 100%; |
|
margin-bottom: 0.24rem; |
|
|
|
.condition-left { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
|
|
.years-div { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
|
|
.years-word { |
|
font-size: 14px; |
|
margin: 0 5px; |
|
color: #388ff3; |
|
} |
|
} |
|
|
|
.time-label { |
|
font-size: 16px; |
|
line-height: 7px; |
|
margin-right: 12px; |
|
white-space: nowrap; |
|
} |
|
} |
|
} |
|
.data-content { |
|
display: flex; |
|
flex-direction: row; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
width: 100%; |
|
margin-top: 23px; |
|
.data-li { |
|
background-color: transparent; |
|
border-radius: 8px; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
padding: 0.3rem; |
|
width: 31%; |
|
justify-content: space-between; |
|
margin-bottom: 0.24rem; |
|
font-family: SourceHanSansCN-Regular; |
|
font-size: 0.16rem; |
|
position: relative; |
|
overflow: hidden; |
|
.use-icon { |
|
width: 0.6rem; |
|
height: 0.6rem; |
|
} |
|
.use-text { |
|
width: 33%; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
color: #dbdbdb; |
|
.data-text { |
|
z-index: 11 !important; |
|
font-family: DIN-Bold; |
|
font-size: 0.24rem; |
|
margin-top: 0.05rem; |
|
color: #ffffff; |
|
} |
|
.downText { |
|
color: #ff4027; |
|
z-index: 11 !important; |
|
font-family: DIN-Bold; |
|
font-size: 0.24rem; |
|
margin-top: 0.05rem; |
|
.el-icon-bottom { |
|
margin-right: 0.08rem; |
|
} |
|
} |
|
.upText { |
|
color: #2ff016; |
|
z-index: 11 !important; |
|
font-family: DIN-Bold; |
|
font-size: 0.24rem; |
|
margin-top: 0.05rem; |
|
.el-icon-bottom, |
|
.el-icon-top { |
|
margin-right: 0.08rem; |
|
} |
|
} |
|
} |
|
} |
|
.type-img { |
|
position: absolute; |
|
bottom: 0; |
|
width: 3.17rem; |
|
height: 0.52rem; |
|
z-index: 10; |
|
} |
|
.type1 { |
|
border: 1px solid #e8aa13; |
|
border-radius: 10px; |
|
/* 设置渐变背景 */ |
|
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
|
} |
|
.type1::after { |
|
content: ""; |
|
width: 100%; |
|
height: 90%; |
|
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: absolute; |
|
bottom: -100% !important; |
|
z-index: 1; |
|
} |
|
.type2 { |
|
border: 1px solid #27a0f2; |
|
border-radius: 10px; |
|
/* 设置渐变背景 */ |
|
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
|
} |
|
.type2::after { |
|
content: ""; |
|
width: 100%; |
|
height: 90%; |
|
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: absolute; |
|
bottom: -100% !important; |
|
z-index: 1; |
|
} |
|
.type3 { |
|
border: 1px solid #1ad3ef; |
|
border-radius: 10px; |
|
/* 设置渐变背景 */ |
|
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
|
} |
|
.type3::after { |
|
content: ""; |
|
width: 100%; |
|
height: 90%; |
|
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: absolute; |
|
bottom: -100% !important; |
|
z-index: 1; |
|
} |
|
.type4 { |
|
border: 1px solid #11d47b; |
|
border-radius: 10px; |
|
/* 设置渐变背景 */ |
|
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
|
} |
|
.type4::after { |
|
content: ""; |
|
width: 100%; |
|
height: 90%; |
|
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
|
border-radius: 50%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: absolute; |
|
bottom: -100% !important; |
|
z-index: 1; |
|
} |
|
} |
|
.choice { |
|
margin: 20px; |
|
.mr20 { |
|
padding: 0.05rem 0.2rem; |
|
white-space: nowrap; |
|
width: auto; |
|
} |
|
} |
|
.charts { |
|
width: 100%; |
|
height: 300px; |
|
margin-bottom: 0.1rem; |
|
} |
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
|
@media (min-width: 2000px) { |
|
.condition { |
|
.condition-left { |
|
.years-div { |
|
.years-word { |
|
font-size: 0.14rem !important; |
|
margin: 0 0.05rem !important; |
|
} |
|
} |
|
|
|
.time-label { |
|
font-size: 0.16rem !important; |
|
line-height: 0.07rem !important; |
|
margin-right: 0.12rem !important; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|