yuanling-app/pages/poleDetail/index.vue

<template>
    <view class="container" :id="id">
        <!-- 顶部状态区 -->
        <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>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
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 res = uni.getStorageSync("poleNumber");
	if(!res){
		uni.showToast({
			title:"当前查询失败",
			duration:2000
		})
	}
	console.log(res,12312213);
})
</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>