wanzai_school_app/pages/energy/energy.vue

<template>
	<view class="container">
		<!-- 水电表统计区域 -->
		<view class="box">
			<view class="box_title">水电表统计</view>

			<!-- 水表区域 -->
			<view class="box_info">
				<view class="info_title">水表</view>
				<view class="info_day">
					<view class="top">
						{{ waterDay }}
						<view class="text">吨</view>
					</view>
					<view class="bottom">近24小时</view>
				</view>
				<view class="info_month">
					<view class="top">
						{{ waterMonth }}
						<view class="text">吨</view>
					</view>
					<view class="bottom">近30天</view>
				</view>
				<view class="info_year">
					<view class="top">
						{{ waterYear }}
						<view class="text">吨</view>
					</view>
					<view class="bottom">近1年</view>
				</view>
			</view>

			<!-- 电表区域 -->
			<view class="box_info">
				<view class="info_title">电表</view>
				<view class="info_day">
					<view class="top">
						{{ elcDay }}
						<view class="text">度</view>
					</view>
					<view class="bottom">近24小时</view>
				</view>
				<view class="info_month">
					<view class="top">
						{{ elcMonth }}
						<view class="text">度</view>
					</view>
					<view class="bottom">近30天</view>
				</view>
				<view class="info_year">
					<view class="top">
						{{ elcYear }}
						<view class="text">度</view>
					</view>
					<view class="bottom">近1年</view>
				</view>
			</view>
		</view>

		<!-- 区域统计图表区域 -->
		<view class="chart">
			<view class="chart_title">区域统计</view>

			<!-- 切换区域 -->
			<view class="chart_switch">
				<view class="switch_box" :class="{ switch_active: activeIndex == 1 }" @click="switchChange(1)">水</view>
				<view class="switch_box" :class="{ switch_active: activeIndex == 2 }" @click="switchChange(2)">电</view>
			</view>

			<!-- 图表区域 -->
			<view class="chart_box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
		</view>

		<!-- 区域能耗统计表格区域 -->
		<view class="form">
			<view class="form_title">区域能耗统计</view>

			<!-- 日期选择区域 -->
			<view class="form_time" :class="{ active: time_area }" @click="handleOpen">
				{{ time_area ? time_area : '请选择月份' }}
				<view v-if="time_area" @click.stop="handleClose">
					<uni-icons type="close" size="20" color="#808080"></uni-icons>
				</view>
				<image class="time_img" src="/static/images/time.png" mode="aspectFill"></image>
				<uv-datetime-picker ref="datetimePicker" :value="Date.now()" mode="year-month" @confirm="handleConfirm"></uv-datetime-picker>
			</view>

			<!-- 表格区域 -->
			<view class="form_table">
				<uni-table ref="table" border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="1" align="center">序号</uni-th>
						<uni-th width="1" align="center">电(kw/h)</uni-th>
						<uni-th width="1" align="center">水(L)</uni-th>
						<uni-th width="1" align="center">&nbsp;楼栋&nbsp;</uni-th>
						<uni-th width="1" align="center">日期</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData_area" :key="item.id">
						<uni-td align="center">
							<view class="td">{{ index + 1 }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.eNum || 0 }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.wNum || 0 }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.name }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.date }}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<!-- 分页器区域 -->
			<view class="pagination">
				<uni-pagination show-icon pageSize="4" :total="total_area" :current="currentPage_area" @change="changePage_area"></uni-pagination>
			</view>
		</view>

		<!-- 实时抄表表格区域 -->
		<view class="form">
			<view class="form_title">实时抄表</view>

			<!-- 筛选区域 -->
			<view class="form_select">
				<!-- 时间选择区域 -->
				<view class="select_time" :class="{ active: time_now }" @click="handleOpen_now">
					{{ time_now ? time_now : '请选择日期' }}
					<view v-if="time_now" @click.stop="handleClose_now">
						<uni-icons type="close" size="20" color="#808080"></uni-icons>
					</view>
					<image class="time_img" src="/static/images/time.png" mode="aspectFill"></image>
					<uv-datetime-picker ref="datetimePicker_now" :value="Date.now()" mode="date" @confirm="handleConfirm_now"></uv-datetime-picker>
				</view>

				<view class="select_box">
					<view class="box_item" :class="{ active: activeIndex_now == 0 }" @click="switchChange_now(0)">水</view>
					<view class="box_item" :class="{ active: activeIndex_now == 1 }" @click="switchChange_now(1)">电</view>
				</view>
			</view>

			<!-- 表格区域 -->
			<view class="form_table">
				<uni-table ref="table" border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="1" align="center">序号</uni-th>
						<uni-th width="1" align="center">位置</uni-th>
						<uni-th width="1" align="center">{{ activeIndex_now == 0 ? '水表码数(吨)' : '电表码数(kw)' }}</uni-th>
						<uni-th width="1" align="center">&nbsp;楼栋&nbsp;</uni-th>
						<uni-th width="1" align="center">表号</uni-th>
						<uni-th width="1" align="center">时间</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData_now" :key="item.id">
						<uni-td align="center">
							<view class="td">{{ index + 1 }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.address }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.meterPowerRecord }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.buildAddress }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.meterNo }}</view>
						</uni-td>
						<uni-td align="center">
							<view class="td">{{ item.createTime }}</view>
						</uni-td>
					</uni-tr>
				</uni-table>
			</view>

			<!-- 分页器区域 -->
			<view class="pagination">
				<uni-pagination show-icon pageSize="4" :total="total_now" :current="currentPage_now" @change="changePage_now"></uni-pagination>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { myRequest } from '@/utils/api.js'
