From 476596814a6c7e67be0790a8160a57bf0479fdbb Mon Sep 17 00:00:00 2001
From: JayJiaJun <JayJiaJun@outlook.com>
Date: Thu, 24 Apr 2025 16:53:59 +0800
Subject: [PATCH] 4.24

---
 src/views/iot/device/running-status.vue | 146 +++++++++++++-----------
 1 file changed, 80 insertions(+), 66 deletions(-)

diff --git a/src/views/iot/device/running-status.vue b/src/views/iot/device/running-status.vue
index 611b266..911fd83 100644
--- a/src/views/iot/device/running-status.vue
+++ b/src/views/iot/device/running-status.vue
@@ -72,17 +72,22 @@
               </div>
             </div>
             <div v-if="item.datatype.type == 'integer'">
-              <div style="width: 80%; float: left">
+              <!-- <div style="width: 80%; float: left">
                 <el-slider v-model="item.shadow" :min="item.datatype.min" :max="item.datatype.max"
                   :step="item.datatype.step" :format-tooltip="(x) => x + ' ' + item.datatype.unit"
-                  :disabled="shadowUnEnable || item.isReadonly == 1"></el-slider>
-              </div>
-              <div style="width: 20%; float: left">
-                <el-button icon="el-icon-s-promotion" type="info" @click="mqttPublish(deviceInfo, item)"
-                  style="font-size: 16px; padding: 1px 8px; margin: 4px 0 0 10px; border-radius: 3px"
-                  :title="$t('device.running-status.866086-6')"
-                  v-if="!shadowUnEnable && item.isReadonly == 0"></el-button>
-              </div>
+                  :disabled="shadowUnEnable || item.isReadonly == 1"></el-slider> -->
+
+              <!-- </div> -->
+              <el-input v-model="item.shadow"
+                :placeholder="item.datatype.unit ? $t('device.running-status.866086-5', [item.datatype.unit]) : $t('device.running-status.866086-4')"
+                :disabled="shadowUnEnable || item.isReadonly == 1">
+                <el-button slot="append" icon="el-icon-s-promotion" @click="mqttPublish(deviceInfo, item)"
+                  style="font-size: 20px" :title="$t('device.running-status.866086-6')"
+                  v-if="!shadowUnEnable && item.isReadonly == 0">
+                </el-button>
+              </el-input>
+
+
             </div>
             <div v-if="item.datatype.type == 'object'">
               <el-descriptions :column="1" size="mini" border>
@@ -359,65 +364,75 @@
           </el-descriptions-item>
         </el-descriptions>
       </el-col>
-      <!-- 检测图表部分 -->
-      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="14">
-        <!-- 设备监测图表-->
-        <template v-if="deviceInfo.productName === '机械压力表' && deviceInfo.chartList && deviceInfo.chartList.length >= 2">
-          <!-- 机械压力表的监测图表 -->
-          <el-row style="background-color: #f5f7fa; padding: 20px 10px; border-radius: 15px;">
-            <div>
-              <el-form>
-                <!-- 第一项 -->
-                <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
-                  <div>
-                    <el-form-item style="flex: 1;">
-                      <template slot="label">
-                        <!-- 替换图标 -->
-                        <img src="../../../assets/press/压力.svg" style="width: 20px; height: 20px; margin-right: 5px;">
-                        <span style="font-size: 24px;">{{ deviceInfo.chartList[0].name }}</span>
-                      </template>
-                      <!-- 设置输入框的宽度 -->
-                      <el-input v-model="deviceInfo.chartList[0].value" readonly style="width: 150px;">
-                        <template slot="suffix">MP</template>
-                      </el-input>
-                    </el-form-item>
-                  </div>
-                </el-col>
 
