From ecce8628012b0d44a0cee4f40a8f5659374638bc Mon Sep 17 00:00:00 2001
From: 1 <1>
Date: Wed, 18 Jun 2025 10:17:18 +0800
Subject: [PATCH] =?UTF-8?q?mqtt=E6=8E=A5=E5=8F=A3=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E7=81=AD=E7=81=AB=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 MQTT接口.md                                |   15 +-
 src/views/iot/device/fire-extinguisher.vue | 1200 ++++++++++++++++++++
 2 files changed, 1214 insertions(+), 1 deletion(-)
 create mode 100644 src/views/iot/device/fire-extinguisher.vue

diff --git a/MQTT接口.md b/MQTT接口.md
index 3714cfa..9f87104 100644
--- a/MQTT接口.md
+++ b/MQTT接口.md
@@ -599,4 +599,17 @@ dpx0z9T75vMN4ZbdreEEHdHLPDxm2S7gFnQqsIk2Sj+rYUbfSNIFCCSCYdsZFe9q
 
 
 token 
-version=2022-05-01&res=userid%2F275606&et=1907391331&method=sha1&sign=TxfzLFdfzIPwCSw6e1P9tYh1udQ%3D
\ No newline at end of file
+version=2022-05-01&res=userid%2F275606&et=1907391331&method=sha1&sign=TxfzLFdfzIPwCSw6e1P9tYh1udQ%3D
+
+
+
+烟雾报警器上下线
+"msg":{"at":1750053759451,"login_type":10,"imei":"868256050028496","type":2,"dev_id":2449055250,"status":1},"msg_signature":"w1+ZPc5945gMVEW0JvXd2g==","nonce":"dB50qJHY"
+
+报警
+{"msg":{"at":1750055604955,"imei":"868256050028496","type":1,"ds_id":"30100_0_6501","value":"01","dev_id":2449055250},"msg_signature":"3LyPN+ynmmEolu1vW14y5w==","nonce":"fkadbTZ6"}
+
+
+
+2448209928   devid      灭火器的
+2443018742
\ No newline at end of file
diff --git a/src/views/iot/device/fire-extinguisher.vue b/src/views/iot/device/fire-extinguisher.vue
new file mode 100644
index 0000000..db7ac2f
--- /dev/null
+++ b/src/views/iot/device/fire-extinguisher.vue
@@ -0,0 +1,1200 @@
+<template>
+    <div class="running-status">
+        <el-row :gutter="90">
+            <el-col :xs="24" :sm="24" :md="24" :lg="14" :xl="10" class="status-col">
+                <el-descriptions :column="1" border>
+                    <!-- 命令下发 -->
+                    <el-descriptions-item :labelStyle="statusColor">
+                        <template slot="label">
+                            <i class="el-icon-s-promotion"></i>
+                            上报周期（小时）
+                        </template>
+                        <div class="command-send">
+                            <el-input v-model="commandValue" placeholder="请输入命令值"
+                                style="width: 200px; margin-right: 10px;">
+                            </el-input>
+                            <el-button type="primary" size="mini" @click="sendCommand">发送命令</el-button>
+                        </div>
+                    </el-descriptions-item>
+                    <!-- 设备模式-->
+                    <el-descriptions-item :labelStyle="statusColor">
+                        <template slot="label">
+                            <i class="el-icon-menu"></i>
+                            {{ $t('device.running-status.866086-0') }}
+                            <!-- 1111
+                            version=2022-05-01&res=userid%2F275606&et=1781156335&method=sha1&sign=3bG4IYhz0VAJrrqZtF4b1%2F8MwZw%3D -->
+
+                        </template>
+                        <span class="title">{{ title }}</span>
+                    </el-descriptions-item>
+                    <!-- 设备升级-->
+                    <el-descriptions-item :labelStyle="statusColor">
+                        <template slot="label">
+                            <svg-icon icon-class="ota" />
+                            {{ $t('device.running-status.866086-1') }}
+                        </template>
+                        <el-button type="primary" size="mini" :plain="true" @click="viewVersion()">{{
+                            $t('device.running-status.866086-44')
+                            }}</el-button>
+                    </el-descriptions-item>
+
+                    <!-- 设备物模型-->
+                    <el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels" :key="index"
+                        :labelStyle="statusColor">
+                        <template slot="label">
+                            <i class="el-icon-open"></i>
+                            {{ item.name }}
+                        </template>
+                        <div v-if="item.datatype.type == 'bool'">
+                            <el-switch v-model="item.shadow" @change="mqttPublish(deviceInfo, item)" active-text=""
+                                inactive-text="" active-value="1" inactive-value="0" style="min-width: 100px"
+                                :disabled="shadowUnEnable || item.isReadonly == 1" />
+                        </div>
+                        <div v-if="item.datatype.type == 'enum'" class="emum-wrap">
+                            <div v-if="item.datatype.showWay && item.datatype.showWay == 'button'">
+                                <el-button class="btn" size="mini"
+                                    @click="enumButtonClick(deviceInfo, item, subItem.value)"
+                                    v-for="subItem in item.datatype.enumList" :key="subItem.value"
+                                    :disabled="shadowUnEnable || item.isReadonly == 1"
+                                    :class="{ 'is-active-btn': subItem.value === item.shadow }">
+                                    {{ subItem.text }}
+                                </el-button>
+                            </div>
+                            <el-select v-else v-model="item.shadow" :placeholder="$t('device.running-status.866086-3')"
+                                @change="mqttPublish(deviceInfo, item)"
+                                :disabled="shadowUnEnable || item.isReadonly == 1">
+                                <el-option v-for="subItem in item.datatype.enumList" :key="subItem.value"
+                                    :label="subItem.text" :value="subItem.value" />
+                            </el-select>
+                        </div>
+                        <div v-if="item.datatype.type == 'string'">
+                            <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 == 'decimal'">
+                            <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: 2px 0 0 5px; border-radius: 3px"
+                                    :title="$t('device.running-status.866086-6')"
+                                    v-if="!shadowUnEnable && item.isReadonly == 0"></el-button>
+                            </div>
+                        </div>
+                        <div v-if="item.datatype.type == 'integer'">
+                            <div style="width: 80%; float: left">
+                                <el-slider style="margin-left: 10px" 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>
+                        </div>
+                        <div v-if="item.datatype.type == 'object'">
+                            <el-descriptions :column="1" size="mini" border>
+                                <el-descriptions-item v-for="(param, index) in item.datatype.params" :key="index"
+                                    :label="param.name">
+                                    <div v-if="param.datatype.type == 'bool'">
+                                        <el-switch v-model="param.shadow" @change="mqttPublish(deviceInfo, param)"
+                                            active-text="" inactive-text="" active-value="1" inactive-value="0"
+                                            style="min-width: 100px"
+                                            :disabled="shadowUnEnable || param.isReadonly == 1" />
+                                    </div>
+                                    <div v-if="param.datatype.type == 'enum'">
+                                        <div v-if="param.datatype.showWay && param.datatype.showWay == 'button'">
+                                            <el-button style="margin: 5px" size="mini"
+                                                @click="enumButtonClick(deviceInfo, param, subItem.value)"
+                                                v-for="subItem in param.datatype.enumList" :key="subItem.value"
+                                                :disabled="shadowUnEnable || param.isReadonly == 1"
+                                                :class="{ 'is-active-btn': subItem.value === param.shadow }">
+                                                {{ subItem.text }}
+                                            </el-button>
+                                        </div>
+                                        <el-select size="small" v-else v-model="param.shadow"
+                                            :placeholder="$t('device.running-status.866086-3')"
+                                            @change="mqttPublish(deviceInfo, param)"
+                                            :disabled="shadowUnEnable || param.isReadonly == 1">
+                                            <el-option v-for="subItem in param.datatype.enumList" :key="subItem.value"
+                                                :label="subItem.text" :value="subItem.value" />
+                                        </el-select>
+                                    </div>
+                                    <div v-if="param.datatype.type == 'string'">
+                                        <el-input v-model="param.shadow"
+                                            :placeholder="$t('device.running-status.866086-4')"
+                                            :disabled="shadowUnEnable || param.isReadonly == 1">
+                                            <el-button slot="append" icon="el-icon-s-promotion"
+                                                @click="mqttPublish(deviceInfo, param)" style="font-size: 20px"
+                                                :title="$t('device.running-status.866086-6')"
+                                                v-if="!shadowUnEnable && param.isReadonly == 0"></el-button>
+                                        </el-input>
+                                    </div>
+                                    <div v-if="param.datatype.type == 'decimal'">
+                                        <el-input v-model="param.shadow" type="number"
+                                            :placeholder="$t('device.running-status.866086-7')"
+                                            :disabled="shadowUnEnable || param.isReadonly == 1">
+                                            <el-button slot="append" icon="el-icon-s-promotion"
+                                                @click="mqttPublish(deviceInfo, param)" style="font-size: 20px"
+                                                :title="$t('device.running-status.866086-6')"
+                                                v-if="!shadowUnEnable && param.isReadonly == 0"></el-button>
+                                        </el-input>
+                                    </div>
+                                    <div v-if="param.datatype.type == 'integer'">
+                                        <el-input v-model="param.shadow" type="integer"
+                                            :placeholder="$t('device.running-status.866086-8')"
+                                            :disabled="shadowUnEnable || param.isReadonly == 1">
+                                            <el-button slot="append" icon="el-icon-s-promotion"
+                                                @click="mqttPublish(deviceInfo, param)" style="font-size: 20px"
+                                                :title="$t('device.running-status.866086-6')"
+                                                v-if="!shadowUnEnable && param.isReadonly == 0"></el-button>
+                                        </el-input>
+                                    </div>
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </div>
+                        <div v-if="item.datatype.type == 'array'">
+                            <el-descriptions :column="1" size="mini" border v-if="item.datatype.arrayType != 'object'">
+                                <el-descriptions-item v-for="(model, index) in item.datatype.arrayModel" :key="index"
+                                    :label="item.name + (index + 1)">
+                                    <div v-if="item.datatype.arrayType == 'string'">
+                                        <el-input :placeholder="$t('device.running-status.866086-4')" size="mini"
+                                            v-model="model.shadow" :disabled="shadowUnEnable || item.isReadonly == 1"
+                                            @input="arrayItemChange($event, item)">
+                                            <el-button slot="append" icon="el-icon-s-promotion"
+                                                @click="mqttPublish(deviceInfo, model)" 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.arrayType == 'decimal'">
+                                        <el-input type="number" :placeholder="$t('device.running-status.866086-7')"
+                                            size="mini" v-model="model.shadow"
+                                            :disabled="shadowUnEnable || item.isReadonly == 1"
+                                            @input="arrayItemChange($event, item)">
+                                            <el-button slot="append" icon="el-icon-s-promotion"
+                                                @click="mqttPublish(deviceInfo, model)" 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.arrayType == 'integer'">
+                                        <el-input type="integer" :placeholder="$t('device.running-status.866086-8')"
+                                            size="mini" v-model="model.shadow"
+                                            :disabled="shadowUnEnable || item.isReadonly == 1"
+                                            @input="arrayItemChange($event, item)">
+                                            <el-button slot="append" icon="el-icon-s-promotion"
+                                                @click="mqttPublish(deviceInfo, model)" style="font-size: 20px"
+                                                :title="$t('device.running-status.866086-6')"
+                                                v-if="!shadowUnEnable || item.isReadonly == 0"></el-button>
+                                        </el-input>
+                                    </div>
+                                </el-descriptions-item>
+                            </el-descriptions>
+                            <el-collapse v-if="item.datatype.arrayType == 'object'">
+                                <el-collapse-item v-for="(arrayParam, index) in item.datatype.arrayParams" :key="index">
+                                    <template slot="title">
+                                        <span style="color: #666">
+                                            <i class="el-icon-tickets"></i>
+                                            {{ item.name + (index + 1) }}
+                                        </span>
+                                    </template>
+                                    <el-descriptions :column="1" size="mini" border>
+                                        <el-descriptions-item v-for="(param, index) in arrayParam" :key="index"
+                                            :label="param.name">
+                                            <div v-if="param.datatype.type == 'bool'">
+                                                <el-switch v-model="param.shadow"
+                                                    @change="mqttPublish(deviceInfo, param)" active-text=""
+                                                    inactive-text="" active-value="1" inactive-value="0"
+                                                    style="min-width: 100px"
+                                                    :disabled="shadowUnEnable || param.isReadonly == 1" />
+                                            </div>
+                                            <div v-if="param.datatype.type == 'enum'">
+                                                <div
+                                                    v-if="param.datatype.showWay && param.datatype.showWay == 'button'">
+                                                    <el-button style="margin: 5px" size="mini"
+                                                        @click="enumButtonClick(deviceInfo, param, subItem.value)"
+                                                        v-for="subItem in param.datatype.enumList" :key="subItem.value"
+                                                        :disabled="shadowUnEnable || param.isReadonly == 1"
+                                                        :class="{ 'is-active-btn': subItem.value === param.shadow }">
+                                                        {{ subItem.text }}
+                                                    </el-button>
+                                                </div>
+                                                <el-select v-else v-model="param.shadow"
+                                                    :placeholder="$t('device.running-status.866086-3')" size="small"
+                                                    @change="mqttPublish(deviceInfo, param)"
+                                                    :disabled="shadowUnEnable || param.isReadonly == 1">
+                                                    <el-option v-for="subItem in param.datatype.enumList"
+                                                        :key="subItem.value" :label="subItem.text"
+                                                        :value="subItem.value" />
+                                                </el-select>
+                                            </div>
+                                            <div v-if="param.datatype.type == 'string'">
+                                                <el-input v-model="param.shadow"
+                                                    :placeholder="$t('device.running-status.866086-4')"
+                                                    :disabled="shadowUnEnable || param.isReadonly == 1">
+                                                    <el-button slot="append" icon="el-icon-s-promotion"
+                                                        @click="mqttPublish(deviceInfo, param)" style="font-size: 20px"
+                                                        :title="$t('device.running-status.866086-6')"
+                                                        v-if="!shadowUnEnable && param.isReadonly == 0"></el-button>
+                                                </el-input>
+                                            </div>
+                                            <div v-if="param.datatype.type == 'decimal'">
+                                                <el-input v-model="param.shadow" type="number"
+                                                    :placeholder="$t('device.running-status.866086-7')"
+                                                    :disabled="shadowUnEnable || param.isReadonly == 1">
+                                                    <el-button slot="append" icon="el-icon-s-promotion"
+                                                        @click="mqttPublish(deviceInfo, param)" style="font-size: 20px"
+                                                        :title="$t('device.running-status.866086-6')"
+                                                        v-if="!shadowUnEnable && param.isReadonly == 0"></el-button>
+                                                </el-input>
+                                            </div>
+                                            <div v-if="param.datatype.type == 'integer'">
+                                                <el-input v-model="param.shadow" type="integer"
+                                                    :placeholder="$t('device.running-status.866086-8')"
+                                                    :disabled="shadowUnEnable || param.isReadonly == 1">
+                                                    <el-button slot="append" icon="el-icon-s-promotion"
+                                                        @click="mqttPublish(deviceInfo, param)" style="font-size: 20px"
+                                                        :title="$t('device.running-status.866086-6')"
+                                                        v-if="!shadowUnEnable && param.isReadonly == 0"></el-button>
+                                                </el-input>
+                                            </div>
+                                        </el-descriptions-item>
+                                    </el-descriptions>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+
+                <!---设备状态(影子模式，value值不会更新)-->
+                <el-descriptions style="margin-top: 30px" :column="1" border
+                    v-if="deviceInfo.isShadow == 1 && deviceInfo.status != 3">
+                    <template slot="title" v-if="deviceInfo.thingsModels.length > 0">
+                        <span style="font-size: 14px; color: #606266">{{ $t('device.running-status.866086-9') }}</span>
+                    </template>
+                    <!-- 设备物模型-->
+                    <el-descriptions-item v-for="(item, index) in deviceInfo.thingsModels" :key="index"
+                        :labelStyle="{ minWidth: '100px' }">
+                        <template slot="label">
+                            <i class="el-icon-open"></i>
+                            {{ item.name }}
+                        </template>
+                        <div v-if="item.datatype.type == 'bool'">
+                            <el-switch v-model="item.value" @change="mqttPublish(deviceInfo, item)" active-text=""
+                                inactive-text="" active-value="1" inactive-value="0" style="min-width: 100px"
+                                disabled />
+                        </div>
+                        <div v-if="item.datatype.type == 'enum'">
+                            <div v-if="item.datatype.showWay && item.datatype.showWay == 'button'">
+                                <el-button style="margin: 5px" size="mini" disabled
+                                    v-for="subItem in item.datatype.enumList" :key="subItem.value">{{ subItem.text
+                                    }}</el-button>
+                            </div>
+                            <el-select v-else v-model="item.value" :placeholder="$t('device.running-status.866086-3')"
+                                @change="mqttPublish(deviceInfo, item)" disabled>
+                                <el-option v-for="subItem in item.datatype.enumList" :key="subItem.value"
+                                    :label="subItem.text" :value="subItem.value" />
+                            </el-select>
+                        </div>
+                        <div v-if="item.datatype.type == 'string'">
+                            <el-input v-model="item.value" :placeholder="$t('device.running-status.866086-4')"
+                                disabled></el-input>
+                        </div>
+                        <div v-if="item.datatype.type == 'decimal'">
+                            <el-input v-model="item.value" type="number"
+                                :placeholder="$t('device.running-status.866086-7')" disabled></el-input>
+                        </div>
+                        <div v-if="item.datatype.type == 'integer'">
+                            <el-input v-model="item.value" type="integer"
+                                :placeholder="$t('device.running-status.866086-8')" disabled></el-input>
+                        </div>
+                        <div v-if="item.datatype.type == 'object'">
+                            <el-descriptions :column="1" size="mini" border>
+                                <el-descriptions-item v-for="(param, index) in item.datatype.params" :key="index"
+                                    :label="param.name">
+                                    <div v-if="param.datatype.type == 'bool'">
+                                        <el-switch v-model="param.value" size="mini"
+                                            @change="mqttPublish(deviceInfo, param)" active-text="" inactive-text=""
+                                            active-value="1" inactive-value="0" style="min-width: 100px" disabled />
+                                    </div>
+                                    <div v-if="param.datatype.type == 'enum'">
+                                        <el-select v-model="param.value"
+                                            :placeholder="$t('device.running-status.866086-3')"
+                                            @change="mqttPublish(deviceInfo, param)" disabled size="mini">
+                                            <el-option v-for="subItem in param.datatype.enumList" :key="subItem.value"
+                                                :label="subItem.text" :value="subItem.value" />
+                                        </el-select>
+                                    </div>
+                                    <div v-if="param.datatype.type == 'string'">
+                                        <el-input v-model="param.value"
+                                            :placeholder="$t('device.running-status.866086-4')" disabled
+                                            size="mini"></el-input>
+                                    </div>
+                                    <div v-if="param.datatype.type == 'decimal'">
+                                        <el-input v-model="param.value" type="number"
+                                            :placeholder="$t('device.running-status.866086-7')" disabled
+                                            size="mini"></el-input>
+                                    </div>
+                                    <div v-if="param.datatype.type == 'integer'">
+                                        <el-input v-model="param.value" type="integer"
+                                            :placeholder="$t('device.running-status.866086-8')" disabled
+                                            size="mini"></el-input>
+                                    </div>
+                                </el-descriptions-item>
+                            </el-descriptions>
+                        </div>
+                        <div v-if="item.datatype.type == 'array'">
+                            <el-descriptions :column="1" size="mini" border v-if="item.datatype.arrayType != 'object'">
+                                <el-descriptions-item v-for="(model, index) in item.datatype.arrayModel" :key="index"
+                                    :label="item.name + (index + 1)">
+                                    <div v-if="item.datatype.arrayType == 'string'">
+                                        <el-input v-model="model.value"
+                                            :placeholder="$t('device.running-status.866086-4')" size="mini"
+                                            disabled></el-input>
+                                    </div>
+                                    <div v-if="item.datatype.arrayType == 'decimal'">
+                                        <el-input v-model="model.value" type="number"
+                                            :placeholder="$t('device.running-status.866086-7')" size="mini"
+                                            disabled></el-input>
+                                    </div>
+                                    <div v-if="item.datatype.arrayType == 'integer'">
+                                        <el-input v-model="model.value" type="integer"
+                                            :placeholder="$t('device.running-status.866086-8')" size="mini"
+                                            disabled></el-input>
+                                    </div>
+                                </el-descriptions-item>
+                            </el-descriptions>
+                            <el-collapse v-if="item.datatype.arrayType == 'object'">
+                                <el-collapse-item v-for="(arrayParam, index) in item.datatype.arrayParams" :key="index">
+                                    <template slot="title">
+                                        <span style="color: #666">
+                                            <i class="el-icon-tickets"></i>
+                                            {{ item.name + (index + 1) }}
+                                        </span>
+                                    </template>
+                                    <el-descriptions :column="1" size="mini" border>
+                                        <el-descriptions-item v-for="(param, index) in arrayParam" :key="index"
+                                            :label="param.name">
+                                            <div v-if="param.datatype.type == 'bool'">
+                                                <el-switch v-model="param.value"
+                                                    @change="mqttPublish(deviceInfo, param)" active-text=""
+                                                    inactive-text="" active-value="1" inactive-value="0"
+                                                    style="min-width: 100px" disabled />
+                                            </div>
+                                            <div v-if="param.datatype.type == 'enum'">
+                                                <el-select v-model="param.value"
+                                                    :placeholder="$t('device.running-status.866086-3')"
+                                                    @change="mqttPublish(deviceInfo, param)" disabled size="mini">
+                                                    <el-option v-for="subItem in param.datatype.enumList"
+                                                        :key="subItem.value" :label="subItem.text"
+                                                        :value="subItem.value" />
+                                                </el-select>
+                                            </div>
+                                            <div v-if="param.datatype.type == 'string'">
+                                                <el-input v-model="param.value"
+                                                    :placeholder="$t('device.running-status.866086-4')" disabled
+                                                    size="mini"></el-input>
+                                            </div>
+                                            <div v-if="param.datatype.type == 'decimal'">
+                                                <el-input v-model="param.value" type="number"
+                                                    :placeholder="$t('device.running-status.866086-7')" disabled
+                                                    size="mini"></el-input>
+                                            </div>
+                                            <div v-if="param.datatype.type == 'integer'">
+                                                <el-input v-model="param.value" type="integer"
+                                                    :placeholder="$t('device.running-status.866086-8')" disabled
+                                                    size="mini"></el-input>
+                                            </div>
+                                        </el-descriptions-item>
+                                    </el-descriptions>
+                                </el-collapse-item>
+                            </el-collapse>
+                        </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-col>
+
+            <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="14">
+                <!-- 设备监测图表-->
+                <el-row :gutter="20" 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: 8px; margin-bottom: 20px">
+                            <div ref="map" style="height: 230px; width: 185px; margin: 0 auto; margin-bottom: 15px">
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+            </el-col>
+        </el-row>
+
+        <!-- 固件版本查看对话框 -->
+        <el-dialog :title="$t('device.running-status.866086-10')" :visible.sync="openVersion" width="550px"
+            append-to-body>
+            <el-form ref="firmwareForm" label-width="100px" :model="firmwareParams" :inline="true" :rules="rules">
+                <el-form-item :label="$t('device.running-status.866086-38')" prop="firmwareType">
+                    <el-select v-model="deviceInfo.firmwareType" :placeholder="$t('firmware.index.222541-51')"
+                        @change="handleVersionInputChange" style="width: 350px" disabled>
+                        <el-option v-for="item in firmwareTypeList" :key="item.value" :label="item.label"
+                            :value="item.value"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item :label="$t('device.running-status.866086-39')" prop="">
+                    <el-input :placeholder="$t('device.running-status.866086-40')" v-model="deviceInfo.firmwareVersion"
+                        style="width: 350px" disabled>
+                        <template slot="prepend">Version</template>
+                    </el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer">
+                <el-tooltip effect="dark" :content="$t('device.running-status.866086-41')" placement="top-start">
+                    <el-button type="primary" @click="getLatestFirmware" :disabled="device.status !== 3">{{
+                        $t('device.running-status.866086-42') }}</el-button>
+                </el-tooltip>
+                <el-button @click="cancel1">{{ $t('cancel') }}</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加或修改产品固件对话框 -->
+        <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">
+                <i class="el-icon-success" style="color: #67c23a"></i>
+                {{ $t('device.running-status.866086-11') }}
+            </div>
+            <el-descriptions :column="1" border size="large"
+                v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version"
+                :labelStyle="{ width: '150px', 'font-weight': 'bold' }">
+                <template slot="title">
+                    <el-link icon="el-icon-success" type="success" :underline="false">{{
+                        $t('device.running-status.866086-12') }}</el-link>
+                </template>
+                <el-descriptions-item :label="$t('device.running-status.866086-13')">{{ firmware.firmwareName
+                    }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('device.device-edit.148398-4')">{{ firmware.productName
+                    }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('device.device-edit.148398-12')">Version {{ firmware.version
+                    }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('device.running-status.866086-16')">
+                    <el-link :href="getDownloadUrl(firmware.filePath)" :underline="false" type="primary">{{
+                        getDownloadUrl(firmware.filePath) }}</el-link>
+                </el-descriptions-item>
+                <el-descriptions-item :label="$t('device.running-status.866086-17')">{{ firmware.remark
+                    }}</el-descriptions-item>
+            </el-descriptions>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="success" @click="otaUpgrade"
+                    v-if="firmware != null && deviceInfo.firmwareVersion < firmware.version">{{
+                        $t('device.running-status.866086-18') }}</el-button>
+                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getLatestFirmware } from '@/api/iot/firmware';
+import { serviceInvoke, serviceInvokeReply } from '@/api/iot/runstatus';
+import { getOrderControl } from '@/api/iot/control';
+import axios from 'axios';
+
+export default {
+    name: 'running-status',
+    props: {
+        device: {
+            type: Object,
+            default: null,
+        },
+    },
+    watch: {
+        // 获取到父组件传递的device后，刷新列表
+        device: {
+            handler(newVal) {
+                if (newVal && newVal.deviceId != 0) {
+                    if (newVal && newVal.deviceId != 0) {
+                        this.deviceInfo = newVal;
+                        this.updateDeviceStatus(this.deviceInfo);
+                        this.$nextTick(function () {
+                            this.MonitorChart();
+                        });
+                        //物模型排序
+                        if (this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.length > 0) {
+                            this.deviceInfo.thingsModels = this.device.thingsModels.sort((a, b) => b.order - a.order);
+                            // 设置上报周期初始值
+                            const timeModel = this.deviceInfo.thingsModels.find(model => model.id === 'time');
+                            console.log("timeModel", timeModel);
+                            if (timeModel) {
+                                this.commandValue = timeModel.value || '0';
+                            }
+                        }
+                        if (this.deviceInfo.chartList && this.deviceInfo.chartList.length > 0) {
+                            this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
+                        }
+                        // 添加message事件监听器
+                        // this.mqttCallback();
+                    }
+                }
+            },
+        },
+    },
+
+    data() {
+        return {
+            // 控制模块标题
+            title: '设备控制 ',
+            // 未启用设备影子
+            shadowUnEnable: false,
+            // 控制项标题背景
+            statusColor: {
+                background: '#67C23A',
+                color: '#fff',
+                minWidth: '100px',
+            },
+            // 最新固件信息
+            firmware: {},
+            // 打开固件对话框
+            openFirmware: false,
+            // 遮罩层
+            loading: true,
+            // 设备信息
+            deviceInfo: {
+                boolList: [],
+                enumList: [],
+                stringList: [],
+                integerList: [],
+                decimalList: [],
+                arrayList: [],
+                thingsModels: [],
+                chartList: [],
+            },
+            firmwareParams: {
+                firmwareType: '',
+                versionInput: '',
+            },
+            // 监测图表
+            monitorChart: [
+                {
+                    chart: {},
+                    data: {
+                        id: '',
+                        name: '',
+                        value: '',
+                    },
+                },
+            ],
+            openVersion: false,
+            firmwareTypeList: [
+                {
+                    label: this.$t('firmware.index.222541-52'),
+                    value: 1,
+                },
+                {
+                    label: 'HTTP',
+                    value: 2,
+                },
+            ],
+            remoteCommand: {},
+            // 表单校验
+            rules: {
+                firmwareType: [
+                    {
+                        required: true,
+                        message: this.$t('device.running-status.866086-43'),
+                        trigger: 'blur',
+                    },
+                ],
+            },
+            commandValue: '', // 命令值
+        };
+    },
+    mounted() {
+        this.handleDeviceChange(this.device);
+        const { deviceId, serialNumber } = this.device;
+        if (deviceId) {
+            this.initDataStatus();
+            this.initData();
+            // 设置上报周期初始值
+            const timeModel = this.deviceInfo.thingsModels?.find(model => model.id === 'time');
+            if (timeModel) {
+                this.commandValue = timeModel.value || '0';
+            }
+        }
+    },
+
+    methods: {
+        //监听设备状态（设备联动）
+        handleDeviceChange(device) {
+            if (device && device.deviceId != 0 && this.device.thingsModels) {
+                const { firmwareVersion, wirelessVersion, firmwareType, ...res } = device;
+                const data = {
+                    version: firmwareType === 1 ? firmwareVersion : wirelessVersion,
+                    firmwareType,
+                    ...res,
+                };
+                this.deviceInfo = data;
+                this.updateDeviceStatus(this.deviceInfo);
+                this.$nextTick(() => {
+                    this.MonitorChart();
+                });
+                //物模型排序
+                this.deviceInfo.thingsModels = this.deviceInfo.thingsModels.sort((a, b) => b.order - a.order);
+                this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
+            }
+        },
+        initData() {
+            // 监听值的实时更新
+            this.$busEvent.$on('updateData', (params) => {
+                this.updateParam(params);
+            });
+        },
+        initDataStatus() {
+            // 监听值的实时更新
+            this.$busEvent.$on('updateStatus', (status) => {
+                this.updateStatus(status);
+            });
+        },
+        updateStatus(status) {
+            let { serialNumber, productId, data } = status;
+            if (data) {
+                if (this.deviceInfo.serialNumber == serialNumber) {
+                    this.deviceInfo.status = data.status;
+                    this.deviceInfo.isShadow = data.isShadow;
+                    this.deviceInfo.rssi = data.rssi;
+                    this.updateDeviceStatus(this.deviceInfo);
+                }
+            }
+        },
+        //更新参数值
+        updateParam(params) {
+            let { serialNumber, productId, data } = params;
+            let isComplete = false;
+            data = data.message;
+            if (data) {
+                for (let j = 0; j < data.length; j++) {
+                    // 设置上报周期初始值
+                    if (data[j].id === 'time') {
+                        this.commandValue = data[j].value || '0';
+                    }
+
+                    for (let k = 0; k < this.deviceInfo.thingsModels.length && !isComplete; k++) {
+                        if (this.deviceInfo.thingsModels[k].id == data[j].id) {
+                            const variable = this.deviceInfo.thingsModels[k];
+                            // 普通类型(小数/整数/字符串/布尔/枚举)
+                            if (this.deviceInfo.thingsModels[k].datatype.type == 'decimal' || this.deviceInfo.thingsModels[k].datatype.type == 'integer') {
+                                variable.shadow = Number(data[j].value);
+                            } else {
+                                variable.shadow = data[j].value;
+                            }
+                        }
+                        if (this.deviceInfo.thingsModels[k].datatype.type == 'object') {
+                            // 对象类型
+                            for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.params.length; n++) {
+                                if (this.deviceInfo.thingsModels[k].datatype.params[n].id == data[j].id) {
+                                    this.deviceInfo.thingsModels[k].datatype.params[n].shadow = data[j].value;
+                                    isComplete = true;
+                                    break;
+                                }
+                            }
+                        } else if (this.deviceInfo.thingsModels[k].datatype.type == 'array') {
+                            // 数组类型
+                            if (this.deviceInfo.thingsModels[k].datatype.arrayType == 'object') {
+                                // 1.对象类型数组,id为数组中一个元素,例如：array_01_gateway_temperature
+                                if (String(data[j].id).indexOf('array_') == 0) {
+                                    for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayParams.length; n++) {
+                                        for (let m = 0; m < this.deviceInfo.thingsModels[k].datatype.arrayParams[n].length; m++) {
+                                            if (this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].id == data[j].id) {
+                                                this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].shadow = data[j].value;
+                                                isComplete = true;
+                                                break;
+                                            }
+                                        }
+                                        if (isComplete) {
+                                            break;
+                                        }
+                                    }
+                                } else {
+                                    // 2.对象类型数组，例如：gateway_temperature,消息ID添加前缀后匹配
+                                    for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayParams.length; n++) {
+                                        for (let m = 0; m < this.deviceInfo.thingsModels[k].datatype.arrayParams[n].length; m++) {
+                                            let index = n > 9 ? String(n) : '0' + k;
+                                            let prefix = 'array_' + index + '_';
+                                            if (this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].id == prefix + data[j].id) {
+                                                this.deviceInfo.thingsModels[k].datatype.arrayParams[n][m].shadow = data[j].value;
+                                            }
+                                        }
+                                    }
+                                }
+                            } else {
+                                // 整数、小数和字符串类型数组
+                                for (let n = 0; n < this.deviceInfo.thingsModels[k].datatype.arrayModel.length; n++) {
+                                    if (this.deviceInfo.thingsModels[k].datatype.arrayModel[n].id == data[j].id) {
+                                        this.deviceInfo.thingsModels[k].datatype.arrayModel[n].shadow = data[j].value;
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    // 图表数据
+                    for (let k = 0; k < this.deviceInfo.chartList.length; k++) {
+                        if (this.deviceInfo.chartList[k].id.indexOf('array_') == 0) {
+                            // 数组类型匹配,例如：array_00_gateway_temperature
+                            if (this.deviceInfo.chartList[k].id == data[j].id) {
+                                this.deviceInfo.chartList[k].shadow = data[j].value;
+                                // 更新图表
+                                for (let m = 0; m < this.monitorChart.length; m++) {
+                                    if (data[j].id == this.monitorChart[m].data.id) {
+                                        let data = [
+                                            {
+                                                value: this.deviceInfo.chartList[k].shadow,
+                                                name: this.monitorChart[m].data.name,
+                                            },
+                                        ];
+                                        this.monitorChart[m].chart.setOption({
+                                            series: [
+                                                {
+                                                    data: data,
+                                                },
+                                            ],
+                                        });
+                                        break;
+                                    }
+                                }
+                            }
+                        } else {
+                            // 普通类型匹配
+                            if (this.deviceInfo.chartList[k].id == data[j].id) {
+                                this.deviceInfo.chartList[k].shadow = data[j].value;
+                                // 更新图表
+                                for (let m = 0; m < this.monitorChart.length; m++) {
+                                    if (data[j].id == this.monitorChart[m].data.id) {
+                                        let data = [
+                                            {
+                                                value: this.deviceInfo.chartList[k].shadow,
+                                                name: this.monitorChart[m].data.name,
+                                            },
+                                        ];
+                                        this.monitorChart[m].chart.setOption({
+                                            series: [
+                                                {
+                                                    data: data,
+                                                },
+                                            ],
+                                        });
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                        if (isComplete) {
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+
+        //发送指令
+        async mqttPublish(device, model) {
+            const command = {};
+            command[model.id] = model.shadow;
+            const params = {
+                deviceId: device.deviceId,
+                modelId: model.modelId,
+            };
+            const response = await getOrderControl(params);
+            if (response.code != 200) {
+                this.$message({
+                    type: 'warning',
+                    message: response.msg,
+                });
+                return;
+            }
+            const data = {
+                serialNumber: device.serialNumber,
+                productId: device.productId,
+                remoteCommand: command,
+                identifier: model.id,
+                modelName: model.name,
+                isShadow: device.status != 3,
+                type: model.type,
+            };
+            //设备在线状态判断
+            if (this.device.status !== 3 && this.device.isShadow !== 1) {
+                if (this.device.status === 1) {
+                    title = this.$t('device.device-variable.930930-0');
+                } else if (this.device.status === 2) {
+                    title = this.$t('device.device-variable.930930-1');
+                } else {
+                    title = this.$t('device.device-variable.930930-2');
+                }
+                this.$message({
+                    type: 'warning',
+                    message: title,
+                });
+                return;
+            }
+            if ((this.deviceInfo.protocolCode === 'MODBUS-TCP' || this.deviceInfo.protocolCode === 'MODBUS-RTU') && this.device.status === 3) {
+                await serviceInvokeReply(data).then((response) => {
+                    if (response.code === 200) {
+                        this.$message({
+                            type: 'success',
+                            message: this.$t('device.running-status.866086-25'),
+                        });
+                    } else {
+                        this.$message.error(response.msg);
+                    }
+                });
+            } else {
+                await serviceInvoke(data).then((response) => {
+                    if (response.code === 200) {
+                        this.$message({
+                            type: 'success',
+                            message: this.$t('device.running-status.866086-25'),
+                        });
+                    } else {
+                        this.$message.error(response.msg);
+                    }
+                });
+            }
+        },
+
+        /**
+         * Mqtt发布消息
+         * @device 设备
+         * @model 物模型(id/name/type/name/isReadonly/value/shadow)，type 类型(1=属性，2=功能，3=OTA升级，4=实时监测)
+         * */
+        // mqttPublish(device, model) {
+        //     let topic = "";
+        //     let message = ""
+        //     if (model.type == 1) {
+        //         if (device.status == 3) {
+        //             // 属性,在线模式
+        //             topic = "/" + device.productId + "/" + device.serialNumber + "/property-online/get";
+        //         } else if (device.isShadow) {
+        //             // 属性,离线模式
+        //             topic = "/" + device.productId + "/" + device.serialNumber + "/property-offline/post";
+        //         }
+        //         message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
+        //     } else if (model.type == 2) {
+        //         if (device.status == 3) {
+        //             // 功能,在线模式
+        //             topic = "/" + device.productId + "/" + device.serialNumber + "/function-online/get";
+        //
+        //         } else if (device.isShadow) {
+        //             // 功能,离线模式
+        //             topic = "/" + device.productId + "/" + device.serialNumber + "/function-offline/post";
+        //         }
+        //         message = '[{"id":"' + model.id + '","value":"' + model.shadow + '"}]';
+        //     } else if (model.type == 3) {
+        //         // OTA升级
+        //         topic = "/" + device.productId + "/" + device.serialNumber + "/ota/get";
+        //         message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
+        //     } else {
+        //         return;
+        //     }
+        //     if (topic != "") {
+        //         // 发布
+        //         this.$mqttTool.publish(topic, message, model.name).then(res => {
+        //             this.$modal.notifySuccess(res);
+        //         }).catch(res => {
+        //             this.$modal.notifyError(res);
+        //         });
+        //     }
+        // },
+
+        /** 枚举类型按钮单击 */
+        enumButtonClick(device, model, value) {
+            model.shadow = value;
+            this.mqttPublish(device, model);
+        },
+        viewVersion() {
+            this.openVersion = true;
+            this.firmwareParams.firmwareType = 1;
+            this.firmwareParams.versionInput = '';
+            this.handleVersionInputChange();
+        },
+        //选择改变
+        handleVersionInputChange() {
+            if (this.firmwareParams.firmwareType == 1) {
+                this.firmwareParams.versionInput = 'Version' + this.device.firmwareVersion;
+            } else {
+                this.firmwareParams.versionInput = 'Version' + this.device.wirelessVersion;
+            }
+        },
+        // 取消按钮
+        cancel1() {
+            this.openVersion = false;
+        },
+        /** 更新设备状态 */
+        updateDeviceStatus(device) {
+            if (device.status == 3) {
+                this.statusColor.background = '#12d09f';
+                this.title = this.$t('device.running-status.866086-26');
+                this.shadowUnEnable = false;
+            } else {
+                if (device.isShadow == 1) {
+                    this.statusColor.background = '#486FF2';
+                    this.title = this.$t('device.running-status.866086-27');
+                    this.shadowUnEnable = false;
+                } else {
+                    this.statusColor.background = '#909399';
+                    this.title = this.$t('device.running-status.866086-28');
+                    this.shadowUnEnable = true;
+                }
+            }
+            this.$emit('statusEvent', this.deviceInfo.status);
+        },
+        /** 物模型数组元素值改变事件 */
+        arrayItemChange(value, thingsModel) {
+            let shadow = '';
+            for (let i = 0; i < thingsModel.datatype.arrayCount; i++) {
+                shadow += thingsModel.datatype.arrayModel[i].shadow + ',';
+            }
+            shadow = shadow.substring(0, shadow.length - 1);
+            thingsModel.shadow = shadow;
+        },
+        /** 物模型中数组值改变事件 */
+        arrayInputChange(value, thingsModel) {
+            let arrayModels = value.split(',');
+            if (arrayModels.length != thingsModel.datatype.arrayCount) {
+                this.$modal.alertWarning(this.$t('device.running-status.866086-29') + thingsModel.datatype.arrayCount + this.$t('device.running-status.866086-30'));
+            } else {
+                for (let i = 0; i < thingsModel.datatype.arrayCount; i++) {
+                    thingsModel.datatype.arrayModel[i].shadow = arrayModels[i];
+                }
+            }
+        },
+        /**用户是否拥有分享设备权限*/
+        // hasShrarePerm(permission) {
+        //   if (this.deviceInfo.isOwner == 0) {
+        //     // 分享设备权限
+        //     if (this.deviceInfo.userPerms.indexOf(permission) == -1) {
+        //       return false;
+        //     }
+        //   }
+        //   return true;
+        // },
+        /** 设备升级 */
+        otaUpgrade() {
+            // OTA升级
+            let topic = '/' + this.deviceInfo.productId + '/' + this.deviceInfo.serialNumber + '/ota/get';
+            let message = '{"version":' + this.firmware.version + ',"downloadUrl":"' + this.getDownloadUrl(this.firmware.filePath) + '"}';
+            // 发布
+            this.$mqttTool
+                .publish(topic, message, this.$t('device.running-status.866086-31'))
+                .then((res) => {
+                    this.$modal.notifySuccess(res);
+                })
+                .catch((res) => {
+                    this.$modal.notifyError(res);
+                });
+            this.openFirmware = false;
+        },
+        /** 获取最新固件 */
+        getLatestFirmware() {
+            const { deviceId, firmwareType } = this.deviceInfo;
+            getLatestFirmware(deviceId, firmwareType).then((response) => {
+                if (response.code === 200) {
+                    this.firmware = response.data;
+                    this.openFirmware = true;
+                }
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.openFirmware = false;
+        },
+        // 获取下载路径前缀
+        getDownloadUrl(path) {
+            return window.location.origin + process.env.VUE_APP_BASE_API + path;
+        },
+        /**图表展示*/
+        MonitorChart() {
+            for (let i = 0; i < this.deviceInfo.chartList.length; i++) {
+                this.monitorChart[i] = {
+                    chart: this.$echarts.init(this.$refs.map[i]),
+                    data: {
+                        id: this.deviceInfo.chartList[i].id,
+                        name: this.deviceInfo.chartList[i].name,
+                        value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
+                    },
+                };
+                var option;
+                option = {
+                    tooltip: {
+                        formatter: ' {b} <br/> {c}' + this.deviceInfo.chartList[i].datatype.unit,
+                    },
+                    series: [
+                        {
+                            name: this.deviceInfo.chartList[i].datatype.type,
+                            type: 'gauge',
+                            min: this.deviceInfo.chartList[i].datatype.min,
+                            max: this.deviceInfo.chartList[i].datatype.max,
+                            colorBy: 'data',
+                            splitNumber: 10,
+                            radius: '100%',
+                            // 分割线
+                            splitLine: {
+                                distance: 4,
+                            },
+                            axisLabel: {
+                                fontSize: 10,
+                                distance: 10,
+                            },
+                            // 刻度线
+                            axisTick: {
+                                distance: 4,
+                            },
+                            // 仪表盘轴线
+                            axisLine: {
+                                lineStyle: {
+                                    width: 8,
+                                    color: [
+                                        [0.2, '#409EFF'], // 0~20%
+                                        [0.8, '#12d09f'], // 40~60%
+                                        [1, '#F56C6C'], // 80~100%
+                                    ],
+                                    opacity: 0.3,
+                                },
+                            },
+                            pointer: {
+                                icon: 'triangle',
+                                length: '60%',
+                                width: 7,
+                            },
+                            progress: {
+                                show: true,
+                                width: 8,
+                            },
+                            detail: {
+                                valueAnimation: true,
+                                formatter: '{value}' + ' ' + this.deviceInfo.chartList[i].datatype.unit,
+                                offsetCenter: [0, '80%'],
+                                fontSize: 20,
+                            },
+                            data: [
+                                {
+                                    value: this.deviceInfo.chartList[i].shadow ? this.deviceInfo.chartList[i].shadow : this.deviceInfo.chartList[i].datatype.min,
+                                    name: this.deviceInfo.chartList[i].name,
+                                },
+                            ],
+                            title: {
+                                offsetCenter: [0, '115%'],
+                                fontSize: 16,
+                            },
+                        },
+                    ],
+                };
+                option && this.monitorChart[i].chart.setOption(option);
+            }
+        },
+        // 发送命令
+        async sendCommand() {
+            try {
+                const tomorrow = new Date();
+                tomorrow.setDate(tomorrow.getDate() + 7);
+                const expiredTime = tomorrow.toISOString().split('T')[0] + 'T00:00:00';
+
+                // 构造查询参数
+                const queryParams = new URLSearchParams({
+                    imei: this.deviceInfo.serialNumber,
+                    mode: '1',
+                    obj_id: '3323',
+                    obj_inst_id: '0',
+                    expired_time: expiredTime
+                }).toString();
+
+                const body = {
+                    "data": [{
+                        "res_id": 5750,
+                        "val": Number(this.commandValue)
+                    }]
+                };
+
+                // 使用Nginx代理路径
+                const response = await axios.post(`/iot-api/nb-iot/offline?${queryParams}`, body, {
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'version=2022-05-01&res=userid%2F275606&et=1907391331&method=sha1&sign=TxfzLFdfzIPwCSw6e1P9tYh1udQ%3D'
+                    }
+                });
+
+                if (response.data.code === 200) {
+                    this.$message({
+                        type: 'success',
+                        message: '命令下发成功'
+                    });
+                } else {
+                    this.$message.error(response.data.msg || '命令下发失败');
+                }
+            } catch (error) {
+                console.error('命令下发失败:', error);
+                this.$message.error('命令下发失败：' + (error.response?.data?.message || error.message));
+            }
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.running-status {
+    padding-bottom: 20px;
+
+    .status-col {
+        .title {
+            line-height: 28px;
+            font-size: 16px;
+        }
+
+        .emum-wrap {
+            .btn {
+                margin: 5px 10px 5px 0;
+            }
+        }
+
+        ::v-deep .el-slider__bar {
+            height: 18px;
+        }
+
+        ::v-deep .el-slider__runway {
+            height: 18px;
+            margin: 5px 0;
+        }
+
+        ::v-deep .el-slider__button {
+            height: 18px;
+            width: 18px;
+            border-radius: 10%;
+        }
+
+        ::v-deep .el-slider__button-wrapper {
+            top: -9px;
+        }
+
+        .is-active-btn {
+            color: #1890ff;
+            border-color: #badeff;
+            background-color: #e8f4ff;
+        }
+    }
+
+    .command-send {
+        display: flex;
+        align-items: center;
+    }
+}
+</style>