import { decryptDes } from '@/utils/des.js'
import dayjs from 'dayjs'

// 水-日
const waterDay = ref()
// 水-月
const waterMonth = ref()
// 水-年
const waterYear = ref()

// 电-日
const elcDay = ref()
// 电-日
const elcMonth = ref()
// 电-日
const elcYear = ref()

// 图表激活索引
const activeIndex = ref(1)
// 图表配置
const opts = ref({})
// 图表数据
const chartData = ref({})
// 图表Y轴数据
const categories = ref([])
// 图表地点数据
const seriesData = ref([
	{
		name: '',
		data: []
	},
	{
		name: '',
		data: []
	},
	{
		name: '',
		data: []
	}
])

// 区域能耗筛选时间组件DOM
const datetimePicker = ref()
// 区域能耗筛选时间
const time_area = ref('')
// 区域能耗表格数据总条数
const total_area = ref(0)
// 区域能耗表格当前页
const currentPage_area = ref(1)
// 区域能耗表格数据
const tableData_area = ref([])

// 实时抄表筛选时间组件DOM
const datetimePicker_now = ref()
// 实时抄表筛选时间
const time_now = ref('')
// 实时抄表当前激活索引
const activeIndex_now = ref(0)
// 实时抄表表格数据总条数
const total_now = ref(0)
// 实时抄表表格当前页
const currentPage_now = ref(1)
// 实时抄表表格数据
const tableData_now = ref([])

onLoad(() => {
	// 获取水电能耗统计数据
	getData_waterAndEle()
	// 获取图表数据
	getData_chart()
	// 获取区域能耗统计表格数据
	getData_area()
	// 获取实时抄表数据
	getData_now()
})

// 获取水电能耗统计数据
const getData_waterAndEle = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/waterAndElectricityStatistics'
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	waterDay.value = result.waterDay
	waterMonth.value = result.waterMonth
	waterYear.value = result.waterYear

	elcDay.value = result.elcDay
	elcMonth.value = result.elcMonth
	elcYear.value = result.elcYear
}

// 获取图表数据
const getData_chart = async () => {
	const res = await myRequest({
		url: '/wanzai/api/driver/getEnergyMonth',
		data: {
			type: activeIndex.value == 1 ? 0 : 1
		}
	})
	// console.log(res)

	categories.value = res.data.map((ele) => ele.month.slice(5, 7) + '月')

	seriesData.value[0].name = res.data[0].data[0].name
	res.data.forEach((ele) => {
		ele.data.forEach((item) => {
			if (item.name == seriesData.value[0].name) {
				seriesData.value[0].data.push(item.num)
			}
		})
	})

	seriesData.value[1].name = res.data[0].data[1].name
	res.data.forEach((ele) => {
		ele.data.forEach((item) => {
			if (item.name == seriesData.value[1].name) {
				seriesData.value[1].data.push(item.num)
			}
		})
	})

	seriesData.value[2].name = res.data[0].data[2].name
	res.data.forEach((ele) => {
		ele.data.forEach((item) => {
			if (item.name == seriesData.value[2].name) {
				seriesData.value[2].data.push(item.num)
			}
		})
	})

	// console.log(seriesData.value)

	// 初始化图表
	initChart()
}
// 初始化图表
const initChart = () => {
	opts.value = {
		color: ['#3A4DE9', '#00BAAD', '#FF8D1A'],
		padding: [25, 15, 0, 5],
		enableScroll: false,
		dataLabel: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			showTitle: true,
			gridType: 'dash',
			data: [
				{
					min: 0,
					title: activeIndex.value == 1 ? '吨' : '度',
					titleOffsetY: -10
				}
			]
		},
		extra: {
			column: {
				type: 'group',
				width: 10,
				activeBgColor: '#000000',
				activeBgOpacity: 0.08
			}
		}
	}

	let res = {
		categories: categories.value,
		series: seriesData.value
	}

	chartData.value = JSON.parse(JSON.stringify(res))
}
// 水电图表切换回调
const switchChange = (v) => {
	activeIndex.value = v
	seriesData.value[0].data = []
	seriesData.value[1].data = []
	seriesData.value[2].data = []
	getData_chart()
}

