能源类型
This commit is contained in:
@@ -1,248 +1,271 @@
|
||||
<template>
|
||||
<div class="app-container energyOverlimitLog">
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
|
||||
<el-tabs v-model="activeName" @tab-click="toggleTab">
|
||||
<el-tab-pane label="自动抄表" name="auto"></el-tab-pane>
|
||||
<el-tab-pane label="手动抄表" name="manual"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 列表 -->
|
||||
<div v-if="activeName === 'auto'">
|
||||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps" :table-data="list"
|
||||
:max-height="tableH" />
|
||||
</div>
|
||||
<div v-if="activeName === 'manual'">
|
||||
<base-table :page="queryParams.pageNo" :limit="queryParams.pageSize" :table-props="tableProps2"
|
||||
:table-data="list2" :max-height="tableH" />
|
||||
</div>
|
||||
<pagination :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" :total="total"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
<div class="app-container energyOverlimitLog">
|
||||
<!-- 搜索工作栏 -->
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
@tab-click="toggleTab">
|
||||
<el-tab-pane
|
||||
label="自动抄表"
|
||||
name="auto"></el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="手动抄表"
|
||||
name="manual"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 列表 -->
|
||||
<div v-if="activeName === 'auto'">
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps"
|
||||
:table-data="list"
|
||||
:max-height="tableH" />
|
||||
</div>
|
||||
<div v-if="activeName === 'manual'">
|
||||
<base-table
|
||||
:page="queryParams.pageNo"
|
||||
:limit="queryParams.pageSize"
|
||||
:table-props="tableProps2"
|
||||
:table-data="list2"
|
||||
:max-height="tableH" />
|
||||
</div>
|
||||
<pagination
|
||||
:page.sync="queryParams.pageNo"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
:total="total"
|
||||
@pagination="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEnergyOverlimitLogPage } from "@/api/monitoring/energyOverlimitLog";
|
||||
import { getEnergyTypeListAll } from "@/api/base/energyType";
|
||||
import { publicFormatter } from '@/utils/dict'
|
||||
import { parseTime } from '@/utils/ruoyi'
|
||||
import { getEnergyOverlimitLogPage } from '@/api/monitoring/energyOverlimitLog';
|
||||
import { getEnergyTypeListAll } from '@/api/base/energyType';
|
||||
import { publicFormatter } from '@/utils/dict';
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'objName',
|
||||
label: '监控对象'
|
||||
},
|
||||
{
|
||||
prop: 'objCode',
|
||||
label: '对象编码'
|
||||
},
|
||||
{
|
||||
prop: 'energyType',
|
||||
label: '能源类型'
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '监控模式'
|
||||
},
|
||||
{
|
||||
prop: 'paramName',
|
||||
label: '监控参数'
|
||||
},
|
||||
{
|
||||
prop: 'limitType',
|
||||
label: '指标类型',
|
||||
filter: publicFormatter('monitor_index_type')
|
||||
},
|
||||
{
|
||||
prop: 'realityValue',
|
||||
label: '实际值'
|
||||
},
|
||||
{
|
||||
prop: 'limitValue',
|
||||
label: '阈值'
|
||||
},
|
||||
{
|
||||
prop: 'overValue',
|
||||
label: '超出值'
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '提醒时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
}
|
||||
]
|
||||
{
|
||||
prop: 'objName',
|
||||
label: '监控对象',
|
||||
},
|
||||
{
|
||||
prop: 'objCode',
|
||||
label: '对象编码',
|
||||
},
|
||||
{
|
||||
prop: 'energyType',
|
||||
label: '能源类型',
|
||||
filter: publicFormatter('energy_type'),
|
||||
},
|
||||
{
|
||||
prop: 'type',
|
||||
label: '监控模式',
|
||||
},
|
||||
{
|
||||
prop: 'paramName',
|
||||
label: '监控参数',
|
||||
},
|
||||
{
|
||||
prop: 'limitType',
|
||||
label: '指标类型',
|
||||
filter: publicFormatter('monitor_index_type'),
|
||||
},
|
||||
{
|
||||
prop: 'realityValue',
|
||||
label: '实际值',
|
||||
},
|
||||
{
|
||||
prop: 'limitValue',
|
||||
label: '阈值',
|
||||
},
|
||||
{
|
||||
prop: 'overValue',
|
||||
label: '超出值',
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '提醒时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160,
|
||||
},
|
||||
];
|
||||
const tableProps2 = [
|
||||
{
|
||||
prop: 'energyType',
|
||||
label: '能源类型'
|
||||
},
|
||||
{
|
||||
prop: 'limitType',
|
||||
label: '指标类型',
|
||||
filter: publicFormatter('monitor_index_type')
|
||||
},
|
||||
{
|
||||
prop: 'realityValue',
|
||||
label: '实际值'
|
||||
},
|
||||
{
|
||||
prop: 'limitValue',
|
||||
label: '阈值'
|
||||
},
|
||||
{
|
||||
prop: 'overValue',
|
||||
label: '超出值'
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '提醒时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160
|
||||
}
|
||||
]
|
||||
{
|
||||
prop: 'energyType',
|
||||
label: '能源类型',
|
||||
filter: publicFormatter('energy_type'),
|
||||
},
|
||||
{
|
||||
prop: 'limitType',
|
||||
label: '指标类型',
|
||||
filter: publicFormatter('monitor_index_type'),
|
||||
},
|
||||
{
|
||||
prop: 'realityValue',
|
||||
label: '实际值',
|
||||
},
|
||||
{
|
||||
prop: 'limitValue',
|
||||
label: '阈值',
|
||||
},
|
||||
{
|
||||
prop: 'overValue',
|
||||
label: '超出值',
|
||||
},
|
||||
{
|
||||
prop: 'time',
|
||||
label: '提醒时间',
|
||||
filter: parseTime,
|
||||
minWidth: 160,
|
||||
},
|
||||
];
|
||||
export default {
|
||||
name: "EnergyOverlimitLog",
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '能源类型',
|
||||
selectOptions: [],
|
||||
param: 'energyTypeId'
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '指标类型',
|
||||
selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE),
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
param: 'indexType'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
activeName: 'auto',
|
||||
tableProps,
|
||||
tableProps2,
|
||||
tableH: this.tableHeight(260),
|
||||
total: 0,
|
||||
list: [],
|
||||
list2: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
energyTypeId: '',
|
||||
indexType: '',
|
||||
method: '1'
|
||||
},
|
||||
typeList: [
|
||||
{ id: 1, name: '合并' },
|
||||
{ id: 2, name: '详细' }
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260)
|
||||
})
|
||||
this.getList();
|
||||
this.getTypeList()
|
||||
},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.queryParams.energyTypeId = val.energyTypeId
|
||||
this.queryParams.indexType = val.indexType
|
||||
this.getList()
|
||||
},
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
getEnergyOverlimitLogPage(this.queryParams).then(response => {
|
||||
let arr = response.data.list || [];
|
||||
arr && arr.map((item) => {
|
||||
this.typeList.map((i) => {
|
||||
if (item.type === i.id) {
|
||||
item.type = i.name
|
||||
}
|
||||
})
|
||||
if (item.minValue && item.maxValue) {
|
||||
item.limitValue = item.minValue + '-' + item.maxValue
|
||||
} else if (item.minValue) {
|
||||
item.limitValue = '最小值' + item.minValue
|
||||
} else if (item.maxValue) {
|
||||
item.limitValue = '最大值' + item.maxValue
|
||||
} else {
|
||||
item.limitValue = ''
|
||||
}
|
||||
})
|
||||
if (this.queryParams.method === '1') {
|
||||
this.list = arr
|
||||
this.list2 = []
|
||||
} else {
|
||||
this.list2 = arr
|
||||
this.list1 = []
|
||||
}
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
getTypeList() {
|
||||
getEnergyTypeListAll().then((res) => {
|
||||
console.log(res)
|
||||
this.formConfig[0].selectOptions = res.data || []
|
||||
})
|
||||
},
|
||||
toggleTab() {
|
||||
if (this.activeName === 'auto') {
|
||||
this.queryParams.method = '1'
|
||||
} else {
|
||||
this.queryParams.method = '2'
|
||||
}
|
||||
this.queryParams.pageNo = 1
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
name: 'EnergyOverlimitLog',
|
||||
data() {
|
||||
return {
|
||||
formConfig: [
|
||||
{
|
||||
type: 'select',
|
||||
label: '能源类型',
|
||||
labelField: 'labelName',
|
||||
selectOptions: [],
|
||||
param: 'energyTypeId',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '指标类型',
|
||||
selectOptions: this.getDictDatas(this.DICT_TYPE.MONITOR_INDEX_TYPE),
|
||||
labelField: 'label',
|
||||
valueField: 'value',
|
||||
param: 'indexType',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '查询',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
activeName: 'auto',
|
||||
tableProps,
|
||||
tableProps2,
|
||||
tableH: this.tableHeight(260),
|
||||
total: 0,
|
||||
list: [],
|
||||
list2: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
energyTypeId: '',
|
||||
indexType: '',
|
||||
method: '1',
|
||||
},
|
||||
typeList: [
|
||||
{ id: 1, name: '合并' },
|
||||
{ id: 2, name: '详细' },
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = this.tableHeight(260);
|
||||
});
|
||||
this.getList();
|
||||
this.getTypeList();
|
||||
},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
this.queryParams.pageNo = 1;
|
||||
this.queryParams.energyTypeId = val.energyTypeId;
|
||||
this.queryParams.indexType = val.indexType;
|
||||
this.getList();
|
||||
},
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
getEnergyOverlimitLogPage(this.queryParams).then((response) => {
|
||||
let arr = response.data.list || [];
|
||||
arr &&
|
||||
arr.map((item) => {
|
||||
this.typeList.map((i) => {
|
||||
if (item.type === i.id) {
|
||||
item.type = i.name;
|
||||
}
|
||||
});
|
||||
if (item.minValue && item.maxValue) {
|
||||
item.limitValue = item.minValue + '-' + item.maxValue;
|
||||
} else if (item.minValue) {
|
||||
item.limitValue = '最小值' + item.minValue;
|
||||
} else if (item.maxValue) {
|
||||
item.limitValue = '最大值' + item.maxValue;
|
||||
} else {
|
||||
item.limitValue = '';
|
||||
}
|
||||
});
|
||||
if (this.queryParams.method === '1') {
|
||||
this.list = arr;
|
||||
this.list2 = [];
|
||||
} else {
|
||||
this.list2 = arr;
|
||||
this.list1 = [];
|
||||
}
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
getTypeList() {
|
||||
getEnergyTypeListAll().then((res) => {
|
||||
console.log(res);
|
||||
this.formConfig[0].selectOptions = res.data || [];
|
||||
});
|
||||
},
|
||||
toggleTab() {
|
||||
if (this.activeName === 'auto') {
|
||||
this.queryParams.method = '1';
|
||||
} else {
|
||||
this.queryParams.method = '2';
|
||||
}
|
||||
this.queryParams.pageNo = 1;
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.energyOverlimitLog {
|
||||
.el-tabs__nav::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #e4e7ed;
|
||||
}
|
||||
.el-tabs__nav::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #e4e7ed;
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
width: 0;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.el-tabs__item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.el-tabs__item:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.el-tabs__item:hover {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.el-tabs__item.is-active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.el-tabs__item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
.searchBarBox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.searchBarBox {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user