显卡产品物模型对接

src/views/iot/device/device-edit.vue

@@ -195,8 +195,8 @@
                         ref="voicecard" :device="form" @statusEvent="getDeviceStatusData($event)" />
                     <display v-else-if="form.productName && form.productName.toLowerCase().includes('显卡产品')"
                         ref="display" :device="form" @statusEvent="getDeviceStatusData($event)" />
-                    <gateway v-else-if="form.productName && form.productName.toLowerCase().includes('网关')"
+                    <gateway v-else-if="form.productName && form.productName.toLowerCase().includes('网关')" ref="gateway"
-                        ref="gateway" :device="form" @statusEvent="getDeviceStatusData($event)" />
+                        :device="form" @statusEvent="getDeviceStatusData($event)" />
                     <running-status v-else ref="runningStatus" :device="form"
                         @statusEvent="getDeviceStatusData($event)" />
 
@@ -293,10 +293,10 @@
                     <alert-user ref="alertUser" :device="form" />
                 </el-tab-pane>
 
-                <!-- <el-tab-pane name="inlineVideo" :disabled="form.deviceId == 0" v-if="form.deviceType !== 3" lazy>
+                <el-tab-pane name="inlineVideo" :disabled="form.deviceId == 0" v-if="form.deviceType !== 3" lazy>
                     <span slot="label">{{ $t('device.device-edit.148398-75') }}</span>
                     <device-inline-video ref="deviceInlineVideo" :sipRelationList="form.sipRelationVOList" />
-                </el-tab-pane> -->
+                </el-tab-pane>
 
                 <el-tab-pane name="deviceAlert" v-hasPermi="['iot:alertLog:list']" :disabled="form.deviceId == 0" lazy>
                     <span slot="label">{{ $t('device.device-edit.148398-81') }}</span>
