# 区域管理代码

## 区域控制对话框

```html
<!-- 区域控制对话框 -->
<!-- 弹窗 -->
<el-dialog :visible.sync="dialogVisible" width="600px" title="区域控制">
    <div style="display: flex;">
        <!-- 左侧菜单 -->
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect" style="width: 100px;">
            <el-menu-item index="1">安全王</el-menu-item>
            <el-menu-item index="2">单灯控</el-menu-item>
        </el-menu>

        <!-- 右侧内容区域 -->
        <div style="flex: 1; padding-left: 10px;">
            <div v-if="activeMenu === '1'">
                <el-form label-position="left">
                    <!-- 参数上传时间间隔 -->
                    <el-form-item label="参数上传时间间隔">
                        <el-input v-model="paramUploadInterval" placeholder="请输入参数上传时间间隔" clearable class="right-aligned" />
                    </el-form-item>

                    <!-- 接地电阻测试周期 -->
                    <el-form-item label="接地电阻测试周期">
                        <el-input v-model="groundResistanceTestInterval" placeholder="请输入接地电阻测试周期" clearable class="right-aligned" />
                    </el-form-item>

                    <!-- 发送按钮，居中 -->
                    <el-form-item>
                        <div style="text-align: center;">
                            <el-button type="success" @click="submitFormreglin(Security_King)">发送</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>

            <div v-if="activeMenu === '2'">
                <div style="text-align: center; margin-bottom: 20px;">
                    <span style="font-weight: bold; margin-right: 10px; font-size: 14px;">开始时间:</span>
                    <el-time-picker v-model="startTime" placeholder="选择开始时间" style="width: 180px;" />
                </div>

                <div class="light-control-table">
                    <div class="table-header">
                        <div class="header-cell" style="width: 25%;">阶段</div>
                        <div class="header-cell" style="width: 37.5%;">时长(分钟)</div>
                        <div class="header-cell" style="width: 37.5%;">亮度(%)</div>
                    </div>

                    <div v-for="(row, index) in tableData" :key="index" class="table-row">
                        <div class="table-cell" style="width: 25%;">
                            <span style="font-weight: bold;">{{ row.segment }}</span>
                        </div>
                        <div class="table-cell" style="width: 37.5%;">
                            <el-input v-model="row.duration" placeholder="输入时长" type="number" :min="0" />
                        </div>
                        <div class="table-cell" style="width: 37.5%;">
                            <el-input v-model="row.brightness" placeholder="输入亮度" type="number" :min="0" :max="100" />
                        </div>
                    </div>
                </div>

                <div style="text-align: center; margin-top: 25px">
                    <el-button type="success" size="medium" icon="el-icon-s-promotion" @click="submitlightcontrol(Single_lightcontrol)">发送配置</el-button>
                </div>
            </div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </span>
</el-dialog>
```

## 区域管理相关的数据

```javascript
data() {
    return {
        Security_King: [],
        Single_lightcontrol: [],
        tableData: [
            { segment: '阶段1', duration: '', brightness: '' },
            { segment: '阶段2', duration: '', brightness: '' },
            { segment: '阶段3', duration: '', brightness: '' }
        ],
        startTime: '',
        paramUploadInterval: '',
        groundResistanceTestInterval: '',
        dialogVisible: false, // 控制对话框显示的变量
        activeMenu: '1', // 默认选中的菜单项
        // ... 其他数据
    };
}
```

## 区域管理相关的方法

