/*
|
* @Author: Morpheus
|
* @Date: 2021-05-06 16:10:30
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-11-02 17:24:07
|
*/
|
<template>
|
<el-row
|
class="flash-flood-risk fxyj-base"
|
v-loading="loading"
|
element-loading-text="拼命加载中"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.8)"
|
v-loading.fullscreen.lock="loading"
|
>
|
<div v-show="boxShow" class="content-box">
|
<div class="risk-content">
|
<div class="risk-early">
|
<div class="header">预警信息</div>
|
<div class="content" @click="earlyTrigger($event)">
|
<p v-html="oneTextEarly" ref="oneText"></p>
|
</div>
|
</div>
|
|
<div class="risk-table">
|
<div class="header">
|
<el-date-picker
|
v-model="tableTime"
|
v-show="realShow"
|
type="datetime"
|
format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期时间"
|
align="right"
|
:picker-options="timePickerOptions"
|
size="small"
|
@change="searchTable"
|
></el-date-picker>
|
|
<el-select
|
v-model="shvalue"
|
size="small"
|
@change="shTypeChange"
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in shoptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
|
<el-button
|
size="small"
|
type="primary"
|
@click="exportExcel"
|
icon="iconfont el-icon-daochu"
|
>导出</el-button>
|
</div>
|
<div class="content">
|
<div>
|
<div class="one" ref="oneTable">
|
<el-table
|
:data="oneDataTable"
|
style="width: 100%"
|
size="small"
|
@row-click="regionFlyto"
|
@sort-change="leftSortChange"
|
:border="true"
|
>
|
<el-table-column align="center" prop="行政区" label="行政区"></el-table-column>
|
|
<el-table-column
|
label="危险区"
|
align="center"
|
prop="危险区"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span
|
@click="
|
scope.row['危险区'] > 0 &&
|
dialogOpen(scope.row, 'wx')
|
"
|
>{{ scope.row['危险区'] }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
v-if="radioValue == '1小时'"
|
label="1小时"
|
align="center"
|
prop="oneTime"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span
|
@click="
|
scope.row['oneTime'] > 0 &&
|
dialogOpen(scope.row, 'oneData')
|
"
|
>{{ scope.row['oneTime'] }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="2小时"
|
align="center"
|
v-if="shvalue == '定值对比' && showDrp2 && radioValue == '2小时'"
|
prop="twoTime"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span
|
@click="
|
scope.row['twoTime'] > 0 &&
|
dialogOpen(scope.row, 'twoData')
|
"
|
>{{ scope.row['twoTime'] }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
v-if="radioValue == '3小时'"
|
label="3小时"
|
align="center"
|
prop="threeTime"
|
sortable="custom"
|
>
|
<template slot-scope="scope">
|
<span
|
@click="
|
scope.row['threeTime'] > 0 &&
|
dialogOpen(scope.row, 'threeData')
|
"
|
>{{ scope.row['threeTime'] }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="短信" align="center">
|
<template slot-scope="scope">
|
<el-button
|
v-if="shvalue == '定值对比'"
|
size="small"
|
:type="
|
scope.row.oneData.length > 0 ||
|
scope.row.twoData.length > 0 ||
|
scope.row.threeData.length > 0
|
? 'primary'
|
: 'info'
|
"
|
@click.stop="notePopup(scope.row, 'sh')"
|
style="padding: 4px 6px"
|
:disabled="
|
!(
|
scope.row.oneData.length > 0 ||
|
scope.row.twoData.length > 0 ||
|
scope.row.threeData.length > 0
|
)
|
"
|
>短信</el-button>
|
|
<el-button
|
v-if="shvalue == '预警指标对比'"
|
size="small"
|
:type="
|
scope.row.oneData.length > 0 ||
|
scope.row.threeData.length > 0
|
? 'primary'
|
: 'info'
|
"
|
@click.stop="notePopup(scope.row, 'sh')"
|
style="padding: 4px 6px"
|
:disabled="
|
!(
|
scope.row.oneData.length > 0 ||
|
scope.row.threeData.length > 0
|
)
|
"
|
>短信</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 所有图例包括右侧复选框菜单 -->
|
<div>
|
<div>
|
<div class="risk-child-item">
|
<ul>
|
<li>
|
<div>
|
<el-radio-group v-model="dataType" @change="radioChanged">
|
<el-radio
|
:label="item.label"
|
v-for="(
|
item, index
|
) in dataList"
|
:key="index"
|
>{{item.value}}</el-radio>
|
</el-radio-group>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
|
<layerControl ref="layer-control" :legendsDetail="legendData"></layerControl>
|
|
<div v-show="riskPopupFlag" class="risk-detail-popup" id="riskDetailPopup">
|
<ul v-html="detailPopupContent"></ul>
|
</div>
|
|
<el-dialog
|
title="预报雨量"
|
class="forecast-box"
|
:visible.sync="forecastRain"
|
width="30%"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
@close="forecastClose"
|
>
|
<div class="container">
|
<div>
|
区域：
|
<el-select v-model="regionStcd" placeholder="请选择区域">
|
<el-option
|
v-for="item in selectRegion"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
|
<div>
|
时段：
|
<el-select v-model="selectTimeValue" placeholder="请选择时段">
|
<el-option
|
v-for="item in selectTimes"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
|
<div>
|
雨量：
|
<el-input v-model="forecastRainValue" placeholder="请输入雨量值mm"></el-input>
|
</div>
|
|
<el-button type="primary" @click="saveforecast">确认</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog
|
:title="noteTitle"
|
class="noteDialog"
|
:visible.sync="noteVisible"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<p v-html="noteText"></p>
|
|
<el-button type="primary" size="small" @click="copyText">复制</el-button>
|
</el-dialog>
|
|
<el-dialog
|
class="earlyDialog"
|
:visible.sync="earlyVisible"
|
width="width"
|
size="small"
|
: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-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="exportExcelDialog"
|
icon="iconfont el-icon-daochu"
|
>数据导出</el-button>
|
</div>
|
</div>
|
<div class="dialog-data-table">
|
<el-table
|
:data="
|
earlyTable.slice(
|
(currpage - 1) * pagesize,
|
currpage * pagesize
|
)
|
"
|
@sort-change="onSortChange"
|
style="width: 100%"
|
>
|
<el-table-column align="center" prop="ind" label="序号" width="96"></el-table-column>
|
|
<el-table-column label="县(区)" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.county || scope.row.ADDVNM }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="站码" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.cenconding || scope.row.STCD }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="站名" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.crainfall || scope.row.STNM }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="山洪危险区全称" align="center">
|
<template slot-scope="scope">{{ scope.row.STLC }}</template>
|
</el-table-column>
|
|
<el-table-column
|
v-if="radioValue == '1小时'"
|
label="1小时实时雨量(mm)"
|
align="center"
|
sortable="custom"
|
prop="drp1"
|
></el-table-column>
|
|
<el-table-column
|
v-if="radioValue == '1小时'"
|
label="1小时雨量预警指标(mm)"
|
align="center"
|
sortable="custom"
|
prop="gohour"
|
></el-table-column>
|
|
<el-table-column
|
label="2小时实时雨量(mm)"
|
align="center"
|
v-if="shvalue == '定值对比' && showDrp2 && radioValue == '2小时'"
|
sortable="custom"
|
prop="drp2"
|
></el-table-column>
|
|
<el-table-column
|
label="2小时雨量预警指标(mm)"
|
align="center"
|
v-if="shvalue == '定值对比' && showDrp2 && radioValue == '2小时'"
|
sortable="custom"
|
prop="gtwohour"
|
></el-table-column>
|
|
<el-table-column
|
v-if="radioValue == '3小时'"
|
label="3小时实时雨量(mm)"
|
align="center"
|
sortable="custom"
|
prop="drp3"
|
></el-table-column>
|
|
<el-table-column
|
v-if="radioValue == '3小时'"
|
label="3小时雨量预警指标(mm)"
|
align="center"
|
sortable="custom"
|
prop="gthour"
|
></el-table-column>
|
|
<el-table-column label="是否预警" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.YJ }}</span>
|
</template>
|
</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="earlyTable.length"
|
></el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
|
<div v-show="raidoShow" class="time-frame-radio" ref="radioBox">
|
<el-radio-group @change="radioClick" v-model="radioValue">
|
<el-radio-button label="1小时"></el-radio-button>
|
<el-radio-button v-show="shvalue == '定值对比'" label="2小时"></el-radio-button>
|
<el-radio-button label="3小时"></el-radio-button>
|
</el-radio-group>
|
|
<el-date-picker
|
v-model="tableTime"
|
v-show="realShow"
|
type="datetime"
|
format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期时间"
|
align="right"
|
:picker-options="timePickerOptions"
|
size="small"
|
@change="searchTable"
|
></el-date-picker>
|
</div>
|
</el-row>
|
</template>
|
|
<script>
|
import fzJson from '@/geojson/fz.json'
|
import { getShYbList, getSHYiList, getSHTwList, getSHTrList } from '@/api/riskEarlyWarning/index.js'
|
|
import Feature from 'ol/Feature.js'
|
import Point from 'ol/geom/Point.js'
|
import { Icon, Style, Circle, Stroke } from 'ol/style.js'
|
import ImageStatic from 'ol/source/ImageStatic.js'
|
import ImageLayer from 'ol/layer/Image'
|
import { boundingExtent } from 'ol/extent'
|
import { getVectorContext } from 'ol/render'
|
|
// 山洪灾害需要图
|
// eslint-disable-next-line import/no-duplicates
|
import shzcPng from '@/assets/img/mountain-on-green.png'
|
// eslint-disable-next-line import/no-duplicates
|
import shljPng from '@/assets/img/mountain-on-red.png'
|
|
import shZc from '@/assets/img/sh-wyj.png'
|
import shYj from '@/assets/img/fxyj.png'
|
|
import store from '@/store/' // 全局状态
|
|
// 导出excel表格所需
|
// eslint-disable-next-line camelcase
|
import { export_json_to_excel } from '@/assets/libs/Export2Excel.js'
|
|
export default {
|
data () {
|
return {
|
moupUrl: '/img/moup.png',
|
mouUrl: '/mou.png',
|
raidoShow: true,
|
radioValue: '1小时',
|
boxShow: false,
|
showDrp2: false,
|
dataFlag: false,
|
dataType: '实时',
|
dataList: [
|
{
|
value: '实时',
|
label: '实时'
|
},
|
{
|
value: '预报',
|
label: '预报'
|
}
|
],
|
// 是否显示时间搜索
|
realShow: true,
|
// 预报弹框
|
forecastRain: false,
|
|
shoptions: [{
|
value: '定值对比',
|
label: '定值对比'
|
}, {
|
value: '预警指标对比',
|
label: '预警指标对比'
|
}],
|
shvalue: '定值对比',
|
|
// 详情搜索
|
searchSite: '',
|
searchStcd: '',
|
// 分页相关
|
currpage: 1,
|
pagesize: 20,
|
// 预警详细弹窗
|
earlyVisible: false,
|
// 预警详细表格
|
dislogEarlyTable: [],
|
earlyTable: [],
|
// 预警详细标题
|
earlyTitle: '',
|
// 短信得标题
|
noteTitle: '',
|
// 短信得文字
|
noteText: '',
|
// 短信得弹框
|
noteVisible: false,
|
// 加载中// 所有图层
|
riskLayerNormal: store.state.openlayers.riskLayerNormal,
|
riskLayerWarn: store.state.openlayers.riskLayerWarn,
|
|
loading: true,
|
map2D: store.state.openlayers.map2D,
|
|
// 预警信息
|
oneTextEarly: '',
|
|
// 数据表格
|
oneDataTable: [],
|
|
// 图层控制组件的数据
|
legendData: [
|
{
|
title: '山洪灾害图例',
|
content: [
|
{
|
label: '正常',
|
src: shZc,
|
smallsrc: shzcPng,
|
type: 'riskLayerNormal',
|
value: 0,
|
class: 'text-green',
|
btnClass: ''
|
},
|
{
|
label: '预警',
|
src: shYj,
|
smallsrc: shljPng,
|
type: 'riskLayerWarn',
|
value: 0,
|
class: 'text-red',
|
btnClass: 'btn-yj'
|
}
|
]
|
}
|
],
|
|
// 地图弹框开关
|
riskPopupFlag: false,
|
|
// 左侧底部时间
|
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)
|
}
|
}
|
]
|
},
|
// 表格事件查询
|
tableTime: new Date().setTime(new Date().getTime() - 3600 * 1000),
|
|
// 弹框内容
|
detailPopupContent: '',
|
|
regionStcd: '',
|
|
selectRegion: [
|
{
|
label: '抚州市',
|
value: '361000'
|
},
|
{
|
label: '南城县',
|
value: '361021'
|
},
|
{
|
label: '广昌县',
|
value: '361030'
|
},
|
{
|
label: '乐安县',
|
value: '361025'
|
},
|
{
|
label: '南丰县',
|
value: '361023'
|
},
|
{
|
label: '黎川县',
|
value: '361022'
|
},
|
{
|
label: '东乡区',
|
value: '361029'
|
},
|
{
|
label: '金溪县',
|
value: '361027'
|
},
|
{
|
label: '宜黄县',
|
value: '361026'
|
},
|
{
|
label: '崇仁县',
|
value: '361024'
|
},
|
{
|
label: '临川区',
|
value: '361002'
|
},
|
{
|
label: '资溪县',
|
value: '361028'
|
}
|
],
|
|
selectTimeValue: '',
|
|
selectTimes: [
|
{
|
value: 1,
|
label: '1小时'
|
},
|
{
|
value: 3,
|
label: '3小时'
|
}
|
],
|
|
forecastRainValue: '',
|
|
layerPng: null,
|
|
radius: 0,
|
speed: 0.12
|
|
}
|
},
|
created () {
|
},
|
beforeMount () { },
|
mounted () {
|
this.$parent.$parent.resize('396px', '396px', true, '山洪灾害')
|
|
this.map2D.addLayer(this.riskLayerNormal)
|
this.map2D.addLayer(this.riskLayerWarn)
|
|
this.$nextTick(function () {
|
this.map2D.on('pointermove', this.seleceFeature)
|
|
this.map2D.on('singleclick', this.layerClick)
|
|
this.riskLayerWarn.on('postrender', this.flickerPoint)
|
|
var extent = [114.7, 25.5, 117.7, 28.5]
|
|
this.map2D.addLayer(new ImageLayer({
|
zIndex: 6,
|
opacity: 0.7,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: 'img/gz.png',
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
}))
|
})
|
|
this.getShDate()
|
},
|
methods: {
|
flickerPoint (e) {
|
if (this.radius >= 8) this.radius = 0
|
const pointStyle = new Style({
|
image: new Circle({
|
radius: this.radius,
|
stroke: new Stroke({
|
color: 'rgba(255,0,0,0.5)',
|
width: 2 // 设置宽度
|
})
|
})
|
})
|
// 获取矢量要素上下文
|
const vectorContext = getVectorContext(e)
|
vectorContext.setStyle(pointStyle)
|
this.riskLayerWarn.getSource().getFeatures().forEach((feature) => {
|
vectorContext.drawGeometry(feature.getGeometry())
|
})
|
this.radius = this.radius + this.speed // 调整闪烁速度
|
// 请求地图渲染（在下一个动画帧处）
|
this.map2D.render()
|
},
|
regionFlyto (row) {
|
var regionName = row['行政区']
|
|
if (regionName == '抚州市') {
|
var view = this.map2D.getView()
|
|
view.setCenter([116.46736567614217, 27.529382927598178])
|
|
view.setZoom(9.2)
|
} else {
|
fzJson.features.forEach((item, index) => {
|
if (item.properties.name == regionName) {
|
var arr = item.geometry.coordinates
|
|
this.zoomToExtent(boundingExtent(arr[0][0]))
|
}
|
})
|
}
|
},
|
|
// 地图缩放，通过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));
|
},
|
|
radioClick () {
|
if (this.shvalue == '定值对比') {
|
this.getShDate()
|
} else {
|
this.getShDates()
|
}
|
},
|
childBoxResize (val) {
|
this.boxShow = val
|
|
// this.$refs['layer-control'].layerControlResize(val)
|
|
// if (val == true) {
|
// this.$refs.radioBox.style.left = 'calc((100% + 396px) / 2) '
|
// } else {
|
// this.$refs.radioBox.style.left = '50%'
|
// }
|
},
|
forecastClose () {
|
if (this.dataFlag == false) {
|
this.dataType = '实时'
|
this.realShow = true
|
}
|
},
|
// 右侧单选框改变事件
|
radioChanged (e) {
|
if (this.layerPng) this.map2D.removeLayer(this.layerPng)
|
|
if (this.dataType == '实时') {
|
this.radioValue = '1小时'
|
this.realShow = true
|
this.raidoShow = true
|
this.dataFlag = false
|
if (this.shvalue == '定值对比') {
|
this.getShDate()
|
} else {
|
this.getShDates()
|
}
|
|
this.earlyVisible = false
|
} else {
|
this.regionStcd = ''
|
this.selectTimeValue = ''
|
this.forecastRainValue = ''
|
this.realShow = false
|
|
this.forecastRain = true
|
}
|
},
|
// 定值与预警指标对比事件
|
shTypeChange (value) {
|
this.earlyVisible = false
|
this.radioValue = '1小时'
|
if (value == '定值对比') {
|
if (this.dataType == '实时') {
|
this.getShDate()
|
} else {
|
this.getSHYbDate(1)
|
}
|
} else {
|
if (this.dataType == '实时') {
|
this.getShDates()
|
} else {
|
this.getSHYbDate(2)
|
}
|
}
|
},
|
// 预报弹框中点击确认事件
|
saveforecast () {
|
if (this.regionStcd == '') {
|
this.$message('请选择区域')
|
|
return
|
}
|
|
if (this.selectTimeValue == '') {
|
this.$message('请选择时段')
|
|
return
|
}
|
|
if (this.selectTimeValue == 1) {
|
this.radioValue = '1小时'
|
} else if (this.selectTimeValue == 3) {
|
this.radioValue = '3小时'
|
}
|
|
if (this.forecastRainValue == '') {
|
this.$message('请输入雨量值')
|
|
return
|
}
|
this.forecastRain = false
|
this.dataFlag = true
|
this.raidoShow = false
|
|
if (this.shvalue == '定值对比') {
|
this.getSHYbDate(1)
|
} else {
|
this.getSHYbDate(2)
|
}
|
},
|
// 时间：1小时，3小时，6小时对应的时间
|
searchTimeOptions () {
|
let search = ''
|
const time = new Date()
|
|
if (this.selectTimeValue == 1) {
|
search = time.getTime() + 3600 * 1000 * 1
|
} else if (this.selectTimeValue == 2) {
|
search = time.getTime() + 3600 * 1000 * 2
|
} else if (this.selectTimeValue == 3) {
|
search = time.getTime() + 3600 * 1000 * 3
|
} else if (this.selectTimeValue == 6) {
|
search = time.getTime() + 3600 * 1000 * 6
|
} else if (this.selectTimeValue == 24) {
|
search = time.getTime() + 3600 * 1000 * 24
|
}
|
|
var selectTime = new Date(search)
|
|
const saveTime =
|
selectTime.getFullYear() +
|
'-' +
|
this.disposeTime(selectTime.getMonth() + 1) +
|
'-' +
|
this.disposeTime(selectTime.getDate()) +
|
' ' +
|
this.disposeTime(selectTime.getHours()) +
|
':' +
|
this.disposeTime(selectTime.getMinutes()) +
|
':' +
|
this.disposeTime(selectTime.getSeconds())
|
|
return saveTime
|
},
|
|
dataCompare (property) {
|
return function (a, b) {
|
var value1 = a[property]
|
var value2 = b[property]
|
return value2 - value1
|
}
|
},
|
|
// 拆分数组
|
groupArray (array, subGroupLength) {
|
var a = array
|
var b = a.splice(subGroupLength)
|
return [a, b]
|
},
|
|
// 实时下定值对比山洪灾害获取
|
getShDate () {
|
var that = this
|
that.loading = true
|
that.showDrp2 = true
|
that.oneDataTable = []
|
that.legendData[0].content[0].value = 0
|
that.legendData[0].content[1].value = 0
|
that.riskLayerNormal.getSource().clear()
|
that.riskLayerWarn.getSource().clear()
|
this.legendData[0].content[0].btnClass = ''
|
this.legendData[0].content[1].btnClass = 'btn-yj'
|
if (that.layerPng != null) {
|
that.map2D.removeLayer(that.layerPng)
|
}
|
|
if (that.tableTime.length == 0) {
|
that.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
|
const startTime = new Date(that.tableTime)
|
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
that.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
that.disposeTime(startTime.getDate()) +
|
' ' +
|
that.disposeTime(startTime.getHours()) +
|
':' +
|
that.disposeTime(startTime.getMinutes()) +
|
':' +
|
that.disposeTime(startTime.getSeconds())
|
|
const times = that.getNewTime(start)
|
|
var getType = null
|
|
var dataObj = null
|
|
if (that.radioValue == '1小时') {
|
getType = getSHYiList
|
dataObj = {
|
type: 1,
|
time: start,
|
dateEnds1: times.one
|
}
|
} else if (that.radioValue == '2小时') {
|
getType = getSHTwList
|
dataObj = {
|
type: 1,
|
time: start,
|
dateEnds2: times.two
|
}
|
} else if (that.radioValue == '3小时') {
|
getType = getSHTrList
|
dataObj = {
|
type: 1,
|
time: start,
|
dateEnds3: times.three
|
}
|
}
|
|
getType(dataObj).then((res) => {
|
var twoArr = that.groupArray(res.data.data, res.data.data.length - 1)
|
|
var result = twoArr[0]
|
|
var yjArr = []
|
|
result.forEach(function (item, index) {
|
if (
|
item.List.LGTD &&
|
item.List.LTTD &&
|
item.List.STCD != '62402400'
|
) {
|
item.List.status = 1
|
item.List.gohour = 30.0
|
item.List.gohour = item.List.gohour.toFixed(1)
|
item.List.gtwohour = 50.0
|
item.List.gtwohour = item.List.gtwohour.toFixed(1)
|
item.List.gthour = 80.0
|
item.List.gthour = item.List.gthour.toFixed(1)
|
|
item.List.drp2 = item.List.drp1
|
item.List.drp3 = item.List.drp1
|
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.List.ADDVNM != it.行政区) {
|
a += 1
|
} else {
|
it.危险区 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.List.ADDVNM,
|
危险区: 1,
|
oneTime: 0,
|
twoTime: 0,
|
threeTime: 0,
|
oneData: [],
|
twoData: [],
|
threeData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.List.ADDVNM,
|
危险区: 1,
|
oneTime: 0,
|
twoTime: 0,
|
threeTime: 0,
|
oneData: [],
|
twoData: [],
|
threeData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.List.ADDVNM) {
|
if (item.flage1 && item.flage1 == 'true') {
|
it.oneTime += 1
|
it.oneData.push(item.List)
|
}
|
if (item.flage2 && item.flage2 == 'true') {
|
it.twoTime += 1
|
it.twoData.push(item.List)
|
}
|
if (item.flage3 && item.flage3 == 'true') {
|
it.threeTime += 1
|
it.threeData.push(item.List)
|
}
|
|
it.wx.push(item.List)
|
}
|
})
|
|
if ((item.flage1 && item.flage1 == 'true') ||
|
(item.flage2 && item.flage2 == 'true') ||
|
(item.flage3 && item.flage3 == 'true')) {
|
item.List.YJ = '预警'
|
|
that.addPoint(
|
item.List.LGTD,
|
item.List.LTTD,
|
shljPng,
|
'riskLayerWarn',
|
item.List,
|
0.22
|
)
|
|
that.legendData[0].content[1].value += 1
|
|
yjArr.push(item)
|
}
|
|
if ((item.flage1 && item.flage1 == 'false') ||
|
(item.flage2 && item.flage2 == 'false') ||
|
(item.flage3 && item.flage3 == 'false')) {
|
item.List.YJ = '正常'
|
|
that.addPoint(
|
item.List.LGTD,
|
item.List.LTTD,
|
shzcPng,
|
'riskLayerNormal',
|
item.List,
|
0.18
|
)
|
|
that.legendData[0].content[0].value += 1
|
}
|
}
|
})
|
|
var textContentOne = ''
|
var textContentTwo = ''
|
var textContentThree = ''
|
for (
|
var j = 0, a = 0, b = 0, c = 0, d = 0, f = [], g = [], k = [], l = [];
|
j < that.oneDataTable.length;
|
j++
|
) {
|
a += that.oneDataTable[j].危险区
|
b += that.oneDataTable[j].oneTime
|
c += that.oneDataTable[j].twoTime
|
d += that.oneDataTable[j].threeTime
|
|
that.oneDataTable[j].wx.forEach(item => {
|
if (item.drp1 == undefined || item.drp1 == null) {
|
item.drp1 = ''
|
} else {
|
item.drp1 = Number(item.drp1).toFixed(1)
|
}
|
|
if (item.drp2 == undefined || item.drp2 == null) {
|
item.drp2 = ''
|
} else {
|
item.drp2 = Number(item.drp2).toFixed(1)
|
}
|
|
if (item.drp3 == undefined || item.drp3 == null) {
|
item.drp3 = ''
|
} else {
|
item.drp3 = Number(item.drp3).toFixed(1)
|
}
|
})
|
|
f.push(...that.oneDataTable[j].oneData)
|
g.push(...that.oneDataTable[j].twoData)
|
k.push(...that.oneDataTable[j].threeData)
|
l.push(...that.oneDataTable[j].wx)
|
|
if (that.oneDataTable[j].oneTime > 0) {
|
textContentOne += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='oneData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='oneData'> ${that.oneDataTable[j].oneTime} </strong> <i>个；</i> </span>`
|
}
|
|
if (that.oneDataTable[j].twoTime > 0) {
|
textContentTwo += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='twoData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='twoData'> ${that.oneDataTable[j].twoTime} </strong> <i>个；</i> </span>`
|
}
|
|
if (that.oneDataTable[j].threeTime > 0) {
|
textContentThree += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='threeData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='threeData'> ${that.oneDataTable[j].threeTime} </strong> <i>个；</i> </span>`
|
}
|
}
|
|
that.oneDataTable.unshift({
|
行政区: '抚州市',
|
危险区: a,
|
oneTime: b,
|
twoTime: c,
|
threeTime: d,
|
oneData: f,
|
twoData: g,
|
threeData: k,
|
wx: l
|
})
|
|
var ooo = {
|
行政区: '抚州市',
|
危险区: a,
|
oneTime: b,
|
twoTime: c,
|
threeTime: d,
|
oneData: f,
|
twoData: g,
|
threeData: k,
|
wx: l
|
}
|
|
// 生成文字预警信息
|
that.oneTextEarly = `抚州市 <span ii='0' datac='${JSON.stringify(ooo)}' typec='wx'> ${a} </span> 个山洪灾害危险区中，`
|
|
const timestr = new Date(that.tableTime)
|
|
const timetext =
|
timestr.getFullYear() +
|
'-' +
|
that.disposeTime(timestr.getMonth() + 1) +
|
'-' +
|
that.disposeTime(timestr.getDate()) +
|
' ' +
|
that.disposeTime(timestr.getHours()) +
|
':' +
|
that.disposeTime(timestr.getMinutes())
|
|
var text = `${timetext}抚州市${a}个山洪灾害危险区中，`
|
|
var yjArrT = yjArr.sort(that.dataCompare('num'))
|
|
if (that.radioValue == '1小时') {
|
that.oneTextEarly += `1小时预警<span ii='1' datac='${JSON.stringify(ooo)}' typec='oneData'> ${b} </span>个${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
text += `1小时预警${b}个。`
|
} else if (that.radioValue == '2小时') {
|
that.oneTextEarly += `2小时预警<span ii='1' datac='${JSON.stringify(ooo)}' typec='twoData'> ${c} </span>个${textContentTwo.length > 0
|
? '（' + textContentTwo + '）'
|
: ''
|
}。`
|
text += `2小时预警${c}个。`
|
} else if (that.radioValue == '3小时') {
|
that.oneTextEarly += `3小时预警<span ii='2' datac='${JSON.stringify(ooo)}' typec='threeData'> ${d} </span>个${textContentThree.length > 0
|
? '（' + textContentThree + '）'
|
: ''
|
}。`
|
text += `3小时预警${d}个。`
|
}
|
|
var strnum = ''
|
|
var strtext = ''
|
|
if (yjArrT.length > 0) {
|
strnum = '超预警最大为：'
|
|
strtext += `${yjArrT[0].List.STLC}降雨量为${yjArrT[0].List.drp1}mm`
|
|
if (yjArrT.length > 1) {
|
strnum = '超预警前二分别为：'
|
|
strtext += `，${yjArrT[1].List.STLC}降雨量为${yjArrT[1].List.drp1}mm`
|
} else {
|
strtext += '。'
|
}
|
|
if (yjArrT.length > 2) {
|
strnum = '超预警前三分别为：'
|
|
strtext += `，${yjArrT[2].List.STLC}降雨量为${yjArrT[2].List.drp1}mm。`
|
} else {
|
strtext += '。'
|
}
|
}
|
|
that.$parent.$parent.updateText(text + strnum + strtext)
|
|
var extent = [114.7, 25.5, 117.7, 28.5]
|
|
var img = 'img/' + twoArr[1][0].url
|
|
that.layerPng = new ImageLayer({
|
zIndex: 6,
|
opacity: 0.7,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: img,
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
})
|
|
that.map2D.addLayer(that.layerPng)
|
|
that.loading = false
|
})
|
},
|
|
// 实时下预警指标对比山洪灾害获取
|
getShDates () {
|
var that = this
|
that.loading = true
|
that.showDrp2 = false
|
that.oneDataTable = []
|
that.legendData[0].content[0].value = 0
|
that.legendData[0].content[1].value = 0
|
that.riskLayerNormal.getSource().clear()
|
that.riskLayerWarn.getSource().clear()
|
this.legendData[0].content[0].btnClass = ''
|
this.legendData[0].content[1].btnClass = 'btn-yj'
|
if (that.layerPng != null) {
|
that.map2D.removeLayer(that.layerPng)
|
}
|
|
if (that.tableTime.length == 0) {
|
that.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
|
const startTime = new Date(that.tableTime)
|
|
const start =
|
startTime.getFullYear() +
|
'-' +
|
that.disposeTime(startTime.getMonth() + 1) +
|
'-' +
|
that.disposeTime(startTime.getDate()) +
|
' ' +
|
that.disposeTime(startTime.getHours()) +
|
':' +
|
that.disposeTime(startTime.getMinutes()) +
|
':' +
|
that.disposeTime(startTime.getSeconds())
|
|
const times = that.getNewTime(start)
|
|
var getType = null
|
|
var dataObj = null
|
|
if (that.radioValue == '1小时') {
|
getType = getSHYiList
|
dataObj = {
|
type: 0,
|
time: start,
|
dateEnds1: times.one
|
}
|
} else if (that.radioValue == '3小时') {
|
getType = getSHTrList
|
dataObj = {
|
type: 0,
|
time: start,
|
dateEnds3: times.three
|
}
|
}
|
|
getType(dataObj).then((res) => {
|
var twoArr = that.groupArray(res.data.data, res.data.data.length - 1)
|
|
var result = twoArr[0]
|
|
var yjArr = []
|
|
result.forEach(function (item, index) {
|
if (
|
item.List.dj &&
|
item.List.bw
|
) {
|
item.List.status = item.status
|
|
if (item.List.status == 2) {
|
item.List.gohour = item.List.gohours
|
item.List.gthour = item.List.gthours
|
item.List.gohour = item.List.gohour.toFixed(1)
|
item.List.gthour = item.List.gthour.toFixed(1)
|
}
|
|
item.List.ADDVNM = item.List.county
|
item.List.STCD = item.List.cenconding
|
item.List.STNM = item.List.crainfall
|
item.List.STLC = item.List.county + item.List.village_group
|
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.List.county != it.行政区) {
|
a += 1
|
} else {
|
it.危险区 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.List.county,
|
危险区: 1,
|
oneTime: 0,
|
threeTime: 0,
|
oneData: [],
|
threeData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.List.county,
|
危险区: 1,
|
oneTime: 0,
|
threeTime: 0,
|
oneData: [],
|
threeData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.List.county) {
|
if (item.flage1 == 'true') {
|
it.oneTime += 1
|
it.oneData.push(item.List)
|
}
|
|
if (item.flage3 == 'true') {
|
it.threeTime += 1
|
it.threeData.push(item.List)
|
}
|
|
it.wx.push(item.List)
|
}
|
})
|
|
if ((item.flage1 && item.flage1 == 'true') ||
|
(item.flage3 && item.flage3 == 'true')) {
|
item.List.YJ = '预警'
|
|
that.addPoint(
|
item.List.dj,
|
item.List.bw,
|
shljPng,
|
'riskLayerWarn',
|
item.List,
|
0.22
|
)
|
|
that.legendData[0].content[1].value += 1
|
|
yjArr.push(item)
|
}
|
|
if ((item.flage1 && item.flage1 == 'false') ||
|
(item.flage3 && item.flage3 == 'false')) {
|
item.List.YJ = '正常'
|
|
that.addPoint(
|
item.List.dj,
|
item.List.bw,
|
shzcPng,
|
'riskLayerNormal',
|
item.List,
|
0.18
|
)
|
|
that.legendData[0].content[0].value += 1
|
}
|
}
|
})
|
var textContentOne = ''
|
var textContentTwo = ''
|
for (
|
var j = 0, a = 0, b = 0, c = 0, d = [], e = [], f = [];
|
j < that.oneDataTable.length;
|
j++
|
) {
|
a += that.oneDataTable[j].危险区
|
b += that.oneDataTable[j].oneTime
|
c += that.oneDataTable[j].threeTime
|
|
that.oneDataTable[j].wx.forEach(item => {
|
if (item.drp1 == undefined || item.drp1 == null) {
|
item.drp1 = ''
|
} else {
|
item.drp1 = Number(item.drp1).toFixed(1)
|
}
|
|
if (item.drp3 == undefined || item.drp3 == null) {
|
item.drp3 = ''
|
} else {
|
item.drp3 = Number(item.drp3).toFixed(1)
|
}
|
})
|
|
d.push(...that.oneDataTable[j].oneData)
|
e.push(...that.oneDataTable[j].threeData)
|
f.push(...that.oneDataTable[j].wx)
|
|
if (that.oneDataTable[j].oneTime > 0) {
|
textContentOne += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='oneData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='oneData'> ${that.oneDataTable[j].oneTime} </strong> <i>个；</i> </span>`
|
}
|
if (that.oneDataTable[j].threeTime > 0) {
|
textContentTwo += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='threeData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='threeData'> ${that.oneDataTable[j].threeTime} </strong> <i>个；</i> </span>`
|
}
|
}
|
|
that.oneDataTable.unshift({
|
行政区: '抚州市',
|
危险区: a,
|
oneTime: b,
|
threeTime: c,
|
oneData: d,
|
threeData: e,
|
wx: f
|
})
|
|
var ooo = {
|
行政区: '抚州市',
|
危险区: a,
|
oneTime: b,
|
threeTime: c,
|
oneData: d,
|
threeData: e,
|
wx: f
|
}
|
|
// 生成文字预警信息
|
that.oneTextEarly = `抚州市 <span ii='0' datac='${JSON.stringify(ooo)}' typec='wx'> ${a} </span> 个山洪灾害危险区中，`
|
|
const timestr = new Date(that.tableTime)
|
|
const timetext =
|
timestr.getFullYear() +
|
'-' +
|
that.disposeTime(timestr.getMonth() + 1) +
|
'-' +
|
that.disposeTime(timestr.getDate()) +
|
' ' +
|
that.disposeTime(timestr.getHours()) +
|
':' +
|
that.disposeTime(timestr.getMinutes())
|
|
var yjArrT = yjArr.sort(that.dataCompare('num'))
|
|
var text = `${timetext}抚州市${a}个山洪灾害危险区中，`
|
|
if (that.radioValue == '1小时') {
|
that.oneTextEarly += `1小时预警<span ii='1' datac='${JSON.stringify(ooo)}' typec='oneData'> ${b} </span>个${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
text += `1小时预警${b}个。`
|
} else if (that.radioValue == '3小时') {
|
that.oneTextEarly += `3小时预警<span ii='2' datac='${JSON.stringify(ooo)}' typec='threeData'> ${c} </span>个${textContentTwo.length > 0
|
? '（' + textContentTwo + '）'
|
: ''
|
}。`
|
text += `3小时预警${c}。`
|
}
|
|
var strnum = ''
|
|
var strtext = ''
|
|
if (yjArrT.length > 0) {
|
strnum = '超预警最大为：'
|
|
strtext += `${yjArrT[0].List.STLC}降雨量为${yjArrT[0].List.drp1}mm`
|
|
if (yjArrT.length > 1) {
|
strnum = '超预警前二分别为：'
|
|
strtext += `，${yjArrT[1].List.STLC}降雨量为${yjArrT[1].List.drp1}mm`
|
} else {
|
strtext += '。'
|
}
|
|
if (yjArrT.length > 2) {
|
strnum = '超预警前三分别为：'
|
|
strtext += `，${yjArrT[2].List.STLC}降雨量为${yjArrT[2].List.drp1}mm。`
|
} else {
|
strtext += '。'
|
}
|
}
|
|
that.$parent.$parent.updateText(text + strnum + strtext)
|
|
var extent = [114.7, 25.5, 117.7, 28.5]
|
|
var img = 'img/' + twoArr[1][0].url
|
|
that.layerPng = new ImageLayer({
|
zIndex: 6,
|
opacity: 0.7,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: img,
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
})
|
|
that.map2D.addLayer(that.layerPng)
|
|
that.loading = false
|
})
|
},
|
|
getSHYbDate (type) {
|
var that = this
|
that.loading = true
|
that.showDrp2 = false
|
that.oneDataTable = []
|
that.legendData[0].content[0].value = 0
|
that.legendData[0].content[1].value = 0
|
|
that.riskLayerNormal.getSource().clear()
|
that.riskLayerWarn.getSource().clear()
|
this.legendData[0].content[0].btnClass = ''
|
this.legendData[0].content[1].btnClass = 'btn-yj'
|
if (that.layerPng != null) {
|
that.map2D.removeLayer(that.layerPng)
|
}
|
|
getShYbList({
|
addvcd: that.regionStcd,
|
time: that.searchTimeOptions(),
|
intv: that.selectTimeValue,
|
drp: that.forecastRainValue,
|
type: type
|
}).then((res) => {
|
var result = res.data.data
|
result.forEach(function (item, index) {
|
if (
|
item.List.LGTD &&
|
item.List.LTTD
|
) {
|
item.List.status = 1
|
item.List.gohour = 30.0
|
item.List.gohour = item.List.gohour.toFixed(1)
|
item.List.gtwohour = 50.0
|
item.List.gtwohour = item.List.gtwohour.toFixed(1)
|
item.List.gthour = 80.0
|
item.List.gthour = item.List.gthour.toFixed(1)
|
|
if (item.List.drp == undefined || item.List.drp == null) {
|
item.List.drp = ''
|
} else {
|
item.List.drp = Number(item.List.drp).toFixed(1)
|
}
|
|
item.List.drp1 = 0
|
item.List.drp3 = 0
|
|
item.List['drp' + that.selectTimeValue] = item.List.drp
|
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.List.ADDVNM != it.行政区) {
|
a += 1
|
} else {
|
it.危险区 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.List.ADDVNM,
|
危险区: 1,
|
oneTime: 0,
|
twoTime: 0,
|
threeTime: 0,
|
oneData: [],
|
twoData: [],
|
threeData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.List.ADDVNM,
|
危险区: 1,
|
oneTime: 0,
|
twoTime: 0,
|
threeTime: 0,
|
oneData: [],
|
twoData: [],
|
threeData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.List.ADDVNM) {
|
if (item.flage1 == 'true') {
|
it.oneTime += 1
|
it.oneData.push(item.List)
|
}
|
if (item.flage2 == 'true') {
|
it.twoTime += 1
|
it.twoData.push(item.List)
|
}
|
if (item.flage3 == 'true') {
|
it.threeTime += 1
|
it.threeData.push(item.List)
|
}
|
|
it.wx.push(item.List)
|
}
|
})
|
|
if (item.flage1 == 'true' || item.flage2 == 'true' || item.flage3 == 'true') {
|
item.List.YJ = '预警'
|
|
that.addPoint(
|
item.List.LGTD,
|
item.List.LTTD,
|
shljPng,
|
'riskLayerWarn',
|
item.List,
|
0.22
|
)
|
|
that.legendData[0].content[1].value += 1
|
}
|
|
if (item.flage1 == 'false' && item.flage2 == 'false' && item.flage3 == 'false') {
|
item.List.YJ = '正常'
|
|
that.addPoint(
|
item.List.LGTD,
|
item.List.LTTD,
|
shzcPng,
|
'riskLayerNormal',
|
item.List,
|
0.18
|
)
|
|
that.legendData[0].content[0].value += 1
|
}
|
}
|
})
|
|
var textContentOne = ''
|
var textContentThree = ''
|
for (
|
var j = 0, a = 0, b = 0, c = 0, d = 0, f = [], g = [], k = [], l = [];
|
j < that.oneDataTable.length;
|
j++
|
) {
|
a += that.oneDataTable[j].危险区
|
b += that.oneDataTable[j].oneTime
|
c += that.oneDataTable[j].twoTime
|
d += that.oneDataTable[j].threeTime
|
|
f.push(...that.oneDataTable[j].oneData)
|
g.push(...that.oneDataTable[j].twoData)
|
k.push(...that.oneDataTable[j].threeData)
|
l.push(...that.oneDataTable[j].wx)
|
|
if (that.oneDataTable[j].oneTime > 0) {
|
textContentOne += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='oneData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='oneData'> ${that.oneDataTable[j].oneTime} </strong> <i>个；</i> </span>`
|
}
|
|
if (that.oneDataTable[j].threeTime > 0) {
|
textContentThree += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='threeData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='threeData'> ${that.oneDataTable[j].threeTime} </strong> <i>个；</i> </span>`
|
}
|
}
|
|
if (that.regionStcd == '361000') {
|
that.oneDataTable.unshift({
|
行政区: '抚州市',
|
危险区: a,
|
oneTime: b,
|
twoTime: c,
|
threeTime: d,
|
oneData: f,
|
twoData: g,
|
threeData: k,
|
wx: l
|
})
|
}
|
|
var ooo = {
|
行政区: '抚州市',
|
危险区: a,
|
oneTime: b,
|
twoTime: c,
|
threeTime: d,
|
oneData: f,
|
twoData: g,
|
threeData: k,
|
wx: l
|
}
|
|
// 生成文字预警信息
|
|
that.oneTextEarly = `抚州市 <span ii='0' datac='${JSON.stringify(ooo)}' typec='wx'> ${a} </span> 个山洪灾害危险区中，`
|
var text = `抚州市${a}个山洪灾害危险区中，`
|
|
if (that.selectTimeValue == 1) {
|
that.oneTextEarly += `1小时预警<span ii='1' datac='${JSON.stringify(ooo)}' typec='oneData'> ${b} </span>个${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
text += `1小时预警${b}个。`
|
} else if (that.selectTimeValue == 3) {
|
that.oneTextEarly += `3小时预警<span ii='2' datac='${JSON.stringify(ooo)}' typec='threeData'> ${d} </span>个${textContentThree.length > 0
|
? '（' + textContentThree + '）'
|
: ''
|
}。`
|
text += `3小时预警${d}个。`
|
}
|
|
that.$parent.$parent.updateText(text)
|
|
var extent = [114.7, 25.5, 117.7, 28.5]
|
|
setTimeout(() => {
|
if (type == 1) {
|
that.layerPng = new ImageLayer({
|
zIndex: 6,
|
opacity: 0.7,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: that.moupUrl,
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
})
|
} else {
|
that.layerPng = new ImageLayer({
|
zIndex: 6,
|
opacity: 0.7,
|
source: new ImageStatic({
|
// eslint-disable-next-line import/no-absolute-path
|
url: that.mouUrl,
|
projection: 'EPSG:4326',
|
imageExtent: extent
|
})
|
})
|
}
|
|
that.map2D.addLayer(that.layerPng)
|
|
that.loading = false
|
}, 1000)
|
})
|
},
|
|
// 控制图层显示隐藏事件
|
layerControl (item) {
|
if (item.type == 'riskLayerNormal') {
|
this.legendData[0].content[0].btnClass == '' ? this.legendData[0].content[0].btnClass = 'btn-zc' : this.legendData[0].content[0].btnClass = ''
|
} else {
|
this.legendData[0].content[1].btnClass == '' ? this.legendData[0].content[1].btnClass = 'btn-yj' : this.legendData[0].content[1].btnClass = ''
|
}
|
|
this[item.type].setVisible(!this[item.type].getVisible())
|
},
|
// 短信弹框中复制按钮事件
|
copyText () {
|
var input = document.createElement('input') // js创建一个input输入框
|
|
input.value = this.noteText // 将需要复制的文本赋值到创建的input输入框中
|
document.body.appendChild(input) // 将输入框暂时创建到实例里面
|
input.select() // 选中输入框中的内容
|
document.execCommand('Copy') // 执行复制操作
|
document.body.removeChild(input) // 最后删除实例中临时创建的input输入框，完成复制操作
|
},
|
// 分页相关
|
handleSizeChange (val) {
|
this.pagesize = val
|
},
|
handleCurrentChange (val) {
|
this.currpage = val
|
},
|
|
// 添加实体点
|
addPoint (latd, lttd, icon, layer, attr, size) {
|
attr.mapZindex = this[layer].values_.zIndex
|
|
const iconFeature = new Feature({
|
geometry: new Point([Number(latd), Number(lttd)]),
|
name: layer,
|
attributes: attr
|
})
|
|
const iconStyle = new Style({
|
// text: new Text({ // 字体, 未成功, 浪费许多时间
|
// font: 'Normal ' + 12 + 'px ' + 'iconfont',
|
// text: "\e645",
|
// fill: new Fill({ color: "green" }),
|
// }),
|
|
image: new Icon({
|
scale: size,
|
opacity: 1,
|
src: icon
|
// src: require('../../assets/Mark.png')
|
})
|
|
// new CircleStyle({ // 普通样式
|
// radius: 6,
|
// fill: new Fill({
|
// color: 'rgba(200, 155, 155, 0.8)'
|
// }),
|
// stroke: new Stroke({
|
// color: 'black',
|
// width: 0.3,
|
// })
|
// }),
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this[layer].getSource().addFeature(iconFeature)
|
|
if (layer == 'riskLayerNormal') {
|
this[layer].setVisible(false)
|
}
|
},
|
// 鼠标移动到实体点上面显示的内容
|
seleceFeature (e) {
|
// 在点击时获取像素区域
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
this.riskPopupFlag = 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 || cont.stcd || cont.id || cont.cenconding || cont.gl_code} </li>`
|
if (cont.STNM) {
|
that.detailPopupContent += `<li> 站点：${cont.STNM} </li>`
|
}
|
|
if (cont.ADDVNM || cont.county) {
|
that.detailPopupContent += `<li> 行政区：${cont.ADDVNM || cont.county} </li>`
|
}
|
|
if (cont.STLC) {
|
that.detailPopupContent += `<li> 山洪危险区全称：${cont.STLC} </li>`
|
}
|
|
if (cont.drp1 && this.radioValue == '1小时') {
|
that.detailPopupContent += `<li> 1小时实时雨量(mm)：${cont.drp1} </li>`
|
}
|
|
if (cont.gohour && this.radioValue == '1小时') {
|
that.detailPopupContent += `<li> 1小时雨量预警指标(mm)：${cont.gohour} </li>`
|
}
|
|
if (cont.drp2 && that.shvalue == '定值对比' && that.showDrp2 && this.radioValue == '2小时') {
|
that.detailPopupContent += `<li> 2小时实时雨量(mm)：${cont.drp2} </li>`
|
}
|
|
if (cont.status == '1' && that.shvalue == '定值对比' && that.showDrp2 && this.radioValue == '2小时') {
|
that.detailPopupContent += `<li> 2小时雨量预警指标(mm)：${cont.gtwohour} </li>`
|
}
|
|
if (cont.drp3 && this.radioValue == '3小时') {
|
that.detailPopupContent += `<li> 3小时实时雨量(mm)：${cont.drp3} </li>`
|
}
|
|
if (cont.gthour && this.radioValue == '3小时') {
|
that.detailPopupContent += `<li> 3小时雨量预警指标(mm)：${cont.gthour} </li>`
|
}
|
|
if (cont.YJ) {
|
that.detailPopupContent += `<li> 是否预警：${cont.YJ} </li>`
|
}
|
|
// eslint-disable-next-line no-unused-expressions
|
cont.TM ? that.detailPopupContent += `<li> 时间：${cont.TM} </li>` : ''
|
|
document.getElementById('riskDetailPopup').style.top =
|
e.pixel[1] + 70 + 'px'
|
document.getElementById('riskDetailPopup').style.right =
|
exctent[0] - e.pixel[0] + 10 + 'px'
|
that.riskPopupFlag = true
|
}
|
}
|
},
|
|
layerClick (e) {
|
// 在点击时获取像素区域
|
const that = this
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
var view = that.map2D.getView()
|
|
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
|
}
|
}
|
})
|
|
view.setCenter([Number(cont.LGTD), Number(cont.LTTD)])
|
|
view.setZoom(14)
|
}
|
},
|
|
// 左侧表格数据导出
|
exportExcel () {
|
var filename = ''
|
var tHeader = []
|
var filterVal = []
|
var data = null
|
filename = '山洪灾害数据表格'
|
if (this.shvalue == '定值对比' && this.showDrp2) {
|
if (this.radioValue == '1小时') {
|
tHeader = [
|
'行政区',
|
'危险区',
|
'1小时'
|
]
|
filterVal = [
|
'行政区',
|
'危险区',
|
'oneTime'
|
]
|
} else if (this.radioValue == '2小时') {
|
tHeader = [
|
'行政区',
|
'危险区',
|
'2小时'
|
]
|
filterVal = [
|
'行政区',
|
'危险区',
|
'twoTime'
|
]
|
} else if (this.radioValue == '3小时') {
|
tHeader = [
|
'行政区',
|
'危险区',
|
'3小时'
|
]
|
filterVal = [
|
'行政区',
|
'危险区',
|
'threeTime'
|
]
|
}
|
} else {
|
if (this.selectTimeValue == 1) {
|
tHeader = [
|
'行政区',
|
'危险区',
|
'1小时'
|
]
|
filterVal = [
|
'行政区',
|
'危险区',
|
'oneTime'
|
]
|
} else if (this.selectTimeValue == 3) {
|
tHeader = [
|
'行政区',
|
'危险区',
|
'3小时'
|
]
|
filterVal = [
|
'行政区',
|
'危险区',
|
'threeTime'
|
]
|
}
|
}
|
|
data = this.formatJson(filterVal, this.oneDataTable)
|
|
export_json_to_excel({
|
header: tHeader,
|
data,
|
filename
|
})
|
},
|
|
// 弹窗中表格数据导出
|
exportExcelDialog () {
|
var filename = ''
|
var tHeader = []
|
var filterVal = []
|
var data = null
|
filename = '山洪灾害数据表格'
|
if (this.shvalue == '定值对比' && this.showDrp2) {
|
if (this.radioValue == '1小时') {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'山洪危险区全称',
|
'1小时实时雨量(mm)',
|
'1小时雨量预警指标(mm)',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'ADDVNM',
|
'STCD',
|
'STNM',
|
'STLC',
|
'drp1',
|
'gohour',
|
'YJ'
|
]
|
} else if (this.radioValue == '2小时') {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'山洪危险区全称',
|
'2小时实时雨量(mm)',
|
'2小时雨量预警指标(mm)',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'ADDVNM',
|
'STCD',
|
'STNM',
|
'STLC',
|
'drp2',
|
'gtwohour',
|
'YJ'
|
]
|
} else if (this.radioValue == '3小时') {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'山洪危险区全称',
|
'3小时实时雨量(mm)',
|
'3小时雨量预警指标(mm)',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'ADDVNM',
|
'STCD',
|
'STNM',
|
'STLC',
|
'drp3',
|
'gthour',
|
'YJ'
|
]
|
}
|
} else {
|
if (this.selectTimeValue == 1) {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'山洪危险区全称',
|
'1小时实时雨量(mm)',
|
'1小时雨量预警指标(mm)',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'ADDVNM',
|
'STCD',
|
'STNM',
|
'STLC',
|
'drp1',
|
'gohour',
|
'YJ'
|
]
|
} else if (this.selectTimeValue == 3) {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'山洪危险区全称',
|
'3小时实时雨量(mm)',
|
'3小时雨量预警指标(mm)',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'ADDVNM',
|
'STCD',
|
'STNM',
|
'STLC',
|
'drp3',
|
'gthour',
|
'YJ'
|
]
|
}
|
}
|
|
data = this.formatJson(filterVal, this.earlyTable)
|
|
export_json_to_excel({
|
header: tHeader,
|
data,
|
filename
|
})
|
},
|
formatJson (filterVal, tableData) {
|
return tableData.map((v) => {
|
return filterVal.map((j) => {
|
return v[j]
|
})
|
})
|
},
|
|
// 数据表查询事件
|
searchTable () {
|
if (this.tableTime.length == 0) return
|
this.earlyVisible = false
|
|
if (this.shvalue == '定值对比') {
|
this.getShDate()
|
} else {
|
this.getShDates()
|
}
|
},
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? '0' + s : s
|
},
|
// 事件处理操作
|
getNewTime (time) {
|
var nowTime = time
|
var thisTime = nowTime
|
thisTime = thisTime.replace(/-/g, '/')
|
|
var oneHoursAgo = new Date(new Date(thisTime).getTime() - 1 * 60 * 60 * 1000)
|
var oneHoursAgoY = oneHoursAgo.getFullYear()
|
var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1
|
var oneHoursAgoD = oneHoursAgo.getDate() < 10 ? '0' + oneHoursAgo.getDate() : oneHoursAgo.getDate()
|
var oneHoursAgoH = oneHoursAgo.getHours() < 10 ? '0' + oneHoursAgo.getHours() : oneHoursAgo.getHours()
|
var time1 = oneHoursAgoY + '-' + oneHoursAgoM + '-' + oneHoursAgoD + ' ' + oneHoursAgoH + ':00:00'
|
|
var twoHoursAgo = new Date(new Date(thisTime).getTime() - 2 * 60 * 60 * 1000)
|
var twoHoursAgoY = twoHoursAgo.getFullYear()
|
var twoHoursAgoM = twoHoursAgo.getMonth() + 1 < 10 ? '0' + (twoHoursAgo.getMonth() + 1) : twoHoursAgo.getMonth() + 1
|
var twoHoursAgoD = twoHoursAgo.getDate() < 10 ? '0' + twoHoursAgo.getDate() : twoHoursAgo.getDate()
|
var twoHoursAgoH = twoHoursAgo.getHours() < 10 ? '0' + twoHoursAgo.getHours() : twoHoursAgo.getHours()
|
var time2 = twoHoursAgoY + '-' + twoHoursAgoM + '-' + twoHoursAgoD + ' ' + twoHoursAgoH + ':00:00'
|
|
var threeHoursAgo = new Date(new Date(thisTime).getTime() - 3 * 60 * 60 * 1000)
|
var threeHoursAgoY = threeHoursAgo.getFullYear()
|
var threeHoursAgoM = threeHoursAgo.getMonth() + 1 < 10 ? '0' + (threeHoursAgo.getMonth() + 1) : threeHoursAgo.getMonth() + 1
|
var threeHoursAgoD = threeHoursAgo.getDate() < 10 ? '0' + threeHoursAgo.getDate() : threeHoursAgo.getDate()
|
var threeHoursAgoH = threeHoursAgo.getHours() < 10 ? '0' + threeHoursAgo.getHours() : threeHoursAgo.getHours()
|
var time3 = threeHoursAgoY + '-' + threeHoursAgoM + '-' + threeHoursAgoD + ' ' + threeHoursAgoH + ':00:00'
|
|
/**
|
* @return 返回1小时，2小时，3小时，4小时，24小时
|
*/
|
return {
|
one: time1,
|
two: time2,
|
three: time3
|
}
|
},
|
|
dialogOpen (row, type) {
|
this.searchSite = ''
|
this.searchStcd = ''
|
this.currpage = 1
|
|
row[type].forEach((item, index) => {
|
item.ind = index + 1
|
})
|
|
this.dislogEarlyTable = row[type]
|
this.earlyTable = row[type]
|
this.earlyTitle = row['行政区']
|
|
this.earlyVisible = true
|
},
|
// 短信弹框事件
|
notePopup (row, type) {
|
const startTime = new Date(this.tableTime)
|
var year = startTime.getFullYear()
|
var month = this.disposeTime(startTime.getMonth() + 1)
|
var day = this.disposeTime(startTime.getDate())
|
var hour = this.disposeTime(startTime.getHours())
|
|
this.createLayerShortMessageMountain(
|
row,
|
'山洪灾害',
|
year,
|
month,
|
day,
|
hour
|
)
|
|
this.noteVisible = true
|
},
|
|
createLayerShortMessageMountain (row, siteName, year, month, day, hour) {
|
var a = 0
|
var b = 0
|
var c = 0
|
|
var e = ''
|
var f = ''
|
var g = ''
|
|
if (this.shvalue == '定值对比' && this.showDrp2) {
|
row.oneData.length > 0 &&
|
row.oneData.forEach((item) => {
|
e += item.STLC + item.drp1 + '毫米' + '、'
|
a += 1
|
})
|
|
row.twoData.length > 0 &&
|
row.twoData.forEach((item) => {
|
f += item.STLC + item.drp2 + '毫米' + '、'
|
b += 1
|
})
|
|
row.threeData.length > 0 &&
|
row.threeData.forEach((item) => {
|
g += item.STLC + item.drp3 + '毫米' + '、'
|
c += 1
|
})
|
|
this.noteTitle = row['行政区']
|
this.noteText = `${year}年${month}月${day}日${hour}时
|
|
${a > 0
|
? '，1小时降雨量大于30毫米的危险区有：' +
|
e.substr(0, e.length - 1)
|
: ''
|
}
|
${b > 0
|
? '，2小时降雨量大于50毫米的危险区有：' +
|
f.substr(0, f.length - 1)
|
: ''
|
}
|
${c > 0
|
? '，3小时降雨量大于80毫米的危险区有：' +
|
g.substr(0, g.length - 1) + '。'
|
: '。'
|
} `
|
} else {
|
row.oneData.length > 0 &&
|
row.oneData.forEach((item) => {
|
e += item.STLC + item.drp1 + '毫米' + '、'
|
a += 1
|
})
|
|
row.threeData.length > 0 &&
|
row.threeData.forEach((item) => {
|
g += item.STLC + item.drp3 + '毫米' + '、'
|
c += 1
|
})
|
|
this.noteTitle = row['行政区']
|
this.noteText = `${year}年${month}月${day}日${hour}时
|
|
${a > 0
|
? '，1小时降雨量超预警的危险区有：' +
|
e.substr(0, e.length - 1)
|
: ''
|
}
|
${c > 0
|
? '，3小时降雨量超预警的危险区有：' +
|
g.substr(0, g.length - 1) + '。'
|
: '。'
|
} `
|
}
|
|
this.noteText = this.noteText.replace(/\s/g, '')
|
},
|
// dialog搜索方法
|
dialogSearch () {
|
var arr = []
|
this.dislogEarlyTable.forEach((item) => {
|
if (
|
((item.gl_code &&
|
item.gl_code.indexOf(this.searchStcd) != -1) ||
|
(item.cenconding &&
|
item.cenconding.indexOf(this.searchStcd) != -1) ||
|
(item.STCD &&
|
item.STCD.indexOf(this.searchStcd) != -1) ||
|
(item.stcd &&
|
item.stcd.indexOf(this.searchStcd) != -1) ||
|
(item.id &&
|
item.id.indexOf(this.searchStcd) != -1)) &&
|
(item.STNM &&
|
item.STNM.indexOf(this.searchSite) != -1)
|
) {
|
arr.push(item)
|
}
|
})
|
|
arr.forEach((item, index) => {
|
item.ind = index + 1
|
})
|
this.currpage = 1
|
this.earlyTable = arr
|
},
|
// dialog清空方法
|
dialogSearchClear () {
|
this.searchSite = ''
|
this.searchStcd = ''
|
this.currpage = 1
|
this.earlyTable = this.dislogEarlyTable
|
},
|
|
earlyTrigger (e) {
|
if (e.target.hasAttribute('ii')) {
|
var num = e.target.innerText.replace(/(^\s*)|(\s*$)/, '')
|
if (num > 0) {
|
// eslint-disable-next-line dot-notation
|
this.dialogOpen(JSON.parse(e.target.getAttribute('datac')), e.target.getAttribute('typec'))
|
}
|
}
|
},
|
leftSortChange ({ prop, order }) {
|
this.oneDataTable.sort(this.compare(prop, order))
|
},
|
onSortChange ({ prop, order }) {
|
this.earlyTable.sort(this.compare(prop, order))
|
|
this.earlyTable.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.$parent.resize('0%', '0', false)
|
this.$parent.$parent.updateText('')
|
|
this.riskLayerWarn.un('postrender', this.flickerPoint)
|
|
this.riskLayerNormal.getSource().clear()
|
this.riskLayerWarn.getSource().clear()
|
|
this.map2D.removeLayer(this.riskLayerNormal)
|
this.map2D.removeLayer(this.riskLayerWarn)
|
if (this.layerPng) this.map2D.removeLayer(this.layerPng)
|
this.map2D.un('pointermove', this.seleceFeature)
|
this.map2D.un('singleclick', this.layerClick)
|
}
|
}
|
</script>
|
|
<style lang='scss'>
|
.time-frame-radio {
|
position: fixed;
|
top: 90px;
|
left: 50%;
|
right: auto;
|
bottom: auto;
|
margin: auto;
|
transform: translate(-50%, 0);
|
width: 460px;
|
height: 36px;
|
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
& > div {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.el-radio-group {
|
width: calc(100% - 190px);
|
}
|
|
.el-date-editor {
|
width: 184px;
|
height: 36px;
|
display: flex;
|
align-items: center;
|
|
.el-input__inner {
|
height: 36px;
|
line-height: 36px;
|
}
|
}
|
|
.el-radio-button__inner {
|
padding: 10px 20px !important;
|
border: 1px solid #dcdfe6;
|
border-radius: 5px !important;
|
}
|
}
|
</style>
|
