refactor(poleDetail): 重构灯杆详情页面

- 更新模板中的路灯编号和核心数据展示，使用动态绑定
- 移除历史数据表格相关代码
- 添加获取灯杆状态和控制灯杆的功能
- 优化样式，调整部分样式属性

pages/poleDetail/index.vue

@@ -1,388 +1,481 @@
 <template>
-    <view class="container" :id="poleNumber">
-        <!-- 顶部状态区 -->
-        <view class="header">
-            <view class="header-left">
-                <text class="title">路灯编号: LD-001</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">220</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">2.5</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">550</text>
-                    <text class="unit">W</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>
+	<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 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 = () => {
-    isOn.value = !isOn.value;
-};
-const refreshData = () => {
-    // 刷新数据逻辑
-};
-onMounted(()=>{
-	const r = uni.getStorageSync("poleNumber");
-	if(!r){
-		uni.showToast({
-			title:"当前查询失败",
-			duration:2000
+	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;
 	}
-	poleNumber.value = r;
-	console.log(poleNumber.value);
-})
+
+	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>    
+	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>