-                <!-- 第二项 -->
-                <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
-                  <div>
-                    <el-form-item style="flex: 1;">
-                      <template slot="label">
-                        <img src="../../../assets/press/电池.svg" style="width: 20px; height: 20px; margin-right: 5px;">
-                        <span style="font-size: 24px;">{{ deviceInfo.chartList[1].name }}</span>
-                      </template>
-                      <el-input v-model="deviceInfo.chartList[1].value" readonly style="width: 150px;">
-                        <template slot="suffix">MV</template>
-                      </el-input>
-                    </el-form-item>
-                  </div>
-                </el-col>
-              </el-form>
-            </div>
-          </el-row>
-        </template>
-        <template v-else>
-          <!-- 原来的图表 -->
-          <el-row :gutter="20"
-            style="background-color: #f5f7fa; padding: 20px 10px 20px 10px; border-radius: 15px; margin-right: 5px"
-            v-if="deviceInfo.chartList.length > 0">
-            <el-col :xs="24" :sm="12" :md="12" :lg="24" :xl="8" v-for="(item, index) in deviceInfo.chartList"
-              :key="index">
-              <el-card shadow="hover" style="border-radius: 30px; margin-bottom: 20px">
-                <div ref="map" style="height: 230px; width: 185px; margin: 0 auto"></div>
-              </el-card>
-            </el-col>
-          </el-row>
-        </template>
+      <!-- 右侧列保持为空 -->
+      <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="14">
+        <!-- 这里可以放置其他内容 -->
       </el-col>
     </el-row>
 
+    <!-- 检测图表部分 -->
+    <div>
+      <template v-if="deviceInfo.productName === '机械压力表' && deviceInfo.chartList && deviceInfo.chartList.length >= 2">
+        <!-- 机械压力表的监测图表 - 保持和 descriptions 等宽 -->
+        <el-row :gutter="120">
+          <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
+            <el-row style="background-color: #f5f7fa; padding: 20px 10px; border-radius: 15px; margin-top: 20px;">
+              <div>
+                <el-form>
+                  <!-- 第一项 -->
+                  <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
+                    <div>
+                      <el-form-item style="flex: 1;">
+                        <template slot="label">
+                          <!-- 替换图标 -->
+                          <img src="../../../assets/press/压力.svg" style="width: 20px; height: 20px; margin-right: 5px;">
+                          <span style="font-size: 24px;">{{ deviceInfo.chartList[0].name }}</span>
+                        </template>
+                        <!-- 设置输入框的宽度 -->
+                        <el-input v-model="deviceInfo.chartList[0].value" readonly style="width: 150px;">
+                          <template slot="suffix">MP</template>
+                        </el-input>
+                      </el-form-item>
+                    </div>
+                  </el-col>
+
+                  <!-- 第二项 -->
+                  <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10">
+                    <div>
+                      <el-form-item style="flex: 1;">
+                        <template slot="label">
+                          <img src="../../../assets/press/电池.svg" style="width: 20px; height: 20px; margin-right: 5px;">
+                          <span style="font-size: 24px;">{{ deviceInfo.chartList[1].name }}</span>
+                        </template>
+                        <el-input v-model="deviceInfo.chartList[1].value" readonly style="width: 150px;">
+                          <template slot="suffix">MV</template>
+                        </el-input>
+                      </el-form-item>
+                    </div>
+                  </el-col>
+                </el-form>
+              </div>
+            </el-row>
+          </el-col>
+        </el-row>
+      </template>
+      <template v-else>
+        <!-- 其他产品的图表 - 独立宽度 -->
+        <div style="margin-top: 20px; padding-left: 20px;">
+          <div style="background-color: #f5f7fa; padding: 20px; border-radius: 15px; display: inline-block;"
+            v-if="deviceInfo.chartList.length > 0">
+            <div style="display: flex; flex-wrap: wrap; gap: 20px;">
+              <el-card v-for="(item, index) in deviceInfo.chartList" :key="index" shadow="hover"
+                style="border-radius: 30px;">
+                <div ref="map" style="height: 230px; width: 185px;"></div>
+              </el-card>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
     <!-- 添加或修改产品固件对话框 -->
     <el-dialog :title="$t('device.running-status.866086-10')" :visible.sync="openFirmware" width="600px" append-to-body>
       <div v-if="firmware == null" style="text-align: center; font-size: 16px">
@@ -452,7 +467,6 @@
         <el-button @click="cancel">{{ $t('cancel') }}</el-button>
       </div>
     </el-dialog>
-
   </div>
 </template>
 
@@ -702,7 +716,7 @@ export default {
         remoteCommand: command,
         identifier: model.id,
         modelName: model.name,
-        isShadow: device.status != 3,
+        isShadow: device.status = true,
         type: model.type,
       };
       serviceInvoke(data).then((response) => {