Newer
Older
DH_Apicture / src / views / pictureOnMap / page / FloodControlAndDrainage / Fuzhujuece / index.vue
@zhangqy zhangqy on 29 Nov 6 KB first commit
  1. <template>
  2. <!-- 防汛排涝 辅助决策 -->
  3. <div class="Fuzhujuece">
  4. <!-- 左侧辅助决策 -->
  5. <Transition name="fade_left">
  6. <AuxiliaryResearchAndJudgmentLeft v-show="!showPanel"></AuxiliaryResearchAndJudgmentLeft>
  7. </Transition>
  8. <!-- 右侧调度辅助决策 -->
  9. <Transition name="fade_right">
  10. <SchedulingAidedDecisionRight v-show="!showPanel"></SchedulingAidedDecisionRight>
  11. </Transition>
  12. <!-- 预警提示 -->
  13. <div class="warningPrompt flex flex-align-center flex-justcontent-spacebetween" :class="`leveClass${allData.showTipsData.warnGrade}`" v-if="showTips">
  14. 已启动
  15. <span class="gradeText">{{
  16. allData.showTipsData.warnGrade == "1"
  17. ? "Ⅰ级"
  18. : allData.showTipsData.warnGrade == "2"
  19. ? "Ⅱ级"
  20. : allData.showTipsData.warnGrade == "3"
  21. ? "Ⅲ级"
  22. : allData.showTipsData.warnGrade == "4"
  23. ? "Ⅳ级"
  24. : allData.showTipsData.warnGrade == "5"
  25. ? "预警"
  26. : null
  27. }}</span>
  28. 级响应,从:
  29. <span class="colorR gradeText">{{
  30. moment(allData.showTipsData.responseStartTime).format(
  31. "YYYY-MM-DD HH:mm"
  32. )
  33. }}</span>
  34. 起,预计到:<span class="colorR gradeText">{{
  35. moment(allData.showTipsData.responseEndTime).format("YYYY-MM-DD HH:mm")
  36. }}</span>
  37. <div class="flex flex-align-center" v-if="allTime > 1000">
  38. <el-tooltip
  39. :content="
  40. `预计强降雨时间:` +
  41. moment(allData.showTipsData.expectRainStartTime).format(
  42. 'YYYY-MM-DD HH:mm'
  43. )
  44. "
  45. placement="top-start"
  46. >
  47. <div>准备时间:</div>
  48. </el-tooltip>
  49. <div class="flex flex-align-center">
  50. <span class="radBg">{{ countdown.leftd }}</span
  51. ><span class="radBg">{{ countdown.lefth }}</span
  52. ><span class="radBg">{{ countdown.leftm }}</span
  53. ><span class="radBg">{{ countdown.lefts }}</span
  54. >
  55. </div>
  56. </div>
  57. </div>
  58. <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
  59. </div>
  60. </template>
  61. <script setup name="Fuzhujuece">
  62. import moment from "moment";
  63. import bus from "@/bus";
  64.  
  65. import {ref,reactive,onMounted} from "vue"
  66. import AuxiliaryResearchAndJudgmentLeft from './AuxiliaryResearchAndJudgmentLeft/index.vue'
  67. import SchedulingAidedDecisionRight from './SchedulingAidedDecisionRight/index.vue'
  68. import {
  69. getRecommendLevel
  70. } from '@/api/FloodControlAndDrainage.js';
  71. // 面板控制组件
  72. import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
  73. const showPanel = ref(false); //面板展开收起
  74. const PanelChange = (val) => {
  75. showPanel.value = val;
  76. };
  77. const { proxy } = getCurrentInstance();
  78. let allData = reactive({
  79. tableData: {},
  80. isShow: true,
  81. showTipsData: {},
  82. setIntervalTime: null,
  83. });
  84. let allTime = ref(0);
  85. let countdown = ref("");
  86.  
  87. const showTips = ref(false);
  88.  
  89. // 获取头部提示预警信息
  90. function getPsLevel() {
  91. let data = {
  92. type: 7,
  93. };
  94. getRecommendLevel(data).then((res) => {
  95. if (res && res.code == 200) {
  96. allData.showTipsData = res.data;
  97. if (res.data.warnGrade) {
  98. showTips.value = true;
  99. } else {
  100. showTips.value = false;
  101. }
  102. allTime.value =
  103. moment(res.data.expectRainStartTime).diff(
  104. moment(new Date()),
  105. "seconds"
  106. ) * 1000;
  107. allData.setIntervalTime = setInterval(() => {
  108. if (allTime.value == 0) {
  109. clearInterval(allData.setIntervalTime);
  110. }
  111. allTime.value = allTime.value - 1000;
  112. countdown.value = runTime();
  113. }, 1000);
  114. }
  115. });
  116. }
  117. function runTime() {
  118. // console.log(allTime.value);
  119. let leftd = Math.floor(allTime.value / (1000 * 60 * 60 * 24)), //计算天数
  120. lefth = Math.floor((allTime.value / (1000 * 60 * 60)) % 24), //计算小时数
  121. leftm = Math.floor((allTime.value / (1000 * 60)) % 60), //计算分钟数
  122. lefts = Math.floor((allTime.value / 1000) % 60); //计算秒数
  123. let munberTimg = {
  124. leftd: leftd,
  125. lefth: lefth,
  126. leftm: leftm,
  127. lefts: lefts,
  128. };
  129. return munberTimg;
  130. // return leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒"; //返回倒计时的字符串
  131. }
  132. onMounted(() => {
  133. getPsLevel();
  134. bus.on("warningRelease", (e) => {
  135. getPsLevel();
  136. });
  137. });
  138. onBeforeUnmount(() => {
  139. bus.off("warningRelease");
  140. });
  141. onUnmounted(() => {
  142. clearInterval(allData.setIntervalTime);
  143. });
  144. </script>
  145. <style lang="scss" scoped>
  146. .Fuzhujuece {
  147. .warningPrompt {
  148. position: fixed;
  149. top: 175px;
  150. left: 50%;
  151. width: 763px;
  152. height: 36px;
  153. border-radius: 48px;
  154. transform: translateX(-50%);
  155. z-index: 20;
  156. padding: 0 12px;
  157. font-size: 14px;
  158. font-weight: 400;
  159. color: #ffffff;
  160. span {
  161. margin: 0 2px;
  162. }
  163. .colorR {
  164. }
  165.  
  166. .radBg {
  167. display: block;
  168. line-height: 26px;
  169. border-radius: 2px;
  170.  
  171. padding: 0 3px;
  172. }
  173. }
  174. // alertBoxRed
  175. // alertBoxYellow
  176. // alertBoxOrange
  177. // alertBoxBlue
  178. .leveClass1 {
  179. background: url('@/assets/images/pictureOnMap/alertBoxRed.png') no-repeat center;
  180. background-size: 100% 100%;
  181. .gradeText {
  182. color: #FF0000;
  183. }
  184. .radBg {
  185. background: linear-gradient(0deg, #F60100 0%, #660000 100%);
  186. border: 1px solid #EF4054;
  187.  
  188. }
  189. }
  190. .leveClass2 {
  191. background: url('@/assets/images/pictureOnMap/alertBoxOrange.png') no-repeat center;
  192. background-size: 100% 100%;
  193. .gradeText {
  194. color: #FFA800;
  195. }
  196. .radBg {
  197. background: linear-gradient(0deg, #F60100 0%, #660000 100%);
  198. border: 1px solid #EF4054;
  199. }
  200. }
  201. .leveClass3 {
  202. background: url('@/assets/images/pictureOnMap/alertBoxYellow.png') no-repeat center;
  203. background-size: 100% 100%;
  204. .gradeText {
  205. color: #FFF600;
  206. }
  207. .radBg {
  208. background: linear-gradient(0deg, #F6ED03 0%, #676301 100%);
  209. border: 1px solid #F2EC42;
  210. }
  211. }
  212. .leveClass4,.leveClass5 {
  213. background: url('@/assets/images/pictureOnMap/alertBoxBlue.png') no-repeat center;
  214. background-size: 100% 100%;
  215. .gradeText {
  216. color: #2CB7FF;
  217. }
  218. .radBg {
  219. background: linear-gradient(0deg, #02A3F7 0%, #014061 100%);
  220. border: 1px solid #43BBF9;
  221. }
  222. }
  223.  
  224. }
  225.  
  226. </style>