|
|
@@ -1,227 +1,216 @@
|
|
|
-
|
|
|
<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 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>
|
|
|
- </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);
|
|
|
-};
|
|
|
+ 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>
|
|
|
-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>
|
|
|
-
|
|
|
+ :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>
|
丁烨烨
