|
|
@@ -0,0 +1,227 @@
|
|
|
+
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 天气控制 -->
|
|
|
+ <view class="weather-section">
|
|
|
+ <view
|
|
|
+ v-for="(weather, index) in weathers"
|
|
|
+ :key="index"
|
|
|
+ :class="['weather-item', { active: currentWeather === weather.type }]"
|
|
|
+ @click="handleWeatherChange(weather.type)"
|
|
|
+ >
|
|
|
+ <uni-icons :type="weather.icon" size="30" :color="currentWeather === weather.type ? '#ffffff' : '#333333'" />
|
|
|
+ <text class="weather-text">{{ weather.name }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 时区控制 -->
|
|
|
+ <view class="time-section">
|
|
|
+ <view
|
|
|
+ v-for="(time, index) in times"
|
|
|
+ :key="index"
|
|
|
+ :class="['time-item', { active: currentTime === time.type }]"
|
|
|
+ @click="handleTimeChange(time.type)"
|
|
|
+ >
|
|
|
+ <uni-icons :type="time.icon" size="24" :color="currentTime === time.type ? '#ffffff' : '#333333'" />
|
|
|
+ <text class="time-text">{{ time.name }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 模块控制 -->
|
|
|
+ <view class="module-section">
|
|
|
+ <view
|
|
|
+ v-for="(module, index) in modules"
|
|
|
+ :key="index"
|
|
|
+ class="module-item"
|
|
|
+ @click="handleModuleClick(module.type)"
|
|
|
+ >
|
|
|
+ <view class="module-icon">
|
|
|
+ <uni-icons :type="module.icon" size="36" color="#2979ff" />
|
|
|
+ </view>
|
|
|
+ <text class="module-name">{{ module.name }}</text>
|
|
|
+ <text class="module-status">{{ module.status }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="initialization">
|
|
|
+ <button type="primary">
|
|
|
+ 初始化选项
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref } from 'vue';
|
|
|
+
|
|
|
+// 天气类型
|
|
|
+type WeatherType = 'sunny' | 'foggy' | 'rainy' | 'snowy';
|
|
|
+const currentWeather = ref<WeatherType>('sunny');
|
|
|
+
|
|
|
+// 时间类型
|
|
|
+type TimeType = 'morning' | 'noon' | 'night';
|
|
|
+const currentTime = ref<TimeType>('morning');
|
|
|
+
|
|
|
+// 模块类型
|
|
|
+type ModuleType = 'overview' | 'security' | 'energy' | 'fire' | 'lamp' | 'passage';
|
|
|
+
|
|
|
+// 天气数据
|
|
|
+const weathers = [
|
|
|
+ { type: 'sunny', name: '晴天', icon: 'sun' },
|
|
|
+ { type: 'foggy', name: '雾天', icon: 'cloud' },
|
|
|
+ { type: 'rainy', name: '雨天', icon: 'rain' },
|
|
|
+ { type: 'snowy', name: '雪天', icon: 'snow' }
|
|
|
+];
|
|
|
+
|
|
|
+// 时间数据
|
|
|
+const times = [
|
|
|
+ { type: 'morning', name: '早上', icon: 'sun' },
|
|
|
+ { type: 'noon', name: '中午', icon: 'sun-filled' },
|
|
|
+ { type: 'night', name: '夜晚', icon: 'moon' }
|
|
|
+];
|
|
|
+
|
|
|
+// 模块数据
|
|
|
+const modules = [
|
|
|
+ { type: 'overview', name: '园区总览', icon: 'map', status: '运行正常' },
|
|
|
+ { type: 'security', name: '智慧安防', icon: 'contact', status: '无异常' },
|
|
|
+ { type: 'energy', name: '智慧能耗', icon: 'list', status: '节能运行' },
|
|
|
+ { type: 'fire', name: '智慧消防', icon: 'fire', status: '系统正常' },
|
|
|
+ { type: 'lamp', name: '智慧灯杆', icon: 'map-pin-ellipse', status: '照明正常' },
|
|
|
+ { type: 'passage', name: '智慧通行', icon: 'staff', status: '通行顺畅' }
|
|
|
+];
|
|
|
+
|
|
|
+// 处理天气变化
|
|
|
+const handleWeatherChange = (type: WeatherType) => {
|
|
|
+ currentWeather.value = type;
|
|
|
+};
|
|
|
+
|
|
|
+// 处理时间变化
|
|
|
+const handleTimeChange = (type: TimeType) => {
|
|
|
+ currentTime.value = type;
|
|
|
+};
|
|
|
+
|
|
|
+// 处理模块点击
|
|
|
+const handleModuleClick = (type: ModuleType) => {
|
|
|
+ console.log('点击模块:', type);
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+page {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.container {
|
|
|
+ min-height: 100%;
|
|
|
+ padding: 30rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item.active {
|
|
|
+ background-color: #2979ff;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-text {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+
|
|
|
+.weather-item.active .weather-text {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.time-section {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.time-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 40rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ transition: all 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.time-item.active {
|
|
|
+ background-color: #2979ff;
|
|
|
+}
|
|
|
+
|
|
|
+.time-text {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+
|
|
|
+.time-item.active .time-text {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.module-section {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.module-item {
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ transition: transform 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+.module-item:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+}
|
|
|
+
|
|
|
+.module-icon {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.module-name {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.module-status {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+
|
|
|
+.initialization{
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
丁烨烨
