From 1772c7e0e54b809cc60163c1db2298ebc3320df3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Fri, 7 Nov 2025 10:59:34 +0800
Subject: [PATCH] mqtt

---
 src/api/ems/site.js                 |  36 ++++++
 src/views/ems/site/mqtt/AddMqtt.vue | 111 ++++++++++++++++++
 src/views/ems/site/mqtt/index.vue   | 174 ++++++++++++++++++++++++++++
 3 files changed, 321 insertions(+)
 create mode 100644 src/views/ems/site/mqtt/AddMqtt.vue
 create mode 100644 src/views/ems/site/mqtt/index.vue

diff --git a/src/api/ems/site.js b/src/api/ems/site.js
index 901882c..d6e7458 100644
--- a/src/api/ems/site.js
+++ b/src/api/ems/site.js
@@ -145,3 +145,39 @@ export function importPointList(data) {
     data
   })
 }
+
+
+
+//mqtt
+export function getMqttList({pageSize,pageNum,mqttTopic,topicName}) {
+  return request({
+    url: `/ems/mqttConfig/list?pageSize=${pageSize}&pageNum=${pageNum}&mqttTopic=${mqttTopic}&topicName=${topicName}`,
+    method: 'get',
+  })
+}
+export function getMqttDetail(id) {
+  return request({
+    url: `/ems/mqttConfig/${id}`,
+    method: 'get',
+  })
+}
+export function addMqtt(data) {
+  return request({
+    url: `/ems/mqttConfig`,
+    method: 'post',
+    data
+  })
+}
+export function editMqtt(data) {
+  return request({
+    url: `/ems/mqttConfig`,
+    method: 'put',
+    data
+  })
+}
+export function deleteMqtt(id) {
+  return request({
+    url: `/ems/mqttConfig/${id}`,
+    method: 'delete',
+  })
+}
\ No newline at end of file
diff --git a/src/views/ems/site/mqtt/AddMqtt.vue b/src/views/ems/site/mqtt/AddMqtt.vue
new file mode 100644
index 0000000..4c341ee
--- /dev/null
+++ b/src/views/ems/site/mqtt/AddMqtt.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="400px"  class="ems-dialog" :title="mode === 'add'?'新增配置':`编辑配置` " >
+    <el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="140px">
+      <el-form-item label="订阅topic" prop="deviceName">
+        <el-input v-model="formData.mqttTopic" placeholder="请输入" clearable :style="{width: '100%'}">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="topic描述" prop="description">
+        <el-input v-model="formData.topicName" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button @click="closeDialog">取消</el-button>
+      <el-button type="primary" @click="saveDialog">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {editMqtt,addMqtt,getMqttDetail} from "@/api/ems/site";
+export default {
+  data() {
+    return {
+      loading:0,
+      dialogTableVisible:false,
+      mode:'',
+      formData: {
+        id:'',//设备唯一标识
+        topicName:'',
+        mqttTopic:''
+      },
+      rules: {
+        mqttTopic:[
+          { required: true, message: '请输入订阅topic', trigger: 'blur'},
+        ],
+        topicName:[
+          { required: true, message: '请输入topic描述', trigger: 'blur'},
+        ],
+      },
+    }
+  },
+  methods: {
+    showDialog(id){
+      this.dialogTableVisible = true
+      if(id){
+        this.mode = 'edit'
+        this.formData.id = id
+        this.getDetail(id)
+      }else{
+        this.mode = 'add'
+      }
+    },
+    getDetail(id){
+      getMqttDetail(id).then(response => {
+        const {topicName='',mqttTopic=''} = JSON.parse(JSON.stringify(response?.data || {}));
+        this.formData.mqttTopic=mqttTopic;
+        this.formData.topicName=topicName;
+      })
+    },
+    saveDialog() {
+      this.$refs.addTempForm.validate(valid => {
+        if (!valid) return
+        this.loading+=1
+        const {
+          id='',
+          mqttTopic='',//站点ID
+          topicName='',//设备id
+        }= this.formData;
+        if(this.mode === 'add'){
+          addMqtt( {mqttTopic,topicName}).then(response => {
+            if(response.code === 200){
+              //新增成功
+              // 关闭弹窗 更新表格
+              this.$emit('update')
+              this.closeDialog()
+            }
+          }).finally(() => {
+            this.loading-=1
+          })
+        }else{
+          editMqtt({mqttTopic,topicName,id}).then(response => {
+            if(response.code === 200){
+              //新增成功
+              // 关闭弹窗 更新表格
+              this.$emit('update')
+              this.closeDialog()
+            }
+          }).finally(() => {
+            this.loading-=1
+          })
+        }
+
+      })
+    },
+    closeDialog(){
+      this.$emit('clear')
+      // 清空所有数据
+      this.formData= {
+        id:'',//设备唯一标识
+        mqttTopic:'',
+        topicName:''
+      }
+      this.$refs.addTempForm.resetFields()
+      this.dialogTableVisible=false
+    }
+  }
+}
+
+</script>
+<style scoped>
+</style>
diff --git a/src/views/ems/site/mqtt/index.vue b/src/views/ems/site/mqtt/index.vue
new file mode 100644
index 0000000..67da5bf
--- /dev/null
+++ b/src/views/ems/site/mqtt/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="订阅topic">
+        <el-input
+            v-model="form.mqttTopic"
+            clearable
+            placeholder="请输入订阅topic"
+            style="width: 150px"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="topic描述">
+        <el-input
+            v-model="form.topicName"
+            clearable
+            placeholder="请输入topic描述"
+            style="width: 150px"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+                <el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
+                <el-button native-type="button" @click="onReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button type="primary" @click="addPowerConfig('')">新增</el-button>
+    <el-table
+        :data="tableData"
+        class="common-table"
+        max-height="600px"
+        stripe
+        style="width: 100%;margin-top: 25px">
+      <el-table-column
+          label="订阅topic"
+          prop="mqttTopic">
+      </el-table-column>
+      <el-table-column
+          label="topic描述"
+          prop="topicName">
+      </el-table-column>
+      <el-table-column
+          fixed="right"
+          label="操作">
+        <template slot-scope="scope">
+          <el-button
+              size="mini"
+              style="margin-top:10px;"
+              type="warning"
+              @click="addPowerConfig(scope.row.id)">
+            编辑{{scope.row.id}}
+          </el-button>
+          <el-button
+              size="mini"
+              style="margin-top:10px;"
+              type="danger"
+              @click="deleteMqtt(scope.row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+        v-show="tableData.length>0"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+    <add-mqtt ref="addMqtt" @update="getData"/>
+  </div>
+</template>
+
+<script>
+import {deleteMqtt,getMqttList} from '@/api/ems/site'
+import AddMqtt from './AddMqtt.vue'
+export default {
+  name: "Mqtt",
+  components: {AddMqtt},
+  computed: { },
+  data() {
+    return {
+      form:{
+        topicName:'',
+        mqttTopic:''
+      },
+      loading:false,
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    onReset(){
+      this.form={
+        topicName:'',
+        mqttTopic:''
+      }
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    getData(){
+      this.loading=true;
+      const {mqttTopic,topicName} = this.form;
+      const {pageNum,pageSize} = this;
+      getMqttList({pageNum,pageSize,mqttTopic,topicName}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    addPowerConfig(id=''){
+      this.$refs.addMqtt.showDialog(id);
+    },
+    deleteMqtt(row){
+      this.$confirm(`确认要删除该配置吗?`, {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            deleteMqtt(row.id).then(response => {
+              response.code === 200 && done();
+            }).finally(() => {
+              instance.confirmButtonLoading = false;
+            })
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在废弃成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        });
+        this.getData()
+        //调用接口 更新表格数据
+      }).catch(() => {
+        //取消关机
+      });
+    },
+  },
+  mounted() {
+    this.loading=true
+    this.getData()
+  }
+}
+</script>