diff --git a/dist.zip b/dist.zip
index 3175394..839962c 100644
Binary files a/dist.zip and b/dist.zip differ
diff --git a/src/main.js b/src/main.js
index 2aa7083..d68c53b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -130,3 +130,7 @@ Element.Dialog.props.closeOnClickModal.default = false;
 
 
 
+
+// 添加 token 打印（从 Cookies 或 localStorage 获取）
+const token = Cookies.get('Admin-Token') || localStorage.getItem('Admin-Token');
+console.log(' 当前 Token:', token);  // 打印 token 到控制台 
diff --git a/src/views/iot/device/acousto_optic.vue b/src/views/iot/device/acousto_optic.vue
new file mode 100644
index 0000000..d4c0cc3
--- /dev/null
+++ b/src/views/iot/device/acousto_optic.vue
@@ -0,0 +1,1243 @@
+<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-menu"></i>
+                            {{ $t('device.running-status.866086-0') }}
+                        </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-button type="primary" size="mini" :plain="true" @click="sendDataToIframe()">{{
+                            $t('device.running-status.866086-44')
+                        }}</el-button>
+                                                <el-button type="primary" size="mini" :plain="true" @click="sendProductParamOnce()">{{
+                            $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>
+
+
+            <!-- <iframe ref="childFrame" src="https://iot-xcwl.cn/h5/gateway/index.html#/" width="23%" height="800px"
+                    style="border: none;"></iframe> -->
+                
+
+
+            <iframe ref="childFrame" src="http://localhost:5500/screen_main.html" width="26%" height="800px"
+                style="border: none;"></iframe>
+
+
+
+        </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';
+
+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);
+                        }
+                        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',
+                    },
+                ],
+            },
+        };
+    },
+    mounted() {
+        this.handleDeviceChange(this.device);
+        const { deviceId, serialNumber } = this.device;
+        if (deviceId) {
+            this.initDataStatus();
+            this.initData();
+        }
+        // this.mqttCallback();
+    // 只在mounted时发送一次productpram数据
+    this.$nextTick(() => {
+        this.waitForIframeLoad();
+    });
+        // 添加消息监听器
+        window.addEventListener('message', (event) => {
+            // 确保消息来源是可信的
+                console.log('收到来自子页面的消息:', JSON.stringify(event));
+
+
+            // 找到 id 为 distribute 的模型
+            const distributeModel = this.deviceInfo.thingsModels.find(model => model.id === 'distribute');
+            if (distributeModel) {
+                // 更新模型的 shadow 值，直接使用内部数据
+                distributeModel.shadow = JSON.stringify(event.data.data);
+                console.log('收到来自子页面的消息:', JSON.stringify(event.data.data));
+
+                // 调用 mqttPublish 下发数据
+                this.mqttPublish(this.deviceInfo, distributeModel);
+            }
+
+        });
+    },
+
+    methods: {
+    // 新增方法：等待iframe加载完成
+    waitForIframeLoad() {
+        const maxAttempts = 5; // 最大尝试次数
+        let attempts = 0;
+        
+        const checkInterval = setInterval(() => {
+            const iframe = this.$refs.childFrame;
+            
+            // 1. 检查iframe是否存在且已加载
+            if (iframe && iframe.contentWindow) {
+                // 2. 可选：检查子页面是否已准备好接收消息（需要子页面配合）
+                // iframe.contentWindow.postMessage({ type: 'ping' }, '*');
+                
+                clearInterval(checkInterval);
+                this.sendProductParamOnce();
+                return;
+            }
+            
+            // 3. 超过最大尝试次数则停止
+            if (++attempts >= maxAttempts) {
+                clearInterval(checkInterval);
+                console.warn('Iframe not ready after multiple attempts');
+                return;
+            }
+        }, 500); // 每500ms检查一次
+    },
+
+    // 发送productpram数据（保持不变）
+    sendProductParamOnce() {
+        const iframe = this.$refs.childFrame;
+        if (!iframe || !iframe.contentWindow) {
+            console.error('Iframe not ready');
+            return;
+        }
+
+        const productParamModel = this.deviceInfo.thingsModels.find(model => model.id === 'productpram');
+        if (!productParamModel) {
+            console.warn('productpram model not found');
+            return;
+        }
+
+        let paramData = productParamModel.shadow;
+        if (typeof paramData === 'string' && paramData.startsWith('JSON=')) {
+            paramData = paramData.substring(5);
+        }
+        const paramDataString = typeof paramData === 'string' ? paramData : JSON.stringify(paramData);
+
+        iframe.contentWindow.postMessage(
+            paramDataString,
+            'https://iot-xcwl.cn/h5/gateway/index.html#/'
+        );
+        console.log('Initial productpram data sent:', paramDataString);
+    },
+
+        //监听设备状态（设备联动）
+        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();
+                    // 向iframe发送数据
+                    // this.sendDataToIframe();
+                });
+                //物模型排序
+                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++) {
+                    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;
+                        }
+                    }
+                }
+            }
+            // 在数据更新后发送到iframe
+            this.$nextTick(() => {
+                this.sendDataToIframe();
+            });
+        },
+
+        //发送指令
+        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,
+            };
+            // console.log('下发指令:', JSON.stringify(data));
+            //设备在线状态判断
+            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);
+            }
+        },
+    // 保留原有方法（但不再用于productpram）
+    sendDataToIframe() {
+        const iframe = this.$refs.childFrame;
+        if (iframe && iframe.contentWindow) {
+            // 这里只处理upload数据（如果需要）
+            const uploadModel = this.deviceInfo.thingsModels.find(model => model.id === 'upload');
+            if (uploadModel) {
+                let shadowData = uploadModel.shadow;
+                if (typeof shadowData === 'string' && shadowData.startsWith('JSON=')) {
+                    shadowData = shadowData.substring(5);
+                }
+                const uploadDataString = typeof shadowData === 'string' ? shadowData : JSON.stringify(shadowData);
+                
+                iframe.contentWindow.postMessage(
+                    uploadDataString,
+                    // 'https://iot-xcwl.cn/h5/gateway/index.html#/'
+                    'http://localhost:5500/'
+                );
+                console.log('Sent upload data:', uploadDataString);
+            }
+        }
+    }
+    },
+};
+</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;
+        }
+    }
+}
+</style>
diff --git a/src/views/iot/device/device-edit.vue b/src/views/iot/device/device-edit.vue
index 5a0ba72..2c54cf5 100644
--- a/src/views/iot/device/device-edit.vue
+++ b/src/views/iot/device/device-edit.vue
@@ -69,7 +69,7 @@
                                         <template slot="prepend">Version</template>
                                         <template slot="append">{{ form.firmwareType === 1 ?
                                             $t('firmware.index.222541-52') : $t('firmware.index.222541-53')
-                                        }}</template>
+                                            }}</template>
                                     </el-input>
                                 </el-form-item>
                                 <!-- 设备影子 -->
