- <template>
- <!-- 积水风险预报 -->
- <div class="rainFuturePage">
- <div class="centerCont flex">
- <p class="title">积水风险预报</p>
- <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
- <el-button style="background: #18b1f3; border: none" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
- <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
- </div>
- <div class="centerCont flex">
- <p class="title"></p>
- <div class="flex flex-justcontent-spacebetween timeCont">
- <p v-for="i in timeContList">{{ i }}</p>
- </div>
- <el-button type="warning" style="visibility: hidden"></el-button>
- </div>
- <!-- 颜色块 -->
- <div class="flex colorPart" style="height: 30px">
- <p><span></span>0.05-0.15</p>
- <p><span></span>0.15-0.3</p>
- <p><span></span>0.3-0.5</p>
- <p><span></span>0.5-1.0</p>
- <p><span></span>>1.0</p>
- </div>
- </div>
- </template>
-
- <script setup>
- import { query24hourRainToYuAn } from '@/api/floodSys/floodYP';
- import bus from '@/bus/index';
- const { proxy } = getCurrentInstance();
- const timeContList = ref([]);
- const processVal = ref(0);
- const ifStart = ref(true);
- const isdisabled = ref(false);
- const timer = ref(null);
- const riskTimer = ref(null);
- const timelineList = ref([]);
- const featureStep = ref(0);
- const gisJsonData = ref({});
- const gisParams = ref({
- rainFall: '',
- ybTime: '',
- category: 'duration',
- type: 'depth',
- realTime: false,
- hours: '24h',
- scenario: 'P1',
- });
- let maxPoint = '114.4022666731237,34.84413283884892,0.0';
- let minPoint = '114.29210083997283,34.7401307666175,0.0';
- const isMaterialShow = ref(false);
-
- //内涝风险评估 地图内涝渲染模拟
- const gisModuleData = () => {
- query24hourRainToYuAn(gisParams.value).then(res => {
- stopImitate();
- gisJsonData.value = res.data.result;
- let timeContStart = gisJsonData.value[0].createTime.split(' ')[1].split(':').map(Number)[0];
- if (timeContStart < 10) {
- timeContStart = '0' + timeContStart;
- }
- timeContList.value.push(timeContStart + ':00');
- for (let i = 0; i < 5; i++) {
- let index = (i + 1) * 6;
- let timeCont = Number(timeContStart) + index;
- if (timeCont > 24) {
- timeCont = timeCont - 24;
- }
- timeContList.value.push(timeCont + ':00');
- }
- timelineList.value = gisJsonData.value.map((i, idx) => ({
- id: idx,
- name: `${(((idx + 1) * 5) / 60).toFixed(0).padStart(2, 0)}:${((((idx + 1) * 5) % 60) + '').padStart(2, 0)}`,
- }));
- newfiberMapbox.map.ogcLayers
- .filter(i => i.newfiberId == 'newfiber-CanvasLayer')[0]
- .setInitializeParams({
- images: gisJsonData.value.map(i => i.url).reverse(),
- bbox: [...minPoint, ...maxPoint].map(Number).filter(Boolean),
- width: 8360,
- height: 5000,
- });
- if (!!gisJsonData.value.length && gisJsonData.value.length > 1) {
- isdisabled.value = false;
- !!newfiberMapbox.map.getLayer('futureAssesImage') && newfiberMapbox.map.removeLayer('futureAssesImage');
- !!newfiberMapbox.map.getSource('futureAssesImage') && newfiberMapbox.map.removeSource('futureAssesImage');
- addImageLayer(minPoint.split(',').map(Number), maxPoint.split(',').map(Number));
- } else {
- isdisabled.value = true;
- !!newfiberMapbox.map.getLayer('futureAssesImage') && newfiberMapbox.map.removeLayer('futureAssesImage');
- !!newfiberMapbox.map.getSource('futureAssesImage') && newfiberMapbox.map.removeSource('futureAssesImage');
- }
- });
- };
- //添加模型图
- const addImageLayer = (minPoint, maxPoint) => {
- let coordinates;
- newfiberMapbox.map.addSource('futureAssesImage', {
- type: 'image',
- url: gisJsonData.value[gisJsonData.value.length - 1].url,
- coordinates: [
- [Number(minPoint[0]), Number(maxPoint[1])],
- [Number(maxPoint[0]), Number(maxPoint[1])],
- [Number(maxPoint[0]), Number(minPoint[1])],
- [Number(minPoint[0]), Number(minPoint[1])],
- ],
- });
- newfiberMapbox.map.addLayer({
- id: 'futureAssesImage',
- type: 'raster',
- source: 'futureAssesImage',
- layout: {
- visibility: 'none',
- },
- paint: {
- 'raster-fade-duration': 0,
- },
- });
- };
- // 开始
- function startImitate() {
- ifStart.value = false;
- startTimer(); // 定时器开启
- // 清除图层
- isMaterialShow.value = true;
- materialShow();
- }
- // 开启定时器
- function startTimer() {
- if (processVal.value == 100) processVal.value = 0;
- if (gisJsonData.value.length < 1) {
- return;
- }
- if (gisJsonData.value.length > 1) {
- newfiberMapbox.map.setLayoutProperty('futureAssesImage', 'visibility', 'visible');
- let proStept = Math.round(100 / gisJsonData.value.length);
- timer.value = setInterval(() => {
- console.log('timerfuture------');
- featureStep.value += 1;
- newfiberMapbox.map
- .getSource('futureAssesImage')
- .updateImage({ url: gisJsonData.value[gisJsonData.value.length - 1 - featureStep.value].url });
-
- processVal.value += proStept;
-
- let setp_play = `step${featureStep.value}`;
- if (processVal.value > 100) {
- processVal.value = 100;
- stopImitate();
- return;
- }
- if (featureStep.value == gisJsonData.value.length - 1) {
- featureStep.value = 0;
- processVal.value = 100;
- stopImitate();
- }
- //changeFeatureColor(setp_play);
- }, 1000);
- } else {
- timer.value = setInterval(() => {
- processVal.value += 100;
- if (processVal.value > 100) {
- processVal.value = 0;
- stopImitate();
- }
- }, 1000);
- }
- }
-
- // 暂停模拟
- function stopImitate() {
- ifStart.value = true;
- stopTimer();
- // 显示图层
- isMaterialShow.value = false;
- materialShow();
- }
- // 定时器清除
- function stopTimer() {
- if (timer.value) {
- clearInterval(timer.value);
- }
- }
- // 图层清除
- let initeLayerList = [
- { layername: 'YSBZ', show: false }, //雨水泵站
- { layername: 'combineBengZhan', show: false }, //合流泵站
- // { layername: 'sewageFactory', show: false }, //污水处理厂
- { layername: 'ysLine1', show: false }, //雨水管网
- { layername: 'hsLine1', show: false }, //合流管网
- { layername: 'pipeline_info_flow', show: false }, //管网流向
- { layername: 'waterCourse', show: false }, //河道水位计
- { layername: 'pipeMonitor', show: false }, //管网监测点
- { layername: 'spongeFacility', show: false }, //海绵设施图层
- { layername: 'origine', show: false }, //典型项目图层
- ];
- const materialShow = () => {
- if (isMaterialShow.value) {
- initeLayerList.forEach(item => {
- item.show = isMaterialShow.value;
- });
- bus.emit('setIniteLayer', initeLayerList);
- } else {
- initeLayerList.forEach(item => {
- item.show = isMaterialShow.value;
- });
- bus.emit('setIniteLayer', initeLayerList);
- }
- };
-
- onMounted(() => {
- gisModuleData();
- });
- onBeforeUnmount(() => {
- stopTimer();
- });
- </script>
-
- <style lang="scss">
- .rainFuturePage {
- width: 100%;
- padding: 10px 20px;
- .centerCont {
- justify-content: space-around;
- align-items: center;
- .title {
- font-family: Source Han Sans CN;
- font-weight: bold;
- font-size: 20px;
- color: #3afff8;
- width: 180px;
- }
- .el-progress {
- width: 100%;
- margin-right: 20px;
- .el-progress-bar__outer {
- background: rgba(0, 59, 109, 0.8);
- }
- .el-progress-bar__innerText {
- color: #fff;
- }
- }
- .el-progress.is-success .el-progress-bar__inner {
- background: #3afff8;
- }
- .timeCont {
- width: 100%;
- height: 30px;
- margin-right: 50px;
- margin-top: -20px;
- }
- }
- .colorPart {
- justify-content: center;
- align-items: center;
- p {
- width: 120px;
- text-align: center;
- span {
- width: 23px;
- height: 12px;
- display: inline-block;
- border-radius: 6px;
- margin-right: 8px;
- }
- &:nth-of-type(1) span {
- background: #3afff8;
- }
- &:nth-of-type(2) span {
- background: #2bd2ff;
- }
- &:nth-of-type(3) span {
- background: #ffed52;
- }
- &:nth-of-type(4) span {
- background: #ffaa6b;
- }
- &:nth-of-type(5) span {
- background: #ff4545;
- }
- }
- }
- }
- </style>