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.
404 lines
11 KiB
404 lines
11 KiB
<template> |
|
<div> |
|
<div style="user-select: none; |
|
height: 40px; |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
padding: 0 10px; |
|
margin-bottom: 10px; |
|
-webkit-box-sizing: border-box; |
|
box-sizing: border-box; |
|
overflow: hidden; |
|
border-top: 1px solid #f6f6f6; |
|
background-color: #fff; |
|
-webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); |
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);"> |
|
<div style="height: 100%; |
|
border-bottom: 3px solid #409EFF; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 10px; |
|
font-family: Arial,sans-serif; |
|
font-size: 15px; |
|
color: #409EFF;"> |
|
{{routeName == '' ? '历史用热记录' : routeName}} |
|
</div> |
|
</div> |
|
|
|
<basic-container> |
|
<el-row> |
|
<el-col :span="24"> |
|
<avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form" |
|
:permission="permissionList" @search-change="searchChange" @search-reset="searchReset" |
|
@current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" |
|
@on-load="onLoad" :page.sync="page"> |
|
<template slot-scope="scope" slot="areaSearch"> |
|
<el-select v-model="area" @change="areaSearch"> |
|
<el-option label="业务区" value="1"></el-option> |
|
</el-select> |
|
</template> |
|
<template slot-scope="scope" slot="buildSearch"> |
|
<el-select v-model="build"> |
|
<el-option :key="'build' + index" v-for="(item, index) in buildings" :label="item.name" |
|
:value="item.id"></el-option> |
|
</el-select> |
|
</template> |
|
<template slot-scope="scope" slot="equipNameSearch"> |
|
<el-input v-model="equipName" placeholder="暖表名称" clearable /> |
|
</template> |
|
<template slot-scope="scope" slot="funcCatSearch"> |
|
<el-select v-model="funcCat"> |
|
<el-option v-for="(item, index) in funcCatList" :key="'funcCat' + index" :label="item.label" |
|
:value="item.value"></el-option> |
|
</el-select> |
|
</template> |
|
<template slot-scope="scope" slot="funcTypeSearch"> |
|
<el-select v-model="funcType"> |
|
<el-option v-for="(item, index) in funcTypeList" :key="'funcType' + index" :label="item.label" |
|
:value="item.value"></el-option> |
|
</el-select> |
|
</template> |
|
<template slot-scope="scope" slot="dateRangeSearch"> |
|
<el-date-picker v-model="dateRange" type="datetimerange" placeholder="选择日期" |
|
value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" |
|
end-placeholder="结束日期">> |
|
</el-date-picker> |
|
</template> |
|
<template slot-scope="{type,size,row}" slot="menu"> |
|
<el-button :size="size" :type="type" @click="historyByCode(row)">历史记录 |
|
</el-button> |
|
</template> |
|
</avue-crud> |
|
</el-col> |
|
</el-row> |
|
<el-dialog v-if="dialogVisible" title="暖表历史记录" :visible.sync="dialogVisible" width="80%" |
|
:modal-append-to-body='false' v-model="form2"> |
|
<el-form :inline="true" label-width="100px" class="demo-ruleForm"> |
|
<el-form-item label="日期范围"> |
|
<el-date-picker size="small" v-model="dateRange2" type="datetimerange" placeholder="选择日期" |
|
value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" |
|
end-placeholder="结束日期">> |
|
</el-date-picker> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button icon="el-icon-search" size="small" type="primary" @click="getWarmHistoryListByCode"> |
|
搜索</el-button> |
|
<el-button icon="el-icon-delete" size="small" @click="searchReset2">清空</el-button> |
|
</el-form-item> |
|
</el-form> |
|
<avue-crud :option="option2" :table-loading="loading2" :data="electricData" ref="crud2" |
|
@search-change="searchChange2" @current-change="currentChange2" @size-change="sizeChange2" |
|
@refresh-change="refreshChange2" @on-load="getWarmHistoryListByCode" :page.sync="electricPage"> |
|
</avue-crud> |
|
<span slot="footer"> |
|
<el-button @click="dialogVisible = false">关 闭</el-button> |
|
</span> |
|
</el-dialog> |
|
</basic-container> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from "vuex"; |
|
import { getWarmHistoryList, getWarmHistoryListByCode } from "@/api/equipment"; |
|
import { dateFormat } from "@/util/date"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
routeName:'', |
|
area: "1", |
|
build: '', |
|
equipName: '',//电表名称 |
|
dateRange: [dateFormat(new Date((new Date().getTime() - 1000 * 60 * 60 * 24 * 29)), 'yyyy-MM-dd hh:mm'), dateFormat(new Date(), 'yyyy-MM-dd hh:mm')], |
|
loading: false, |
|
parentId: 0, |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
option: { |
|
lazy: true, |
|
tip: false, |
|
searchLabelWidth: 100, |
|
searchShow: true, |
|
searchMenuSpan: 24, |
|
tree: true, |
|
border: true, |
|
index: true, |
|
dialogClickModal: false, |
|
viewBtn: false, |
|
addBtn: false, |
|
delBtn: false, |
|
editBtn: false, |
|
menuWidth: 100, |
|
column: [ |
|
{ |
|
label: "业务区", |
|
prop: "areaName", |
|
align: "center", |
|
}, |
|
{ |
|
label: "楼宇", |
|
prop: "buildName", |
|
align: "center", |
|
}, |
|
{ |
|
label: "暖表名称", |
|
prop: "equipName", |
|
align: "center", |
|
}, |
|
{ |
|
label: "起始读数", |
|
prop: "valueStart", |
|
align: "center", |
|
}, |
|
{ |
|
label: "起始读数时间", |
|
prop: "timeStart", |
|
align: "center", |
|
width: 180, |
|
}, |
|
{ |
|
label: "结束读数", |
|
prop: "valueEnd", |
|
align: "center", |
|
}, |
|
{ |
|
label: "结束读数时间", |
|
prop: "timeEnd", |
|
type: "datetimerange", |
|
align: "center", |
|
width: 180, |
|
}, |
|
{ |
|
label: "用热量", |
|
prop: "increase", |
|
align: "center", |
|
}, |
|
{ |
|
label: "楼宇", |
|
prop: "build", |
|
searchslot: true, |
|
search: true, |
|
type: "select", |
|
hide: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false, |
|
}, |
|
{ |
|
label: "暖表名称", |
|
prop: "equipName", |
|
searchslot: true, |
|
search: true, |
|
type: "input", |
|
hide: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false, |
|
}, |
|
{ |
|
label: "日期范围", |
|
prop: "dateRange", |
|
type: 'datetimerange', |
|
searchslot: true, |
|
searchRange: true, |
|
hide: true, |
|
search: true, |
|
row: false, |
|
display: false, |
|
viewDisplay: false, |
|
}, |
|
], |
|
}, |
|
data: [], |
|
buildings: [ |
|
{ |
|
id: "", |
|
name: "全部", |
|
}, |
|
{ |
|
id: "01", |
|
name: "1号楼", |
|
}, |
|
{ |
|
id: "02", |
|
name: "2号楼", |
|
}, |
|
{ |
|
id: "03", |
|
name: "3号楼", |
|
}, |
|
{ |
|
id: "04", |
|
name: "4号楼", |
|
}, |
|
{ |
|
id: "05", |
|
name: "5号楼", |
|
}, |
|
{ |
|
id: "06", |
|
name: "6号楼", |
|
}, |
|
], |
|
//单个电表历史记录 |
|
loading2: false, |
|
equipCode: '', |
|
dateRange2: [], |
|
electricData: [], |
|
electricPage: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
dialogVisible: false, |
|
option2: { |
|
lazy: true, |
|
tip: false, |
|
searchShow: false, |
|
tree: false, |
|
menu: false, |
|
border: true, |
|
index: true, |
|
dialogClickModal: false, |
|
viewBtn: false, |
|
addBtn: false, |
|
delBtn: false, |
|
editBtn: false, |
|
columnBtn: false, |
|
column: [ |
|
{ |
|
label: "暖表名称", |
|
prop: "equipName", |
|
align: "center", |
|
}, |
|
{ |
|
label: "暖表读数", |
|
prop: "value", |
|
align: "center", |
|
}, |
|
{ |
|
label: "读数时间", |
|
prop: "createTime", |
|
type: "datetime", |
|
align: "center", |
|
}, |
|
], |
|
}, |
|
}; |
|
}, |
|
computed: { |
|
...mapGetters(["userInfo", "permission"]), |
|
permissionList() { |
|
return { |
|
addBtn: this.vaildData(this.permission.dept_add, false), |
|
viewBtn: this.vaildData(this.permission.dept_view, false), |
|
delBtn: this.vaildData(this.permission.dept_delete, false), |
|
editBtn: this.vaildData(this.permission.dept_edit, false), |
|
}; |
|
}, |
|
}, |
|
mounted() { |
|
this.routeName = this.$route.name |
|
}, |
|
methods: { |
|
//单个电表历史记录 |
|
historyByCode(row) { |
|
this.dateRange2 = this.dateRange ? this.dateRange : [dateFormat(new Date((new Date().getTime() - 1000 * 60 * 60 * 24 * 29)), 'yyyy-MM-dd hh:mm'), dateFormat(new Date(), 'yyyy-MM-dd hh:mm')]; |
|
this.equipCode = row.equipCode; |
|
this.electricPage.currentPage = 1; |
|
// this.getElectricHistoryListByCode(); |
|
this.dialogVisible = true; |
|
}, |
|
getWarmHistoryListByCode() { |
|
this.loading2 = true; |
|
getWarmHistoryListByCode( |
|
this.equipCode, |
|
this.dateRange2.length > 0 ? this.dateRange2[0] : '', |
|
this.dateRange2.length > 0 ? this.dateRange2[1] : '', |
|
this.electricPage.currentPage, |
|
this.electricPage.pageSize, |
|
).then((res) => { |
|
this.loading2 = false; |
|
this.electricData = res.data.data.records; |
|
this.electricPage.total = res.data.data.total; |
|
}); |
|
}, |
|
searchReset2() { |
|
this.dateRange2 = this.dateRange ? this.dateRange : [dateFormat(new Date((new Date().getTime() - 1000 * 60 * 60 * 24 * 29)), 'yyyy-MM-dd hh:mm'), dateFormat(new Date(), 'yyyy-MM-dd hh:mm')]; |
|
this.electricPage.currentPage = 1; |
|
this.getWarmHistoryListByCode(); |
|
}, |
|
searchChange2(params, done) { |
|
this.electricPage.currentPage = 1; |
|
this.getWarmHistoryListByCode(); |
|
done(); |
|
}, |
|
currentChange2(currentPage) { |
|
this.electricPage.currentPage = currentPage; |
|
}, |
|
sizeChange2(pageSize) { |
|
this.electricPage.pageSize = pageSize; |
|
}, |
|
refreshChange2() { |
|
this.getWarmHistoryListByCode(); |
|
}, |
|
changeDaterange2(date) { |
|
console.log("date", date) |
|
}, |
|
//搜索条件联动 |
|
searchReset() { |
|
this.area = "1"; |
|
this.build = ""; |
|
this.equipName = ''; |
|
this.dateRange = [dateFormat(new Date((new Date().getTime() - 1000 * 60 * 60 * 24 * 29)), 'yyyy-MM-dd hh:mm'), dateFormat(new Date(), 'yyyy-MM-dd hh:mm')]; |
|
this.page.currentPage = 1; |
|
this.onLoad(this.page); |
|
}, |
|
searchChange(params, done) { |
|
this.page.currentPage = 1; |
|
this.onLoad(); |
|
done(); |
|
}, |
|
currentChange(currentPage) { |
|
this.page.currentPage = currentPage; |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.pageSize = pageSize; |
|
}, |
|
refreshChange() { |
|
this.onLoad(this.page); |
|
}, |
|
onLoad() { |
|
this.loading = true; |
|
try { |
|
getWarmHistoryList( |
|
this.area ? this.area : '', |
|
this.dateRange.length > 0 ? this.dateRange[0] : '', |
|
this.dateRange.length > 0 ? this.dateRange[1] : '', |
|
this.page.currentPage, |
|
this.page.pageSize, |
|
this.build ? this.build : '', |
|
this.equipName ? this.equipName : '', |
|
).then((res) => { |
|
this.loading = false; |
|
this.data = res.data.data.records; |
|
this.page.total = res.data.data.total; |
|
}); |
|
} catch (error) { |
|
this.loading = false; |
|
|
|
} |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
</style> |
|
|