@@ -1382,8 +1382,8 @@ export default {
             color: #fff;
             background-color: #486ff2;
             border-radius: 4px;
-            height: 32px;
+            /* height: 32px; */
-            line-height: 34px;
+            /* line-height: 34px; */
         }
 
         .alert-wrap {

src/views/iot/device/gateway-set.vue

@@ -1,31 +1,33 @@
 <template>
     <div class="gateway-setting">
-        <!-- 设备模式和OTA升级部分（保留） -->
+        <!-- 设备模式和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">
+                <el-card class="mode-card elegant-card" shadow="hover">
                     <div class="mode-header">
+                        <div class="icon-wrapper bg-blue">
                             <i class="el-icon-menu"></i>
+                        </div>
                         <span class="mode-title">设备模式</span>
                     </div>
                     <div class="mode-content">
-                        <span class="title" :style="{ color: statusColor.background }">{{ title }}</span>
+                        <span class="title gradient-text">{{ title }}</span>
-                        <el-button type="text" @click="printThingsModels" style="margin-left: 10px">
+                        <!-- <el-button type="text" class="print-btn" @click="printThingsModels">
                             <i class="el-icon-printer"></i> 打印物模型
-                        </el-button>
+                        </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">
+                <el-card class="mode-card elegant-card" shadow="hover">
                     <div class="mode-header">
+                        <div class="icon-wrapper bg-purple">
                             <svg-icon icon-class="ota" />
+                        </div>
                         <span class="mode-title">OTA升级</span>
                     </div>
                     <div class="mode-content">
-                        <el-button type="primary" size="mini" :plain="true" @click="viewVersion()">
+                        <el-button type="primary" size="mini" class="gradient-btn" @click="viewVersion()">
                             查看固件版本
                         </el-button>
                     </div>
@@ -33,69 +35,171 @@
             </el-col>
         </el-row>
 
-        <!-- 模组概况（与设备模式卡片风格统一） -->
+        <!-- 模组概况+网关参数设置卡片 - 美化 -->
-        <el-row :gutter="20" class="mode-section">
+        <el-card class="setting-card elegant-card" shadow="hover">
-            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+            <div class="setting-header">
-                <el-card class="mode-card" shadow="hover">
+                <div class="header-decoration"></div>
-                    <div class="mode-header">
+                <span class="setting-title with-underline">模组概况 & 网关参数设置</span>
-                        <i class="el-icon-s-platform"></i>
-                        <span class="mode-title">模组概况</span>
             </div>
-                    <div class="mode-content">
+            <div class="module-overview">
-                        <el-descriptions :column="2" border size="medium" class="overview-desc">
+                <el-descriptions :column="2" border size="medium" class="overview-desc elegant-desc">
                     <el-descriptions-item label="固件版本">
-                                <span class="desc-value">{{ moduleInfo.firmwareVersion }}</span>
+                        <span class="desc-value highlight">{{ moduleInfo.firmwareVersion }}</span>
                     </el-descriptions-item>
                     <el-descriptions-item label="MAC地址">
-                                <span class="desc-value">{{ moduleInfo.mac }}</span>
+                        <span class="desc-value highlight">{{ moduleInfo.mac }}</span>
                     </el-descriptions-item>
                 </el-descriptions>
             </div>
-                </el-card>
+            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="elegant-form">
-            </el-col>
+                <el-row :gutter="20">
-        </el-row>
+                    <el-col :span="12">
-
-        <!-- 网关参数设置表单 -->
-        <el-card class="setting-card" shadow="hover" style="margin-top: 24px;">
-            <div slot="header" class="setting-header">
-                <span class="setting-title">网关参数设置</span>
-            </div>
-            <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
                         <el-form-item label="网络ID" prop="networkId">
-                    <el-input v-model="form.networkId" placeholder="请输入网络ID" />
+                            <el-input v-model="form.networkId" placeholder="请输入网络ID" class="rounded-input" />
                         </el-form-item>
                         <el-form-item label="无线频段" prop="band">
-                    <el-select v-model="form.band" placeholder="请选择无线频段">
+                            <el-select v-model="form.band" placeholder="请选择无线频段" class="rounded-select">
                                 <el-option label="2.4GHz" value="2.4G" />
                                 <el-option label="5GHz" value="5G" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="信道" prop="channel">
-                    <el-select v-model="form.channel" placeholder="请选择信道">
+                            <el-select v-model="form.channel" placeholder="请选择信道" class="rounded-select">
                                 <el-option v-for="ch in channelOptions" :key="ch" :label="ch" :value="ch" />
                             </el-select>
                         </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
                         <el-form-item label="速率" prop="rate">
-                    <el-select v-model="form.rate" placeholder="请选择速率">
+                            <el-select v-model="form.rate" placeholder="请选择速率" class="rounded-select">
                                 <el-option v-for="rate in rateOptions" :key="rate" :label="rate" :value="rate" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="功率" prop="power">
-                    <el-select v-model="form.power" placeholder="请选择功率">
+                            <el-select v-model="form.power" placeholder="请选择功率" class="rounded-select">
                                 <el-option v-for="p in powerOptions" :key="p" :label="p" :value="p" />
                             </el-select>
                         </el-form-item>
                         <el-form-item label="设备地址" prop="deviceAddr">
-                    <el-input v-model="form.deviceAddr" placeholder="请输入设备地址" />
+                            <el-input v-model="form.deviceAddr" placeholder="请输入设备地址" class="rounded-input" />
                         </el-form-item>
+                    </el-col>
+                </el-row>
                 <el-form-item label="事件开关" prop="eventSwitch">
-                    <el-switch v-model="form.eventSwitch" active-text="开启" inactive-text="关闭" />
+                    <el-switch v-model="form.eventSwitch" active-text="开启" inactive-text="关闭" active-color="#13ce66"
+                        inactive-color="#ff4949" />
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" @click="onSubmit">保存设置</el-button>
+                    <el-button style="text-align: center;" type="primary" class="save-btn"
+                        @click="onSubmit">保存设置</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
+
+        <!-- 雷达触发设置卡片 - 美化 -->
+        <el-card class="radar-card elegant-card" shadow="hover">
+            <div class="setting-header">
+                <div class="header-decoration"></div>
+                <span class="setting-title with-underline">雷达触发设置</span>
+            </div>
+            <el-form :model="radarForm" ref="radarFormRef" label-width="140px" class="radar-form elegant-form">
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="行驶速度 (km/h)" class="slider-item">
+                            <el-slider v-model="radarForm.lowSpeed" :min="0" :max="100" range :show-tooltip="true"
+                                tooltip-class="custom-tooltip" />
+                            <span class="slider-value highlight">{{ radarForm.lowSpeed[0] }} - {{ radarForm.lowSpeed[1]
+                                }}</span>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="触发速度 (km/h)" class="slider-item">
+                            <el-slider v-model="radarForm.triggerSpeed" :min="0" :max="200" range :show-tooltip="true"
+                                tooltip-class="custom-tooltip" />
+                            <span class="slider-value highlight">{{ radarForm.triggerSpeed[0] }} - {{
+                                radarForm.triggerSpeed[1] }}</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="20">
+                    <el-col :span="12">
+                        <el-form-item label="超速速度 (km/h)" class="slider-item">
+                            <el-slider v-model="radarForm.overSpeed" :min="0" :max="200" range :show-tooltip="true"
+                                tooltip-class="custom-tooltip" />
+                            <span class="slider-value highlight">{{ radarForm.overSpeed[0] }} - {{
+                                radarForm.overSpeed[1] }}</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-form-item>
+                    <el-button type="primary" class="save-btn" @click="onRadarSubmit">保存雷达设置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+
+        <!-- 时间列表卡片 - 美化 -->
+        <el-card class="time-list-card elegant-card" shadow="hover">
+            <div class="setting-header" style="display: flex; align-items: center; justify-content: space-between;">
+                <div style="display: flex; align-items: center;">
+                    <div class="header-decoration"></div>
+                    <span class="setting-title with-underline">事件列表</span>
+                </div>
+                <el-button type="primary" icon="el-icon-plus" class="add-btn"
+                    @click="openEventDialog = true">添加事件</el-button>
+            </div>
+            <el-table :data="timeList" border style="width: 100%; margin-top: 16px;" class="elegant-table"
+                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
+                <el-table-column type="index" label="序号" width="60" align="center" />
+                <!-- <el-table-column prop="time" label="时间" width="120" align="center" /> -->
+                <el-table-column prop="event" label="事件" align="center" />
+                <el-table-column prop="plan" label="方案内容" align="center" />
+            </el-table>
+            <!-- 添加事件弹窗 -->
+            <el-dialog title="添加事件" :visible.sync="openEventDialog" width="500px" append-to-body>
+                <el-form :model="eventForm" :rules="eventRules" ref="eventFormRef" label-width="110px">
+                    <el-form-item label="事件类型" prop="type">
+                        <el-select v-model="eventForm.type" placeholder="请选择事件类型">
+                            <el-option v-for="item in eventTypeOptions" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="事件来源" prop="source">
+                        <el-select v-model="eventForm.source" placeholder="请选择事件来源">
+                            <el-option v-for="item in eventSourceOptions" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="优先级" prop="priority">
+                        <el-input-number v-model="eventForm.priority" :min="1" :max="10" />
+                    </el-form-item>
+                    <el-form-item label="显示节目" prop="program">
+                        <el-select v-model="eventForm.program" placeholder="请选择显示节目">
+                            <el-option v-for="item in programOptions" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="显示时长(秒)" prop="duration">
+                        <el-input-number v-model="eventForm.duration" :min="1" :max="9999" />
+                    </el-form-item>
+                    <el-form-item label="输出引脚" prop="pin">
+                        <el-select v-model="eventForm.pin" placeholder="请选择输出引脚">
+                            <el-option v-for="item in pinOptions" :key="item.value" :label="item.label"
+                                :value="item.value" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="输出电平" prop="level">
+                        <el-select v-model="eventForm.level" placeholder="请选择输出电平">
+                            <el-option label="高" value="高" />
+                            <el-option label="低" value="低" />
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <div slot="footer" class="dialog-footer">
+                    <el-button @click="openEventDialog = false">取 消</el-button>
+                    <el-button type="primary" @click="handleAddEvent">确 定</el-button>
+                </div>
+            </el-dialog>
+        </el-card>
     </div>
 </template>
 
@@ -128,6 +232,15 @@ export default {
                 power: [{ required: true, message: '请选择功率', trigger: 'change' }],
                 deviceAddr: [{ required: true, message: '请输入设备地址', trigger: 'blur' }],
             },
+            // 雷达设置表单
+            radarForm: {
+                lowSpeed: [10, 30],
+                triggerSpeed: [40, 80],
+                overSpeed: [100, 150],
+            },
+            timeList: [
+
+            ],
             // 以下为保留设备模式和OTA升级部分的相关变量
             title: '设备控制',
             statusColor: {
@@ -135,6 +248,73 @@ export default {
                 color: '#fff',
                 maxWidth: '200px',
             },
+            openEventDialog: false,
+            eventForm: {
+                type: '',
+                source: '',
+                priority: 1,
+                program: '',
+                duration: 10,
+                pin: '',
+                level: '',
+            },
+            eventRules: {
+                type: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
+                source: [{ required: true, message: '请输入事件来源', trigger: 'blur' }],
+                priority: [{ required: true, message: '请输入优先级', trigger: 'change' }],
+                program: [{ required: true, message: '请输入显示节目', trigger: 'blur' }],
+                duration: [{ required: true, message: '请输入显示时长', trigger: 'change' }],
+                pin: [{ required: true, message: '请输入输出引脚', trigger: 'blur' }],
+                level: [{ required: true, message: '请选择输出电平', trigger: 'change' }],
+            },
+            // 事件相关选项
+            eventTypeOptions: [
+                { label: '默认显示', value: '0' },
+                { label: '雷达触发(RS485 雷达)', value: '1' },
+                { label: '雷达超速(RS485 雷达)', value: '2' },
+                { label: '车牌触发(摄像头)', value: '3' },
+                { label: '车牌超速(摄像头)', value: '4' },
+                { label: '行人检测(相机)', value: '5' },
+                { label: 'IN1下降沿', value: '0x51' },
+                { label: 'IN2上升沿', value: '0x52' },
+                { label: 'IN3下降沿', value: '0x53' },
+                { label: 'IN4上升沿', value: '0x54' },
+                { label: 'IN1低电平', value: '0x55' },
+                { label: 'IN2高电平', value: '0x56' },
+                { label: 'IN3低电平', value: '0x57' },
+                { label: 'IN4高电平', value: '0x58' },
+                { label: '其他', value: '-1' },
+            ],
+            eventSourceOptions: [
+                { label: '本台设备', value: '0' },
+                { label: '任意设备（不包含本设备）', value: '254' },
+                { label: '任意设备', value: '255' },
+                { label: '其他', value: '1' },
+            ],
+            programOptions: [
+                { label: '节目一', value: 'program1' },
+                { label: '节目二', value: 'program2' },
+                { label: '节目三', value: 'program3' },
+                { label: '节目四', value: 'program4' },
+                { label: '节目五', value: 'program5' },
+                { label: '节目六', value: 'program6' },
+                { label: '节目七', value: 'program7' },
+                { label: '节目八', value: 'program8' },
+     
+
+                
+            ],
+            pinOptions: [
+                { label: '引脚1', value: 'pin1' },
+                { label: '引脚2', value: 'pin2' },
+                { label: '引脚3', value: 'pin3' },
+                { label: '引脚4', value: 'pin4' },
+                { label: '引脚5', value: 'pin5' },
+                { label: '引脚6', value: 'pin6' },
+                { label: '引脚7', value: 'pin7' },
+                { label: '引脚8', value: 'pin8' },
+                { label: '引脚9', value: 'pin9' },
+            ],
         };
     },
     methods: {
@@ -152,6 +332,26 @@ export default {
         viewVersion() {
             this.$message.info('查看固件版本功能保留');
         },
+        onRadarSubmit() {
+            this.$message.success('雷达设置已保存');
+            // TODO: 调用接口保存雷达设置
+        },
+        handleAddEvent() {
+            this.$refs.eventFormRef.validate((valid) => {
+                if (valid) {
+                    // 获取事件类型和来源的label
+                    const typeLabel = (this.eventTypeOptions.find(item => item.value === this.eventForm.type) || {}).label || this.eventForm.type;
+                    const sourceLabel = (this.eventSourceOptions.find(item => item.value === this.eventForm.source) || {}).label || this.eventForm.source;
+                    this.timeList.push({
+                        // time: new Date().toLocaleTimeString().slice(0, 5),
+                        event: `${typeLabel} / ${sourceLabel}`,
+                        plan: `优先级:${this.eventForm.priority} 节目:${this.programOptions.find(item => item.value === this.eventForm.program)?.label || this.eventForm.program} 时长:${this.eventForm.duration}s 引脚:${this.pinOptions.find(item => item.value === this.eventForm.pin)?.label || this.eventForm.pin} 电平:${this.eventForm.level}`
+                    });
+                    this.openEventDialog = false;
+                    this.$refs.eventFormRef.resetFields();
+                }
+            });
+        },
     },
 };
 </script>