```javascript
methods: {
    /* 连接Mqtt消息服务器 */
    async connectMqtt() {
        if (this.$mqttTool.client == null) {
            await this.$mqttTool.connect();
        }
        // 删除所有message事件监听器
        this.$mqttTool.client.removeAllListeners('message');
        // 添加message事件监听器
        // this.mqttCallback();
        // this.getList();
    },

    mqttSubscribe(list, message) {
        // 订阅当前页面设备的服务主题
        let topics = [];
        for (let i = 0; i < list.length; i++) {
            let topicService = '/' + list[i].productId + '/' + list[i].serialNumber + '/property/post';
            topics.push(topicService);

            // 订阅主题
            this.$mqttTool.subscribe([topicService]);

            // 下发消息
            this.$mqttTool.publish(topicService, message, list[i].serialNumber)
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        }
        console.log("Subscribe Topics:", JSON.stringify(topics));
    },

    getGroupdeviceList(groupId) {
        this.dialogVisible = true; // 打开对话框
        const GroupListqueryParams = {
            pageNum: 1,
            pageSize: 12,
            showChild: true,
            groupId: groupId,
        };
        listDeviceShort(GroupListqueryParams).then((response) => {
            this.deviceList = response.rows;
            this.total = response.total;

            // 按 productId 分成两个数组
            const lightcontrol = this.deviceList.filter(device => device.productId === 138);
            const Security = this.deviceList.filter(device => device.productId === 136);
            this.Security_King = Security;
            this.Single_lightcontrol = lightcontrol;
            console.log(JSON.stringify(this.Security_King));
            console.log(JSON.stringify(this.Single_lightcontrol));
        });
    },

    submitFormreglin(devicelist) {
        // 构建符合要求的JSON格式
        let message = [
            {
                "id": "report_time_min",
                "remark": "",
                "value": this.paramUploadInterval || "0"
            }
        ];

        console.log("安全王设置下发数据:", JSON.stringify(message));
        this.AreamqttSubscribe(devicelist, JSON.stringify(message));
    },

    submitlightcontrol(devicelist) {
        // 获取开始时间的小时和分钟
        let startHour = '00';
        let startMinute = '00';

        if (this.startTime) {
            // 使用原生 Date 方法获取小时和分钟
            let timeObj = new Date(this.startTime);
            startHour = String(timeObj.getHours()).padStart(2, '0');
            startMinute = String(timeObj.getMinutes()).padStart(2, '0');
        }

        // 构建符合要求的JSON格式
        let message = [
            {
                "id": "S1_startH",
                "remark": "",
                "value": startHour
            },
            {
                "id": "S1_startM",
                "remark": "",
                "value": startMinute
            },
            {
                "id": "S1_seg1M",
                "remark": "",
                "value": this.tableData[0].duration || "0"
            },
            {
                "id": "S1_seg1B",
                "remark": "",
                "value": this.tableData[0].brightness || "0"
            },
            {
                "id": "S1_seg2M",
                "remark": "",
                "value": this.tableData[1].duration || "0"
            },
            {
                "id": "S1_seg2B",
                "remark": "",
                "value": this.tableData[1].brightness || "0"
            },
            {
                "id": "S1_seg3M",
                "remark": "",
                "value": this.tableData[2].duration || "0"
            },
            {
                "id": "S1_seg3B",
                "remark": "",
                "value": this.tableData[2].brightness || "0"
            }
        ];

        console.log("单灯控设置下发数据:", JSON.stringify(message));
        this.AreamqttSubscribe(devicelist, JSON.stringify(message));
    },

    AreamqttSubscribe(list, message) {
        // 订阅当前页面设备的服务主题
        let topics = [];
        for (let i = 0; i < list.length; i++) {
            let topicService = '/' + list[i].productId + '/' + list[i].serialNumber + '/function/get';
            topics.push(topicService);

            // 订阅主题
            this.$mqttTool.subscribe([topicService]);
            this.$mqttTool.publish(topicService, message, list[i].serialNumber)
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        }
        console.log("Subscribe Topics:", JSON.stringify(topics));
        this.$message({
            message: '指令下发成功',
            type: 'success'
        });
    },

    openDialog() {
        console.log('打开对话框');
    },

    handleConfirm() {
        // 处理确认按钮点击事件
        this.dialogVisible = false;
        // 在这里可以执行删除逻辑或者其他操作
    },

    handleMenuSelect(index) {
        this.activeMenu = index; // 切换菜单项
        console.log('选择的菜单项:', index);
    },

    // ... 其他方法
}
```

## 区域管理相关的样式

```css
.el-menu-vertical-demo {
    border-right: 1px solid #eaeaea;
}

.light-control-table {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;

    .table-header {
        display: flex;
        background-color: #f5f7fa;

        .header-cell {
            padding: 12px 0;
            text-align: center;
            font-weight: bold;
            color: #606266;
            border-right: 1px solid #ebeef5;

            &:last-child {
                border-right: none;
            }
        }
    }

    .table-row {
        display: flex;
        border-top: 1px solid #ebeef5;

        &:hover {
            background-color: #f5f7fa;
        }

        .table-cell {
            padding: 10px;
            text-align: center;
            border-right: 1px solid #ebeef5;
            display: flex;
            align-items: center;
            justify-content: center;

            &:last-child {
                border-right: none;
            }

            .el-input {
                width: 90%;
            }
        }
    }
}
```

## 区域管理相关的按钮

```html
<!-- 区域控制 -->
<el-button size="small" type="text" icon="el-icon-menu" @click="getGroupdeviceList(scope.row.groupId)" v-hasPermi="['iot:group:add']">{{ $t('iot.group.index.637432-28') }}</el-button>
```
