Merge remote-tracking branch 'origin/dev' into dev-hub

src/api/initHome.ts

@@ -1,15 +1,15 @@
 import server from '@/utils/request';
 
 // 更新全部菜单
-export const updateMenus = (data: any) => server
+export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
 // 添加角色
-export const addRole = (data: any) => server.post(`/role`)
+export const addRole = (data: any) => server.post(`/role`, data)
 
 //更新权限菜单
 export const getRoleMenu = (id: string) => server.get(`/menu/role/${id}/_grant/tree`)
 
 //更新权限菜单
-export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`)
+export const updateRoleMenu = (id: string, data: any) => server.put(`/menu/role/${id}/_grant`, data)
 
 // 记录初始化
 export const saveInit = () => server.post(`/user/settings/init`,{ init: true },)
@@ -22,4 +22,34 @@ export const getInit = () => server.get(`/user/settings/init`)
 export const getSystemPermission = () =>server.get(`/system/resources/permission`)
 
 // 保存基础信息
- export const save = (data?: any) => server.post('/system/config/scope/_save')
+ export const save = (data?: any) => server.post('/system/config/scope/_save',data)
+
+ // 查询对应协议下的本地端口数据
+  export const getResourcesCurrent = () => server.get('/network/resources/alive/_current')
+
+// 保存网络组件
+export const saveNetwork = (data: any) => server.post(`/network/config`, data)
+
+// 保存协议
+export const saveProtocol = () => server.post(`/protocol/default-protocol/_save`,)
+
+// 新增设备接入网关
+export const saveAccessConfig = (data: any) => server.post(`/gateway/device`, data)
+
+// 新增产品
+export const saveProduct = (data: any) => server.post(`/device/product`,data)
+
+// 新增设备
+export const saveDevice = (data: any) => server.post(`/device/instance`,data)
+
+// 启用设备
+export const deployDevice =  (deviceId: string, params?: any) => server.post(`/device-instance/${deviceId}/deploy`,params,)
+export const changeDeploy= (id: string) => server.post(`/device-product/${id}/deploy`)
+
+// 查询保存后的数据
+export const detail = (data?: any) => server.post(`/system/config/scopes`, data)
+
+// 获取协议
+export const getProtocol = () =>server.get(`/protocol/_query/no-paging?paging=false`)
+
+// 上传文件

src/api/iot-card/home.ts

@@ -0,0 +1,6 @@
+import server from '@/utils/request'
+
+// 查询特定天数流量数据
+export const queryFlow = (beginTime: any, endTime: any, data: any) => server.post(`/network/flow/_query/${beginTime}/${endTime}`, data)
+
+export const list = (data: any) => server.post(`/network/card/_query`, data)

src/components/CardBox/index.vue

@@ -54,31 +54,24 @@
                         delete: item.key === 'delete',
                     }"
                 >
+                <!-- <slot name="actions" v-bind="item"></slot> -->
                 <a-popconfirm  v-if="item.popConfirm" v-bind="item.popConfirm">
-                    <template v-if="item.key === 'delete'">
+                    <a-button :disabled="item.disabled">
-                        <a-button :disabled="item.disabled">
+                        <DeleteOutlined v-if="item.key === 'delete'" />
-                            <DeleteOutlined />
+                        <template v-else>
-                        </a-button>
-                    </template>
-                    <template v-else>
-                        <a-button :disabled="item.disabled">
                             <AIcon :type="item.icon" />
                             <span>{{ item.text }}</span>
-                        </a-button>
+                        </template>
-                    </template>
+                    </a-button>
                 </a-popconfirm>
                 <template v-else>
-                    <template v-if="item.key === 'delete'">
+                    <a-button :disabled="item.disabled">
-                        <a-button :disabled="item.disabled">
+                        <DeleteOutlined v-if="item.key === 'delete'" />
-                            <DeleteOutlined />
+                        <template v-else>
-                        </a-button>
-                    </template>
-                    <template v-else>
-                        <a-button :disabled="item.disabled">
                             <AIcon :type="item.icon" />
                             <span>{{ item.text }}</span>
-                        </a-button>
+                        </template>
-                    </template>
+                    </a-button>
                 </template>
                 </div>
             </div>
@@ -291,10 +284,10 @@ const handleClick = () => {
             display: flex;
             flex-grow: 1;
 
-            > span,
+            & > span,
-            & button {
+            button {
-                width: 100%;
+                width: 100% !important;
-                border-radius: 0;
+                border-radius: 0 !important;
             }
 
             button {
@@ -372,9 +365,9 @@ const handleClick = () => {
                 }
             }
 
-            :deep(.ant-tooltip-disabled-compatible-wrapper) {
+            // :deep(.ant-tooltip-disabled-compatible-wrapper) {
-                width: 100%;
+            //     width: 100%;
-            }
+            // }
         }
     }
 }

src/components/Table/index.tsx

@@ -50,11 +50,20 @@ export interface JTableProps extends TableProps{
         pageIndex: number;
     };
     model?: keyof typeof ModelEnum | undefined; // 显示table还是card
-    actions?: ActionsType[];
+    // actions?: ActionsType[];
     noPagination?: boolean;
     rowSelection?: TableProps['rowSelection'];
     cardProps?:  Record<string, any>;
     dataSource?:  Record<string, any>[];
+    gridColumn: number;
+    /**
+     * 用于不同分辨率
+     * gridColumns[0] 1366 ~ 1440 分辨率；
+     * gridColumns[1] 1440 ~  1600 分辨率；
+     * gridColumns[2] > 1600 分辨率；
+     */
+     gridColumns?: number[];
+     alertRender?: boolean;
 }
 
 const JTable = defineComponent<JTableProps>({
@@ -87,10 +96,10 @@ const JTable = defineComponent<JTableProps>({
             type: [String, undefined],
             default: undefined
         },
-        actions: {
+        // actions: {
-            type: Array as PropType<ActionsType[]>,
+        //     type: Array as PropType<ActionsType[]>,
-            default: () => []
+        //     default: () => []
-        },
+        // },
         noPagination: {
             type: Boolean,
             default: false
@@ -106,12 +115,24 @@ const JTable = defineComponent<JTableProps>({
         dataSource: {
             type: Array,
             default: () => []
+        },
+        gridColumns: {
+            type: Array as PropType<Number[]>,
+            default: [2, 3, 4]
+        },
+        gridColumn: {
+            type: Number,
+            default: 4
+        },
+        alertRender: {
+            type: Boolean,
+            default: true
         }
     } as any,
     setup(props: JTableProps ,{ slots, emit }){
         const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
         const _model = ref<keyof typeof ModelEnum>(props.model ? props.model : ModelEnum.CARD); // 模式切换
-        const column = ref<number>(4);
+        const column = ref<number>(props.gridColumn || 4);
         const _dataSource = ref<Record<string, any>[]>([])
         const pageIndex = ref<number>(0)
         const pageSize = ref<number>(6)
@@ -119,9 +140,20 @@ const JTable = defineComponent<JTableProps>({
         const _columns = ref<JColumnProps[]>(props?.columns || [])
         const loading = ref<boolean>(true)
 
-        // alert关闭，取消选择
+        /**
-        const handleAlertClose = () => {
+         * 监听宽度，计算显示卡片个数
-            emit('cancelSelect')
+         */
+        const windowChange = () => {
+            if (window.innerWidth <= 1440) {
+                const _column = props.gridColumn && props.gridColumn < 2 ? props.gridColumn : 2;
+                column.value = props.gridColumns ? props.gridColumns[0] : _column
+            } else if (window.innerWidth > 1440 && window.innerWidth <= 1600) {
+                const _column = props.gridColumn && props.gridColumn < 3 ? props.gridColumn : 3;
+                column.value = props.gridColumns ? props.gridColumns[1] : _column
+            } else if (window.innerWidth > 1600) {
+                const _column = props.gridColumn && props.gridColumn < 4 ? props.gridColumn : 4;
+                column.value = props.gridColumns ? props.gridColumns[2] : _column
+            }
         }
 
         /**
@@ -153,13 +185,22 @@ const JTable = defineComponent<JTableProps>({
             } else {
                 _dataSource.value = props?.dataSource || []
             }
-            
             loading.value = false
         }
 
         watchEffect(() => {
             handleSearch(props.params)
         })
+
+        onMounted(() => {
+            window.onresize = () => {
+                windowChange()
+            }
+        })
+
+        onUnmounted(() => {
+            window.onresize = null
+        })
         
         return () => <Spin spinning={loading.value}>
                 <div class={styles["jtable-body"]}>
@@ -184,12 +225,14 @@ const JTable = defineComponent<JTableProps>({
                 {/* content */}
                 <div class={styles['jtable-content']}>
                     {
-                        props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
+                        props.alertRender && props?.rowSelection && props?.rowSelection?.selectedRowKeys && props.rowSelection.selectedRowKeys?.length ?
                         <div class={styles['jtable-alert']}>
                             <Alert
                                 message={'已选择' + props?.rowSelection?.selectedRowKeys?.length + '项'}
                                 type="info"
-                                onClose={handleAlertClose}
+                                onClose={() => {
+                                    emit('cancelSelect')
+                                }}
                                 closeText={<a>取消选择</a>}
                              />
                         </div> : null
@@ -205,8 +248,10 @@ const JTable = defineComponent<JTableProps>({
                                 >
                                     {
                                         _dataSource.value.map(item => slots.card ? 
-                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.card({row: item, actions: props?.actions || []})}</div>
+                                            <div class={[styles['jtable-card-item'], props.cardBodyClass]}>
-                                            : null)
+                                                {slots.card(item)}
+                                            </div> : null
+                                        )
                                     }
                                 </div> : 
                                 <div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
@@ -225,7 +270,7 @@ const JTable = defineComponent<JTableProps>({
                                         const {column, record} = dt;
                                         if((column?.key || column?.dataIndex) && column?.scopedSlots && (slots?.[column?.dataIndex] || slots?.[column?.key])) {
                                             const _key = column?.key || column?.dataIndex
-                                            return slots?.[_key]!({row: record, actions: props.actions})
+                                            return slots?.[_key]!(record)
                                         } else {
                                             return record?.[column?.dataIndex] || ''
                                         }

src/components/Table/index.vue

@@ -15,7 +15,7 @@
                 </div>
             </div>
             <div class="jtable-content">
-                <div class="jtable-alert" v-if="rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length">
+                <div class="jtable-alert" v-if="rowSelection && rowSelection.selectedRowKeys && rowSelection.selectedRowKeys.length">
                     <a-alert :message="'已选择' + rowSelection.selectedRowKeys.length + '项'" type="info" :afterClose="handleAlertClose">
                         <template #closeText>
                             <a>取消选择</a>

src/global.d.ts

@@ -9,4 +9,5 @@ declare module '*.jpeg';
 declare module '*.gif';
 declare module '*.bmp';
 declare module '*.js';
-declare module '*.ts';
+declare module '*.ts';
+declare module 'js-cookie';

src/router/menu.ts

@@ -87,9 +87,19 @@ export default [
         path: '/link/accessConfig/detail/add',
         component: () => import('@/views/link/AccessConfig/Detail/index.vue')
     },
+    // system 系统管理
+    {
+        path:'/system/api',
+        components: ()=>import('@/views/system/apiPage/index')
+    },
     // 初始化
     {
-        path: '/init-home',
+      path: '/init-home',
-        component: () => import('@/views/init-home/index.vue')
+      component: () => import('@/views/init-home/index.vue')
+    },
+    // 物联卡 iot-card
+    {
+      path: '/iot-card/home',
+      component: () => import('@/views/iot-card/Home/index.vue')
     },
 ]

src/utils/consts.ts

@@ -29,38 +29,21 @@ export const StatusColorEnum = {
   'default': 'default',
 }
 
-class SystemConst {
+export const SystemConst = {
-  static API_BASE = 'api';
+  API_BASE: 'api',
-
+  SYSTEM_NAME: 'Jetlinks',
-  static SYSTEM_NAME = 'Jetlinks';
+  LOGIN: 'LOGIN-STATUS',
-
+  DOC_URL: 'http://doc.jetlinks.cn',
-  static LOGIN = 'LOGIN-STATUS';
+  BASE_CURD_MODAL_VISIBLE: 'BASE_CURD_MODAL_VISIBLE',
-
+  BASE_CURD_CURRENT: 'BASE_CURD_CURRENT',
-  static DOC_URL = 'http://doc.jetlinks.cn';
+  BASE_CURD_MODEL: 'BASE_CURD_MODEL',
-
+  BASE_UPDATE_DATA: 'BASE_UPDATE_DATA',
-  static BASE_CURD_MODAL_VISIBLE = 'BASE_CURD_MODAL_VISIBLE';
+  GLOBAL_WEBSOCKET: 'GLOBAL-WEBSOCKET',
-
+  BIND_USER_STATE: 'false',
-  static BASE_CURD_CURRENT = 'BASE_CURD_CURRENT';
+  REFRESH_METADATA: 'refresh_metadata',
-
+  REFRESH_METADATA_TABLE: 'refresh_metadata_table',
-  static BASE_CURD_MODEL = 'BASE_CURD_MODEL';
+  GET_METADATA: 'get_metadata',
-
+  REFRESH_DEVICE: 'refresh_device',
-  static BASE_UPDATE_DATA = 'BASE_UPDATE_DATA';
+  AMAP_KEY: 'amap_key',
-
+  VERSION_CODE: 'version_code',
-  static GLOBAL_WEBSOCKET = 'GLOBAL-WEBSOCKET';
-
-  static BIND_USER_STATE = 'false';
-
-  static REFRESH_METADATA = 'refresh_metadata';
-
-  static REFRESH_METADATA_TABLE = 'refresh_metadata_table';
-
-  static GET_METADATA = 'get_metadata';
-
-  static REFRESH_DEVICE = 'refresh_device';
-
-  static AMAP_KEY = 'amap_key';
-
-  static Version_Code = 'version_code';
 }
-
-export default SystemConst;

src/views/demo/table/index.vue

@@ -1,32 +1,7 @@
 <template>
     <div class="box">
         <JTable 
-            :columns="[
+            :columns="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
-                }   
-            ]"
-            :actions="actions"
             :request="request"
             :rowSelection="{
                 selectedRowKeys: _selectedRowKeys,
@@ -38,14 +13,21 @@
                 <a-button type="primary">新增</a-button>
             </template>
             <template #card="slotProps">
-                <CardBox :value="slotProps" @click="handleClick" :actions="slotProps.actions" v-bind="slotProps.row" :active="_selectedRowKeys.includes(slotProps.row.id)">
+                <CardBox 
+                    :value="slotProps" 
+                    @click="handleClick" 
+                    :actions="getActions(slotProps)" 
+                    v-bind="slotProps" 
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.state ? 'success' : 'error'"
+                >
                     <template #img>
                         <slot name="img">
                             <img :src="getImage('/device-product.png')" />
                         </slot>
                     </template>
                     <template #content>
-                         <h3>{{slotProps.row.name}}</h3>
+                         <h3>{{slotProps.name}}</h3>
                          <a-row>
                             <a-col :span="12">
                                 <div class="card-item-content-text">
@@ -53,27 +35,41 @@
                                 </div>
                                 <div>直连设备</div>
                             </a-col>
-                            <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.row.id}}</a>
+                <a>{{slotProps.id}}</a>
             </template>
             <template #action="slotProps">
                 <a-space :size="16">
-                    <a-tooltip v-for="i in slotProps.actions" :key="i.key" v-bind="i.tooltip">
+                    <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 style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
+                            <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.row)">
+                        <a-button style="padding: 0" type="link" v-else @click="i.onClick && i.onClick(slotProps)">
-                            <AIcon :type="i.icon" />
+                            <a-button :disabled="i.disabled" style="padding: 0" type="link"><AIcon :type="i.icon" /></a-button>
                         </a-button>
                     </a-tooltip>
                 </a-space>
@@ -86,38 +82,34 @@
 import server from "@/utils/request";
 import type { ActionsType } from '@/components/Table/index.vue'
 import { getImage } from '@/utils/comm';
+import { DeleteOutlined } from '@ant-design/icons-vue'
 
 const request = (data: any) => server.post(`/device-product/_query`, data)
-const actions: ActionsType[] = [
+
+const columns = [
     {
-        key: 'edit',
+        title: '名称',
-        // disabled: true,
+        dataIndex: 'name',
-        text: "编辑",
+        key: 'name',
-        tooltip: {
-            title: '编辑'
-        },
-        icon: 'icon-rizhifuwu'
     },
     {
-        key: 'import',
+        title: 'ID',
-        // disabled: true,
+        dataIndex: 'id',
-        text: "导入",
+        key: 'id',
-        tooltip: {
+        scopedSlots: true
-            title: '导入'
-        },
-        icon: 'icon-xiazai'
     },
     {
-        key: 'delete',
+        title: '分类',
-        // disabled: true,
+        dataIndex: 'classifiedName',
-        text: "删除",
+        key: 'classifiedName',
-        tooltip: {
+    },
-            title: '删除'
+    {
-        },
+        title: '操作',
-        popConfirm: {
+        key: 'action',
-            title: '确认删除?'
+        fixed: 'right',
-        },
+        width: 250,
-    }
+        scopedSlots: true
+    }   
 ]
 
 const _selectedRowKeys = ref<string[]>([])
@@ -141,6 +133,46 @@ 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: '导入'
+            },
+            icon: 'icon-xiazai'
+        },
+        {
+            key: 'delete',
+            // disabled: true,
+            text: "删除",
+            disabled: !!data?.state,
+            tooltip: {
+                title: !!data?.state ? '正常的产品不能删除' : '删除'
+            },
+            // popConfirm: {
+            //     title: '确认删除?'
+            // },
+
+            icon: 'icon-huishouzhan'
+        }
+    ]
+}
+
+const p = h('p', 'hi')
+
 </script>
 
 

src/views/home/components/StepCard.vue

@@ -25,6 +25,10 @@
                 :open-number="openAccess"
                 @confirm="againJumpPage"
             />
+            <FuncTestDialog
+                :open-number="openFunc"
+                @confirm="againJumpPage"
+            />
         </div>
     </a-card>
 </template>
@@ -35,6 +39,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 
 import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
+import FuncTestDialog from './dialogs/FuncTestDialog.vue';
 
 import { recommendList } from '../index';
 

src/views/home/components/dialogs/FuncTestDialog.vue

@@ -3,7 +3,7 @@
     <a-modal
         v-model:visible="visible"
         title="选择产品"
-        style="width: 700px"
+        style="width: 1000px"
         @ok="handleOk"
         :getContainer="getContainer"
         :maskClosable="false"
@@ -11,34 +11,31 @@
         <div class="search">
             <a-select
                 v-model:value="form.key"
-                style="width: 100%"
+                style="width: 100px;margin-right: 20px;"
                 :options="productList"
             />
             <a-select
                 v-model:value="form.relation"
-                style="width: 100%"
+                style="width: 100px;margin-right: 20px;"
                 :options="productList"
             />
-            <a-input v-model:value="form.keyValue" allow-clear />
+            <a-input v-model:value="form.keyValue" allow-clear style="width: 230px;margin-right: 50px;" />
 
-            <a-button type="primary" @click="clickSearch">
+            <a-button type="primary" @click="clickSearch" style="margin-right: 10px;">
                 <template #icon><SearchOutlined /></template>
                 搜索
             </a-button>
-            <a-button type="primary" @click="clickReset">
+            <a-button @click="clickReset">
                 <template #icon><reload-outlined /></template>
                 重置
             </a-button>
         </div>
-        <JTable :columns="columns"> 
+        <JTable :columns="columns" model="TABLE"> </JTable>
-            
-        </JTable>
 
         <template #footer>
-            <a-button key="back" @click="visible = false">取消</a-button>
+            <a-button key="back" @click="visible = false
-            <a-button key="submit" type="primary" @click="handleOk"
+            ">取消</a-button>
-                >确认</a-button
+            <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
-            >
         </template>
     </a-modal>
 </template>
@@ -65,10 +62,10 @@ const handleOk = () => {
 watch(
     () => props.openNumber,
     () => {
+        visible.value = true;
         clickReset();
         getOptions();
         clickSearch();
-        visible.value = true;
     },
 );
 
@@ -122,4 +119,11 @@ const selectItem: deviceInfo | {} = {};
 const getList = () => {};
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="less" scoped>
+.func-test-dialog-container {
+    .search {
+        display: flex;
+    }
+}
+
+</style>

src/views/home/index.vue

@@ -6,8 +6,7 @@
             <!-- <InitHome /> -->
             <!-- <DeviceHome /> -->
             <!-- <DevOpsHome /> -->
-            <!-- <ComprehensiveHome /> -->
+            <ComprehensiveHome />
-            <ApiPage />
         </div>
     </div>
 </template>
@@ -17,7 +16,6 @@ import InitHome from './components/InitHome/index.vue';
 import DeviceHome from './components/DeviceHome/index.vue';
 import DevOpsHome from './components/DevOpsHome/index.vue';
 import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
-import ApiPage from '@/views/system/apiPage/index.vue'
 
 </script>
 

src/views/init-home/data/interface.ts

@@ -6,7 +6,7 @@ export interface modalState  {
   port: string; // 本地端口
   publicHost: string; // 公网地址
   publicPort: number | null; // 公网端口
-  rules: Record<string, Rule[]>;
+  
 }
 
 /**基本信息表单 */
@@ -21,17 +21,26 @@ export interface formState  {
 }
 
 /**
- * logo上传表单
+ * 图片上传表单
  */
 export interface logoState  {
   logoValue: string;
   logoLoading: boolean;
+  backLoading: boolean;
+  iconLoading: boolean;
   inLogo: boolean;
   inIcon: boolean;
   inBackground: boolean;
   iconValue: string;
   backValue: string;
+  backSize: number;
+  logoSize: number;
+  imageTypes:Array<string>;
+  iconTypes: Array<string>,
+  beforeLogoUpload:(file: UploadProps['beforeUpload']) => void
   handleChangeLogo:(info: UploadChangeParam ) => void
   beforeBackUpload:(file: UploadProps['beforeUpload']) => void
   changeBackUpload:(info: UploadChangeParam ) => void
+  beforeIconUpload:(file: UploadProps['beforeUpload']) => void
+  changeIconUpload:(info: UploadChangeParam ) => void
 }

src/views/init-home/index.vue

@@ -109,16 +109,44 @@
                                                                 class="upload-image-border-logo"
                                                             >
                                                                 <a-upload
+                                                                    name="file"
+                                                                    :action="
+                                                                        action
+                                                                    "
+                                                                    :headers="
+                                                                        headers
+                                                                    "
                                                                     :showUploadList="
                                                                         false
                                                                     "
+                                                                    :beforeUpload="
+                                                                        beforeLogoUpload
+                                                                    "
                                                                     @change="
                                                                         handleChangeLogo
                                                                     "
+                                                                    :accept="
+                                                                        imageTypes &&
+                                                                        imageTypes.length
+                                                                            ? imageTypes.toString()
+                                                                            : ''
+                                                                    "
                                                                 >
                                                                     <div
                                                                         class="upload-image-content-logo"
                                                                     >
+                                                                        <div
+                                                                            class="loading-logo"
+                                                                            v-if="
+                                                                                logoLoading
+                                                                            "
+                                                                        >
+                                                                            <LoadingOutlined
+                                                                                style="
+                                                                                    font-size: 28px;
+                                                                                "
+                                                                            />
+                                                                        </div>
                                                                         <div
                                                                             class="upload-image"
                                                                             v-if="
@@ -166,7 +194,6 @@
                                                                 </a-upload>
                                                                 <div
                                                                     v-if="
-                                                                        logoValue &&
                                                                         logoLoading
                                                                     "
                                                                 >
@@ -223,10 +250,45 @@
                                                             <div
                                                                 class="upload-image-border-logo"
                                                             >
-                                                                <a-upload>
+                                                                <a-upload
+                                                                    name="file"
+                                                                    :action="
+                                                                        action
+                                                                    "
+                                                                    :headers="
+                                                                        headers
+                                                                    "
+                                                                    :showUploadList="
+                                                                        false
+                                                                    "
+                                                                    :beforeUpload="
+                                                                        beforeIconUpload
+                                                                    "
+                                                                    @change="
+                                                                        changeIconUpload
+                                                                    "
+                                                                    :accept="
+                                                                        iconTypes &&
+                                                                        iconTypes.length
+                                                                            ? iconTypes.toString()
+                                                                            : ''
+                                                                    "
+                                                                >
                                                                     <div
                                                                         class="upload-image-content-logo"
                                                                     >
+                                                                        <div
+                                                                            v-if="
+                                                                                iconLoading
+                                                                            "
+                                                                            class="loading-icon"
+                                                                        >
+                                                                            <LoadingOutlined
+                                                                                style="
+                                                                                    font-size: 28px;
+                                                                                "
+                                                                            />
+                                                                        </div>
                                                                         <div
                                                                             class="upload-image-icon"
                                                                             v-if="
@@ -249,20 +311,7 @@
                                                                         <div
                                                                             v-else
                                                                         >
-                                                                            <div
+                                                                            <div>
-                                                                                v-if="
-                                                                                    logoLoading
-                                                                                "
-                                                                            >
-                                                                                <LoadingOutlined
-                                                                                    style="
-                                                                                        font-size: 28px;
-                                                                                    "
-                                                                                />
-                                                                            </div>
-                                                                            <div
-                                                                                v-else
-                                                                            >
                                                                                 <PlusOutlined
                                                                                     style="
                                                                                         font-size: 28px;
@@ -298,16 +347,40 @@
                                                         class="upload-image-border-back"
                                                     >
                                                         <a-upload
-                                                            @beforeUpload="
+                                                            name="file"
+                                                            :action="action"
+                                                            :headers="headers"
+                                                            :beforeUpload="
                                                                 beforeBackUpload
                                                             "
+                                                            :showUploadList="
+                                                                false
+                                                            "
                                                             @change="
                                                                 changeBackUpload
                                                             "
+                                                            :accept="
+                                                                imageTypes &&
+                                                                imageTypes.length
+                                                                    ? imageTypes.toString()
+                                                                    : ''
+                                                            "
                                                         >
                                                             <div
                                                                 class="upload-image-content-back"
                                                             >
+                                                                <div
+                                                                    v-if="
+                                                                        backLoading
+                                                                    "
+                                                                    class="loading-back"
+                                                                >
+                                                                    <LoadingOutlined
+                                                                        style="
+                                                                            font-size: 28px;
+                                                                        "
+                                                                    />
+                                                                </div>
                                                                 <div
                                                                     class="upload-image"
                                                                     v-if="
@@ -328,18 +401,7 @@
                                                                     点击修改
                                                                 </div>
                                                                 <div v-else>
-                                                                    <div
+                                                                    <div>
-                                                                        v-if="
-                                                                            logoLoading
-                                                                        "
-                                                                    >
-                                                                        <LoadingOutlined
-                                                                            style="
-                                                                                font-size: 28px;
-                                                                            "
-                                                                        />
-                                                                    </div>
-                                                                    <div v-else>
                                                                         <PlusOutlined
                                                                             style="
                                                                                 font-size: 28px;
@@ -349,6 +411,11 @@
                                                                 </div>
                                                             </div>
                                                         </a-upload>
+                                                        <!-- <div v-if="logoValue">
+                                                          <div v-if="logoLoading">
+                                                            <div class="upload-loading-mask"></div>
+                                                          </div>
+                                                        </div> -->
                                                     </div>
                                                 </div>
                                                 <div class="upload-tips">
@@ -499,7 +566,7 @@
                                     width="52vw"
                                     :maskClosable="false"
                                     @cancel="cancel"
-                                    @ok="handleOk"
+                                    @ok="saveCurrentData"
                                     okText="确定"
                                     cancelText="取消"
                                     class="modal-style"
@@ -516,10 +583,10 @@
                                     </div>
                                     <div style="margin-top: 20px">
                                         <a-form
-                                            :model="ModalForm"
+                                            layout="vertical"
-                                            :validate-messages="message"
+                                            :model="modalForm"
                                             ref="formRef"
-                                            :rules="rules"
+                                            :rules="rulesModle"
                                         >
                                             <a-row :span="24" :gutter="24">
                                                 <a-col :span="12">
@@ -543,7 +610,7 @@
                                                         </template>
                                                         <a-input
                                                             v-model:value="
-                                                                ModalForm.host
+                                                                modalForm.host
                                                             "
                                                             :disabled="true"
                                                         />
@@ -570,7 +637,7 @@
                                                         </template>
                                                         <a-input
                                                             v-model:value="
-                                                                ModalForm.publicHost
+                                                                modalForm.publicHost
                                                             "
                                                         >
                                                         </a-input>
@@ -597,9 +664,23 @@
                                                         </template>
                                                         <a-select
                                                             v-model:value="
-                                                                ModalForm.port
+                                                                modalForm.port
                                                             "
-                                                        ></a-select>
+                                                        >
+                                                            <a-select-option
+                                                                v-for="item in optionPorts"
+                                                                :key="item"
+                                                                :value="
+                                                                    item.value
+                                                                "
+                                                                :label="
+                                                                    item.label
+                                                                "
+                                                                >{{
+                                                                    item.label
+                                                                }}</a-select-option
+                                                            >
+                                                        </a-select>
                                                     </a-form-item>
                                                     <a-form-item
                                                         name="publicPort"
@@ -623,7 +704,7 @@
                                                         </template>
                                                         <a-input-number
                                                             v-model:value="
-                                                                ModalForm.publicPort
+                                                                modalForm.publicPort
                                                             "
                                                             style="width: 100%"
                                                         />
@@ -640,6 +721,7 @@
                         type="primary"
                         class="btn-style"
                         @click="submitData"
+                        :loading="isSucessBasic || isSucessInit || isSucessRole"
                         >确定</a-button
                     >
                 </div>
@@ -654,19 +736,38 @@ import {
     ExclamationCircleOutlined,
     LoadingOutlined,
 } from '@ant-design/icons-vue';
-import { ROLEKEYS, RoleData } from './data/RoleData';
+import RoleMenuData, { ROLEKEYS, RoleData } from './data/RoleData';
 import type { Rule } from 'ant-design-vue/es/form';
 import type {
     FormInstance,
     UploadChangeParam,
     UploadProps,
+    Form,
 } from 'ant-design-vue';
 import { modalState, formState, logoState } from './data/interface';
 import BaseMenu from './data/baseMenu';
-import { getSystemPermission, save } from '@/api/initHome';
+import {
+    getSystemPermission,
+    save,
+    addRole,
+    getRoleMenu,
+    updateRoleMenu,
+    getResourcesCurrent,
+    saveNetwork,
+    saveProtocol,
+    getProtocol,
+    saveAccessConfig,
+    saveProduct,
+    saveDevice,
+    changeDeploy,
+    deployDevice,
+} from '@/api/initHome';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { LocalStore } from '@/utils/comm';
+import { message } from 'ant-design-vue';
 const formRef = ref();
 const menuRef = ref();
-const formBasicRef = ref<FormInstance>();
+const formBasicRef = ref();
 /**
  * 表单数据
  */
@@ -710,7 +811,7 @@ const validateUrl = async (_rule: Rule, value: string) => {
         return Promise.reject('请输入公网地址');
     } else {
         var reg = new RegExp(
-            /^(((?!(127\\.0\\.0\\.1)|(localhost)|(10\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3})|(172\\.((1[6-9])|(2\\d)|(3[01]))\\.\\d{1,3}\\.\\d{1,3})|(192\\.168\\.\\d{1,3}\\.\\d{1,3})).)*)(?:(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])\\.){3}(?:\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])$/,
+            /^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4]\d|[0-1]?\d?\d)){3}$/,
         );
         if (!reg.test(value)) {
             return Promise.reject('请输入正确的公网地址');
@@ -731,44 +832,44 @@ const validateNumber = async (_rule: Rule, value: string) => {
         return Promise.resolve();
     }
 };
+
 /**
  * 初始化弹窗表单数据
  */
-const ModalForm = reactive<modalState>({
+const modalForm = reactive<modalState>({
     host: '0.0.0.0',
     port: '',
     publicHost: '',
     publicPort: null,
-    rules: {
-        host: [
-            {
-                required: true,
-                message: '请选择本地地址',
-            },
-        ],
-        port: [
-            {
-                required: true,
-                message: '请选择本地端口',
-            },
-        ],
-        publicHost: [
-            {
-                required: true,
-                validator: validateUrl,
-                trigger: 'change',
-            },
-        ],
-        publicPort: [
-            {
-                required: true,
-                validator: validateNumber,
-                trigger: 'change',
-            },
-        ],
-    },
 });
-const { rules } = toRefs(ModalForm);
+const rulesModle = ref({
+    host: [
+        {
+            required: true,
+            message: '请选择本地地址',
+        },
+    ],
+    port: [
+        {
+            required: true,
+            message: '请选择本地端口',
+        },
+    ],
+    publicHost: [
+        {
+            required: true,
+            validator: validateUrl,
+            trigger: 'change',
+        },
+    ],
+    publicPort: [
+        {
+            required: true,
+            validator: validateNumber,
+            trigger: 'change',
+        },
+    ],
+});
 
 /**
  * 默认打开第一个初始菜单
@@ -777,6 +878,8 @@ const activeKey = ref<string>('1');
 const spinning = ref<boolean>(false);
 const visible = ref<boolean>(false);
 const flag = ref<boolean>(false);
+const action = ref<string>(`${BASE_API_PATH}/file/static`);
+const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
 /**
  * 角色勾选数据
  */
@@ -797,13 +900,6 @@ const showModal = () => {
     }
 };
 
-/**
- * 提交初始数据表单
- */
-const handleOk = async () => {
-    const valid = await formRef.value.validate();
-};
-
 /**
  * 表单取消事件
  */
@@ -817,13 +913,34 @@ const cancel = () => {
 const logoData = reactive<logoState>({
     logoValue: '/public/logo.png',
     logoLoading: false,
+    backLoading: false,
+    iconLoading: false,
     inLogo: false,
     inIcon: false,
     inBackground: false,
+    backSize: 4,
+    logoSize: 1,
     iconValue: '/public/favicon.ico',
     backValue: '/public/images/login.png',
+    imageTypes: ['image/jpeg', 'image/png'],
+    iconTypes: ['image/x-icon'],
     /**
-     * 图片上传改变事件
+     * logo格式校验
+     */
+    beforeLogoUpload: (file) => {
+        const isType = logoData.imageTypes.includes(file.type);
+        if (!isType) {
+            message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+            return false;
+        }
+        const isSize = file.size / 1024 / 1024 < 4;
+        if (!isSize) {
+            message.error(`图片大小必须小于${4}M`);
+        }
+        return isType && isSize;
+    },
+    /*
+     * logo上传改变事件
      */
     handleChangeLogo: (info) => {
         if (info.file.status === 'uploading') {
@@ -838,33 +955,216 @@ const logoData = reactive<logoState>({
     /**
      * 背景图片上传之前
      */
-    beforeBackUpload: (file) => {},
+    beforeBackUpload: (file) => {
+        const isType = logoData.imageTypes.includes(file.type);
+        if (!isType) {
+            message.error(`请上传.jpg.png.jfif.pjp.pjpeg.jpeg格式的图片`);
+            return false;
+        }
+        const isSize = file.size / 1024 / 1024 < 4;
+        if (!isSize) {
+            message.error(`图片大小必须小于${4}M`);
+        }
+        return isType && isSize;
+    },
     /**
      * 背景图片发生改变
      */
-    changeBackUpload: (info) => {},
+    changeBackUpload: (info) => {
+        if (info.file.status === 'uploading') {
+            logoData.backLoading = true;
+        }
+        if (info.file.status === 'done') {
+            info.file.url = info.file.response?.result;
+            logoData.backLoading = false;
+            logoData.backValue = info.file.response?.result;
+        }
+    },
+    /**
+     * 上传之前
+     */
+    beforeIconUpload: (file) => {
+        const isType = logoData.iconTypes.includes(file.type);
+        if (!isType) {
+            message.error(`请上传ico格式的图片`);
+            return false;
+        }
+        const isSize = file.size / 1024 / 1024 < 1;
+        if (!isSize) {
+            message.error(`图片大小必须小于${1}M`);
+        }
+        return isType && isSize;
+    },
+    /**
+     * 图标发生改变
+     */
+    changeIconUpload: (info) => {
+        if (info.file.status === 'uploading') {
+            logoData.iconLoading = true;
+        }
+        if (info.file.status === 'done') {
+            info.file.url = info.file.response?.result;
+            logoData.iconLoading = true;
+            logoData.iconValue = info.file.response?.result;
+        }
+    },
 });
 
 const {
     logoValue,
     logoLoading,
+    iconLoading,
+    backLoading,
     inLogo,
     iconValue,
     inIcon,
     inBackground,
     backValue,
     handleChangeLogo,
+    beforeBackUpload,
+    changeBackUpload,
+    beforeLogoUpload,
+    beforeIconUpload,
+    changeIconUpload,
+    imageTypes,
+    iconTypes,
 } = toRefs(logoData);
 /**
  * 提交基础表单
  */
 const basicData = reactive({
+    isSucessBasic: false,
     /**
      * 提交基础表单数据
      */
-    saveBasicInfo: async () => {},
+    saveBasicInfo: async () => {
+        // return new Promise(async (resolve) => {
+        const vaild = await formBasicRef.value.validate();
+        console.log(vaild, 'vaild ');
+        if (vaild) {
+            const item = [
+                {
+                    scope: 'front',
+                    properties: {
+                        ...form,
+                        apikey: '',
+                        'base-path': '',
+                    },
+                },
+                {
+                    scope: 'amap',
+                    properties: {
+                        api: form.apikey,
+                    },
+                },
+                {
+                    scope: 'paths',
+                    properties: {
+                        'base-path': form.basePath,
+                    },
+                },
+            ];
+            const res = await save(item);
+            if (res.status === 200) {
+                const ico: any = document.querySelector('link[rel="icon"]');
+                if (ico !== null) {
+                    ico.href = form.icon;
+                }
+            } else {
+                basicData.isSucessBasic = true;
+            }
+        } else {
+            basicData.isSucessBasic = true;
+        }
+        // });
+    },
 });
 
+/**
+ * 提交角色数据
+ */
+const roleData = reactive({
+    isSucessRole: false,
+    /**
+     * 根据菜单找角色
+     */
+    findMenuByRole: (menu: any[], code: string): any => {
+        let _item = null;
+        menu.some((item) => {
+            if (item.code === code) {
+                _item = item;
+                return true;
+            }
+
+            if (item.children) {
+                const childrenItem = roleData.findMenuByRole(
+                    item.children,
+                    code,
+                );
+                if (childrenItem) {
+                    _item = childrenItem;
+                    return true;
+                }
+                return false;
+            }
+
+            return null;
+        });
+        return _item;
+    },
+    /**
+     * 保存角色
+     */
+    addRoleData: async () => {
+        return new Promise((resolve) => {
+            if (!keys.value.length) {
+                return resolve(true);
+            }
+            let Count = 0;
+            keys.value.forEach(async (item, index) => {
+                const _itemData = RoleData[item];
+                // 添加该角色
+                const res = await addRole(_itemData);
+                if (res.status === 200) {
+                    const menuTree = await getRoleMenu(res.result.id);
+                    if (menuTree.status === 200) {
+                        const _roleData = (RoleMenuData[item] as []).filter(
+                            (roleItem: any) => {
+                                const _menu = roleData.findMenuByRole(
+                                    menuTree.result,
+                                    roleItem.code,
+                                );
+                                if (_menu) {
+                                    roleItem.id = _menu.id;
+                                    roleItem.parentId = _menu.parentId;
+                                    roleItem.createTime = _menu.createTime;
+                                    return true;
+                                }
+                                return false;
+                            },
+                        );
+                        //更新权限
+                        const roleRes = await updateRoleMenu(res.result.id, {
+                            menus: _roleData,
+                        });
+                        if (roleRes.status === 200) {
+                            Count += 1;
+                        }
+                        if (index === keys.value.length - 1) {
+                            resolve(Count === keys.value.length);
+                        }
+                    } else if (index === keys.value.length - 1) {
+                        resolve(Count === keys.value.length);
+                    }
+                } else if (index === keys.value.length - 1) {
+                    resolve(Count === keys.value.length);
+                    roleData.isSucessRole = true;
+                }
+            });
+        });
+    },
+});
+const { isSucessRole } = toRefs(roleData);
 /**
  * 获取菜单数据
  */
@@ -882,7 +1182,6 @@ const menuDatas = reactive({
             );
             const _count = menuDatas.menuCount(newTree);
             menuDatas.count = _count;
-            console.log(menuDatas.count, 'menuDatas.count');
         }
     },
     /**
@@ -918,16 +1217,118 @@ const menuDatas = reactive({
         }, 0);
     },
 });
-
 const { count } = toRefs(menuDatas);
+/**
+ * 提交初始化数据
+ */
+const initialization = reactive({
+    isSucessInit: false,
+    optionPorts: [],
+    /**
+     * 查询端口数据
+     */
+    getCurrentPort: async () => {
+        const resp = await getResourcesCurrent();
+        const current = resp?.result;
+        const _host =
+            current.find((item: any) => item.host === '0.0.0.0')?.ports[
+                'TCP'
+            ] || [];
+        initialization.optionPorts = _host?.map((p: any) => ({
+            label: p,
+            value: p,
+        }));
+    },
+    /**
+     * 提交初始数据表单
+     */
+
+    saveCurrentData: async () => {
+        // return new Promise(async (resolve) => {
+        const valid = await formRef.value.validate();
+        console.log(valid, 'valid');
+        // if (valid) {
+        //     try {
+        //         // 新增网络组件
+        //         const network = await saveNetwork({
+        //             type: 'MQTT_SERVER',
+        //             shareCluster: true,
+        //             name: 'MQTT网络组件',
+        //             configuration: {
+        //                 host: '0.0.0.0',
+        //                 secure: false,
+        //                 port: modalForm.port,
+        //                 publicHost: modalForm.publicHost,
+        //                 publicPort: modalForm.publicPort,
+        //             },
+        //         });
+        //         // 保存协议
+        //         const protocol = await saveProtocol();
+        //         let protocolItem: any = undefined;
+        //         if (protocol.status === 200) {
+        //             const proid = await getProtocol();
+        //             if (proid.status === 200) {
+        //                 protocolItem = (proid?.result || []).find(
+        //                     (it: any) => it.name === 'JetLinks官方协议',
+        //                 );
+        //             }
+        //         }
+        //         // 新增设备接入网关
+        //         const accessConfig = await saveAccessConfig({
+        //             name: 'MQTT类型设备接入网关',
+        //             provider: 'mqtt-server-gateway',
+        //             protocol: protocolItem?.id,
+        //             transport: 'MQTT',
+        //             channel: 'network',
+        //             channelId: network?.result?.id,
+        //         });
+        //         // 新增产品
+        //         const product = await saveProduct({
+        //             name: 'MQTT产品',
+        //             messageProtocol: protocolItem?.id,
+        //             protocolName: protocolItem?.name,
+        //             transportProtocol: 'MQTT',
+        //             deviceType: 'device',
+        //             accessId: accessConfig.result?.id,
+        //             accessName: accessConfig.result?.name,
+        //             accessProvider: 'mqtt-server-gateway',
+        //         });
+        //         // 新增设备
+        //         const device = await saveDevice({
+        //             name: 'MQTT设备',
+        //             productId: product?.result?.id,
+        //             productName: product?.result?.name,
+        //         });
+        //         if (device.status === 200) {
+        //             changeDeploy(product.result.id);
+        //             deployDevice(device.result.id);
+        //         }
+
+        //         flag.value = true;
+        //         visible.value = false;
+        //     } catch (e) {
+        //         initialization.isSucessInit = true;
+        //         // resolve(false);
+        //     }
+        // }
+        initialization.isSucessInit = true;
+    },
+});
+const { optionPorts, saveCurrentData, isSucessInit } = toRefs(initialization);
+
 /**
  * 初始化
  */
 menuDatas.getSystemPermissionData();
+initialization.getCurrentPort();
 /**
  * 提交所有数据
  */
-const submit = () => {};
+const submitData = () => {
+    initialization.saveCurrentData();
+    roleData.addRoleData();
+    basicData.saveBasicInfo();
+};
 </script>
 <style scoped lang="less">
 .page-container {
@@ -1073,6 +1474,13 @@ const submit = () => {};
                             padding: 8px;
                             background-color: rgba(0, 0, 0, 0.06);
                             cursor: pointer;
+                            .loading-logo {
+                                position: absolute;
+                                top: 50%;
+                            }
+                            .loading-icon {
+                                position: absolute;
+                            }
                             .upload-image {
                                 width: 100%;
                                 height: 100%;
@@ -1132,6 +1540,9 @@ const submit = () => {};
                             padding: 8px;
                             background-color: rgba(0, 0, 0, 0.06);
                             cursor: pointer;
+                            .loading-back {
+                                position: absolute;
+                            }
                             .upload-image {
                                 width: 100%;
                                 height: 100%;

src/views/iot-card/Home/index.vue

@@ -0,0 +1,541 @@
+<!-- 物联卡-首页 -->
+<template>
+  <div class="page-container">
+    <a-row :gutter="24">
+      <a-col :span="14">
+        <div class="home-guide">
+          <Guide title="物联卡引导"></Guide>
+          <div
+            class="home-guide-items"
+            :style="`grid-template-columns: repeat(${
+              guideList ? guideList.length : 1
+            }, 1fr);`"
+          >
+            <div
+              v-for="(item, index) in guideList"
+              :key="index"
+              class="home-guide-item step-bar arrow-2 pointer"
+              @click="jumpPage(item)"
+            >
+              <div class="item-english">{{ item.english }}</div>
+              <div class="item-title">{{ item.name }}</div>
+              <div class="item-index">
+                <img :src="Image[index + 1]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="10">
+        <div class="home-statistics">
+          <Guide title="基础统计">
+            <template #extra>
+              <span class="extra-text">详情</span>
+            </template>
+          </Guide>
+          <div class="home-statistics-body">
+            <div class="home-guide-item">
+              <div class="item-english">昨日流量统计</div>
+              <div class="item-title">{{ currentSource }} M</div>
+              <div
+                class="item-index-echarts"
+                style="height: 75px; width: 110px"
+              >
+                <div class="chart" ref="todayFlowChart"></div>
+              </div>
+            </div>
+            <div class="home-guide-item">
+              <div class="item-english">物联卡</div>
+              <div class="item-content">
+                <div
+                  v-for="iten in pieChartData"
+                  :key="iten.key"
+                  class="item-node"
+                >
+                  <div class="item-node-text">
+                    {{ iten.value }}
+                  </div>
+                  <div :class="`state ${iten.className}`">
+                    {{ iten.name }}
+                  </div>
+                </div>
+              </div>
+              <div
+                class="item-index-echarts"
+                style="height: 75px; width: 110px"
+              >
+                <div class="chart" ref="iotCardChart"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="24" style="min-height: 580px">
+        <div class="home-body">
+          <Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
+          <div class="home-body-img">
+            <img :src="getImage('/iot-card/iotcard-home.png')" />
+          </div>
+        </div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getImage } from '@/utils/comm';
+import Guide from '../components/Guide.vue';
+import { message } from 'ant-design-vue';
+import moment from 'moment';
+import { queryFlow, list } from '@/api/iot-card/home';
+import * as echarts from 'echarts';
+
+const router = useRouter();
+const { proxy } = <any>getCurrentInstance();
+
+interface GuideItemProps {
+  key: string;
+  name: string;
+  english: string;
+  url: string;
+  param?: Record<string, any>;
+  index?: number;
+  auth: boolean;
+}
+
+const Image = {
+  1: getImage('/home/1.png'),
+  2: getImage('/home/2.png'),
+  3: getImage('/home/3.png'),
+};
+const guideList = [
+  {
+    key: 'EQUIPMENT',
+    name: '平台对接',
+    english: 'STEP1',
+    auth: '',
+    url: '',
+  },
+  {
+    key: 'SCREEN',
+    name: '物联卡管理',
+    english: 'STEP2',
+    auth: '',
+    url: '',
+    param: { save: true },
+  },
+  {
+    key: 'CASCADE',
+    name: '操作记录',
+    english: 'STEP3',
+    auth: '',
+    url: '',
+  },
+];
+
+const currentSource = ref<number>(0);
+const barChartData = ref<any[]>([]);
+const pieChartData = ref<any[]>([
+  {
+    key: 'using',
+    name: '正常',
+    value: 0,
+    className: 'normal',
+  },
+  {
+    key: 'toBeActivated',
+    name: '未激活',
+    value: 0,
+    className: 'notActive',
+  },
+  {
+    key: 'deactivate',
+    name: '停用',
+    value: 0,
+    className: 'stopped',
+  },
+]);
+
+const jumpPage = (data: GuideItemProps) => {
+  if (data.url && data.auth) {
+    router.push(`${data.url}`, data.param);
+  } else {
+    message.warning('暂无权限，请联系管理员');
+  }
+};
+
+/**
+ * 获取昨日流量消耗
+ */
+const getTodayFlow = async () => {
+  const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
+  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+  resp.result.map((item: any) => {
+    currentSource.value += parseFloat(item.value.toFixed(2));
+  });
+};
+
+/**
+ * 获取最近15天流量消耗统计图数据
+ */
+const get15DaysTrafficConsumption = async () => {
+  const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
+  const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
+  const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
+  barChartData.value = resp.result
+    .map((item: any) => ({
+      ...item,
+    }))
+    .reverse();
+  createBarChart();
+};
+
+/**
+ * 获取物联卡状态数据
+ */
+const getStateCard = async () => {
+  Promise.all(
+    pieChartData.value.map((item) => {
+      const params = {
+        terms: [
+          {
+            terms: [
+              {
+                column: 'cardStateType',
+                termType: 'eq',
+                value: item.key,
+              },
+            ],
+          },
+        ],
+      };
+      return list(params);
+    }),
+  )
+    .then((resp) => {
+      resp.forEach((i: any, index) => {
+        if (i.success) {
+          pieChartData.value[index].value = i.result.total;
+        }
+      });
+      createPieChart();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+/**
+ * 最近15天流量消耗统计图
+ */
+const createBarChart = () => {
+  const myChart = echarts.init(proxy.$refs.todayFlowChart);
+
+  const options = {
+    tooltip: {},
+    xAxis: {
+      show: false,
+      data: barChartData.value.map((m) => m.date),
+    },
+    yAxis: {
+      show: false,
+    },
+    series: [
+      {
+        name: '流量消耗',
+        type: 'bar',
+        color: '#FACD89',
+        // barWidth: '5%', // 设单柱状置宽度
+        showBackground: true, //设置柱状的背景虚拟
+        data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
+      },
+    ],
+  };
+  myChart.setOption(options);
+  window.addEventListener('resize', function () {
+    myChart.resize();
+  });
+};
+/**
+ * 物联卡饼图
+ */
+const createPieChart = () => {
+  nextTick(() => {
+    const myChart = echarts.init(proxy.$refs.iotCardChart);
+
+    const options = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {c} ({d}%)',
+      },
+      color: ['#85a5ff', '#f29b55', '#c4c4c4'],
+      series: [
+        {
+          name: '',
+          type: 'pie',
+          avoidLabelOverlap: true, //是否启用防止标签重叠策略
+          radius: ['50%', '90%'],
+          center: ['50%', '50%'],
+          itemStyle: {
+            borderColor: 'rgba(255,255,255,1)',
+            borderWidth: 2,
+          },
+          label: {
+            normal: {
+              show: false,
+            },
+          },
+          data: pieChartData.value,
+        },
+      ],
+    };
+    myChart.setOption(options);
+    window.addEventListener('resize', function () {
+      myChart.resize();
+    });
+  });
+};
+
+watch(
+  barChartData.value,
+  () => {
+    createBarChart();
+  },
+  { deep: true },
+);
+
+getTodayFlow();
+get15DaysTrafficConsumption();
+getStateCard();
+</script>
+
+<style scoped lang="less">
+.home-base {
+  position: relative;
+  padding: 24px 16px;
+  background-color: #fff;
+}
+
+.home-guide {
+  margin-bottom: 24px;
+  padding: 24px 16px;
+  background-color: #fff;
+
+  .home-guide-items {
+    display: grid;
+    grid-column-gap: 56px;
+  }
+}
+
+.home-guide-item {
+  position: relative;
+  padding: 16px;
+  background: linear-gradient(
+    135.62deg,
+    #f6f7fd 22.27%,
+    rgba(255, 255, 255, 0.86) 91.82%
+  );
+  border-radius: 2px;
+  box-shadow: 0 4px 18px #efefef;
+  .state {
+    position: relative;
+    padding-left: 8px;
+    &::before {
+      position: absolute;
+      top: 7px;
+      left: 0;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      margin-right: 2px;
+      content: '';
+    }
+    &.normal::before {
+      background: #85a5ff;
+    }
+    &.notActive::before {
+      background: #f29b55;
+    }
+    &.stopped::before {
+      background: #c4c4c4;
+    }
+  }
+
+  &.pointer {
+    cursor: pointer;
+  }
+
+  .item-english {
+    color: #4f4f4f;
+  }
+
+  .item-content {
+    display: flex;
+    margin-top: 15px;
+    width: 80%;
+  }
+
+  .item-node {
+    min-width: 58px;
+    margin-right: 8px;
+    z-index: 1;
+
+    .item-node-text {
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+
+  .item-title {
+    margin: 20px 0;
+    color: @text-color;
+    font-weight: 700;
+    font-size: 20px;
+  }
+
+  .item-index {
+    position: absolute;
+    right: 10%;
+    bottom: 0;
+  }
+
+  .item-index-echarts {
+    .item-index;
+
+    right: 12px;
+    bottom: 5%;
+    z-index: 0;
+    width: 50%;
+
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.home-body {
+  .home-base;
+
+  min-height: 444px;
+  margin-bottom: 24px;
+  // padding-bottom: 26.5%;
+  padding-bottom: 30%;
+  overflow: hidden;
+  border-bottom: 1px solid #2f54eb;
+
+  .home-body-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.home-statistics {
+  .home-base;
+
+  .extra-text {
+    cursor: pointer;
+    color: @primary-color;
+  }
+
+  .home-statistics-body {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 24px;
+  }
+}
+
+.step-item-after {
+  position: absolute;
+  top: 50%;
+  right: -60px;
+  width: 60px;
+  height: 40px;
+  transform: translateY(-50%);
+  content: ' ';
+}
+
+.home-step {
+  .home-base;
+
+  .home-step-items {
+    display: grid;
+    grid-column-gap: 66px;
+
+    .step-item {
+      display: flex;
+      flex-direction: column;
+
+      .step-item-title {
+        position: relative;
+        padding: 16px 24px;
+        color: #333;
+        font-weight: bold;
+        font-size: 14px;
+        background-color: #f8f9fd;
+        cursor: pointer;
+
+        .step-item-img {
+          position: absolute;
+          top: 0;
+          right: 0;
+          z-index: 1;
+          height: 100%;
+
+          img {
+            height: 100%;
+          }
+        }
+
+        > span {
+          position: relative;
+          z-index: 2;
+        }
+      }
+
+      .step-item-content {
+        flex-grow: 1;
+        height: auto;
+        padding: 24px;
+        border-right: 1px solid #e5edf4;
+        border-bottom: 1px solid #e5edf4;
+        border-left: 1px solid #e5edf4;
+      }
+    }
+  }
+}
+
+.step-bar {
+  position: relative;
+
+  &.arrow-1 {
+    &:not(:last-child) {
+      &::after {
+        .step-item-after;
+
+        background: url('/images/home/arrow-1.png') no-repeat center;
+      }
+    }
+  }
+
+  &.arrow-2 {
+    &:not(:last-child) {
+      &::after {
+        .step-item-after;
+
+        background: url('/images/home/arrow-2.png') no-repeat center;
+      }
+    }
+  }
+}
+</style>

src/views/iot-card/components/Guide.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="home-title">
+        <div>{{ title }}</div>
+        <div class="extra-text">
+            <slot name="extra"></slot>
+        </div>
+        <div class="home-title-english">{{ english }}</div>
+    </div>
+</template>
+
+<script setup lang="ts" name="Guide">
+interface guideProps {
+    title: string;
+    english?: string;
+}
+
+const props = defineProps<guideProps>();
+</script>
+
+<style scoped lang="less">
+.home-title {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    padding-left: 18px;
+    font-weight: 700;
+    font-size: 18px;
+
+    &::after {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        background-color: @primary-color;
+        border: 1px solid #b4c0da;
+        transform: translateY(-50%);
+        content: ' ';
+    }
+
+    .extra-text {
+        font-size: 14px;
+        font-weight: 400;
+    }
+
+    .home-title-english {
+        position: absolute;
+        top: 30px;
+        color: rgba(0, 0, 0, 0.3);
+        font-size: 12px;
+    }
+}
+</style>

src/views/system/apiPage/components/ApiDoes.vue

@@ -8,27 +8,27 @@
             </div>
         </div>
 
-        <p style="display: flex; justify-content: space-between">
+        <p>
             <span class="label">请求数据类型</span>
-            <span class="value">{{
+            <span>{{
                 getContent(selectApi.requestBody) ||
                 'application/x-www-form-urlencoded'
             }}</span>
             <span class="label">响应数据类型</span>
-            <span class="value">{{ `["/"]` }}</span>
+            <span>{{ `["/"]` }}</span>
         </p>
 
         <div class="api-card">
             <h5>请求参数</h5>
             <div class="content">
                 <JTable
-                    :columns="columns.request"
+                    :columns="requestCard.columns"
-                    :dataSource="selectApi.parameters"
+                    :dataSource="requestCard.tableData"
                     noPagination
                     model="TABLE"
                 >
                     <template #required="slotProps">
-                        <span>{{ slotProps.row.required + '' }}</span>
+                        <span>{{ Boolean(slotProps.row.required) + '' }}</span>
                     </template>
                     <template #type="slotProps">
                         <span>{{ slotProps.row.schema.type }}</span>
@@ -36,6 +36,39 @@
                 </JTable>
             </div>
         </div>
+        <div class="api-card">
+            <h5>响应状态</h5>
+            <div class="content">
+                <JTable
+                    :columns="responseStatusCard.columns"
+                    :dataSource="responseStatusCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+
+                <a-tabs v-model:activeKey="responseStatusCard.activeKey">
+                    <a-tab-pane
+                        :key="key"
+                        :tab="key"
+                        v-for="key in tabs"
+                    ></a-tab-pane>
+                </a-tabs>
+            </div>
+        </div>
+
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <JTable
+                    :columns="respParamsCard.columns"
+                    :dataSource="respParamsCard.tableData"
+                    noPagination
+                    model="TABLE"
+                >
+                </JTable>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -49,11 +82,21 @@ const props = defineProps({
         type: Object as PropType<apiDetailsType>,
         required: true,
     },
+    schemas: {
+        type: Object,
+        required: true,
+    },
 });
 const { selectApi } = toRefs(props);
 
-const columns = {
+type tableCardType = {
-    request: [
+    columns: object[];
+    tableData: object[];
+    activeKey?: any;
+    getData?: any;
+};
+const requestCard = reactive<tableCardType>({
+    columns: [
         {
             title: '参数名',
             dataIndex: 'name',
@@ -82,13 +125,136 @@ const columns = {
             scopedSlots: true,
         },
     ],
-};
+    tableData: [],
+    getData: () => {
+        requestCard.tableData = props.selectApi.parameters;
+    },
+});
+const responseStatusCard = reactive<tableCardType>({
+    activeKey: '',
+    columns: [
+        {
+            title: '状态码',
+            dataIndex: 'code',
+            key: 'code',
+        },
+        {
+            title: '说明',
+            dataIndex: 'desc',
+            key: 'desc',
+        },
+        {
+            title: 'schema',
+            dataIndex: 'schema',
+            key: 'schema',
+        },
+    ],
+    tableData: [],
+    getData: () => {
+        if (!Object.keys(props.selectApi.responses).length)
+            return (responseStatusCard.tableData = []);
+
+        const tableData = <any>[];
+        Object.entries(props.selectApi.responses || {}).forEach((item: any) => {
+            const desc = item[1].description;
+            const schema = item[1].content['*/*'].schema.$ref?.split('/') || '';
+
+            tableData.push({
+                code: item[0],
+                desc,
+                schema: schema && schema.pop(),
+            });
+        });
+        responseStatusCard.activeKey = tableData[0]?.code;
+        responseStatusCard.tableData = tableData;
+    },
+});
+const tabs = computed(() =>
+    responseStatusCard.tableData
+        .map((item: any) => item.code + '')
+        .filter((code: string) => code !== '400'),
+);
+const respParamsCard = reactive<tableCardType>({
+    columns: [
+        {
+            title: '参数名称',
+            dataIndex: 'paramsName',
+        },
+        {
+            title: '参数说明',
+            dataIndex: 'desc',
+        },
+        {
+            title: '类型',
+            dataIndex: 'paramsType',
+        },
+    ],
+    tableData: [],
+    getData: (code: string) => {
+        type schemaObjType = {
+            paramsName: string;
+            paramsType: string;
+            desc: string;
+            children?: schemaObjType[];
+        };
+
+        const schemaName = responseStatusCard.tableData.find(
+            (item: any) => item.code === code,
+        ).schema;
+        const schemas = toRaw(props.schemas);
+        function findData(schemaName: string) {
+            if (!schemaName || !schemas[schemaName]) {
+                return [];
+            }
+            const result: schemaObjType[] = [];
+            const schema = schemas[schemaName];
+            const basicType = ['string', 'integer', 'boolean'];
+            Object.entries(schema.properties).forEach((item: [string, any]) => {
+                const paramsType =
+                    item[1].type ||
+                    (item[1].$ref && item[1].$ref.split('/').pop()) ||
+                    (item[1].items && item[1].items.$ref.split('/').pop()) ||
+                    '';
+                const schemaObj: schemaObjType = {
+                    paramsName: item[0],
+                    paramsType,
+                    desc: item[1].description || '',
+                };
+                if (!basicType.includes(paramsType))
+                    schemaObj.children = findData(paramsType);
+                result.push(schemaObj);
+            });
+            console.log(result);
+
+            return result;
+        }
+
+        respParamsCard.tableData = findData(schemaName);
+        // console.log(respParamsCard.tableData);
+    },
+});
 
-console.log(selectApi.value);
 const getContent = (data: any) => {
-    if (!data) return '';
+    if (data && data.content) {
-    return Object.keys(data.content)[0];
+        return Object.keys(data.content || {})[0];
+    }
+    return '';
 };
+onMounted(() => {
+    requestCard.getData();
+    responseStatusCard.getData();
+});
+watch(
+    () => props.selectApi,
+    () => {
+        requestCard.getData();
+        responseStatusCard.getData();
+    },
+);
+
+watch([() => responseStatusCard.activeKey, () => props.selectApi], (n) => {
+    n[0] && respParamsCard.getData(n[0]);
+});
 </script>
 
 <style lang="less" scoped>
@@ -103,13 +269,25 @@ const getContent = (data: any) => {
 
         .input {
             display: flex;
+            margin: 24px 0;
         }
     }
+    p {
+        display: flex;
+        justify-content: space-between;
+        font-size: 14px;
 
+        .label {
+            font-weight: bold;
+        }
+    }
     .api-card {
+        margin-top: 24px;
         h5 {
             position: relative;
             padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
 
             &::before {
                 position: absolute;
@@ -125,7 +303,6 @@ const getContent = (data: any) => {
         .content {
             padding-left: 10px;
 
-
             :deep(.jtable-body) {
                 padding: 0;
 

src/views/system/apiPage/components/ApiTest.vue

@@ -5,6 +5,7 @@
             <div class="input">
                 <InputCard :value="selectApi.method" />
                 <a-input :value="selectApi?.url" disabled />
+                <span class="send">发送</span>
             </div>
         </div>
     </div>
@@ -36,7 +37,15 @@ const { selectApi } = toRefs(props);
 
         .input {
             display: flex;
+
+            .send {
+                width: 65px;
+                padding: 4px 15px;
+                font-size: 14px;
+                color: #fff;
+                background-color: #1890ff;
+            }
         }
     }
 }
-</style>
+</style>

src/views/system/apiPage/components/ChooseApi.vue

@@ -43,9 +43,9 @@ const columns = [
     },
 ];
 const rowSelection: TableProps['rowSelection'] = {
-    // onChange: (selectedRowKeys, selectedRows) => {
+    onChange: (selectedRowKeys, selectedRows) => {
-    //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-    // },
+    },
 };
 
 const jump = (row:object) => {

src/views/system/apiPage/components/LeftTree.vue

@@ -32,13 +32,14 @@ const getTreeData = () => {
         Promise.all(allPromise).then((values) => {
             values.forEach((item: any, i) => {
                 tree[i].children = combData(item?.paths);
+                tree[i].schemas = item.components.schemas
             });
             treeData.value = tree;
         });
     });
 };
 const clickSelectItem: TreeProps['onSelect'] = (key, node: any) => {
-    emits('select', node.node.dataRef);
+    emits('select', node.node.dataRef, node.node?.parent.node.schemas);
 };
 
 onMounted(() => {

src/views/system/apiPage/index.d.ts

@@ -1,9 +1,11 @@
 export type treeNodeTpye = {
     name: string;
     key: string;
+    schemas?:object;
     link?: string;
     apiList?: object[];
     children?: treeNodeTpye[];
+
 };
 export type methodType = {
     [key: string]: object
@@ -17,6 +19,7 @@ export type apiDetailsType = {
     url: string;
     method: string;
     summary: string;
-    parameters: [];
+    parameters: any[];
     requestBody?: any;
+    responses:object;
 }

src/views/system/apiPage/index.vue

@@ -15,12 +15,12 @@
                     class="api-details"
                     v-show="selectedApi.url && tableData.length > 0"
                 >
-                    <a-button @click="selectedApi = initSelectedApi"
+                    <a-button @click="selectedApi = initSelectedApi" style="margin-bottom: 24px;"
                         >返回</a-button
                     >
                     <a-tabs v-model:activeKey="activeKey" type="card">
                         <a-tab-pane key="does" tab="文档">
-                            <ApiDoes :select-api="selectedApi" />
+                            <ApiDoes :select-api="selectedApi" :schemas="schemas" />
                         </a-tab-pane>
                         <a-tab-pane key="test" tab="调试">
                             <ApiTest :select-api="selectedApi" />
@@ -40,7 +40,8 @@ import ApiDoes from './components/ApiDoes.vue';
 import ApiTest from './components/ApiTest.vue';
 
 const tableData = ref([]);
-const treeSelect = (node: treeNodeTpye) => {
+const treeSelect = (node: treeNodeTpye, nodeSchemas:object = {}) => {
+    schemas.value = nodeSchemas
     if (!node.apiList) return;
     const apiList: apiObjType[] = node.apiList as apiObjType[];
     const table: any = [];
@@ -61,10 +62,14 @@ const treeSelect = (node: treeNodeTpye) => {
 };
 
 const activeKey = ref('does');
-const initSelectedApi = {
+const schemas = ref({});
+const initSelectedApi:apiDetailsType = {
     url: '',
     method: '',
     summary: '',
+    parameters: [],
+    responses: {},
+    requestBody: {}
 };
 const selectedApi = ref<apiDetailsType>(initSelectedApi);