From b0148bcac690556507ef4f03eba7740b6b2d6b4a Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 30 Jan 2023 17:05:27 +0800
Subject: [PATCH 1/4] =?UTF-8?q?update:=20=E6=9A=82=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/menu.ts                        |   4 +
 src/router/menu.ts                            |   8 +
 src/utils/comm.ts                             |  27 --
 .../components/dialogs/DeviceChooseDialog.vue |   6 +-
 src/views/system/Menu/Detail/BasicInfo.vue    | 283 ++++++++++++++++++
 src/views/system/Menu/Detail/ButtonMange.vue  |  18 ++
 src/views/system/Menu/Detail/index.vue        |  25 ++
 src/views/system/Menu/index.d.ts              |   0
 src/views/system/Menu/index.vue               | 247 +++++++++++++++
 9 files changed, 589 insertions(+), 29 deletions(-)
 create mode 100644 src/api/system/menu.ts
 create mode 100644 src/views/system/Menu/Detail/BasicInfo.vue
 create mode 100644 src/views/system/Menu/Detail/ButtonMange.vue
 create mode 100644 src/views/system/Menu/Detail/index.vue
 create mode 100644 src/views/system/Menu/index.d.ts
 create mode 100644 src/views/system/Menu/index.vue

diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts
new file mode 100644
index 00000000..6b584c4b
--- /dev/null
+++ b/src/api/system/menu.ts
@@ -0,0 +1,4 @@
+import server from '@/utils/request';
+
+// 获取当前用户可访问菜单
+export const getMenuTree_api = (data: object) => server.post(`/menu/_all/tree`, data);
\ No newline at end of file
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 2e92daff..20a8ca67 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -113,6 +113,14 @@ export default [
         path:'/system/Permission',
         component: ()=>import('@/views/system/Permission/index.vue')
     },
+    {
+        path:'/system/Menu',
+        component: ()=>import('@/views/system/Menu/index.vue')
+    },
+    {
+        path:'/system/Menu/detail/:id',
+        component: ()=>import('@/views/system/Menu/Detail/index.vue')
+    },
     // 初始化
     {
       path: '/init-home',
diff --git a/src/utils/comm.ts b/src/utils/comm.ts
index 3c032a79..b5a12816 100644
--- a/src/utils/comm.ts
+++ b/src/utils/comm.ts
@@ -57,30 +57,3 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
 export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
     return option[key]?.includes(value)
 }
-
-/**
- * 时间转换为'2022-01-02 14:03:05'
- * @param date 时间对象
- * @returns 
- */
-export const dateFormat = (dateSouce:any):string|Error => {
-    let date = null
-    try {
-        date = new Date(dateSouce)
-    } catch (error) {
-        return new Error('请传入日期格式数据')
-    }
-    let year = date.getFullYear();
-    let month: number | string = date.getMonth() + 1;
-    let day: number | string = date.getDate();
-    let hour: number | string = date.getHours();
-    let minutes: number | string = date.getMinutes();
-    let seconds: number | string = date.getSeconds();
-    month = (month < 10) ? '0' + month : month;
-    day = (day < 10) ? '0' + day : day;
-    hour = (hour < 10) ? '0' + hour : hour;
-    minutes = (minutes < 10) ? '0' + minutes : minutes;
-    seconds = (seconds < 10) ? '0' + seconds : seconds;
-    return year + "-" + month + "-" + day
-        + " " + hour + ":" + minutes + ":" + seconds;
-}
diff --git a/src/views/home/components/dialogs/DeviceChooseDialog.vue b/src/views/home/components/dialogs/DeviceChooseDialog.vue
index 18a03947..ecb16650 100644
--- a/src/views/home/components/dialogs/DeviceChooseDialog.vue
+++ b/src/views/home/components/dialogs/DeviceChooseDialog.vue
@@ -22,7 +22,9 @@
             }"
         >
             <template #modifyTime="slotProps">
-                <span>{{ dateFormat(slotProps.modifyTime) }}</span>
+                <span>{{
+                    moment(slotProps.modifyTime).format('HHHH-MM-DD HH:mm:ss')
+                }}</span>
             </template>
             <template #state="slotProps">
                 <StatusLabel
@@ -46,8 +48,8 @@ import StatusLabel from '../StatusLabel.vue';
 
 import { ComponentInternalInstance } from 'vue';
 import { getDeviceList_api } from '@/api/home';
-import { dateFormat } from '@/utils/comm';
 import { message } from 'ant-design-vue';
