index.vue 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <template>
  2. <el-container v-loading="isAppLoadings" class="hc-layout-box" :class="[!isNullES(isLayout) && isLayout === 'no' ? 'is-no-layout' : '']" element-loading-text="获取数据中...">
  3. <el-header class="hc-layout-header">
  4. <div class="hc-layout-header-logo" :style="`width: ${isCollapse ? '0px' : '200px'};`" @click="logoClick">
  5. <!-- <img id="logo-icon" :src="appLogoIcon" alt=""> -->
  6. <span v-show="!isCollapse" class="logo-name">计量系统</span>
  7. </div>
  8. <div class="header-top-collapse-bar" @click="collapseChange">
  9. <HcIcon v-if="isCollapse" name="menu-unfold" />
  10. <HcIcon v-else name="menu-fold" />
  11. </div>
  12. <div class="header-top-menu-bar">
  13. <HcTopMenuBar :msg-count="taskCount" @load="topMenuLoad" @change="topMenuChange" />
  14. </div>
  15. <div class="header-content-bar">
  16. <HcCascader @send="cascaderSend" @change="cascaderChange" />
  17. <hc-upload-bar />
  18. <HelpInfoBar />
  19. <ConfigBar />
  20. <UserInfoBar @load="userInfoLoad" />
  21. </div>
  22. </el-header>
  23. <el-container class="hc-layout-container">
  24. <el-aside v-if="isAsideMenu" class="hc-layout-aside" :class="[isCollapse ? 'is-collapse' : '']" :width="isCollapse ? '90px' : '200px'">
  25. <MenuBar :collapse="isCollapse" :cur="menuBarKey" :datas="menuBarData" :msg-count="taskCount" @change="menuBarChange" />
  26. </el-aside>
  27. <el-main class="hc-layout-main">
  28. <div class="hc-router-menu-bar">
  29. <RouterMenu @load="routerMenuLoad" />
  30. </div>
  31. <div id="hc-main-box" class="hc-main-page">
  32. <div class="hc-main-body">
  33. <router-view v-if="reloadRouter" v-slot="{ Component }">
  34. <transition name="fade-transform">
  35. <keep-alive :max="10">
  36. <component :is="Component" :msg-count="taskCount" />
  37. </keep-alive>
  38. </transition>
  39. </router-view>
  40. </div>
  41. </div>
  42. </el-main>
  43. </el-container>
  44. <hc-reminder v-model="isReminderShow" :text="isReminderText" />
  45. </el-container>
  46. </template>
  47. <script setup>
  48. import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
  49. import { useRoute, useRouter } from 'vue-router'
  50. import { getObjValue, isNullES, useClick } from 'js-fast-way'
  51. import { HcSocket } from '~src/plugins/HcSocket'
  52. import { HcAnnouncement } from 'hc-vue3-ui'
  53. import { useAppStore } from '~src/store'
  54. import { initButtons } from '~sto/app'
  55. import { useProject } from '~sto/useProject'
  56. import { getNotification } from '~uti/tools'
  57. import website from '~src/config'
  58. //初始组合式
  59. const router = useRouter()
  60. const useRoutes = useRoute()
  61. const store = useAppStore()
  62. const reloadRouter = ref(false)
  63. const { isAppLoading } = useProject()
  64. //子组件
  65. import HcTopMenuBar from './modules/HcTopMenu.vue'
  66. import HcCascader from './modules/Cascader.vue'
  67. import UserInfoBar from './modules/UserInfoBar.vue'
  68. import HelpInfoBar from './modules/HelpInfoBar.vue'
  69. import ConfigBar from './modules/ConfigBar.vue'
  70. import RouterMenu from './modules/RouterMenu.vue'
  71. import MenuBar from '~src/layout/modules/MenuBar.vue'
  72. //菜单数据
  73. const menuBarKey = ref('')
  74. const menuBarData = ref([])
  75. const isLayout = ref('')
  76. //渲染完成
  77. onMounted(() => {
  78. const layout = useRoutes?.query?.layout, layout2 = store.isLayout
  79. isLayout.value = layout ?? layout2
  80. annRefs.value = []
  81. initButtons()
  82. })
  83. //监听layout
  84. watch(() => [useRoutes?.query?.layout, store.isLayout], ([layout, layout2]) => {
  85. isLayout.value = layout ?? layout2
  86. }, { deep: true })
  87. //监听项目信息变化
  88. const isAppLoadings = ref(true)
  89. watch(() => isAppLoading.value, (res) => {
  90. if (!website.localModel) {
  91. reloadRouter.value = res
  92. isAppLoadings.value = !res
  93. } else {
  94. if (res) {
  95. setTimeout(() => {
  96. isAppLoadings.value = false
  97. }, 1000)
  98. } else {
  99. isAppLoadings.value = true
  100. }
  101. }
  102. }, { immediate:true })
  103. //路由信息
  104. const routerMenuLoad = ({ key }) => {
  105. menuBarKey.value = key
  106. }
  107. // 是否折叠
  108. const isCollapse = ref(false)
  109. const collapseChange = () => {
  110. const bool = !isCollapse.value
  111. isCollapse.value = bool
  112. store.setCollapse(bool)
  113. }
  114. //顶部菜单导航
  115. const isAsideMenu = ref(true)
  116. const topMenuLoad = () => {
  117. isAsideMenu.value = false
  118. }
  119. //顶部菜单导航被点击
  120. const topMenuChange = (data) => {
  121. if (!isNullES(data)) {
  122. menuBarData.value = data
  123. isAsideMenu.value = true
  124. }
  125. }
  126. //菜单被点击
  127. const menuBarChange = ({ code }) => {
  128. menuBarKey.value = code
  129. router.push({ name: code })
  130. }
  131. //项目合同段的ID
  132. let socket
  133. const taskCount = ref(0)
  134. const cascaderSend = async ({ projectId, contractId }) => {
  135. await useClick()
  136. if (isNullES(contractId)) {
  137. //本地模式
  138. if (website.localModel) {
  139. window.$message?.error('项目信息不存在,请联系管理员')
  140. reloadRouter.value = false
  141. }
  142. return
  143. }
  144. //本地模式
  145. if (website.localModel) {
  146. setTimeout(() => {
  147. reloadRouter.value = true
  148. }, 1000)
  149. } else {
  150. reloadRouter.value = true
  151. }
  152. //链接webSocket
  153. if (!isNullES(socket)) socket.close()
  154. socket = new HcSocket({ projectId, contractId, userId: userId.value }, (res) => {
  155. socketData(res?.data)
  156. })
  157. }
  158. //长链接消息
  159. let annUpdateRef
  160. const annRefs = ref([])
  161. const isReminderShow = ref(false)
  162. const isReminderText = ref('')
  163. const socketData = async (res) => {
  164. console.log('socket:', res)
  165. const { type, data } = getObjValue(res)
  166. if (type === 'msgUpdateMsg') {
  167. closeAnnUpdate()
  168. //内容为空时,代表公告已经取消,由于前面已经关闭,所以不再创建
  169. if (isNullES(data)) return
  170. await nextTick()
  171. //系统更新公告,直接替换
  172. //, time: 'xxx年xx月xx日 xx:xx:xx'
  173. annUpdateRef = await HcAnnouncement({ type: 'update', data: data })
  174. } else if (type === 'msgSystemMsg') {
  175. //内容为空时,代表公告已经取消,由于前面已经关闭,所以不再创建
  176. if (isNullES(data)) {
  177. closeAnnFun()
  178. return
  179. }
  180. await nextTick()
  181. //普通公告,追加公告
  182. const ref = await HcAnnouncement({ type: 'system', data: data })
  183. annRefs.value.push(ref)
  184. } else if (type === 'msgRemind') {
  185. taskCount.value = data ?? 0
  186. } else if (type === 'msgLink') {
  187. if (store.isLogin) {
  188. socket.send('getMsg')
  189. store.setIsLogin(false)
  190. }
  191. } else if (type === 'msgCountDown') {
  192. //倒计时更新
  193. if (isNullES(data) || data <= 0) {
  194. closeReminder()
  195. return
  196. }
  197. isReminderText.value = `系统将在${data}秒后,进行更新`
  198. setReminderText(data - 1)
  199. isReminderShow.value = true
  200. }
  201. }
  202. //倒计时
  203. let timeRef
  204. let startTime
  205. const setReminderText = (totalTime) => {
  206. startTime = performance.now()
  207. const step = () => {
  208. const elapsedTime = Math.floor((performance.now() - startTime) / 1000)
  209. const remainingTime = totalTime - elapsedTime
  210. if (remainingTime < 0) {
  211. closeReminder()
  212. return
  213. }
  214. isReminderText.value = `系统将在${remainingTime}秒后,进行更新`
  215. requestAnimationFrame(step)
  216. }
  217. requestAnimationFrame(step)
  218. }
  219. //关闭倒计时
  220. const closeReminder = () => {
  221. isReminderShow.value = false
  222. if (!isNullES(timeRef)) {
  223. clearTimeout(timeRef)
  224. timeRef = null
  225. }
  226. }
  227. //用户信息
  228. const userId = ref('')
  229. const userInfoLoad = ({ user_id }) => {
  230. userId.value = user_id
  231. }
  232. // 项目切换
  233. const cascaderChange = () => {
  234. reloadRouter.value = false
  235. }
  236. //首页
  237. const logoClick = () => {
  238. router.push({ name: 'home-index' })
  239. }
  240. //关闭普通公告
  241. const closeAnnFun = () => {
  242. const refs = annRefs.value
  243. for (let i = 0; i < refs.length; i++) {
  244. if (!isNullES(refs[i])) {
  245. refs[i]?.close()
  246. }
  247. }
  248. annRefs.value = []
  249. }
  250. //关闭系统更新公告
  251. const closeAnnUpdate = () => {
  252. if (!isNullES(annUpdateRef)) {
  253. annUpdateRef.close()
  254. annUpdateRef = null
  255. }
  256. }
  257. //页面卸载
  258. onUnmounted(() => {
  259. if (!isNullES(socket)) socket.close()
  260. closeAnnFun()
  261. closeAnnUpdate()
  262. })
  263. </script>
  264. <style lang="scss">
  265. @import "./index.scss";
  266. </style>