# 区域管理代码
## 区域控制对话框
```html
```
## 区域管理相关的数据
```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
{{ $t('iot.group.index.637432-28') }}
```