- <template>
- <!-- 防汛排涝 辅助决策 -->
- <div class="Fuzhujuece">
- <!-- 左侧辅助决策 -->
- <Transition name="fade_left">
- <AuxiliaryResearchAndJudgmentLeft v-show="!showPanel"></AuxiliaryResearchAndJudgmentLeft>
- </Transition>
- <!-- 右侧调度辅助决策 -->
- <Transition name="fade_right">
- <SchedulingAidedDecisionRight v-show="!showPanel"></SchedulingAidedDecisionRight>
- </Transition>
- <!-- 预警提示 -->
- <div class="warningPrompt flex flex-align-center flex-justcontent-spacebetween" :class="`leveClass${allData.showTipsData.warnGrade}`" v-if="showTips">
- 已启动
- <span class="gradeText">{{
- allData.showTipsData.warnGrade == "1"
- ? "Ⅰ级"
- : allData.showTipsData.warnGrade == "2"
- ? "Ⅱ级"
- : allData.showTipsData.warnGrade == "3"
- ? "Ⅲ级"
- : allData.showTipsData.warnGrade == "4"
- ? "Ⅳ级"
- : allData.showTipsData.warnGrade == "5"
- ? "预警"
- : null
- }}</span>
- 级响应,从:
- <span class="colorR gradeText">{{
- moment(allData.showTipsData.responseStartTime).format(
- "YYYY-MM-DD HH:mm"
- )
- }}</span>
- 起,预计到:<span class="colorR gradeText">{{
- moment(allData.showTipsData.responseEndTime).format("YYYY-MM-DD HH:mm")
- }}</span>
- <div class="flex flex-align-center" v-if="allTime > 1000">
- <el-tooltip
- :content="
- `预计强降雨时间:` +
- moment(allData.showTipsData.expectRainStartTime).format(
- 'YYYY-MM-DD HH:mm'
- )
- "
- placement="top-start"
- >
- <div>准备时间:</div>
- </el-tooltip>
- <div class="flex flex-align-center">
- <span class="radBg">{{ countdown.leftd }}</span
- >天 <span class="radBg">{{ countdown.lefth }}</span
- >时 <span class="radBg">{{ countdown.leftm }}</span
- >分 <span class="radBg">{{ countdown.lefts }}</span
- >秒
- </div>
- </div>
- </div>
- <PanelDisplayHidden @showPanelChange="PanelChange"></PanelDisplayHidden>
- </div>
- </template>
- <script setup name="Fuzhujuece">
- import moment from "moment";
- import bus from "@/bus";
-
- import {ref,reactive,onMounted} from "vue"
- import AuxiliaryResearchAndJudgmentLeft from './AuxiliaryResearchAndJudgmentLeft/index.vue'
- import SchedulingAidedDecisionRight from './SchedulingAidedDecisionRight/index.vue'
- import {
- getRecommendLevel
- } from '@/api/FloodControlAndDrainage.js';
- // 面板控制组件
- import PanelDisplayHidden from "@/views/pictureOnMap/page/components/PanelDisplayHidden.vue";
- const showPanel = ref(false); //面板展开收起
- const PanelChange = (val) => {
- showPanel.value = val;
- };
- const { proxy } = getCurrentInstance();
- let allData = reactive({
- tableData: {},
- isShow: true,
- showTipsData: {},
- setIntervalTime: null,
- });
- let allTime = ref(0);
- let countdown = ref("");
-
- const showTips = ref(false);
-
- // 获取头部提示预警信息
- function getPsLevel() {
- let data = {
- type: 7,
- };
- getRecommendLevel(data).then((res) => {
- if (res && res.code == 200) {
- allData.showTipsData = res.data;
- if (res.data.warnGrade) {
- showTips.value = true;
- } else {
- showTips.value = false;
- }
- allTime.value =
- moment(res.data.expectRainStartTime).diff(
- moment(new Date()),
- "seconds"
- ) * 1000;
- allData.setIntervalTime = setInterval(() => {
- if (allTime.value == 0) {
- clearInterval(allData.setIntervalTime);
- }
- allTime.value = allTime.value - 1000;
- countdown.value = runTime();
- }, 1000);
- }
- });
- }
- function runTime() {
- // console.log(allTime.value);
- let leftd = Math.floor(allTime.value / (1000 * 60 * 60 * 24)), //计算天数
- lefth = Math.floor((allTime.value / (1000 * 60 * 60)) % 24), //计算小时数
- leftm = Math.floor((allTime.value / (1000 * 60)) % 60), //计算分钟数
- lefts = Math.floor((allTime.value / 1000) % 60); //计算秒数
- let munberTimg = {
- leftd: leftd,
- lefth: lefth,
- leftm: leftm,
- lefts: lefts,
- };
- return munberTimg;
- // return leftd + "天" + lefth + "时" + leftm + "分" + lefts + "秒"; //返回倒计时的字符串
- }
- onMounted(() => {
- getPsLevel();
- bus.on("warningRelease", (e) => {
- getPsLevel();
- });
- });
- onBeforeUnmount(() => {
- bus.off("warningRelease");
- });
- onUnmounted(() => {
- clearInterval(allData.setIntervalTime);
- });
- </script>
- <style lang="scss" scoped>
- .Fuzhujuece {
- .warningPrompt {
- position: fixed;
- top: 175px;
- left: 50%;
- width: 763px;
- height: 36px;
- border-radius: 48px;
- transform: translateX(-50%);
- z-index: 20;
- padding: 0 12px;
- font-size: 14px;
- font-weight: 400;
- color: #ffffff;
- span {
- margin: 0 2px;
- }
- .colorR {
-
- }
-
- .radBg {
- display: block;
- line-height: 26px;
- border-radius: 2px;
-
- padding: 0 3px;
- }
- }
- // alertBoxRed
- // alertBoxYellow
- // alertBoxOrange
- // alertBoxBlue
- .leveClass1 {
- background: url('@/assets/images/pictureOnMap/alertBoxRed.png') no-repeat center;
- background-size: 100% 100%;
- .gradeText {
- color: #FF0000;
- }
- .radBg {
- background: linear-gradient(0deg, #F60100 0%, #660000 100%);
- border: 1px solid #EF4054;
-
- }
- }
- .leveClass2 {
- background: url('@/assets/images/pictureOnMap/alertBoxOrange.png') no-repeat center;
- background-size: 100% 100%;
- .gradeText {
- color: #FFA800;
- }
- .radBg {
- background: linear-gradient(0deg, #F60100 0%, #660000 100%);
- border: 1px solid #EF4054;
- }
- }
- .leveClass3 {
- background: url('@/assets/images/pictureOnMap/alertBoxYellow.png') no-repeat center;
- background-size: 100% 100%;
- .gradeText {
- color: #FFF600;
- }
- .radBg {
- background: linear-gradient(0deg, #F6ED03 0%, #676301 100%);
- border: 1px solid #F2EC42;
- }
- }
- .leveClass4,.leveClass5 {
- background: url('@/assets/images/pictureOnMap/alertBoxBlue.png') no-repeat center;
- background-size: 100% 100%;
- .gradeText {
- color: #2CB7FF;
- }
- .radBg {
- background: linear-gradient(0deg, #02A3F7 0%, #014061 100%);
- border: 1px solid #43BBF9;
- }
- }
-
- }
-
- </style>