fix: 在线调试bug

src/pages/Iot/devOps/onlineTest.vue

@@ -168,32 +168,40 @@
                     </a-col>
                 </a-row>
                 <template #extra >
-                    <a-button type="primary" @click="addEventList">发送</a-button>
+                    <a-button type="primary" @click="openCmdModal">命令下发</a-button>
                 </template>
 
             </a-card>
         </a-col>
     </a-row>
 
-<a-drawer
-    v-model:open="state.drawerVisible"
-    size="large"
-    class="custom-class"
-    title="选择设备"
-    placement="right"
-  >
-    <SelectDevice ref="selectDeviceRef" />
-    <template #footer >
-        <a-row justify="end" >
-            <a-col>
-                <a-space>
-                    <a-button @click="state.drawerVisible = false">取消</a-button>
-                    <a-button type="primary" @click="handleSelectDevice">确定</a-button>
-                </a-space>
-            </a-col>
-        </a-row>
-    </template>
-  </a-drawer>
+    <a-drawer
+        v-model:open="state.drawerVisible"
+        size="large"
+        class="custom-class"
+        title="选择设备2233"
+        placement="right"
+    >
+        <SelectDevice ref="selectDeviceRef" />
+        <template #footer >
+            <a-row justify="end" >
+                <a-col>
+                    <a-space>
+                        <a-button @click="state.drawerVisible = false">取消</a-button>
+                        <a-button type="primary" @click="handleSelectDevice">确定</a-button>
+                    </a-space>
+                </a-col>
+            </a-row>
+        </template>
+    </a-drawer>
+
+    <cmd-push
+        :visible="cmdState.visible"
+        :device-id="state.device.id"
+        :model-id="state.device.modelId"
+        @cancel="cmdState.visible = false"
+        @ok="cmdState.visible = false"
+    />
 </template>
 <script lang='ts' setup >
 import { computed, onMounted, reactive, ref, watch } from 'vue'
