工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-11-27 fd13b0017518273406ee1a9906c07d079e4a9ac4
提交 | 用户 | 时间
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 }
94d91d 97 #app {
H 98   margin: 0 96px;
99   width: 100%;
100 }
aed8e1 101 .card {
94d91d 102   width: 354px;
H 103   height: 200px;
104   margin: 0 24px 24px 0;
105   background: linear-gradient( 180deg, #E9F0FA 0%, #FFFFFF 100%);
106   border-radius: 12px 12px 12px 12px;
107   border: 2px solid;
108   border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 2 2;
109   display: inline-block;
110 }
111 .card > div{
112   display: inline-block;
113 }
114 .card-left{
115   height: 100px;
116   width: 100px;
117   float: left;
118   margin: 50px 30px;
119 }
120 .card-right {
121   float: right;
122   margin: 61px 10px;
123 }
124 .app-title {
125   width: 162px;
126   font-family: Microsoft YaHei, Microsoft YaHei;
127   font-weight: bold;
128   font-size: 24px;
129   color: #282F3D;
130 }
131 .goto-app {
132   width: 96px;
133   height: 35px;
134   margin-top: 5px;
135   background: #3A99FD;
136   border-radius: 80px 80px 80px 80px;
bc910a 137   cursor: pointer;
94d91d 138 }
H 139 .goto-app > div {
140   padding: 6px;
141   margin-left: 5px;
142   font-family: Microsoft YaHei UI, Microsoft YaHei UI;
143   font-weight: 400;
144   font-size: 18px;
145   color: #FFFFFF;
effbd8 146 }
H 147 </style>