yuanling-app/pages/VisualControl/index.vue

<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>