feat：pc端 设备新增命令下发

@@ -21,6 +21,7 @@ enum DeviceManagerApi {
   DEVICE_ALARM_URL = '/alarm',
 
   DEVICE_CREDENTIALS = '/device/credentials',
+  COMMAND_ISSUANCE = '/rpc',
 }
 
 export const devicePage = (params: DeviceQueryParam) => {
@@ -207,3 +208,17 @@ export const generateSNCode = () => {
     url: '/device/sn',
   });
 };
+
+//命令下发
+export const commandIssuanceApi = (type, tbDeviceId, data) => {
+  const T = type === 'OneWay' ? 'oneway' : 'twoway';
+  return defHttp.post(
+    {
+      url: DeviceManagerApi.COMMAND_ISSUANCE + '/' + T + '/' + tbDeviceId,
+      data,
+    },
+    {
+      joinPrefix: false,
+    }
+  );
+};

@@ -629,3 +629,45 @@ export const TokenSchemas: FormSchema[] = [
     },
   },
 ];
+
+export const CommandSchemas: FormSchema[] = [
+  {
+    field: 'commandType',
+    component: 'RadioGroup',
+    label: '下发类型',
+    colProps: {
+      span: 8,
+    },
+    defaultValue: 'OneWay',
+    componentProps: {
+      options: [
+        {
+          label: 'OneWay',
+          value: 'OneWay',
+        },
+        {
+          label: 'TwoWay',
+          value: 'TwoWay',
+        },
+      ],
+    },
+  },
+  {
+    field: 'commandValue',
+    label: '请输入命令内容',
+    defaultValue: `{
+        method: 'setGpio',
+        params: {
+        pin: 7,
+        value: 1
+        }
+}`,
+    component: 'InputTextArea',
+    componentProps: {
+      autoSize: {
+        maxRows: 10,
+        autoSize: true,
+      },
+    },
+  },
+];

@@ -15,6 +15,9 @@
       <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <RealTimeData :deviceDetail="deviceDetail" />
       </TabPane>
+      <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
+        <CommandIssuance :deviceDetail="deviceDetail" />
+      </TabPane>
       <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
       <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
         <ChildDevice :fromId="deviceDetail?.tbDeviceId" />
@@ -31,6 +34,7 @@
   import RealTimeData from '../tabs/RealTimeData.vue';
   import Alarm from '../tabs/Alarm.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
+  import CommandIssuance from '../tabs/CommandIssuance.vue';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
   export default defineComponent({
     name: 'DeviceModal',
@@ -42,6 +46,7 @@
       RealTimeData,
       Alarm,
       ChildDevice,
+      CommandIssuance,
     },
     emits: ['reload', 'register'],
     setup() {

+<template>
+  <div class="tabs-detail">
+    <div class="mt-4">
+      <BasicForm @register="registerForm" />
+      <div>
+        <Button :disabled="disable" type="primary" @click="handleOk" class="mr-2">确定</Button>
+        <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { CommandSchemas } from '../../config/data';
+  import { commandIssuanceApi } from '/@/api/device/deviceManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Button } from '/@/components/Button';
+
+  export default defineComponent({
+    components: { BasicForm, Button },
+    props: {
+      deviceDetail: {
+        type: Object,
+        required: true,
+      },
+    },
+    emits: ['register'],
+    setup(props) {
+      const disable = ref(false);
+      const commandValueStr = JSON.stringify({
+        method: 'setGpio',
+        params: {
+          pin: 7,
+          value: 1,
+        },
+      });
+      const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
+        labelWidth: 100,
+        schemas: CommandSchemas,
+        labelAlign: 'right',
+        showSubmitButton: false,
+        showResetButton: false,
+        wrapperCol: {
+          span: 12,
+        },
+      });
+      const handleCancel = () => {
+        resetFields();
+      };
+      const handleOk = async () => {
+        disable.value = true;
+        const { createMessage } = useMessage();
+        // 验证
+        const valid = await validate();
+        if (!valid) return;
+        // 收集表单数据
+        const field = getFieldsValue();
+        const commandValue = JSON.parse(commandValueStr);
+        commandValue.persistent = true;
+        commandValue.additionalInfo = {
+          cmdType: 'API',
+        };
+        commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, commandValue)
+          .then((res) => {
+            if (!res) return;
+            createMessage.success('命令下发成功');
+            disable.value = true;
+            // 请求
+            handleCancel();
+          })
+          .catch((e) => {
+            if (e?.message) {
+              createMessage.error(e?.message);
+            }
+          })
+          .finally(() => {
+            setTimeout(() => {
+              disable.value = false;
+            }, 300);
+          });
+      };
+      return {
+        registerForm,
+        handleCancel,
+        handleOk,
+        disable,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>