| 提交 | 用户 | 时间 | ||
| 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) |
| effbd8 | 51 | window.location.href = '/plat/index' |
| H | 52 | } |
| 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] |
| 67 | console.log(appName) | |
| effbd8 | 68 | let id = item.id |
| H | 69 | let type = item.type |
| aed8e1 | 70 | let appCode = item.appCode |
| H | 71 | if (type === 0) { |
| 72 | await getAppMenuList(id, appCode) | |
| effbd8 | 73 | } else { |
| 271781 | 74 | // const data = await AppApi.getAppMenuList(id) |
| H | 75 | // let userInfo = wsCache.get(CACHE_KEY.USER) |
| 76 | // userInfo.menus = data | |
| 77 | // wsCache.set(CACHE_KEY.USER, userInfo) | |
| 78 | // wsSessionCache.set(CACHE_KEY.ROLE_ROUTERS, data) | |
| 79 | localStorage.setItem(appCode, id) | |
| 844cbf | 80 | window.open(item.appDomain + '/index', '_blank') |
| aed8e1 | 81 | // window.open('/plat/shasteel', '_blank') |
| H | 82 | // window.location.href = '/plat/shasteel' |
| 83 | // window.location.href = `/plat/shasteel?key=energy&url=http://localhost:9000&energy=/energy/demo` | |
| effbd8 | 84 | } |
| H | 85 | } |
| 820397 | 86 | |
| H | 87 | </script> |
| effbd8 | 88 | |
| H | 89 | <style lang="scss" scoped> |
| 94d91d | 90 | #title { |
| H | 91 | width: 280px; |
| 92 | height: 51px; | |
| 93 | margin: 30px auto; | |
| 94 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 95 | font-weight: bold; | |
| 96 | font-size: 40px; | |
| 97 | color: #282F3D; | |
| effbd8 | 98 | } |
| 6baa33 | 99 | |
| 94d91d | 100 | #app { |
| H | 101 | margin: 0 96px; |
| 102 | width: 100%; | |
| 103 | } | |
| 6baa33 | 104 | |
| aed8e1 | 105 | .card { |
| 94d91d | 106 | width: 354px; |
| H | 107 | height: 200px; |
| 108 | margin: 0 24px 24px 0; | |
| 6baa33 | 109 | background: linear-gradient(180deg, #E9F0FA 0%, #FFFFFF 100%); |
| 94d91d | 110 | border-radius: 12px 12px 12px 12px; |
| H | 111 | border: 2px solid; |
| 112 | border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 2 2; | |
| 113 | display: inline-block; | |
| 114 | } | |
| 6baa33 | 115 | |
| H | 116 | .card-left { |
| 94d91d | 117 | height: 100px; |
| H | 118 | width: 100px; |
| 119 | float: left; | |
| 120 | margin: 50px 30px; | |
| 121 | } | |
| 6baa33 | 122 | |
| 94d91d | 123 | .card-right { |
| H | 124 | float: right; |
| 125 | margin: 61px 10px; | |
| 126 | } | |
| 6baa33 | 127 | |
| 94d91d | 128 | .app-title { |
| H | 129 | width: 162px; |
| 130 | font-family: Microsoft YaHei, Microsoft YaHei; | |
| 131 | font-weight: bold; | |
| 132 | font-size: 24px; | |
| 133 | color: #282F3D; | |
| 134 | } | |
| 6baa33 | 135 | |
| 94d91d | 136 | .goto-app { |
| H | 137 | width: 96px; |
| 138 | height: 35px; | |
| 139 | margin-top: 5px; | |
| 140 | background: #3A99FD; | |
| 141 | border-radius: 80px 80px 80px 80px; | |
| bc910a | 142 | cursor: pointer; |
| 94d91d | 143 | } |
| 6baa33 | 144 | |
| 94d91d | 145 | .goto-app > div { |
| H | 146 | padding: 6px; |
| 147 | margin-left: 5px; | |
| 148 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 149 | font-weight: 400; | |
| 150 | font-size: 18px; | |
| 151 | color: #FFFFFF; | |
| effbd8 | 152 | } |
| H | 153 | </style> |
