yuanling-app/pages/poleDetail/index.vue

<template>
	<view class="container" :id="poleNumber">
		<!-- 顶部状态区 -->
		<view class="header">
			<view class="header-left">
				<text class="title">路灯编号: {{poleInfo.light_num}}</text>
				<view class="status-tag">
					<view class="status-dot"></view>
					<text class="status-text">在线运行中</text>
				</view>
			</view>
			<uni-icons type="refresh" size="24" color="#666" @click="refreshData" />
		</view>
		<!-- 核心数据展示区 -->
		<view class="data-cards">
			<view class="data-card">
				<view class="card-header">
					<uni-icons type="lightning" size="24" color="#4080FF" />
					<text class="card-title">电压</text>
				</view>
				<view class="card-value">
					<text class="value">{{poleInfo.voltage.toFixed(2)}}</text>
					<text class="unit">V</text>
				</view>
			</view>
			<view class="data-card">
				<view class="card-header">
					<uni-icons type="settings" size="24" color="#4080FF" />
					<text class="card-title">电流</text>
				</view>
				<view class="card-value">
					<text class="value">{{poleInfo.current.toFixed(2)}}</text>
					<text class="unit">A</text>
				</view>
			</view>
			<view class="data-card">
				<view class="card-header">
					<uni-icons type="star" size="24" color="#4080FF" />
					<text class="card-title">功率</text>
				</view>
				<view class="card-value">
					<text class="value">{{poleInfo.power.toFixed(2)}}</text>
					<text class="unit">kW</text>
				</view>
			</view>
		</view>
		<!-- 历史数据表格 -->
		<!-- <view class="table-section">
			<view class="table-header">
				<text class="table-title">历史数据记录</text>
				<view class="filter-section">
					<picker mode="selector" :range="timeRanges" :value="selectedTimeRange" @change="onTimeRangeChange">
						<view class="date-picker">
							<text>{{ timeRanges[selectedTimeRange] }}</text>
							<uni-icons type="calendar" size="20" color="#666" />
						</view>
					</picker>
				</view>
			</view>
			<view class="table">
				<view class="table-head">
					<view class="th">时间</view>
					<view class="th">电压(V)</view>
					<view class="th">电流(A)</view>
					<view class="th">功率(W)</view>
				</view>
				<view class="table-body">
					<view class="tr" v-for="(item, index) in displayData" :key="index">
						<view class="td">{{item.time}}</view>
						<view class="td">{{item.voltage}}</view>
						<view class="td">{{item.current}}</view>
						<view class="td">{{item.power}}</view>
					</view>
				</view>
				<view class="pagination">
					<uni-button size="mini" :disabled="currentPage <= 1" @click="prevPage">上一页</uni-button>
					<text class="page-info">{{ currentPage }}/{{ totalPages }}</text>
					<uni-button size="mini" :disabled="currentPage >= totalPages" @click="nextPage">下一页</uni-button>
				</view>
			</view>
		</view> -->
		<!-- 控制区域 -->
		<view class="control-section">
			<view class="control-title">
				<text>灯杆控制</text>
			</view>
			<view class="control-panel">
				<view :class="['control-button', isOn ? 'button-on' : 'button-off']" @click="toggleLight">
					<uni-icons :type="isOn ? 'checkbox-filled' : 'circle'" size="32" :color="isOn ? '#4CD964' : '#999'" />
					<text class="button-text">{{ isOn ? '已开启' : '已关闭' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue';
import {clientGet} from '../../utils/request';

const poleNumber = ref();
	const isOn = ref(false);
	const currentPage = ref(1);
	const pageSize = ref(5);
	const poleInfo = ref({
		light_num: '',
		brightness: 0,
		voltage: 0,
		current: 0,
		power: 0,
		onlineStatus: 0,
		light_total_time: 0,
		power_quantity: 0
	});
	const timeRanges = ['最近1小时', '最近6小时', '最近12小时', '最近24小时'];
	const selectedTimeRange = ref(0);
	const historyData = ref([
		{ time: '10:00', voltage: 220, current: 2.5, power: 550 },
		{ time: '09:00', voltage: 218, current: 2.4, power: 523 },
		{ time: '08:00', voltage: 222, current: 2.6, power: 577 },
		{ time: '07:00', voltage: 221, current: 2.5, power: 553 },
		{ time: '06:00', voltage: 219, current: 2.3, power: 504 },
		{ time: '05:00', voltage: 220, current: 2.4, power: 528 },
		{ time: '04:00', voltage: 221, current: 2.5, power: 553 },
		{ time: '03:00', voltage: 219, current: 2.3, power: 504 },
		{ time: '02:00', voltage: 218, current: 2.4, power: 523 },
		{ time: '01:00', voltage: 220, current: 2.5, power: 550 }
	]);
	const filteredData = computed(() => {
		const hours = [1, 6, 12, 24][selectedTimeRange.value];
		return historyData.value.slice(0, hours);
	});
	const totalPages = computed(() => Math.ceil(filteredData.value.length / pageSize.value));
	const displayData = computed(() => {
		const start = (currentPage.value - 1) * pageSize.value;
		const end = start + pageSize.value;
		return filteredData.value.slice(start, end);
	});
	const prevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
		}
	};
	const nextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
		}
	};
	const onTimeRangeChange = (e : any) => {
		selectedTimeRange.value = e.detail.value;
		currentPage.value = 1; // 重置页码
	};
	const toggleLight = async () => {
		let op;
		if(isOn.value){
			op = false;
		}else{
			op = true;
		}
		const res = await turnLightOrTurnOff(poleNumber.value,op);
		if(res){
			isOn.value = !isOn.value;
		}
	};
	const refreshData = () => {
		// 刷新数据逻辑
	};

	// const getPoleStatusHistory = async () => {
	// 	const arr = [];
	// 	arr.push({
	// 		column: 'create_time',
	// 		type: 'orderByDesc'
	// 	})

	// 	const res = await clientGet("/pole/DgEquipmentStatus/findByPage", {
	// 		conditionJson: encodeURIComponent(JSON.stringify(arr)),
	// 		pageNum: 1,
	// 		pageSize: 5
	// 	})
	// 	if(res.code !== 200){
	// 		uni.showToast({
	// 			title:'请求数据失败',
	// 			duration:2000
	// 		})
	// 	}
	// }
	
	const turnLightOrTurnOff = async (poleNumber : string, isTurn : boolean) => {
		uni.showLoading({
			title:"正在操作..."
		})
		const res = await clientGet('/pole/instruct/issued/reportEnvironmentalData',{
				cmd: '6011',
				lightNums: poleNumber,
				packageId: '1050',
				brightness: (isTurn ? 100 : 0).toString()
			})
		uni.hideLoading();
		if ((res as any).code === 200) {
			uni.showToast({
				title: "操作成功",
				duration: 1000
			})
			return true;
		}
		return false;
	}

	const getPoleStatus = async (poleNumber : string) => {
		const res = await clientGet("/pole/instruct/issued/equipmentStatus", {
			cmd: '6012',
			lightNums: poleNumber,
			packageId: '1050'
		});
		return res;
	};

	const getCurrentPoleInfo = async () => {
		const res = await getPoleStatus(poleNumber.value);
		if (res.code !== 200) {
			uni.showToast({
				title: "请求数据失败",
				duration: 2000
			})
		}
		const data = JSON.parse(JSON.parse(res.data).params)
		if (data.length < 1) {
			uni.showToast({
				title: "请求数据失败",
				duration: 2000
			})
		}
		const p = data[0];
		poleInfo.value = p;
		isOn.value = poleInfo.value.brightness !== 0;
	}


	onMounted(() => {
		const r = uni.getStorageSync("poleNumber");
		if (!r) {
			uni.showToast({
				title: "当前查询失败",
				duration: 2000
			})
		}
		poleNumber.value = r;
		getCurrentPoleInfo();
		// getPoleStatusHistory();
	})