+import moment from 'moment';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['confirm']);
diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
new file mode 100644
index 00000000..37cec9cb
--- /dev/null
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -0,0 +1,283 @@
+<template>
+    <div class="basic-info-container">
+        <a-card>
+            <h3>基本信息</h3>
+            <a-form :model="form.data" class="basic-form">
+                <div class="row" style="display: flex">
+                    <a-form-item
+                        label="菜单图标"
+                        name="icon"
+                        :rules="[
+                            {
+                                required: true,
+                                message: '请上传图标',
+                            },
+                        ]"
+                        style="flex: 0 0 186px"
+                    >
+                        <div class="icon-upload has-icon" v-if="form.data.icon">
+                            <svg aria-hidden="true">
+                                <use :xlinkHref="`#${form.data.icon}`" />
+                            </svg>
+                            <span class="mark">点击修改</span>
+                        </div>
+
+                        <div v-else class="icon-upload no-icon">
+                            <span>
+                                <plus-outlined style="font-size: 30px" />
+                                <p>点击选择图标</p>
+                            </span>
+                        </div>
+                    </a-form-item>
+                    <a-row :gutter="24" style="flex: 1 1 auto">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    { required: true, message: '请输入名称' },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.name" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="编码"
+                                name="code"
+                                :rules="[
+                                    { required: true, message: '请输入编码' },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.code" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="页面地址"
+                                name="url"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入页面地址',
+                                    },
+                                    { max: 128, message: '最多可输入128字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.url" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="排序"
+                                name="sortIndex"
+                                :rules="[
+                                    {
+                                        pattern: /^[0-9]*[1-9][0-9]*$/,
+                                        message: '请输入大于0的整数',
+                                    },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.sortIndex" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </div>
+
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="form.data.describe"
+                        :rows="4"
+                        placeholder="请输入说明"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-card>
+        <a-card>
+            <h3>权限配置</h3>
+            <a-form :model="form.data" class="basic-form permiss-form">
+                <a-form-item label="数据权限控制" name="accessSupport" required>
+                    
+                    <a-radio-group
+                        v-model:value="form.data.accessSupport"
+                        name="radioGroup"
+                    >
+                        <a-radio value="unsupported">不支持</a-radio>
+                        <a-radio value="support">支持</a-radio>
+                        <a-radio value="indirect">间接控制</a-radio>
+                    </a-radio-group>
+
+                    <a-form-item
+                        name="assetType"
+                        v-if="form.data.accessSupport === 'support'"
+                        :rules="[{ required: true, message: '请选择资产类型' }]"
+                    >
+                        <a-select
+                            v-model:value="form.data.assetType"
+                            style="width: 500px"
+                            placeholder="请选择资产类型"
+                        >
+                            <a-select-option
+                                v-for="item in form.assetsType"
+                                :value="item.value"
+                                >{{ item.label }}</a-select-option
+                            >
+                        </a-select>
+                    </a-form-item>
+
+                    <a-form-item
+                        name="indirectMenus"
+                        v-if="form.data.accessSupport === 'indirect'"
+                        :rules="[{ required: true, message: '请选择关联菜单' }]"
+                    >
+                        <a-tree-select
+                            v-model:value="form.data.indirectMenus"
+                            style="width: 400px"
+                            :dropdown-style="{
+                                maxHeight: '400px',
+                                overflow: 'auto',
+                            }"
+                            placeholder="请选择关联菜单"
+                            multiple
+                            show-search
+                            tree-default-expand-all
+                            :tree-data="form.treeData"
+                        >
+                            <template #title="{ value: val, title }">
+                                <b
+                                    v-if="val === 'parent 1-1'"
+                                    style="color: #08c"
+                                    >{{ val }}</b
+                                >
+                                <template v-else>{{ title }}</template>
+                            </template>
+                        </a-tree-select>
+                    </a-form-item>
+                </a-form-item>
+                <a-form-item label="权限">
+                    <a-input
+                        v-model:value="form.data.permissions"
+                        style="width: 300px"
+                        allowClear
+                    />
+                </a-form-item>
+            </a-form>
+
+            <a-button type="primary" @click="clickSave">保存</a-button>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { PlusOutlined } from '@ant-design/icons-vue';
+
+const route = useRoute();
+const routeParams = {
+    id: route.params.id === ':id' ? '' : route.params.id,
+    ...route.query,
+};
+
+const form = reactive({
+    data: {
+        name: '',
+        code: '',
+        url: '',
+        sortIndex: '',
+        icon: '',
+        describe: '',
+        permissions: '',
+        accessSupport: '',
+        assetType: undefined,
+        indirectMenus: [],
+        ...routeParams,
+    } as formType,
+
+    treeData: [],
+    assetsType: [] as assetType[],
+});
+
+const clickSave = () => {};
+
+type formType = {
+    name: string;
+    code: string;
+    url: string;
+    sortIndex: string;
+    icon: string;
+    permissions: string;
+    describe: string;
+    accessSupport: string;
+    assetType: string | undefined;
+    indirectMenus: any[];
+};
+
+type assetType = {
+    label: string;
+    value: string;
+};
+</script>
+
+<style lang="less" scoped>
+.basic-info-container {
+    .ant-card {
+        margin-bottom: 24px;
+
+        h3 {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            padding: 4px 0 4px 12px;
+            font-weight: bold;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 5px px;
+                left: 0;
+                width: 4px;
+                height: calc(100% - 10px);
+                background-color: #1d39c4;
+                border-radius: 2px;
+                content: ' ';
+            }
+        }
+
+        .basic-form {
+            .ant-form-item {
+                display: block;
+                :deep(.ant-form-item-label) {
+                    overflow: inherit;
+                    label::after {
+                        display: none;
+                    }
+                }
+                :deep(.ant-form-item-control-input-content) {
+                    .icon-upload {
+                        width: 160px;
+                        height: 150px;
+                        border: 1px dashed #d9d9d9;
+                        font-size: 14px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        text-align: center;
+                        cursor: pointer;
+                        transition: 0.5s;
+                        &:hover {
+                            border-color: #415ed1;
+                        }
+                    }
+                    .has-icon {
+                    }
+                    .no-icon {
+                        background-color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/system/Menu/Detail/ButtonMange.vue b/src/views/system/Menu/Detail/ButtonMange.vue
new file mode 100644
index 00000000..6c55ec8d
--- /dev/null
+++ b/src/views/system/Menu/Detail/ButtonMange.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="button-mange-container">
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const route = useRoute();
+const routeParams = {
+    id: route.params.id === ':id' ? '' : route.params.id,
+    ...route.query,
+};
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/system/Menu/Detail/index.vue b/src/views/system/Menu/Detail/index.vue
new file mode 100644
index 00000000..08de6fd6
--- /dev/null
+++ b/src/views/system/Menu/Detail/index.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="menu-detail-container">
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="basic" tab="基本信息"> <BasicInfo /> </a-tab-pane>
+            <a-tab-pane key="button" tab="按钮管理">
+                <ButtonMange />
+            </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import BasicInfo from './BasicInfo.vue';
+import ButtonMange from './ButtonMange.vue';
+const activeKey = ref('basic');
+</script>
+
+<style lang="less" scoped>
+.menu-detail-container {
+    .ant-tabs-tabpane {
+        background-color: #f0f2f5;
+        padding: 24px;
+    }
+}
+</style>
diff --git a/src/views/system/Menu/index.d.ts b/src/views/system/Menu/index.d.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/system/Menu/index.vue b/src/views/system/Menu/index.vue
new file mode 100644
index 00000000..7ff407f3
--- /dev/null
+++ b/src/views/system/Menu/index.vue
@@ -0,0 +1,247 @@
+<template>
+    <div class="menu-container">
+        <Search :columns="query.columns" @search="query.search" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="table.getList"
+            model="TABLE"
+            :params="query.params"
+        >
+            <template #headerTitle>
+                <a-button
+                    type="primary"
+                    @click="table.toDetails({})"
+                    style="margin-right: 10px"
+                    ><plus-outlined />新增</a-button
+                >
+                <a-button>菜单实例</a-button>
+            </template>
+            <template #createTime="slotProps">
+                {{ slotProps.createTime }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>查看</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.toDetails(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+                    <a-tooltip>
+                        <template #title>新增子菜单</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.toDetails(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-popconfirm
+                        title="是否删除该菜单"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickDel(slotProps)"
+                        :disabled="slotProps.status"
+                    >
+                        <a-tooltip>
+                            <template #title>删除</template>
+                            <a-button style="padding: 0" type="link">
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getMenuTree_api } from '@/api/system/menu';
+
+const router = useRouter();
+
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '编码',
+            dataIndex: 'code',
+            key: 'code',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '页面地址',
+            dataIndex: 'url',
+            key: 'url',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+            ellipsis: true,
+            search: {
+                type: 'number',
+            },
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            ellipsis: true,
+            search: {
+                type: 'date',
+            },
+        },
+    ],
+    params: {
+        terms: [],
+    },
+    search: (params: any) => {
+        query.params = params;
+    },
+});
+
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+const table = reactive({
+    columns: [
+        {
+            title: '编码',
+            dataIndex: 'code',
+            key: 'code',
+            width: 300,
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            width: 220,
+        },
+        {
+            title: '页面地址',
+            dataIndex: 'url',
+            key: 'url',
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+            width: 80,
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+            width: 200,
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            scopedSlots: true,
+            width: 180,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+            width: 140,
+        },
+    ],
+    tableData: [],
+    total: 0,
+    getList: async (_params: any) => {
+        //过滤非集成的菜单
+        const item = {
+            terms: [
+                {
+                    terms: [
+                        {
+                            column: 'owner',
+                            termType: 'eq',
+                            value: 'iot',
+                        },
+                        {
+                            column: 'owner',
+                            termType: 'isnull',
+                            value: '1',
+                            type: 'or',
+                        },
+                    ],
+                },
+            ],
+        };
+        const params = {
+            ..._params,
+            terms:
+                _params.terms && _params.length !== 0
+                    ? [...query.params.terms, item]
+                    : [item],
+            sorts: [{ name: 'sortIndex', order: 'asc' }],
+            paging: false,
+        };
+        const resp: any = await getMenuTree_api(params);
+        const lastItem = resp.result[resp.result.length - 1];
+        table.total == lastItem ? lastItem.sortIndex + 1 : 1;
+        return {
+            code: resp.message,
+            result: {
+                data: resp.result,
+                pageIndex: 0,
+                pageSize: 0,
+                total: 0,
+            },
+            status: resp.status,
+        };
+    },
+    // 跳转至详情页
+    toDetails: (row: any) => {
+        router.push(
+            `/system/Menu/detail/${row.id || ':id'}?pid=${
+                row.pid || ''
+            }&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
+        );
+    },
+    // 删除
+    clickDel: (row: any) => {
+        // delPermission_api(row.id).then((resp: any) => {
+        //     if (resp.status === 200) {
+        //         tableRef.value?.reload();
+        //         message.success('操作成功!');
+        //     }
+        // });
+    },
+    // 刷新列表
+    refresh: () => {
+        tableRef.value.reload();
+    },
+});
+</script>
+
+<style lang="less" scoped></style>

From 0c9de15e9a9ef5583a2f42a8fb6caf16146c92a4 Mon Sep 17 00:00:00 2001
From: easy <1358086367@qq.com>
Date: Mon, 30 Jan 2023 18:11:05 +0800
Subject: [PATCH 2/4] =?UTF-8?q?update:=20=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/menu.ts                     |  7 +++
 src/views/system/Menu/Detail/BasicInfo.vue | 68 +++++++++++++++++++---
 2 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts
index 7c310033..554b2502 100644
--- a/src/api/system/menu.ts
+++ b/src/api/system/menu.ts
@@ -4,3 +4,10 @@ import server from '@/utils/request';
 export const getMenuTree_api = (data: object) => server.post(`/menu/_all/tree`, data);
 
 export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
+
+
+
+// 获取资产类型
+export const getAssetsType_api = () => server.get(`/asset/types`);
+// 获取菜单详情
+export const getMenuDetail_api = (id:string) => server.get(`/menu/${id}`);
diff --git a/src/views/system/Menu/Detail/BasicInfo.vue b/src/views/system/Menu/Detail/BasicInfo.vue
index 37cec9cb..18b62db3 100644
--- a/src/views/system/Menu/Detail/BasicInfo.vue
+++ b/src/views/system/Menu/Detail/BasicInfo.vue
@@ -98,21 +98,37 @@
         <a-card>
             <h3>权限配置</h3>
             <a-form :model="form.data" class="basic-form permiss-form">
-                <a-form-item label="数据权限控制" name="accessSupport" required>
-                    
+                <a-form-item name="accessSupport" required>
+                    <template #label>
+                        <span style="margin-right: 3px">数据权限控制</span>
+                        <a-tooltip title="此菜单页面数据所对应的资产类型">
+                            <question-circle-outlined
+                                class="img-style"
+                                style="color: #a6a6a6"
+                            />
+                        </a-tooltip>
+                    </template>
                     <a-radio-group
                         v-model:value="form.data.accessSupport"
                         name="radioGroup"
                     >
                         <a-radio value="unsupported">不支持</a-radio>
                         <a-radio value="support">支持</a-radio>
-                        <a-radio value="indirect">间接控制</a-radio>
+                        <a-radio value="indirect">
+                            <span style="margin-right: 3px">间接控制</span>
+                            <a-tooltip
+                                title="此菜单内的数据基于其他菜单的数据权限控制"
+                            >
+                                <question-circle-filled class="img-style" />
+                            </a-tooltip>
+                        </a-radio>
                     </a-radio-group>
 
                     <a-form-item
                         name="assetType"
                         v-if="form.data.accessSupport === 'support'"
                         :rules="[{ required: true, message: '请选择资产类型' }]"
+                        style="margin-top: 24px; margin-bottom: 0"
                     >
                         <a-select
                             v-model:value="form.data.assetType"
@@ -131,6 +147,7 @@
                         name="indirectMenus"
                         v-if="form.data.accessSupport === 'indirect'"
                         :rules="[{ required: true, message: '请选择关联菜单' }]"
+                        style="margin-top: 24px; margin-bottom: 0"
                     >
                         <a-tree-select
                             v-model:value="form.data.indirectMenus"
@@ -161,6 +178,7 @@
                         v-model:value="form.data.permissions"
                         style="width: 300px"
                         allowClear
+                        placeholder="请输入权限名称"
                     />
                 </a-form-item>
             </a-form>
@@ -171,19 +189,29 @@
 </template>
 
 <script setup lang="ts">
-import { PlusOutlined } from '@ant-design/icons-vue';
+import {
+    PlusOutlined,
+    QuestionCircleFilled,
+    QuestionCircleOutlined,
+} from '@ant-design/icons-vue';
+import {
+    getMenuTree_api,
+    getAssetsType_api,
+    getMenuDetail_api,
+} from '@/api/system/menu';
+import { exportPermission_api } from '@/api/system/permission';
 
 const route = useRoute();
 const routeParams = {
-    id: route.params.id === ':id' ? '' : route.params.id,
+    id: route.params.id === ':id' ? '' : (route.params.id as string),
     ...route.query,
+    url: route.query.basePath,
 };
 
 const form = reactive({
     data: {
         name: '',
         code: '',
-        url: '',
         sortIndex: '',
         icon: '',
         describe: '',
@@ -194,10 +222,29 @@ const form = reactive({
         ...routeParams,
     } as formType,
 
-    treeData: [],
-    assetsType: [] as assetType[],
-});
+    treeData: [], // 关联菜单
+    assetsType: [] as assetType[], // 资产类型
+    premissonList: [], // 权限列表
 
+    init: () => {
+        // 获取菜单详情
+        routeParams.id &&
+            getMenuDetail_api(routeParams.id).then((resp) => {
+                console.log('菜单详情', resp);
+            });
+        // 获取权限列表
+        // exportPermission_api()
+        // 获取关联菜单
+        getMenuTree_api({ paging: false }).then((resp) => {
+            console.log('关联菜单', resp);
+        });
+        // 获取资产类型
+        getAssetsType_api().then((resp:any) => {
+            form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
+        });
+    },
+});
+form.init();
 const clickSave = () => {};
 
 type formType = {
@@ -250,6 +297,9 @@ type assetType = {
                 display: block;
                 :deep(.ant-form-item-label) {
                     overflow: inherit;
+                    .img-style {
+                        cursor: help;
+                    }
                     label::after {
                         display: none;
                     }

From 56ca9f1dcf3e6949e132cbe2f33eb2bdb1c66c9f Mon Sep 17 00:00:00 2001
From: 100011797 <2642441182@qq.com>
Date: Mon, 30 Jan 2023 18:11:11 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E5=92=8C=E8=AE=BE=E5=A4=87=E5=9F=BA=E7=A1=80=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/device/instance.ts                    |  22 +-
 src/components/JUpload/index.vue              |  28 ++-
 src/router/menu.ts                            |   6 +-
 src/store/instance.ts                         |  21 +-
 .../Detail/Info/components/Config/index.vue   |  57 +++++
 .../Detail/Info/components/Relation/index.vue |  23 ++
 .../Detail/Info/components/Tags/index.vue     |   3 +
 .../device/Instance/Detail/Info/index.vue     |  45 ++++
 src/views/device/Instance/Detail/index.vue    |  49 +++++
 src/views/device/Instance/Save/index.vue      | 205 +++++++++++++++---
 src/views/device/Instance/index.vue           |  10 +-
 11 files changed, 416 insertions(+), 53 deletions(-)
 create mode 100644 src/views/device/Instance/Detail/Info/components/Config/index.vue
 create mode 100644 src/views/device/Instance/Detail/Info/components/Relation/index.vue
 create mode 100644 src/views/device/Instance/Detail/Info/components/Tags/index.vue
 create mode 100644 src/views/device/Instance/Detail/Info/index.vue
 create mode 100644 src/views/device/Instance/Detail/index.vue

diff --git a/src/api/device/instance.ts b/src/api/device/instance.ts
index 19df86c2..b1d01908 100644
--- a/src/api/device/instance.ts
+++ b/src/api/device/instance.ts
@@ -99,4 +99,24 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
   * @returns 
   */
 export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
- 
+
+/**
+ * 验证设备ID是否重复
+ * @param id 设备id
+ * @returns 
+ */
+export const isExists = (id: string) => server.get(`/device-instance/${id}/exists`)
+
+/**
+ * 修改设备信息
+ * @param data 设备信息
+ * @returns 
+ */
+export const update = (data: Partial<DeviceInstance>) => data.id ? server.patch(`/device-instance`, data) : server.post(`/device-instance`, data)
+
+/**
+ * 获取配置信息
+ * @param id 设备id
+ * @returns 
+ */
+export const getConfigMetadata = (id: string) => server.get(`/device-instance/${id}/config-metadata`)
diff --git a/src/components/JUpload/index.vue b/src/components/JUpload/index.vue
index 94cfe30b..93fd6562 100644
--- a/src/components/JUpload/index.vue
+++ b/src/components/JUpload/index.vue
@@ -15,14 +15,14 @@
                 v-bind="props"
             >
                 <div class="upload-image-content" :style="props.style">
-                    <template v-if="myValue">
+                    <template v-if="imageUrl">
                         <!-- <div class="upload-image"
                         :style="{
                             backgroundSize: props.backgroundSize,
                             backgroundImage: `url(${imageUrl})`
                         }"
                         ></div> -->
-                        <img :src="myValue" class="upload-image" />
+                        <img :src="imageUrl" class="upload-image" />
                         <div class="upload-image-mask">点击修改</div>
                     </template>
                     <template v-else>
@@ -32,7 +32,7 @@
                 </div>
             </a-upload>
             <div class="upload-loading-mask" v-if="props.disabled"></div>
-            <div class="upload-loading-mask" v-if="myValue && loading">
+            <div class="upload-loading-mask" v-if="imageUrl && loading">
                 <AIcon type="LoadingOutlined" style="font-size: 20px" />
             </div>
         </div>
@@ -56,7 +56,6 @@ interface JUploadProps extends UploadProps {
     errorMessage?: string;
     size?: number;
     style?: CSSProperties;
-    backgroundSize?: string;
 }
 
 const emit = defineEmits<Emits>();
@@ -76,24 +75,23 @@ const loading = ref<boolean>(false)
 const imageUrl = ref<string>(props?.modelValue || '')
 const imageTypes = props.types ? props.types : ['image/jpeg', 'image/png'];
 
-const myValue = computed({
-    get: () => {
-        return props.modelValue;
-    },
-    set: (val: any) => {
-        imageUrl.value = val;
-        emit('update:modelValue', val);
-    },
-});
+watch(() => props.modelValue,
+(newValue)=> {
+  console.log(newValue)
+  imageUrl.value = newValue
+}, {
+  deep: true,
+  immediate: true
+})
 
 const handleChange = (info: UploadChangeParam) => {
       if (info.file.status === 'uploading') {
         loading.value = true;
       }
       if (info.file.status === 'done') {
-        myValue.value = info.file.response?.result
+        imageUrl.value = info.file.response?.result
         loading.value = false;
-        emit('update:modelValue', imageUrl.value)
+        emit('update:modelValue', info.file.response?.result)
       }
       if (info.file.status === 'error') {
         loading.value = false;
diff --git a/src/router/menu.ts b/src/router/menu.ts
index 2e92daff..7fa472ed 100644
--- a/src/router/menu.ts
+++ b/src/router/menu.ts
@@ -68,9 +68,13 @@ export default [
 
     // 设备管理
     {
-        path: '/device/Instance',
+        path: '/device/instance',
         component: () => import('@/views/device/Instance/index.vue')
     },
+    {
+        path: '/device/instance/detail/:id',
+        component: () => import('@/views/device/Instance/Detail/index.vue')
+    },
     // link 运维管理
     {
         path: '/link/log',
diff --git a/src/store/instance.ts b/src/store/instance.ts
index eb51df72..44a7c0b7 100644
--- a/src/store/instance.ts
+++ b/src/store/instance.ts
@@ -1,13 +1,28 @@
 import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
-import { defineStore } from "pinia";
+import { defineStore } from "pinia"
+import { detail } from '@/api/device/instance'
 
 export const useInstanceStore = defineStore({
   id: 'device',
-  state: () => ({} as InstanceModel),
+  state: () => ({
+    current: {} as Partial<DeviceInstance>,
+    detail: {} as Partial<DeviceInstance>,
+    tabActiveKey: 'Info'
+  }),
   actions: {
     setCurrent(current: Partial<DeviceInstance>) {
       this.current = current
       this.detail = current
-    }
+    },
+    async refresh(id: string) {
+      const resp = await detail(id)
+      if(resp.status === 200){
+        this.current = resp.result
+        this.detail = resp.result
+      }
+    },
+    setTabActiveKey(key: string) {
+      this.tabActiveKey = key
+    },
   }
 })
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Info/components/Config/index.vue b/src/views/device/Instance/Detail/Info/components/Config/index.vue
new file mode 100644
index 00000000..f22eabaa
--- /dev/null
+++ b/src/views/device/Instance/Detail/Info/components/Config/index.vue
@@ -0,0 +1,57 @@
+<template>
+    <div style="margin-top: 20px" v-if="config.length">
+        <div style="display: flex;">
+            <div style="font-size: 16px; font-weight: 700">配置</div>
+            <a-space>
+               <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
+               <a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+               <a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+            </a-space>
+        </div>
+        <a-descriptions bordered size="small" v-for="i in config" :key="i.name">
+            <template #title><h4>{{i.name}}</h4></template>
+            <a-descriptions-item v-for="item in i.properties" :key="item.property">
+                <template #label>
+                    <a-tooltip v-if="item.description" :title="item.description"><AIcon type="QuestionCircleOutlined" /></a-tooltip>
+                    <span>{{item.name}}</span>
+                </template>
+                <span v-if="item.type.type === 'password' && instanceStore.current?.configuration?.[item.property]?.length > 0">******</span>
+                <span v-else>
+                    <span>{{ instanceStore.current?.configuration?.[item.property] || '' }}</span>
+                    <a-tooltip v-if="isExit(item.property)" :title="`有效值:${instanceStore.current?.configuration?.[item.property]}`"><AIcon type="QuestionCircleOutlined" /></a-tooltip>
+                </span>
+            </a-descriptions-item>
+        </a-descriptions>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from "@/store/instance"
+import { ConfigMetadata } from "@/views/device/Product/typings"
+import { getConfigMetadata } from '@/api/device/instance'
+
+const instanceStore = useInstanceStore()
+const visible = ref<boolean>(false)
+const config = ref<ConfigMetadata[]>([])
+
+watchEffect(() => {
+    if(instanceStore.current.id){
+        // getConfigMetadata(instanceStore.current.id).then(resp => {
+        //     if(resp.status === 200){
+        //         config.value = resp?.result as ConfigMetadata[]
+        //     }
+        // })
+    }
+})
+
+const isExit = (property: string) => {
+    return (
+      instanceStore.current?.cachedConfiguration &&
+      instanceStore.current?.cachedConfiguration[property] !== undefined &&
+      instanceStore.current?.configuration &&
+      instanceStore.current?.configuration[property] !==
+        instanceStore.current?.cachedConfiguration[property]
+    );
+  }
+
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Info/components/Relation/index.vue b/src/views/device/Instance/Detail/Info/components/Relation/index.vue
new file mode 100644
index 00000000..2fa91436
--- /dev/null
+++ b/src/views/device/Instance/Detail/Info/components/Relation/index.vue
@@ -0,0 +1,23 @@
+<template>
+    <div style="margin-top: 20px">
+        <a-descriptions bordered>
+            <template #title>
+                关系信息
+                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑<a-tooltip title="管理设备与其他业务的关联关系，关系来源于关系配置"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+            </template>
+            <a-descriptions-item :span="1" v-for="item in dataSource" :key="item.objectId" :label="item.relationName">{{ item?.related ? (item?.related || []).map(i => i.name).join(',') : '' }}</a-descriptions-item>
+        </a-descriptions>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from "@/store/instance"
+const instanceStore = useInstanceStore()
+
+const dataSource = ref<Record<any, any>[]>([])
+
+watchEffect(() => {
+    const arr = (instanceStore.current?.relations || []).reverse()
+    dataSource.value = arr as Record<any, any>[]
+})
+</script>
diff --git a/src/views/device/Instance/Detail/Info/components/Tags/index.vue b/src/views/device/Instance/Detail/Info/components/Tags/index.vue
new file mode 100644
index 00000000..b672f699
--- /dev/null
+++ b/src/views/device/Instance/Detail/Info/components/Tags/index.vue
@@ -0,0 +1,3 @@
+<template>
+    tags
+</template>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/Info/index.vue b/src/views/device/Instance/Detail/Info/index.vue
new file mode 100644
index 00000000..2a6a58ee
--- /dev/null
+++ b/src/views/device/Instance/Detail/Info/index.vue
@@ -0,0 +1,45 @@
+<template>
+    <a-card>
+        <a-descriptions bordered>
+            <template #title>
+                设备信息
+                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
+            </template>
+            <a-descriptions-item label="设备ID">{{ instanceStore.current.id }}</a-descriptions-item>
+            <a-descriptions-item label="产品名称">{{ instanceStore.current.productName }}</a-descriptions-item>
+            <a-descriptions-item label="产品分类">{{ instanceStore.current.classifiedName }}</a-descriptions-item>
+            <a-descriptions-item label="设备类型">{{ instanceStore.current.deviceType?.text }}</a-descriptions-item>
+            <a-descriptions-item label="固件版本">{{ instanceStore.current.firmwareInfo?.version }}</a-descriptions-item>
+            <a-descriptions-item label="连接协议">{{ instanceStore.current.protocolName }}</a-descriptions-item>
+            <a-descriptions-item label="消息协议">{{ instanceStore.current.transport }}</a-descriptions-item>
+            <a-descriptions-item label="创建时间">{{ instanceStore.current.createTime ? moment(instanceStore.current.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</a-descriptions-item>
+            <a-descriptions-item label="注册时间">{{ instanceStore.current.registerTime ? moment(instanceStore.current.registerTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</a-descriptions-item>
+            <a-descriptions-item label="最后上线时间">{{ instanceStore.current.onlineTime ? moment(instanceStore.current.onlineTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</a-descriptions-item>
+            <a-descriptions-item label="父设备" v-if="instanceStore.current.deviceType?.value === 'childrenDevice'">{{ instanceStore.current.parentId }}</a-descriptions-item>
+            <a-descriptions-item label="说明">{{ instanceStore.current.description }}</a-descriptions-item>
+        </a-descriptions>
+        <Config />
+        <Tags v-if="instanceStore.current?.tags && instanceStore.current?.tags.length > 0 " />
+        <Relation v-if="instanceStore.current?.relations && instanceStore.current?.relations.length > 0" />
+        <Save v-if="visible" :data="instanceStore.current" @close="visible = false" @save="saveBtn" />
+    </a-card>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from '@/store/instance'
+import Save from '../../Save/index.vue'
+import Config from './components/Config/index.vue'
+import Tags from './components/Tags/index.vue'
+import Relation from './components/Relation/index.vue'
+import moment from 'moment'
+
+const visible = ref<boolean>(false)
+const instanceStore = useInstanceStore()
+
+const saveBtn = () => {
+    if(instanceStore.current?.id){
+        instanceStore.refresh(instanceStore.current?.id)
+    }
+    visible.value = false
+}
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Detail/index.vue b/src/views/device/Instance/Detail/index.vue
new file mode 100644
index 00000000..b4c055b5
--- /dev/null
+++ b/src/views/device/Instance/Detail/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
+        <template #subTitle><div>{{instanceStore.current.name}}</div></template>
+        <component :is="instanceStore.tabActiveKey" />
+    </page-container>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from '@/store/instance';
+import Info from './Info/index.vue';
+import Metadata from '../../components/Metadata/index.vue';
+const route = useRoute();
+const instanceStore = useInstanceStore()
+
+const list = [
+    {
+        key: 'Info',
+        tab: '实例信息'
+    },
+    {
+        key: 'Metadata',
+        tab: '物模型'
+    }
+]
+
+const tabs = {
+  Info,
+  Metadata
+}
+
+watch(
+    () => route.params.id,
+    (newId) => {
+        if(newId){
+            instanceStore.tabActiveKey = 'Info'
+            instanceStore.refresh(newId as string)
+        }
+    },
+    {immediate: true, deep: true}
+);
+
+const onBack = () => {
+
+}
+
+const onTabChange = (e: string) => {
+    instanceStore.tabActiveKey = e
+}
+</script>
\ No newline at end of file
diff --git a/src/views/device/Instance/Save/index.vue b/src/views/device/Instance/Save/index.vue
index 1301e493..63fc7398 100644
--- a/src/views/device/Instance/Save/index.vue
+++ b/src/views/device/Instance/Save/index.vue
@@ -1,29 +1,83 @@
 <template>
-    <a-modal :maskClosable="false" width="650px" :visible="true" title="新增" @ok="handleCancel" @cancel="handleCancel">
+    <a-modal
+        :maskClosable="false"
+        width="650px"
+        :visible="true"
+        :title="!!props.data.id ? '编辑' : '新增'"
+        @ok="handleSave"
+        @cancel="handleCancel"
+        :confirmLoading="loading"
+    >
         <div style="margin-top: 10px">
-            <a-form :layout="'vertical'">
+            <a-form
+                :layout="'vertical'"
+                ref="formRef"
+                :rules="rules"
+                :model="modelRef"
+            >
                 <a-row type="flex">
                     <a-col flex="180px">
-                        <a-form-item required name="photoUrl">
-                            <JUpload v-model:value="modelRef.photoUrl" />
+                        <a-form-item name="photoUrl">
+                            <JUpload v-model="modelRef.photoUrl" />
                         </a-form-item>
                     </a-col>
                     <a-col flex="auto">
-                        <a-form-item label="ID">
-                            <a-input v-model:value="modelRef.id" placeholder="请输入ID" />
+                        <a-form-item name="id">
+                            <template #label>
+                                <span>
+                                    ID
+                                    <a-tooltip title="若不填写，系统将自动生成唯一ID">
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            style="margin-left: 2px;" />
+                                    </a-tooltip>
+                                </span>
+                            </template>
+                            <a-input
+                                v-model:value="modelRef.id"
+                                placeholder="请输入ID"
+                                :disabled="!!props.data.id"
+                            />
                         </a-form-item>
-                        <a-form-item label="名称" required>
-                            <a-input v-model:value="modelRef.name" placeholder="请输入名称" />
+                        <a-form-item label="名称" name="name">
+                            <a-input
+                                v-model:value="modelRef.name"
+                                placeholder="请输入名称"
+                            />
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-form-item label="产品" required>
-                    <a-select showSearch v-model:value="modelRef.productId" placeholder="请选择产品">
-                        <a-select-option :value="item.id" v-for="item in productList" :key="item.id" :title="item.name"></a-select-option>
+                <a-form-item name="productId">
+                    <template #label>
+                        <span>所属产品
+                            <a-tooltip title="只能选择“正常”状态的产品">
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px" />
+                            </a-tooltip>
+                        </span>
+                    </template>
+                    <a-select
+                        showSearch
+                        v-model:value="modelRef.productId"
+                        placeholder="请选择所属产品"
+                    >
+                        <a-select-option
+                            :value="item.id"
+                            v-for="item in productList"
+                            :key="item.id"
+                            :title="item.name"
+                            :disabled="!!props.data.id"
+                        ></a-select-option>
                     </a-select>
                 </a-form-item>
-                <a-form-item label="说明">
-                    <a-textarea v-model:value="modelRef.describe" placeholder="请输入说明" />
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="modelRef.describe"
+                        placeholder="请输入说明"
+                        showCount
+                        :maxlength="200"
+                    />
                 </a-form-item>
             </a-form>
         </div>
@@ -31,41 +85,130 @@
 </template>
 
 <script lang="ts" setup>
-import { queryNoPagingPost } from '@/api/device/product'
+import { queryNoPagingPost } from '@/api/device/product';
+import { isExists, update } from '@/api/device/instance';
 import { getImage } from '@/utils/comm';
-import { Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-const emit = defineEmits(['close', 'save'])
+const emit = defineEmits(['close', 'save']);
 const props = defineProps({
     data: {
         type: Object,
-        default: undefined
-    }
-})
-const productList = ref<Record<string, any>[]>([])
-const useForm = Form.useForm;
+        default: undefined,
+    },
+});
+const productList = ref<Record<string, any>[]>([]);
+const loading = ref<boolean>(false);
+
+const formRef = ref();
 
 const modelRef = reactive({
     productId: undefined,
     id: '',
     name: '',
     describe: '',
-    photoUrl: getImage('/device/instance/device-card.png')
+    photoUrl: getImage('/device/instance/device-card.png'),
 });
 
+const vailId = async (_: Record<string, any>, value: string) => {
+    if (!props?.data?.id && value) {
+        const resp = await isExists(value);
+        if (resp.status === 200 && resp.result) {
+            return Promise.reject('ID重复');
+        } else {
+            return Promise.resolve();
+        }
+    } else {
+        return Promise.resolve();
+    }
+};
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入名称',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    photoUrl: [
+        {
+            required: true,
+            message: '请上传图标',
+        },
+    ],
+    productId: [
+        {
+            required: true,
+            message: '请选择所属产品',
+        },
+    ],
+    id: [
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+        {
+            pattern: /^[a-zA-Z0-9_\-]+$/,
+            message: '请输入英文或者数字或者-或者_',
+        },
+        {
+            validator: vailId,
+            trigger: 'blur',
+        },
+    ],
+};
+
 watch(
     () => props.data,
-    () => {
-        queryNoPagingPost({paging: false}).then(resp => {
-            if(resp.status === 200){
-                productList.value = resp.result as Record<string, any>[]
+    (newValue) => {
+        queryNoPagingPost({
+            paging: false,
+            sorts: [{ name: 'createTime', order: 'desc' }],
+            terms: [
+                {
+                    terms: [
+                        {
+                            termType: 'eq',
+                            column: 'state',
+                            value: 1,
+                        },
+                    ],
+                },
+            ],
+        }).then((resp) => {
+            if (resp.status === 200) {
+                productList.value = resp.result as Record<string, any>[];
             }
-        })
+        });
+        Object.assign(modelRef, newValue);
     },
-    {immediate: true, deep: true}
-)
+    { immediate: true, deep: true },
+);
 
 const handleCancel = () => {
-    emit('close')    
-}
+    emit('close');
+    formRef.value.resetFields();
+};
+
+const handleSave = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            loading.value = true;
+            const resp = await update(toRaw(modelRef));
+            loading.value = false;
+            if (resp.status === 200) {
+                message.success('操作成功！');
+                emit('save');
+                formRef.value.resetFields();
+            }
+        })
+        .catch((err: any) => {
+            console.log('error', err);
+        });
+};
 </script>
\ No newline at end of file
diff --git a/src/views/device/Instance/index.vue b/src/views/device/Instance/index.vue
index 2e1d2544..63df2df5 100644
--- a/src/views/device/Instance/index.vue
+++ b/src/views/device/Instance/index.vue
@@ -151,7 +151,7 @@
     <Import v-if="importVisible" @close="importVisible = false" />
     <Export v-if="exportVisible" @close="exportVisible = false" :data="params" />
     <Process v-if="operationVisible" @close="operationVisible = false" :api="api" :type="type" />
-    <Save v-if="visible" :data="current" />
+    <Save v-if="visible" :data="current" @close="visible = false" @save="saveBtn" />
 </template>
 
 <script setup lang="ts">
@@ -165,6 +165,7 @@ import Process from './Process/index.vue'
 import Save from './Save/index.vue'
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 
+const router = useRouter();
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({})
 const _selectedRowKeys = ref<string[]>([])
@@ -266,7 +267,7 @@ const handleAdd = () => {
  * 查看
  */
 const handleView = (id: string) => {
-    message.warn(id + '暂未开发')
+    router.push('/device/instance/detail/' + id)
 }
 
 const getActions = (data: Partial<Record<string, any>>, type: 'card' | 'table'): ActionsType[] => {
@@ -403,4 +404,9 @@ const disabledSelectedDevice = async () => {
         instanceRef.value?.reload()
     }
 }
+
+const saveBtn = () => {
+    visible.value = false
+    instanceRef.value?.reload()
+}
 </script>
\ No newline at end of file

From ac62778a2fdaea68fb896feaebc7d2eeb42d30bd Mon Sep 17 00:00:00 2001
From: blp <2962632571@qq.com>
Date: Mon, 30 Jan 2023 18:12:42 +0800
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=89=A9?=
 =?UTF-8?q?=E8=81=94=E5=8D=A1=E5=88=97=E8=A1=A8=E5=8D=A1=E7=89=87=E3=80=81?=
 =?UTF-8?q?=E5=AF=BC=E5=87=BA=E3=80=81=E5=AF=BC=E5=85=A5=E3=80=81=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A=E8=AE=BE=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/iot-card/iot-card-bg.png        | Bin 0 -> 3944 bytes
 src/api/iot-card/cardManagement.ts            |  35 ++-
 src/components/CardBox/index.vue              |  11 +
 src/utils/utils.ts                            |  11 +
 .../iot-card/CardManagement/BindDevice.vue    | 155 +++++++++++++
 src/views/iot-card/CardManagement/Export.vue  |  65 ++++++
 src/views/iot-card/CardManagement/Import.vue  | 157 +++++++++++++
 src/views/iot-card/CardManagement/index.vue   | 210 +++++++++++++++++-
 src/views/iot-card/CardManagement/typing.d.ts |  20 ++
 9 files changed, 657 insertions(+), 7 deletions(-)
 create mode 100644 public/images/iot-card/iot-card-bg.png
 create mode 100644 src/views/iot-card/CardManagement/BindDevice.vue
 create mode 100644 src/views/iot-card/CardManagement/Export.vue
 create mode 100644 src/views/iot-card/CardManagement/Import.vue
 create mode 100644 src/views/iot-card/CardManagement/typing.d.ts

diff --git a/public/images/iot-card/iot-card-bg.png b/public/images/iot-card/iot-card-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b47b0e0df202175dc94d5e5ff6b474c33695141
GIT binary patch
literal 3944
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
CmVa0P

literal 0
HcmV?d00001

diff --git a/src/api/iot-card/cardManagement.ts b/src/api/iot-card/cardManagement.ts
index 390685e0..51a77294 100644
--- a/src/api/iot-card/cardManagement.ts
+++ b/src/api/iot-card/cardManagement.ts
@@ -64,4 +64,37 @@ export const sync = () => server.get(`/network/card/state/_sync`);
  * 批量删除物联卡
  * @param data
  */
-export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
\ No newline at end of file
+export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
+
+/**
+ * 解绑设备
+ * @param cardId
+ */
+export const unbind = (cardId: string) => server.get(`/network/card/${cardId}/_unbind`);
+
+/**
+ * 分页查询未绑定设备列表
+ * @param data
+*/
+export const queryUnbounded = (data: any) => server.post(`/network/card/unbounded/device/_query`, data);
+
+/**
+ * 绑定设备
+ * @param cardId
+ * @param deviceId 选择的设备id
+ */
+export const bind = (cardId: string | any, deviceId: string) => server.get(`/network/card/${cardId}/${deviceId}/_bind`);
+
+/**
+ * 导入物联卡实例
+ * @param configId 对接平台id
+ * @param params
+ */
+export const _import = (configId: any, params: any) => server.get(`/network/card/${configId}/_import`, params);
+
+/**
+ * 根据id批量导出
+ * @param format 类型 xlsx、csv
+ * @param params
+ */
+export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
\ No newline at end of file
diff --git a/src/components/CardBox/index.vue b/src/components/CardBox/index.vue
index b3449223..cb958ce7 100644
--- a/src/components/CardBox/index.vue
+++ b/src/components/CardBox/index.vue
@@ -232,6 +232,17 @@ const handleClick = () => {
             :deep(.card-item-content-title) {
                 cursor: pointer;
             }
+
+            :deep(.card-item-heard-name) {
+                font-weight: 700;
+                font-size: 16px;
+                margin-bottom: 12px;
+            }
+
+            :deep(.card-item-content-text) {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 12px;
+            }
         }
 
         .card-mask {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 239ee90f..d9d3e290 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -54,6 +54,17 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   formElement.submit();
   document.body.removeChild(formElement);
 };
+
+export const downloadFileByUrl = (url: string, name: string, type: string) => {
+  const downNode = document.createElement('a');
+  downNode.style.display = 'none';
+  downNode.download = `${name}.${type}`;
+  downNode.href = url;
+  document.body.appendChild(downNode);
+  downNode.click();
+  document.body.removeChild(downNode);
+};
+
 // 是否不是community版本
 export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
 
diff --git a/src/views/iot-card/CardManagement/BindDevice.vue b/src/views/iot-card/CardManagement/BindDevice.vue
new file mode 100644
index 00000000..cdf48031
--- /dev/null
+++ b/src/views/iot-card/CardManagement/BindDevice.vue
@@ -0,0 +1,155 @@
+<!-- 绑定设备 -->
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="1100px"
+        :visible="true"
+        title="选择设备"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div style="margin-top: 10px">
+            <Search
+                :columns="columns"
+                target="iot-card-management-search"
+                @search="handleSearch"
+            />
+            <JTable
+                ref="bindDeviceRef"
+                :columns="columns"
+                :request="queryUnbounded"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :rowSelection="{
+                    type: 'radio',
+                    selectedRowKeys: _selectedRowKeys,
+                    onSelect: onSelectChange,
+                }"
+                @cancelSelect="cancelSelect"
+                :params="params"
+            >
+                <template #registryTime="slotProps">
+                    {{
+                        slotProps.registryTime
+                            ? moment(slotProps.registryTime).format(
+                                  'YYYY-MM-DD HH:mm:ss',
+                              )
+                            : ''
+                    }}
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :status="statusMap.get(slotProps.state.value)"
+                    />
+                </template>
+            </JTable>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { queryUnbounded, bind } from '@/api/iot-card/cardManagement';
+import moment from 'moment';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['change']);
+
+const props = defineProps({
+    cardId: {
+        type: String,
+    },
+});
+
+const bindDeviceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const btnLoading = ref<boolean>(false);
+
+const statusMap = new Map();
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+        // sorter: true,
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '禁用', value: 'notActive' },
+                { label: '离线', value: 'offline' },
+                { label: '在线', value: 'online' },
+            ],
+        },
+        // filterMultiple: false,
+    },
+];
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+const onSelectChange = (record: any) => {
+    _selectedRowKeys.value = [record.id];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+const handleOk = () => {
+    btnLoading.value = true;
+    bind(props.cardId, _selectedRowKeys.value[0])
+        .then((resp: any) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
+                emit('change', true);
+            }
+        })
+        .finally(() => {
+            btnLoading.value = false;
+        });
+};
+
+const handleCancel = () => {
+    emit('change', false);
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/iot-card/CardManagement/Export.vue b/src/views/iot-card/CardManagement/Export.vue
new file mode 100644
index 00000000..5f20c55f
--- /dev/null
+++ b/src/views/iot-card/CardManagement/Export.vue
@@ -0,0 +1,65 @@
+<template>
+    <!-- 导入 -->
+    <a-modal
+        :maskClosable="false"
+        :visible="true"
+        title="导出"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-space>
+                <span>文件格式：</span>
+                <a-radio-group
+                    v-model:value="type"
+                    placeholder="请选择文件格式"
+                    button-style="solid"
+                >
+                    <a-radio-button value="xlsx">xlsx</a-radio-button>
+                    <a-radio-button value="csv">csv</a-radio-button>
+                </a-radio-group>
+            </a-space>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import { _export } from '@/api/iot-card/cardManagement';
+import { downloadFileByUrl } from '@/utils/utils';
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: undefined,
+    },
+});
+
+const type = ref<string>('xlsx');
+
+const handleOk = () => {
+    console.log(props.data);
+    _export(type.value, props.data).then((res: any) => {
+        if (res) {
+            const blob = new Blob([res.data], { type: type.value });
+            const url = URL.createObjectURL(blob);
+            downloadFileByUrl(
+                url,
+                `物联卡管理-${moment(new Date()).format(
+                    'YYYY/MM/DD HH:mm:ss',
+                )}`,
+                type.value,
+            );
+            emit('close');
+        }
+    });
+};
+
+const handleCancel = () => {
+    emit('close');
+};
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/iot-card/CardManagement/Import.vue b/src/views/iot-card/CardManagement/Import.vue
new file mode 100644
index 00000000..0ca75bca
--- /dev/null
+++ b/src/views/iot-card/CardManagement/Import.vue
@@ -0,0 +1,157 @@
+<template>
+    <!-- 导入 -->
+    <a-modal
+        :maskClosable="false"
+        :visible="true"
+        title="导入"
+        @ok="handleCancel"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-form :layout="'vertical'">
+                <a-form-item label="平台对接" required>
+                    <a-select
+                        showSearch
+                        v-model:value="modelRef.configId"
+                        :options="configList"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item v-if="modelRef.configId" label="文件格式">
+                    <a-radio-group
+                        button-style="solid"
+                        v-model:value="modelRef.fileType"
+                        placeholder="请选择文件格式"
+                    >
+                        <a-radio-button value="xlsx">xlsx</a-radio-button>
+                        <a-radio-button value="csv">csv</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item label="文件上传" v-if="modelRef.configId">
+                    <a-upload
+                        v-model:fileList="modelRef.upload"
+                        name="file"
+                        :action="FILE_UPLOAD"
+                        :headers="{
+                            'X-Access-Token': LocalStore.get(TOKEN_KEY),
+                        }"
+                        :accept="`.${modelRef.fileType || 'xlsx'}`"
+                        :showUploadList="false"
+                        @change="fileChange"
+                    >
+                        <a-button :loading="loading">
+                            <template #icon>
+                                <AIcon type="UploadOutlined" />
+                            </template>
+                            文件上传
+                        </a-button>
+                    </a-upload>
+                </a-form-item>
+                <a-form-item v-if="modelRef.configId" label="下载模板">
+                    <a-space>
+                        <a-button icon="file" @click="downFileFn('xlsx')">
+                            .xlsx
+                        </a-button>
+                        <a-button icon="file" @click="downFileFn('csv')">
+                            .csv
+                        </a-button>
+                    </a-space>
+                </a-form-item>
+                <div v-if="totalCount">
+                    <a-icon class="check-num" type="check" /> 已完成 总数量
+                    <span class="check-num">{{ totalCount }}</span>
+                </div>
+                <div v-if="errCount">
+                    <a-icon class="check-num" style="color: red" type="close" />
+                    失败 总数量
+                    <span class="check-num">{{ errCount }}</span>
+                </div>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { FILE_UPLOAD } from '@/api/comm';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { LocalStore } from '@/utils/comm';
+import { downloadFile } from '@/utils/utils';
+import { queryPlatformNoPage, _import } from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['close']);
+
+const configList = ref<Record<string, any>[]>([]);
+const loading = ref<boolean>(false);
+const totalCount = ref<number>(0);
+const errCount = ref<number>(0);
+
+const modelRef = reactive({
+    configId: undefined,
+    upload: [],
+    fileType: 'xlsx',
+});
+
+const getConfig = async () => {
+    const resp: any = await queryPlatformNoPage({
+        paging: false,
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'state',
+                        termType: 'eq',
+                        value: 'enabled',
+                        type: 'and',
+                    },
+                ],
+            },
+        ],
+    });
+    configList.value = resp.result.map((item: any) => {
+        return { key: item.id, label: item.name, value: item.id };
+    });
+};
+
+const fileChange = (info: any) => {
+    loading.value = true;
+    if (info.file.status === 'done') {
+        const r = info.file.response || { result: '' };
+        _import(modelRef.configId, { fileUrl: r.result })
+            .then((resp: any) => {
+                totalCount.value = resp.result.total;
+                message.success('导入成功');
+            })
+            .catch((err) => {
+                message.error(err.response.data.message || '导入失败');
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    }
+};
+
+const downFileFn = (type: string) => {
+    const url = `${BASE_API_PATH}/network/card/template.${type}`;
+    downloadFile(url);
+};
+
+const handleCancel = () => {
+    totalCount.value = 0;
+    errCount.value = 0;
+    modelRef.configId = undefined;
+    emit('close', true);
+};
+
+getConfig();
+</script>
+
+<style scoped lang="less">
+.check-num {
+    margin: 6px;
+    color: @primary-color;
+}
+</style>
diff --git a/src/views/iot-card/CardManagement/index.vue b/src/views/iot-card/CardManagement/index.vue
index 6ab563d4..3cf85c36 100644
--- a/src/views/iot-card/CardManagement/index.vue
+++ b/src/views/iot-card/CardManagement/index.vue
@@ -103,6 +103,113 @@
                     </a-dropdown>
                 </a-space>
             </template>
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    @click="handleClick"
+                    :actions="getActions(slotProps, 'card')"
+                    v-bind="slotProps"
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.cardStateType.value"
+                    :statusText="slotProps.cardStateType.text"
+                    :statusNames="{
+                        using: 'success',
+                        toBeActivated: 'default',
+                        deactivate: 'error',
+                    }"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/iot-card/iot-card-bg.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                        <h3
+                            class="card-item-content-title"
+                            @click.stop="handleView(slotProps.id)"
+                        >
+                            {{ slotProps.id }}
+                        </h3>
+                        <a-row>
+                            <a-col :span="8">
+                                <div class="card-item-content-text">
+                                    平台对接
+                                </div>
+                                <div>{{ slotProps.platformConfigName }}</div>
+                            </a-col>
+                            <a-col :span="6">
+                                <div class="card-item-content-text">类型</div>
+                                <div>{{ slotProps.cardType.text }}</div>
+                            </a-col>
+                            <a-col :span="6">
+                                <div class="card-item-content-text">提醒</div>
+                                <!-- <div>{{ slotProps.cardType.text }}</div> -->
+                            </a-col>
+                        </a-row>
+                        <a-divider style="margin: 12px 0" />
+                        <div v-if="slotProps.usedFlow === 0">
+                            <span class="flow-text">
+                                {{ slotProps.totalFlow }}
+                            </span>
+                            <span class="card-item-content-text"> M 使用流量</span>
+                        </div>
+                        <div v-else>
+                            <div class="progress-text">
+                                <div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
+                                <div class="card-item-content-text">
+                                    总共 {{ slotProps.totalFlow }} M
+                                </div>
+                            </div>
+                            <a-progress
+                                :strokeColor="'#ADC6FF'"
+                                :showInfo="false"
+                                :percent="slotProps.totalFlow - slotProps.usedFlow"
+                            />
+                        </div>
+                    </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 #deviceId="slotProps">
+                {{ slotProps.deviceName }}
+            </template>
             <template #totalFlow="slotProps">
                 <div>
                     {{
@@ -157,7 +264,7 @@
             <template #action="slotProps">
                 <a-space :size="16">
                     <a-tooltip
-                        v-for="i in getActions(slotProps)"
+                        v-for="i in getActions(slotProps, 'table')"
                         :key="i.key"
                         v-bind="i.tooltip"
                     >
@@ -186,6 +293,20 @@
                 </a-space>
             </template>
         </JTable>
+        <!-- 批量导入 -->
+        <Import v-if="importVisible" @close="importVisible = false" />
+        <!-- 批量导出 -->
+        <Export
+            v-if="exportVisible"
+            @close="exportVisible = false"
+            :data="_selectedRowKeys"
+        />
+        <!-- 绑定设备 -->
+        <BindDevice
+            v-if="bindDeviceVisible"
+            :cardId="cardId"
+            @change="bindDevice"
+        />
     </div>
 </template>
 
@@ -204,16 +325,25 @@ import {
     resumptionBatch,
     sync,
     removeCards,
+    unbind,
 } from '@/api/iot-card/cardManagement';
 import { message } from 'ant-design-vue';
+import type { CardManagement } from './typing';
+import { getImage } from '@/utils/comm';
+import BindDevice from './BindDevice.vue';
+import Import from './Import.vue';
+import Export from './Export.vue';
 
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
 const _selectedRow = ref<any[]>([]);
+const bindDeviceVisible = ref<boolean>(false);
 const visible = ref<boolean>(false);
 const exportVisible = ref<boolean>(false);
 const importVisible = ref<boolean>(false);
+const cardId = ref<any>();
+const current = ref<Partial<CardManagement>>({});
 
 const columns = [
     {
@@ -239,9 +369,10 @@ const columns = [
     },
     {
         title: '绑定设备',
-        dataIndex: 'deviceName',
-        key: 'deviceName',
+        dataIndex: 'deviceId',
+        key: 'deviceId',
         ellipsis: true,
+        scopedSlots: true,
         width: 200,
     },
     {
@@ -360,7 +491,10 @@ const columns = [
     },
 ];
 
-const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
     if (!data) return [];
     return [
         {
@@ -386,6 +520,25 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                 title: data.deviceId ? '解绑设备' : '绑定设备',
             },
             icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
+            popConfirm: data.deviceId
+                ? {
+                      title: '确认解绑设备？',
+                      onConfirm: async () => {
+                          unbind(data.id).then((resp: any) => {
+                              if (resp.status === 200) {
+                                  message.success('操作成功');
+                                  cardManageRef.value?.reload();
+                              }
+                          });
+                      },
+                  }
+                : undefined,
+            onClick: () => {
+                if (!data.deviceId) {
+                    bindDeviceVisible.value = true;
+                    cardId.value = data.id;
+                }
+            },
         },
         {
             key: 'activation',
@@ -479,11 +632,38 @@ const cancelSelect = () => {
     _selectedRowKeys.value = [];
 };
 
+const handleClick = (dt: any) => {
+    if (_selectedRowKeys.value.includes(dt.id)) {
+        const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
+        _selectedRowKeys.value.splice(_index, 1);
+    } else {
+        _selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
+    }
+};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
 /**
  * 新增
  */
 const handleAdd = () => {};
 
+/**
+ * 绑定设备关闭窗口
+ */
+const bindDevice = (val: boolean) => {
+    bindDeviceVisible.value = false;
+    cardId.value = '';
+    if (val) {
+        cardManageRef.value?.reload();
+    }
+};
+
 /**
  * 批量激活
  */
@@ -565,7 +745,25 @@ const handelRemove = async () => {
 </script>
 
 <style scoped lang="less">
-.search {
-    width: calc(100% - 330px);
+.page-container {
+    .search {
+        width: calc(100% - 330px);
+    }
+    .flow-text {
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .progress-text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    :deep(.ant-progress-inner) {
+        border-radius: 0px;
+    }
+    :deep(.ant-progress-bg) {
+        border-radius: 0px;
+    }
 }
 </style>
diff --git a/src/views/iot-card/CardManagement/typing.d.ts b/src/views/iot-card/CardManagement/typing.d.ts
new file mode 100644
index 00000000..b661a226
--- /dev/null
+++ b/src/views/iot-card/CardManagement/typing.d.ts
@@ -0,0 +1,20 @@
+export type CardManagement = {
+  id: string;
+  name: string;
+  iccId: string;
+  deviceId: string;
+  deviceName: string;
+  platformConfigId: string;
+  operatorName: string;
+  cardType: any;
+  totalFlow: number;
+  usedFlow: number;
+  residualFlow: number;
+  activationDate: string;
+  updateTime: string;
+  cardStateType: any;
+  cardState: any;
+  describe: string;
+  platformConfigName: string;
+  operatorPlatformType: any;
+};