dust.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <div class="company-home">
  4. <div class="top-bg">
  5. <div class="main-title">{{ mainTitle }}</div>
  6. </div>
  7. <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
  8. <a class="ant-dropdown-link" @click.prevent>
  9. 全矿井通风检测
  10. <CaretDownOutlined />
  11. </a>
  12. <template #overlay>
  13. <MonitorCenter />
  14. </template>
  15. </a-dropdown> -->
  16. <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
  17. <template v-if="isOriginal">
  18. <ModuleOriginal
  19. v-for="cfg in configs"
  20. :key="cfg.deviceType"
  21. :show-style="cfg.showStyle"
  22. :module-data="cfg.moduleData"
  23. :module-name="cfg.moduleName"
  24. :device-type="cfg.deviceType"
  25. :data="data"
  26. :visible="true"
  27. />
  28. </template>
  29. <template v-else-if="isCommon">
  30. <ModuleCommon
  31. v-for="cfg in configs"
  32. :key="cfg.deviceType"
  33. :show-style="cfg.showStyle"
  34. :module-data="cfg.moduleData"
  35. :module-name="cfg.moduleName"
  36. :device-type="cfg.deviceType"
  37. :data="data"
  38. :visible="true"
  39. />
  40. </template>
  41. <template v-else>
  42. <!-- 下面是正常展示的各新版模块 -->
  43. <ModuleEnhanced
  44. v-for="cfg in enhancedConfigs"
  45. :key="cfg.deviceType"
  46. :visible="cfg.visible"
  47. :show-style="cfg.showStyle"
  48. :module-data="cfg.moduleData"
  49. :module-name="cfg.moduleName"
  50. :device-type="cfg.deviceType"
  51. :data="data"
  52. @close="cfg.visible = false"
  53. />
  54. <!-- 下面是用于呼出已隐藏的模块的按钮 -->
  55. <div class="pos-absolute top-70px left-460px z-3">
  56. <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
  57. <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
  58. </div>
  59. </div>
  60. </template>
  61. <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
  62. <VentModal />
  63. </div>
  64. </div>
  65. </template>
  66. <script lang="ts" setup>
  67. import { onMounted, onUnmounted } from 'vue';
  68. // import { CaretDownOutlined } from '@ant-design/icons-vue';
  69. // import MonitorCenter from './components/MonitorCenter.vue';
  70. import { useInitConfigs, useInitPage } from './hooks/useInit';
  71. import ModuleEnhanced from './components/ModuleEnhanced.vue';
  72. import ModuleOriginal from './components/ModuleOriginal.vue';
  73. import ModuleCommon from './components/ModuleCommon.vue';
  74. // import { useRoute } from 'vue-router';
  75. import VentModal from '/@/components/vent/micro/ventModal.vue';
  76. import { getHomeData } from './configurable.api';
  77. import { BDDustMock } from './mock';
  78. // import { testConfigDust } from './configurable.data';
  79. const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
  80. const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能粉尘管控系统');
  81. let interval: number | undefined;
  82. onMounted(() => {
  83. fetchConfigs('dust').then(() => {
  84. // configs.value = testConfigDust;
  85. updateEnhancedConfigs(configs.value);
  86. Promise.resolve(BDDustMock).then(updateData);
  87. // getHomeData({}).then(updateData);
  88. });
  89. // setInterval(() => {
  90. // getHomeData({}).then(updateData);
  91. // }, 60000);
  92. });
  93. onUnmounted(() => {
  94. clearInterval(interval);
  95. });
  96. </script>
  97. <style lang="less" scoped>
  98. @import '/@/design/theme.less';
  99. @font-face {
  100. font-family: 'douyuFont';
  101. src: url('../../../../assets/font/douyuFont.otf');
  102. }
  103. @{theme-deepblue} {
  104. .company-home {
  105. --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
  106. }
  107. }
  108. .company-home {
  109. --image-modal-top: url('@/assets/images/vent/home/modal-top.png');
  110. width: 100%;
  111. height: 100%;
  112. color: @white;
  113. position: relative;
  114. // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
  115. .top-bg {
  116. width: 100%;
  117. height: 56px;
  118. background: var(--image-modal-top) no-repeat center;
  119. position: absolute;
  120. z-index: 1;
  121. .main-title {
  122. height: 56px;
  123. font-family: 'douyuFont';
  124. font-size: 20px;
  125. letter-spacing: 2px;
  126. display: flex;
  127. justify-content: center;
  128. align-items: center;
  129. }
  130. }
  131. // .module-left {
  132. // position: absolute;
  133. // width: 450px;
  134. // height: 280px;
  135. // left: 0;
  136. // }
  137. // .module-right {
  138. // position: absolute;
  139. // width: 450px;
  140. // height: 280px;
  141. // right: 0;
  142. // }
  143. // .module-bottom {
  144. // position: absolute;
  145. // width: 1000px;
  146. // height: 280px;
  147. // }
  148. .module-dropdown {
  149. padding: 10px;
  150. background-image: linear-gradient(to bottom, #036886, #072a40);
  151. border-bottom: 2px solid #3df6ff;
  152. color: #fff;
  153. position: absolute;
  154. top: 70px;
  155. right: 460px;
  156. }
  157. .module-dropdown-original {
  158. padding: 10px;
  159. background-image: linear-gradient(to bottom, #036886, #072a40);
  160. border-bottom: 2px solid #3df6ff;
  161. color: #fff;
  162. position: absolute;
  163. top: 70px;
  164. right: 460px;
  165. }
  166. .module-trigger-button {
  167. color: #fff;
  168. background-image: linear-gradient(to bottom, #036886, #072a40);
  169. border: none;
  170. border-bottom: 2px solid #3df6ff;
  171. }
  172. }
  173. :deep(.loading-box) {
  174. position: unset;
  175. }
  176. </style>