From 6e6361997ad3ad57e1a19b345e00b40b0780b0cc Mon Sep 17 00:00:00 2001
From: huangwenlong <yljungg@163.com>
Date: Mon, 14 Nov 2022 14:43:45 +0800
Subject: [PATCH] =?UTF-8?q?mqtt=E3=80=81kafka=20action=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/rule/Action.vue      |  53 ++++++++--
 src/views/rule/KafkaAction.vue | 138 +++++++++++++++++++++++++
 src/views/rule/MqttAction.vue  | 144 ++++++++++++++++++++++++++
 src/views/rule/Rules.vue       | 182 ++++++++++++++++-----------------
 4 files changed, 419 insertions(+), 98 deletions(-)
 create mode 100644 src/views/rule/KafkaAction.vue
 create mode 100644 src/views/rule/MqttAction.vue

diff --git a/src/views/rule/Action.vue b/src/views/rule/Action.vue
index d784cc3..8e9933a 100755
--- a/src/views/rule/Action.vue
+++ b/src/views/rule/Action.vue
@@ -3,27 +3,44 @@
     <div>
       <el-radio-group v-model="data.type" @change="actionTypeChange">
         <el-radio v-if="actions.indexOf('device') >= 0" :label="'device'"
-          >设备控制</el-radio
+        >设备控制
+        </el-radio
         >
         <el-radio v-if="actions.indexOf('alarm') >= 0" :label="'alarm'"
-          >告警消息</el-radio
+        >告警消息
+        </el-radio
         >
         <el-radio v-if="actions.indexOf('scene') >= 0" :label="'scene'"
-          >场景控制</el-radio
+        >场景控制
+        </el-radio
         >
         <el-radio v-if="actions.indexOf('http') >= 0" :label="'http'"
-          >http推送</el-radio
+        >http推送
+        </el-radio
+        >
+        <el-radio v-if="actions.indexOf('mqtt') >= 0" :label="'mqtt'"
+        >mqtt推送
+        </el-radio
+        >
+        <el-radio v-if="actions.indexOf('kafka') >= 0" :label="'kafka'"
+        >kafka推送
+        </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>
   </div>
 </template>
 
 <script>
 import DeviceAction from "./DeviceAction.vue";
 import HttpAction from "./HttpAction.vue";