@@ -203,24 +211,17 @@ import { DeviceContriller, EventController, ModelCmdController, ModelController
 import { useRoute } from 'vue-router'
 import dayjs from 'dayjs'
 import { FieldTimeOutlined, ApiTwoTone } from '@ant-design/icons-vue'
-
+import CmdPush from '@/pages/iot/device/modal/cmdPush.vue'
 import { useScheduler } from '@/hooks'
 
 const route = useRoute()
 
-const tabListNoTitle = [
-  {
-    key: 'app',
-    tab: '应用模拟器'
-  }
-//   {
-//     key: 'device',
-//     tab: '设备模拟器'
-//   }
-]
-
 const selectDeviceRef = ref()
 
+const cmdState = reactive({
+  visible: false
+})
+
 const state = reactive<{
     activeKey: 'app',
     drawerVisible: boolean,
@@ -235,6 +236,7 @@ const state = reactive<{
     device: {
         id: string
         deviceLabel: string
+        modelId: string
     }
 }>({
   activeKey: 'app',
@@ -248,28 +250,48 @@ const state = reactive<{
   startTime: 0,
   lastId: '',
   device: {
-    id: '1',
-    deviceLabel: ''
+    id: '',
+    deviceLabel: '',
+    modelId: ''
   }
 })
 
 watch(() => state.modelId, () => getModelCmdList())
 
-const cmdDetail = computed(() => {
-  const detail = state.modelCmdList.find(item => item.id === state.cmdId)
+watch(
+  () => state.device.id,
+  () => {
+    addEventList()
+  },
+  {
+    deep: true
+  }
+)
 
-  return detail
-})
+const cmdDetail = computed(() => state.modelCmdList.find(item => item.id === state.cmdId))
 
 const clearLog = () => {
   state.eventList = []
   message.success('清除成功')
 }
 
+const openCmdModal = () => {
+  if (!state.device.id) {
+    message.error('请先选择设备')
+    return
+  }
+  cmdState.visible = true
+}
+
 const handleSelectDevice = () => {
+  console.log('我不处罚')
   const _device = selectDeviceRef.value.getSelectDevice()
+  console.log('_device:', _device)
+
   if (_device) {
     state.device = _device
+    console.log('state.device:', state.device)
+
     state.drawerVisible = false
   } else {
     message.warn('请选择产品')

src/pages/Iot/device/modal/cmdPush.vue

@@ -0,0 +1,138 @@
+<template>
+  <modal-pro
+    title="命令下发"
+    style="width: 700px;"
+    :open="visible"
+    @cancel="emits('cancel')"
+    @ok="ok"
+  >
+  <a-alert message="同步命令成功下发后，设备需要在20秒内向平台回复响应，否则会认为命令请求超时。" type="info" show-icon style="margin-bottom: 20px;" />
+    <a-form
+    :labelCol="{span: 4}"
+    :wrapperCol="{span: 14}"
+  >
+    <a-form-item
+      label="命令名称"
+      v-bind="validateInfosCmd.cmdId"
+    >
+      <a-select allowClear v-model:value="cmdState.cmdId" >
+        <a-select-option
+          v-for="item in state.cmdList"
+          :key="item.id"
+          :value="item.id"
+        >
+        {{item.cmdLabel}}
+        </a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item
+      label="设置命令参数"
+      v-if="cmdDetail?.cmdParams"
+    >
+      <a-row>
+        <a-col v-for="(item, index) in cmdDetail?.cmdParams" :key="index" style="margin: 10px 0px;"  >
+          <a-input-group  size="large"  >
+            <a-row :gutter="8" align="middle" >
+              <a-col :span="8">
+                <a-input allowClear placeholder="key" v-model:value="item.paramLabel"  disabled />
+              </a-col>
+              <a-col :span="8">
+                <a-input allowClear placeholder="value" v-model:value="item.dataUnit" />
+              </a-col>
+            </a-row>
+          </a-input-group>
+        </a-col>
+      </a-row>
+    </a-form-item>
+    <a-form-item  label="设置命令参数" >
+      产品尚未配置命令，请先去 <a @click="pushProductDetail" >产品详情</a> 定义命令。
+    </a-form-item>
+    </a-form>
+  </modal-pro>
+</template>
+
+<script setup lang="ts" >
+import { computed, reactive, watch } from 'vue'
+import { DeviceContriller, ModelCmdController } from '@/controller'
+import { useRouter } from 'vue-router'
+import { Form } from 'ant-design-vue'
+
+interface IProps {
+  visible: boolean
+  deviceId: string
+  modelId: string
+}
+
+const router = useRouter()
+
+const useForm = Form.useForm
+
+const props = defineProps<IProps>()
+
+const emits = defineEmits(['cancel', 'ok'])
+
+const state = reactive<{
+  cmdList: Partial<IOT.API.CMD.Cmd[]>
+}>({
+  cmdList: []
+})
+
+const cmdState = reactive<{
+  cmdId: string
+  deviceId: string,
+  cmdLabel: string,
+  cmdParameters: {key: string, value: string}[]
+}>({
+  cmdId: '',
+  deviceId: props.deviceId,
+  cmdLabel: '',
+  cmdParameters: []
+})
+
+const cmdDetail = computed(() => state.cmdList.find(item => item.id === cmdState.cmdId))
+
+const { resetFields: resetFieldsCmd, validate: validateCmd, validateInfos: validateInfosCmd } = useForm(cmdState, reactive({
+  cmdId: [{ required: true, message: '请填写命令名称' }]
+}))
+
+const pushProductDetail = () => {
+  router.push({ path: '/product/detail', query: { id: props.modelId } })
+}
+
+const getModelCmdList = async () => {
+  const { data } = await ModelCmdController.list({ modelId: props.modelId })
+  state.cmdList = data
+}
+
+const ok = () => {
+  validateCmd().then(async () => {
+    const _cmdParameters: Record<string, string> = {}
+
+    cmdDetail.value?.cmdParams.forEach(item => {
+      _cmdParameters[item.paramLabel] = item.dataUnit
+    })
+
+    const $params = {
+      ...cmdState,
+      cmdLabel: cmdDetail.value!.cmdLabel,
+      cmdParameters: _cmdParameters
+    }
+    await DeviceContriller.addDeviceCmd($params)
+    emits('ok')
+  })
+}
+
+watch(
+  () => props.visible,
+  () => {
+    if (props.visible) {
+      cmdState.deviceId = props.deviceId
+      getModelCmdList()
+    }
+  }
+)
+
+</script>
+
+<style>
+</style>

src/pages/Iot/rule/components/selectDevice.vue

@@ -77,7 +77,6 @@ const changePage = ({ current }) => {
 const onChangeRowKeys = (rowKeys: string[]) => {
   console.log(rowKeys)
   state.selectedRowKeys = rowKeys
-  console.log('state.selectedRowKeys:', state.selectedRowKeys)
 }
 
 const getDevicePage = async () => {
@@ -89,7 +88,6 @@ const getDevicePage = async () => {
 
 defineExpose({
   getSelectDevice: () => state.dataSource.find(item => item.id === state.selectedRowKeys[0])
-
 })
 
 onMounted(() => {