From 1a837146fb1c1fb1fee7325b98b9a6e526a71c6a Mon Sep 17 00:00:00 2001
From: huangwenlong <yljungg@163.com>
Date: Wed, 14 Dec 2022 19:02:53 +0800
Subject: [PATCH] =?UTF-8?q?tcp=E7=BB=84=E4=BB=B6=20tcpAction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/protocol/Components.vue | 146 +++++++++++++++++++++++++++++-
 src/views/rule/Action.vue         |  24 ++++-
 src/views/rule/Rules.vue          |   2 +-
 src/views/rule/TcpAction.vue      | 125 +++++++++++++++++++++++++
 4 files changed, 291 insertions(+), 6 deletions(-)
 create mode 100644 src/views/rule/TcpAction.vue

diff --git a/src/views/protocol/Components.vue b/src/views/protocol/Components.vue
index e723767..afc56b0 100755
--- a/src/views/protocol/Components.vue
+++ b/src/views/protocol/Components.vue
@@ -133,8 +133,130 @@
           <el-select v-model="editForm.protocol" placeholder="请选择通讯协议">
             <el-option label="MQTT" value="mqtt"> </el-option>
             <el-option label="HTTP" value="http"> </el-option>
+            <el-option label="TCP" value="tcp"> </el-option>
           </el-select>
         </el-form-item>
+
+        <el-form-item
+            v-if="editForm.protocol == 'tcp'"
+            label="配置"
+            prop="config"
+        >
+          <el-form
+              style="
+              border: 1px solid #ddd;
+              padding: 10px 10px;
+              box-sizing: border-box;
+              border-radius: 3px;
+            "
+              label-width="80px"
+              :model="tcpConfigForm"
+              :rules="tcpConfigRule"
+              ref="mqttConfigForm"
+          >
+            <el-form-item label="端口" prop="port">
+              <el-input
+                  style="width: 250px"
+                  size="small"
+                  v-model="tcpConfigForm.port"
+                  auto-complete="off"
+                  placeholder="请输入端口"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="模式" prop="type">
+              <el-radio v-model="tcpConfigForm.type" label="server"
+              >服务端模式</el-radio
+              >
+              <el-radio v-model="tcpConfigForm.type" label="client"
+              >客户端模式</el-radio
+              >
+              <div>
+                <el-tag v-if="tcpConfigForm.type == 'server'" type="info">
+                  设备直连通讯组件，收到设备消息直接进行处理
+                </el-tag>
+                <el-tag v-if="tcpConfigForm.type == 'client'" type="info">
+                  设备连接其它tcp服务端接受消息
+                </el-tag>
+              </div>
+            </el-form-item>
+            <el-form-item
+                v-if="tcpConfigForm.type == 'client'"
+                label="IP地址"
+                prop="host"
+            >
+              <el-input
+                  style="width: 250px"
+                  size="small"
+                  v-model="tcpConfigForm.host"
+                  auto-complete="off"
+                  placeholder="请输入IP地址"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+                v-if="tcpConfigForm.type == 'server'"
+                label="IP地址"
+                prop="host"
+            >
+              <el-input
+                  style="width: 250px"
+                  size="small"
+                  v-model="tcpConfigForm.host"
+                  auto-complete="off"
+                  placeholder="请输入IP地址"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+                label="处理方式"
+                prop="parserType">
+              <el-select v-model="tcpConfigForm.parserType" placeholder="请选择通讯协议">
+                <el-option label="不处理" value="不处理"> </el-option>
+                <el-option label="固定长度" value="固定长度"> </el-option>
+                <el-option label="分隔符" value="分隔符"> </el-option>
+                <el-option label="自定义脚本" value="自定义脚本"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+                v-if="tcpConfigForm.parserType == '固定长度'"
+                label="长度"
+                prop="fix"
+            >
+              <el-input
+                  style="width: 250px"
+                  size="small"
+                  v-model="tcpConfigForm.parserConfiguration.fix"
+                  auto-complete="off"
+                  placeholder="请输入长度"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+                v-if="tcpConfigForm.parserType == '分隔符'"
+                label="分隔符"
+                prop="delimited"
+            >
+              <el-input
+                  style="width: 250px"
+                  size="small"
+                  v-model="tcpConfigForm.parserConfiguration.delimited"
+                  auto-complete="off"
+                  placeholder="请输入分隔符"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+                v-if="tcpConfigForm.parserType == '自定义脚本'"
+                label="script"
+                prop="fix"
+            >
+              <el-input
+                  style="width: 250px"
+                  size="small"
+                  v-model="tcpConfigForm.parserConfiguration.script"
+                  auto-complete="off"
+                  placeholder="请输入自定义脚本"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+        </el-form-item>
+
         <el-form-item
           v-if="editForm.protocol == 'mqtt'"
           label="配置"