+import MqttAction from "@/views/rule/MqttAction";
+import KafkaAction from "@/views/rule/KafkaAction";
+
 export default {
   name: "Action",
   props: {
@@ -47,10 +64,13 @@ export default {
     return {};
   },
   components: {
+    KafkaAction,
+    MqttAction,
     DeviceAction,
     HttpAction,
   },
-  created() {},
+  created() {
+  },
   methods: {
     actionTypeChange() {
       if (this.data.services.length == 0) {
@@ -59,8 +79,27 @@ export default {
             {
               url: "",
               script: `this.translate=function(msg){
-              
-}`,
+              }`,
+            },
+          ];
+        } else if (this.data.type == "mqtt") {
+          this.data.services = [
+            {
+              host: "",
+              port: 1883,
+              username: "",
+              password: "",
+              script: `this.translate=function(msg){
+              }`,
+            },
+          ];
+        } else if (this.data.type == "kafka") {
+          this.data.services = [
+            {
+              services: "",
+              ack: "",
+              script: `this.translate=function(msg){
+              }`,
             },
           ];
         }
diff --git a/src/views/rule/KafkaAction.vue b/src/views/rule/KafkaAction.vue
new file mode 100644
index 0000000..dc07695
--- /dev/null
+++ b/src/views/rule/KafkaAction.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <el-form
+        label-width="120px"
+        v-for="service in config.services"
+        :key="service"
+    >
+      <el-form-item label="broker地址">
+        <el-input
+            size="small"
+            v-model="service.services"
+            auto-complete="off"
+            placeholder="127.0.0.1:9092,127.0.0.1:9093"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="ACK">
+        <el-select v-model="service.ack" placeholder="请选择应答级别">
+          <el-option
+              v-for="item in ackOptions"
+              size="small"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </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";
+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";
+
+require("codemirror/lib/codemirror");
+require("codemirror/mode/javascript/javascript");
+
+export default {
+  name: "KafkaAction",
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          type: "kafka",
+          services: [
+            {
+              script: "",
+              services: "",
+              ack: ""
+            },
+          ],
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      qqq: "123",
+      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",
+        ]
+      },
+      ackOptions: [{
+        value: '0',
+        label: 'ACK_0'
+      }, {
+        value: '1',
+        label: 'ACK_1'
+      }, {
+        value: '-1',
+        label: 'ACK_-1'
+      }]
+    };
+  },
+  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>
diff --git a/src/views/rule/MqttAction.vue b/src/views/rule/MqttAction.vue
new file mode 100644
index 0000000..d83503f
--- /dev/null
+++ b/src/views/rule/MqttAction.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <el-form
+      label-width="120px"
+      v-for="service in config.services"
+      :key="service"
+    >
+      <el-form-item label="MQTT地址">
+        <el-input
+          size="small"
+          v-model="service.host"
+          auto-complete="off"
+          placeholder="IP地址或域名"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="MQTT端口">
+        <el-input
+            size="small"
+            v-model="service.port"
+            auto-complete="off"
+            placeholder="输入端口"
+            type="number"
+        ></el-input>
+      </el-form-item>
+        <el-form-item label="帐号">
+          <el-input
+              size="small"
+              v-model="service.username"
+              auto-complete="off"
+              placeholder="输入帐号"
+          ></el-input>
+        </el-form-item>
+          <el-form-item label="密码">
+            <el-input
+                size="small"
+                v-model="service.password"
+                auto-complete="off"
+                placeholder="输入密码"
+            ></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: "MqttAction",
+  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          type: "mqtt",
+          services: [
+            {
+              script: "",
+              host: "",
+              port: 1883,
+              username: "",
+              password: "",
+            },
+          ],
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      qqq: "123",
+      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>
diff --git a/src/views/rule/Rules.vue b/src/views/rule/Rules.vue
index 504ae84..4beb9b5 100755
--- a/src/views/rule/Rules.vue
+++ b/src/views/rule/Rules.vue
@@ -9,9 +9,9 @@
     <el-form :inline="true" class="mg-top-20">
       <el-form-item label="类型">
         <el-radio-group
-          v-model="formInline.type"
-          size="medium"
-          @change="getdata"
+            v-model="formInline.type"
+            size="medium"
+            @change="getdata"
         >
           <el-radio-button label="scene">场景联动</el-radio-button>
           <el-radio-button label="flow">数据流转</el-radio-button>
@@ -19,23 +19,23 @@
       </el-form-item>
       <el-form-item>
         <el-button
-          size="small"
-          type="primary"
-          icon="el-icon-plus"
-          @click="handleAdd()"
-          >添加</el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            @click="handleAdd()"
+        >添加</el-button
         >
       </el-form-item>
     </el-form>
     <!--列表-->
     <el-table
-      size="small"
-      :data="ruleList"
-      highlight-current-row
-      v-loading="$store.state.loading"
-      border
-      element-loading-text="拼命加载中"
-      style="width: 100%"
+        size="small"
+        :data="ruleList"
+        highlight-current-row
+        v-loading="$store.state.loading"
+        border
+        element-loading-text="拼命加载中"
+        style="width: 100%"
     >
       <el-table-column align="center" type="selection" width="60">
       </el-table-column>
@@ -47,55 +47,55 @@
         </template>
       </el-table-column>
       <el-table-column
-        prop="state"
-        :formatter="stateFormat"
-        label="状态"
-        width="80"
+          prop="state"
+          :formatter="stateFormat"
+          label="状态"
+          width="80"
       >
       </el-table-column>
       <el-table-column :formatter="stateFormat" label="执行日志" width="100">
         <template slot-scope="scope">
           <el-button plain @click="handleShowLog(scope.row)" size="mini"
-            >查看</el-button
+          >查看</el-button
           >
         </template>
       </el-table-column>
       <el-table-column align="center" label="操作" min-width="250">
         <template slot-scope="scope">
           <el-button
-            size="mini"
-            @click="handleEdit(scope.$index, scope.row)"
-            :disabled="scope.row.state == 'running'"
-            >编辑</el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)"
+              :disabled="scope.row.state == 'running'"
+          >编辑</el-button
           >
           <el-button
-            v-if="scope.row.state == 'running'"
-            size="mini"
-            type="danger"
-            @click="handlePause(scope.$index, scope.row)"
-            plain
-            >停止</el-button
+              v-if="scope.row.state == 'running'"
+              size="mini"
+              type="danger"
+              @click="handlePause(scope.$index, scope.row)"
+              plain
+          >停止</el-button
           >
           <el-button
-            v-if="scope.row.state == 'stopped'"
-            size="mini"
-            type="success"
-            @click="handleResume(scope.$index, scope.row)"
-            plain
-            >启动</el-button
+              v-if="scope.row.state == 'stopped'"
+              size="mini"
+              type="success"
+              @click="handleResume(scope.$index, scope.row)"
+              plain
+          >启动</el-button
           >
           <el-popconfirm
-            title="确认要删除？"
-            @confirm="handleDelete(scope.$index, scope.row)"
-            class="mg-left-10"
+              title="确认要删除？"
+              @confirm="handleDelete(scope.$index, scope.row)"
+              class="mg-left-10"
           >
             <el-button
-              slot="reference"
-              size="mini"
-              type="danger"
-              :disabled="scope.row.state != 'stopped'"
-              plain
-              >删除</el-button
+                slot="reference"
+                size="mini"
+                type="danger"
+                :disabled="scope.row.state != 'stopped'"
+                plain
+            >删除</el-button
             >
           </el-popconfirm>
         </template>
@@ -106,22 +106,22 @@
 
     <!-- 编辑界面 -->
     <el-dialog
-      :title="title"
-      :visible.sync="editFormVisible"
-      width="80%"
-      @click="closeDialog"
+        :title="title"
+        :visible.sync="editFormVisible"
+        width="80%"
+        @click="closeDialog"
     >
       <el-form
-        label-width="120px"
-        :rules="rules"
-        :model="editForm"
-        ref="editForm"
+          label-width="120px"
+          :rules="rules"
+          :model="editForm"
+          ref="editForm"
       >
         <el-form-item label="规则名称" prop="name">
           <el-input
-            size="small"
-            v-model="editForm.name"
-            auto-complete="off"
+              size="small"
+              v-model="editForm.name"
+              auto-complete="off"
           ></el-input>
         </el-form-item>
         <el-form-item label="规则类型" prop="type">
@@ -132,20 +132,20 @@
         </el-form-item>
         <el-form-item label="监听器" prop="listeners">
           <el-card
-            class="box-card"
-            v-for="listener in editForm.listeners"
-            :key="listener.id"
-            :body-style="{ padding: '10px' }"
+              class="box-card"
+              v-for="listener in editForm.listeners"
+              :key="listener.id"
+              :body-style="{ padding: '10px' }"
           >
             <el-row>
               <el-col :span="22"><Listener :data="listener"></Listener></el-col>
               <el-col :span="2"
-                ><el-button
+              ><el-button
                   size="small"
                   type="error"
                   @click="delListener(listener)"
-                  >删除</el-button
-                ></el-col
+              >删除</el-button
+              ></el-col
               >
             </el-row>
           </el-card>
@@ -153,17 +153,17 @@
         </el-form-item>
         <el-form-item label="过滤器" prop="filters">
           <el-card
-            class="box-card"
-            v-for="filter in editForm.filters"
-            :key="filter.id"
-            :body-style="{ padding: '10px' }"
+              class="box-card"
+              v-for="filter in editForm.filters"
+              :key="filter.id"
+              :body-style="{ padding: '10px' }"
           >
             <el-row>
               <el-col :span="22"><Filtera :data="filter"></Filtera></el-col>
               <el-col :span="2"
-                ><el-button size="small" type="error" @click="delFilter(filter)"
-                  >删除</el-button
-                ></el-col
+              ><el-button size="small" type="error" @click="delFilter(filter)"
+              >删除</el-button
+              ></el-col
               >
             </el-row>
           </el-card>
@@ -171,19 +171,19 @@
         </el-form-item>
         <el-form-item label="输出" prop="actions">
           <el-card
-            class="box-card"
-            v-for="action in editForm.actions"
-            :key="action.id"
-            :body-style="{ padding: '10px' }"
+              class="box-card"
+              v-for="action in editForm.actions"
+              :key="action.id"
+              :body-style="{ padding: '10px' }"
           >
             <el-row>
               <el-col :span="22"
-                ><Action :data="action" actions="device,http"></Action
+              ><Action :data="action" actions="device,http,mqtt.kafka"></Action
               ></el-col>
               <el-col :span="2"
-                ><el-button size="small" type="error" @click="delAction(action)"
-                  >删除</el-button
-                ></el-col
+              ><el-button size="small" type="error" @click="delAction(action)"
+              >删除</el-button
+              ></el-col
               >
             </el-row>
           </el-card>
@@ -191,24 +191,24 @@
         </el-form-item>
         <el-form-item label="场景描述" prop="desc">
           <el-input
-            size="small"
-            v-model="editForm.desc"
-            auto-complete="off"
-            type="textarea"
-            :rows="2"
+              size="small"
+              v-model="editForm.desc"
+              auto-complete="off"
+              type="textarea"
+              :rows="2"
           ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button size="small" @click="closeDialog">取消</el-button>
         <el-button
-          :disabled="editForm.state == 'running'"
-          size="small"
-          type="primary"
-          :loading="$store.state.loading"
-          class="title"
-          @click="submitEditForm('editForm')"
-          >保存</el-button
+            :disabled="editForm.state == 'running'"
+            size="small"
+            type="primary"
+            :loading="$store.state.loading"
+            class="title"
+            @click="submitEditForm('editForm')"
+        >保存</el-button
         >
       </div>
     </el-dialog>
@@ -428,4 +428,4 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
-- 
Gitee