341 lines
11 KiB
Markdown
341 lines
11 KiB
Markdown
# 区域管理代码
|
|
|
|
## 区域控制对话框
|
|
|
|
```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>
|
|
```
|