</script>
<style scoped>
	page {
		height: 100%;
	}

	.container {
		min-height: 100%;
		padding: 30rpx;
		background-color: #F5F7FA;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.header-left {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.status-tag {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.status-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #4CD964;
	}

	.status-text {
		font-size: 24rpx;
		color: #666;
	}

	.data-cards {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.data-card {
		flex: 1;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
	}

	.card-header {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		color: #666;
	}

	.card-value {
		display: flex;
		align-items: baseline;
	}

	.value {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}

	.unit {
		font-size: 24rpx;
		color: #999;
		margin-left: 8rpx;
	}

	.table-section {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		flex: 1;
	}

	.table-header {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.table-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.filter-section {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.date-picker {
		display: flex;
		align-items: center;
		gap: 10rpx;
		background-color: #F8F9FB;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: #666;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		padding: 30rpx 0;
		background-color: #FFFFFF;
	}

	.page-info {
		font-size: 28rpx;
		color: #666;
	}

	.table {
		width: 100%;
	}

	.table-head {
		display: flex;
		background-color: #F8F9FB;
		padding: 20rpx 0;
		border-radius: 12rpx 12rpx 0 0;
	}

	.table-body {
		border: 2rpx solid #F0F0F0;
		border-top: none;
		border-radius: 0 0 12rpx 12rpx;
	}

	.tr {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #F0F0F0;
	}

	.tr:last-child {
		border-bottom: none;
	}

	.th,
	.td {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.th {
		color: #666;
		font-weight: 500;
	}

	.td {
		color: #333;
	}

	.control-section {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.control-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 30rpx;
	}

	.control-panel {
		display: flex;
		justify-content: center;
	}

	.control-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
		padding: 40rpx;
		border-radius: 20rpx;
		background-color: #F8F9FB;
		transition: all 0.3s ease;
	}

	.button-on {
		background-color: rgba(76, 217, 100, 0.1);
	}

	.button-off {
		background-color: #F8F9FB;
	}

	.button-text {
		font-size: 28rpx;
		color: #666;
	}
</style>