// 获取区域能耗统计表格数据
const getData_area = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/getAppMeterMonthPage',
		data: {
			currentPage: currentPage_area.value,
			pageCount: 4,
			date: time_area.value
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)

	total_area.value = result.total
	tableData_area.value = result.list
}
// 区域能耗统计时间组件打开回调
const handleOpen = () => {
	datetimePicker.value.open()
}
// 区域能耗统计时间组件关闭图标回调
const handleClose = () => {
	time_area.value = ''
	currentPage_area.value = 1
	getData_area()
}
// 区域能耗统计时间组件确定回调
const handleConfirm = (e) => {
	// console.log(e)
	time_area.value = dayjs(e.value).format('YYYY-MM')
	currentPage_area.value = 1
	getData_area()
}
// 区域能耗统计表格切换当前页回调
const changePage_area = (e) => {
	currentPage_area.value = e.current
	getData_area()
}

// 获取实时抄表数据
const getData_now = async () => {
	const res = await myRequest({
		url: '/wanzai/api/wechat/getAppMeterDayPage',
		data: {
			currentPage: currentPage_now.value,
			pageCount: 4,
			date: time_now.value,
			type: activeIndex_now.value
		}
	})
	// console.log(res)
	const result = JSON.parse(decryptDes(res.data))
	// console.log(result)
	total_now.value = result.total
	tableData_now.value = result.list
}
// 区域能耗统计时间组件打开回调
const handleOpen_now = () => {
	datetimePicker_now.value.open()
}
// 区域能耗统计时间组件关闭图标回调
const handleClose_now = () => {
	time_now.value = ''
	currentPage_now.value = 1
	getData_now()
}
// 区域能耗统计时间组件确定回调
const handleConfirm_now = (e) => {
	// console.log(e)
	time_now.value = dayjs(e.value).format('YYYY-MM-DD')
	currentPage_now.value = 1
	getData_now()
}
// 实时抄表切换类别回调
const switchChange_now = (v) => {
	activeIndex_now.value = v
	currentPage_now.value = 1
	time_now.value = ''
	getData_now()
}
// 实时抄表表格切换当前页回调
const changePage_now = (e) => {
	// console.log(e)
	currentPage_now.value = e.current
	getData_now()
}
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx;

	.box {
		margin-top: 30rpx;

		.box_title {
			margin-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.box_info {
			display: flex;
			margin-bottom: 50rpx;
			height: 80rpx;

			.info_title {
				width: 100rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-right: 2rpx solid #000;
			}

			.info_day,
			.info_month,
			.info_year {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 200rpx;
				height: 80rpx;
				text-align: center;

				.top {
					margin-top: -18rpx;
					width: 180rpx;
					font-size: 28rpx;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

					.text {
						display: inline-block;
						margin-top: -8rpx;
						margin-left: -8rpx;
						font-size: 22rpx;
						font-weight: 400;
					}
				}

				.bottom {
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #808080;
				}
			}
		}
	}

	.chart {
		.chart_title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.chart_switch {
			display: flex;
			justify-content: space-between;
			margin-top: 38rpx;
			width: 280rpx;

			.switch_box {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 128rpx;
				height: 66rpx;
				border-radius: 6rpx;
				font-size: 28rpx;
				color: #a6a6a6;
				background-color: #f2f2f2;
			}

			.switch_active {
				color: #000;
				border: 2rpx solid #0061ff;
				background-color: #e8f1ff;
			}
		}

		.chart_box {
			margin-top: 30rpx;
			width: 100%;
			height: 550rpx;
		}
	}

	.form {
		margin-top: 20rpx;
		padding-bottom: 40rpx;

		.form_title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.form_time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20rpx;
			margin-top: 38rpx;
			width: 280rpx;
			height: 66rpx;
			font-size: 28rpx;
			color: #a6a6a6;
			border-radius: 6rpx;
			border: 2rpx solid #999999;
			background-color: #f2f2f2;

			.time_img {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.active {
			color: #000;
		}

		.form_select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 38rpx;

			.select_time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				width: 280rpx;
				height: 66rpx;
				font-size: 28rpx;
				color: #a6a6a6;
				border-radius: 6rpx;
				border: 2rpx solid #999999;
				background-color: #f2f2f2;

				.time_img {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.select_box {
				display: flex;
				justify-content: space-between;
				width: 280rpx;

				.box_item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					height: 66rpx;
					border-radius: 6rpx;
					font-size: 28rpx;
					color: #a6a6a6;
					background-color: #f2f2f2;
				}

				.active {
					color: #000;
					border: 2rpx solid #0061ff;
					background-color: #e8f1ff;
				}
			}

			.active {
				color: #000;
			}
		}

		.form_table {
			margin-top: 40rpx;

			.td {
				font-size: 24rpx;
				white-space: nowrap;
			}
		}

		.pagination {
			margin-top: 25rpx;
		}
	}
}
</style>