Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/api/device/instance.ts

@@ -21,4 +21,34 @@ export const saveMetadata = (id: string, data: string) => server.put(`/device/in
  * @param id 设备ID
  * @returns 设备详情
  */
-export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)
+export const detail = (id: string) => server.get<DeviceInstance>(`/device-instance/${id}/detail`)
+
+/**
+ * 查询数据
+ * @param data 分页搜索数据
+ * @returns 
+ */
+export const query = (data?: Record<string, any>) => server.post('/device-instance/_query', data)
+
+/**
+ * 删除设备
+ * @param id 设备ID
+ * @returns 
+ */
+export const _delete = (id: string) => server.remove(`/device-instance/${id}`)
+
+/**
+ * 启用设备
+ * @param id 设备ID
+ * @param data 
+ * @returns 
+ */
+export const _deploy = (id: string) => server.post(`/device-instance/${id}/deploy`)
+
+/**
+ * 禁用设备
+ * @param id 设备ID
+ * @param data 
+ * @returns 
+ */
+ export const _undeploy = (id: string) => server.post(`/device-instance/${id}/undeploy`)

src/api/northbound/dueros.ts

@@ -0,0 +1,8 @@
+import server from '@/utils/request'
+
+/**
+ * 查询数据
+ * @param data 分页搜索数据
+ * @returns 
+ */
+export const query = (data: Record<string, any>) => server.post('/dueros/product/_query', data)

src/components/AIcon/index.ts

@@ -1,7 +0,0 @@
-import { createFromIconfontCN } from '@ant-design/icons-vue';
-
-const AliIcon = createFromIconfontCN({
-    scriptUrl: '/icons/iconfont.js', // 在 iconfont.cn 上生成
-});
-
-export default AliIcon

src/components/AIcon/index.tsx

@@ -0,0 +1,32 @@
+import { createFromIconfontCN } from '@ant-design/icons-vue';
+import * as $Icon from '@ant-design/icons-vue';
+import { createVNode } from 'vue';
+
+const AliIcon = createFromIconfontCN({
+    scriptUrl: '/icons/iconfont.js', // 在 iconfont.cn 上生成
+});
+
+const AntdIcon = (props: {type: string}) => {
+    const {type} = props;
+    let antIcon: {[key: string]: any} = $Icon
+    return createVNode(antIcon[type])
+}
+
+const iconKeys = [
+    'EyeOutlined',
+    'EditOutlined',
+    'PlusOutlined',
+    'DeleteOutlined',
+    'CheckCircleOutlined',
+    'StopOutlined',
+    'CheckOutlined',
+    'CloseOutlined',
+    'DownOutlined'
+]
+
+const Icon = (props: {type: string}) => {
+    if(iconKeys.includes(props.type)) return <AntdIcon {...props} />
+    return <AliIcon {...props} />
+}
+
+export default Icon

src/components/BadgeStatus/index.vue

@@ -6,8 +6,7 @@
 </template>
 
 <script setup lang="ts">
-import { StatusColorEnum } from '@/utils/consts.ts';
+// import { StatusColorEnum } from '@/utils/consts.ts';
-
 const props = defineProps({
     text: {
         type: String,
@@ -15,10 +14,10 @@ const props = defineProps({
     status: {
         type: String || Number,
         default: 'default',
-        validator: (value) => {
+        // validator: (value) => {
-            // 这个值必须匹配下列字符串中的一个
+        //     // 这个值必须匹配下列字符串中的一个
-            return Object.keys(StatusColorEnum).includes(value);
+        //     return Object.keys(StatusColorEnum).includes(value);
-        },
+        // },
     },
     /**
      * 自定义status值颜色

src/components/CardBox/index.vue

@@ -108,7 +108,6 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-
     statusText: {
         type: String,
         default: '正常',

src/components/Table/index.tsx

@@ -75,6 +75,7 @@ const JTable = defineComponent<JTableProps>({
     ],
     emits: [
         'modelChange', // 切换卡片和表格
+        'reload' // 刷新数据
     ],
     props: {
         request: {
@@ -139,7 +140,7 @@ const JTable = defineComponent<JTableProps>({
             }
         }
     } as any,
-    setup(props: JTableProps ,{ slots, emit }){
+    setup(props: JTableProps ,{ slots, emit, expose }){
         const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
         const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
         const column = ref<number>(props.gridColumn || 4);
@@ -216,6 +217,23 @@ const JTable = defineComponent<JTableProps>({
         onUnmounted(() => {
             window.onresize = null
         })
+
+        /**
+         * 刷新数据
+         * @param _params 
+         */
+        const reload = (_params?: Record<string, any>) => {
+            handleSearch({
+                ..._params,
+                pageSize: 12,
+                pageIndex: 0
+            })
+        }
+
+        /**
+         * 导出方法
+         */
+         expose({ reload })
         
         return () => <Spin spinning={loading.value}>
                 <div class={styles["jtable-body"]}>

src/router/menu.ts

@@ -66,6 +66,11 @@ export default [
     },
     // end: 测试用, 可删除
 
+    // 设备管理
+    {
+        path: '/device/Instance',
+        component: () => import('@/views/device/Instance/index.vue')
+    },
     // link 运维管理
     {
         path: '/link/log',
@@ -102,4 +107,13 @@ export default [
       path: '/iot-card/home',
       component: () => import('@/views/iot-card/Home/index.vue')
     },
+    // 北向输出
+    {
+        path: '/northbound/DuerOS',
+        component: () => import('@/views/northbound/DuerOS/index.vue')
+    },
+    {
+        path: '/northbound/AliCloud',
+        component: () => import('@/views/northbound/AliCloud/index.vue')
+    },
 ]

src/views/device/Instance/index.vue

@@ -0,0 +1,260 @@
+<template>
+    <JTable ref="instanceRef" :columns="columns" :request="query" :defaultParams="{sorts: [{name: 'createTime', order: 'desc'}]}" :params="{pageIndex: 0, pageSize: 12}">
+        <template #headerTitle>
+            <a-space>
+                <a-button type="primary" @click="handleAdd">新增</a-button>
+                <a-dropdown>
+                    <a-button>批量操作 <AIcon type="DownOutlined" /></a-button>
+                    <template #overlay>
+                    <a-menu>
+                        <a-menu-item>
+                            <a href="javascript:;">1st menu item</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                            <a href="javascript:;">2nd menu item</a>
+                        </a-menu-item>
+                        <a-menu-item>
+                            <a href="javascript:;">3rd menu item</a>
+                        </a-menu-item>
+                    </a-menu>
+                    </template>
+                </a-dropdown>
+            </a-space>
+        </template>
+        <template #card="slotProps">
+            <CardBox
+                :value="slotProps"
+                @click="handleView"
+                :actions="getActions(slotProps, 'card')"
+                v-bind="slotProps"
+                :status="slotProps.state.value"
+                :statusText="slotProps.state.text"
+                :statusNames="{
+                    online: 'success',
+                    offline: 'error',
+                    notActive: 'warning',
+                }"
+            >
+                <template #img>
+                    <slot name="img">
+                        <img :src="getImage('/device/instance/device-card.png')" />
+                    </slot>
+                </template>
+                <template #content>
+                    <h3>{{ slotProps.name }}</h3>
+                    <a-row>
+                        <a-col :span="12">
+                            <div class="card-item-content-text">设备类型</div>
+                            <div>{{slotProps.deviceType.text}}</div>
+                        </a-col>
+                        <a-col :span="12">
+                            <div class="card-item-content-text">产品名称</div>
+                            <div>{{slotProps.productName}}</div>
+                        </a-col>
+                    </a-row>
+                </template>
+                <template #actions="item">
+                    <a-tooltip v-bind="item.tooltip" :title="item.disabled && item.tooltip.title">
+                        <a-popconfirm
+                            v-if="item.popConfirm"
+                            v-bind="item.popConfirm"
+                            :disabled="item.disabled"
+                        >
+                            <a-button :disabled="item.disabled">
+                                <AIcon type="DeleteOutlined" v-if="item.key === 'delete'"  />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                        <template v-else>
+                            <a-button :disabled="item.disabled" @click="item.onClick">
+                                <AIcon type="DeleteOutlined" v-if="item.key === 'delete'"  />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </template>
+                    </a-tooltip>
+                </template>
+            </CardBox>
+        </template>
+        <template #state="slotProps">
+            <a-badge :text="slotProps.state.text" :status="statusMap.get(slotProps.state.value)" />
+        </template>
+        <template #action="slotProps">
+            <a-space :size="16">
+                <a-tooltip
+                    v-for="i in getActions(slotProps, 'table')"
+                    :key="i.key"
+                    v-bind="i.tooltip"
+                >
+                    <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm" :disabled="i.disabled">
+                        <a-button
+                            :disabled="i.disabled"
+                            style="padding: 0"
+                            type="link"
+                            ><AIcon :type="i.icon"
+                        /></a-button>
+                    </a-popconfirm>
+                    <a-button
+                        style="padding: 0"
+                        type="link"
+                        v-else
+                        @click="i.onClick && i.onClick(slotProps)"
+                    >
+                        <a-button
+                            :disabled="i.disabled"
+                            style="padding: 0"
+                            type="link"
+                            ><AIcon :type="i.icon"
+                        /></a-button>
+                    </a-button>
+                </a-tooltip>
+            </a-space>
+        </template>
+    </JTable>
+</template>
+
+<script setup lang="ts">
+import { query, _delete, _deploy, _undeploy } from '@/api/device/instance'
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import { message } from "ant-design-vue";
+
+const instanceRef = ref<Record<string, any>>({});
+
+const statusMap = new Map();
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id'
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: '产品名称',
+        dataIndex: 'productName',
+        key: 'productName',
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        scopedSlots: true
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true
+    },
+    {
+        title: '说明',
+        dataIndex: 'describe',
+        key: 'describe'
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true
+    }   
+]
+
+const handleAdd = () => {
+    message.warn('123')
+}
+
+const handleView = (dt: any) => {
+    
+}
+
+const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table'): ActionsType[] => {
+    if(!data) return []
+    const actions = [
+        {
+            key: 'view',
+            text: "查看",
+            tooltip: {
+                title: '查看'
+            },
+            icon: 'EyeOutlined',
+            onClick: () => {
+                handleView(data)
+            }
+        },
+        {
+            key: 'edit',
+            text: "编辑",
+            tooltip: {
+                title: '编辑'
+            },
+            icon: 'EditOutlined',
+            onClick: () => {
+                message.warn('edit')
+            }
+        },
+        {
+            key: 'action',
+            text: data.state.value !== 'notActive' ? "禁用" : "启用",
+            tooltip: {
+                title: data.state.value !== 'notActive' ? "禁用" : "启用",
+            },
+            icon: data.state.value !== 'notActive' ? 'StopOutlined' : 'CheckCircleOutlined',
+            popConfirm: {
+                title: `确认${data.state.value !== 'notActive' ? "禁用" : "启用"}?`,
+                onConfirm: async () => {
+                    let response = undefined
+                    if(data.state.value !== 'notActive') {
+                        response = await _undeploy(data.id)
+                    } else {
+                        response = await _deploy(data.id)
+                    }
+                    if(response && response.status === 200) {
+                        message.success('操作成功！')
+                        instanceRef.value?.reload()
+                    } else {
+                        message.error('操作失败！')
+                    }
+                }
+            }
+        },
+        {
+            key: 'delete',
+            text: "删除",
+            disabled: data.state.value !== 'notActive',
+            tooltip: {
+                title: data.state.value !== 'notActive' ? '已启用的设备不能删除' : '删除'
+            },
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await _delete(data.id)
+                    if(resp.status === 200) {
+                        message.success('操作成功！')
+                        instanceRef.value?.reload()
+                    } else {
+                        message.error('操作失败！')
+                    }
+                }
+            },
+            icon: 'DeleteOutlined'
+        }
+    ]
+    if(type === 'card') return actions.filter((i: ActionsType) => i.key !== 'view')
+    return actions
+}
+
+</script>

src/views/northbound/AliCloud/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>123</div>
+</template>
+
+<script setup>
+
+</script>

src/views/northbound/DuerOS/index.vue

@@ -0,0 +1,154 @@
+<template>
+    <div>
+        <JTable 
+            :columns="columns"
+            :request="request"
+        >
+            <template #headerTitle>
+                <a-button type="primary" @click="add">新增</a-button>
+            </template>
+            <template #card="slotProps">
+                <CardBox 
+                    :value="slotProps" 
+                    @click="handleClick" 
+                    :actions="getActions(slotProps)" 
+                    v-bind="slotProps" 
+                    :status="slotProps.state ? 'success' : 'error'"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/device-product.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                         <h3>{{slotProps.name}}</h3>
+                         <a-row>
+                            <a-col :span="12">
+                                <div class="card-item-content-text">
+                                    设备类型
+                                </div>
+                                <div>直连设备</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                    <template #actions="item">
+                        <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </a-popconfirm>
+                        <template v-else>
+                            <a-button :disabled="item.disabled">
+                                <DeleteOutlined v-if="item.key === 'delete'" />
+                                <template v-else>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </template>
+                            </a-button>
+                        </template>
+                    </template>
+                </CardBox>
+            </template>
+            <template #id="slotProps">
+                <a>{{slotProps.id}}</a>
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip v-for="i in getActions(slotProps)" :key="i.key" v-bind="i.tooltip">
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                        </a-popconfirm>
+                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { query } from '@/api/northbound/dueros'
+import type { ActionsType } from '@/components/Table/index.vue'
+import { getImage } from '@/utils/comm';
+import { DeleteOutlined } from '@ant-design/icons-vue'
+import { message } from "ant-design-vue";
+
+const request = (data: any) => query({})
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        scopedSlots: true
+    },
+    {
+        title: '分类',
+        dataIndex: 'classifiedName',
+        key: 'classifiedName',
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 250,
+        scopedSlots: true
+    }   
+]
+
+const handleClick = (dt: any) => {
+    
+}
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if(!data){
+        return []
+    }
+    return [
+        {
+            key: 'edit',
+            text: "编辑",
+            tooltip: {
+                title: '编辑'
+            },
+            icon: 'icon-rizhifuwu'
+        },
+        {
+            key: 'import',
+            text: "导入",
+            tooltip: {
+                title: '导入'
+            },
+            disabled: true,
+            icon: 'icon-xiazai'
+        },
+        {
+            key: 'delete',
+            text: "删除",
+            tooltip: {
+                title: !!data?.state ? '正常的产品不能删除' : '删除'
+            },
+            popConfirm: {
+                title: '确认删除?'
+            },
+            icon: 'icon-huishouzhan'
+        }
+    ]
+}
+
+const add = () => {
+    message.warn('123')
+}
+
+</script>

yarn.lock

@@ -924,10 +924,10 @@
     "three" "0.143.0"
     "uppercamelcase" "^1.1.0"
 
-"@vueuse/core@*", "@vueuse/core@^9.10.0":
+JSONStream@^1.0.4:
-  "integrity" "sha512-CxMewME07qeuzuT/AOIQGv0EhhDoojniqU6pC3F8m5VC76L47UT18DcX88kWlP3I7d3qMJ4u/PD8iSRsy3bmNA=="
+  version "1.3.5"
-  "resolved" "https://registry.npmjs.org/@vueuse/core/-/core-9.10.0.tgz"
+  resolved "https://registry.npmmirror.com/JSONStream/-/JSONStream-1.3.5.tgz"
-  "version" "9.10.0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
   dependencies:
     "@types/web-bluetooth" "^0.0.16"
     "@vueuse/metadata" "9.10.0"