| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| 94d91d | 2 | <div id="title"> |
| H | 3 | <span>工业互联网平台</span> |
| 820397 | 4 | </div> |
| effbd8 | 5 | <el-skeleton :loading="loading" animated> |
| 94d91d | 6 | <div id="app"> |
| H | 7 | <div class="card" v-for="(item, index) in appList" :key="`dynamics-${index}`"> |
| bc910a | 8 | <div> |
| 94d91d | 9 | <img class="card-left" :src="item.icon"/> |
| H | 10 | <div class="card-right"> |
| 11 | <div class="app-title"> | |
| 12 | {{ item.appName }} | |
| 13 | </div> | |
| bc910a | 14 | <div class="goto-app" @click="gotoApp(item)"> |
| 0eebf7 | 15 | <div>进入应用</div> |
| 94d91d | 16 | </div> |
| H | 17 | </div> |
| effbd8 | 18 | </div> |
| H | 19 | </div> |
| 20 | </div> | |
| 21 | </el-skeleton> | |
| 22 | ||
| 820397 | 23 | </template> |
| H | 24 | <script lang="ts" setup> |
| effbd8 | 25 | |
| H | 26 | import * as AppApi from '@/api/system/app' |
| 27 | import {Apps} from "@/views/Home/types"; | |
| 271781 | 28 | import {CACHE_KEY, useCache, useSessionCache} from "@/hooks/web/useCache"; |
| 820397 | 29 | |
| H | 30 | |
| aed8e1 | 31 | defineOptions({name: 'Home'}) |
| 820397 | 32 | |
| aed8e1 | 33 | const {wsCache} = useCache() |
| 271781 | 34 | const {wsSessionCache} = useSessionCache() |
| effbd8 | 35 | |
| H | 36 | const loading = ref(true) |
| 37 | ||
| 38 | let appList = reactive<Apps[]>([]) | |
| 39 | ||
| 40 | const getAppList = async () => { | |
| 41 | const data = await AppApi.getAppList() | |
| 42 | appList = Object.assign(appList, data) | |
| 43 | } | |
| 44 | ||
| aed8e1 | 45 | const getAppMenuList = async (id, appCode) => { |
| effbd8 | 46 | const data = await AppApi.getAppMenuList(id) |
| H | 47 | let userInfo = wsCache.get(CACHE_KEY.USER) |
| 271781 | 48 | // userInfo.menus = data |
| effbd8 | 49 | wsCache.set(CACHE_KEY.USER, userInfo) |
| 271781 | 50 | wsSessionCache.set(CACHE_KEY.ROLE_ROUTERS, data) |
| 9259c2 | 51 | window.location.href = import.meta.env.VITE_BASE_PATH + 'index' |
| effbd8 | 52 | } |
| H | 53 | |
| 54 | const getAllApi = async () => { | |
| 55 | await Promise.all([ | |
| 56 | getAppList() | |
| 57 | ]) | |
| 58 | loading.value = false | |
| 59 | } | |
| 60 | ||
| 61 | getAllApi() | |
| 62 | ||
| 63 | // 进入应用 | |
| 64 | const gotoApp = async (item) => { | |
| aed8e1 | 65 | let path = window.location.pathname |
| H | 66 | let appName = path.split("/")[0] |
| effbd8 | 67 | let id = item.id |
| H | 68 | let type = item.type |
| aed8e1 | 69 | let appCode = item.appCode |
| H | 70 | if (type === 0) { |
| 71 | await getAppMenuList(id, appCode) | |
| effbd8 | 72 | } else { |
| 271781 | 73 | // const data = await AppApi.getAppMenuList(id) |
| H | 74 | // let userInfo = wsCache.get(CACHE_KEY.USER) |
| 75 | // userInfo.menus = data | |
| 76 | // wsCache.set(CACHE_KEY.USER, userInfo) | |
| 77 | // wsSessionCache.set(CACHE_KEY.ROLE_ROUTERS, data) | |
| 78 | localStorage.setItem(appCode, id) | |
| 844cbf | 79 | window.open(item.appDomain + '/index', '_blank') |
| aed8e1 | 80 | // window.open('/plat/shasteel', '_blank') |
| H | 81 | // window.location.href = '/plat/shasteel' |
| 82 | // window.location.href = `/plat/shasteel?key=energy&url=http://localhost:9000&energy=/energy/demo` | |
| effbd8 | 83 | } |
| H | 84 | } |
| 820397 | 85 | |
| H | 86 | </script> |
| effbd8 | 87 | |
| H | 88 | <style lang="scss" scoped> |
| 94d91d | 89 | #title { |
| H | 90 | width: 280px; |
| 91 | height: 51px; | |
| 92 | margin: 30px auto; | |
| 93 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 94 | font-weight: bold; | |
| 95 | font-size: 40px; | |
| 96 | color: #282F3D; | |
| effbd8 | 97 | } |
| 6baa33 | 98 | |
| 94d91d | 99 | #app { |
| H | 100 | margin: 0 96px; |
| 101 | width: 100%; | |
| 102 | } | |
| 6baa33 | 103 | |
| aed8e1 | 104 | .card { |
| 94d91d | 105 | width: 354px; |
| H | 106 | height: 200px; |
| 107 | margin: 0 24px 24px 0; | |
| 6baa33 | 108 | background: linear-gradient(180deg, #E9F0FA 0%, #FFFFFF 100%); |
| 94d91d | 109 | border-radius: 12px 12px 12px 12px; |
| H | 110 | border: 2px solid; |
| 111 | border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 2 2; | |
| 112 | display: inline-block; | |
| 113 | } | |
| 6baa33 | 114 | |
| H | 115 | .card-left { |
| 94d91d | 116 | height: 100px; |
| H | 117 | width: 100px; |
| 118 | float: left; | |
| 119 | margin: 50px 30px; | |
| 120 | } | |
| 6baa33 | 121 | |
| 94d91d | 122 | .card-right { |
| H | 123 | float: right; |
| 124 | margin: 61px 10px; | |
| 125 | } | |
| 6baa33 | 126 | |
| 94d91d | 127 | .app-title { |
| H | 128 | width: 162px; |
| 129 | font-family: Microsoft YaHei, Microsoft YaHei; | |
| 130 | font-weight: bold; | |
| 131 | font-size: 24px; | |
| 132 | color: #282F3D; | |
| 133 | } | |
| 6baa33 | 134 | |
| 94d91d | 135 | .goto-app { |
| H | 136 | width: 96px; |
| 137 | height: 35px; | |
| 138 | margin-top: 5px; | |
| 139 | background: #3A99FD; | |
| 140 | border-radius: 80px 80px 80px 80px; | |
| bc910a | 141 | cursor: pointer; |
| 94d91d | 142 | } |
| 6baa33 | 143 | |
| 94d91d | 144 | .goto-app > div { |
| H | 145 | padding: 6px; |
| 146 | margin-left: 5px; | |
| 147 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 148 | font-weight: 400; | |
| 149 | font-size: 18px; | |
| 150 | color: #FFFFFF; | |
| effbd8 | 151 | } |
| H | 152 | </style> |
