ZYC_web/test.vue

   <!-- 区域控制对话框 -->
        <!-- 弹窗 -->
        <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;">
                            <span>开始时间:</span>
                            <el-time-picker v-model="startTime" style="margin-left: 10px;margin-bottom: 10px;"
                                placeholder="Start time" />
                        </div>

                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="segment" label="持续时长" width="100">
                                <template #default="{ row }">
                                    <span>{{ row.segment }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="时分" width="180">
                                <template #default="{ row }">
                                    <el-time-picker v-model="row.time" placeholder="选择时分" format="HH:mm"
                                        value-format="HH:mm" :is-range="false" size="default" style="width: 150px;" />
                                </template>
                            </el-table-column>

                            <el-table-column label="亮度%" width="180">
                                <template #default="{ row }">
                                    <el-input v-model="row.brightness" placeholder="输入亮度" type="number" :min="0"
                                        :max="100" suffix-icon="el-icon-s-unlock" style="width: 150px;" />
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="text-align: center; margin-top: 20px">
                            <el-button type="success" @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>



Security_King: [],
Single_lightcontrol: [],
tableData: [
    { segment: '第一段', time: '', brightness: '' },
    { segment: '第二段', time: '', brightness: '' },
    { segment: '第三段', time: '', brightness: '' },
    { segment: '第四段', time: '', brightness: '' }
],
startTime: '',
paramUploadInterval: '',
groundResistanceTestInterval: '',
dialogVisible: false, // 控制对话框显示的变量
activeMenu: '1', // 默认选中的菜单项



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 product138Devices = this.deviceList.filter(device => device.productId === 138);
        const otherDevices = this.deviceList.filter(device => device.productId !== 138);
        // this.mqttSubscribe(product138Devices);
        // this.mqttSubscribe(otherDevices);
        this.Security_King = product138Devices;
        this.Single_lightcontrol = otherDevices;
        console.log("Product ID 138 Devices:", JSON.stringify(product138Devices));
        console.log("Other Devices:", JSON.stringify(otherDevices));
    });
},
DivideDevices(deviceList) {
    const product138Devices = deviceList.filter(device => device.productId === 138);
    const otherDevices = deviceList.filter(device => device.productId !== 138);
    return { product138Devices, otherDevices };
},
submitFormreglin(devicelist) {
    console.log('提交的数据:', {
        paramUploadInterval: this.paramUploadInterval,
        groundResistanceTestInterval: this.groundResistanceTestInterval,
    });
    let message = JSON.stringify({
        paramUploadInterval: this.paramUploadInterval,
        groundResistanceTestInterval: this.groundResistanceTestInterval,
    });
    this.mqttSubscribe(devicelist, message);

},
submitlightcontrol(devicelist) {
    console.log('提交的数据:', {
        paramUploadInterval: this.paramUploadInterval,
        groundResistanceTestInterval: this.groundResistanceTestInterval,
    });
    let message = JSON.stringify({
        paramUploadInterval: this.paramUploadInterval,
        groundResistanceTestInterval: this.groundResistanceTestInterval,
    });
    this.mqttSubscribe(devicelist, message);

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

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


AreamqttSubscribe(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]);

        // 下发消息
        // let message = JSON.stringify({ data: "Your initial data" }); // 自定义消息内容
        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));
},