@@ -422,6 +544,22 @@ export default {
           { required: true, message: "请选择转换器", trigger: "blur" },
         ],
       },
+      tcpConfigForm: {
+        port: 2424,
+        ssl: false,
+        type: "server",
+        parserType: "不处理",
+        parserConfiguration:{
+          delimited: "",
+          fix: 1,
+          script: ""
+        },
+        host: "0.0.0.0"
+      },
+      tcpConfigRule: {
+        port: [{ required: true, message: "请输入端口号", trigger: "blur" }],
+        host: [{ required: true, message: "请输入端IP", trigger: "blur" }],
+      },
       mqttConfigForm: {
         port: 1883,
         ssl: false,
@@ -514,6 +652,8 @@ export default {
             this.mqttConfigForm = JSON.parse(row.config);
           } else if (row.protocol == "http") {
             this.httpConfigForm = JSON.parse(row.config);
+          } else if (row.protocol == "tcp") {
+            this.tcpConfigForm = JSON.parse(row.config);
           }
         }
       } else {
@@ -585,6 +725,8 @@ export default {
           this.editForm.config = JSON.stringify(this.httpConfigForm);
         } else if (protocol == "mqtt") {
           this.editForm.config = JSON.stringify(this.mqttConfigForm);
+        }else if (protocol == "tcp") {
+          this.editForm.config = JSON.stringify(this.tcpConfigForm);
         }
 
         ComponentAdd(this.editForm).then(() => {
@@ -606,6 +748,8 @@ export default {
         this.editForm.config = JSON.stringify(this.httpConfigForm);
       } else if (protocol == "mqtt") {
         this.editForm.config = JSON.stringify(this.mqttConfigForm);
+      }else if (protocol == "tcp") {
+        this.editForm.config = JSON.stringify(this.tcpConfigForm);
       }
 
       ComponentSave(this.editForm).then(() => {
@@ -694,4 +838,4 @@ export default {
 .code-dialog.is-fullscreen .el-dialog__body {
   padding: 5px 5px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/rule/Action.vue b/src/views/rule/Action.vue
index 8e9933a..efb1bbb 100755
--- a/src/views/rule/Action.vue
+++ b/src/views/rule/Action.vue
@@ -26,12 +26,17 @@
         >kafka推送
         </el-radio
         >
+        <el-radio v-if="actions.indexOf('tcp') >= 0" :label="'tcp'"
+        >tcp推送
+        </el-radio
+        >
       </el-radio-group>
     </div>
-    <DeviceAction :config="data" v-if="data.type == 'device'"></DeviceAction>
-    <HttpAction :config="data" v-if="data.type == 'http'"></HttpAction>
-    <MqttAction :config="data" v-if="data.type == 'mqtt'"></MqttAction>
-    <KafkaAction :config="data" v-if="data.type == 'kafka'"></KafkaAction>
+    <DeviceAction :config="data" v-if="data.type === 'device'"></DeviceAction>
+    <HttpAction :config="data" v-if="data.type === 'http'"></HttpAction>
+    <MqttAction :config="data" v-if="data.type === 'mqtt'"></MqttAction>
+    <KafkaAction :config="data" v-if="data.type === 'kafka'"></KafkaAction>
+    <TcpAction :config="data" v-if="data.type === 'tcp'"></TcpAction>
   </div>
 </template>
 
@@ -40,6 +45,7 @@ import DeviceAction from "./DeviceAction.vue";
 import HttpAction from "./HttpAction.vue";
 import MqttAction from "@/views/rule/MqttAction";
 import KafkaAction from "@/views/rule/KafkaAction";
+import TcpAction from "@/views/rule/TcpAction";
 
 export default {
   name: "Action",
@@ -68,6 +74,7 @@ export default {
     MqttAction,
     DeviceAction,
     HttpAction,
+    TcpAction
   },
   created() {
   },
@@ -102,6 +109,15 @@ export default {
               }`,
             },
           ];
+        } else if (this.data.type === "tcp") {
+          this.data.services = [
+            {
+              host: "",
+              port: 1883,
+              script: `this.translate=function(msg){
+              }`
+            },
+          ];
         }
       }
     },
diff --git a/src/views/rule/Rules.vue b/src/views/rule/Rules.vue
index 4beb9b5..005e86f 100755
--- a/src/views/rule/Rules.vue
+++ b/src/views/rule/Rules.vue
@@ -178,7 +178,7 @@
           >
             <el-row>
               <el-col :span="22"
-              ><Action :data="action" actions="device,http,mqtt.kafka"></Action
+              ><Action :data="action" actions="device,http,mqtt,kafka,tcp"></Action
               ></el-col>
               <el-col :span="2"
               ><el-button size="small" type="error" @click="delAction(action)"
diff --git a/src/views/rule/TcpAction.vue b/src/views/rule/TcpAction.vue
new file mode 100644
index 0000000..472a989
--- /dev/null
+++ b/src/views/rule/TcpAction.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <el-form
+      label-width="120px"
+      v-for="(service,index) in config.services"
+      :key="index"
+    >
+      <el-form-item label="TCP服务地址">
+        <el-input
+          size="small"
+          v-model="service.host"
+          auto-complete="off"
+          placeholder="IP地址或域名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="TCP服务端口">
+        <el-input
+            size="small"
+            v-model="service.port"
+            auto-complete="off"
+            placeholder="输入端口"
+            type="number"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="转换脚本">
+        <codemirror
+          ref="editScript"
+          v-model="service.script"
+          :options="cmOption"
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { codemirror } from "vue-codemirror";
+
+import "codemirror/lib/codemirror.css";
+import "codemirror/theme/monokai.css";
+import "codemirror/theme/panda-syntax.css";
+
+require("codemirror/lib/codemirror");
+require("codemirror/mode/javascript/javascript");
+
+import "codemirror/addon/hint/show-hint.js";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/javascript-hint.js";
+
+import "codemirror/addon/fold/foldgutter.css";
+import "codemirror/addon/fold/foldcode";
+import "codemirror/addon/fold/foldgutter";
+import "codemirror/addon/fold/brace-fold";
+import "codemirror/addon/fold/comment-fold";
+export default {
+  name: "TcpAction",
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          type: "tcp",
+          services: [
+            {
+              script: "",
+              host: "",
+              port: 2424
+            },
+          ],
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      cmOption: {
+        tabSize: 4,
+        lineNumbers: true,
+        line: true,
+        indentWithTabs: true,
+        smartIndent: true,
+        mode: "text/javascript",
+        theme: "monokai",
+        foldGutter: true,
+        lineWrapping: true,
+        gutters: [
+          "CodeMirror-linenumbers",
+          "CodeMirror-foldgutter",
+          "CodeMirror-lint-markers",
+        ],
+      },
+    };
+  },
+  components: {
+    codemirror,
+  },
+  created() {
+    this.init();
+  },
+  watch: {
+    config() {
+      this.init();
+    },
+  },
+  methods: {
+    init() {
+      if (this.config.services.length > 1) {
+        this.config.services.splice(1, this.config.services.length - 1);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.CodeMirror {
+  height: 300px !important;
+}
+</style>
+<style>
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  line-height: 21px !important;
+}
+</style>
-- 
Gitee