- <template>
- <!-- 排水防涝一张图降雨图 -->
- <div class="centerWarnSea" v-show="centerWarnSeaShow">
- <img class="warnImg" src="@/assets/images/gisMap/color.png" />
- <el-date-picker
- type="daterange"
- v-model="daterange"
- value-format="YYYY-MM-DD"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- placeholder="请选择日期"
- style="width: 320px"
- @change="getRainDistribution"
- >
- </el-date-picker>
- <el-select v-model="searchVal" placeholder="倍数" style="width: 80px; margin-left: 10px" @change="changeMul">
- <el-option v-for="item in bsType" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true" style="width: 640px"></el-progress>
- <el-button type="warning" @click="startImitate" v-if="ifStart">开始</el-button>
- <el-button type="danger" @click="stopImitate" v-if="!ifStart">暂停</el-button>
- <el-button type="warning" @click="showKring" v-if="ifShowKring">显示</el-button>
- <el-button type="danger" @click="unshowKring" v-if="!ifShowKring">隐藏</el-button>
- </div>
- </template>
-
- <script setup name="page">
- import bus from '@/bus';
- import { rainDistributionMapData } from '@/api/floodSys/floodStation.js';
- import { getKrigingByPoints } from '@/utils/gis/rainkriging';
- import bjBoundaryJson from '@/assets/geojson/krigingBoundary.json';
- import { onBeforeUnmount } from 'vue';
- const { proxy } = getCurrentInstance();
- const daterange = ref(
- [proxy.moment().format('YYYY-MM-DD'), proxy.moment(new Date()).add(7, 'days').format('YYYY-MM-DD')] //未来7天
- );
- const searchVal = ref(2);
- const processVal = ref(0);
- const timer = ref(null);
- const ifStart = ref(true);
- const ifShowKring = ref(true);
- const centerWarnSeaShow = ref(false);
- const krigingJson = ref([]);
- const featureStep = ref(0);
- const bsType = ref([
- { value: 2, label: '2倍' },
- { value: 4, label: '4倍' },
- { value: 6, label: '6倍' },
- ]);
- const searchText = ref('');
-
- // 关键字搜索
- function changeText(val) {
- console.log(val);
- }
-
- // 开始模拟
- function startImitate() {
- ifStart.value = false;
- if (krigingJson.value.length < 1) {
- return;
- }
- if (krigingJson.value.length > 1) {
- let proStept = Math.round(100 / krigingJson.value.length);
- timer.value = setInterval(() => {
- processVal.value += proStept;
- featureStep.value += 1;
- let kriging = getKrigingByPoints(krigingJson.value[krigingJson.value.length - featureStep.value], bjBoundaryJson);
- newfiberMapbox.map.getSource('kriging_source').setData(kriging);
- if (processVal.value > 100) {
- processVal.value = 0;
- stopImitate();
- }
- if (featureStep.value == krigingJson.value.length) {
- featureStep.value = 0;
- //stopImitate();
- }
- }, 1000 / searchVal.value);
- } else {
- timer.value = setInterval(() => {
- processVal.value += 100;
- if (processVal.value > 100) {
- processVal.value = 0;
- stopImitate();
- }
- }, 1000);
- }
- }
- // 暂停模拟
- function stopImitate() {
- ifStart.value = true;
- stopTimer();
- }
- //显示插值图
- function showKring() {
- ifShowKring.value = false;
- !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.setLayoutProperty('kriging_layer', 'visibility', 'none');
- }
- //隐藏插值图
- function unshowKring() {
- ifShowKring.value = true;
- !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.setLayoutProperty('kriging_layer', 'visibility', 'visible');
- }
- // 倍数选择
- function changeMul(val) {
- searchVal.value = val;
- }
- // 定时器清除
- function stopTimer() {
- if (timer.value) {
- clearInterval(timer.value);
- }
- }
- //获取降雨插值
- const getRainDistribution = async () => {
- !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
- !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
- krigingJson.value = [];
- let params = {
- startTime: daterange.value[0],
- endTime: daterange.value[1],
- };
- let res = await rainDistributionMapData(params);
- if (res && res.code == 200) {
- let allRainData = res.data;
- if (!!!allRainData.length) {
- proxy.$modal.msgError('暂无数据');
- return;
- }
- allRainData.forEach(data => {
- let rainDataJson = getKrigingJson(data.rainSiteDistributionVOS);
- krigingJson.value.push(rainDataJson);
- });
- addKrigingLayer(krigingJson.value[0]);
- }
- };
- //获取雨量插值json
- const getKrigingJson = dataList => {
- if (!!!dataList.length) return;
- let features = [];
- dataList.forEach(element => {
- let feature = {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [Number(element.lonLat.split(',')[0]), Number(element.lonLat.split(',')[1])],
- },
- properties: { value: element.p24, name: `${element.p24}mm` },
- };
- features.push(feature);
- });
- return {
- type: 'FeatureCollection',
- features: features,
- };
- };
- //地图添加降雨插值图
- const addKrigingLayer = geoJson => {
- let layerId = `kriging_layer`;
- let sourceId = `kriging_source`;
- let kriging = getKrigingByPoints(geoJson, bjBoundaryJson);
- !newfiberMapbox.map.getSource(sourceId) && newfiberMapbox.map.addSource(sourceId, { type: 'geojson', data: kriging });
- !newfiberMapbox.map.getLayer(layerId) &&
- newfiberMapbox.map.addLayer({
- id: layerId,
- type: 'fill',
- source: sourceId,
- layout: {},
- paint: {
- 'fill-color': { type: 'identity', property: 'color' },
- 'fill-opacity': 0.6,
- },
- });
- };
- onMounted(() => {
- bus.on('centerSearchShow', value => {
- centerWarnSeaShow.value = value;
- if (!value) {
- !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
- !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
- }
- });
- });
- onBeforeMount(() => {
- stopTimer();
- });
- onBeforeUnmount(() => {
- if (!newfiberMapbox) return;
- !!newfiberMapbox.map.getLayer('kriging_layer') && newfiberMapbox.map.removeLayer('kriging_layer');
- !!newfiberMapbox.map.getSource('kriging_source') && newfiberMapbox.map.removeSource('kriging_source');
- });
- </script>
- <style lang="scss">
- @import '@/assets/styles/variables.module.scss';
- .centerWarnSea {
- background: $mainColor1;
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
- border-radius: 8px;
- position: absolute;
- top: 10px;
- left: 5px;
- z-index: 99;
- padding: 0px 10px;
- display: flex;
- align-items: center;
- width: 85%;
- .warnImg {
- width: 324px;
- height: 70px;
- margin-top: -20px;
- }
- .el-select {
- width: 150px;
- }
- .el-progress {
- width: 700px;
- margin: 0px 15px;
- .el-progress__text span {
- font-size: 12px;
- }
- }
- }
- </style>