11 KiB
11 KiB
区域管理代码
区域控制对话框
<!-- 区域控制对话框 -->
<!-- 弹窗 -->
<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>
区域管理相关的数据
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', // 默认选中的菜单项
// ... 其他数据
};
}
区域管理相关的方法
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);
},
// ... 其他方法
}
区域管理相关的样式
.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%;
}
}
}
}
区域管理相关的按钮
<!-- 区域控制 -->
<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>