|
|
@@ -1,3 +1,90 @@
|
|
|
<template>
|
|
|
- <a-card></a-card>
|
|
|
+ <a-card
|
|
|
+ style="margin-top: 20px;"
|
|
|
+ title="设备模拟器"
|
|
|
+ >
|
|
|
+ <a-row :gutter="[8, 8]" style="margin: 0 20px;" >
|
|
|
+ <a-col :span="24" >
|
|
|
+ <a-space>
|
|
|
+ <a-spin
|
|
|
+ :spinning="state.spinning"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ v-model:value="state.searchDeviceLabel"
|
|
|
+ show-search
|
|
|
+ placeholder="输入设备名检索设备"
|
|
|
+ :default-active-first-option="false"
|
|
|
+ style="width: 170px"
|
|
|
+ :show-arrow="false"
|
|
|
+ :filter-option="false"
|
|
|
+ :not-found-content="null"
|
|
|
+ :options="state.dataSource"
|
|
|
+ @search="getDeviceLabel"
|
|
|
+ @change="selectDevice"
|
|
|
+ >
|
|
|
+ <template v-if="state.fetching" #notFoundContent>
|
|
|
+ <a-spin size="small" />
|
|
|
+ </template>
|
|
|
+ </a-select>
|
|
|
+ </a-spin>
|
|
|
+ <a-button v-if="state.deviceId!" @click="deviceSimulator" >发送模拟数据</a-button>
|
|
|
+ </a-space>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-textarea
|
|
|
+ v-model:value="state.input"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ :auto-size="{ minRows: 8 }"
|
|
|
+ />
|
|
|
+ </a-col>
|
|
|
+
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
</template>
|
|
|
+
|
|
|
+<script lang='ts' setup >
|
|
|
+import { DeviceContriller } from '@/controller'
|
|
|
+import { reactive, computed } from 'vue'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const placeholder = computed(() => {
|
|
|
+ return '如果是二进制请输入HEX字符,如二进制[0x00, 0x50, 0x00, 0x5a]对应的模拟输入数据为0050005a。如果是json格式请输入json 字符串,比如 {"id":1}'
|
|
|
+})
|
|
|
+
|
|
|
+const state = reactive<{
|
|
|
+ [key: string]: any
|
|
|
+}>({
|
|
|
+ input: '',
|
|
|
+ deviceId: '',
|
|
|
+ searchDeviceLabel: null,
|
|
|
+ dataSource: [],
|
|
|
+ loading: false,
|
|
|
+ spinning: false
|
|
|
+})
|
|
|
+
|
|
|
+state.deviceId = route.query.id as string
|
|
|
+
|
|
|
+const selectDevice = async (value: string) => {
|
|
|
+ const device = await DeviceContriller.byId(value)
|
|
|
+ state.deviceId = device.id
|
|
|
+}
|
|
|
+
|
|
|
+const getDeviceLabel = async (val: string) => {
|
|
|
+ if (!val) return
|
|
|
+ state.spinning = true
|
|
|
+ const { data } = await DeviceContriller.labelsByLabel(val)
|
|
|
+ state.spinning = false
|
|
|
+ state.dataSource = data.map(item => ({ value: item.id, label: item.deviceLabel }))
|
|
|
+ console.log(data)
|
|
|
+}
|
|
|
+
|
|
|
+const deviceSimulator = async () => {
|
|
|
+ await DeviceContriller.deviceSimulator({
|
|
|
+ deviceId: state.deviceId,
|
|
|
+ payload: state.input
|
|
|
+ })
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped >
|
|
|
+</style>
|