`fix`

ruoyi-system/src/main/java/com/ruoyi/data/domain/TblModbusRtu.java

@@ -23,60 +23,61 @@ public class TblModbusRtu extends BaseEntity {
     private static final long serialVersionUID=1L;
 
     /**
-     * 
+     *
      */
     @TableId(value = "id")
     private Long id;
     /**
-     * 
+     *
      */
     private String protocolName;
     /**
-     * 
+     *
      */
     private String protocolDesc;
     /**
-     * 
+     *
      */
     private String protocolType;
     /**
-     * 
+     *
      */
     private String apiUrl;
     /**
-     * 
+     *
      */
     private String commPortId;
     /**
-     * 
+     *
      */
     private Long commPortType;
     /**
-     * 
+     *
      */
     private Long baudRate;
     /**
-     * 
+     *
      */
     private Long dateBits;
     /**
-     * 
+     *
      */
     private Long parity;
     /**
-     * 
+     *
      */
     private Long stopBits;
     /**
-     * 
+     *
      */
     private String uuid;
     /**
-     * 
+     *
      */
+    @TableField("intervals")
     private String interval;
     /**
-     * 
+     *
      */
     private String remark;
 

ruoyi-system/src/main/java/com/ruoyi/data/domain/bo/TblMqttBo.java

@@ -95,5 +95,7 @@ public class TblMqttBo extends BaseEntity {
      */
     private Date utime;
 
+    private Long status;
+
 
 }

ruoyi-system/src/main/resources/mapper/data/TblModbusRtuMapper.xml

@@ -17,7 +17,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <result property="parity" column="parity"/>
         <result property="stopBits" column="stop_bits"/>
         <result property="uuid" column="uuid"/>
-        <result property="interval" column="interval"/>
+        <result property="interval" column="intervals"/>
         <result property="remark" column="remark"/>
         <result property="createBy" column="create_by"/>
         <result property="createTime" column="create_time"/>

ruoyi-ui-vue3/src/views/gateway/modbusrtu/add.vue

@@ -5,16 +5,14 @@
         <div class="card-header">
           <span>Modbus Rtu 协议配置-新增</span>
           <div>
-            <el-button type="warning" @click="">复位</el-button>
-            <el-button type="primary" @click="">保存</el-button>
+            <el-button type="warning" @click="initdata">复位</el-button>
+            <el-button type="primary" @click="savedata">保存</el-button>
             <el-button type="primary" plain @click="router.back();">返回</el-button>
           </div>
         </div>
       </template>
       <el-row>
         <el-col :span="24">
-
-
             <el-descriptions :column="4">
               <el-descriptions-item>
                 <template #label>
@@ -24,7 +22,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.protocolName" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
 
@@ -35,7 +33,7 @@
                   </div>
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.apiUrl" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -46,7 +44,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.commPortId" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -57,7 +55,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.commPortType" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -68,7 +66,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.baudRate" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -79,7 +77,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.dateBits" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -90,7 +88,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.parity" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -101,7 +99,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.stopBits" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
 
@@ -112,7 +110,7 @@
                   </div>
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="currentdata.interval" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
 
@@ -122,8 +120,8 @@
                     UUID
                   </div>
                 </template>
-                <div class="content-w">
-                  -
+                <div style="display: inline">
+                  {{currentdata.uuid}}
                 </div>
               </el-descriptions-item>
               <el-descriptions-item :span="2">
@@ -133,7 +131,7 @@
                   </div>
                 </template>
                 <div class="content-w" style="min-width: 400px">
-                  <el-input type="textarea" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入描述"/>
+                  <el-input type="textarea" v-model="currentdata.protocolDesc" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入描述"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item :span="2">
@@ -143,7 +141,7 @@
                   </div>
                 </template>
                 <div class="content-w" style="min-width: 400px">
-                  <el-input type="textarea" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入备注"/>
+                  <el-input type="textarea" v-model="currentdata.remark" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入备注"/>
                 </div>
               </el-descriptions-item>
             </el-descriptions>
@@ -162,16 +160,62 @@
 </template>
 
 <script setup lang="ts" name="Units">
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
-import ModbusTcp from "@/views/data/modbusTcp/index.vue";
+import { addModbusRtu} from "@/api/data/modbusRtu"
+import {ElMessage} from "element-plus";
 
 
 const route = useRoute();
 const router = useRouter();
 
-const tjdata = ref([]);
-const zxdata = ref([]);
+const currentdata = ref({
+  "protocolName": "",
+  "protocolDesc": "",
+  "protocolType": "modbusrtu",
+  "apiUrl": "",
+  "commPortId": "",
+  "commPortType": "",
+  "baudRate": 0,
+  "dateBits": 0,
+  "parity": 0,
+  "stopBits": 0,
+  "uuid": "",
+  "interval": 0,
+  "remark": ""
+})
+
+const initdata = ()=>{
+  currentdata.value = {
+    "protocolName": "",
+    "protocolDesc": "",
+    "protocolType": "modbusrtu",
+    "apiUrl": "",
+    "commPortId": "",
+    "commPortType": "",
+    "baudRate": 0,
+    "dateBits": 0,
+    "parity": 0,
+    "stopBits": 0,
+    "uuid": "",
+    "interval": 0,
+    "remark": ""
+  };
+}
+
+const savedata = ()=>{
+  addModbusRtu(currentdata.value).then(res=>{
+    ElMessage.success("保存成功");
+    router.back();
+  })
+}
+
+onMounted(()=>{
+  currentdata.value.uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == "x"? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+})
 
 
 </script>

ruoyi-ui-vue3/src/views/gateway/modbusrtu/index.vue

@@ -33,8 +33,8 @@
           <span>Modbus RTU 协议配置</span>
           <div>
             <el-button type="primary" @click="goadd">添加</el-button>
-            <el-button type="danger">批量删除</el-button>
-            <el-button type="primary" plain>显示字段</el-button>
+            <el-button type="danger" @click="deleteall">批量删除</el-button>
+            <el-button type="primary" plain @click="ziduanshow=true">显示字段</el-button>
           </div>
         </div>
 
@@ -46,18 +46,40 @@
           <el-col :span="24">
             <el-table :data="tabledata" border>
               <el-table-column type="selection" width="55" />
-              <el-table-column label="协议名称"></el-table-column>
-              <el-table-column label="Modbus串口"></el-table-column>
-              <el-table-column label="串口类型"></el-table-column>
-              <el-table-column label="波特率"></el-table-column>
-              <el-table-column label="数据位"></el-table-column>
-              <el-table-column label="奇偶校验"></el-table-column>
-              <el-table-column label="停止位"></el-table-column>
-              <el-table-column label="API接口地址"></el-table-column>
-              <el-table-column label="UUID"></el-table-column>
-              <el-table-column label="轮询时间(毫秒)"></el-table-column>
-              <el-table-column label="描述"></el-table-column>
-              <el-table-column label="操作" fixed="right"></el-table-column>
+              <el-table-column v-for="item in cloumdata.filter(i=>i.visible)" :prop="item.prop" :label="item.label" ></el-table-column>
+              <el-table-column label="操作">
+                <template #default="scope">
+                  <div>
+                    <el-button
+                      link  @click="showdmodeletail(scope.row,1)"
+                    >
+                      <el-tooltip effect="dark" content="详情">
+                        <el-icon>
+                          <Memo />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+                    <el-button
+                      link  @click="showdmodeletail(scope.row,2)"
+                    >
+                      <el-tooltip effect="dark" content="编辑">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+
+                    <el-popconfirm title="确定删除该协议?" @confirm="deleterow(scope.row)">
+                      <template #reference>
+                        <el-button link
+                        ><el-tooltip effect="dark" content="删除"
+                        ><el-icon><Delete /></el-icon></el-tooltip
+                        ></el-button>
+                      </template>
+                    </el-popconfirm>
+                  </div>
+                </template>
+              </el-table-column>
 
             </el-table>
           </el-col>
@@ -76,6 +98,167 @@
       </div>
     </el-card>
 
+    <el-dialog
+      title="字段显示"
+      v-model="ziduanshow"
+      width="50%"
+      @close="ziduanshow = false"
+    >
+      <div style="display: flex;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;">
+        <el-checkbox v-for="item in cloumdata" v-model="item.visible" :label="item.label" size="large" />
+      </div>
+
+    </el-dialog>
+
+    <el-dialog
+      :title="`${showdetailtype==1?'协议详情':'编辑协议'}`"
+      v-model="showdetail"
+      width="50%"
+      @close="showdetail = false"
+    >
+      <div >
+        <el-descriptions :column="2">
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 协议名称
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.protocolName" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+
+          <el-descriptions-item >
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> Api接口地址
+              </div>
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.apiUrl" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> Modbus串口
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.commPortId" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 串口类型
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.commPortType" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 波特率
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.baudRate" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 数据位
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.dateBits" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 奇偶校验
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.parity" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 停止位
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.stopBits" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+
+          <el-descriptions-item >
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                轮询间隔时间(毫秒)
+              </div>
+            </template>
+            <div class="content-w">
+              <el-input :disabled="showdetailtype==1" v-model="currentdata.intervals" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+
+          <el-descriptions-item :span="3">
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                UUID
+              </div>
+            </template>
+            <div style="display: inline">
+              {{currentdata.uuid}}
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right;    vertical-align: top;">
+                描述
+              </div>
+            </template>
+            <div class="content-w" style="min-width: 400px">
+              <el-input :disabled="showdetailtype==1" type="textarea" v-model="currentdata.protocolDesc" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入描述"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right;    vertical-align: top;">
+                备注
+              </div>
+            </template>
+            <div class="content-w" style="min-width: 400px">
+              <el-input :disabled="showdetailtype==1" type="textarea" v-model="currentdata.remark" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入备注"/>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+
+
+      </div>
+
+      <div slot="footer" class="dialog-footer" style="text-align: right" v-if="showdetailtype!=1">
+        <el-button @click="showdetail = false">取 消</el-button>
+        <el-button type="primary" @click="dosave">保 存</el-button>
+      </div>
+    </el-dialog>
+
 
   </div>
 </template>
@@ -83,16 +266,124 @@
 <script setup lang="ts" name="Units">
 import {ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
+import {listModbusRtu,delModbusRtu,updateModbusRtu} from "@/api/data/modbusRtu"
+import {ElMessage, ElMessageBox} from "element-plus";
 
-
+const showdetail = ref(false);
+const showdetailtype = ref(1);
 const route = useRoute();
 const router = useRouter();
 
 const searchform = ref({
-  protocolname: '',
+  protocolName: '',
 })
+const tableref = ref(null);
 
 const tabledata = ref([1])
+
+const initdata = ()=>{
+  searchform.value = {
+    protocolName: '',
+  }
+}
+const currentdata = ref({
+
+  "protocolName": "",
+  "protocolDesc": "",
+  "protocolType": "",
+  "apiUrl": "",
+  "commPortId": "",
+  "commPortType": "",
+  "baudRate": 0,
+  "dateBits": 0,
+  "parity": 0,
+  "stopBits": 0,
+  "uuid": "",
+  "interval": 0,
+  "remark": ""
+});
+
+const showdmodeletail = (item,type)=>{
+  showdetailtype.value = type;
+  currentdata.value = item;
+  showdetail.value = true;
+}
+
+const deleterow =(item)=>{
+  delModbusRtu(item.id).then((res)=>{
+    ElMessage.success("删除成功");
+    getalldata();
+  })
+}
+
+const deleteall = ()=>{
+  let selected =  tableref.value.getSelectionRows();
+  if(selected.length==0) {
+    ElMessage.warning("请选择要删除的行");
+    return;
+  }
+
+  if (selected.length > 0) {
+    ElMessageBox.confirm(
+      `是否删除${selected.length}条数据`,
+      "警告",
+      {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: 'warning',
+      }
+    ).then(() => {
+
+      delModbusRtu(selected.map(i => i.id).join(",")).then((res) => {
+        ElMessage.success("删除成功");
+        getalldata();
+      })
+
+    });
+  }
+
+}
+
+const  dosave = ()=>{
+  if(showdetailtype.value==2){
+    updateModbusRtu(currentdata.value).then(res=>{
+      ElMessage.success("保存成功");
+      showdetail.value = false;
+      getalldata();
+    })
+  }
+
+}
+
+const cloumdata = ref([
+  {label: '协议名称', prop:'protocolName',visible:true},
+  {label: 'Modbus串口', prop:'commPortId',visible:true},
+  {label: '串口类型', prop:'commPortType',visible:true},
+  {label: '波特率', prop:'baudRate',visible:true},
+  {label: '数据位', prop:'dateBits',visible:true},
+  {label: '奇偶校验', prop:'parity',visible:true},
+  {label: '停止位', prop:'stopBits',visible:true},
+  {label: 'API接口地址', prop:'apiUrl',visible:true},
+  {label: 'UUID', prop:'uuid',visible:true},
+  {label: '轮询时间(毫秒)', prop:'interval',visible:true},
+  {label: '描述', prop:'remark',visible:true},
+]);
+const ziduanshow = ref(false);
+
+const pagedata = ref({
+  total:0,
+  size:10,
+  current:1
+});
+
+const getalldata = () => {
+  listModbusRtu(searchform.value).then(res => {
+    const {rows,total,page,size} = res;
+    pagedata.value = {total:total,current:page, size:10};
+    tabledata.value = rows
+  })
+}
+getalldata()
 const goadd = ()=>{
   router.push("/gateway/modbusrtu/add");
 }

ruoyi-ui-vue3/src/views/gateway/modbustcp/add.vue

@@ -5,8 +5,8 @@
         <div class="card-header">
           <span>Modbus Tcp 协议配置-新增</span>
           <div>
-            <el-button type="warning" @click="">复位</el-button>
-            <el-button type="primary" @click="">保存</el-button>
+            <el-button type="warning" @click="initdata">复位</el-button>
+            <el-button type="primary" @click="savedata">保存</el-button>
             <el-button type="primary" plain @click="router.back();">返回</el-button>
           </div>
         </div>
@@ -24,7 +24,7 @@
 
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="modbustcp.protocolName" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item>
@@ -34,7 +34,7 @@
                   </div>
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="modbustcp.serverIp" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
 
@@ -45,7 +45,7 @@
                   </div>
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="modbustcp.serverPort" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item >
@@ -55,18 +55,18 @@
                   </div>
                 </template>
                 <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                  <el-input v-model="modbustcp.apiUrl" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
 
               <el-descriptions-item >
                 <template #label>
-                  <div style="display: inline-block;min-width: 100px;text-align: right">
+                  <div style="display: inline-block;max-width: 100px;text-align: right">
                     轮询间隔时间(毫秒)
                   </div>
                 </template>
-                <div class="content-w">
-                  <el-input placeholder="请输入"/>
+                <div class="content-w" style="vertical-align: top">
+                  <el-input v-model="modbustcp.intervals" placeholder="请输入"/>
                 </div>
               </el-descriptions-item>
 
@@ -76,8 +76,8 @@
                     UUID
                   </div>
                 </template>
-                <div class="content-w">
-                  -
+                <div style="display: inline">
+                  {{modbustcp.uuid}}
                 </div>
               </el-descriptions-item>
               <el-descriptions-item :span="2">
@@ -87,7 +87,7 @@
                   </div>
                 </template>
                 <div class="content-w" style="min-width: 400px">
-                  <el-input type="textarea" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入描述"/>
+                  <el-input type="textarea"  v-model="modbustcp.protocolDesc" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入描述"/>
                 </div>
               </el-descriptions-item>
               <el-descriptions-item :span="2">
@@ -97,7 +97,7 @@
                   </div>
                 </template>
                 <div class="content-w" style="min-width: 400px">
-                  <el-input type="textarea" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入备注"/>
+                  <el-input type="textarea" v-model="modbustcp.remark" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入备注"/>
                 </div>
               </el-descriptions-item>
             </el-descriptions>
@@ -116,17 +116,55 @@
 </template>
 
 <script setup lang="ts" name="Units">
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
-import ModbusTcp from "@/views/data/modbusTcp/index.vue";
-
+import {addModbusTcp} from "@/api/data/modbusTcp"
+import {ElMessage, ElMessageBox} from "element-plus";
 
 const route = useRoute();
 const router = useRouter();
 
-const tjdata = ref([]);
-const zxdata = ref([]);
 
+const modbustcp = ref({
+  protocolName: "",
+  protocolDesc: "",
+  protocolType: "modbustcp",
+  serverIp: "",
+  serverPort: "",
+  apiUrl: "",
+  uuid: "",
+  intervals: 0,
+  remark: "",
+});
+
+const initdata = ()=>{
+  modbustcp.value = {
+    "protocolName": "",
+    "protocolDesc": "",
+    "protocolType": "modbustcp",
+    "serverIp": "",
+    "serverPort": "",
+    "apiUrl": "",
+    "uuid": "",
+    "intervals": 0,
+    "remark": "",
+  }
+}
+
+const savedata = ()=>{
+  addModbusTcp(modbustcp.value).then(res=>{
+    ElMessage.success("保存成功");
+    router.back();
+  })
+}
+
+onMounted(() => {
+
+  modbustcp.value.uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+    var r = Math.random() * 16 | 0, v = c == "x"? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+});
 
 </script>
 

ruoyi-ui-vue3/src/views/gateway/modbustcp/index.vue

@@ -13,14 +13,14 @@
           >
             <div style="font-size: 12px; width: 80px">协议名称:</div>
             <el-input
-              v-model="searchform.protocolname"
+              v-model="searchform.protocolName"
               placeholder="协议名称"
             ></el-input>
           </div>
         </div>
         <div>
-          <el-button type="primary" plain>重置</el-button>
-          <el-button type="primary">搜索</el-button>
+          <el-button type="primary" plain @click="initdata">重置</el-button>
+          <el-button type="primary" @click="getalldata">搜索</el-button>
         </div>
       </div>
 
@@ -33,8 +33,8 @@
           <span>Modbus TCP 协议配置</span>
           <div>
             <el-button type="primary" @click="goadd">添加</el-button>
-            <el-button type="danger">批量删除</el-button>
-            <el-button type="primary" plain>显示字段</el-button>
+            <el-button type="danger" @click="deleteall">批量删除</el-button>
+            <el-button type="primary" plain @click="ziduanshow=true">显示字段</el-button>
           </div>
         </div>
 
@@ -44,16 +44,42 @@
       <div>
         <el-row>
           <el-col :span="24">
-            <el-table :data="tabledata" border>
+            <el-table :data="tabledata" ref="tableref" border>
               <el-table-column type="selection" width="55" />
-              <el-table-column label="协议名称"></el-table-column>
-              <el-table-column label="IP地址"></el-table-column>
-              <el-table-column label="端口"></el-table-column>
-              <el-table-column label="API接口地址"></el-table-column>
-              <el-table-column label="UUID"></el-table-column>
-              <el-table-column label="轮询时间(毫秒)"></el-table-column>
-              <el-table-column label="描述"></el-table-column>
-              <el-table-column label="操作"></el-table-column>
+              <el-table-column v-for="item in cloumdata.filter(i=>i.visible)" :prop="item.prop" :label="item.label" ></el-table-column>
+              <el-table-column label="操作">
+                <template #default="scope">
+                  <div>
+                    <el-button
+                      link  @click="showdmodeletail(scope.row,1)"
+                     >
+                      <el-tooltip effect="dark" content="详情">
+                        <el-icon>
+                          <Memo />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+                    <el-button
+                      link  @click="showdmodeletail(scope.row,2)"
+                    >
+                      <el-tooltip effect="dark" content="编辑">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+
+                    <el-popconfirm title="确定删除该协议?" @confirm="deleterow(scope.row)">
+                      <template #reference>
+                        <el-button link
+                        ><el-tooltip effect="dark" content="删除"
+                        ><el-icon><Delete /></el-icon></el-tooltip
+                        ></el-button>
+                      </template>
+                    </el-popconfirm>
+                  </div>
+                </template>
+              </el-table-column>
 
             </el-table>
           </el-col>
@@ -62,7 +88,9 @@
                            small
                            background
                            layout="prev, pager, next"
-                           :total="50"
+                           :total="pagedata.total"
+                           :page-size="pagedata.size"
+                           :current-page="pagedata.current"
                            class="mt-4"
             />
           </el-col>
@@ -72,26 +100,237 @@
       </div>
     </el-card>
 
+    <el-dialog
+      title="字段显示"
+      v-model="ziduanshow"
+      width="50%"
+      @close="ziduanshow = false"
+    >
+      <div style="display: flex;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;">
+        <el-checkbox v-for="item in cloumdata" v-model="item.visible" :label="item.label" size="large" />
+      </div>
+
+    </el-dialog>
+
+
+    <el-dialog
+      :title="`${showdetailtype==1?'协议详情':'编辑协议'}`"
+      v-model="showdetail"
+      width="50%"
+      @close="showdetail = false"
+    >
+      <div >
+        <el-descriptions :column="2">
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 协议名称
+              </div>
+
+            </template>
+            <div class="content-w">
+              <el-input v-model="currentdata.protocolName" :disabled="showdetailtype==1" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> IP地址
+              </div>
+            </template>
+            <div class="content-w">
+              <el-input v-model="currentdata.serverIp" :disabled="showdetailtype==1" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> 端口
+              </div>
+            </template>
+            <div class="content-w">
+              <el-input v-model="currentdata.serverPort" :disabled="showdetailtype==1" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item >
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                <span style="color: red">*</span> Api接口地址
+              </div>
+            </template>
+            <div class="content-w">
+              <el-input v-model="currentdata.apiUrl" :disabled="showdetailtype==1" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
+
+          <el-descriptions-item >
+            <template #label>
+              <div style="display: inline-block;max-width: 100px;text-align: right">
+                轮询间隔时间(毫秒)
+              </div>
+            </template>
+            <div class="content-w" style="vertical-align: top">
+              <el-input v-model="currentdata.intervals" :disabled="showdetailtype==1" placeholder="请输入"/>
+            </div>
+          </el-descriptions-item>
 
+          <el-descriptions-item :span="3">
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right">
+                UUID
+              </div>
+            </template>
+            <div style="display: inline">
+              {{currentdata.uuid}}
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right;    vertical-align: top;">
+                描述
+              </div>
+            </template>
+            <div class="content-w" style="min-width: 400px">
+              <el-input type="textarea"  v-model="currentdata.protocolDesc" :disabled="showdetailtype==1" :line-count="5"  show-word-limit maxlength="200" placeholder="请输入描述"/>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item :span="2">
+            <template #label>
+              <div style="display: inline-block;min-width: 100px;text-align: right;    vertical-align: top;">
+                备注
+              </div>
+            </template>
+            <div class="content-w" style="min-width: 400px">
+              <el-input type="textarea" v-model="currentdata.remark" :line-count="5" :disabled="showdetailtype==1"  show-word-limit maxlength="200" placeholder="请输入备注"/>
+            </div>
+          </el-descriptions-item>
+        </el-descriptions>
+
+
+      </div>
+
+      <div slot="footer" class="dialog-footer" style="text-align: right" v-if="showdetailtype!=1">
+        <el-button @click="showdetail = false">取 消</el-button>
+        <el-button type="primary" @click="dosave">保 存</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts" name="Units">
 import {ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
-
+import {listModbusTcp,delModbusTcp,updateModbusTcp} from "@/api/data/modbusTcp"
+import {ElMessage, ElMessageBox} from "element-plus";
 
 const route = useRoute();
 const router = useRouter();
+const showdetail = ref(false);
+const showdetailtype = ref(1);
 
 const searchform = ref({
-  protocolname: '',
+  protocolName: '',
 })
+const tableref = ref(null);
+
+const initdata = ()=>{
+  searchform.value = {
+    protocolName: '',
+  }
+}
 
-const tabledata = ref([1])
+const currentdata = ref({
+  protocolName: "",
+  protocolDesc: "",
+  protocolType: "modbustcp",
+  serverIp: "",
+  serverPort: "",
+  apiUrl: "",
+  uuid: "",
+  intervals: 0,
+  remark: "",
+});
+
+const showdmodeletail = (item,type)=>{
+   showdetailtype.value = type;
+   currentdata.value = item;
+   showdetail.value = true;
+}
+const deleterow =(item)=>{
+  delModbusTcp(item.id).then((res)=>{
+     ElMessage.success("删除成功");
+     getalldata();
+  })
+}
+
+const deleteall = ()=>{
+  let selected =  tableref.value.getSelectionRows();
+  if(selected.length==0) {
+    ElMessage.warning("请选择要删除的行");
+    return;
+  }
+
+  if (selected.length > 0) {
+    ElMessageBox.confirm(
+      `是否删除${selected.length}条数据`,
+      "警告",
+      {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: 'warning',
+      }
+    ).then(() => {
+
+      delModbusTcp(selected.map(i => i.id).join(",")).then((res) => {
+        ElMessage.success("删除成功");
+        getalldata();
+      })
+
+    });
+  }
+
+}
+
+const tabledata = ref([])
 const goadd = ()=>{
    router.push("/gateway/modbustcp/add");
 }
+const  dosave = ()=>{
+    if(showdetailtype.value==2){
+      updateModbusTcp(currentdata.value).then(res=>{
+        ElMessage.success("保存成功");
+        showdetail.value = false;
+        getalldata();
+      })
+    }
+
+}
+
+const ziduanshow = ref(false);
+const cloumdata = ref([
+  {label: '协议名称', prop:'protocolName',visible:true},
+  {label: 'IP地址', prop:'serverIp',visible:true},
+  {label: '端口', prop:'serverPort',visible:true},
+  {label: 'API接口地址', prop:'apiUrl',visible:true},
+  {label: 'UUID', prop:'uuid',visible:true},
+  {label: '轮询时间(毫秒)', prop:'intervals',visible:true},
+  {label: '描述', prop:'remark',visible:true},
+]);
+const pagedata = ref({
+  total:0,
+  size:10,
+  current:1
+});
+const getalldata = () => {
+  listModbusTcp(searchform.value).then(res => {
+    const {rows,total,page,size} = res;
+    pagedata.value = {total:total,current:page, size:10};
+    tabledata.value = rows
+  })
+}
+getalldata()
+
 
 
 </script>
@@ -102,4 +341,8 @@ const goadd = ()=>{
   flex-direction: row;
   justify-content: space-between;
 }
+.content-w {
+  display: inline-flex;
+  max-width: 160px;
+}
 </style>

ruoyi-ui-vue3/src/views/mqtt/index.vue

@@ -295,7 +295,8 @@ const getmqttlist = ()=>{
       //@ts-ignore
       tabledata.value = res.rows;
       if(currentmqtt.value.id!=undefined && currentmqtt.value.id!=null){
-        tableref.value.setCurrentRow(currentmqtt);
+       let selected =  tabledata.value.filter(item=>item.id==currentmqtt.value.id)
+        tableref.value.setCurrentRow(selected.length>0?selected[0]:tabledata.value[0]);
       }else{
         tableref.value.setCurrentRow(tabledata.value[0]);
       }