fix: 控制器界面功能优化。

src/components/other/index.vue

@@ -422,73 +422,50 @@
             :gutter="10"
             v-for="item in controlList"
             :key="item.id"
-            @click="setControl(item)"
+            class="controller-item"
           >
-            <nut-col :span="5" :style="{ height: '70px' }">
+            <!-- 控制器标题行 -->
-              <nut-row :gutter="5">
+            <nut-col :span="24">
-                <nut-col :span="24" class="tc">
+              <view class="controller-header">
-                  <view class="table-container">
+                <view class="controller-name">
-                    <view class="single-line" :style="{ marginBottom: '1px' }">
+                  {{ item.deviceName }}
-                      {{ item.deviceName }}
+                  <view class="error-tag" v-if="item.errorMessage">{{ item.errorMessage }}</view>
-                    </view>
+                </view>
-                    <view class="tagErr single-line" v-if="item.errorMessage">{{
+                <view class="controller-actions">
-                      item.errorMessage
+                  <view @click.stop="setParamsCtr(item.id)" class="param-setting-link">参数设置</view>
-                    }}</view>
+                </view>
-                  </view>
+              </view>
-                </nut-col>
-              </nut-row>
             </nut-col>
-            <nut-col :span="18" :style="{ height: '70px' }">
+            
-              <nut-row :gutter="5">
+            <!-- 开关列表 -->
-                <nut-col :span="6" class="tc">
+            <nut-col :span="24">
-                  <view
+              <view 
-                    ><img
+                class="switch-item"
-                      :src="switchRes(item.listSwitch, 1, 'img')"
+                v-for="switchItem in item.listSwitch" 
-                      class="img_size_def"
+                :key="switchItem.id"
-                  /></view>
+              >
-                  <view class="tc truncate">{{
+                <view class="switch-left">
-                    switchRes(item.listSwitch, 1, "switchName")
+                  <img :src="getSwitchIcon(switchItem)" class="switch-icon" />
-                  }}</view>
+                  <text class="switch-name">{{ switchItem.switchName }}</text>
-                </nut-col>
+                </view>
-                <nut-col :span="6" class="tc">
+                <view class="switch-right">
-                  <view
+                  <nut-switch
-                    ><img
+                    :model-value="switchItem.isOpen === 1"
-                      :src="switchRes(item.listSwitch, 2, 'img')"
+                    active-color="#04D98A"
-                      class="img_size_def"
+                    @change="(value, event) => setSwitchOpen({ value, event }, switchItem)"
-                  /></view>
+                  />
-                  <view class="tc truncate">{{
+                  <view @click.stop="setSwitch(switchItem.id, switchItem.switchName)" class="switch-setting-link">设置</view>
-                    switchRes(item.listSwitch, 2, "switchName")
+                </view>
-                  }}</view>
+              </view>
-                </nut-col>
-                <nut-col :span="6" class="tc">
-                  <view
-                    ><img
-                      :src="switchRes(item.listSwitch, 3, 'img')"
-                      class="img_size_def"
-                  /></view>
-                  <view class="tc truncate">{{
-                    switchRes(item.listSwitch, 3, "switchName")
-                  }}</view>
-                </nut-col>
-                <nut-col :span="6" class="tc">
-                  <view
-                    ><img
-                      :src="switchRes(item.listSwitch, 4, 'img')"
-                      class="img_size_def"
-                  /></view>
-                  <view class="tc truncate">{{
-                    switchRes(item.listSwitch, 4, "switchName")
-                  }}</view>
-                </nut-col>
-              </nut-row>
             </nut-col>
+            
             <nut-col :span="24">
               <nut-divider
                 :style="{
                   color: '#eee',
                   borderColor: '#eee',
-                  padding: '0 0 0 0px',
+                  padding: '0',
-                  margin: '0',
+                  margin: '10px 0',
                 }"
               />
             </nut-col>
@@ -1746,6 +1723,61 @@ function switchRes(list, index, type) {
     return "开关" + index;
   }
 }
+
+// 获取单个开关图标
+function getSwitchIcon(switchItem: any) {
+  const isLinkedCtrl = switchItem.isLinkedCtrl || 0;
+  const isTimingCtrl = switchItem.isTimingCtrl || 0;
+  const isOpen = switchItem.isOpen || 0;
+  const hasErrorCode = switchItem.hasErrorCode || 0;
+  
+  // 同时开启定时和联动
+  if (isTimingCtrl && isLinkedCtrl) {
+    if (!isOpen) {
+      return c4_n;
+    } else {
+      if (hasErrorCode) {
+        return c4_d;
+      } else {
+        return c4;
+      }
+    }
+  }
+  // 只开启联动
+  if (isLinkedCtrl) {
+    if (!isOpen) {
+      return c2_n;
+    } else {
+      if (hasErrorCode) {
+        return c2_d;
+      } else {
+        return c2;
+      }
+    }
+  }
+  // 只开启定时
+  if (isTimingCtrl) {
+    if (!isOpen) {
+      return c1_n;
+    } else {
+      if (hasErrorCode) {
+        return c1_d;
+      } else {
+        return c1;
+      }
+    }
+  }
+  // 普通开关
+  if (!isOpen) {
+    return c3_n;
+  } else {
+    if (hasErrorCode) {
+      return c3_d;
+    } else {
+      return c3;
+    }
+  }
+}
 // 控制器弹出层
 function setControl(item) {
   visControl.value = true;
@@ -2194,4 +2226,96 @@ defineExpose({
     }
   }
 }
+
+// 控制器区域样式
+.controller-item {
+  margin-bottom: 10px;
+  
+  .controller-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    
+    .controller-name {
+      font-size: 30px;
+      font-weight: 600;
+      color: #222;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      
+      .error-tag {
+        font-size: 24px;
+        font-weight: 400;
+        color: #bf290e;
+        background: rgba(191, 41, 14, 0.1);
+        padding: 4px 12px;
+        border-radius: 4px;
+      }
+    }
+    
+    .controller-actions {
+      .param-setting-link {
+        font-size: 28px;
+        color: #1589E9;
+        cursor: pointer;
+        transition: opacity 0.2s ease;
+        
+        &:active {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+  
+  .switch-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 15px 0;
+    border-bottom: 1px solid #f5f5f5;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    .switch-left {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      
+      .switch-icon {
+        width: 40px;
+        height: 40px;
+        flex-shrink: 0;
+      }
+      
+      .switch-name {
+        font-size: 28px;
+        color: #333;
+        font-weight: 500;
+      }
+    }
+    
+    .switch-right {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      
+      .switch-setting-link {
+        font-size: 28px;
+        color: #1589E9;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: opacity 0.2s ease;
+        
+        &:active {
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+}
 </style>