add plc formula transfer function

xiuosiot-frontend/src/api/terminal/plc.js

@@ -31,3 +31,11 @@ export function publish(data) {
     data
   })
 }
+
+export function getClient(data) {
+  return request({
+    url: '/api/getClient',
+    method: 'get',
+    params: data || {}
+  })
+}

xiuosiot-frontend/src/views/terminal/PLC/index.vue

@@ -49,7 +49,7 @@
                 <p style="margin-left: 0; text-align: center">
                   <el-button
                     class="func_button"
-                    @click="loadOnline(formula.productName)"
+                    @click="showOnlineDialog(formula)"
                   >在线烧录</el-button>
                 </p>
               </div>
@@ -487,7 +487,7 @@
           <el-row style="text-align: center; margin-top: 20px">
             <el-button
               v-show="active !== 0"
-              class="dialog_btn"
+              class="dialog_btn prev_btn"
               @click="lastStep"
             >上一步</el-button>
             <el-button
@@ -499,12 +499,37 @@
         </div>
       </div>
     </div>
+
+    <!-- 在线烧录弹窗 -->
+    <el-dialog title="提示" :visible.sync="onlineDialogVisible" width="30%" @close="closeOnlineDialog">
+      <el-form :model="onlineForm" label-width="80px" label-position="left">
+        <el-col :span="18" :offset="3">
+          <el-form-item label="设备id：">
+            <el-input v-model="onlineForm.clientId" :span="12" :offset="6" />
+            <el-tooltip content="设备在线检测">
+              <el-button
+                style="margin-left: 10px; padding: 5px; font-size: 16px"
+                type="primary"
+                class="online_btn"
+                icon="el-icon-stopwatch"
+                circle
+                @click="onlineTest(onlineForm.clientId)"
+              />
+            </el-tooltip>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <div slot="footer" class="dialog-footer" style="padding-top:50px">
+        <el-button size="small" @click="closeOnlineDialog">取 消</el-button>
+        <el-button size="small" type="primary" @click="submitOnline">提 交</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { getList, add, remove, publish } from '@/api/terminal/plc'
+import { getList, add, remove, getClient, publish } from '@/api/terminal/plc'
 
 export default {
   data() {
@@ -584,7 +609,11 @@ export default {
       functionCodeList: ['01', '02', '03'],
       commandTypeList: ['位读', '位写', '字读', '字写'],
       add: true,
-      currentIndex: -1
+      currentIndex: -1,
+      onlineDialogVisible: false,
+      onlineForm: {
+        clientId: ''
+      }
     }
   },
   computed: {
@@ -722,13 +751,38 @@ export default {
       window.URL.revokeObjectURL(a.href)
       document.body.removeChild(a)
     },
-    loadOnline(productName) {
-      this.$prompt('请输入终端id', '提示', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(({ value }) => {
-        publish({ productName, clientId: value }).then(res => {
-          if (res.code === '200000') {
-            this.$message.success('配方推送成功')
-          }
-        })
+    showOnlineDialog(formula) {
+      const { deviceId, deviceName, productName, protocolType, readItemList, readPeriod, socketConfig } = formula
+      this.currentFormula = { deviceId, deviceName, productName, protocolType, readItemList, readPeriod, socketConfig }
+      this.onlineDialogVisible = true
+    },
+    onlineTest(clientId) {
+      if (!clientId) {
+        this.$message.warning('请先填写设备id')
+        return
+      }
+      getClient({ clientId }).then((res) => {
+        if (res.code === '200000') {
+          this.$message.success('设备在线')
+        }
+      })
+    },
+    closeOnlineDialog() {
+      this.onlineForm = { clientId: '' }
+      this.currentFormula = {}
+      this.onlineDialogVisible = false
+    },
+    submitOnline() {
+      const jsonString = JSON.stringify(this.currentFormula)
+      if (jsonString.length > 2048) {
+        this.$message.warning('json字符串大于2Kb,请线下烧录')
+        return
+      }
+      publish({ jsonString, clientId: this.onlineForm.clientId }).then(res => {
+        if (res.code === '200000') {
+          this.$message.success('提交成功')
+          this.closeOnlineDialog()
+        }
       })
     }
   }
@@ -777,8 +831,8 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.el-button:hover,
-.el-button:focus {
+.prev_btn:hover,
+.prev_btn:focus {
   background-color: #fff;
 }
 .header {