@@ -187,8 +187,12 @@
                         ref="gatewayRunningStatus" :device="form" @statusEvent="getDeviceStatusData($event)" />
                     <relay v-else-if="form.productName && form.productName.toLowerCase().includes('多路控制器')" ref="relay"
                         :device="form" @statusEvent="getDeviceStatusData($event)" />
-                    <gatewaypre v-else-if="form.productName && form.productName.toLowerCase().includes('网关卡预配置')" ref="gatewaypre"
-                        :device="form" @statusEvent="getDeviceStatusData($event)" />
+                    <gatewaypre v-else-if="form.productName && form.productName.toLowerCase().includes('网关卡预配置')"
+                        ref="gatewaypre" :device="form" @statusEvent="getDeviceStatusData($event)" />
+                    <acousto_optic v-else-if="form.productName && form.productName.toLowerCase().includes('声光')"
+                        ref="acousto_optic" :device="form" @statusEvent="getDeviceStatusData($event)" />
+                    <voicecard v-else-if="form.productName && form.productName.toLowerCase().includes('声卡')"
+                        ref="voicecard" :device="form" @statusEvent="getDeviceStatusData($event)" />
                     <running-status v-else ref="runningStatus" :device="form"
                         @statusEvent="getDeviceStatusData($event)" />
 
@@ -407,7 +411,7 @@
                 </el-form>
                 <div slot="footer" class="dialog-footer">
                     <el-button class="btns" type="primary" @click="doCopy(2)">{{ $t('device.device-edit.148398-59')
-                    }}</el-button>
+                        }}</el-button>
                     <el-button @click="closeSummaryDialog">{{ $t('device.device-edit.148398-57') }}</el-button>
                 </div>
             </el-dialog>
