fireMine.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. <!-- eslint-disable vue/multi-word-component-names -->
  2. <template>
  3. <div class="company-home">
  4. <!-- 顶部标题样式块 -->
  5. <div class="top-bg">
  6. <!-- <div class="main-title">{{ mainTitle }}</div> -->
  7. <NewNav :Title="mainTitle" />
  8. </div>
  9. <!-- 中间样式块 -->
  10. <div class="center-info-bar">
  11. <div class="center-info-btn" @click="redirectTo('/grout-home')">
  12. <div>
  13. <img src="@/assets/images/home-container/configurable/minehome/znzjxt-icon.png" alt="智能注浆系统" />
  14. </div>
  15. <div> 智能注浆系统 </div>
  16. </div>
  17. <div class="center-info-content">
  18. <div class="center-info-block left">
  19. <img src="@/assets/images/home-container/configurable/minehome/jcqy-icon.png" alt="监测区域" />
  20. <span>监测区域</span>
  21. </div>
  22. <div class="center-info-risk">
  23. <div class="risk-notice">自然倾向性等级:容易自燃</div>
  24. <div class="risk-level">{{ data.fireAllMineWarn || '低风险' }}</div>
  25. </div>
  26. <div class="center-info-block right">
  27. <span>火灾风险</span>
  28. <img src="@/assets/images/home-container/configurable/minehome/hzfx-icon.png" alt="火灾风险" />
  29. </div>
  30. </div>
  31. <div class="center-info-btn" @click="redirectTo('/nitrogen-home')">
  32. <div>
  33. <img src="@/assets/images/home-container/configurable/minehome/znzdxt-icon.png" alt="智能注氮系统" />
  34. </div>
  35. <div> 智能注氮系统 </div>
  36. </div>
  37. </div>
  38. <!-- 渲染所有模块 -->
  39. <ModuleMine
  40. v-for="cfg in cfgs"
  41. :key="cfg.deviceType + cfg.moduleName"
  42. :show-style="cfg.showStyle"
  43. :module-data="cfg.moduleData"
  44. :module-name="cfg.moduleName"
  45. :device-type="cfg.deviceType"
  46. :data="data"
  47. :visible="true"
  48. style="z-index: 20"
  49. />
  50. <ModuleBDDual
  51. v-if="cfgA && cfgB"
  52. :show-style="cfgA.showStyle"
  53. :module-data-a="cfgA.moduleData"
  54. :module-name-a="cfgA.moduleName"
  55. :device-type-a="cfgA.deviceType"
  56. :module-data-b="cfgB.moduleData"
  57. :module-name-b="cfgB.moduleName"
  58. :device-type-b="cfgB.deviceType"
  59. :data="data"
  60. :visible="true"
  61. />
  62. <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
  63. <VentModal />
  64. </div>
  65. </div>
  66. </template>
  67. <script lang="ts" setup>
  68. import { computed, onMounted, onUnmounted } from 'vue';
  69. import { useInitConfigs, useInitPage } from './hooks/useInit';
  70. import ModuleMine from './components/ModuleMine.vue';
  71. import ModuleBDDual from './components/ModuleBDDual.vue';
  72. import NewNav from './blue/components/NewNavFire.vue';
  73. import { getDisHome } from './configurable.api';
  74. import { testConfigMineFire } from './configurable.data.mine';
  75. import VentModal from '/@/components/vent/micro/ventModal.vue';
  76. const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
  77. const cfgA = computed<any>(() => configs.value[6]);
  78. const cfgB = computed<any>(() => configs.value[7]);
  79. const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
  80. const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
  81. let interval: ReturnType<typeof setInterval> | undefined;
  82. onMounted(() => {
  83. fetchConfigs('mine_fire').then(() => {
  84. configs.value = testConfigMineFire;
  85. getDisHome({
  86. dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
  87. }).then(updateData);
  88. });
  89. interval = setInterval(() => {
  90. getDisHome({
  91. dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
  92. }).then(updateData);
  93. }, 2000);
  94. });
  95. onUnmounted(() => {
  96. clearInterval(interval);
  97. });
  98. function redirectTo(url) {
  99. window.open(url);
  100. }
  101. </script>
  102. <style lang="less" scoped>
  103. @import '/@/design/theme.less';
  104. @font-face {
  105. font-family: 'douyuFont';
  106. src: url('../../../../assets/font/douyuFont.otf');
  107. }
  108. .company-home {
  109. --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
  110. --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
  111. --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
  112. --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
  113. width: 100%;
  114. height: 100%;
  115. color: @white;
  116. position: relative;
  117. background: var(--image-bg) no-repeat center;
  118. .top-bg {
  119. width: 100%;
  120. height: 73px;
  121. background: var(--image-fire-title) no-repeat top;
  122. position: absolute;
  123. z-index: 1;
  124. ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive {
  125. margin-top: 0;
  126. }
  127. ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active {
  128. margin-top: 0;
  129. }
  130. ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive {
  131. margin-top: 0;
  132. }
  133. ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active {
  134. margin-top: 0;
  135. }
  136. }
  137. // 顶部中间样式块
  138. .center-info-bar {
  139. position: absolute;
  140. top: 80px;
  141. left: 50%;
  142. transform: translateX(-50%);
  143. width: 900px;
  144. height: 90px;
  145. display: flex;
  146. align-items: center;
  147. justify-content: center;
  148. z-index: 2;
  149. background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
  150. padding: 0 20px;
  151. gap: 15px;
  152. .center-info-btn {
  153. display: flex;
  154. flex-direction: column;
  155. align-items: center;
  156. color: #fff;
  157. font-size: 10px;
  158. font-family: 'douyuFont';
  159. font-weight: bold;
  160. cursor: pointer;
  161. user-select: none;
  162. width: 110px;
  163. margin: 0 0 10px 0;
  164. img {
  165. width: 60px;
  166. }
  167. }
  168. .center-info-content {
  169. display: flex;
  170. align-items: center;
  171. justify-content: center;
  172. .center-info-block {
  173. color: #ffffff;
  174. font-size: 18px;
  175. img {
  176. margin: 0 5px;
  177. }
  178. }
  179. .center-info-risk {
  180. color: #fff;
  181. font-weight: bolder;
  182. text-align: center;
  183. .risk-level {
  184. color: #4eabd9;
  185. font-size: 24px;
  186. font-weight: bold;
  187. letter-spacing: 8px;
  188. margin: 10px 0;
  189. }
  190. }
  191. .left {
  192. margin-right: 45px;
  193. }
  194. .right {
  195. margin-left: 45px;
  196. }
  197. }
  198. }
  199. ::v-deep .dane-bd {
  200. background-repeat: no-repeat;
  201. background-position: center;
  202. background-size: 100% 100%;
  203. &.dane-w {
  204. background-image: var(--image-common-border3);
  205. }
  206. .dane-title {
  207. justify-content: space-around;
  208. padding: 0 50px 0 0;
  209. .common-navL {
  210. font-size: 14px;
  211. font-weight: bold;
  212. font-family: 'douyuFont';
  213. }
  214. }
  215. .dane-content {
  216. border: none;
  217. background: none;
  218. padding: 5px 35px 10px 10px;
  219. }
  220. }
  221. }
  222. </style>