/*
|
* @Author: Morpheus
|
* @Date: 2021-05-06 16:10:30
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-11-17 09:33:04
|
*/
|
<template>
|
<el-card class="rain-water-feeling">
|
<!-- 头部 -->
|
<div v-show='boxShow'
|
class="header">
|
|
<el-radio-group v-model="pointOrRegionRainValue"
|
@change="pointOrRegionRain">
|
<el-radio :label="1">点降雨</el-radio>
|
<el-radio :label="2">面降雨</el-radio>
|
<el-radio :label="3">流域</el-radio>
|
</el-radio-group>
|
|
</div>
|
|
<div v-show='boxShow'
|
class="rain-content">
|
|
<div class="header-tab">
|
<el-radio v-model="headerTabRadio"
|
@change="rainNodeOptions"
|
label="累计降雨量">累计降雨量</el-radio>
|
<el-radio v-model="headerTabRadio"
|
@change="rainNodeOptions"
|
label="时段雨量">时段雨量</el-radio>
|
<el-checkbox v-model="colorFigure"
|
@change="figureChange"
|
v-show="pointOrRegion">色斑图</el-checkbox>
|
</div>
|
|
<!-- 搜索条件等 -->
|
<div class="search-condition"
|
v-show="timeOptionFlag">
|
<el-date-picker v-model="searchTimeSection"
|
type="datetimerange"
|
format="yyyy-MM-dd HH"
|
:picker-options="timeSectionpickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-··placeholder="结束日期"
|
align="right"
|
size="small"
|
:editable="false"
|
@change="pickerDateChange">
|
</el-date-picker>
|
|
<el-button size="small"
|
type="primary"
|
@click="rainfall"
|
icon="el-icon-search">查询</el-button>
|
</div>
|
<!-- 搜索条件，时间节点选项 -->
|
<div class="search-conditions"
|
v-show="!timeOptionFlag">
|
<el-date-picker v-model="searchTime"
|
type="datetime"
|
format="yyyy-MM-dd HH"
|
placeholder="选择日期时间"
|
align="right"
|
:picker-options="timePickerOptions"
|
size="small">
|
</el-date-picker>
|
|
<el-select v-model="timeNodes"
|
size="small"
|
placeholder="请选择">
|
<el-option v-for="item in timeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
size="small">
|
</el-option>
|
</el-select>
|
|
<el-button size="small"
|
type="primary"
|
@click="rainfall"
|
icon="el-icon-search">查询</el-button>
|
</div>
|
<div v-loading="loading"
|
style="position: relative; height: calc(100% - 64px)">
|
<!-- 文字概况 -->
|
<div class="text-overview">
|
<p v-html="textarea"></p>
|
</div>
|
<div class="statistics"
|
v-show="pointOrRegion">
|
<div>
|
<span style="background: #a1fa9e"></span>
|
<span>0-10mm：</span>
|
<el-button type="text"
|
@click="dialogTable('zeroTable')"
|
:disabled="zeroNum == 0"
|
size="small">{{ zeroNum }}</el-button>
|
</div>
|
<div>
|
<span style="background: #47d743"></span>
|
<span>10-25mm：</span>
|
<el-button type="text"
|
@click="dialogTable('tenTable')"
|
:disabled="tenNum == 0"
|
size="small">{{ tenNum }}</el-button>
|
</div>
|
<div>
|
<span style="background: #72d9f9"></span>
|
<span>25-50mm：</span>
|
<el-button type="text"
|
@click="dialogTable('twentyFiveTable')"
|
:disabled="twentyFiveNum == 0"
|
size="small">{{ twentyFiveNum }}</el-button>
|
</div>
|
<div>
|
<span style="background: #1b18f5"></span>
|
<span>50-100mm：</span>
|
<el-button type="text"
|
@click="dialogTable('fiftyTable')"
|
:disabled="fiftyNum == 0"
|
size="small">{{ fiftyNum }}</el-button>
|
</div>
|
<div>
|
<span style="background: #f81dfa"></span>
|
<span>100-250mm：</span>
|
<el-button type="text"
|
@click="dialogTable('oneHTable')"
|
:disabled="oneHNum == 0"
|
size="small">{{ oneHNum }}</el-button>
|
</div>
|
<div>
|
<span style="background: #a81948"></span>
|
<span>大于250mm：</span>
|
<el-button type="text"
|
@click="dialogTable('twoHFTable')"
|
:disabled="twoHFNum == 0"
|
size="small">{{ twoHFNum }}</el-button>
|
</div>
|
</div>
|
<!-- 数据表格 -->
|
<div class="data-table"
|
v-show="!pointOrRegion">
|
<el-table :data="regionTableData"
|
border
|
size="small"
|
@row-click="regionFlyto"
|
v-show="pointOrRegionRainValue == 2">
|
<el-table-column align="center"
|
prop="ind"
|
label="序号"
|
width="60">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="region"
|
label="行政区"
|
width="120">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="siteNum"
|
label="站点数"
|
width="80">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="dyp"
|
label="降雨量(mm)">
|
</el-table-column>
|
</el-table>
|
|
<el-table :data="regionTableData"
|
border
|
size="small"
|
v-show="pointOrRegionRainValue == 3"
|
@row-click="basinClick">
|
<el-table-column align="center"
|
prop="ind"
|
label="序号"
|
width="60">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="region"
|
label="流域"
|
width="120">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="siteNum"
|
label="站点数"
|
width="60">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="dyp"
|
label="降雨量(mm)">
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
|
<div v-show="rainPopupFlag"
|
class="rain-detail-popup"
|
id="rainDetailPopup">
|
<ul v-html="detailPopupContent"></ul>
|
</div>
|
|
<Legend :legendsDetail="legendData"></Legend>
|
|
<!-- 数据表格 -->
|
<el-dialog title=""
|
:visible.sync="dialogVisible"
|
width="width"
|
:modal="false"
|
:modal-append-to-body="false"
|
:fullscreen="true">
|
<div class="el-dialog-search"
|
slot="title">
|
<div class="site">
|
<div style="white-space: nowrap">站点名称：</div>
|
<el-input v-model="searchSite"
|
placeholder="请输入站点名称"
|
size="small"></el-input>
|
</div>
|
<div class="site">
|
<div style="white-space: nowrap">站点编码：</div>
|
<el-input v-model="searchStcd"
|
placeholder="请输入站点编码"
|
size="small"></el-input>
|
</div>
|
<div>
|
行政区：
|
<el-select v-model="searchRegionValue"
|
size="small"
|
placeholder="请选择行政区">
|
<el-option v-for="item in searchRegionData"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div>
|
<el-button size="small"
|
type="primary"
|
icon="el-icon-search"
|
@click="dialogSearch">搜索</el-button>
|
<el-button size="small"
|
type="primary"
|
icon="el-icon-delete"
|
plain
|
@click="dialogSearchClear">清空</el-button>
|
</div>
|
<div>
|
<el-button type="primary"
|
size="small"
|
@click="exportExcel"
|
icon="iconfont el-icon-daochu">数据导出</el-button>
|
</div>
|
</div>
|
<div class="dialog-data-table">
|
<el-table :data="
|
tableData.slice(
|
(currpage - 1) * pagesize,
|
currpage * pagesize
|
)
|
"
|
@sort-change="onSortChange"
|
style="width: 100%">
|
<el-table-column align="center"
|
prop="ind"
|
label="序号"
|
width="60">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="STCD"
|
label="站码">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="STNM"
|
label="站名">
|
</el-table-column>
|
|
<el-table-column align="center"
|
prop="dyp"
|
sortable='custom'
|
label="降雨量(mm)">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="ADDVNM"
|
label="行政区">
|
</el-table-column>
|
<el-table-column align="center"
|
prop="STLC"
|
label="地址">
|
</el-table-column>
|
</el-table>
|
<div ref="tablePagination">
|
<el-pagination :pager-count="5"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
background
|
:page-sizes="[20, 40, 60, 100]"
|
layout="sizes, prev, pager, next"
|
:current-page="currpage"
|
:page-size="pagesize"
|
:total="tableData.length">
|
</el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
|
<el-dialog :title="retailTitle"
|
:visible.sync="retailShowFlag"
|
width="width"
|
:modal="false"
|
:modal-append-to-body="false"
|
:fullscreen="true"
|
class="retail-popup">
|
<iframe :src="retailSrc"
|
frameborder="0"></iframe>
|
</el-dialog>
|
|
</el-card>
|
</template>
|
|
<script>
|
import Feature from 'ol/Feature.js'
|
import Point from 'ol/geom/Point.js'
|
import { Icon, Style, Fill } from 'ol/style.js'
|
import { Polygon } from 'ol/geom'
|
import { boundingExtent } from 'ol/extent'
|
|
import fzJson from '@/geojson/fz.json'
|
|
import onePng from '@/assets/img/one.png'
|
import twoPng from '@/assets/img/two.png'
|
import threePng from '@/assets/img/three.png'
|
import fourPng from '@/assets/img/four.png'
|
import fivePng from '@/assets/img/five.png'
|
import sixPng from '@/assets/img/six.png'
|
|
import store from '@/store/' // 全局状态
|
|
import {
|
pointRainList,
|
regionRainList,
|
basinRainList
|
} from '@/api/rainWaterFeeling/rainWaterFeeling'
|
|
// 导出excel表格所需
|
// eslint-disable-next-line camelcase
|
import { export_json_to_excel } from '@/assets/libs/Export2Excel.js'
|
|
import ImageStatic from 'ol/source/ImageStatic.js'
|
import Image from 'ol/layer/Image.js'
|
|
export default {
|
data () {
|
return {
|
basinsiteData: [],
|
// 站点相关数据弹窗变量
|
retailShowFlag: false,
|
retailTitle: '',
|
retailSrc: '',
|
|
pointImgUrl: '',
|
boxShow: false,
|
textarea: '',
|
timeSectionpickerOptions: {
|
shortcuts: [
|
{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(
|
start.getTime() - 3600 * 1000 * 24 * 7
|
)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(
|
start.getTime() - 3600 * 1000 * 24 * 30
|
)
|
picker.$emit('pick', [start, end])
|
}
|
},
|
{
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(
|
start.getTime() - 3600 * 1000 * 24 * 90
|
)
|
picker.$emit('pick', [start, end])
|
}
|
}
|
]
|
},
|
// 时间区间
|
searchTimeSection: [
|
new Date().setTime(new Date().getTime() - 3600 * 1000),
|
new Date()
|
],
|
timePickerOptions: {
|
shortcuts: [
|
{
|
text: '今天',
|
onClick (picker) {
|
picker.$emit('pick', new Date())
|
}
|
},
|
{
|
text: '昨天',
|
onClick (picker) {
|
const date = new Date()
|
date.setTime(date.getTime() - 3600 * 1000 * 24)
|
picker.$emit('pick', date)
|
}
|
},
|
{
|
text: '一周前',
|
onClick (picker) {
|
const date = new Date()
|
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', date)
|
}
|
}
|
]
|
},
|
// 单时间
|
searchTime: new Date(),
|
// 地图
|
map2D: store.state.openlayers.map2D,
|
// 实体图层
|
rainWaterIconLayerOne: store.state.openlayers.rainWaterIconLayerOne,
|
rainWaterIconLayerTwo: store.state.openlayers.rainWaterIconLayerTwo,
|
rainWaterIconLayerThree: store.state.openlayers.rainWaterIconLayerThree,
|
rainWaterIconLayerFour: store.state.openlayers.rainWaterIconLayerFour,
|
rainWaterIconLayerFive: store.state.openlayers.rainWaterIconLayerFive,
|
rainWaterIconLayerSix: store.state.openlayers.rainWaterIconLayerSix,
|
|
rainWaterGeoJson: store.state.openlayers.rainWaterGeoJson,
|
|
pointOrRegionRainValue: 1,
|
headerTabRadio: '累计降雨量',
|
// 图例信息x
|
legendData: [
|
{
|
title: '降雨图例',
|
content: [
|
{
|
label: '0-10mm',
|
src: onePng
|
},
|
{
|
label: '10-25mm',
|
src: twoPng
|
},
|
{
|
label: '25-50mm',
|
src: threePng
|
},
|
{
|
label: '50-100mm',
|
src: fourPng
|
},
|
{
|
label: '100-250mm',
|
src: fivePng
|
},
|
{
|
label: '大于250mm',
|
src: sixPng
|
}
|
]
|
}
|
],
|
// 加载中
|
loading: true,
|
// dialog显示控制
|
dialogVisible: false,
|
// 时间节点选项
|
timeOptions: [
|
{
|
value: 1,
|
label: '1小时'
|
},
|
{
|
value: 2,
|
label: '2小时'
|
},
|
{
|
value: 3,
|
label: '3小时'
|
},
|
{
|
value: 6,
|
label: '6小时'
|
},
|
{
|
value: 24,
|
label: '24小时'
|
}
|
],
|
timeNodes: 1,
|
timeOptionFlag: true,
|
// 0-10降雨量 和 表格数据
|
zeroNum: 0,
|
zeroTable: [],
|
// 10降雨量 和 表格数据
|
tenNum: 0,
|
tenTable: [],
|
// 25降雨量 和 表格数据
|
twentyFiveNum: 0,
|
twentyFiveTable: [],
|
// 50降雨量 和 表格数据
|
fiftyNum: 0,
|
fiftyTable: [],
|
// 100降雨量 和 表格数据
|
oneHNum: 0,
|
oneHTable: [],
|
// 250降雨量 和 表格数据
|
twoHFNum: 0,
|
twoHFTable: [],
|
// dialog中表格相关
|
tableData: [],
|
currpage: 1,
|
pagesize: 20,
|
dialogType: '',
|
searchSite: '',
|
searchStcd: '',
|
searchRegionValue: '全部',
|
searchRegionData: [
|
{
|
value: '全部',
|
label: '全部'
|
},
|
{
|
value: '南城县',
|
label: '南城县'
|
},
|
{
|
value: '广昌县',
|
label: '广昌县'
|
},
|
{
|
value: '乐安县',
|
label: '乐安县'
|
},
|
{
|
value: '南丰县',
|
label: '南丰县'
|
},
|
{
|
value: '黎川县',
|
label: '黎川县'
|
},
|
{
|
value: '东乡区',
|
label: '东乡区'
|
},
|
{
|
value: '金溪县',
|
label: '金溪县'
|
},
|
{
|
value: '宜黄县',
|
label: '宜黄县'
|
},
|
{
|
value: '崇仁县',
|
label: '崇仁县'
|
},
|
{
|
value: '临川区',
|
label: '临川区'
|
},
|
{
|
value: '资溪县',
|
label: '资溪县'
|
}
|
],
|
// 详情框是否显示
|
rainPopupFlag: false,
|
// 详情内容
|
detailPopupContent: '',
|
// 点或者面
|
pointOrRegion: false,
|
// 面数据表格
|
regionTableData: [],
|
fzLayer: null,
|
colorFigure: false,
|
meauInd: 0
|
}
|
},
|
created () {
|
this.searchTimeSection[0] = this.timeOrTimeNum(this.searchTimeSection[0])
|
|
this.aoper()
|
},
|
beforeMount () { },
|
|
mounted () {
|
// 窗口重置
|
this.$parent.resize('360px', '360px', true, '雨情信息')
|
|
// 添加图层
|
this.map2D.addLayer(this.rainWaterIconLayerOne)
|
this.map2D.addLayer(this.rainWaterIconLayerTwo)
|
this.map2D.addLayer(this.rainWaterIconLayerThree)
|
this.map2D.addLayer(this.rainWaterIconLayerFour)
|
this.map2D.addLayer(this.rainWaterIconLayerFive)
|
this.map2D.addLayer(this.rainWaterIconLayerSix)
|
this.map2D.addLayer(this.rainWaterGeoJson)
|
|
// 地图注册移动事件
|
this.$nextTick(function () {
|
this.map2D.on('pointermove', this.seleceFeature)
|
|
this.map2D.on('singleclick', this.layerClick)
|
})
|
},
|
watch: {},
|
methods: {
|
layerClick (e) {
|
const that = this
|
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
if (features.length > 0) {
|
var ind = 0
|
var cont = null
|
|
features.forEach(item => {
|
if (item.values_.name == 'rain') {
|
if (item.values_.attributes.mapZindex > ind) {
|
ind = item.values_.attributes.mapZindex
|
cont = item.values_.attributes
|
}
|
}
|
})
|
|
if (cont != undefined && cont != null) {
|
that.rainPopupFlag = false
|
|
that.retailTitle = cont.STNM
|
that.retailShowFlag = true
|
that.retailSrc = `/retail/sitepopup/rain.html?id=${cont.STCD}`
|
}
|
}
|
},
|
|
// 拆分数组
|
groupArray (array, subGroupLength) {
|
var a = array
|
var b = a.splice(subGroupLength)
|
return [a, b]
|
},
|
// 大小重置
|
boxResize (val) {
|
this.boxShow = val
|
},
|
// 点面切换
|
pointOrRegionRain (e) {
|
this.rainWaterGeoJson.getSource().clear()
|
|
if (this.pointOrRegionRainValue == 1) {
|
this.aoper()
|
} else if (this.pointOrRegionRainValue == 2) {
|
this.repoer()
|
} else if (this.pointOrRegionRainValue == 3) {
|
this.repoer()
|
}
|
|
this.meauInd = e
|
},
|
// 面雨量表格行点击事件
|
regionFlyto (row) {
|
this.rainWaterIconLayerOne.getSource().clear()
|
this.rainWaterIconLayerTwo.getSource().clear()
|
this.rainWaterIconLayerThree.getSource().clear()
|
this.rainWaterIconLayerFour.getSource().clear()
|
this.rainWaterIconLayerFive.getSource().clear()
|
this.rainWaterIconLayerSix.getSource().clear()
|
|
row.childrenList.forEach(item => {
|
if (item.DRP > 0 && item.DRP <= 10) {
|
this.addPoint(item, onePng, 'rainWaterIconLayerOne')
|
} else if (item.DRP > 10 && item.DRP <= 25) {
|
this.addPoint(item, twoPng, 'rainWaterIconLayerTwo')
|
} else if (item.DRP > 25 && item.DRP <= 50) {
|
this.addPoint(item, threePng, 'rainWaterIconLayerThree')
|
} else if (item.DRP > 50 && item.DRP <= 100) {
|
this.addPoint(item, fourPng, 'rainWaterIconLayerFour')
|
} else if (item.DRP > 100 && item.DRP <= 250) {
|
this.addPoint(item, fivePng, 'rainWaterIconLayerFive')
|
} else if (item.DRP > 250) {
|
this.addPoint(item, sixPng, 'rainWaterIconLayerSix')
|
}
|
})
|
|
fzJson.features.forEach((item, index) => {
|
if (item.properties.name == row.region) {
|
var arr = item.geometry.coordinates
|
|
this.zoomToExtent(boundingExtent(arr[0][0]))
|
}
|
})
|
},
|
// 添加实体点
|
addPoint (item, icon, type) {
|
item.mapZindex = this[type].values_.zIndex
|
|
const iconFeature = new Feature({
|
geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
|
name: 'rain',
|
attributes: item
|
})
|
|
const iconStyle = new Style({
|
|
image: new Icon({
|
scale: 0.06,
|
opacity: 1,
|
src: icon
|
})
|
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this[type].getSource().addFeature(iconFeature)
|
|
this[type].setVisible(true)
|
},
|
// 实体点详情窗口
|
seleceFeature (e) {
|
// 在点击时获取像素区域
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
this.rainPopupFlag = false
|
const that = this
|
const exctent = e.map.values_.size
|
|
if (features.length > 0) {
|
var ind = 0
|
var cont = null
|
|
features.forEach(item => {
|
if (item.values_.name) {
|
if (item.values_.attributes.mapZindex > ind) {
|
ind = item.values_.attributes.mapZindex
|
cont = item.values_.attributes
|
}
|
}
|
})
|
|
if (cont != undefined) {
|
that.detailPopupContent = ''
|
that.detailPopupContent += `<li> 站码：${cont.STCD} </li>`
|
that.detailPopupContent += `<li> 站点：${cont.STNM} </li>`
|
that.detailPopupContent += `<li> 降雨量(mm)：${cont.dyp || cont.DRP}mm </li>`
|
that.detailPopupContent += `<li> 行政区：${cont.ADDVNM} </li>`
|
that.detailPopupContent += `<li> 地址：${cont.STLC} </li>`
|
|
document.getElementById('rainDetailPopup').style.top =
|
e.pixel[1] + 70 + 'px'
|
document.getElementById('rainDetailPopup').style.right =
|
exctent[0] - e.pixel[0] + 10 + 'px'
|
that.rainPopupFlag = true
|
}
|
}
|
},
|
// 面雨量添加geojson渲染
|
addGeoJson (name, num) {
|
var color = null
|
if (num == 0) {
|
color = 'rgba(190, 255, 188, 0.1)'
|
} else if (num > 0 && num <= 10) {
|
color = 'rgba(161, 250, 158, 0.5)'
|
} else if (num > 10 && num <= 25) {
|
color = 'rgba(71, 215, 67, 0.5)'
|
} else if (num > 25 && num <= 50) {
|
color = 'rgba(114, 217, 249, 0.5)'
|
} else if (num > 50 && num <= 100) {
|
color = 'rgba(27, 24, 245, 0.5)'
|
} else if (num > 100 && num <= 250) {
|
color = 'rgba(248, 29, 250, 0.5)'
|
} else if (num > 250) {
|
color = 'rgba(168, 25, 72, 0.5)'
|
}
|
fzJson.features.forEach((item, index) => {
|
if (item.properties.name == name) {
|
var arr = item.geometry.coordinates
|
|
var polygonFeature = new Feature({
|
type: 'polygon',
|
geometry: new Polygon(arr[0])
|
})
|
|
polygonFeature.setStyle(new Style({
|
|
fill: new Fill({
|
color: color
|
})
|
|
}))
|
|
this.rainWaterGeoJson.getSource().addFeature(polygonFeature)
|
}
|
})
|
},
|
// 地图缩放，通过extent范围 extent数据类型为int数组，不能为字符串，如果为字符串则先转换为int数组。
|
zoomToExtent (extent) {
|
var MapZoom = extent
|
var mapPadding = [120, 110, 120, 410]
|
// 添加map.getSize()，可以让地图在正常的缩放级别内，而不是出现地图级别小数。
|
this.map2D.getView().fit(MapZoom, this.map2D.getSize(), {
|
constrainResolution: false,
|
earest: false,
|
padding: mapPadding
|
})
|
// 以下为另外一种方法
|
// var r = map.getView().getResolutionForExtent(extent, map.getSize());
|
// map.getView().setResolution(r);
|
// map.getView().setCenter(ol.extent.getCenter(extent));
|
},
|
|
// 地图缩放，通过extent范围 extent数据类型为int数组，不能为字符串，如果为字符串则先转换为int数组。
|
zoomToExtents (extent) {
|
var MapZoom = extent
|
MapZoom[0] -= 0.05
|
MapZoom[1] -= 0.05
|
MapZoom[2] += 0.05
|
MapZoom[3] += 0.05
|
|
var mapPadding = [120, 110, 120, 410]
|
// 添加map.getSize()，可以让地图在正常的缩放级别内，而不是出现地图级别小数。
|
this.map2D.getView().fit(MapZoom, this.map2D.getSize(), {
|
constrainResolution: false,
|
earest: false,
|
padding: mapPadding
|
})
|
// 以下为另外一种方法
|
// var r = map.getView().getResolutionForExtent(extent, map.getSize());
|
// map.getView().setResolution(r);
|
// map.getView().setCenter(ol.extent.getCenter(extent));
|
},
|
|
timeOrTimeNum (timestamp) {
|
var date = new Date(timestamp)
|
var Y = date.getFullYear()
|
var M = ((date.getMonth() + 1) < 10) ? ('0' + (date.getMonth() + 1)) : ((date.getMonth() + 1))
|
var D = (date.getDate() < 10) ? ('0' + date.getDate()) : (date.getDate())
|
|
var time = new Date(Y + '/' + M + '/' + D + ' 08:00:00').getTime()
|
return time
|
},
|
pickerDateChange (e) { },
|
handleSizeChange (val) {
|
this.pagesize = val
|
},
|
handleCurrentChange (val) {
|
this.currpage = val
|
},
|
// 显示dialog弹框
|
dialogTable (val) {
|
this.dialogType = val
|
var str = ''
|
this[val].forEach((item, index) => {
|
item.ind = index + 1
|
if (str.indexOf(item.ADDVNM) == -1) {
|
str += item.ADDVNM
|
}
|
})
|
this.tableData = this[val]
|
|
this.searchSite = ''
|
this.searchStcd = ''
|
this.searchRegionValue = '全部'
|
|
this.dialogVisible = true
|
},
|
// 累计与时段切换
|
rainNodeOptions () {
|
this.dialogVisible = false
|
if (this.pointOrRegion == true) {
|
// 雨量节点切换时间节点搜索条件显示
|
if (this.headerTabRadio == '累计降雨量') {
|
this.timeOptionFlag = true
|
this.timeSectionDispose()
|
} else {
|
this.timeOptionFlag = false
|
this.timeFrameDispose()
|
}
|
} else {
|
// 雨量节点切换时间节点搜索条件显示
|
if (this.headerTabRadio == '累计降雨量') {
|
this.timeOptionFlag = true
|
if (this.pointOrRegionRainValue == 2) {
|
this.regionTimeSectionDispose()
|
} else {
|
this.basinTimeSectionDispose()
|
}
|
} else {
|
this.timeOptionFlag = false
|
if (this.pointOrRegionRainValue == 2) {
|
this.regionTimeFrameDispose()
|
} else {
|
this.basinTimeFrameDispose()
|
}
|
}
|
}
|
},
|
// 降雨查询
|
rainfall () {
|
this.dialogVisible = false
|
|
if (this.colorFigure) {
|
if (this.fzLayer != null) {
|
this.map2D.removeLayer(this.fzLayer)
|
}
|
|
this.colorFigure = false
|
}
|
|
// 雨量节点切换时间节点搜索条件显示
|
if (this.pointOrRegion == true) {
|
// 雨量节点切换时间节点搜索条件显示
|
if (this.headerTabRadio == '累计降雨量') {
|
this.timeSectionDispose()
|
} else {
|
this.timeFrameDispose()
|
}
|
} else {
|
// 雨量节点切换时间节点搜索条件显示
|
if (this.headerTabRadio == '累计降雨量') {
|
if (this.pointOrRegionRainValue == 2) {
|
this.regionTimeSectionDispose()
|
} else {
|
this.basinTimeSectionDispose()
|
}
|
} else {
|
if (this.pointOrRegionRainValue == 2) {
|
this.regionTimeFrameDispose()
|
} else {
|
this.basinTimeFrameDispose()
|
}
|
}
|
}
|
},
|
// 累计降雨
|
timeSectionDispose () {
|
this.clearDataOrLayer()
|
if (this.searchTimeSection.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = new Date(this.searchTimeSection[0])
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
|
const endTime = new Date(this.searchTimeSection[1])
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
this.pointList(start, end)
|
},
|
// 时段降雨
|
timeFrameDispose () {
|
this.clearDataOrLayer()
|
if (this.searchTime.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = this.searchTimeOptions(this.searchTime)
|
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
const endTime = new Date(this.searchTime)
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
this.pointList(start, end)
|
},
|
// 点降雨数据获取
|
pointList (start, end) {
|
pointRainList(start, end).then((res) => {
|
var twoArr = this.groupArray(res.data.data, res.data.data.length - 1)
|
|
this.pointImgUrl = 'img/' + twoArr[1][0].url
|
|
var result = twoArr[0][0]
|
|
// 0-10降雨量 和 表格数据
|
this.zeroNum = result.one.length
|
this.zeroTable = result.one
|
this.zeroTable.length > 0 &&
|
this.zeroTable.forEach((item) => {
|
this.addPoint(item, onePng, 'rainWaterIconLayerOne')
|
})
|
// 10降雨量 和 表格数据
|
this.tenNum = result.two.length
|
this.tenTable = result.two
|
this.tenTable.length > 0 &&
|
this.tenTable.forEach((item) => {
|
this.addPoint(item, twoPng, 'rainWaterIconLayerTwo')
|
})
|
// 25降雨量 和 表格数据
|
this.twentyFiveNum = result.three.length
|
this.twentyFiveTable = result.three
|
this.twentyFiveTable.length > 0 &&
|
this.twentyFiveTable.forEach((item) => {
|
this.addPoint(item, threePng, 'rainWaterIconLayerThree')
|
})
|
// 50降雨量 和 表格数据
|
this.fiftyNum = result.four.length
|
this.fiftyTable = result.four
|
this.fiftyTable.length > 0 &&
|
this.fiftyTable.forEach((item) => {
|
this.addPoint(item, fourPng, 'rainWaterIconLayerFour')
|
})
|
// 100降雨量 和 表格数据
|
this.oneHNum = result.five.length
|
this.oneHTable = result.five
|
this.oneHTable.length > 0 &&
|
this.oneHTable.forEach((item) => {
|
this.addPoint(item, fivePng, 'rainWaterIconLayerFive')
|
})
|
// 250降雨量 和 表格数据
|
this.twoHFNum = result.six.length
|
this.twoHFTable = result.six
|
this.twoHFTable.length > 0 &&
|
this.twoHFTable.forEach((item) => {
|
this.addPoint(item, sixPng, 'rainWaterIconLayerSix')
|
})
|
var str = ''
|
if (
|
this.zeroNum > 0 ||
|
this.tenNum > 0 ||
|
this.twentyFiveNum > 0 ||
|
this.fiftyNum > 0 ||
|
this.oneHNum > 0 ||
|
this.twoHFNum > 0
|
) {
|
str = `<br><span style='padding-left:2em;'></span>全市有${this.zeroNum +
|
this.tenNum +
|
this.twentyFiveNum +
|
this.fiftyNum +
|
this.oneHNum +
|
this.twoHFNum
|
}个站点有降雨`
|
if (
|
this.fiftyNum > 0 ||
|
this.oneHNum > 0 ||
|
this.twoHFNum > 0
|
) {
|
str += `,其中${this.fiftyNum + this.oneHNum + this.twoHFNum
|
}个站点超50mm`
|
if (this.oneHNum > 0 || this.twoHFNum > 0) {
|
str += `,有${this.oneHNum + this.twoHFNum
|
}个站点超100mm`
|
if (this.twoHFNum > 0) {
|
str += `,有${this.twoHFNum}个站点超250mm。`
|
} else {
|
str += '。'
|
}
|
} else {
|
str += '。'
|
}
|
} else {
|
str += '。'
|
}
|
}
|
|
this.textarea = result.text + str
|
|
this.$parent.updateText(result.text)
|
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
})
|
},
|
// 清除点降雨数据
|
clearDataOrLayer () {
|
this.loading = true
|
this.textarea = ''
|
this.$parent.updateText('')
|
// 0-10降雨量 和 表格数据
|
this.zeroNum = 0
|
this.zeroTable = []
|
// 10降雨量 和 表格数据
|
this.tenNum = 0
|
this.tenTable = []
|
// 25降雨量 和 表格数据
|
this.twentyFiveNum = 0
|
this.twentyFiveTable = []
|
// 50降雨量 和 表格数据
|
this.fiftyNum = 0
|
this.fiftyTable = []
|
// 100降雨量 和 表格数据
|
this.oneHNum = 0
|
this.oneHTable = []
|
// 250降雨量 和 表格数据
|
this.twoHFNum = 0
|
this.twoHFTable = []
|
this.rainWaterIconLayerOne.getSource().clear()
|
this.rainWaterIconLayerTwo.getSource().clear()
|
this.rainWaterIconLayerThree.getSource().clear()
|
this.rainWaterIconLayerFour.getSource().clear()
|
this.rainWaterIconLayerFive.getSource().clear()
|
this.rainWaterIconLayerSix.getSource().clear()
|
},
|
// 时间：1小时，3小时，6小时对应的时间
|
searchTimeOptions (date) {
|
let search = ''
|
const time = new Date(date)
|
|
if (this.timeNodes == 1) {
|
search = time.getTime() - 3600 * 1000 * 1
|
} else if (this.timeNodes == 2) {
|
search = time.getTime() - 3600 * 1000 * 2
|
} else if (this.timeNodes == 3) {
|
search = time.getTime() - 3600 * 1000 * 3
|
} else if (this.timeNodes == 6) {
|
search = time.getTime() - 3600 * 1000 * 6
|
} else if (this.timeNodes == 24) {
|
search = time.getTime() - 3600 * 1000 * 24
|
}
|
|
return new Date(search)
|
},
|
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? '0' + s : s
|
},
|
// dialog搜索方法
|
dialogSearch () {
|
var arr = []
|
this[this.dialogType].forEach((item) => {
|
if (this.searchRegionValue == '全部') {
|
if (
|
item.STNM &&
|
item.STNM.indexOf(this.searchSite) != -1 &&
|
item.STCD &&
|
item.STCD.indexOf(this.searchStcd) != -1
|
) {
|
arr.push(item)
|
}
|
} else {
|
if (
|
item.STNM &&
|
item.STNM.indexOf(this.searchSite) != -1 &&
|
item.STCD &&
|
item.STCD.indexOf(this.searchStcd) != -1 &&
|
item.ADDVNM &&
|
item.ADDVNM.indexOf(this.searchRegionValue) != -1
|
) {
|
arr.push(item)
|
}
|
}
|
})
|
|
arr.forEach((item, index) => {
|
item.ind = index + 1
|
})
|
this.currpage = 1
|
this.tableData = arr
|
},
|
// dialog清空方法
|
inputOrSelectClear () {
|
this.searchRegionValue = '全部'
|
this.searchSite = ''
|
this.searchStcd = ''
|
},
|
dialogSearchClear () {
|
this.inputOrSelectClear()
|
this[this.dialogType].forEach((item, index) => {
|
item.ind = index + 1
|
})
|
this.currpage = 1
|
this.tableData = this[this.dialogType]
|
},
|
// 数据导出
|
exportExcel () {
|
var tHeader = ['序号', '站码', '站名', '降雨量(mm)', '行政区', '地址']
|
var filterVal = ['ind', 'STCD', 'STNM', 'dyp', 'ADDVNM', 'STLC']
|
var filename = '雨水情-点降雨数据表格'
|
var data = this.formatJson(filterVal, this.tableData)
|
export_json_to_excel({
|
header: tHeader,
|
data,
|
filename
|
})
|
},
|
formatJson (filterVal, tableData) {
|
return tableData.map((v) => {
|
return filterVal.map((j) => {
|
return v[j]
|
})
|
})
|
},
|
// 点降雨
|
aoper () {
|
if (this.pointOrRegionRainValue == this.meauInd) return
|
this.pointOrRegion = true
|
this.timeNodes = 1
|
this.clearDataOrLayer()
|
this.headerTabRadio = '累计降雨量'
|
this.timeOptionFlag = true
|
this.timeSectionDispose()
|
},
|
// 面降雨
|
repoer () {
|
if (this.pointOrRegionRainValue == this.meauInd) return
|
this.dialogVisible = false
|
this.pointOrRegion = false
|
this.timeNodes = 1
|
this.clearDataOrLayer()
|
this.headerTabRadio = '累计降雨量'
|
this.timeOptionFlag = true
|
|
this.colorFigure = false
|
|
if (this.fzLayer != null) {
|
this.map2D.removeLayer(this.fzLayer)
|
}
|
|
if (this.pointOrRegionRainValue == 2) {
|
this.regionTimeSectionDispose()
|
} else {
|
this.basinTimeSectionDispose()
|
}
|
},
|
// 面降雨累积降雨量
|
regionTimeSectionDispose () {
|
this.loading = true
|
this.textarea = ''
|
this.$parent.updateText('')
|
if (this.searchTimeSection.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = new Date(this.searchTimeSection[0])
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
|
const endTime = new Date(this.searchTimeSection[1])
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
this.regionList(start, end)
|
},
|
// 面降雨时段降雨
|
regionTimeFrameDispose () {
|
this.loading = true
|
this.textarea = ''
|
this.$parent.updateText('')
|
if (this.searchTime.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = this.searchTimeOptions(this.searchTime)
|
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
const endTime = new Date(this.searchTime)
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
this.regionList(start, end)
|
},
|
// 流域降雨累积降雨量
|
basinTimeSectionDispose () {
|
this.loading = true
|
this.textarea = ''
|
this.$parent.updateText('')
|
if (this.searchTimeSection.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = new Date(this.searchTimeSection[0])
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
|
const endTime = new Date(this.searchTimeSection[1])
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
this.basinList(start, end)
|
},
|
// 流域降雨时段降雨
|
basinTimeFrameDispose () {
|
this.loading = true
|
this.textarea = ''
|
this.$parent.updateText('')
|
if (this.searchTime.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = this.searchTimeOptions(this.searchTime)
|
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
this.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(startTime.getDate()) +
|
' ' +
|
this.disposeTime(startTime.getHours()) +
|
':' +
|
this.disposeTime(startTime.getMinutes()) +
|
':' +
|
this.disposeTime(startTime.getSeconds())
|
const endTime = new Date(this.searchTime)
|
const end =
|
endTime.getFullYear() +
|
'-' +
|
this.disposeTime(endTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(endTime.getDate()) +
|
' ' +
|
this.disposeTime(endTime.getHours()) +
|
':' +
|
this.disposeTime(endTime.getMinutes()) +
|
':' +
|
this.disposeTime(endTime.getSeconds())
|
|
this.basinList(start, end)
|
},
|
|
// 面降雨数据获取
|
regionList (start, end) {
|
this.rainWaterIconLayerOne.getSource().clear()
|
this.rainWaterIconLayerTwo.getSource().clear()
|
this.rainWaterIconLayerThree.getSource().clear()
|
this.rainWaterIconLayerFour.getSource().clear()
|
this.rainWaterIconLayerFive.getSource().clear()
|
this.rainWaterIconLayerSix.getSource().clear()
|
this.rainWaterGeoJson.getSource().clear()
|
regionRainList(start, end).then((res) => {
|
var result = res.data.data[0]
|
|
this.textarea = result.text
|
|
result.List.length > 0 &&
|
result.List.forEach((item, index) => {
|
item.siteNum = 0
|
|
item.childrenList = []
|
|
result.Num.forEach((it) => {
|
if (item.region == it.ADDVNM) {
|
item.siteNum += 1
|
|
item.childrenList.push(it)
|
}
|
})
|
})
|
|
result.List.length > 0 &&
|
result.List.sort(function (a, b) {
|
return b.dyp - a.dyp
|
})
|
|
result.List.length > 0 &&
|
result.List.forEach((item, index) => {
|
item.ind = index + 1
|
this.addGeoJson(item.region, item.dyp)
|
})
|
|
if (result.List.length > 0) {
|
this.textarea += `${result.List[0].region}${result.List[0].dyp}毫米最大，`
|
this.textarea += `${result.List[1].region}${result.List[1].dyp}毫米次之，`
|
this.textarea += `${result.List[2].region}${result.List[2].dyp}毫米第三。`
|
}
|
|
this.$parent.updateText(this.textarea)
|
|
this.regionTableData = result.List
|
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
})
|
},
|
// 流域降雨数据获取
|
basinList (start, end) {
|
basinRainList(start, end).then((res) => {
|
var result = res.data.data[0]
|
|
this.textarea = result.text
|
|
this.$parent.updateText(this.textarea)
|
|
result.List.length > 0 &&
|
result.List.forEach((item, index) => {
|
item.ind = index + 1
|
|
if (result.Num[item.region]) {
|
item.siteNum = result.Num[item.region]
|
}
|
})
|
|
this.basinsiteData = result.NumALL
|
|
result.NumALL.forEach(item => {
|
if (item.DRP >= 0 && item.DRP <= 10) {
|
this.addPoint(item, onePng, 'rainWaterIconLayerOne')
|
} else if (item.DRP > 10 && item.DRP <= 25) {
|
this.addPoint(item, twoPng, 'rainWaterIconLayerTwo')
|
} else if (item.DRP > 25 && item.DRP <= 50) {
|
this.addPoint(item, threePng, 'rainWaterIconLayerThree')
|
} else if (item.DRP > 50 && item.DRP <= 100) {
|
this.addPoint(item, fourPng, 'rainWaterIconLayerFour')
|
} else if (item.DRP > 100 && item.DRP <= 250) {
|
this.addPoint(item, fivePng, 'rainWaterIconLayerFive')
|
} else if (item.DRP > 250) {
|
this.addPoint(item, sixPng, 'rainWaterIconLayerSix')
|
}
|
})
|
|
this.regionTableData = result.List
|
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
})
|
},
|
basinClick (row) {
|
var arr = []
|
this.basinsiteData.forEach(item => {
|
if (item.ADDVNM == row.region) {
|
arr.push([Number(item.LGTD), Number(item.LTTD)])
|
}
|
})
|
this.zoomToExtents(boundingExtent(arr))
|
},
|
// 加载色斑图
|
loadFZpngLayer () {
|
var extent = [114.7, 25.5, 117.7, 28.5]
|
// var projection = new Projection({
|
// code: 'EPSG:4326',
|
// extent: extent
|
// })
|
if (this.fzLayer != null) {
|
this.map2D.removeLayer(this.fzLayer)
|
}
|
|
this.fzLayer = new Image({
|
zIndex: 6,
|
opacity: 0.7,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: this.pointImgUrl,
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
})
|
|
this.map2D.addLayer(this.fzLayer)
|
},
|
figureChange () {
|
if (this.colorFigure == true) {
|
this.rainWaterIconLayerOne.setVisible(false)
|
this.rainWaterIconLayerTwo.setVisible(false)
|
this.rainWaterIconLayerThree.setVisible(false)
|
this.rainWaterIconLayerFour.setVisible(false)
|
this.rainWaterIconLayerFive.setVisible(false)
|
this.rainWaterIconLayerSix.setVisible(false)
|
|
this.loadFZpngLayer()
|
} else {
|
this.rainWaterIconLayerOne.setVisible(true)
|
this.rainWaterIconLayerTwo.setVisible(true)
|
this.rainWaterIconLayerThree.setVisible(true)
|
this.rainWaterIconLayerFour.setVisible(true)
|
this.rainWaterIconLayerFive.setVisible(true)
|
this.rainWaterIconLayerSix.setVisible(true)
|
|
if (this.fzLayer) this.map2D.removeLayer(this.fzLayer)
|
}
|
},
|
|
onSortChange ({ prop, order }) {
|
this.tableData.sort(this.compare(prop, order))
|
|
this.tableData.forEach((item, index) => {
|
item.ind = index + 1
|
})
|
},
|
compare (property, order) {
|
if (order == 'ascending') {
|
return function (a, b) {
|
var value1 = a[property]
|
var value2 = b[property]
|
return value1 - value2
|
}
|
} else {
|
return function (a, b) {
|
var value1 = a[property]
|
var value2 = b[property]
|
return value2 - value1
|
}
|
}
|
}
|
},
|
destroyed () {
|
this.$parent.resize('0%', '0', false)
|
this.$parent.updateText('')
|
|
this.rainWaterIconLayerOne.getSource().clear()
|
this.rainWaterIconLayerTwo.getSource().clear()
|
this.rainWaterIconLayerThree.getSource().clear()
|
this.rainWaterIconLayerFour.getSource().clear()
|
this.rainWaterIconLayerFive.getSource().clear()
|
this.rainWaterIconLayerSix.getSource().clear()
|
|
this.rainWaterGeoJson.getSource().clear()
|
|
this.map2D.removeLayer(this.rainWaterIconLayerOne)
|
this.map2D.removeLayer(this.rainWaterIconLayerTwo)
|
this.map2D.removeLayer(this.rainWaterIconLayerThree)
|
this.map2D.removeLayer(this.rainWaterIconLayerFour)
|
this.map2D.removeLayer(this.rainWaterIconLayerFive)
|
this.map2D.removeLayer(this.rainWaterIconLayerSix)
|
|
this.map2D.removeLayer(this.rainWaterGeoJson)
|
|
if (this.fzLayer) this.map2D.removeLayer(this.fzLayer)
|
|
this.map2D.un('singleclick', this.layerClick)
|
this.map2D.un('pointermove', this.seleceFeature)
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
