From 60ced2e1fb137f5f7216e1a9719c9931fdfd6c7c Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期五, 20 九月 2024 09:38:44 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
/dev/null | 0
src/views/Home/Index2.vue | 367 ++++-------------------
index.html | 4
package.json | 4
src/utils/lifecycles.ts | 32 ++
src/views/Home/Index.vue | 360 -----------------------
src/views/Home/types.ts | 46 +-
src/views/micro/index.vue | 20 +
src/main.ts | 43 ++
src/utils/micors.ts | 19 +
10 files changed, 210 insertions(+), 685 deletions(-)
diff --git a/index.html b/index.html
index 9e72f92..0d9deba 100644
--- a/index.html
+++ b/index.html
@@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="keywords"
- content="工业互联网平台 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
+ content="工业互联网平台 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台管理系统！"
/>
<meta
name="description"
- content="工业互联网平台 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台开源免费管理系统！"
+ content="工业互联网平台 基于 vue3 + CompositionAPI + typescript + vite3 + element plus 的后台管理系统！"
/>
<title>%VITE_APP_TITLE%</title>
</head>
diff --git a/package.json b/package.json
index 625d410..435c717 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,10 @@
{
"name": "iailab-plat-ui-vue3",
- "version": "1.0.1-sanpshot",
+ "version": "1.0.2-snapshot",
"description": "基于vue3、vite4、element-plus、typesScript",
"author": "iailab",
"private": false,
+ "main": "dist/iailab-plat-ui.min.js",
"scripts": {
"i": "pnpm install",
"dev": "vite --mode env.local",
@@ -74,6 +75,7 @@
"vue-types": "^5.1.1",
"vuedraggable": "^4.1.0",
"web-storage-cache": "^1.1.1",
+ "wujie-vue3": "^1.0.22",
"xml-js": "^1.6.11"
},
"devDependencies": {
diff --git a/public/home.png b/public/home.png
deleted file mode 100644
index ccd4145..0000000
--- a/public/home.png
+++ /dev/null
Binary files differ
diff --git a/src/main.ts b/src/main.ts
index 76c7247..6065dc7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -42,6 +42,14 @@
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
+import WujieVue from 'wujie-vue3'
+
+const { setupApp } = WujieVue
+
+import { micros, getUrl } from '@/utils/micors'
+
+import lifecycles from '@/utils/lifecycles' // 生命周期函数
+
// 创建实例
const setupAll = async () => {
const app = createApp(App)
@@ -64,9 +72,44 @@
app.use(VueDOMPurifyHTML)
+ app.use(WujieVue)
+
app.mount('#app')
}
setupAll()
+// 模拟接口查询，实现动动态子应用加载与动态路由添加
+const setMiro = () =>
+ new Promise((resolve) => {
+ for (const value of micros) {
+ const obj: any = {
+ path: `/${value.name}`,
+ name: value.name,
+ component: () => import(`@/views/micro/index.vue`)
+ }
+ router.addRoute('home', obj)
+ setupApp({
+ name: value.name,
+ url: getUrl(value.name, micros),
+ exec: true,
+ ...lifecycles
+ })
+ }
+ resolve(true)
+ })
+// eslint-disable-next-line require-await
+router.beforeEach(async (to, _from, next) => {
+ if (router.getRoutes().length <= 3) {
+ // 如果路由个数为基础路由，则说明没有进行路由和子应用添加，需要动态添加，添加完成，根据路由地址进行跳转
+ await setMiro()
+ next({
+ path: to.path,
+ query: { ...to.query }
+ })
+ } else {
+ next()
+ }
+})
+
Logger.prettyPrimary(`欢迎使用`, import.meta.env.VITE_APP_TITLE)
diff --git a/src/utils/lifecycles.ts b/src/utils/lifecycles.ts
new file mode 100644
index 0000000..19b5d57
--- /dev/null
+++ b/src/utils/lifecycles.ts
@@ -0,0 +1,32 @@
+// 如果使用wujie-vue
+// import WujieVue from 'wujie-vue3';
+// const { bus } = WujieVue;
+
+const lifecycles = {
+ beforeLoad(appWindow: any) {
+ // 第一次子应用的时候执行
+ // 打开加载动画
+ },
+ beforeMount() {
+ // console.log('beforeMount()-----------------');
+ },
+ afterMount(appWindow: any) {
+ console.log(appWindow)
+ // 自应用第一次挂载到页面上之后执行(后续会缓存,不会执行)
+ // 关闭加载动画
+ },
+ beforeUnmount(appWindow: any) {
+ // console.log('beforeUnmount()-----------------');
+ },
+ afterUnmount(appWindow: any) {
+ // console.log('afterUnmount()-----------------');
+ },
+ activated(appWindow: any) {
+ // console.log(appWindow)
+ },
+ deactivated(appWindow: any) {
+ // console.log('deactivated()-------------------------');
+ }
+}
+
+export default lifecycles
diff --git a/src/utils/micors.ts b/src/utils/micors.ts
new file mode 100644
index 0000000..5234eab
--- /dev/null
+++ b/src/utils/micors.ts
@@ -0,0 +1,19 @@
+export const micros = [
+ {
+ name: 'fast',
+ desc: '脚手架',
+ port: 90,
+ path: 'demo'
+ },
+ {
+ name: 'irs',
+ desc: '脚手架',
+ port: 8002,
+ path: 'home'
+}
+]
+export const getUrl = (appName: string, mciroList = micros) => {
+ const config = mciroList.find((item) => item.name === appName)
+ console.log(config)
+ return `//localhost:${config.port}/${config.name}/${config.path}`
+}
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 18d701c..b824385 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,370 +1,12 @@
<template>
<div>
- <el-card shadow="never">
- <el-skeleton :loading="loading" animated>
- <el-row :gutter="16" justify="space-between">
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
- <div class="flex items-center">
- <el-avatar :src="avatar" :size="70" class="mr-16px">
- <img src="@/assets/imgs/avatar.gif" alt="" />
- </el-avatar>
- <div>
- <div class="text-20px">
- {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
- </div>
- <div class="mt-10px text-14px text-gray-500">
- {{ t('workplace.toady') }}，20℃ - 32℃！
- </div>
- </div>
- </div>
- </el-col>
- <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
- <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
- <div class="px-8px text-right">
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
- <CountTo
- class="text-20px"
- :start-val="0"
- :end-val="totalSate.project"
- :duration="2600"
- />
- </div>
- <el-divider direction="vertical" />
- <div class="px-8px text-right">
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
- <CountTo
- class="text-20px"
- :start-val="0"
- :end-val="totalSate.todo"
- :duration="2600"
- />
- </div>
- <el-divider direction="vertical" border-style="dashed" />
- <div class="px-8px text-right">
- <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
- <CountTo
- class="text-20px"
- :start-val="0"
- :end-val="totalSate.access"
- :duration="2600"
- />
- </div>
- </div>
- </el-col>
- </el-row>
- </el-skeleton>
- </el-card>
+ <h1>这里是应用首页</h1>
</div>
-
- <el-row class="mt-8px" :gutter="8" justify="space-between">
- <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
- <el-card shadow="never">
- <template #header>
- <div class="h-3 flex justify-between">
- <span>{{ t('workplace.project') }}</span>
- <el-link
- type="primary"
- :underline="false"
- href="https://xxxx"
- target="_blank"
- >
- {{ t('action.more') }}
- </el-link>
- </div>
- </template>
- <el-skeleton :loading="loading" animated>
- <el-row>
- <el-col
- v-for="(item, index) in projects"
- :key="`card-${index}`"
- :xl="8"
- :lg="8"
- :md="8"
- :sm="24"
- :xs="24"
- >
- <el-card shadow="hover" class="mr-5px mt-5px">
- <div class="flex items-center">
- <Icon :icon="item.icon" :size="25" class="mr-8px" />
- <span class="text-16px">{{ item.name }}</span>
- </div>
- <div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>
- <div class="mt-12px flex justify-between text-12px text-gray-400">
- <span>{{ item.personal }}</span>
- <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
- </div>
- </el-card>
- </el-col>
- </el-row>
- </el-skeleton>
- </el-card>
-
- <el-card shadow="never" class="mt-8px">
- <el-skeleton :loading="loading" animated>
- <el-row :gutter="20" justify="space-between">
- <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
- <el-card shadow="hover" class="mb-8px">
- <el-skeleton :loading="loading" animated>
- <Echart :options="pieOptionsData" :height="280" />
- </el-skeleton>
- </el-card>
- </el-col>
- <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
- <el-card shadow="hover" class="mb-8px">
- <el-skeleton :loading="loading" animated>
- <Echart :options="barOptionsData" :height="280" />
- </el-skeleton>
- </el-card>
- </el-col>
- </el-row>
- </el-skeleton>
- </el-card>
- </el-col>
- <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
- <el-card shadow="never">
- <template #header>
- <div class="h-3 flex justify-between">
- <span>{{ t('workplace.shortcutOperation') }}</span>
- </div>
- </template>
- <el-skeleton :loading="loading" animated>
- <el-row>
- <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
- <div class="flex items-center">
- <Icon :icon="item.icon" class="mr-8px" />
- <el-link type="default" :underline="false" @click="setWatermark(item.name)">
- {{ item.name }}
- </el-link>
- </div>
- </el-col>
- </el-row>
- </el-skeleton>
- </el-card>
- <el-card shadow="never" class="mt-8px">
- <template #header>
- <div class="h-3 flex justify-between">
- <span>{{ t('workplace.notice') }}</span>
- <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
- </div>
- </template>
- <el-skeleton :loading="loading" animated>
- <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
- <div class="flex items-center">
- <el-avatar :src="avatar" :size="35" class="mr-16px">
- <img src="@/assets/imgs/avatar.gif" alt="" />
- </el-avatar>
- <div>
- <div class="text-14px">
- <Highlight :keys="item.keys.map((v) => t(v))">
- {{ item.type }} : {{ item.title }}
- </Highlight>
- </div>
- <div class="mt-16px text-12px text-gray-400">
- {{ formatTime(item.date, 'yyyy-MM-dd') }}
- </div>
- </div>
- </div>
- <el-divider />
- </div>
- </el-skeleton>
- </el-card>
- </el-col>
- </el-row>
</template>
<script lang="ts" setup>
-import { set } from 'lodash-es'
-import { EChartsOption } from 'echarts'
-import { formatTime } from '@/utils'
-import { useUserStore } from '@/store/modules/user'
-import { useWatermark } from '@/hooks/web/useWatermark'
-import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
-import { pieOptions, barOptions } from './echarts-data'
defineOptions({ name: 'Home' })
-const { t } = useI18n()
-const userStore = useUserStore()
-const { setWatermark } = useWatermark()
-const loading = ref(true)
-const avatar = userStore.getUser.avatar
-const username = userStore.getUser.nickname
-const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
-// 获取统计数
-let totalSate = reactive<WorkplaceTotal>({
- project: 0,
- access: 0,
- todo: 0
-})
-const getCount = async () => {
- const data = {
- project: 40,
- access: 2340,
- todo: 10
- }
- totalSate = Object.assign(totalSate, data)
-}
-
-// 获取项目数
-let projects = reactive<Project[]>([])
-const getProject = async () => {
- const data = [
- {
- name: 'iailab-plat',
- icon: 'akar-icons:github-fill',
- message: 'https://xxxx/iailab-plat',
- personal: 'Spring Boot 单体架构',
- time: new Date()
- },
- {
- name: 'iailab-plat-ui-vue3',
- icon: 'logos:vue',
- message: 'https://xxxx/iailab-plat-ui-vue3',
- personal: 'Vue3 + element-plus',
- time: new Date()
- },
- {
- name: 'iailab-plat-ui-vue2',
- icon: 'logos:vue',
- message: 'https://xxxx/iailab-plat-ui-vue2',
- personal: 'Vue2 + element-ui',
- time: new Date()
- }
- ]
- projects = Object.assign(projects, data)
-}
-
-// 获取通知公告
-let notice = reactive<Notice[]>([])
-const getNotice = async () => {
- const data = [
- {
- title: '系统支持 JDK 8/17/21，Vue 2/3',
- type: '通知',
- keys: ['通知', '8', '17', '21', '2', '3'],
- date: new Date()
- },
- {
- title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
- type: '公告',
- keys: ['公告', 'Boot', 'Cloud'],
- date: new Date()
- },
- {
- title: '全部开源，个人与企业可 100% 直接使用，无需授权',
- type: '通知',
- keys: ['通知', '无需授权'],
- date: new Date()
- },
- {
- title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
- type: '公告',
- keys: ['公告', '最广泛'],
- date: new Date()
- }
- ]
- notice = Object.assign(notice, data)
-}
-
-// 获取快捷入口
-let shortcut = reactive<Shortcut[]>([])
-
-const getShortcut = async () => {
- const data = [
- {
- name: 'Github',
- icon: 'akar-icons:github-fill',
- url: 'github.io'
- },
- {
- name: 'Vue',
- icon: 'logos:vue',
- url: 'vuejs.org'
- },
- {
- name: 'Vite',
- icon: 'vscode-icons:file-type-vite',
- url: 'https://vitejs.dev/'
- },
- {
- name: 'Angular',
- icon: 'logos:angular-icon',
- url: 'github.io'
- },
- {
- name: 'React',
- icon: 'logos:react',
- url: 'github.io'
- },
- {
- name: 'Webpack',
- icon: 'logos:webpack',
- url: 'github.io'
- }
- ]
- shortcut = Object.assign(shortcut, data)
-}
-
-// 用户来源
-const getUserAccessSource = async () => {
- const data = [
- { value: 335, name: 'analysis.directAccess' },
- { value: 310, name: 'analysis.mailMarketing' },
- { value: 234, name: 'analysis.allianceAdvertising' },
- { value: 135, name: 'analysis.videoAdvertising' },
- { value: 1548, name: 'analysis.searchEngines' }
- ]
- set(
- pieOptionsData,
- 'legend.data',
- data.map((v) => t(v.name))
- )
- pieOptionsData!.series![0].data = data.map((v) => {
- return {
- name: t(v.name),
- value: v.value
- }
- })
-}
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
-
-// 周活跃量
-const getWeeklyUserActivity = async () => {
- const data = [
- { value: 13253, name: 'analysis.monday' },
- { value: 34235, name: 'analysis.tuesday' },
- { value: 26321, name: 'analysis.wednesday' },
- { value: 12340, name: 'analysis.thursday' },
- { value: 24643, name: 'analysis.friday' },
- { value: 1322, name: 'analysis.saturday' },
- { value: 1324, name: 'analysis.sunday' }
- ]
- set(
- barOptionsData,
- 'xAxis.data',
- data.map((v) => t(v.name))
- )
- set(barOptionsData, 'series', [
- {
- name: t('analysis.activeQuantity'),
- data: data.map((v) => v.value),
- type: 'bar'
- }
- ])
-}
-
-const getAllApi = async () => {
- await Promise.all([
- getCount(),
- getProject(),
- getNotice(),
- getShortcut(),
- getUserAccessSource(),
- getWeeklyUserActivity()
- ])
- loading.value = false
-}
-
-getAllApi()
</script>
diff --git a/src/views/Home/Index2.vue b/src/views/Home/Index2.vue
index c9429ab..69f23ad 100644
--- a/src/views/Home/Index2.vue
+++ b/src/views/Home/Index2.vue
@@ -1,319 +1,94 @@
<template>
- <el-row :class="prefixCls" :gutter="20" justify="space-between">
- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" :rows="2" animated>
- <template #default>
- <div :class="`${prefixCls}__item flex justify-between`">
- <div>
- <div
- :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
- >
- <Icon :size="40" icon="svg-icon:peoples" />
- </div>
- </div>
- <div class="flex flex-col justify-between">
- <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
- >{{ t('analysis.newUser') }}
- </div>
- <CountTo
- :duration="2600"
- :end-val="102400"
- :start-val="0"
- class="text-right text-20px font-700"
- />
- </div>
- </div>
- </template>
- </el-skeleton>
- </el-card>
- </el-col>
+ <ToolHeader ref="toolHeader" />
+ <div>
+ <h1>IAILAB 平台主页</h1>
+ </div>
+ <el-skeleton :loading="loading" animated>
+ <div id="app" v-for="(item, index) in appList" :key="`dynamics-${index}`">
+ <div class="card" @click="gotoApp(item)">
+ {{item.appName}}
+ </div>
+ </div>
+ </el-skeleton>
- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" :rows="2" animated>
- <template #default>
- <div :class="`${prefixCls}__item flex justify-between`">
- <div>
- <div
- :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
- >
- <Icon :size="40" icon="svg-icon:message" />
- </div>
- </div>
- <div class="flex flex-col justify-between">
- <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
- >{{ t('analysis.unreadInformation') }}
- </div>
- <CountTo
- :duration="2600"
- :end-val="81212"
- :start-val="0"
- class="text-right text-20px font-700"
- />
- </div>
- </div>
- </template>
- </el-skeleton>
- </el-card>
- </el-col>
-
- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" :rows="2" animated>
- <template #default>
- <div :class="`${prefixCls}__item flex justify-between`">
- <div>
- <div
- :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
- >
- <Icon :size="40" icon="svg-icon:money" />
- </div>
- </div>
- <div class="flex flex-col justify-between">
- <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
- >{{ t('analysis.transactionAmount') }}
- </div>
- <CountTo
- :duration="2600"
- :end-val="9280"
- :start-val="0"
- class="text-right text-20px font-700"
- />
- </div>
- </div>
- </template>
- </el-skeleton>
- </el-card>
- </el-col>
-
- <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" :rows="2" animated>
- <template #default>
- <div :class="`${prefixCls}__item flex justify-between`">
- <div>
- <div
- :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
- >
- <Icon :size="40" icon="svg-icon:shopping" />
- </div>
- </div>
- <div class="flex flex-col justify-between">
- <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
- >{{ t('analysis.totalShopping') }}
- </div>
- <CountTo
- :duration="2600"
- :end-val="13600"
- :start-val="0"
- class="text-right text-20px font-700"
- />
- </div>
- </div>
- </template>
- </el-skeleton>
- </el-card>
- </el-col>
- </el-row>
- <el-row :gutter="20" justify="space-between">
- <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" animated>
- <Echart :height="300" :options="pieOptionsData" />
- </el-skeleton>
- </el-card>
- </el-col>
- <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" animated>
- <Echart :height="300" :options="barOptionsData" />
- </el-skeleton>
- </el-card>
- </el-col>
- <el-col :span="24">
- <el-card class="mb-20px" shadow="hover">
- <el-skeleton :loading="loading" :rows="4" animated>
- <Echart :height="350" :options="lineOptionsData" />
- </el-skeleton>
- </el-card>
- </el-col>
- </el-row>
</template>
<script lang="ts" setup>
-import { set } from 'lodash-es'
-import { EChartsOption } from 'echarts'
-import { useDesign } from '@/hooks/web/useDesign'
-import type { AnalysisTotalTypes } from './types'
-import { barOptions, lineOptions, pieOptions } from './echarts-data'
+import * as AppApi from '@/api/system/app'
+import * as LoginApi from '@/api/login'
+import ToolHeader from '@/layout/components/ToolHeader.vue'
+import {Apps} from "@/views/Home/types";
+import {CACHE_KEY, useCache} from "@/hooks/web/useCache";
+import {usePermissionStore} from "@/store/modules/permission";
+import {OAuth2Login, OAuth2TokenVO} from "@/api/system/oauth2/token";
+import * as authUtil from "@/utils/auth";
+import {CommonStatusEnum} from "@/utils/constants";
+import * as UserApi from "@/api/system/user";
+const permissionStore = usePermissionStore()
+const { push } = useRouter()
+
+const formData = ref({
+ grantType: 'password',
+ scope: 'user.read user.write',
+ refreshToken: authUtil.getRefreshToken(),
+ username: authUtil.getLoginForm().username,
+ password: authUtil.getLoginForm().password,
+ redirectUri: 'http://localhost:90',
+})
defineOptions({ name: 'Home2' })
-const { t } = useI18n()
+const { wsCache } = useCache()
+
const loading = ref(true)
-const { getPrefixCls } = useDesign()
-const prefixCls = getPrefixCls('panel')
-const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
-let totalState = reactive<AnalysisTotalTypes>({
- users: 0,
- messages: 0,
- moneys: 0,
- shoppings: 0
-})
+let appList = reactive<Apps[]>([])
-const getCount = async () => {
- const data = {
- users: 102400,
- messages: 81212,
- moneys: 9280,
- shoppings: 13600
- }
- totalState = Object.assign(totalState, data)
-}
-
-// 用户来源
-const getUserAccessSource = async () => {
- const data = [
- { value: 335, name: 'analysis.directAccess' },
- { value: 310, name: 'analysis.mailMarketing' },
- { value: 234, name: 'analysis.allianceAdvertising' },
- { value: 135, name: 'analysis.videoAdvertising' },
- { value: 1548, name: 'analysis.searchEngines' }
- ]
- set(
- pieOptionsData,
- 'legend.data',
- data.map((v) => t(v.name))
- )
- set(pieOptionsData, 'series.data', data)
-}
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
-
-// 周活跃量
-const getWeeklyUserActivity = async () => {
- const data = [
- { value: 13253, name: 'analysis.monday' },
- { value: 34235, name: 'analysis.tuesday' },
- { value: 26321, name: 'analysis.wednesday' },
- { value: 12340, name: 'analysis.thursday' },
- { value: 24643, name: 'analysis.friday' },
- { value: 1322, name: 'analysis.saturday' },
- { value: 1324, name: 'analysis.sunday' }
- ]
- set(
- barOptionsData,
- 'xAxis.data',
- data.map((v) => t(v.name))
- )
- set(barOptionsData, 'series', [
- {
- name: t('analysis.activeQuantity'),
- data: data.map((v) => v.value),
- type: 'bar'
- }
- ])
-}
-
-const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
-
-// 每月销售总额
-const getMonthlySales = async () => {
- const data = [
- { estimate: 100, actual: 120, name: 'analysis.january' },
- { estimate: 120, actual: 82, name: 'analysis.february' },
- { estimate: 161, actual: 91, name: 'analysis.march' },
- { estimate: 134, actual: 154, name: 'analysis.april' },
- { estimate: 105, actual: 162, name: 'analysis.may' },
- { estimate: 160, actual: 140, name: 'analysis.june' },
- { estimate: 165, actual: 145, name: 'analysis.july' },
- { estimate: 114, actual: 250, name: 'analysis.august' },
- { estimate: 163, actual: 134, name: 'analysis.september' },
- { estimate: 185, actual: 56, name: 'analysis.october' },
- { estimate: 118, actual: 99, name: 'analysis.november' },
- { estimate: 123, actual: 123, name: 'analysis.december' }
- ]
- set(
- lineOptionsData,
- 'xAxis.data',
- data.map((v) => t(v.name))
- )
- set(lineOptionsData, 'series', [
- {
- name: t('analysis.estimate'),
- smooth: true,
- type: 'line',
- data: data.map((v) => v.estimate),
- animationDuration: 2800,
- animationEasing: 'cubicInOut'
- },
- {
- name: t('analysis.actual'),
- smooth: true,
- type: 'line',
- itemStyle: {},
- data: data.map((v) => v.actual),
- animationDuration: 2800,
- animationEasing: 'quadraticOut'
- }
- ])
+const getAppList = async () => {
+ const data = await AppApi.getAppList()
+ appList = Object.assign(appList, data)
}
const getAllApi = async () => {
- await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
+ await Promise.all([
+ getAppList()
+ ])
loading.value = false
}
getAllApi()
+
+// 进入应用
+const gotoApp = async (item) => {
+ let appType = item.appType
+ console.log(appType)
+ if(appType === 1) {
+ window.location.href = '/index'
+ } else {
+ // await OAuth2Login(formData.value)
+ window.open('http://localhost:90/login?appid=' + item.appMenuId + "&username=" + authUtil.getLoginForm().username, '_blank')
+ }
+}
+
</script>
<style lang="scss" scoped>
-$prefix-cls: #{$namespace}-panel;
-
-.#{$prefix-cls} {
- &__item {
- &--peoples {
- color: #40c9c6;
- }
-
- &--message {
- color: #36a3f7;
- }
-
- &--money {
- color: #f4516c;
- }
-
- &--shopping {
- color: #34bfa3;
- }
-
- &:hover {
- :deep(.#{$namespace}-icon) {
- color: #fff !important;
- }
-
- .#{$prefix-cls}__item--icon {
- transition: all 0.38s ease-out;
- }
-
- .#{$prefix-cls}__item--peoples {
- background: #40c9c6;
- }
-
- .#{$prefix-cls}__item--message {
- background: #36a3f7;
- }
-
- .#{$prefix-cls}__item--money {
- background: #f4516c;
- }
-
- .#{$prefix-cls}__item--shopping {
- background: #34bfa3;
- }
- }
- }
+#app{
+ width: 300px;
+ height: 140px;
+ display: inline-block;
+ background: transparent;
+}
+.card{
+ width: 300px;
+ height: 100px;
+ padding: 30px;
+ text-align: center;
+ justify-content: center;
+ font-size: 30px;
+ font-weight: bolder;
+ color: blue;
+ background: aliceblue;
+ border-radius: 10px;
}
</style>
diff --git a/src/views/Home/types.ts b/src/views/Home/types.ts
index e6313d3..18bff2b 100644
--- a/src/views/Home/types.ts
+++ b/src/views/Home/types.ts
@@ -25,31 +25,23 @@
url: string
}
-export type RadarData = {
- personal: number
- team: number
- max: number
- name: string
-}
-export type AnalysisTotalTypes = {
- users: number
- messages: number
- moneys: number
- shoppings: number
-}
-
-export type UserAccessSource = {
- value: number
- name: string
-}
-
-export type WeeklyUserActivity = {
- value: number
- name: string
-}
-
-export type MonthlySales = {
- name: string
- estimate: number
- actual: number
+export type Apps = {
+ id: number
+ appCode: string
+ appName: string
+ appDomain: string
+ apiDomain: string
+ appKey: string
+ appSecret: string
+ appGroup: string
+ loadType: string
+ icon: string
+ orderNum: number
+ status: number
+ devId: string
+ devName: string
+ remark: string
+ createTime: Date
+ appType: number
+ appMenuId: number
}
diff --git a/src/views/micro/index.vue b/src/views/micro/index.vue
new file mode 100644
index 0000000..3de28f4
--- /dev/null
+++ b/src/views/micro/index.vue
@@ -0,0 +1,20 @@
+<template>
+ <div class="sub-app">
+ <WujieVue width="100%" height="100%" :name="name" :url="url" :alive="true" sync />
+ </div>
+</template>
+<script lang="ts" setup>
+import { getUrl } from '@/utils/micors'
+const router: any = useRouter()
+const url = computed(() => getUrl(router.currentRoute.value.name))
+const name = computed(() => router.currentRoute.value.name)
+</script>
+<style scoped lang="scss">
+.sub-app {
+ height: 100%;
+ width: 100%;
+ .wujie_iframe {
+ height: 100%;
+ }
+}
+</style>
--
Gitblit v1.9.3