| 提交 | 用户 | 时间 | ||
| 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"; | |
| 28 | import {CACHE_KEY, useCache} from "@/hooks/web/useCache"; | |
| 820397 | 29 | |
| H | 30 | |
| aed8e1 | 31 | defineOptions({name: 'Home'}) |
| 820397 | 32 | |
| aed8e1 | 33 | const {wsCache} = useCache() |
| effbd8 | 34 | |
| H | 35 | const loading = ref(true) |
| 36 | ||
| 37 | let appList = reactive<Apps[]>([]) | |
| 38 | ||
| 39 | const getAppList = async () => { | |
| 40 | const data = await AppApi.getAppList() | |
| 41 | appList = Object.assign(appList, data) | |
| 42 | } | |
| 43 | ||
| aed8e1 | 44 | const getAppMenuList = async (id, appCode) => { |
| effbd8 | 45 | const data = await AppApi.getAppMenuList(id) |
| H | 46 | let userInfo = wsCache.get(CACHE_KEY.USER) |
| 47 | userInfo.menus = data | |
| 48 | wsCache.set(CACHE_KEY.USER, userInfo) | |
| 49 | wsCache.set(CACHE_KEY.ROLE_ROUTERS, data) | |
| 50 | window.location.href = '/plat/index' | |
| 51 | } | |
| 52 | ||
| 53 | const getAllApi = async () => { | |
| 54 | await Promise.all([ | |
| 55 | getAppList() | |
| 56 | ]) | |
| 57 | loading.value = false | |
| 58 | } | |
| 59 | ||
| 60 | getAllApi() | |
| 61 | ||
| 62 | // 进入应用 | |
| 63 | const gotoApp = async (item) => { | |
| aed8e1 | 64 | let path = window.location.pathname |
| H | 65 | let appName = path.split("/")[0] |
| 66 | console.log(appName) | |
| 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 { |
| 3f4d4e | 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 | wsCache.set(CACHE_KEY.ROLE_ROUTERS, data) | |
| 844cbf | 78 | window.open(item.appDomain + '/index', '_blank') |
| aed8e1 | 79 | // window.open('/plat/shasteel', '_blank') |
| H | 80 | // window.location.href = '/plat/shasteel' |
| 81 | // window.location.href = `/plat/shasteel?key=energy&url=http://localhost:9000&energy=/energy/demo` | |
| effbd8 | 82 | } |
| H | 83 | } |
| 820397 | 84 | |
| H | 85 | </script> |
| effbd8 | 86 | |
| H | 87 | <style lang="scss" scoped> |
| 94d91d | 88 | #title { |
| H | 89 | width: 280px; |
| 90 | height: 51px; | |
| 91 | margin: 30px auto; | |
| 92 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 93 | font-weight: bold; | |
| 94 | font-size: 40px; | |
| 95 | color: #282F3D; | |
| effbd8 | 96 | } |
| 6baa33 | 97 | |
| 94d91d | 98 | #app { |
| H | 99 | margin: 0 96px; |
| 100 | width: 100%; | |
| 101 | } | |
| 6baa33 | 102 | |
| aed8e1 | 103 | .card { |
| 94d91d | 104 | width: 354px; |
| H | 105 | height: 200px; |
| 106 | margin: 0 24px 24px 0; | |
| 6baa33 | 107 | background: linear-gradient(180deg, #E9F0FA 0%, #FFFFFF 100%); |
| 94d91d | 108 | border-radius: 12px 12px 12px 12px; |
| H | 109 | border: 2px solid; |
| 110 | border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 2 2; | |
| 111 | display: inline-block; | |
| 112 | } | |
| 6baa33 | 113 | |
| H | 114 | .card-left { |
| 94d91d | 115 | height: 100px; |
| H | 116 | width: 100px; |
| 117 | float: left; | |
| 118 | margin: 50px 30px; | |
| 119 | } | |
| 6baa33 | 120 | |
| 94d91d | 121 | .card-right { |
| H | 122 | float: right; |
| 123 | margin: 61px 10px; | |
| 124 | } | |
| 6baa33 | 125 | |
| 94d91d | 126 | .app-title { |
| H | 127 | width: 162px; |
| 128 | font-family: Microsoft YaHei, Microsoft YaHei; | |
| 129 | font-weight: bold; | |
| 130 | font-size: 24px; | |
| 131 | color: #282F3D; | |
| 132 | } | |
| 6baa33 | 133 | |
| 94d91d | 134 | .goto-app { |
| H | 135 | width: 96px; |
| 136 | height: 35px; | |
| 137 | margin-top: 5px; | |
| 138 | background: #3A99FD; | |
| 139 | border-radius: 80px 80px 80px 80px; | |
| bc910a | 140 | cursor: pointer; |
| 94d91d | 141 | } |
| 6baa33 | 142 | |
| 94d91d | 143 | .goto-app > div { |
| H | 144 | padding: 6px; |
| 145 | margin-left: 5px; | |
| 146 | font-family: Microsoft YaHei UI, Microsoft YaHei UI; | |
| 147 | font-weight: 400; | |
| 148 | font-size: 18px; | |
| 149 | color: #FFFFFF; | |
| effbd8 | 150 | } |
| H | 151 | </style> |
