smartpark-front/src/views/equipment/warmRecord.vue

<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>