yudao-dev/src/views/energy/monitoring/energyOverlimitLog/index.vue

<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>
</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 tableHeightMixin from '@/mixins/lb/tableHeightMixin';
const tableProps = [
	{
		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: '能源类型',
		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',
	mixins: [tableHeightMixin],
	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,
			total: 0,
			list: [],
			list2: [],
			heightNum: 300,
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				energyTypeId: '',
				indexType: '',
				method: '1',
			},
			typeList: [
				{ id: 1, name: '合并' },
				{ id: 2, name: '详细' },
			],
		};
	},
	created() {
		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-wrap::after {
		width: 0;
	}

	.el-tabs__item {
		padding: 0 10px;
	}

	.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 {
		color: rgba(0, 0, 0, 0.45);
	}

	.searchBarBox {
		margin-bottom: 0;
	}
}
</style>