From 9fb27c6fd741ff95411a36f4742293767484061e Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 20 Feb 2023 14:54:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E5=A4=87=E5=8A=9F=E8=83=BD-?=
 =?UTF-8?q?=E7=B2=BE=E7=AE=80=E6=A8=A1=E5=BC=8F=E9=A1=B5=E9=9D=A2&?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/instance.ts                    |   9 +
 .../Detail/Function/components/Simple.vue     | 225 +++++++++++++++++-
 2 files changed, 232 insertions(+), 2 deletions(-)

diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index 0d73ffb4..b221d6a8 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -314,3 +314,12 @@ export const getGatewayDetail = (id: string) => server.get(`/gateway/device/${id
  * @returns 单位列表
  */
 export const getUnit = () => server.get<UnitType[]>(`/protocol/units`)
+
+/**
+ * 设备功能-执行
+ * @param id 设备id
+ * @param action 
+ * @param data 
+ * @returns 
+ */
+ export const execute = (id: string, action: string, data: any) => server.post(`/device/invoked/${id}/function/${action}`, data)
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Function/components/Simple.vue b/src/views/device/Instance/Detail/Function/components/Simple.vue
index 319c9f2e..e3bfcdbc 100644
--- a/src/views/device/Instance/Detail/Function/components/Simple.vue
+++ b/src/views/device/Instance/Detail/Function/components/Simple.vue
@@ -1,11 +1,232 @@
 <template>
-    <div class="wrapper">精简模式</div>
+    <div class="wrapper">
+        <div class="tips">
+            <a-space>
+                <AIcon type="QuestionCircleOutlined" />
+                <span>精简模式下参数只支持输入框的方式录入</span>
+            </a-space>
+        </div>
+        <a-tabs v-model="activeKey" tab-position="left">
+            <a-tab-pane
+                v-for="func in newFunctions"
+                :key="func.id"
+                :tab="func.name"
+            >
+                <a-row :gutter="30">
+                    <a-col :span="15">
+                        <a-table
+                            :columns="columns"
+                            :data-source="func.table"
+                            :pagination="false"
+                            rowKey="id"
+                        >
+                            <template #bodyCell="{ column, text, record }">
+                                <template v-if="column.dataIndex === 'type'">
+                                    <span>{{ record.type }}</span>
+                                    <a-tooltip v-if="record.type === 'object'">
+                                        <template slot="title">
+                                            请按照json格式输入
+                                        </template>
+
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            :style="{
+                                                marginLeft: '5px',
+                                                cursor: 'help',
+                                            }"
+                                        />
+                                    </a-tooltip>
+                                </template>
+                                <template v-if="column.dataIndex === 'value'">
+                                    <ValueItem
+                                        :ref="`valueItemRef${record.id}`"
+                                        v-model:modelValue="record.value"
+                                        :itemType="record.type"
+                                        :options="
+                                            record.type === 'enum'
+                                                ? (
+                                                      record?.options
+                                                          ?.elements || []
+                                                  ).map((item:any) => ({
+                                                          label: item.text,
+                                                          value: item.value,
+                                                      }))
+                                                : record.type === 'boolean'
+                                                ? [
+                                                      {
+                                                          label: '是',
+                                                          value: true,
+                                                      },
+                                                      {
+                                                          label: '否',
+                                                          value: false,
+                                                      },
+                                                  ]
+                                                : undefined
+                                        "
+                                    />
+                                </template>
+                            </template>
+                        </a-table>
+                        <div class="editor-btn">
+                            <a-space>
+                                <a-button
+                                    type="primary"
+                                    @click="handleExecute(func)"
+                                >
+                                    执行
+                                </a-button>
+                                <a-button
+                                    type="default"
+                                    @click="handleClear(func)"
+                                >
+                                    清空
+                                </a-button>
+                            </a-space>
+                        </div>
+                    </a-col>
+                    <a-col :span="9">
+                        <h6>执行结果：</h6>
+                        <span class="execute-result">
+                            {{ func.executeResult }}
+                        </span>
+                    </a-col>
+                </a-row>
+            </a-tab-pane>
+        </a-tabs>
+    </div>
 </template>
 
 <script setup lang="ts">
+import { ComponentInternalInstance } from 'vue';
+import { message } from 'ant-design-vue';
 import { useInstanceStore } from '@/store/instance';
+import { execute } from '@/api/device/instance';
 
 const instanceStore = useInstanceStore();
+const route = useRoute();
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const activeKey = ref('');
+// 物模型数据
+const metadata = computed(() => JSON.parse(instanceStore.detail.metadata));
+const columns = ref([
+    {
+        title: '参数名称',
+        dataIndex: 'name',
+        width: 150,
+        ellipsis: true,
+    },
+    {
+        title: '输入类型',
+        dataIndex: 'type',
+        width: 150,
+    },
+    {
+        title: '值',
+        dataIndex: 'value',
+    },
+]);
+
+// 设备功能数据处理
+const newFunctions = computed(() => {
+    const result: any = [];
+    metadata.value.functions?.forEach((func: any) => {
+        const array = [];
+        const tableData = func.inputs || func.properties;
+        for (const tableItem of tableData) {
+            const type = tableItem.valueType ? tableItem.valueType.type : '-';
+            if (type === 'boolean') {
+                tableItem.valueType.elements = [
+                    {
+                        text: tableItem.valueType.trueText,
+                        value: String(tableItem.valueType.trueValue),
+                    },
+                    {
+                        text: tableItem.valueType.falseText,
+                        value: String(tableItem.valueType.falseValue),
+                    },
+                ];
+            }
+            array.push({
+                id: tableItem.id,
+                name: tableItem.name,
+                type: type,
+                format: tableItem.valueType
+                    ? tableItem.valueType.format
+                    : undefined,
+                options: tableItem.valueType
+                    ? tableItem.valueType.elements
+                    : undefined,
+                json:
+                    type === 'object'
+                        ? tableItem['json']?.['properties'][0]
+                        : undefined,
+                value: undefined,
+            });
+        }
+
+        result.push({
+            ...func,
+            table: array,
+            executeResult: '',
+        });
+    });
+    // console.log('newFunctions: ', result)
+    return result;
+});
+
+/**
+ * 执行
+ */
+const handleExecute = async (func: any) => {
+    const obj = {};
+    func.table.forEach((item: any) => {
+        if (item.type === 'object') {
+            obj[item.id] = JSON.parse(item.value);
+        } else {
+            obj[item.id] = item.value;
+        }
+    });
+    const { success, result } = await execute(
+        route.params.id as string,
+        func.id,
+        obj,
+    );
+    if (!success) return;
+    message.success('操作成功');
+    func.executeResult = result instanceof Array ? result[0] : result;
+};
+/**
+ * 清空
+ */
+const handleClear = (func: any) => {
+    func.table.forEach((item: any) => {
+        item.value = undefined;
+        proxy.$refs[`valueItemRef${item.id}`][0].myValue = undefined;
+    });
+};
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.wrapper {
+    .tips {
+        margin-bottom: 10px;
+    }
+    .editor-btn {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 10px;
+    }
+    .execute-result {
+        display: inline-block;
+        border: 1px solid #d9d9d9;
+        border-radius: 2px;
+        padding: 4px 11px;
+        min-height: 140px;
+        width: 100%;
+        max-height: 450px;
+        overflow: auto;
+    }
+}
+</style>