372 lines
10 KiB
Vue
372 lines
10 KiB
Vue
<template>
|
||
<div class="manage-container">
|
||
<el-form ref="form" :model="queryForm" label-width="100px">
|
||
<vab-query-form>
|
||
<el-form-item :label="$t('defalult.sj')">
|
||
<el-date-picker
|
||
v-model="queryForm.time"
|
||
type="daterange"
|
||
align="right"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
@change="changeTime"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item width="100" :label="$t('dataEnquiry.xm')">
|
||
<el-select
|
||
v-model="queryForm.projectId"
|
||
placeholder="请选择项目"
|
||
@change="changeProject"
|
||
>
|
||
<el-option
|
||
v-for="item in projectData"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item width="100" :label="$t('dataEnquiry.jd')">
|
||
<el-select
|
||
v-model="queryForm.townCode"
|
||
:placeholder="$t('dataEnquiry.qxzjd')"
|
||
@change="changeTown"
|
||
>
|
||
<el-option
|
||
v-for="item in townData"
|
||
:key="item.townCode"
|
||
:label="item.townName"
|
||
:value="item.townCode"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item width="100" :label="$t('dataEnquiry.sq')">
|
||
<el-select v-model="queryForm.community" placeholder="请选择社区">
|
||
<el-option
|
||
v-for="item in Communities"
|
||
:key="item"
|
||
:label="item"
|
||
:value="item"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item width="100" :label="$t('dataEnquiry.zdmc')">
|
||
<el-input
|
||
v-model="queryForm.devieName"
|
||
:placeholder="$t('dataEnquiry.qsrzdmc')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item width="100">
|
||
<el-button type="primary" size="medium" @click="search">
|
||
{{ $t('defalult.cx') }}
|
||
</el-button>
|
||
</el-form-item>
|
||
</vab-query-form>
|
||
</el-form>
|
||
<el-table
|
||
v-loading="listLoading"
|
||
:data="reportData"
|
||
border
|
||
stripe
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column
|
||
prop="townName"
|
||
:label="$t('dataEnquiry.xzjdmc')"
|
||
width="120"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="community"
|
||
label="社区名称"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="deviceName"
|
||
:label="$t('dataEnquiry.zdmc')"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="specifications"
|
||
label="对比规格"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="waterYield.start"
|
||
label="开始水量(m³)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="waterYield.end"
|
||
label="结束水量(m³)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="waterYield.use"
|
||
label="用水量(m³)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="electricQuantity.start"
|
||
label="开始电量(Kw·h)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="electricQuantity.end"
|
||
label="结束电量(Kw·h)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="electricQuantity.use"
|
||
label="用电量(Kw·h)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="powerConsumption"
|
||
label="电单耗(Kw·h/m³)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="dutyRatio"
|
||
label="本周运行符合率(%)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="maximumLiquidLevel"
|
||
label="本周调节池最高液位(m)"
|
||
width="200"
|
||
align="center"
|
||
></el-table-column>
|
||
</el-table>
|
||
<vab-query-form>
|
||
<vab-query-form-right-panel>
|
||
<el-pagination
|
||
:background="background"
|
||
:current-page="queryForm.page"
|
||
:layout="layout"
|
||
:page-size="queryForm.size"
|
||
:total="total"
|
||
@current-change="handleCurrentChange"
|
||
@size-change="handleSizeChange"
|
||
></el-pagination>
|
||
</vab-query-form-right-panel>
|
||
</vab-query-form>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { getList } from '@/api/project';
|
||
import { getTownsByProject, getCommunitiesByTown } from '@/api/device';
|
||
import { weeklyReport } from '@/api/analysis';
|
||
export default {
|
||
name: 'Index',
|
||
components: {},
|
||
data() {
|
||
return {
|
||
data: [],
|
||
lazy: true,
|
||
activeName: 'first',
|
||
layout: 'total, sizes, prev, pager, next, jumper',
|
||
total: 0,
|
||
input: '',
|
||
textarea: '',
|
||
list: [],
|
||
background: true,
|
||
listLoading: true,
|
||
elementLoadingText: '正在加载...',
|
||
townData: [],
|
||
Communities: [],
|
||
projectData: [],
|
||
reportData: [],
|
||
queryForm: {
|
||
page: 1,
|
||
size: 20,
|
||
projectId: '',
|
||
start: '',
|
||
end: '',
|
||
time: [],
|
||
townCode: '',
|
||
community: '',
|
||
devieName: '',
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
height() {
|
||
return 500;
|
||
},
|
||
},
|
||
created() {
|
||
this.setDefaultTome();
|
||
this.getProjectData();
|
||
setTimeout(() => {
|
||
this.fetchData();
|
||
}, 1000);
|
||
},
|
||
methods: {
|
||
//获取当前时间
|
||
getPastTime(month) {
|
||
const time = new Date();
|
||
const yy = time.getFullYear(); //获取完整的年份(4位,1970-???)
|
||
const M = time.getMonth() + 1; //获取当前月份(0-11,0代表1月),
|
||
const d = time.getDate(); //获取当前日(1-31)
|
||
// 获取指定的过去时间
|
||
const past = M - month;
|
||
const pastM = past < 0 ? past + 12 : past > 10 ? past : '0' + past;
|
||
// 小于9的，在前面加0
|
||
const MM = M > 9 ? M : '0' + M;
|
||
const dd = d > 9 ? d : '0' + d;
|
||
// 指定的过去时间
|
||
const PastTime = yy + '-' + pastM + '-' + dd;
|
||
// 当前时间
|
||
const nowTime = yy + '-' + MM + '-' + dd;
|
||
return [PastTime, nowTime];
|
||
},
|
||
getDate(time) {
|
||
const now = new Date(time);
|
||
const year = now.getFullYear(); //得到年份
|
||
let month = now.getMonth(); //得到月份
|
||
let date = now.getDate(); //得到日期
|
||
month = month + 1;
|
||
month = month.toString().padStart(2, '0');
|
||
date = date.toString().padStart(2, '0');
|
||
return `${year}-${month}-${date}`;
|
||
},
|
||
changeTime() {
|
||
this.queryForm.start = this.getDate(this.queryForm.time[0]);
|
||
this.queryForm.end = this.getDate(this.queryForm.time[1]);
|
||
},
|
||
setDefaultTome() {
|
||
this.queryForm.time = this.getPastTime(1);
|
||
this.queryForm.start = this.getDate(this.queryForm.time[0]);
|
||
this.queryForm.end = this.getDate(this.queryForm.time[1]);
|
||
},
|
||
//获取项目
|
||
async getProjectData() {
|
||
const params = {
|
||
size: 100,
|
||
page: 1,
|
||
};
|
||
const { data } = await getList(params);
|
||
this.projectData = data.items;
|
||
this.queryForm.projectId = this.projectData[0].id;
|
||
},
|
||
//项目下拉触发
|
||
changeProject() {
|
||
this.getTownsByProject();
|
||
},
|
||
//街道
|
||
async getTownsByProject() {
|
||
const param = {
|
||
projectId: this.queryForm.projectId,
|
||
};
|
||
const { data } = await getTownsByProject(param);
|
||
this.townData = data;
|
||
},
|
||
//街道选择
|
||
changeTown() {
|
||
this.getCommunitiesByTown();
|
||
},
|
||
//社区
|
||
async getCommunitiesByTown() {
|
||
const param = {
|
||
townCode: this.queryForm.townCode,
|
||
};
|
||
const { data } = await getCommunitiesByTown(param);
|
||
this.Communities = data;
|
||
},
|
||
//数据
|
||
async fetchData() {
|
||
this.listLoading = true;
|
||
const { data } = await weeklyReport(this.queryForm);
|
||
this.reportData = data.items;
|
||
this.total = data.total;
|
||
setTimeout(() => {
|
||
this.listLoading = false;
|
||
}, 500);
|
||
},
|
||
search() {
|
||
this.fetchData();
|
||
},
|
||
handleAdd() {
|
||
this.$refs['edit'].showEdit();
|
||
},
|
||
handleEdit(row) {
|
||
this.$refs['edit'].showEdit(row);
|
||
},
|
||
handleQuery() {
|
||
this.queryForm.page = 1;
|
||
this.fetchData();
|
||
},
|
||
handleSizeChange(val) {
|
||
this.queryForm.size = val;
|
||
this.fetchData();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.queryForm.page = val;
|
||
this.fetchData();
|
||
},
|
||
handleDelete(row) {
|
||
// let that = this
|
||
if (row.id) {
|
||
this.$confirm('你确定要删除当前项吗?', '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功',
|
||
});
|
||
// const { msg } = doDelete({ groupId: row.id })
|
||
// this.$message({
|
||
// type: 'success',
|
||
// message: msg == undefined ? '删除成功' : msg,
|
||
// })
|
||
// setTimeout(function () {
|
||
// that.fetchData()
|
||
// }, 1000)
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除',
|
||
});
|
||
});
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.manage-container {
|
||
width: 100%;
|
||
.vab-query-form {
|
||
margin-bottom: 30px;
|
||
.el-input {
|
||
width: 180px;
|
||
margin-right: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.el-submenu__title:hover {
|
||
background-color: rgba(#1890ff, 0.085) !important;
|
||
color: hsla(208, 100%, 55%, 0.95) !important;
|
||
}
|
||
</style>
|