@@ -453,6 +457,8 @@ import defaultSettings from '@/settings';
 import gatewayRunningStatus from './gatewayrunning-status.vue';
 import relay from './relay.vue'
 import gatewaypre from './gatewaypre.vue'
+import acousto_optic from'./acousto_optic.vue'
+import voicecard from './voicecard.vue';
 export default {
     name: 'DeviceEdit',
     dicts: ['iot_device_status', 'iot_location_way'],
@@ -486,7 +492,9 @@ export default {
         deviceInlineVideo,
         gatewayRunningStatus,
         relay,
-        gatewaypre
+        gatewaypre,
+        acousto_optic,
+        voicecard
     },
     watch: {
         activeName(val) {
diff --git a/src/views/iot/device/voicecard.vue b/src/views/iot/device/voicecard.vue
new file mode 100644
index 0000000..d7adbf0
--- /dev/null
+++ b/src/views/iot/device/voicecard.vue
@@ -0,0 +1,906 @@
+<template>
+    <div class="running-status">
+        <el-row :gutter="20">
+            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="14" class="status-col">
+                <!-- 设备模式和OTA升级部分 -->
+                <el-row :gutter="20" class="mode-section">
+                    <!-- 设备模式 -->
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+                        <el-card class="mode-card" shadow="hover">
+                            <div class="mode-header">
+                                <i class="el-icon-menu"></i>
+                                <span class="mode-title">{{ $t('device.running-status.866086-0') }}</span>
+                            </div>
+                            <div class="mode-content">
+                                <span class="title" :style="{ color: statusColor.background }">{{ title }}</span>
+                            </div>
+                        </el-card>
+                    </el-col>
+
+                    <!-- 设备升级 -->
+                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+                        <el-card class="mode-card" shadow="hover">
+                            <div class="mode-header">
+                                <svg-icon icon-class="ota" />
+                                <span class="mode-title">{{ $t('device.running-status.866086-1') }}</span>
+                            </div>
+                            <div class="mode-content">
+                                <el-button type="primary" size="mini" :plain="true" @click="viewVersion()">
+                                    {{ $t('device.running-status.866086-44') }}
+                                </el-button>
+                            </div>
+                        </el-card>
+                    </el-col>
+                </el-row>
+
+                <!-- 声卡基础设置 -->
+                <el-card class="settings-card" shadow="hover">
+                    <div slot="header" class="settings-header">
+                        <span class="settings-title">基础设置</span>
+                    </div>
+                    <el-form :model="basicSettings" label-width="100px">
+                        <el-form-item label="音量设置">
+                            <el-slider v-model="basicSettings.volume" :min="0" :max="100" :format-tooltip="formatVolume"
+                                @change="handleVolumeChange" style="width: 80%">
+                            </el-slider>
+                        </el-form-item>
+                    </el-form>
+                </el-card>
+
+                <!-- 音频列表 -->
+                <el-card class="audio-list-card" shadow="hover">
+                    <div slot="header" class="audio-list-header">
+                        <span class="audio-list-title">音频列表</span>
+                    </div>
+                    <el-table :data="audioList" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }"
+                        border>
+                        <el-table-column prop="id" label="序号" width="80" align="center">
+                        </el-table-column>
+                        <el-table-column prop="name" label="音频名称" min-width="150">
+                        </el-table-column>
+                        <el-table-column prop="duration" label="时长" width="120" align="center">
+                        </el-table-column>
+                        <el-table-column prop="size" label="大小" width="120" align="center">
+                        </el-table-column>
+                    </el-table>
+                </el-card>
+
+                <!-- 默认列表 -->
+                <el-card class="default-list-card" shadow="hover">
+                    <div slot="header" class="default-list-header">
+                        <span class="default-list-title">默认列表</span>
+                    </div>
+                    <el-table :data="defaultList" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }"
+                        border>
+                        <el-table-column prop="id" label="序号" width="80" align="center">
+                        </el-table-column>
+                        <el-table-column prop="name" label="音频名称" min-width="150">
+                        </el-table-column>
+                        <el-table-column prop="type" label="类型" width="120" align="center">
+                        </el-table-column>
+                        <el-table-column prop="status" label="状态" width="120" align="center">
+                            <template slot-scope="scope">
+                                <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">
+                                    {{ scope.row.status }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-card>
+            </el-col>
+
+            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+                <!-- 远程喊话控制面板 -->
+                <el-card class="voice-control-card" shadow="hover">
+                    <div slot="header" class="voice-control-header">
+                        <span class="voice-control-title">远程喊话</span>
+                    </div>
+                    <div class="voice-control-content">
+                        <div class="recorder-status">
+                            <div class="status-indicator" :class="{ 'recording': isRecording }">
+                                <i class="el-icon-microphone"></i>
+                            </div>
+                            <span class="status-text">{{ recordingStatus }}</span>
+                        </div>
+                        <div class="timer-display" v-if="isRecording">
+                            {{ formatTime(recordingTime) }}
+                        </div>
+                        <div class="control-buttons">
+                            <el-button type="primary" icon="el-icon-video-play" circle @click="startRecording"
+                                :disabled="isRecording">
+                            </el-button>
+                            <el-button type="danger" icon="el-icon-video-pause" circle @click="stopRecording"
+                                :disabled="!isRecording">
+                            </el-button>
+                            <el-button type="success" icon="el-icon-upload2" circle @click="uploadRecording"
+                                :disabled="!hasRecording || isRecording">
+                            </el-button>
+                        </div>
+
+                        <!-- 录音预览 -->
+                        <div class="recording-preview" v-if="hasRecording">
+                            <div class="preview-title">录音预览</div>
+                            <div class="audio-player">
+                                <audio ref="audioPlayer" :src="audioUrl" controls></audio>
+                                <div class="preview-controls">
+                                    <el-button type="text" icon="el-icon-refresh" @click="reRecord"
+                                        :disabled="isRecording">
+                                        重新录制
+                                    </el-button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="recording-list" v-if="recordings.length > 0">
+                            <div class="list-title">最近录音</div>
+                            <el-scrollbar style="height: 200px">
+                                <div v-for="(recording, index) in recordings" :key="index" class="recording-item">
+                                    <span class="recording-name">{{ recording.name }}</span>
+                                    <span class="recording-time">{{ recording.time }}</span>
+                                    <el-button type="text" icon="el-icon-delete" @click="deleteRecording(index)">
+                                    </el-button>
+                                </div>
+                            </el-scrollbar>
+                        </div>
+                    </div>
+                </el-card>
+
+                <!-- 设备监测图表-->
+                <el-row :gutter="20" v-if="deviceInfo.chartList.length > 0">
+                    <el-col :xs="24" :sm="12" :md="12" :lg="24" :xl="12" 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';
+
+export default {
+    name: 'running-status',
+    props: {
+        device: {
+            type: Object,
+            default: null,
+        },
+    },
+    watch: {
+        device: {
+            handler(newVal) {
+                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);
+                    }
+                    if (this.deviceInfo.chartList && this.deviceInfo.chartList.length > 0) {
+                        this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
+                    }
+                }
+            },
+        },
+    },
+
+    data() {
+        return {
+            title: '设备控制',
+            shadowUnEnable: false,
+            statusColor: {
+                background: '#67C23A',
+                color: '#fff',
+                maxWidth: '200px',
+            },
+            firmware: {},
+            openFirmware: false,
+            loading: true,
+            deviceInfo: {
+                deviceId: 0,
+                serialNumber: '',
+                productId: '',
+                productName: '',
+                status: 0,
+                isShadow: 0,
+                rssi: 0,
+                firmwareVersion: '',
+                wirelessVersion: '',
+                firmwareType: 1,
+                protocolCode: '',
+                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,
+                },
+            ],
+            rules: {
+                firmwareType: [
+                    {
+                        required: true,
+                        message: this.$t('device.running-status.866086-43'),
+                        trigger: 'blur',
+                    },
+                ],
+            },
+            // 声卡相关数据
+            basicSettings: {
+                volume: 50
+            },
+            audioList: [
+                { id: 1, name: '音频1', duration: '00:30', size: '2.5MB' },
+                { id: 2, name: '音频2', duration: '01:15', size: '3.8MB' },
+                { id: 3, name: '音频3', duration: '00:45', size: '2.1MB' }
+            ],
+            defaultList: [
+                { id: 1, name: '默认音频1', type: '系统', status: '启用' },
+                { id: 2, name: '默认音频2', type: '用户', status: '启用' },
+                { id: 3, name: '默认音频3', type: '系统', status: '禁用' }
+            ],
+            // 录音相关数据
+            isRecording: false,
+            recordingTime: 0,
+            recordingStatus: '准备就绪',
+            hasRecording: false,
+            mediaRecorder: null,
+            audioChunks: [],
+            recordings: [],
+            timer: null,
+            audioUrl: null,
+        };
+    },
+    mounted() {
+        if (this.device && this.device.deviceId) {
+            this.handleDeviceChange(this.device);
+            this.initDataStatus();
+            this.initData();
+        }
+    },
+
+    methods: {
+        // 保留原有的设备状态相关方法
+        handleDeviceChange(device) {
+            if (device && device.deviceId != 0) {
+                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();
+                });
+                if (this.deviceInfo.thingsModels && this.deviceInfo.thingsModels.length > 0) {
+                    this.deviceInfo.thingsModels = this.deviceInfo.thingsModels.sort((a, b) => b.order - a.order);
+                }
+                if (this.deviceInfo.chartList && this.deviceInfo.chartList.length > 0) {
+                    this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
+                }
+            }
+        },
+
+        // 声卡特有方法
+        formatVolume(val) {
+            return val + '%';
+        },
+
+        handleVolumeChange(val) {
+            // 处理音量变化
+            console.log('音量变化:', val);
+            // TODO: 调用相应的API更新设备音量
+        },
+
+        // 保留其他必要的方法
+        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);
+                }
+            }
+        },
+
+        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);
+        },
+
+        // 保留固件更新相关方法
+        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;
+        },
+
+        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.8, '#12d09f'],
+                                        [1, '#F56C6C'],
+                                    ],
+                                    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 startRecording() {
+            if (this.isRecording) return;
+
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                this.mediaRecorder = new MediaRecorder(stream);
+                this.audioChunks = [];
+
+                this.mediaRecorder.ondataavailable = (event) => {
+                    this.audioChunks.push(event.data);
+                };
+
+                this.mediaRecorder.onstop = () => {
+                    const audioBlob = new Blob(this.audioChunks, { type: 'audio/mp3' });
+                    this.hasRecording = true;
+                    this.recordingStatus = '录音完成';
+                    // 创建音频预览URL
+                    this.audioUrl = URL.createObjectURL(audioBlob);
+                };
+
+                // 设置数据收集间隔为100ms
+                this.mediaRecorder.start(100);
+                this.isRecording = true;
+                this.recordingStatus = '正在录音...';
+                this.recordingTime = 0;
+
+                // 开始计时
+                this.timer = setInterval(() => {
+                    this.recordingTime++;
+                }, 1000);
+            } catch (error) {
+                this.$message.error('无法访问麦克风');
+                console.error('录音错误:', error);
+            }
+        },
+
+        stopRecording() {
+            if (this.mediaRecorder && this.isRecording) {
+                this.mediaRecorder.stop();
+                this.isRecording = false;
+                clearInterval(this.timer);
+
+                // 停止所有音轨
+                this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            }
+        },
+
+        formatTime(seconds) {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = seconds % 60;
+            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+        },
+
+        reRecord() {
+            // 释放之前的音频URL
+            if (this.audioUrl) {
+                URL.revokeObjectURL(this.audioUrl);
+                this.audioUrl = null;
+            }
+            this.hasRecording = false;
+            this.audioChunks = [];
+            this.recordingStatus = '准备就绪';
+            this.recordingTime = 0;  // 重置录音时长
+        },
+
+        async uploadRecording() {
+            if (!this.hasRecording) return;
+
+            try {
+                const audioBlob = new Blob(this.audioChunks, { type: 'audio/mp3' });
+                const formData = new FormData();
+                formData.append('file', audioBlob, `recording_${Date.now()}.mp3`);
+
+                // TODO: 替换为实际的上传API
+                // const response = await uploadFile(formData);
+
+                this.$message.success('上传成功');
+                this.recordings.unshift({
+                    name: `录音_${this.formatTime(this.recordingTime)}`,
+                    time: new Date().toLocaleString()
+                });
+
+                // 重置录音状态
+                this.reRecord();
+            } catch (error) {
+                this.$message.error('上传失败');
+                console.error('上传错误:', error);
+            }
+        },
+
+        deleteRecording(index) {
+            this.recordings.splice(index, 1);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.running-status {
+    padding: 20px;
+
+    .status-col {
+        .title {
+            line-height: 28px;
+            font-size: 16px;
+        }
+    }
+
+    .mode-section {
+        margin-bottom: 30px;
+    }
+
+    .mode-card {
+        margin-bottom: 20px;
+        transition: all 0.3s;
+        padding: 20px;
+
+        &:hover {
+            transform: translateY(-5px);
+        }
+
+        .mode-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+
+            i,
+            .svg-icon {
+                font-size: 20px;
+                margin-right: 8px;
+                color: #409EFF;
+            }
+
+            .mode-title {
+                font-size: 16px;
+                font-weight: bold;
+                color: #303133;
+            }
+        }
+
+        .mode-content {
+            text-align: center;
+            padding: 10px 0;
+
+            .title {
+                font-size: 16px;
+                font-weight: bold;
+            }
+        }
+    }
+
+    .settings-card,
+    .audio-list-card,
+    .default-list-card {
+        margin-bottom: 20px;
+        transition: all 0.3s;
+
+        &:hover {
+            transform: translateY(-5px);
+        }
+
+        .settings-header,
+        .audio-list-header,
+        .default-list-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .settings-title,
+            .audio-list-title,
+            .default-list-title {
+                font-size: 16px;
+                font-weight: bold;
+                color: #303133;
+            }
+        }
+    }
+
+    .el-table {
+        margin-top: 15px;
+    }
+
+    .el-slider {
+        margin-top: 10px;
+    }
+}
+
+.voice-control-card {
+    margin-bottom: 20px;
+    transition: all 0.3s;
+
+    &:hover {
+        transform: translateY(-5px);
+    }
+
+    .voice-control-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .voice-control-title {
+            font-size: 16px;
+            font-weight: bold;
+            color: #303133;
+        }
+    }
+
+    .voice-control-content {
+        padding: 20px;
+        text-align: center;
+
+        .recorder-status {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 20px;
+
+            .status-indicator {
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                background: #f4f4f5;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 10px;
+                transition: all 0.3s;
+
+                i {
+                    font-size: 30px;
+                    color: #909399;
+                }
+
+                &.recording {
+                    background: #fef0f0;
+                    animation: pulse 1.5s infinite;
+
+                    i {
+                        color: #f56c6c;
+                    }
+                }
+            }
+
+            .status-text {
+                font-size: 14px;
+                color: #606266;
+            }
+        }
+
+        .timer-display {
+            font-size: 24px;
+            font-weight: bold;
+            color: #303133;
+            margin-bottom: 20px;
+        }
+
+        .control-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+
+            .el-button {
+                width: 50px;
+                height: 50px;
+                font-size: 20px;
+            }
+        }
+
+        .recording-preview {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
+
+            .preview-title {
+                font-size: 14px;
+                color: #606266;
+                margin-bottom: 10px;
+                text-align: left;
+            }
+
+            .audio-player {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 10px;
+
+                audio {
+                    width: 100%;
+                    height: 40px;
+                }
+
+                .preview-controls {
+                    display: flex;
+                    justify-content: center;
+                    margin-top: 5px;
+
+                    .el-button {
+                        padding: 8px 15px;
+
+                        i {
+                            margin-right: 5px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .recording-list {
+            text-align: left;
+            border-top: 1px solid #ebeef5;
+            padding-top: 15px;
+
+            .list-title {
+                font-size: 14px;
+                color: #606266;
+                margin-bottom: 10px;
+            }
+
+            .recording-item {
+                display: flex;
+                align-items: center;
+                padding: 8px 0;
+                border-bottom: 1px solid #ebeef5;
+
+                .recording-name {
+                    flex: 1;
+                    font-size: 14px;
+                    color: #303133;
+                }
+
+                .recording-time {
+                    font-size: 12px;
+                    color: #909399;
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.4);
+    }
+
+    70% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 10px rgba(245, 108, 108, 0);
+    }
+
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
+    }
+}
+</style>
\ No newline at end of file