@@ -159,18 +359,80 @@ export default {
 <style lang="scss" scoped>
 .gateway-setting {
     padding: 20px;
+    background-color: #f5f7fa;
 
     .mode-section {
         margin-bottom: 30px;
     }
 
-    .mode-card {
+    /* 优雅卡片样式 */
-        margin-bottom: 20px;
+    .elegant-card {
-        transition: all 0.3s;
+        padding: 10px;
-        padding: 20px;
+        margin-top: 20px;
+        border-radius: 12px;
+        border: none;
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+        background: white;
 
         &:hover {
-            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+            transform: translateY(-2px);
+        }
+    }
+
+    /* 卡片头部样式 */
+    .setting-header {
+        position: relative;
+        margin-bottom: 20px;
+
+        .header-decoration {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 4px;
+            background: linear-gradient(to bottom, #409EFF, #67C23A);
+            border-radius: 2px;
+        }
+
+        .setting-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #303133;
+            margin-left: 12px;
+
+            &.with-underline {
+                position: relative;
+                display: inline-block;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    bottom: -5px;
+                    width: 100%;
+                    height: 2px;
+                    background: linear-gradient(to right, #409EFF, transparent);
+                }
+            }
+        }
+    }
+
+    /* 设备模式卡片 */
+    .mode-card {
+        height: 100%;
+        padding: 20px;
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100px;
+            height: 100px;
+            background: radial-gradient(circle, rgba(64, 158, 255, 0.1) 0%, rgba(64, 158, 255, 0) 70%);
         }
 
         .mode-header {
@@ -178,11 +440,30 @@ export default {
             align-items: center;
             margin-bottom: 15px;
 
+            .icon-wrapper {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-right: 12px;
+
                 i,
                 .svg-icon {
-                font-size: 20px;
+                    font-size: 18px;
-                margin-right: 8px;
+                    color: white;
-                color: #409EFF;
+                }
+
+                &.bg-blue {
+                    background: linear-gradient(135deg, #409EFF, #64b5ff);
+                    box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+                }
+
+                &.bg-purple {
+                    background: linear-gradient(135deg, #a162e8, #c893ff);
+                    box-shadow: 0 4px 8px rgba(161, 98, 232, 0.3);
+                }
             }
 
             .mode-title {
@@ -199,13 +480,103 @@ export default {
             .title {
                 font-size: 16px;
                 font-weight: bold;
+
+                &.gradient-text {
+                    background: linear-gradient(to right, #409EFF, #67C23A);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                }
             }
 
-            .overview-desc {
+            .print-btn {
-                margin: 0 auto;
+                color: #409EFF;
-                display: inline-block;
+                transition: all 0.3s;
 
+                &:hover {
+                    color: #67C23A;
+                    transform: translateY(-2px);
+                }
+            }
+
+            .gradient-btn {
+                background: linear-gradient(to right, #409EFF, #64b5ff);
+                border: none;
+                color: white;
+                transition: all 0.3s;
+
+                &:hover {
+                    background: linear-gradient(to right, #64b5ff, #409EFF);
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+                }
+            }
+        }
+    }
+
+    /* 表单样式 */
+    .elegant-form {
+        margin-top: 20px;
+
+        .el-form-item {
+            margin-bottom: 22px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        .rounded-input {
+            .el-input__inner {
+                border-radius: 20px;
+                padding-left: 15px;
+            }
+        }
+
+        .rounded-select {
+            .el-input__inner {
+                border-radius: 20px;
+            }
+        }
+
+        .slider-item {
+            .el-slider {
+                .el-slider__runway {
+                    height: 6px;
+                    border-radius: 3px;
+                }
+
+                .el-slider__bar {
+                    height: 6px;
+                    background: linear-gradient(to right, #409EFF, #64b5ff);
+                }
+
+                .el-slider__button {
+                    width: 16px;
+                    height: 16px;
+                    border: 2px solid #409EFF;
+                }
+            }
+        }
+
+        .save-btn {
+            background: linear-gradient(to right, #409EFF, #64b5ff);
+            border: none;
+            border-radius: 20px;
+            padding: 10px 24px;
+            transition: all 0.3s;
+
+            &:hover {
+                background: linear-gradient(to right, #64b5ff, #409EFF);
+                transform: translateY(-2px);
+                box-shadow: 0 4px 8px rgba(64, 158, 255, 0.3);
+            }
+        }
+    }
+
+    /* 描述列表样式 */
+    .elegant-desc {
         .el-descriptions__label {
+            background-color: #f5f7fa;
             font-weight: bold;
             color: #606266;
         }
@@ -214,23 +585,72 @@ export default {
             font-size: 16px;
             color: #222;
             font-weight: 500;
-                }
-            }
-        }
-    }
 
-    .setting-card {
+            &.highlight {
-        .setting-header {
+                color: #409EFF;
-            .setting-title {
-                font-size: 16px;
                 font-weight: bold;
-                color: #303133;
+            }
         }
     }
 
-        .el-form {
+    /* 表格样式 */
-            margin-top: 20px;
+    .elegant-table {
-            max-width: 500px;
+        .el-table__header {
+            th {
+                background-color: #f5f7fa !important;
+            }
+        }
+
+        .el-table__body {
+            tr:hover {
+                td {
+                    background-color: #f0f7ff !important;
+                }
+            }
+        }
+    }
+
+    /* 高亮文本 */
+    .highlight {
+        color: #409EFF;
+        font-weight: bold;
+    }
+
+    /* 滑块值显示 */
+    .slider-value {
+        display: inline-block;
+        min-width: 80px;
+        margin-left: 10px;
+        color: #409EFF;
+        font-weight: bold;
+    }
+
+    .add-btn {
+        background: linear-gradient(to right, #409EFF, #67C23A);
+        border: none;
+        color: #fff;
+        border-radius: 20px;
+        padding: 8px 22px;
+        font-weight: bold;
+        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.10);
+        transition: all 0.3s;
+        margin-right: 10px;
+
+        &:hover {
+            background: linear-gradient(to right, #67C23A, #409EFF);
+            color: #fff;
+            transform: translateY(-2px);
+        }
+    }
+}
+
+/* 全局滑块提示样式 */
+.custom-tooltip {
+    .el-slider__button {
+        .el-tooltip__popper {
+            background: #409EFF !important;
+            color: white !important;
+            border: none !important;
         }
     }
 }

src/views/iot/device/gateway.vue

@@ -13,9 +13,9 @@
                     </div>
                     <div class="status-content">
                         <span class="title" :style="{ color: statusColor.background }">{{ title }}</span>
-                        <el-button type="text" @click="printThingsModels" style="margin-left: 10px" class="print-btn">
+                        <!-- <el-button type="text" @click="printThingsModels" style="margin-left: 10px" class="print-btn">
                             <i class="el-icon-printer"></i> 打印物模型
-                        </el-button>
+                        </el-button> -->
                     </div>
                     <!-- <div class="status-details">
                         <div class="detail-item">
@@ -61,9 +61,7 @@
                 </el-card>
             </el-col>
         </el-row>
-
+        <el-row :gutter="20" style="margin-bottom: 10px; margin-top: 20px;">
-        <!-- 子设备标题 -->
-        <el-row :gutter="20" style="margin-bottom: 20px;">
             <el-col :span="24">
                 <div class="sub-devices-title">
                     <i class="el-icon-connection"></i>
@@ -72,10 +70,13 @@
             </el-col>
         </el-row>
 
+
         <!-- 子产品Tab标签页 -->
         <el-card class="sub-products-card" shadow="hover">
+            <!-- 子设备标题 -->
+
             <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
-                <el-tab-pane label="显示屏控制" name="display">
+                <el-tab-pane label="显示屏控制" name="display" style="line-height: 42px; height: 42px;">
                     <div class="tab-content">
                         <display-component :device="device" ref="displayComponent" v-if="activeTab === 'display'">
                         </display-component>
@@ -520,6 +521,7 @@ export default {
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
             backdrop-filter: blur(10px);
             background: rgba(255, 255, 255, 0.9);
+            padding: 24px 32px; // 增加内边距，让内容不贴边
 
             &:hover {
                 transform: translateY(-8px) scale(1.02);
@@ -737,14 +739,15 @@ export default {
                 font-size: 16px;
                 font-weight: 500;
                 padding: 0 35px;
-                // height: 50px;
+                position: relative;
-                // line-height: 50px;
+                z-index: 1;
+                height: 42px;
+                line-height: 42px;
                 border: 1px solid #e4e7ed;
                 border-bottom: none;
                 background: #f5f7fa;
                 color: #606266;
                 transition: all 0.3s ease;
-                position: relative;
 
                 &:hover {
                     color: #409EFF;
@@ -761,6 +764,9 @@ export default {
             .el-tabs__active-bar {
                 background: #409EFF;
                 height: 2px;
+                left: 0 !important;
+                width: 100% !important; // 让激活条和标签一样宽
+                border-radius: 2px;
             }
         }
 
@@ -822,11 +828,11 @@ export default {
             ::v-deep .el-tabs__header {
                 padding: 0 10px;
 
-                .el-tabs__item {
+                ::v-deep .el-tabs__item {
                     padding: 0 20px;
                     font-size: 14px;
-                    height: 50px;
+                    height: 42px;
-                    // line-height: 50px;
+                    line-height: 42px;
                 }
             }
 

src/views/iot/group/index.vue

@@ -251,7 +251,7 @@
 import deviceList from './device-list';
 import { listGroup, getGroup, delGroup, addGroup, updateGroup } from '@/api/iot/group';
 import { getUserId } from '@/utils/auth';
-import { listDevice } from '@/api/iot/device';
+import { listDeviceShort } from '@/api/iot/device';
 import { getDeviceRunningStatus } from '@/api/iot/device';
 import { serviceInvoke } from '@/api/iot/runstatus';
 import { listThingsModel } from '@/api/iot/device';
@@ -508,8 +508,9 @@ export default {
                     pageNum: 1,
                     pageSize: 1 // 只需要获取第一个设备
                 };
-
+                console.log("params", JSON.stringify(params));
-                const response = await listDevice(params);
+                const response = await listDeviceShort(params);
+                console.log("zjj", JSON.stringify(response));
                 if (response.rows && response.rows.length > 0) {
                     const device = response.rows[0];
                     // 使用getDeviceRunningStatus获取设备运行状态和物模型值
@@ -581,7 +582,7 @@ export default {
                     pageSize: 1000
                 };
 
-                const response = await listDevice(params);
+                const response = await listDeviceShort(params);
                 if (response.rows && response.rows.length > 0) {
                     for (const device of response.rows) {
                         const data = {
@@ -614,7 +615,7 @@ export default {
                     pageSize: 1000
                 };
 
-                const response = await listDevice(params);
+                const response = await listDeviceShort(params);
                 if (response.rows && response.rows.length > 0) {
                     for (const device of response.rows) {
                         const data = {

src/views/iot/product/product-edit.vue

@@ -9,17 +9,20 @@
                 <span class="info-item">{{ $t('product.product-edit.473153-1') }}：{{ form.productName }}</span>
                 <span class="info-item">
                     {{ $t('product.product-edit.473153-85') }}：
-                    <el-button :disabled="form.isOwner === 0" v-if="form.status == 1" @click="changeProductStatus(1)" type="primary" size="small" plain style="height: 24px; padding: 0 10px">
+                    <el-button :disabled="form.isOwner === 0" v-if="form.status == 1" @click="changeProductStatus(1)"
+                        type="primary" size="small" plain style="height: 24px; padding: 0 10px">
                         {{ $t('product.product-edit.473153-86') }}
                     </el-button>
-                    <el-button :disabled="form.isOwner === 0" v-if="form.status == 2" @click="changeProductStatus(2)" type="danger" size="small" plain style="height: 24px; padding: 0 10px">
+                    <el-button :disabled="form.isOwner === 0" v-if="form.status == 2" @click="changeProductStatus(2)"
+                        type="danger" size="small" plain style="height: 24px; padding: 0 10px">
                         {{ $t('product.product-edit.473153-87') }}
                     </el-button>
                 </span>
             </div>
         </el-card>
         <el-card style="padding-bottom: 100px">
-            <el-tabs class="custom-tabs" v-model="activeName" tab-position="top" style="min-height: 400px" @tab-click="tabChange">
+            <el-tabs class="custom-tabs" v-model="activeName" tab-position="top" style="min-height: 400px"
+                @tab-click="tabChange">
                 <el-tab-pane name="basic">
                     <span slot="label">
                         {{ $t('product.product-edit.473153-0') }}
@@ -28,48 +31,53 @@
                         <el-row :gutter="100">
                             <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                                 <el-form-item :label="$t('product.product-edit.473153-1')" prop="productName">
-                                    <el-input v-model="form.productName" :placeholder="$t('product.product-edit.473153-2')" :readonly="form.status == 2 || form.isOwner == 0" />
+                                    <el-input v-model="form.productName"
+                                        :placeholder="$t('product.product-edit.473153-2')"
+                                        :readonly="form.status == 2 || form.isOwner == 0" />
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-3')" prop="categoryId">
-                                    <el-select
+                                    <el-select v-model="form.categoryId"
-                                        v-model="form.categoryId"
+                                        :placeholder="$t('product.product-edit.473153-4')" @change="selectCategory"
-                                        :placeholder="$t('product.product-edit.473153-4')"
+                                        style="width: 100%" :disabled="form.status == 2 || form.isOwner == 0"
-                                        @change="selectCategory"
+                                        :filterable="true">
-                                        style="width: 100%"
+                                        <el-option v-for="category in categoryShortList" :key="category.id"
-                                        :disabled="form.status == 2 || form.isOwner == 0"
+                                            :label="category.name" :value="category.id"></el-option>
-                                        :filterable="true"
-                                    >
-                                        <el-option v-for="category in categoryShortList" :key="category.id" :label="category.name" :value="category.id"></el-option>
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-78')" prop="deviceType">
-                                    <el-select
+                                    <el-select style="width: 100%" v-model="form.deviceType"
-                                        style="width: 100%"
-                                        v-model="form.deviceType"
                                         :placeholder="$t('product.product-edit.473153-13')"
                                         :disabled="form.status == 2 || form.isOwner == 0 || !!form.productId"
-                                        filterable
+                                        filterable>
-                                    >
+                                        <el-option v-for="dict in dict.type.iot_device_type" :key="dict.value"
-                                        <el-option v-for="dict in dict.type.iot_device_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                                            :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-91')" prop="firmwareType">
-                                    <el-select style="width: 100%" v-model="form.firmwareType" :placeholder="$t('product.product-edit.473153-92')" :disabled="form.status == 2 || form.isOwner == 0" filterable>
+                                    <el-select style="width: 100%" v-model="form.firmwareType"
-                                        <el-option v-for="dict in dict.type.iot_firmware_type" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                                        :placeholder="$t('product.product-edit.473153-92')"
+                                        :disabled="form.status == 2 || form.isOwner == 0" filterable>
+                                        <el-option v-for="dict in dict.type.iot_firmware_type" :key="dict.value"
+                                            :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-16')" prop="networkMethod">
-                                    <el-select v-model="form.networkMethod" :placeholder="$t('product.product-edit.473153-17')" style="width: 100%" :disabled="form.status == 2 || form.isOwner == 0">
+                                    <el-select v-model="form.networkMethod"
-                                        <el-option v-for="dict in networkOptions" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                                        :placeholder="$t('product.product-edit.473153-17')" style="width: 100%"
+                                        :disabled="form.status == 2 || form.isOwner == 0">
+                                        <el-option v-for="dict in networkOptions" :key="dict.value" :label="dict.label"
+                                            :value="parseInt(dict.value)"></el-option>
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-25')" prop="productId">
-                                    <el-input v-model="form.productId" :placeholder="$t('product.product-edit.473153-26')" readonly />
+                                    <el-input v-model="form.productId"
+                                        :placeholder="$t('product.product-edit.473153-26')" readonly />
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-18')">
                                     <template slot="label">
                                         <span>{{ $t('product.product-edit.473153-18') }}</span>
-                                        <el-tooltip style="cursor: pointer; margin-left: 5px" effect="light" placement="bottom">
+                                        <el-tooltip style="cursor: pointer; margin-left: 5px" effect="light"
+                                            placement="bottom">
                                             <div slot="content">
                                                 {{ $t('product.product-edit.473153-19') }}
                                                 <br />
@@ -77,115 +85,113 @@
                                             <i class="el-icon-question" />
                                         </el-tooltip>
                                     </template>
-                                    <el-radio-group v-model="form.isSys" :disabled="form.status == 2 || form.isOwner == 0">
+                                    <el-radio-group v-model="form.isSys"
+                                        :disabled="form.status == 2 || form.isOwner == 0">
                                         <el-radio :label="1">{{ $t('product.product-edit.473153-89') }}</el-radio>
                                         <el-radio :label="0">{{ $t('product.product-edit.473153-90') }}</el-radio>
                                     </el-radio-group>
                                 </el-form-item>
                                 <el-form-item :label="$t('product.product-edit.473153-32')" prop="remark">
-                                    <el-input
+                                    <el-input v-model="form.remark" type="textarea"
-                                        v-model="form.remark"
-                                        type="textarea"
                                         :autosize="{ minRows: 3, maxRows: 5 }"
                                         :placeholder="$t('product.product-edit.473153-33')"
-                                        :disabled="form.status == 2 || form.isOwner == 0"
+                                        :disabled="form.status == 2 || form.isOwner == 0" />
-                                    />
                                 </el-form-item>
                             </el-col>
 
                             <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
-                                <el-form-item v-if="form.deviceType !== 3" :label="$t('product.product-edit.473153-81')" prop="protocolCode">
+                                <el-form-item v-if="form.deviceType !== 3" :label="$t('product.product-edit.473153-81')"
-                                    <el-select
+                                    prop="protocolCode">
-                                        v-model="form.protocolCode"
+                                    <el-select v-model="form.protocolCode"
-                                        :placeholder="$t('product.product-edit.473153-82')"
+                                        :placeholder="$t('product.product-edit.473153-82')" style="width: 100%"
-                                        style="width: 100%"
                                         :disabled="form.status == 2 || form.isOwner == 0 || !!form.productId"
-                                        @change="handleProductCodeChange"
+                                        @change="handleProductCodeChange" :filterable="true">
-                                        :filterable="true"
+                                        <el-option v-for="p in protocolList" :key="p.protocolCode"
-                                    >
+                                            :label="p.protocolName" :value="p.protocolCode" />
-                                        <el-option v-for="p in protocolList" :key="p.protocolCode" :label="p.protocolName" :value="p.protocolCode" />
                                     </el-select>
                                 </el-form-item>
-                                <el-form-item v-if="form.deviceType !== 4" :label="$t('product.product-edit.473153-14')" prop="transport">
+                                <el-form-item v-if="form.deviceType !== 4" :label="$t('product.product-edit.473153-14')"
-                                    <el-select v-model="form.transport" :placeholder="$t('product.product-edit.473153-15')" style="width: 100%" :disabled="form.status === 2 || form.isOwner === 0">
+                                    prop="transport">
-                                        <el-option
+                                    <el-select v-model="form.transport"
-                                            v-for="dict in dict.type.iot_transport_type"
+                                        :placeholder="$t('product.product-edit.473153-15')" style="width: 100%"
-                                            :key="dict.value"
+                                        :disabled="form.status === 2 || form.isOwner === 0">
-                                            :label="dict.label"
+                                        <el-option v-for="dict in dict.type.iot_transport_type" :key="dict.value"
-                                            :value="dict.value"
+                                            :label="dict.label" :value="dict.value"
-                                            :disabled="(form.deviceType === 3 && dict.value !== 'GB28181') || (form.protocolCode === 'MODBUS-TCP' && dict.value !== 'TCP')"
+                                            :disabled="(form.deviceType === 3 && dict.value !== 'GB28181') || (form.protocolCode === 'MODBUS-TCP' && dict.value !== 'TCP')" />
-                                        />
                                     </el-select>
                                 </el-form-item>
-                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-21')" prop="vertificateMethod">
+                                <el-form-item v-if="form.transport === 'MQTT'"
-                                    <el-select v-model="form.vertificateMethod" :placeholder="$t('product.product-edit.473153-22')" style="width: 100%" :disabled="form.status == 2 || form.isOwner == 0">
+                                    :label="$t('product.product-edit.473153-21')" prop="vertificateMethod">
-                                        <el-option v-for="dict in dict.type.iot_vertificate_method" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
+                                    <el-select v-model="form.vertificateMethod"
+                                        :placeholder="$t('product.product-edit.473153-22')" style="width: 100%"
+                                        :disabled="form.status == 2 || form.isOwner == 0">
+                                        <el-option v-for="dict in dict.type.iot_vertificate_method" :key="dict.value"
+                                            :label="dict.label" :value="parseInt(dict.value)"></el-option>
                                     </el-select>
                                 </el-form-item>
-                                <el-form-item v-if="form.deviceType !== 4" :label="$t('product.product-edit.473153-23')" prop="locationWay" :disabled="isEditing">
+                                <el-form-item v-if="form.deviceType !== 4" :label="$t('product.product-edit.473153-23')"
-                                    <el-select style="width: 100%" v-model="form.locationWay" :placeholder="$t('product.product-edit.473153-24')" clearable :disabled="form.status == 2 || form.isOwner == 0">
+                                    prop="locationWay" :disabled="isEditing">
-                                        <el-option v-for="dict in dict.type.iot_location_way" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
+                                    <el-select style="width: 100%" v-model="form.locationWay"
+                                        :placeholder="$t('product.product-edit.473153-24')" clearable
+                                        :disabled="form.status == 2 || form.isOwner == 0">
+                                        <el-option v-for="dict in dict.type.iot_location_way" :key="dict.value"
+                                            :label="dict.label" :value="Number(dict.value)" />
                                     </el-select>
                                 </el-form-item>
-                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-27')" prop="mqttAccount">
+                                <el-form-item v-if="form.transport === 'MQTT'"
-                                    <el-input
+                                    :label="$t('product.product-edit.473153-27')" prop="mqttAccount">
-                                        style="width: 100%"
+                                    <el-input style="width: 100%" v-model="form.mqttAccount"
-                                        v-model="form.mqttAccount"
+                                        :placeholder="$t('product.product-edit.473153-28')" :type="accountInputType"
-                                        :placeholder="$t('product.product-edit.473153-28')"
+                                        :readonly="form.status === 2 || form.isOwner == 0">
-                                        :type="accountInputType"
+                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px"
-                                        :readonly="form.status === 2 || form.isOwner == 0"
+                                            @click="changeInputType('account')"></el-button>
-                                    >
-                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px" @click="changeInputType('account')"></el-button>
                                     </el-input>
                                 </el-form-item>
-                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-29')" prop="mqttPassword">
+                                <el-form-item v-if="form.transport === 'MQTT'"
-                                    <el-input
+                                    :label="$t('product.product-edit.473153-29')" prop="mqttPassword">
-                                        style="width: 100%"
+                                    <el-input style="width: 100%" v-model="form.mqttPassword"
-                                        v-model="form.mqttPassword"
+                                        :placeholder="$t('product.product-edit.473153-30')" :type="passwordInputType"
-                                        :placeholder="$t('product.product-edit.473153-30')"
+                                        :readonly="form.status === 2 || form.isOwner == 0">
-                                        :type="passwordInputType"
+                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px"
-                                        :readonly="form.status === 2 || form.isOwner == 0"
+                                            @click="changeInputType('password')"></el-button>
-                                    >
-                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px" @click="changeInputType('password')"></el-button>
                                     </el-input>
                                 </el-form-item>
-                                <el-form-item v-if="form.transport === 'MQTT' && form.vertificateMethod !== 1" :label="$t('product.product-edit.473153-31')" prop="mqttSecret">
+                                <el-form-item v-if="form.transport === 'MQTT' && form.vertificateMethod !== 1"
-                                    <el-input style="width: 100%" v-model="form.mqttSecret" :placeholder="$t('product.product-edit.473153-26')" :type="keyInputType" readonly>
+                                    :label="$t('product.product-edit.473153-31')" prop="mqttSecret">
-                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px" @click="changeInputType('key')"></el-button>
+                                    <el-input style="width: 100%" v-model="form.mqttSecret"
+                                        :placeholder="$t('product.product-edit.473153-26')" :type="keyInputType"
+                                        readonly>
+                                        <el-button slot="append" icon="el-icon-view" style="font-size: 18px"
+                                            @click="changeInputType('key')"></el-button>
                                     </el-input>
                                 </el-form-item>
-                                <el-form-item v-if="form.transport === 'MQTT'" :label="$t('product.product-edit.473153-20')" prop="networkMethod">
+                                <el-form-item v-if="form.transport === 'MQTT'"
-                                    <el-switch v-model="form.isAuthorize" @change="changeIsAuthorize(form.isAuthorize)" :active-value="1" :inactive-value="0" :disabled="form.status == 2 || form.isOwner == 0" />
+                                    :label="$t('product.product-edit.473153-20')" prop="networkMethod">
+                                    <el-switch v-model="form.isAuthorize" @change="changeIsAuthorize(form.isAuthorize)"
+                                        :active-value="1" :inactive-value="0"
+                                        :disabled="form.status == 2 || form.isOwner == 0" />
                                 </el-form-item>
                             </el-col>
 
                             <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
                                 <el-form-item :label="$t('product.product-edit.473153-34')">
                                     <div v-if="form.status === 2 && !form.imgUrl && form.isOwner != 0">
-                                        <el-image
+                                        <el-image style="height: 145px; height: 145px; border-radius: 10px"
-                                            style="height: 145px; height: 145px; border-radius: 10px"
                                             :preview-src-list="[require('@/assets/images/gateway.png')]"
-                                            :src="require('@/assets/images/gateway.png')"
+                                            :src="require('@/assets/images/gateway.png')" fit="cover"
-                                            fit="cover"
+                                            v-if="form.deviceType == 2"></el-image>
-                                            v-if="form.deviceType == 2"
+                                        <el-image style="height: 145px; height: 145px; border-radius: 10px"
-                                        ></el-image>
-                                        <el-image
-                                            style="height: 145px; height: 145px; border-radius: 10px"
                                             :preview-src-list="[require('@/assets/images/video.png')]"
-                                            :src="require('@/assets/images/video.png')"
+                                            :src="require('@/assets/images/video.png')" fit="cover"
-                                            fit="cover"
+                                            v-else-if="form.deviceType == 3"></el-image>
-                                            v-else-if="form.deviceType == 3"
+                                        <el-image style="height: 145px; height: 145px; border-radius: 10px"
-                                        ></el-image>
-                                        <el-image
-                                            style="height: 145px; height: 145px; border-radius: 10px"
                                             :preview-src-list="[require('@/assets/images/product.png')]"
-                                            :src="require('@/assets/images/product.png')"
+                                            :src="require('@/assets/images/product.png')" fit="cover" v-else></el-image>
-                                            fit="cover"
-                                            v-else
-                                        ></el-image>
                                     </div>
                                     <div v-else>
-                                        <imageUpload ref="image-upload" :disabled="form.status === 2 ? true : false" :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)"></imageUpload>
+                                        <imageUpload ref="image-upload" :disabled="form.status === 2 ? true : false"
+                                            :value="form.imgUrl" :limit="1" :fileSize="1" @input="getImagePath($event)">
+                                        </imageUpload>
                                     </div>
                                 </el-form-item>
                             </el-col>
@@ -193,10 +199,13 @@
 
                         <el-col :span="20">
                             <el-form-item style="text-align: center; margin: 40px 0px">
-                                <el-button v-show="!!form.productId && form.status != 2 && form.isOwner != 0" type="primary" @click="handleSubmitForm" v-hasPermi="['iot:product:edit']">
+                                <el-button v-show="!!form.productId && form.status != 2 && form.isOwner != 0"
+                                    type="primary" @click="handleSubmitForm" v-hasPermi="['iot:product:edit']">
                                     {{ $t('update') }}
                                 </el-button>
-                                <el-button v-show="!form.productId && form.status != 2" type="primary" @click="handleSubmitForm" v-hasPermi="['iot:product:add']">{{ $t('add') }}</el-button>
+                                <el-button v-show="!form.productId && form.status != 2" type="primary"
+                                    @click="handleSubmitForm" v-hasPermi="['iot:product:add']">{{ $t('add')
+                                    }}</el-button>
                             </el-form-item>
                         </el-col>
                     </el-form>
@@ -207,33 +216,31 @@
                     <product-things-model ref="productThingsModel" :product="form" @updateModel="updateModel" />
                 </el-tab-pane>
                 <!-- 子产品 -->
-                <el-tab-pane
+                <el-tab-pane name="productSub"
-                    name="productSub"
                     v-if="form.deviceType == 2 && (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP' || form.protocolCode == 'MODBUS-JSON-HP' || form.protocolCode == 'MODBUS-JSON-ZQWL')"
-                    lazy
+                    lazy>
-                >
                     <span slot="label">{{ $t('product.product-edit.473153-83') }}</span>
                     <product-sub ref="productSub" :product="form" />
                 </el-tab-pane>
-                <el-tab-pane
+                <el-tab-pane name="productModbus" v-if="
-                    name="productModbus"
-                    v-if="
                     (form.deviceType == 1 || form.deviceType == 4) &&
                     (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP' || form.protocolCode == 'MODBUS-JSON-HP' || form.protocolCode == 'MODBUS-JSON-ZQWL')
-                    "
+                ">
-                >
                     <span slot="label">
                         {{ $t('product.product-edit.473153-80') }}
                     </span>
                     <product-modbus ref="productModbus" :product="form" @sendPollType="sendPollType" />
                 </el-tab-pane>
                 <!-- 轮询任务 -->
-                <el-tab-pane name="productModbusTask" v-if="form.deviceType !== 3 && form.deviceType !== 2 && polltype === 0 && (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP')" lazy>
+                <el-tab-pane name="productModbusTask"
+                    v-if="form.deviceType !== 3 && form.deviceType !== 2 && polltype === 0 && (form.protocolCode == 'MODBUS-RTU' || form.protocolCode == 'MODBUS-TCP')"
+                    lazy>
                     <span slot="label">{{ $t('product.product-edit.473153-84') }}</span>
                     <product-modbus-task ref="productModbusTask" :product="form" @getSendData="getData($event)" />
                 </el-tab-pane>
                 <el-tab-pane name="productAuthorize" v-if="form.deviceType !== 3 && form.transport === 'MQTT'">
-                    <span slot="label" v-hasPermi="['iot:authorize:query']">{{ $t('product.product-edit.473153-40') }}</span>
+                    <span slot="label" v-hasPermi="['iot:authorize:query']">{{ $t('product.product-edit.473153-40')
+                        }}</span>
                     <product-authorize ref="productAuthorize" :product="form" />
                 </el-tab-pane>
                 <el-tab-pane label="" name="sipConfig" v-if="form.deviceType === 3">
@@ -461,7 +468,9 @@ export default {
         getProductData() {
             getProduct(this.form.productId).then((res) => {
                 if (res.code === 200) {
+                    console.log('产品数据', JSON.stringify(res.data)); // 新增
                     this.form = res.data;
+                    console.log('当前form', JSON.stringify(this.form)); // 新增
                 }
             });
         },

vue.config.js

@@ -11,6 +11,16 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const name = process.env.VUE_APP_TITLE || 'FastBee物联网平台'; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口
+
+// 设置编译时间环境变量
+// process.env.VUE_APP_BUILD_TIME = new Date().toLocaleString('zh-CN', {
+//     year: 'numeric',
+//     month: '2-digit',
+//     day: '2-digit',
+//     hour: '2-digit',
+//     minute: '2-digit',
+//     second: '2-digit'
+// });
 const { codeInspectorPlugin } = require('code-inspector-plugin');
 
 // vue.config.js 配置说明