yuanling-app/pages/VisualControl/index.vue

<template>
	<view class="container">
		<!-- 天气控制 -->
		<view class="section weather-section">
			<view v-for="(weather, index) in weathers" :key="index"
				:class="['control-item', { active: currentWeather === weather.type }]"
				@click="handleControlChange('weather', weather.type)">
				<uni-icons :type="weather.icon" size="30"
					:color="currentWeather === weather.type ? activeTextColor : textColor" />
				<text class="control-text">{{ weather.name }}</text>
			</view>
		</view>

		<!-- 时区控制 -->
		<view class="section time-section">
			<view v-for="(time, index) in times" :key="index"
				:class="['control-item', { active: currentTime === time.type }]"
				@click="handleControlChange('time', time.type)">
				<uni-icons :type="time.icon" size="24"
					:color="currentTime === time.type ? activeTextColor : textColor" />
				<text class="control-text">{{ time.name }}</text>
			</view>
		</view>

		<!-- 模块控制 -->
		<view class="module-section">
			<view v-for="(module, index) in modules" :key="index" class="module-item"
				@click="handleControlChange('module', module.type)">
				<view class="module-icon">
					<uni-icons :type="module.icon" size="36" :color="iconColor" />
				</view>
				<text class="module-name">{{ module.name }}</text>
				<text class="module-status">{{ module.status }}</text>
			</view>
		</view>

		<view class="initialization">
			<button type="primary" @click="handleControlChange('module', 'BacktoOverview')">
				初始化选项
			</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { clientPut } from '../../utils/request';

	// 类型定义
	type WeatherType = 'WeatherSunny' | 'WeatherCloudy' | 'WeatherFoggy' | 'WeatherRain' | 'WeatherSnow';
	type TimeType = 'TimeMorning' | 'TimeNoon' | 'TimeNight' | 'TimeRealTime';
	type ModuleType = 'BacktoOverview' | 'OpenSmartSecurity' | 'OpenSmartEnergy' | 'OpenSmartFireControl' | 'OpenSmartLamp' | 'OpenSmartParking';

	// 响应式状态
	const currentWeather = ref<WeatherType>('WeatherSunny');
	const currentTime = ref<TimeType>('TimeMorning');

	// 样式常量
	const activeColor = '#2979ff';
	const activeTextColor = '#ffffff';
	const textColor = '#333333';
	const iconColor = '#2979ff';

	// 数据配置
	const weathers = [
		{ type: 'WeatherSunny', name: '晴天', icon: 'sun' },
		{ type: 'WeatherCloudy', name: '多云', icon: 'cloud' },
		{ type: 'WeatherFoggy', name: '雾天', icon: 'cloud' },
		{ type: 'WeatherRain', name: '雨天', icon: 'rain' },
		{ type: 'WeatherSnow', name: '雪天', icon: 'snow' }
	];

	const times = [
		{ type: 'TimeMorning', name: '早上', icon: 'sun' },
		{ type: 'TimeNoon', name: '中午', icon: 'sun-filled' },
		{ type: 'TimeNight', name: '夜晚', icon: 'moon' },
		{ type: 'TimeRealTime', name: '实时', icon: 'moon' }
	];

	const modules = [
		{ type: 'BacktoOverview', name: '园区总览', icon: 'map', status: '运行正常' },
		{ type: 'OpenSmartSecurity', name: '智慧安防', icon: 'contact', status: '无异常' },
		{ type: 'OpenSmartEnergy', name: '智慧能耗', icon: 'list', status: '节能运行' },
		{ type: 'OpenSmartFireControl', name: '智慧消防', icon: 'fire', status: '系统正常' },
		{ type: 'OpenSmartLamp', name: '智慧灯杆', icon: 'map-pin-ellipse', status: '照明正常' },
		{ type: 'OpenSmartParking', name: '智慧通行', icon: 'staff', status: '通行顺畅' }
	];

	// 统一处理控制项变化
	const handleControlChange = async (category : 'weather' | 'time' | 'module', type : string) => {
		try {
			// 更新本地状态
			if (category === 'weather') {
				currentWeather.value = type as WeatherType;
			} else if (category === 'time') {
				currentTime.value = type as TimeType;
			}
			uni.request({
				method: 'PUT',
				url: 'http://192.168.110.96:30010/remote/preset/RemoteControlPreset/function/' + type, //仅为示例，并非真实接口地址。
				data: {
					"Parameters": {},
					"GenerateTransaction": false
				},
				success: (res) => {
					console.log(1111)
				}
			});
			
			console.log(`${category} 控制请求成功:`, type);
		} catch (error) {
			console.error(`${category} 控制请求失败:`, error);
			// 可以在这里添加错误处理逻辑，例如恢复之前的状态
		}
	};
</script>

<style>
	:root {
		--section-bg: #ffffff;
		--active-bg: #2979ff;
		--text-main: #333333;
		--text-secondary: #666666;
		--section-radius: 16rpx;
		--section-spacing: 30rpx;
	}

	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		min-height: 100%;
		padding: var(--section-spacing);
	}

	/* 通用控制项样式 */
	.section {
		padding: 20rpx;
		background-color: var(--section-bg);
		border-radius: var(--section-radius);
		margin-bottom: var(--section-spacing);
		display: flex;
		justify-content: space-around;
	}

	.control-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		transition: all 0.3s;
	}

	.control-item.active {
		background-color: var(--active-bg);
		color: white;
	}

	.control-text {
		margin-top: 10rpx;
		font-size: 14px;
		color: var(--text-main);
	}

	.control-item.active .control-text {
		color: var(--active-text-color);
	}

	/* 模块控制样式 */
	.module-section {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.module-item {
		background-color: var(--section-bg);
		border-radius: var(--section-radius);
		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: var(--text-main);
		margin-bottom: 10rpx;
	}

	.module-status {
		font-size: 12px;
		color: var(--text-secondary);
	}

	.initialization {
		margin-top: 12px;
	}
</style>