From bf9ffb7bcabf81eabf017ba9195de36e200b3b88 Mon Sep 17 00:00:00 2001
From: 1 <1>
Date: Fri, 27 Jun 2025 17:39:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=98=BE=E5=8D=A1=E9=A1=B5=E9=9D=A2=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/iot/device/device-edit.vue |    6 +-
 src/views/iot/device/display.vue     | 3116 ++++++++++++++++++++++++++
 src/views/iot/device/voicecard.vue   |    8 +-
 3 files changed, 3125 insertions(+), 5 deletions(-)
 create mode 100644 src/views/iot/device/display.vue

diff --git a/src/views/iot/device/device-edit.vue b/src/views/iot/device/device-edit.vue
index 2c54cf5..0fc2048 100644
--- a/src/views/iot/device/device-edit.vue
+++ b/src/views/iot/device/device-edit.vue
@@ -193,6 +193,8 @@
                         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)" />
+                    <display v-else-if="form.productName && form.productName.toLowerCase().includes('显卡产品')"
+                        ref="display" :device="form" @statusEvent="getDeviceStatusData($event)" />
                     <running-status v-else ref="runningStatus" :device="form"
                         @statusEvent="getDeviceStatusData($event)" />
 
@@ -459,6 +461,7 @@ import relay from './relay.vue'
 import gatewaypre from './gatewaypre.vue'
 import acousto_optic from'./acousto_optic.vue'
 import voicecard from './voicecard.vue';
