<template>
<!-- 汛情回顾状态框 -->
<div class="rainMapLeng flex flex-align-center" v-if="showRainLegend">
<div class="flex flex-align-center" v-for="i in showRainList" :key="i">
<span :style="{ background: i.color }"></span>{{ i.value }}
</div>
</div>
<div class="timeList">
<div class="colorRadio flex">
<div class="btn blue flex flex-align-center">
<span></span>
<div>小雨</div>
</div>
<div class="btn yellow flex flex-align-center">
<span></span>
<div>中雨</div>
</div>
<div class="btn orange flex flex-align-center">
<span></span>
<div>大雨</div>
</div>
<div class="btn read flex flex-align-center">
<span></span>
<div>暴雨</div>
</div>
</div>
<div class="rainList flex">
请选择最大雨强
<ul class="flex">
<li
@click="changeHourTime(i.key)"
:class="hgEndActive == i.key ? 'active' : ''"
v-for="i in hgEngList"
:key="i.key"
>
{{ i.name }}
</li>
</ul>
</div>
</div>
<div class="timeScheduleBox flex flex-align-center flex-justcontent-spacebetween">
<div class="playBtn" @click="(hgEngPlay = !hgEngPlay), runDayTime()">
<img v-if="hgEngPlay" src="@/assets/images/fhpl/hgp2.png" /><img
v-else
src="@/assets/images/fhpl/hgp1.png"
/>
</div>
<div class="playBg"><div class="playIn" :style="{ width: stepLin }"></div></div>
</div>
<div class="timeScheduleBox flex flex-justcontent-end">
<ul class="playRadio">
<li
v-for="(k, i) in hoursScale"
:key="i"
:class="{
blue: (k.weather == '小雨' && i < stepNum) || (k.weather == '小雨' && k.chuse),
yellow:
(k.weather == '中雨' && i < stepNum) || (k.weather == '中雨' && k.chuse),
orange:
(k.weather == '大雨' && i < stepNum) || (k.weather == '大雨' && k.chuse),
read:
(i < stepNum &&
(k.weather == '暴雨' ||
k.weather == '大暴雨' ||
k.weather == '特大暴雨')) ||
((k.weather == '暴雨' || k.weather == '大暴雨' || k.weather == '特大暴雨') &&
k.chuse),
}"
>
<div>{{ k.time }}</div>
</li>
</ul>
</div>
<div class="timeChart">
<ChartLs />
</div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import ChartLs from "@/views/oneMap/Echarts/ChartLs.vue";
let hgEngPlay = ref(false);
let stepLin = ref("0");
let hgEndActive = ref("");
let showRainList = ref([]);
let hoursScale = ref([]);
let stepNum = ref(0);
const showRainLegend = ref(false);
const ranLeng = [
[
{ value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
{ value: "0.2-5", color: "rgba(7, 213, 118, 1)" },
{ value: "5-25", color: "rgba(38, 129, 240,1)" },
{ value: ">25", color: "rgba(255, 26, 26, 1)" },
],
[
{ value: "0-5", color: "rgba(7, 213, 118, 0)" },
{ value: "5-15", color: "rgba(7, 213, 118, 1)" },
{ value: "15-30", color: "rgba(38, 129, 240,1)" },
{ value: "30-70", color: "rgba(247, 223, 56, 1)" },
{ value: "70-140", color: "rgba(230, 85, 41, 1)" },
{ value: ">140", color: "rgba(255, 26, 26, 1)" },
],
[
{ value: "0-5", color: "rgba(7, 213, 118, 0)" },
{ value: "5-15", color: "rgba(7, 213, 118, 1)" },
{ value: "15-30", color: "rgba(38, 129, 240,1)" },
{ value: "30-70", color: "rgba(247, 223, 56, 1)" },
{ value: "70-140", color: "rgba(230, 85, 41, 1)" },
{ value: ">140", color: "rgba(255, 26, 26, 1)" },
],
[
{ value: "0-10", color: "rgba(7, 213, 118, 0)" },
{ value: "10-25", color: "rgba(7, 213, 118, 1)" },
{ value: "25-50", color: "rgba(38, 129, 240,1)" },
{ value: "50-100", color: "rgba(247, 223, 56, 1)" },
{ value: "100-250", color: "rgba(230, 85, 41, 1)" },
{ value: ">250", color: "rgba(255, 26, 26, 1)" },
],
];
const hgEngList = [
{ key: 1, name: "1小时" },
{ key: 3, name: "3小时" },
{ key: 12, name: "12小时" },
{ key: 24, name: "24小时" },
];
function runDayTime() {
hgEndActive.value = "";
showRainLegend.value = true;
showRainList.value = ranLeng[0];
}
function timeLoop() {
runDayInterval.value = setTimeout(() => {
stepNum.value++;
let levels = ranLeng[0].map((i, idx) => ({
...i,
value: Number(i.value.split("-")[0]),
}));
console.log(
"levels",
levels.map((i) => i.value)
);
});
}
function emptyRun() {
stepLin.value = "0%";
showRainLegend.value = false;
}
function changeHourTime(num) {
hgEndActive.value = num;
showRainLegend.value = true;
showRainList.value =
num == 1 ? ranLeng[0] : num == 3 ? ranLeng[1] : num == 12 ? ranLeng[2] : ranLeng[3];
}
</script>
<style lang="scss" scoped>
.rainMapLeng {
position: absolute;
right: 0px;
bottom: 270px;
background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
height: 40px;
div {
margin: 0 10px;
font-size: 14px;
color: #fff;
cursor: pointer;
&:nth-child(1) {
span {
border: 1px solid #fff;
}
}
span {
display: block;
width: 16px;
height: 16px;
margin-right: 4px;
border-radius: 4px;
}
}
}
.timeList {
padding: 12px 20px 10px;
overflow: hidden;
.colorRadio {
float: left;
.btn {
margin-right: 20px;
span {
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 5px;
}
div {
width: 42px;
line-height: 22px;
border: 1px solid rgba(0, 191, 253, 0);
border-radius: 4px;
text-align: center;
font-weight: 400;
font-size: 14px;
}
&.blue {
span {
background: rgba(0, 191, 253, 1);
}
div {
border-color: rgba(0, 191, 253, 1);
color: rgba(0, 191, 253, 1);
background: linear-gradient(0deg, #08324f 0%, #0b3360 100%);
}
}
&.yellow {
span {
background: rgba(222, 230, 0, 1);
}
div {
border-color: rgba(222, 230, 0, 1);
color: rgba(222, 230, 0, 1);
background: linear-gradient(0deg, #4f4b06 0%, #4f4e06 98%);
}
}
&.orange {
span {
background: rgba(255, 184, 15, 1);
}
div {
border-color: rgba(255, 184, 15, 1);
color: rgba(255, 184, 15, 1);
background: linear-gradient(0deg, #4f3d06 0%, #4f3d06 98%);
}
}
&.read {
span {
background: rgba(255, 26, 26, 1);
}
div {
border-color: rgba(255, 26, 26, 1);
color: rgba(255, 26, 26, 1);
background: linear-gradient(0deg, #3e0808 0%, #420808 100%);
}
}
}
}
.playBg {
width: calc(100% - 30px);
height: 18px;
background: rgba(77, 149, 217, 0.15);
border-radius: 9px;
padding: 3px;
overflow: hidden;
}
.playIn {
height: 100%;
background: linear-gradient(90deg, #1890ff, #1ee7e7);
border-radius: 6px;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
right: 0;
top: 0;
left: 0;
height: 12px;
border-radius: 6px;
// background: url(@/assets/images/oneMap/hgpx.png) repeat-x;
background-size: 16px 12px;
}
&::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 72px;
height: 12px;
// background: url(@/assets/images/oneMap/hgpr.png) no-repeat;
background-size: 100% 100%;
}
}
.rainList {
float: right;
line-height: 24px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
width: 54px;
text-align: center;
background: #00344fff;
margin-left: 10px;
cursor: pointer;
&.active {
background: #002d44;
border-radius: 2px;
border: 1px solid #1cf5fc;
}
}
}
}
}
.timeScheduleBox {
padding: 0 20px;
overflow: hidden;
.playBtn {
width: 22px;
height: 22px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.playBg {
width: calc(100% - 30px);
height: 18px;
background: rgba(77, 149, 217, 0.15);
border-radius: 9px;
padding: 3px;
overflow: hidden;
}
.playIn {
height: 100%;
background: linear-gradient(90deg, #1890ff, #1ee7e7);
border-radius: 6px;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
right: 0;
top: 0;
left: 0;
height: 12px;
border-radius: 6px;
// background: url(@/assets/images/oneMap/hgpx.png) repeat-x;
background-size: 16px 12px;
}
&::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 72px;
height: 12px;
// background: url(@/assets/images/oneMap/hgpr.png) no-repeat;
background-size: 100% 100%;
}
}
.playRadio {
display: flex;
width: calc(100% - 30px);
padding-top: 34px;
position: relative;
li {
width: 4.1666%;
padding-top: 10px;
display: flex;
justify-content: center;
position: relative;
&::before {
content: "";
position: absolute;
width: 2px;
height: 7px;
background: #799fc8;
top: -7px;
left: 50%;
margin-left: -1px;
}
&::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: #799fc8;
top: -20px;
left: 50%;
margin-left: -4px;
border-radius: 50%;
display: none;
}
div {
width: 22px;
line-height: 22px;
background: #799fc8;
font-family: DINPro;
font-weight: 400;
font-size: 16px;
color: #ffffff;
text-align: center;
}
&.blue {
&::before {
background: #00bffd;
}
&::after {
background: #00bffd;
display: block;
}
div {
background: #00bffd;
}
}
&.yellow {
&::before {
background: #dee600;
}
&::after {
background: #dee600;
display: block;
}
div {
background: #dee600;
}
}
&.orange {
&::before {
background: #ffb80f;
}
&::after {
background: #ffb80f;
display: block;
}
div {
background: #ffb80f;
}
}
&.read {
&::before {
background: #ff1a1a;
}
&::after {
background: #ff1a1a;
display: block;
}
div {
background: #ff1a1a;
}
}
}
&::before {
content: "";
position: absolute;
right: 0;
top: 34px;
left: 0;
height: 2px;
background: #799fc8;
}
}
}
.timeChart {
height: calc(100% - 140px);
overflow: hidden;
// background: red;
}
</style>