+import display from './display.vue'
 export default {
     name: 'DeviceEdit',
     dicts: ['iot_device_status', 'iot_location_way'],
@@ -494,7 +497,8 @@ export default {
         relay,
         gatewaypre,
         acousto_optic,
-        voicecard
+        voicecard,
+        display
     },
     watch: {
         activeName(val) {
diff --git a/src/views/iot/device/display.vue b/src/views/iot/device/display.vue
new file mode 100644
index 0000000..92d16b4
--- /dev/null
+++ b/src/views/iot/device/display.vue
@@ -0,0 +1,3116 @@
+<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>
+                                <el-button type="text" @click="printThingsModels" style="margin-left: 10px">
+                                    <i class="el-icon-printer"></i> 打印物模型
+                                </el-button>
+                            </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" style="margin-top: 20px;">
+                        <el-form-item label="屏幕开关">
+                            <el-switch v-model="basicSettings.screenEnabled" active-color="#13ce66"
+                                inactive-color="#ff4949" @change="handleScreenSwitchChange">
+                            </el-switch>
+                        </el-form-item>
+                        <el-form-item label="屏幕亮度">
+                            <el-slider v-model="basicSettings.brightness" :min="0" :max="100"
+                                :format-tooltip="formatBrightness" @change="handleBrightnessChange" style="width: 80%"
+                                :disabled="!basicSettings.screenEnabled">
+                            </el-slider>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="danger" @click="handleClearScreen"
+                                :disabled="!basicSettings.screenEnabled">清除屏幕</el-button>
+                        </el-form-item>
+                    </el-form>
+                </el-card>
+
+                <!-- 屏幕参数卡片 -->
+                <el-card class="settings-card" shadow="hover">
+                    <div slot="header" class="settings-header">
+                        <span class="settings-title">屏幕参数</span>
+                    </div>
+                    <el-form :model="screenParams" label-width="120px" style="margin-top: 20px;">
+                        <el-form-item label="屏幕模板">
+                            <el-select v-model="screenParams.template" placeholder="请选择模板">
+                                <el-option label="大屏A" :value="'bigA'"></el-option>
+                                <el-option label="大屏B" :value="'bigB'"></el-option>
+                                <el-option label="小屏A" :value="'smallA'"></el-option>
+                                <el-option label="小屏B" :value="'smallB'"></el-option>
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="OE极性">
+                            <el-switch v-model="screenParams.oePolarity" :active-value="1"
+                                :inactive-value="0"></el-switch>
+                        </el-form-item>
+                        <el-form-item label="DATA极性">
+                            <el-switch v-model="screenParams.dataPolarity" :active-value="1"
+                                :inactive-value="0"></el-switch>
+                        </el-form-item>
+                        <el-form-item label="屏宽">
+                            <el-input-number v-model="screenParams.width" :min="1" :max="10000"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="屏高">
+                            <el-input-number v-model="screenParams.height" :min="1" :max="10000"></el-input-number>
+                        </el-form-item>
+                        <el-form-item label="屏幕角度">
+                            <el-radio-group v-model="screenParams.angle">
+                                <el-radio :label="0">0°</el-radio>
+                                <el-radio :label="90">90°</el-radio>
+                                <el-radio :label="180">180°</el-radio>
+                                <el-radio :label="270">270°</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="handleSendScreenParams">下发参数</el-button>
+                        </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>
+                        <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddAudioDialog">
+                            添加音频
+                        </el-button>
+                    </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" align="center">
+                        </el-table-column>
+                        <el-table-column label="操作" width="120" align="center">
+                            <template slot-scope="scope">
+                                <el-button type="text" icon="el-icon-delete" @click="handleDeleteAudio(scope.row)">
+                                </el-button>
+                            </template>
+</el-table-column>
+<template slot="empty">
+                            <div style="padding: 20px 0;">
+                                <el-empty description="暂无音频数据"></el-empty>
+                            </div>
+                        </template>
+</el-table>
+</el-card> -->
+            </el-col>
+
+            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+                <!-- 开机参数卡片（右侧） -->
+                <el-card class="settings-card" shadow="hover">
+                    <div slot="header" class="settings-header">
+                        <span class="settings-title">开机参数</span>
+                    </div>
+                    <el-form :model="bootSettings" label-width="120px" style="margin-top: 20px;">
+                        <el-form-item label="开机界面可选">
+                            <el-switch v-model="bootSettings.showBootScreen"
+                                @change="handleBootScreenSwitchChange"></el-switch>
+                        </el-form-item>
+                        <el-form-item label="重置开关">
+                            <el-switch v-model="bootSettings.resetEnabled"
+                                @change="handleResetSwitchChange"></el-switch>
+                        </el-form-item>
+                    </el-form>
+                </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-row :gutter="20" style="margin-top: 20px;">
+            <el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
+                <el-card class="default-list-card" shadow="hover">
+                    <div slot="header" class="default-list-header">
+                        <span class="default-list-title">节目列表</span>
+                        <!-- <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddPlaylistDialog">
+                            添加节目
+                        </el-button> -->
+                        <el-button type="success" size="mini" icon="el-icon-plus" @click="showAddProgramDialog">
+                            添加自定义节目
+                        </el-button>
+                    </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" align="center">
+                        </el-table-column>
+                        <el-table-column prop="playTime" label="播放时间" width="120" align="center">
+                        </el-table-column>
+                        <el-table-column prop="weekdays" label="重复" width="200" align="center">
+                        </el-table-column>
+                        <el-table-column label="雷达" width="100" align="center">
+                            <template slot-scope="scope">
+                                <el-tag :type="scope.row.radarEnabled ? 'success' : 'info'">
+                                    {{ scope.row.radarEnabled ? '开启' : '关闭' }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="状态" width="120" align="center">
+                            <template slot-scope="scope">
+                                <el-switch v-model="scope.row.status" :active-value="'启用'" :inactive-value="'禁用'"
+                                    @change="handleStatusChange(scope.row)">
+                                </el-switch>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" width="180" align="center">
+                            <template slot-scope="scope">
+                                <el-button type="text" icon="el-icon-edit" @click="handleEditPlaylist(scope.row)">
+                                    编辑
+                                </el-button>
+                                <el-button type="text" icon="el-icon-delete" @click="handleDeletePlaylist(scope.row)">
+                                    删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <template slot="empty">
+                            <div style="padding: 20px 0;">
+                                <el-empty description="暂无节目列表数据"></el-empty>
+                            </div>
+                        </template>
+                    </el-table>
+                </el-card>
+            </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')"
+                        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" style="text-align: center; font-size: 16px">
+                <i class="el-icon-success" style="color: #67c23a"></i>
+                {{ $t('device.running-status.866086-11') }}
+            </div>
+            <div v-else-if="!compareVersions(deviceInfo.firmwareVersion, firmware.version)"
+                style="text-align: center; font-size: 16px">
+                <i class="el-icon-warning" style="color: #E6A23C"></i>
+                {{ $t('device.running-status.866086-47') }}
+            </div>
+            <el-descriptions v-else :column="1" border size="large"
+                :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 && compareVersions(deviceInfo.firmwareVersion, firmware.version)">
+                    {{ $t('device.running-status.866086-18') }}
+                </el-button>
+                <el-button @click="cancel">{{ $t('cancel') }}</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加音频对话框 -->
+        <el-dialog title="添加音频" :visible.sync="addAudioDialogVisible" width="600px" append-to-body>
+            <el-form :model="newAudio" :rules="audioRules" ref="audioForm" label-width="120px">
+                <el-form-item label="备注" prop="remark">
+                    <el-input v-model="newAudio.remark" placeholder="请输入备注"></el-input>
+                </el-form-item>
+                <el-form-item label="主持人声音" prop="per">
+                    <el-select v-model="newAudio.per" placeholder="请选择主持人声音" style="width: 100%">
+                        <el-option label="小美" :value="0"></el-option>
+                        <el-option label="小宇" :value="1"></el-option>
+                        <el-option label="逍遥" :value="3"></el-option>
+                        <el-option label="丫丫" :value="4"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="合成语速" prop="spd">
+                    <el-slider v-model="newAudio.spd" :min="0" :max="15" :step="1" :format-tooltip="formatSpeed">
+                    </el-slider>
+                </el-form-item>
+                <el-form-item label="合成音调" prop="pit">
+                    <el-slider v-model="newAudio.pit" :min="0" :max="15" :step="1" :format-tooltip="formatPitch">
+                    </el-slider>
+                </el-form-item>
+                <el-form-item label="合成音量" prop="vol">
+                    <el-slider v-model="newAudio.vol" :min="0" :max="15" :step="1" :format-tooltip="formatVolume">
+                    </el-slider>
+                </el-form-item>
+                <el-form-item label="合成文本" prop="tex_utf8">
+                    <el-input type="textarea" :rows="4" v-model="newAudio.tex_utf8" placeholder="请输入需要合成的文本">
+                    </el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="addAudioDialogVisible = false">取 消</el-button>
+                <el-button type="primary" @click="submitAudioForm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加播放列表对话框 -->
+        <el-dialog :title="isEditPlaylist ? '编辑播放列表' : '添加播放列表'" :visible.sync="addPlaylistDialogVisible" width="600px"
+            append-to-body>
+            <el-form :model="newPlaylist" :rules="playlistRules" ref="playlistForm" label-width="120px">
+                <el-form-item label="节目名称" prop="audioId">
+                    <el-select v-model="newPlaylist.audioId" placeholder="请选择节目" style="width: 100%">
+                        <el-option v-for="item in audioList" :key="item.id" :label="item.name" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="播放时间" prop="playTime">
+                    <div class="time-range">
+                        <div class="time-header">
+                            <el-checkbox v-model="newPlaylist.isAllDay" @change="handleAllDayChange">全天</el-checkbox>
+                        </div>
+                        <div class="time-pickers" v-if="!newPlaylist.isAllDay">
+                            <el-time-picker v-model="newPlaylist.playTimeStart" format="HH:mm" placeholder="开始时间"
+                                style="width: 45%">
+                            </el-time-picker>
+                            <span class="time-separator">至</span>
+                            <el-time-picker v-model="newPlaylist.playTimeEnd" format="HH:mm" placeholder="结束时间"
+                                style="width: 45%">
+                            </el-time-picker>
+                        </div>
+                    </div>
+                </el-form-item>
+                <el-form-item label="播放时长(秒)" prop="play_time">
+                    <el-input-number v-model="newPlaylist.play_time" :min="1" :max="600" :step="1"
+                        style="width: 100%"></el-input-number>
+                </el-form-item>
+                <el-form-item label="停顿时长(秒)" prop="pause_time">
+                    <el-input-number v-model="newPlaylist.pause_time" :min="0" :max="600" :step="1"
+                        style="width: 100%"></el-input-number>
+                </el-form-item>
+                <el-form-item label="星期重复" prop="weekdays">
+                    <div class="weekday-select">
+                        <el-checkbox v-model="newPlaylist.isAllWeek" @change="handleAllWeekChange">全选</el-checkbox>
+                        <el-checkbox-group v-model="newPlaylist.weekdays">
+                            <el-checkbox label="1">周一</el-checkbox>
+                            <el-checkbox label="2">周二</el-checkbox>
+                            <el-checkbox label="3">周三</el-checkbox>
+                            <el-checkbox label="4">周四</el-checkbox>
+                            <el-checkbox label="5">周五</el-checkbox>
+                            <el-checkbox label="6">周六</el-checkbox>
+                            <el-checkbox label="0">周日</el-checkbox>
+                        </el-checkbox-group>
+                    </div>
+                </el-form-item>
+                <el-form-item label="雷达开关" prop="radarEnabled">
+                    <el-switch v-model="newPlaylist.radarEnabled" active-color="#13ce66" inactive-color="#ff4949">
+                    </el-switch>
+                </el-form-item>
+                <el-collapse-transition>
+                    <div v-show="newPlaylist.radarEnabled" class="radar-settings">
+                        <el-form-item label="速度范围" prop="radarSpeed">
+                            <div class="speed-range">
+                                <el-input-number v-model="newPlaylist.radarSpeedMin" :min="0"
+                                    :max="newPlaylist.radarSpeedMax" :step="1" placeholder="最小速度">
+                                </el-input-number>
+                                <span class="speed-separator">-</span>
+                                <el-input-number v-model="newPlaylist.radarSpeedMax" :min="newPlaylist.radarSpeedMin"
+                                    :max="200" :step="1" placeholder="最大速度">
+                                </el-input-number>
+                                <span class="speed-unit">km/h</span>
+                            </div>
+                        </el-form-item>
+                    </div>
+                </el-collapse-transition>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancelPlaylistDialog">取 消</el-button>
+                <el-button type="primary" @click="submitPlaylistForm">确 定</el-button>
+            </div>
+        </el-dialog>
+
+        <!-- 添加自定义节目对话框 -->
+        <el-dialog title="添加自定义节目" :visible.sync="addProgramDialogVisible" width="700px" append-to-body>
+            <div
+                style="position:sticky;top:0;z-index:10;background:#fff;padding-top:8px;padding-bottom:16px;box-shadow:0 2px 8px #e0e0e0;text-align:center;margin-bottom: 20px;">
+                <canvas ref="addProgramPreviewCanvas" width="320" height="120"
+                    style="border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 8px #e0e0e0;background:#FFFFFF00;"></canvas>
+            </div>
+            <el-form :model="addProgramForm" ref="addProgramFormRef" label-width="60px" size="mini"
+                style="margin-bottom:0;">
+                <el-form-item label="节目模式" label-width="70px">
+                    <el-select v-model="addProgramForm.mode" placeholder="请选择模式" @change="onAddProgramModeChange"
+                        style="width:140px">
+                        <el-option v-for="(item, idx) in addProgramModes" :key="idx" :label="item" :value="idx" />
+                    </el-select>
+                    <el-form-item label="节目时长" label-width="70px" style="display:inline-block;margin-left:24px;">
+                        <el-input-number v-model="addProgramForm.duration" :min="1" :max="600" style="width:90px" /> 秒
+                    </el-form-item>
+                </el-form-item>
+                <el-divider style="margin:10px 0;" />
+                <div v-for="(zone, zIdx) in addProgramForm.zones" :key="zIdx"
+                    style="margin-bottom:10px;padding:10px 12px 8px 12px;border:1px solid #f0f0f0;border-radius:8px;background:#fafbfc;">
+                    <div style="font-weight:bold;font-size:14px;margin-bottom:6px;color:#409EFF;">分区{{ zIdx + 1 }}</div>
+                    <!-- 第一行：类型、常用语句、展示信息/图片路径 -->
+                    <el-row :gutter="12" style="margin-bottom:2px;">
+                        <el-col :span="6">
+                            <el-form-item label="类型" label-width="42px">
+                                <el-select v-model="zone.playType" placeholder="类型" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramPlayTypes" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6" v-if="zone.playType === 0">
+                            <el-form-item label="常用" label-width="42px">
+                                <el-select v-model="zone.commonPhrase" placeholder="常用语句"
+                                    @change="onAddProgramPhraseChange(zIdx)" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramCommonPhrases" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="15" v-if="zone.playType === 0">
+                            <el-form-item label="展示信息" label-width="70px">
+                                <el-input v-model="zone.displayText" type="textarea" placeholder="请输入展示信息" autosize
+                                    style="width:100%" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="19" v-if="zone.playType === 1">
+                            <el-form-item label="图片路径" label-width="70px">
+                                <el-input v-model="zone.image" placeholder="请输入图片路径或选择图片" style="width:100%" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <!-- 第二行：字体、字号、颜色、加粗、拉伸（仅文字） -->
+                    <el-row :gutter="12" v-if="zone.playType === 0" style="margin-bottom:2px;">
+                        <el-col :span="6">
+                            <el-form-item label="字体" label-width="42px">
+                                <el-select v-model="zone.font" placeholder="字体" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramFonts" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="字号" label-width="42px">
+                                <el-select v-model="zone.fontSize" placeholder="字号" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramFontSizes" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="颜色" label-width="42px">
+                                <el-select v-model="zone.fontColor" placeholder="颜色" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramFontColors" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="加粗" label-width="42px">
+                                <el-select v-model="zone.fontBold" placeholder="加粗" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramFontBold" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="拉伸" label-width="42px">
+                                <el-select v-model="zone.fontStretch" placeholder="拉伸" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramFontStretch" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <!-- 第三行：动画特效、速度、停留、水平、垂直 -->
+                    <el-row :gutter="8" style="margin-bottom:2px;">
+                        <el-col :span="6">
+                            <el-form-item label="特效" label-width="42px">
+                                <el-select v-model="zone.effect" placeholder="特效" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramEffects" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="速度" label-width="42px">
+                                <el-select v-model="zone.speed" placeholder="速度" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramSpeeds" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="停留" label-width="42px">
+                                <el-select v-model="zone.stayTime" placeholder="停留" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramStayTimes" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="水平" label-width="42px">
+                                <el-select v-model="zone.hAlign" placeholder="水平" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramHorizontalAlign" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="垂直" label-width="42px">
+                                <el-select v-model="zone.vAlign" placeholder="垂直" style="width:100%">
+                                    <el-option v-for="(item, idx) in addProgramVerticalAlign" :key="idx" :label="item"
+                                        :value="idx" />
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <!-- 第四行：X、宽、Y、高 -->
+                    <el-row :gutter="8">
+                        <el-col :span="5">
+                            <el-form-item label="X" label-width="20px">
+                                <el-input-number v-model="zone.x" :min="0" style="width:100%" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="宽" label-width="24px">
+                                <el-input-number v-model="zone.width" :min="1" style="width:100%" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="Y" label-width="20px">
+                                <el-input-number v-model="zone.y" :min="0" style="width:100%" />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="高" label-width="24px">
+                                <el-input-number v-model="zone.height" :min="1" style="width:100%" />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </div>
+                <div style="text-align: right;margin-top:8px;">
+                    <el-button @click="addProgramDialogVisible = false" size="mini">取 消</el-button>
+                    <el-button type="primary" @click="submitAddProgram" size="mini">确 定</el-button>
+                </div>
+            </el-form>
+        </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();
+                    });
+                    console.log("物模型", JSON.stringify(this.deviceInfo.thingsModels));
+
+                    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);
+                    }
+                }
+            },
+        },
+        // 监听自定义节目参数变化，实时刷新预览
+        addProgramForm: {
+            handler() {
+                this.$nextTick(() => {
+                    this.prepareAddProgramPreviewAssets();
+                    this.resetAddProgramPreviewPage();
+                    this.resetAddProgramPreviewAnimState();
+                    this.drawAddProgramPreview();
+                    this.startAddProgramPreviewAutoPage();
+                    this.startAddProgramPreviewAnimLoop();
+                });
+            },
+            deep: true
+        },
+        addProgramDialogVisible(val) {
+            if (val) {
+                this.$nextTick(() => {
+                    this.prepareAddProgramPreviewAssets();
+                    this.resetAddProgramPreviewPage();
+                    this.resetAddProgramPreviewAnimState();
+                    this.drawAddProgramPreview();
+                    this.startAddProgramPreviewAutoPage();
+                    this.startAddProgramPreviewAnimLoop();
+                });
+            } else {
+                this.stopAddProgramPreviewAutoPage();
+                this.stopAddProgramPreviewAnimLoop();
+            }
+        },
+    },
+
+    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: {
+                screenEnabled: true,
+                brightness: 50
+            },
+            bootSettings: {
+                showBootScreen: false,
+                resetEnabled: false
+            },
+            audioList: [],
+            defaultList: [],
+            // 录音相关数据
+            isRecording: false,
+            recordingTime: 0,
+            recordingStatus: '准备就绪',
+            hasRecording: false,
+            mediaRecorder: null,
+            audioChunks: [],
+            recordings: [],
+            timer: null,
+            audioUrl: null,
+            // 音频列表相关数据
+            addAudioDialogVisible: false,
+            newAudio: {
+                remark: '',
+                per: 0,
+                spd: 5,
+                pit: 5,
+                vol: 5,
+                tex_utf8: '',
+                filename: ''
+            },
+            audioRules: {
+                remark: [
+                    { required: true, message: '请输入备注', trigger: 'blur' }
+                ],
+                per: [
+                    { required: true, message: '请选择主持人声音', trigger: 'change' }
+                ],
+                spd: [
+                    { required: true, message: '请设置合成语速', trigger: 'change' }
+                ],
+                pit: [
+                    { required: true, message: '请设置合成音调', trigger: 'change' }
+                ],
+                vol: [
+                    { required: true, message: '请设置合成音量', trigger: 'change' }
+                ],
+                tex_utf8: [
+                    { required: true, message: '请输入合成文本', trigger: 'blur' }
+                ]
+            },
+            // 播放列表相关数据
+            addPlaylistDialogVisible: false,
+            newPlaylist: {
+                name: '',
+                type: '用户',
+                status: '启用',
+                audioId: '',
+                playTimeStart: null,
+                playTimeEnd: null,
+                weekdays: [],
+                radarEnabled: false,
+                radarSpeedMin: 0,
+                radarSpeedMax: 120,
+                isAllDay: false,
+                isAllWeek: false,
+                play_time: 1,
+                pause_time: 0
+            },
+            playlistRules: {
+                audioId: [
+                    { required: true, message: '请选择音频', trigger: 'change' }
+                ],
+                playTime: [
+                    {
+                        validator: (rule, value, callback) => {
+                            if (!this.newPlaylist.playTimeStart || !this.newPlaylist.playTimeEnd) {
+                                callback(new Error('请选择播放时间段'));
+                            } else {
+                                callback();
+                            }
+                        },
+                        trigger: 'change'
+                    }
+                ],
+                weekdays: [
+                    { required: true, message: '请选择重复日期', trigger: 'change' }
+                ],
+                radarSpeed: [
+                    {
+                        validator: (rule, value, callback) => {
+                            if (this.newPlaylist.radarEnabled) {
+                                if (!this.newPlaylist.radarSpeedMin || !this.newPlaylist.radarSpeedMax) {
+                                    callback(new Error('请设置速度范围'));
+                                } else if (this.newPlaylist.radarSpeedMin >= this.newPlaylist.radarSpeedMax) {
+                                    callback(new Error('最小速度必须小于最大速度'));
+                                } else {
+                                    callback();
+                                }
+                            } else {
+                                callback();
+                            }
+                        },
+                        trigger: 'change'
+                    }
+                ],
+                play_time: [
+                    { required: true, message: '请输入播放时长', trigger: 'blur' }
+                ],
+                pause_time: [
+                    { required: true, message: '请输入停顿时长', trigger: 'blur' }
+                ]
+            },
+            isEditPlaylist: false,
+            editingPlaylistIndex: null,
+            _mp3Encoder: null,
+            _audioChunks: [],
+            _audioContext: null,
+            _sourceNode: null,
+            _processorNode: null,
+            _stream: null,
+            screenParams: {
+                template: '',        // 屏幕模板
+                oePolarity: 0,       // OE极性
+                dataPolarity: 0,     // DATA极性
+                width: 64,           // 屏宽
+                height: 32,          // 屏高
+                angle: 0             // 屏幕角度
+            },
+            // 新增：自定义节目相关
+            addProgramDialogVisible: false,
+            addProgramForm: {
+                mode: 0,
+                duration: 10,
+                zones: [
+                    {
+                        playType: 0,
+                        commonPhrase: 0,
+                        displayText: '',
+                        font: 0,
+                        fontShape: 0,
+                        fontSize: 0,
+                        fontColor: 0,
+                        fontBold: 0,
+                        fontStretch: 0,
+                        image: '',
+                        effect: 0,
+                        speed: 4,
+                        stayTime: 5,
+                        hAlign: 1,
+                        vAlign: 1,
+                        x: 0,
+                        y: 0,
+                        width: 32,
+                        height: 64
+                    }
+                ]
+            },
+            addProgramModes: ['模式1', '模式2(上下)', '模式3(左右)', '模式4(上中下)', '模式5', '模式6'],
+            addProgramPlayTypes: ['文字', '图片'],
+            addProgramCommonPhrases: ['自定义', "公安交警正在巡逻",
+                "公安交警停车检查",
+                "前方事故减速慢行",
+                "警察临检请您配合",
+                "交警临检请您配合",
+                "《《《《《",
+                "》》》》》",
+                "禁止停车",
+                "交通管制禁止通行",
+                "公安检查靠边停车",
+                "前方事故道路封闭",
+                "禁止掉头",
+                "雨雪天气注意安全",
+                "大雾天气减速慢行",
+                "靠右停车接受检查",
+                "警察临检靠边停车"],
+            addProgramFonts: ['宋体(中)', '黑体(中)', '楷体(中)'],
+            addProgramFontShapes: ['圆角(英)', '直角(英)'],
+            addProgramFontSizes: ['16px', '24px', '32px'],
+            addProgramFontColors: ['红色', '绿色', '蓝色'],
+            addProgramFontBold: ['不加粗', '加粗'],
+            addProgramFontStretch: ['不拉伸', '横向拉伸', '纵向拉伸'],
+            addProgramEffects: ['立即显示', '左移', '右移', '上移', '下移', '连续左移', '闪烁换页'],
+            addProgramSpeeds: ['1X', '2X', '3X', '4X', '5X'],
+            addProgramStayTimes: ['不停顿', '100毫秒', '500毫秒', '1秒', '2秒', '3秒', '4秒', '5秒', '6秒', '8秒', '10秒'],
+            addProgramHorizontalAlign: ['居左对齐', '居中对齐', '居右对齐'],
+            addProgramVerticalAlign: ['顶部对齐', '居中对齐', '底部对齐'],
+            // 自动分页相关
+            addProgramPreviewPage: [0], // 每个分区当前页
+            addProgramPreviewTimer: [], // 每个分区定时器
+            addProgramPreviewAssets: [], // 每个分区的分行分页缓存
+            addProgramPreviewAnimState: [], // 每个分区动画状态
+            addProgramPreviewAnimFrame: null, // 动画主循环ID
+        };
+    },
+    mounted() {
+        if (this.device && this.device.deviceId) {
+            this.handleDeviceChange(this.device);
+            this.initDataStatus();
+            this.initData();
+        }
+        // 初始化自定义节目预览
+        this.$nextTick(() => {
+            this.drawAddProgramPreview();
+        });
+    },
+
+    methods: {
+        //发送指令
+        async mqttPublish(device, model) {
+            const command = {};
+            command[model.id] = model.shadow;
+            const params = {
+                deviceId: device.deviceId,
+                modelId: model.modelId,
+            };
+            const response = await getOrderControl(params);
+            if (response.code != 200) {
+                this.$message({
+                    type: 'warning',
+                    message: response.msg,
+                });
+                return;
+            }
+            const data = {
+                serialNumber: device.serialNumber,
+                productId: device.productId,
+                remoteCommand: command,
+                identifier: model.id,
+                modelName: model.name,
+                isShadow: device.status != 3,
+                type: model.type,
+            };
+            //设备在线状态判断
+            if (this.device.status !== 3 && this.device.isShadow !== 1) {
+                let title = '';
+                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);
+                    }
+                });
+            }
+        },
+
+        // 保留原有的设备状态相关方法
+        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);
+                    this.updateBasicSettings(); // 更新基础设置
+                    this.printThingsModels();
+                }
+                if (this.deviceInfo.chartList && this.deviceInfo.chartList.length > 0) {
+                    this.deviceInfo.chartList = this.deviceInfo.chartList.sort((a, b) => b.order - a.order);
+                }
+            }
+        },
+
+        // 更新基础设置
+        updateBasicSettings() {
+            if (!this.deviceInfo.thingsModels) return;
+
+            // 更新音频开关状态
+            const playEnModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playEn');
+            if (playEnModel) {
+                this.basicSettings.audioEnabled = playEnModel.shadow === '1';
+            }
+
+            // 更新音量设置
+            const volumeModel = this.deviceInfo.thingsModels.find(model => model.id === '103#volume');
+            if (volumeModel) {
+                this.basicSettings.volume = parseInt(volumeModel.shadow) || 50;
+            }
+
+            // 更新音频列表
+            const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#mp3List');
+            if (mp3ListModel && mp3ListModel.shadow) {
+                try {
+                    // 解析 JSON 字符串
+                    const jsonStr = mp3ListModel.shadow.replace('JSON=', '');
+                    const data = JSON.parse(jsonStr);
+
+                    // 更新音频列表
+                    const mp3List = data.sound_card?.mp3_list || data.mp3_list;
+                    if (mp3List) {
+                        this.audioList = mp3List.map((item) => {
+                            const [idStr, name] = item.split('_');
+                            return {
+                                id: parseInt(idStr, 10),
+                                name: name || item,
+                                raw: item
+                            };
+                        }).sort((a, b) => a.id - b.id); // 按id从小到大排序
+                    }
+                } catch (error) {
+                    console.error('解析音频列表失败:', error);
+                }
+            }
+
+            // 更新播放列表
+            const playListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playList');
+            if (playListModel && playListModel.shadow) {
+                try {
+                    const jsonStr = playListModel.shadow.replace('JSON=', '');
+                    const data = JSON.parse(jsonStr);
+
+                    // 兼容 sound_card 层和根节点
+                    const playList = data.sound_card?.play_list || data.play_list;
+                    if (playList) {
+                        this.defaultList = playList.map((item, index) => {
+                            // 转换时间格式
+                            const beginTime = this.formatSecondsToTime(item.time.begin);
+                            const endTime = this.formatSecondsToTime(item.time.end);
+
+                            // 转换星期格式
+                            const weekdays = this.convertWeekToArray(item.time.week);
+
+                            return {
+                                id: index + 1,
+                                name: item.play.filename,
+                                playTime: (item.time.begin === 0 && item.time.end === 86400)
+                                    ? '全天'
+                                    : `${beginTime} - ${endTime}`,
+                                weekdays: weekdays.join(', '),
+                                radarEnabled: item.speed.en === 1,
+                                status: item.play.en === 1 ? '启用' : '禁用',
+                                radarSpeed: item.speed.en === 1 ? `${item.speed.min}-${item.speed.max}km/h` : '',
+                                rawIndex: index // 新增
+                            };
+                        });
+                    }
+                } catch (error) {
+                    console.error('解析播放列表失败:', error);
+                }
+            }
+        },
+
+        printThingsModels() {
+            console.log('当前物模型数据:', JSON.stringify(this.deviceInfo.thingsModels, null, 2));
+            this.$message({
+                message: '物模型数据已打印到控制台',
+                type: 'success'
+            });
+        },
+
+        // 声卡特有方法
+        formatVolume(val) {
+            return val + '%';
+        },
+
+        handleVolumeChange(val) {
+            const volumeModel = this.deviceInfo.thingsModels.find(model => model.id === '103#volume');
+            if (volumeModel) {
+                volumeModel.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, volumeModel);
+            }
+        },
+
+        // 保留其他必要的方法
+        initData() {
+            this.$busEvent.$on('updateData', (params) => {
+                this.updateParam(params);
+            });
+        },
+
+        // 处理设备上报的数据更新
+        // updateParam(params) {
+        //     console.log(1111111111)
+        //     if (!params || !this.deviceInfo.thingsModels) return;
+
+        //     const { serialNumber, productId, data } = params;
+        //     if (data && this.deviceInfo.serialNumber === serialNumber) {
+        //         // 更新物模型数据
+        //         this.deviceInfo.thingsModels.forEach(model => {
+        //             if (data[model.id] !== undefined) {
+        //                 model.shadow = data[model.id];
+        //             }
+        //         });
+
+        //         // 更新基础设置
+        //         this.updateBasicSettings();
+        //     }
+        // },
+
+
+        //更新参数值
+        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;
+                        }
+                    }
+                }
+            }
+            this.updateBasicSettings();
+        },
+
+
+
+
+
+
+        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;
+        },
+
+        // 添加版本比较方法
+        compareVersions(version1, version2) {
+            // 移除可能的'Version'前缀
+            version1 = String(version1).replace('Version', '').trim();
+            version2 = String(version2).replace('Version', '').trim();
+
+            const v1Parts = version1.split('.').map(Number);
+            const v2Parts = version2.split('.').map(Number);
+
+            for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+                const v1 = v1Parts[i] || 0;
+                const v2 = v2Parts[i] || 0;
+
+                if (v1 < v2) return true;
+                if (v1 > v2) return false;
+            }
+            return false;
+        },
+
+        /** 获取最新固件 */
+        getLatestFirmware() {
+            const { deviceId, firmwareType } = this.deviceInfo;
+            if (!deviceId || !firmwareType) {
+                this.$message.error('设备信息不完整');
+                return;
+            }
+            getLatestFirmware(deviceId, firmwareType).then((response) => {
+                if (response.code === 200) {
+                    if (response.data) {
+                        this.firmware = response.data;
+                        // 添加版本比较的调试信息
+                        console.log('当前版本:', this.deviceInfo.firmwareVersion);
+                        console.log('新版本:', this.firmware.version);
+                        console.log('版本比较结果:', this.compareVersions(this.deviceInfo.firmwareVersion, this.firmware.version));
+                        this.openFirmware = true;
+                    } else {
+                        this.$message.info('当前已是最新版本');
+                        this.openFirmware = true;
+                    }
+                } else {
+                    this.$message.error(response.msg || '获取固件信息失败');
+                }
+            }).catch(error => {
+                console.error('获取固件信息失败:', error);
+                this.$message.error('获取固件信息失败');
+            });
+        },
+        /** 设备升级 */
+        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;
+        },
+
+        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);
+            }
+        },
+
+        // 录音相关方法
+        floatTo16BitPCM(input) {
+            const output = new Int16Array(input.length);
+            for (let i = 0; i < input.length; i++) {
+                let s = Math.max(-1, Math.min(1, input[i]));
+                output[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
+            }
+            return output;
+        },
+        async startRecording() {
+            if (this.isRecording) return;
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    audio: {
+                        sampleRate: 44100,
+                        channelCount: 2,
+                        sampleSize: 16,
+                        autoGainControl: false,
+                        noiseSuppression: false,
+                        echoCancellation: false
+                    }
+                });
+                const Mp3Encoder = window.lamejs.Mp3Encoder;
+                this._mp3Encoder = new Mp3Encoder(2, 44100, 128);
+                this._audioChunks = [];
+                this._audioContext = new AudioContext({ sampleRate: 44100 });
+                this._sourceNode = this._audioContext.createMediaStreamSource(stream);
+                this._processorNode = this._audioContext.createScriptProcessor(4096, 2, 2);
+                this._stream = stream;
+                this._processorNode.onaudioprocess = (event) => {
+                    const leftChannel = event.inputBuffer.getChannelData(0);
+                    const rightChannel = event.inputBuffer.getChannelData(1);
+                    // 修正：Float32转Int16
+                    const left = this.floatTo16BitPCM(leftChannel);
+                    const right = this.floatTo16BitPCM(rightChannel);
+                    const mp3Buffer = this._mp3Encoder.encodeBuffer(left, right);
+                    if (mp3Buffer.length > 0) {
+                        this._audioChunks.push(mp3Buffer);
+                    }
+                };
+                this._sourceNode.connect(this._processorNode);
+                this._processorNode.connect(this._audioContext.destination);
+                this.isRecording = true;
+                this.recordingStatus = '正在录音...';
+                this.recordingTime = 0;
+                this.timer = setInterval(() => this.recordingTime++, 1000);
+            } catch (error) {
+                console.error('录音失败:', error);
+                this.$message.error(`录音失败: ${error.message}`);
+            }
+        },
+
+        stopRecording() {
+            if (!this.isRecording) return;
+            clearInterval(this.timer);
+            if (this._sourceNode) this._sourceNode.disconnect();
+            if (this._processorNode) this._processorNode.disconnect();
+            if (this._stream) this._stream.getTracks().forEach(track => track.stop());
+            // 刷新编码器缓冲区
+            if (this._mp3Encoder) {
+                const lastChunk = this._mp3Encoder.flush();
+                if (lastChunk.length > 0) this._audioChunks.push(lastChunk);
+            }
+            // 生成 MP3 文件
+            const mp3Blob = new Blob(this._audioChunks, { type: 'audio/mp3' });
+            this.audioUrl = URL.createObjectURL(mp3Blob);
+            this.hasRecording = true;
+            this.recordingStatus = '录音完成';
+            this.audioChunks = this._audioChunks;
+            this.isRecording = false;
+        },
+
+        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`);
+
+                // 强制使用 HTTP 协议，因为接口只支持 HTTP
+                const uploadUrl = 'https://iot-xcwl.cn/common/upload/audio';
+                // const uploadUrl = 'http://1.94.62.14:8080/common/upload/audio';
+
+                // 调用上传接口
+                const response = await fetch(uploadUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImU3MWM2OTg4LTNlMzMtNDYyMy05M2M3LWE4YzZmMTNlMjZkZSJ9.wgsL8b3WDmyuesG8JTA3LcNFp2FigkB90h6Inwxt7OFadH6rc5np5TjAyU1pzU2_b5cmG8BYXMEdAqEdJzoDcA'
+                    },
+                    body: formData
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    if (result.code === 200) {
+                        this.$message.success('上传成功');
+                        this.recordings.unshift({
+                            name: `录音_${this.formatTime(this.recordingTime)}`,
+                            time: new Date().toLocaleString()
+                        });
+
+                        // 提取返回的 URL 并通过 MQTT 下发到 103#onlinePlay
+                        if (result.url) {
+                            const onlinePlayModel = this.deviceInfo.thingsModels.find(model => model.id === '103#onlinePlay');
+                            if (onlinePlayModel) {
+                                // 构建包含 interrupt 参数的 JSON 数据
+                                const playData = 'JSON=' + JSON.stringify({
+                                    online_play: {
+                                        url: "http://1.94.62.14:8080" + result.resourcePath,
+                                    },
+                                    interrupt: 98
+                                });
+                                onlinePlayModel.shadow = playData;
+                                await this.mqttPublish(this.deviceInfo, onlinePlayModel);
+                                this.$message.success('音频已下发到设备');
+                            } else {
+                                this.$message.warning('未找到 103#onlinePlay 物模型');
+                            }
+                        }
+
+                        // 重置录音状态
+                        this.reRecord();
+                    } else {
+                        this.$message.error(result.msg || '上传失败');
+                    }
+                } else {
+                    this.$message.error('上传失败，请检查网络连接');
+                }
+            } catch (error) {
+                // 处理混合内容错误
+                if (error.message && error.message.includes('Mixed Content')) {
+                    this.$message.error('由于安全策略，无法在 HTTPS 页面访问 HTTP 接口。请联系管理员配置接口支持 HTTPS。');
+                } else {
+                    this.$message.error('上传失败');
+                }
+                console.error('上传错误:', error);
+            }
+        },
+
+        deleteRecording(index) {
+            this.recordings.splice(index, 1);
+        },
+
+        handleAudioSwitchChange(val) {
+            const playEnModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playEn');
+            if (playEnModel) {
+                playEnModel.shadow = val ? '1' : '0';
+                this.mqttPublish(this.deviceInfo, playEnModel);
+            }
+        },
+
+        showAddAudioDialog() {
+            this.addAudioDialogVisible = true;
+            this.newAudio = {
+                remark: '',
+                per: 0,
+                spd: 5,
+                pit: 5,
+                vol: 5,
+                tex_utf8: '',
+                filename: ''
+            };
+        },
+
+        // 获取未使用的最小ID（从0开始）
+        getNextAvailableId() {
+            const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#mp3List');
+            if (mp3ListModel) {
+                try {
+                    const jsonStr = mp3ListModel.shadow.replace('JSON=', '');
+                    const data = JSON.parse(jsonStr);
+                    const mp3List = data.sound_card?.mp3_list || data.mp3_list || [];
+                    // 获取所有已使用的ID
+                    const usedIds = mp3List.map(item => {
+                        const id = parseInt(item.split('_')[0]);
+                        return isNaN(id) ? 0 : id;
+                    });
+                    // 找到最小的未使用ID（从0开始）
+                    let nextId = 1;
+                    while (usedIds.includes(nextId)) {
+                        nextId++;
+                    }
+                    return nextId;
+                } catch (error) {
+                    console.error('解析mp3_list失败:', error);
+                }
+            }
+            return 0; // 如果出错，返回0
+        },
+
+        submitAudioForm() {
+            this.$refs.audioForm.validate((valid) => {
+                if (valid) {
+                    // 找到mp3_list物模型
+                    const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#mp3List');
+                    if (mp3ListModel) {
+                        try {
+                            // 获取下一个可用的ID
+                            const nextId = this.getNextAvailableId();
+
+                            // 生成文件名
+                            const filename = `${nextId}_${this.newAudio.remark}`;
+
+                            // 构建TTS对象
+                            const ttsData = {
+                                JSON_id: 1,
+
+                                TTS: {
+                                    per: this.newAudio.per,
+                                    spd: this.newAudio.spd,
+                                    pit: this.newAudio.pit,
+                                    vol: this.newAudio.vol,
+                                    tex_utf8: this.newAudio.tex_utf8,
+                                    filename: filename,
+                                },
+                                "interrupt": 99
+
+                            };
+
+                            // 更新物模型shadow值
+                            mp3ListModel.shadow = 'JSON=' + JSON.stringify(ttsData);
+
+                            // 发送更新
+                            this.mqttPublish(this.deviceInfo, mp3ListModel);
+
+                            this.addAudioDialogVisible = false;
+                            this.$message.success('添加成功');
+                        } catch (error) {
+                            console.error('添加音频失败:', error);
+                            this.$message.error('添加失败');
+                        }
+                    }
+                }
+            });
+        },
+
+        handleDeleteAudio(row) {
+            this.$confirm('确认删除该音频吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                // 找到mp3_list物模型
+                const mp3ListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#mp3List');
+                if (mp3ListModel) {
+                    try {
+                        // 解析当前JSON
+                        const jsonStr = mp3ListModel.shadow.replace('JSON=', '');
+                        const data = JSON.parse(jsonStr);
+                        // 用 raw 字段精确匹配，只操作根节点
+                        const audioRaw = row.raw;
+                        if (data.mp3_list) {
+                            data.mp3_list = data.mp3_list.filter(item => item !== audioRaw);
+                        }
+                        // 更新物模型shadow值
+                        const newShadow = 'JSON=' + JSON.stringify(data);
+                        mp3ListModel.shadow = newShadow;
+                        // 发送更新
+                        this.mqttPublish(this.deviceInfo, mp3ListModel).then(() => {
+                            this.$message.success('删除成功');
+                        }).catch(error => {
+                            console.error('发送删除命令失败:', error);
+                            this.$message.error('删除失败');
+                        });
+                    } catch (error) {
+                        console.error('解析或更新mp3_list失败:', error);
+                        this.$message.error('删除失败');
+                    }
+                }
+            }).catch(() => { });
+        },
+
+        showAddPlaylistDialog() {
+            // 重置编辑状态
+            this.isEditPlaylist = false;
+            this.editingPlaylistIndex = null;
+
+            this.addPlaylistDialogVisible = true;
+            this.newPlaylist = {
+                name: '',
+                type: '用户',
+                status: '启用',
+                audioId: '',
+                playTimeStart: null,
+                playTimeEnd: null,
+                weekdays: [],
+                radarEnabled: false,
+                radarSpeedMin: 0,
+                radarSpeedMax: 120,
+                isAllDay: false,
+                isAllWeek: false,
+                play_time: 1,
+                pause_time: 0
+            };
+        },
+
+        submitPlaylistForm() {
+            this.$refs.playlistForm.validate((valid) => {
+                if (valid) {
+                    // 找到play_list物模型
+                    const playListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playList');
+                    if (playListModel) {
+                        try {
+                            // 解析当前JSON，若为空则初始化
+                            let jsonStr = playListModel.shadow ? playListModel.shadow.replace('JSON=', '') : '';
+                            let data = {};
+                            if (jsonStr) {
+                                data = JSON.parse(jsonStr);
+                            } else {
+                                data = { play_list: [] };
+                            }
+
+                            // 获取选中的音频信息
+                            const selectedAudio = this.audioList.find(audio => audio.id === this.newPlaylist.audioId);
+                            if (!selectedAudio) {
+                                this.$message.error('未找到选中的音频');
+                                return;
+                            }
+
+                            // 构建播放项
+                            const playItem = {
+                                play: {
+                                    en: this.newPlaylist.status === '启用' ? 1 : 0,
+                                    num: this.isEditPlaylist ? (this.editingPlaylistIndex + 1) : (this.defaultList.length + 1),
+                                    sou: 0,
+                                    filename: `${selectedAudio.id}_${selectedAudio.name}`,
+                                    play_time: this.newPlaylist.play_time,
+                                    pause_time: this.newPlaylist.pause_time
+                                },
+                                time: {
+                                    en: 1,
+                                    begin: this.newPlaylist.isAllDay ? 0 : this.convertTimeToSeconds(this.newPlaylist.playTimeStart),
+                                    end: this.newPlaylist.isAllDay ? 86400 : this.convertTimeToSeconds(this.newPlaylist.playTimeEnd),
+                                    week: this.convertWeekArrayToValue(this.newPlaylist.weekdays)
+                                },
+                                speed: {
+                                    en: this.newPlaylist.radarEnabled ? 1 : 0,
+                                    min: this.newPlaylist.radarEnabled ? this.newPlaylist.radarSpeedMin : 0,
+                                    max: this.newPlaylist.radarEnabled ? this.newPlaylist.radarSpeedMax : 0
+                                }
+                            };
+
+                            // 直接操作根节点的play_list
+                            if (!data.play_list) {
+                                data.play_list = [];
+                            }
+
+                            if (this.isEditPlaylist) {
+                                // 编辑模式：更新现有播放项
+                                if (data.play_list[this.editingPlaylistIndex]) {
+                                    data.play_list[this.editingPlaylistIndex] = playItem;
+                                } else {
+                                    this.$message.error('未找到要编辑的播放项');
+                                    return;
+                                }
+                            } else {
+                                // 添加模式：添加新播放项
+                                data.play_list.push(playItem);
+                            }
+
+                            // 更新物模型shadow值
+                            playListModel.shadow = 'JSON=' + JSON.stringify(data);
+
+                            // 发送更新
+                            this.mqttPublish(this.deviceInfo, playListModel).then(() => {
+                                const isEdit = this.isEditPlaylist;
+                                this.addPlaylistDialogVisible = false;
+                                this.isEditPlaylist = false;
+                                this.editingPlaylistIndex = null;
+                                this.$message.success(isEdit ? '编辑成功' : '添加成功');
+                            }).catch(error => {
+                                console.error('发送播放列表更新失败:', error);
+                                this.$message.error(this.isEditPlaylist ? '编辑失败' : '添加失败');
+                            });
+                        } catch (error) {
+                            console.error('解析或更新播放列表失败:', error);
+                            this.$message.error(this.isEditPlaylist ? '编辑失败' : '添加失败');
+                        }
+                    }
+                }
+            });
+        },
+
+        // 将时间转换为秒数
+        convertTimeToSeconds(time) {
+            if (!time) return 0;
+            return time.getHours() * 3600 + time.getMinutes() * 60;
+        },
+
+        // 将星期数组转换为位值
+        convertWeekArrayToValue(weekdays) {
+            let value = 0;
+            weekdays.forEach(day => {
+                value |= (1 << parseInt(day));
+            });
+            return value;
+        },
+
+        formatSpeed(val) {
+            return val;
+        },
+
+        formatPitch(val) {
+            return val;
+        },
+
+        formatVolume(val) {
+            return val;
+        },
+
+        // 将秒数转换为时间格式
+        formatSecondsToTime(seconds) {
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+        },
+
+        // 将星期位转换为数组
+        convertWeekToArray(week) {
+            const weekMap = {
+                1: '周一',
+                2: '周二',
+                3: '周三',
+                4: '周四',
+                5: '周五',
+                6: '周六',
+                0: '周日'
+            };
+            const result = [];
+            for (let i = 0; i < 7; i++) {
+                if (week & (1 << i)) {
+                    result.push(weekMap[i]);
+                }
+            }
+            return result;
+        },
+
+        handleStatusChange(row) {
+            const playListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playList');
+            if (playListModel) {
+                try {
+                    let jsonStr = playListModel.shadow ? playListModel.shadow.replace('JSON=', '') : '';
+                    let data = {};
+                    if (jsonStr) {
+                        data = JSON.parse(jsonStr);
+                    } else {
+                        data = { play_list: [] };
+                    }
+
+                    // 兼容 sound_card 和根节点
+                    const playListArr = data.sound_card?.play_list || data.play_list;
+                    if (playListArr && playListArr[row.rawIndex]) {
+                        playListArr[row.rawIndex].play.en = row.status === '启用' ? 1 : 0;
+                        // 更新物模型shadow值
+                        if (data.sound_card) {
+                            data.sound_card.play_list = playListArr;
+                        } else {
+                            data.play_list = playListArr;
+                        }
+                        playListModel.shadow = 'JSON=' + JSON.stringify(data);
+                        // 发送更新
+                        this.mqttPublish(this.deviceInfo, playListModel).then(() => {
+                            this.$message.success('状态更新成功');
+                        }).catch(error => {
+                            console.error('发送状态更新失败:', error);
+                            this.$message.error('状态更新失败');
+                        });
+                    }
+                } catch (error) {
+                    console.error('解析或更新播放列表状态失败:', error);
+                    this.$message.error('状态更新失败');
+                }
+            }
+        },
+
+        handleEditPlaylist(row) {
+            // 设置编辑模式
+            this.isEditPlaylist = true;
+            this.editingPlaylistIndex = row.rawIndex;
+
+            // 找到对应的播放项数据
+            const playListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playList');
+            if (playListModel && playListModel.shadow) {
+                try {
+                    const jsonStr = playListModel.shadow.replace('JSON=', '');
+                    const data = JSON.parse(jsonStr);
+
+                    if ((data.sound_card && data.sound_card.play_list && data.sound_card.play_list[row.rawIndex]) ||
+                        (data.play_list && data.play_list[row.rawIndex])) {
+                        const playItem = (data.sound_card?.play_list || data.play_list)[row.rawIndex];
+
+                        // 填充表单数据
+                        this.newPlaylist = {
+                            name: playItem.play.filename,
+                            type: '用户',
+                            status: playItem.play.en === 1 ? '启用' : '禁用',
+                            audioId: this.getAudioIdFromFilename(playItem.play.filename),
+                            playTimeStart: this.convertSecondsToTime(playItem.time.begin),
+                            playTimeEnd: this.convertSecondsToTime(playItem.time.end),
+                            weekdays: this.convertWeekValueToArray(playItem.time.week),
+                            radarEnabled: playItem.speed.en === 1,
+                            radarSpeedMin: playItem.speed.min || 0,
+                            radarSpeedMax: playItem.speed.max || 120,
+                            isAllDay: playItem.time.begin === 0 && playItem.time.end === 86400,
+                            isAllWeek: this.isAllWeekSelected(playItem.time.week),
+                            play_time: playItem.play.play_time || 1,
+                            pause_time: playItem.play.pause_time || 0
+                        };
+
+                        this.addPlaylistDialogVisible = true;
+                    }
+                } catch (error) {
+                    console.error('解析播放列表数据失败:', error);
+                    this.$message.error('获取播放列表数据失败');
+                }
+            }
+        },
+
+        // 从文件名获取音频ID
+        getAudioIdFromFilename(filename) {
+            if (!filename) return '';
+            const parts = filename.split('_');
+            if (parts.length >= 2) {
+                const audioId = parseInt(parts[0]);
+                return isNaN(audioId) ? '' : audioId;
+            }
+            return '';
+        },
+
+        // 将秒数转换为时间对象
+        convertSecondsToTime(seconds) {
+            if (seconds === 0) return new Date(2000, 0, 1, 0, 0);
+            if (seconds === 86400) return new Date(2000, 0, 1, 0, 0);
+
+            const hours = Math.floor(seconds / 3600);
+            const minutes = Math.floor((seconds % 3600) / 60);
+            return new Date(2000, 0, 1, hours, minutes);
+        },
+
+        // 将星期位值转换为数组
+        convertWeekValueToArray(week) {
+            const result = [];
+            for (let i = 0; i < 7; i++) {
+                if (week & (1 << i)) {
+                    result.push(i.toString());
+                }
+            }
+            return result;
+        },
+
+        // 检查是否全选星期
+        isAllWeekSelected(week) {
+            return week === 127; // 127 = 1111111 (二进制)
+        },
+
+        handleDeletePlaylist(row) {
+            this.$confirm('确认删除该播放项吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                const playListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playList');
+                if (playListModel) {
+                    try {
+                        let jsonStr = playListModel.shadow ? playListModel.shadow.replace('JSON=', '') : '';
+                        let data = {};
+                        if (jsonStr) {
+                            data = JSON.parse(jsonStr);
+                        } else {
+                            data = { play_list: [] };
+                        }
+
+                        if ((data.sound_card && data.sound_card.play_list) || data.play_list) {
+                            // 删除对应的播放项
+                            const playListArr = data.sound_card?.play_list || data.play_list;
+                            playListArr.splice(row.rawIndex, 1);
+
+                            // 更新序号
+                            playListArr.forEach((item, index) => {
+                                item.play.num = index + 1;
+                            });
+
+                            // 更新物模型shadow值
+                            if (data.sound_card) {
+                                data.sound_card.play_list = playListArr;
+                            } else {
+                                data.play_list = playListArr;
+                            }
+                            playListModel.shadow = 'JSON=' + JSON.stringify(data);
+
+                            // 发送更新
+                            this.mqttPublish(this.deviceInfo, playListModel).then(() => {
+                                this.$message.success('删除成功');
+                            }).catch(error => {
+                                console.error('发送删除命令失败:', error);
+                                this.$message.error('删除失败');
+                            });
+                        }
+                    } catch (error) {
+                        console.error('解析或更新播放列表失败:', error);
+                        this.$message.error('删除失败');
+                    }
+                }
+            }).catch(() => { });
+        },
+
+        /** 处理全天选择变化 */
+        handleAllDayChange(val) {
+            if (val) {
+                // 设置为全天时，将时间设置为 00:00 到 23:59
+                this.newPlaylist.playTimeStart = new Date(2000, 0, 1, 0, 0);
+                this.newPlaylist.playTimeEnd = new Date(2000, 0, 1, 0, 0);
+            }
+        },
+
+        /** 处理全选星期变化 */
+        handleAllWeekChange(val) {
+            if (val) {
+                // 全选时，设置所有星期
+                this.newPlaylist.weekdays = ['0', '1', '2', '3', '4', '5', '6'];
+            } else {
+                // 取消全选时，清空选择
+                this.newPlaylist.weekdays = [];
+            }
+        },
+
+        cancelPlaylistDialog() {
+            this.addPlaylistDialogVisible = false;
+            this.isEditPlaylist = false;
+            this.editingPlaylistIndex = null;
+        },
+
+        formatBrightness(val) {
+            return val + '%';
+        },
+        handleScreenSwitchChange(val) {
+            // 占位物模型ID: '201#screenEn'
+            const screenEnModel = this.deviceInfo.thingsModels.find(model => model.id === '201#screenEn');
+            if (screenEnModel) {
+                screenEnModel.shadow = val ? '1' : '0';
+                this.mqttPublish(this.deviceInfo, screenEnModel);
+            }
+        },
+        handleBrightnessChange(val) {
+            // 占位物模型ID: '201#brightness'
+            const brightnessModel = this.deviceInfo.thingsModels.find(model => model.id === '201#brightness');
+            if (brightnessModel) {
+                brightnessModel.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, brightnessModel);
+            }
+        },
+        handleClearScreen() {
+            // 占位物模型ID: '201#clearScreen'，下发清除指令
+            const clearScreenModel = this.deviceInfo.thingsModels.find(model => model.id === '201#clearScreen');
+            if (clearScreenModel) {
+                clearScreenModel.shadow = '1';
+                this.mqttPublish(this.deviceInfo, clearScreenModel);
+            } else {
+                this.$message.warning('未找到清除屏幕物模型');
+            }
+        },
+        handleBootScreenSwitchChange(val) {
+            // 占位物模型ID: '201#bootScreen'
+            const bootScreenModel = this.deviceInfo.thingsModels.find(model => model.id === '201#bootScreen');
+            if (bootScreenModel) {
+                bootScreenModel.shadow = val ? '1' : '0';
+                this.mqttPublish(this.deviceInfo, bootScreenModel);
+            }
+        },
+        handleResetSwitchChange(val) {
+            // 占位物模型ID: '201#reset'
+            const resetModel = this.deviceInfo.thingsModels.find(model => model.id === '201#reset');
+            if (resetModel) {
+                resetModel.shadow = val ? '1' : '0';
+                this.mqttPublish(this.deviceInfo, resetModel);
+            }
+        },
+        handleTemplateChange(val) {
+            // 占位物模型ID: '201#template'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#template');
+            if (model) {
+                model.shadow = val;
+                this.mqttPublish(this.deviceInfo, model);
+            }
+        },
+        handleOePolarityChange(val) {
+            // 占位物模型ID: '201#oePolarity'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#oePolarity');
+            if (model) {
+                model.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, model);
+            }
+        },
+        handleDataPolarityChange(val) {
+            // 占位物模型ID: '201#dataPolarity'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#dataPolarity');
+            if (model) {
+                model.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, model);
+            }
+        },
+        handleWidthChange(val) {
+            // 占位物模型ID: '201#width'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#width');
+            if (model) {
+                model.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, model);
+            }
+        },
+        handleHeightChange(val) {
+            // 占位物模型ID: '201#height'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#height');
+            if (model) {
+                model.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, model);
+            }
+        },
+        handleAngleChange(val) {
+            // 占位物模型ID: '201#angle'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#angle');
+            if (model) {
+                model.shadow = val.toString();
+                this.mqttPublish(this.deviceInfo, model);
+            }
+        },
+        handleSendScreenParams() {
+            // 占位物模型ID: '201#screenParam'
+            const model = this.deviceInfo.thingsModels.find(m => m.id === '201#screenParam');
+            if (model) {
+                // 组装参数对象
+                const param = {
+                    template: this.screenParams.template,
+                    oePolarity: this.screenParams.oePolarity,
+                    dataPolarity: this.screenParams.dataPolarity,
+                    width: this.screenParams.width,
+                    height: this.screenParams.height,
+                    angle: this.screenParams.angle
+                };
+                model.shadow = JSON.stringify(param);
+                this.mqttPublish(this.deviceInfo, model);
+                this.$message.success('参数已下发');
+            } else {
+                this.$message.warning('未找到屏幕参数物模型');
+            }
+        },
+        showAddProgramDialog() {
+            this.addProgramDialogVisible = true;
+            this.resetAddProgramForm();
+        },
+        resetAddProgramForm() {
+            this.addProgramForm = {
+                mode: 0,
+                duration: 10,
+                zones: [
+                    {
+                        playType: 0,
+                        commonPhrase: 0,
+                        displayText: '',
+                        font: 0,
+                        fontShape: 0,
+                        fontSize: 0,
+                        fontColor: 0,
+                        fontBold: 0,
+                        fontStretch: 0,
+                        image: '',
+                        effect: 0,
+                        speed: 4,
+                        stayTime: 5,
+                        hAlign: 0,
+                        vAlign: 0,
+                        x: 0,
+                        y: 0,
+                        width: 32,
+                        height: 64
+                    }
+                ]
+            };
+        },
+        onAddProgramModeChange(val) {
+            // 根据模式调整分区数量和布局
+            const zoneCounts = [1, 2, 2, 3, 1, 1];
+            const count = zoneCounts[val] || 1;
+            const screenW = 32;
+            const screenH = 64;
+            const newZones = [];
+            for (let i = 0; i < count; i++) {
+                const templateZone = {
+                    playType: 0,
+                    commonPhrase: 0,
+                    displayText: '',
+                    font: 0,
+                    fontShape: 0,
+                    fontSize: 0,
+                    fontColor: 0,
+                    fontBold: 0,
+                    fontStretch: 0,
+                    image: '',
+                    effect: 0,
+                    speed: 4,
+                    stayTime: 5,
+                    hAlign: 0,
+                    vAlign: 0,
+                    x: 0,
+                    y: 0,
+                    width: screenW,
+                    height: screenH
+                };
+                switch (val) {
+                    case 1: // 上下
+                        templateZone.height = Math.floor(screenH / count);
+                        templateZone.y = i * templateZone.height;
+                        if (i === count - 1) templateZone.height = screenH - templateZone.y;
+                        break;
+                    case 2: // 左右
+                        templateZone.width = Math.floor(screenW / count);
+                        templateZone.x = i * templateZone.width;
+                        if (i === count - 1) templateZone.width = screenW - templateZone.x;
+                        break;
+                    case 3: // 上中下
+                        templateZone.height = Math.floor(screenH / count);
+                        templateZone.y = i * templateZone.height;
+                        if (i === count - 1) templateZone.height = screenH - templateZone.y;
+                        break;
+                }
+                if (this.addProgramForm.zones[i]) {
+                    newZones.push({
+                        ...this.addProgramForm.zones[i],
+                        x: templateZone.x,
+                        y: templateZone.y,
+                        width: templateZone.width,
+                        height: templateZone.height
+                    });
+                } else {
+                    newZones.push(templateZone);
+                }
+            }
+            this.addProgramForm.zones = newZones;
+        },
+        onAddProgramPhraseChange(zIdx) {
+            const idx = this.addProgramForm.zones[zIdx].commonPhrase;
+            if (idx > 0) {
+                this.addProgramForm.zones[zIdx].displayText = this.addProgramCommonPhrases[idx];
+            }
+        },
+        submitAddProgram() {
+            // 组装节目参数，集成到物模型下发
+            const playListModel = this.deviceInfo.thingsModels.find(model => model.id === '103#playList');
+            if (playListModel) {
+                try {
+                    let jsonStr = playListModel.shadow ? playListModel.shadow.replace('JSON=', '') : '';
+                    let data = {};
+                    if (jsonStr) {
+                        data = JSON.parse(jsonStr);
+                    } else {
+                        data = { play_list: [] };
+                    }
+                    // 构建自定义节目项
+                    const customProgram = {
+                        play: {
+                            en: 1,
+                            num: data.play_list.length + 1,
+                            sou: 0,
+                            filename: `custom_${Date.now()}`,
+                            play_time: this.addProgramForm.duration,
+                            pause_time: 0
+                        },
+                        time: {
+                            en: 1,
+                            begin: 0,
+                            end: 86400,
+                            week: 127
+                        },
+                        speed: {
+                            en: 0,
+                            min: 0,
+                            max: 0
+                        },
+                        program: {
+                            mode: this.addProgramForm.mode,
+                            duration: this.addProgramForm.duration,
+                            zones: this.addProgramForm.zones
+                        }
+                    };
+                    data.play_list.push(customProgram);
+                    playListModel.shadow = 'JSON=' + JSON.stringify(data);
+                    this.mqttPublish(this.deviceInfo, playListModel).then(() => {
+                        this.addProgramDialogVisible = false;
+                        this.$message.success('自定义节目添加成功');
+                    }).catch(error => {
+                        this.$message.error('自定义节目添加失败');
+                    });
+                } catch (error) {
+                    this.$message.error('自定义节目添加失败');
+                }
+            }
+        },
+        // 画面预览渲染
+        drawAddProgramPreview() {
+            const canvas = this.$refs.addProgramPreviewCanvas;
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+
+            // 获取实际渲染尺寸
+            const renderWidth = 320; // 固定渲染宽度
+            const renderHeight = 120; // 固定渲染高度
+
+            // 设置高清渲染
+            const devicePixelRatio = window.devicePixelRatio || 1;
+            canvas.width = renderWidth * devicePixelRatio;
+            canvas.height = renderHeight * devicePixelRatio;
+            canvas.style.width = `${renderWidth}px`;
+            canvas.style.height = `${renderHeight}px`;
+            ctx.scale(devicePixelRatio, devicePixelRatio);
+
+            // 清空整个画布为透明
+            ctx.clearRect(0, 0, renderWidth, renderHeight);
+
+            // 计算缩放比例（基于32x64的LED屏幕尺寸）
+            const scale = Math.min(
+                renderWidth / 32,
+                renderHeight / 64
+            );
+
+            // 居中偏移量
+            const offsetX = (renderWidth - 32 * scale) / 2;
+            const offsetY = (renderHeight - 64 * scale) / 2;
+
+            // 绘制LED屏幕区域（黑色背景）
+            ctx.fillStyle = '#000';
+            ctx.fillRect(offsetX, offsetY, 32 * scale, 64 * scale);
+
+            // 遍历所有分区
+            this.addProgramForm.zones.forEach((zone, zIdx) => {
+                const asset = this.addProgramPreviewAssets[zIdx];
+                if (!asset) return;
+
+                // 计算分区在画布中的位置
+                const zoneX = offsetX + zone.x * scale;
+                const zoneY = offsetY + zone.y * scale;
+                const zoneWidth = zone.width * scale;
+                const zoneHeight = zone.height * scale;
+
+                // 绘制分区边框（蓝色虚线）
+                ctx.save();
+                ctx.strokeStyle = '#409EFF';
+                ctx.lineWidth = 1.5;
+                ctx.setLineDash([5, 3]);
+                ctx.strokeRect(zoneX, zoneY, zoneWidth, zoneHeight);
+                ctx.restore();
+
+                // 裁剪区域，防止动画溢出
+                ctx.save();
+                ctx.beginPath();
+                ctx.rect(zoneX, zoneY, zoneWidth, zoneHeight);
+                ctx.clip();
+
+                // 获取动画状态
+                const state = this.addProgramPreviewAnimState[zIdx];
+
+                if (zone.playType === 0 && asset.isText) {
+                    // 文本类型分区
+                    const page = this.addProgramPreviewPage[zIdx] || 0;
+                    const pageLines = asset.pages[page] || [];
+
+                    // 设置字体样式
+                    ctx.fillStyle = ['#FF0000', '#00FF00', '#0000FF'][zone.fontColor] || '#FF0000';
+                    ctx.textBaseline = 'top';
+                    ctx.font = `${asset.fontWeight} ${asset.scaledFontSize}px ${asset.fontFamily}`;
+
+                    // 计算行高
+                    const lineHeight = asset.scaledFontSize * 1.2;
+
+                    // 计算文本起始位置（考虑垂直对齐）
+                    let startY = zoneY;
+                    const verticalAlign = zone.vAlign;
+                    const totalHeight = pageLines.length * lineHeight;
+
+                    if (verticalAlign === 1) { // 垂直居中
+                        startY = zoneY + (zoneHeight - totalHeight) / 2;
+                    } else if (verticalAlign === 2) { // 底部对齐
+                        startY = zoneY + zoneHeight - totalHeight;
+                    }
+
+                    // 绘制每一行文本
+                    pageLines.forEach((line, lineIdx) => {
+                        // 计算水平位置（考虑水平对齐）
+                        const textWidth = ctx.measureText(line).width;
+                        let startX = zoneX;
+
+                        if (zone.hAlign === 1) { // 水平居中
+                            startX = zoneX + (zoneWidth - textWidth) / 2;
+                        } else if (zone.hAlign === 2) { // 右对齐
+                            startX = zoneX + zoneWidth - textWidth;
+                        }
+
+                        // 计算动画偏移
+                        const effect = zone.effect;
+                        let animOffsetX = 0;
+                        let animOffsetY = 0;
+                        if (state) {
+                            if (effect === 1 || effect === 2 || effect === 5) animOffsetX = state.currentX;
+                            if (effect === 3 || effect === 4) animOffsetY = state.currentY;
+                        }
+
+                        ctx.fillText(line, startX + animOffsetX, startY + lineIdx * lineHeight + animOffsetY);
+                    });
+                } else if (zone.playType === 1) {
+                    // 图片类型分区
+                    ctx.fillStyle = '#222';
+                    ctx.fillRect(zoneX + 4, zoneY + 4, zoneWidth - 8, zoneHeight - 8);
+
+                    ctx.fillStyle = '#fff';
+                    ctx.font = `${Math.round(12 * scale)}px Arial`;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.fillText('图片', zoneX + zoneWidth / 2, zoneY + zoneHeight / 2);
+                }
+
+                // 恢复裁剪区域
+                ctx.restore();
+            });
+        },
+        prepareAddProgramPreviewAssets() {
+            const canvas = this.$refs.addProgramPreviewCanvas;
+            if (!canvas) return;
+
+            const renderWidth = 320; // 与实际渲染宽度匹配
+            const scale = Math.min(renderWidth / 32, 120 / 64);
+
+            this.addProgramPreviewAssets = this.addProgramForm.zones.map(zone => {
+                if (zone.playType !== 0 || !zone.displayText) {
+                    return { pages: [[]], isText: false };
+                }
+
+                // 获取原始字体大小（像素值）
+                const fontSize = parseInt(this.addProgramFontSizes[zone.fontSize] || '16px');
+
+                // 计算缩放后的字体大小
+                const scaledFontSize = Math.max(10, Math.round(fontSize * scale * 0.8)); // 添加0.8缩放系数
+
+                const fontFamily = ['SimSun', 'SimHei', 'KaiTi'][zone.font] || 'SimSun';
+                const fontWeight = zone.fontBold ? 'bold' : 'normal';
+
+                // 创建临时canvas测量文本
+                const measureCanvas = document.createElement('canvas');
+                const measureCtx = measureCanvas.getContext('2d');
+                measureCtx.font = `${fontWeight} ${scaledFontSize}px ${fontFamily}`;
+
+                // 分行逻辑
+                const maxWidth = zone.width * scale - 4; // 预留4px边距
+                let currentLine = '';
+                const lines = [];
+
+                for (const char of zone.displayText) {
+                    const testLine = currentLine + char;
+                    const metrics = measureCtx.measureText(testLine);
+
+                    if (metrics.width > maxWidth) {
+                        if (currentLine) lines.push(currentLine);
+                        currentLine = char;
+                    } else {
+                        currentLine = testLine;
+                    }
+                }
+
+                if (currentLine) lines.push(currentLine);
+
+                // 计算每页最大行数
+                const lineHeight = scaledFontSize * 1.2;
+                const maxLines = Math.max(1, Math.floor((zone.height * scale - 4) / lineHeight));
+
+                // 分页
+                const pages = [];
+                for (let i = 0; i < lines.length; i += maxLines) {
+                    pages.push(lines.slice(i, i + maxLines));
+                }
+
+                if (pages.length === 0) pages.push([]);
+
+                return {
+                    pages,
+                    isText: true,
+                    scaledFontSize,
+                    fontFamily,
+                    fontWeight,
+                    lineHeight
+                };
+            });
+        },
+        resetAddProgramPreviewPage() {
+            this.addProgramPreviewPage = this.addProgramForm.zones.map(() => 0);
+        },
+        stopAddProgramPreviewAutoPage() {
+            if (this.addProgramPreviewTimer && this.addProgramPreviewTimer.length) {
+                this.addProgramPreviewTimer.forEach(timer => timer && clearInterval(timer));
+            }
+            this.addProgramPreviewTimer = [];
+        },
+        startAddProgramPreviewAutoPage() {
+            this.stopAddProgramPreviewAutoPage();
+            this.addProgramPreviewTimer = this.addProgramForm.zones.map((zone, zIdx) => {
+                const asset = this.addProgramPreviewAssets[zIdx];
+                if (!asset || !asset.isText) return null;
+                const totalPages = asset.pages.length;
+                if (totalPages <= 1) return null;
+                // 停留时间映射
+                const stayTimeMap = [0, 100, 500, 1000, 2000, 3000, 4000, 5000, 6000, 8000, 10000];
+                let stayMs = 1000;
+                if (zone.stayTime >= 0 && zone.stayTime < stayTimeMap.length) {
+                    stayMs = stayTimeMap[zone.stayTime];
+                }
+                if (stayMs === 0) stayMs = 1000;
+                return setInterval(() => {
+                    this.addProgramPreviewPage[zIdx] = (this.addProgramPreviewPage[zIdx] + 1) % totalPages;
+                    this.drawAddProgramPreview();
+                }, stayMs);
+            });
+        },
+        getZoneLinesAndMax(zone) {
+            // 计算分区内容分行和每页最大行数
+            const canvas = this.$refs.addProgramPreviewCanvas;
+            if (!canvas) return { lines: [], maxLines: 1 };
+            const ctx = canvas.getContext('2d');
+            const screenW = 32, screenH = 64;
+            const canvasW = canvas.width, canvasH = canvas.height;
+            const scale = Math.min(canvasW / screenW, canvasH / screenH);
+            let fontSize = parseInt(this.addProgramFontSizes[zone.fontSize] || '16px');
+            let scaledFontSize = Math.max(10, Math.round(fontSize * scale));
+            const fontFamily = ['SimSun', 'SimHei', 'KaiTi'][zone.font] || 'SimSun';
+            const fontWeight = zone.fontBold ? 'bold' : 'normal';
+            ctx.font = `${fontWeight} ${scaledFontSize}px ${fontFamily}`;
+            let lines = [];
+            let text = zone.displayText;
+            let zw = zone.width * scale;
+            let zh = zone.height * scale;
+            while (text && text.length > 0) {
+                let fitLen = 0;
+                let testStr = '';
+                for (let i = 1; i <= text.length; i++) {
+                    testStr = text.slice(0, i);
+                    if (ctx.measureText(testStr).width > zw - 4) {
+                        break;
+                    }
+                    fitLen = i;
+                }
+                if (fitLen === 0) fitLen = 1;
+                lines.push(text.slice(0, fitLen));
+                text = text.slice(fitLen);
+            }
+            const maxLines = Math.floor((zh - 4) / scaledFontSize);
+            return { lines, maxLines };
+        },
+        resetAddProgramPreviewAnimState() {
+            // 初始化每个分区动画状态
+            this.addProgramPreviewAnimState = this.addProgramForm.zones.map((zone, idx) => {
+                return {
+                    currentX: 0,
+                    currentY: 0,
+                    currentPage: this.addProgramPreviewPage[idx] || 0,
+                    pageTimer: null,
+                    effect: zone.effect,
+                };
+            });
+        },
+        stopAddProgramPreviewAnimLoop() {
+            if (this.addProgramPreviewAnimFrame) {
+                cancelAnimationFrame(this.addProgramPreviewAnimFrame);
+                this.addProgramPreviewAnimFrame = null;
+            }
+        },
+        startAddProgramPreviewAnimLoop() {
+            this.stopAddProgramPreviewAnimLoop();
+            const loop = () => {
+                this.updateAddProgramPreviewAnimState();
+                this.drawAddProgramPreview();
+                this.addProgramPreviewAnimFrame = requestAnimationFrame(loop);
+            };
+            this.addProgramPreviewAnimFrame = requestAnimationFrame(loop);
+        },
+        updateAddProgramPreviewAnimState() {
+            // 动画主循环，更新每个分区的动画状态
+            const renderWidth = 320;
+            const renderHeight = 120;
+            const scale = Math.min(renderWidth / 32, renderHeight / 64);
+            this.addProgramForm.zones.forEach((zone, idx) => {
+                const asset = this.addProgramPreviewAssets[idx];
+                const state = this.addProgramPreviewAnimState[idx];
+                if (!asset || !state || !asset.isText) return;
+                const effect = zone.effect;
+                const page = this.addProgramPreviewPage[idx] || 0;
+                const pageLines = asset.pages[page] || [];
+                const lineHeight = asset.scaledFontSize * 1.2;
+                const totalHeight = pageLines.length * lineHeight;
+                const totalWidth = Math.max(...pageLines.map(line => this.measureTextWidth(line, asset)));
+                // 动画速度
+                const speedMap = [1, 2, 3, 4, 5];
+                const animSpeed = (speedMap[zone.speed] || 3) * scale * 0.5;
+                // 区域宽高
+                const zoneWidth = zone.width * scale;
+                const zoneHeight = zone.height * scale;
+                // 动画逻辑
+                switch (effect) {
+                    case 1: // 左移
+                        if (state.currentX > -totalWidth) {
+                            state.currentX -= animSpeed;
+                        } else {
+                            state.currentX = zoneWidth;
+                        }
+                        break;
+                    case 2: // 右移
+                        if (state.currentX < zoneWidth) {
+                            state.currentX += animSpeed;
+                        } else {
+                            state.currentX = -totalWidth;
+                        }
+                        break;
+                    case 3: // 上移
+                        if (state.currentY > -totalHeight) {
+                            state.currentY -= animSpeed;
+                        } else {
+                            state.currentY = zoneHeight;
+                        }
+                        break;
+                    case 4: // 下移
+                        if (state.currentY < zoneHeight) {
+                            state.currentY += animSpeed;
+                        } else {
+                            state.currentY = -totalHeight;
+                        }
+                        break;
+                    case 5: // 连续左移
+                        if (state.currentX > -totalWidth) {
+                            state.currentX -= animSpeed;
+                        } else {
+                            state.currentX = 0;
+                        }
+                        break;
+                    case 6: // 闪烁换页
+                        // 由自动翻页定时器控制
+                        break;
+                    default:
+                        state.currentX = 0;
+                        state.currentY = 0;
+                }
+            });
+        },
+        measureTextWidth(text, asset) {
+            // 用于动画宽度测量
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            ctx.font = `${asset.fontWeight} ${asset.scaledFontSize}px ${asset.fontFamily}`;
+            return ctx.measureText(text).width;
+        },
+    },
+};
+</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);
+    }
+}
+
+.radar-settings {
+    margin-top: -20px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+
+    .speed-range {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        .el-input-number {
+            width: 120px;
+        }
+
+        .speed-separator {
+            color: #606266;
+            font-size: 16px;
+        }
+
+        .speed-unit {
+            color: #606266;
+            margin-left: 5px;
+        }
+    }
+}
+
+.time-range {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .time-header {
+        margin-bottom: 5px;
+    }
+
+    .time-pickers {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        .time-separator {
+            margin: 0 10px;
+        }
+    }
+}
+
+.weekday-select {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+// 自定义表格滚动条样式
+.el-table {
+
+    // 设置表格容器的滚动条样式
+    &::-webkit-scrollbar {
+        width: 12px;
+        height: 12px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 6px;
+
+        &:hover {
+            background: #a8a8a8;
+        }
+    }
+
+    // 表格内部的滚动条样式
+    .el-table__body-wrapper {
+        &::-webkit-scrollbar {
+            width: 28px;
+            height: 28px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: #f5f5f5;
+            border-radius: 29px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: #bfbfbf;
+            border-radius: 29px;
+        }
+    }
+}
+
+// 全局滚动条样式（影响所有滚动条）
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 6px;
+
+    &:hover {
+        background: #a8a8a8;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/iot/device/voicecard.vue b/src/views/iot/device/voicecard.vue
index 916c2d6..109fd13 100644
--- a/src/views/iot/device/voicecard.vue
+++ b/src/views/iot/device/voicecard.vue
@@ -254,17 +254,17 @@
                         $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>
                 <el-descriptions-item :label="$t('device.device-edit.148398-4')">{{ firmware.productName
-                }}</el-descriptions-item>
+                    }}</el-descriptions-item>
                 <el-descriptions-item :label="$t('device.device-edit.148398-12')">Version {{ firmware.version
-                }}</el-descriptions-item>
+                    }}</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-item>
             </el-descriptions>
             <div slot="footer" class="dialog-footer">
                 <el-button type="success" @click="otaUpgrade"