/* eslint-disable no-unused-vars */
|
/* eslint-disable vue/no-textarea-mustache */
|
/*
|
* @Author: Morpheus
|
* @Date: 2021-05-06 16:10:30
|
* @Last Modified by: Morpheus
|
* @Last Modified time: 2021-11-18 15:48:36
|
*/
|
<template>
|
<el-row
|
class="medium-small-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-show="realShow"
|
v-model="tableTime"
|
type="datetime"
|
format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期时间"
|
align="right"
|
:picker-options="timePickerOptions"
|
size="small"
|
@change="searchTable"
|
></el-date-picker>
|
|
<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"
|
:border="true"
|
>
|
<el-table-column align="center" prop="行政区" label="行政区"></el-table-column>
|
|
<el-table-column label="中小河流" align="center">
|
<template slot-scope="scope">
|
<span
|
@click="
|
scope.row['中小河流'] > 0 &&
|
dialogOpen(scope.row, 'wx')
|
"
|
>{{ scope.row['中小河流'] }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="预警" align="center">
|
<template slot-scope="scope">
|
<span
|
@click="
|
scope.row['yj'] > 0 &&
|
dialogOpen(scope.row, 'yjData')
|
"
|
>{{ scope.row['yj'] }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="短信" align="center">
|
<template slot-scope="scope">
|
<el-button
|
size="small"
|
:type="
|
scope.row.yjData.length > 0
|
? 'primary'
|
: 'info'
|
"
|
@click="notePopup(scope.row, 'sh')"
|
style="padding: 4px 6px"
|
:disabled="
|
!(
|
scope.row.yjData.length > 0
|
)
|
"
|
>短信</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div v-show="riskPopupFlag" class="risk-detail-popup" id="riskDetailPopup">
|
<ul v-html="detailPopupContent"></ul>
|
</div>
|
|
<div id="popup" class="ol-popup" v-show="bigRiverVisible">
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
<div id="popup-content" class="real-river-box">
|
<ul>
|
<li>
|
<span>河名:</span>
|
<input
|
:disabled="true"
|
:value="bigRiverRealData != null ? bigRiverRealData['hb.hlmc'] : ''"
|
/>
|
</li>
|
<li>
|
<span>水位(m):</span>
|
<input
|
:disabled="true"
|
:value="bigRiverRealData.lists != null ? bigRiverRealData.lists.Z : ''"
|
/>
|
</li>
|
<li>
|
<span>预警水位(m):</span>
|
<input
|
:disabled="true"
|
:value="bigRiverRealData != null ? bigRiverRealData['hb.jjsw'] : ''"
|
/>
|
</li>
|
<li>
|
<div>
|
<span>站名:</span>
|
<input
|
:disabled="true"
|
:value="bigRiverRealData != null ? bigRiverRealData['hb.name'] : ''"
|
/>
|
</div>
|
</li>
|
<li>
|
<span>站码:</span>
|
<input
|
:disabled="true"
|
:value="bigRiverRealData != null ? bigRiverRealData['hb.code'] : ''"
|
/>
|
</li>
|
<li>
|
<span>防护对象:</span>
|
<textarea
|
v-model="bigRiverRealData['hb.fhdx']"
|
name
|
id
|
:disabled="true"
|
style="resize: none;"
|
></textarea>
|
</li>
|
|
<li
|
v-show="bigRiverRealData.lists != null && bigRiverRealData.lists.YJ != '正常'"
|
style="display: flex; justify-content: center;"
|
>
|
<exportWord :exportWordObj="exportWordData"></exportWord>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<el-upload
|
ref="uploadExcel"
|
action="http://10.36.98.39:85/smariver/import-mgr"
|
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
:before-upload="beforeUploadFile"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:on-success="handleSuccess"
|
:before-remove="beforeRemove"
|
multiple
|
:limit="1"
|
:on-exceed="handleExceed"
|
:file-list="fileList"
|
:show-file-list="false"
|
></el-upload>
|
|
<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"
|
: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="searchStname" 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%"
|
size="medium"
|
>
|
<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.addvnm }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="站码" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.STCD }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="站名" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.stname }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="河流名称" align="center">
|
<template slot-scope="scope">{{ scope.row.river }}</template>
|
</el-table-column>
|
|
<el-table-column label="水位(m)" align="center" sortable="custom" prop="Z"></el-table-column>
|
|
<el-table-column label="警戒水位(m)" align="center" sortable="custom" prop="yjsw"></el-table-column>
|
|
<el-table-column label="日期" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.TM || scope.row.ytime }}</span>
|
</template>
|
</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>
|
<div>
|
<div class="risk-child-item">
|
<ul>
|
<li>
|
<div>
|
<el-button
|
class="el-radio__input"
|
:class="{'is-checked':dataType=='实时'}"
|
size="small"
|
type="text"
|
@click="radioChanged('实时')"
|
>
|
<span class="el-radio__inner"></span>
|
<span class="text">实时</span>
|
</el-button>
|
|
<el-button
|
style="margin: 0;"
|
size="small"
|
type="text"
|
class="el-radio__input"
|
:class="{'is-checked':dataType=='预报'}"
|
@click="radioChanged('预报')"
|
>
|
<span class="el-radio__inner"></span>
|
<span class="text">预报</span>
|
</el-button>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
|
<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>
|
|
<layerControls ref="layer-control" :legendsDetail="legendData"></layerControls>
|
|
<hllegend :legendsDetail="legends"></hllegend>
|
</el-row>
|
</template>
|
|
<script>
|
import fzJson from '@/geojson/fz.json'
|
import { getYMList, getYBYMList } from '@/api/riskEarlyWarning/index.js'
|
import Feature from 'ol/Feature.js'
|
import { Style, Fill, Stroke, Circle, Text, Icon } from 'ol/style.js'
|
import Overlay from 'ol/Overlay.js'
|
import LineString from 'ol/geom/LineString.js'
|
import { boundingExtent } from 'ol/extent'
|
import { getVectorContext } from 'ol/render'
|
|
import Point from 'ol/geom/Point.js'
|
|
// 山洪灾害需要图
|
// eslint-disable-next-line no-unused-vars
|
// 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 wgl from '@/assets/img/wgl.png'
|
import wglsm from '@/assets/img/zyhl.png'
|
import shZc from '@/assets/img/sh-wyj.png'
|
import shYj from '@/assets/img/fxyj.png'
|
import zdlog from '@/assets/img/swz-zx.png'
|
import hllog from '@/assets/img/hl-tl.png'
|
|
import store from '@/store/' // 全局状态
|
|
import axios from 'axios'
|
|
// 导出excel表格所需
|
// eslint-disable-next-line camelcase
|
import { export_json_to_excel } from '@/assets/libs/Export2Excel.js'
|
|
export default {
|
data () {
|
return {
|
// 站点相关数据弹窗变量
|
retailShowFlag: false,
|
retailTitle: '',
|
retailSrc: '',
|
|
exportWordData: {},
|
dataType: '实时',
|
upload_url: 'http://10.36.98.39:85/smariver/import-mgr',
|
fileList: [],
|
// 是否显示时间搜索
|
realShow: true,
|
boxShow: false,
|
overlay: null,
|
bigRiverVisible: false,
|
bigRiverRealData: {
|
},
|
|
// 详情搜索
|
searchStname: '',
|
searchStcd: '',
|
// 分页相关
|
currpage: 1,
|
pagesize: 20,
|
// 预警详细弹窗
|
earlyVisible: false,
|
// 预警详细表格
|
dislogEarlyTable: [],
|
earlyTable: [],
|
// 预警详细标题
|
earlyTitle: '',
|
// 短信得标题
|
noteTitle: '',
|
// 短信得文字
|
noteText: '',
|
// 短信得弹框
|
noteVisible: false,
|
// 加载中// 所有图层
|
riskLayerNot: store.state.openlayers.riskLayerNot,
|
riskLayerNormal: store.state.openlayers.riskLayerNormal,
|
riskLayerWarn: store.state.openlayers.riskLayerWarn,
|
siteLayer: store.state.openlayers.siteLayer,
|
siteLayerWarn: store.state.openlayers.siteLayerWarn,
|
waterAllLayer: store.state.openlayers.waterAllLayer,
|
riverPointText: store.state.openlayers.riverPointText,
|
|
loading: true,
|
map2D: store.state.openlayers.map2D,
|
|
// 预警信息
|
oneTextEarly: '',
|
|
// 数据表格
|
oneDataTable: [],
|
|
// 图层控制组件的数据
|
legendData: [
|
{
|
title: '中小河流图例',
|
content: [
|
{
|
label: '其他',
|
src: wgl,
|
smallsrc: wglsm,
|
type: 'riskLayerNot',
|
value: 0,
|
class: 'text-gray',
|
btnClass: 'btn-wgl'
|
},
|
{
|
label: '正常',
|
src: shZc,
|
smallsrc: shzcPng,
|
type: 'riskLayerNormal',
|
value: 0,
|
class: 'text-green',
|
btnClass: 'btn-zc'
|
},
|
{
|
label: '超警',
|
src: shYj,
|
smallsrc: shljPng,
|
type: 'riskLayerWarn',
|
value: 0,
|
class: 'text-red',
|
btnClass: 'btn-yj'
|
}
|
]
|
}
|
],
|
|
// 图例信息x
|
legends: [
|
{
|
title: '图例',
|
content: [
|
{
|
label: '水文站',
|
src: zdlog,
|
type: ['siteLayer', 'siteLayerWarn']
|
},
|
{
|
label: '河流',
|
src: hllog,
|
type: ['waterAllLayer']
|
}
|
]
|
}
|
],
|
|
// 地图弹框开关
|
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: '',
|
radius: 0,
|
speed: 0.12
|
|
}
|
},
|
created () {
|
this.bigRiverRealData['hb.fhdx'] = ''
|
},
|
beforeMount () { },
|
mounted () {
|
this.$parent.$parent.resize('396px', '396px', true, '中小河流')
|
|
this.map2D.addLayer(this.riskLayerNot)
|
this.map2D.addLayer(this.riskLayerNormal)
|
this.map2D.addLayer(this.riskLayerWarn)
|
this.map2D.addLayer(this.siteLayer)
|
this.map2D.addLayer(this.siteLayerWarn)
|
this.map2D.addLayer(this.riverPointText)
|
this.riverPointText.setVisible(false)
|
|
this.$nextTick(function () {
|
this.map2D.on('singleclick', this.layerClick)
|
|
this.map2D.on('moveend', this.layerMoveEnd)
|
|
this.siteLayerWarn.on('postrender', this.flickerPointTwo)
|
})
|
|
this.getYmDate()
|
|
this.bigRiverVisible = false
|
},
|
methods: {
|
flickerPointTwo (e) {
|
if (this.radius >= 12) 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.siteLayerWarn.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));
|
},
|
|
handleRemove (file, fileList) {
|
console.log(file)
|
},
|
handlePreview (file) {
|
console.log(file)
|
},
|
handleExceed (files, fileList) {
|
this.$notify.warning({
|
title: '警告',
|
message: `只能选择 ${1
|
} 个文件，当前共选择了 ${files.length + fileList.length} 个`
|
})
|
},
|
beforeRemove (file, fileList) {
|
return this.$confirm(`确定移除 ${file.name}？`)
|
},
|
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
|
beforeUploadFile (file) {
|
const extension = file.name.split('.')[1] === 'xls'
|
const extension2 = file.name.split('.')[1] === 'xlsx'
|
|
const size = file.size / 1024 / 1024
|
|
if (!extension && !extension2) {
|
this.$notify.warning({
|
title: '警告',
|
message: '上传文件只能是 xls、xlsx格式!'
|
})
|
|
return
|
}
|
|
if (size > 10) {
|
this.$notify.warning({
|
title: '警告',
|
message: '文件大小不得超过10M'
|
})
|
}
|
|
this.dataType = '预报'
|
|
this.realShow = false
|
|
this.loading = true
|
},
|
// 文件上传成功时的钩子
|
handleSuccess (res, file, fileList) {
|
var that = this
|
|
this.$message({
|
message: '文件上传成功',
|
type: 'success'
|
})
|
this.$refs.uploadExcel.clearFiles()// 清除上次上传记录
|
|
this.oneDataTable = []
|
|
this.riskLayerNot.getSource().clear()
|
this.riskLayerNormal.getSource().clear()
|
this.riskLayerWarn.getSource().clear()
|
this.siteLayer.getSource().clear()
|
this.siteLayerWarn.getSource().clear()
|
this.riverPointText.getSource().clear()
|
|
that.legendData[0].content[0].value = 0
|
that.legendData[0].content[1].value = 0
|
that.legendData[0].content[2].value = 0
|
this.legendData[0].content[0].btnClass = 'btn-wgl'
|
this.legendData[0].content[1].btnClass = 'btn-zc'
|
this.legendData[0].content[2].btnClass = 'btn-yj'
|
|
getYBYMList().then(res => {
|
var result = res.data.data[0]
|
|
axios.get('http://59.55.128.156:6080/arcgis/rest/services/fzhl/MapServer/3/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => {
|
resultData.data.features.forEach(line => {
|
if (line.attributes['抚州50平方公里河流.RivOrder'] != 22) {
|
var riverCode = null
|
|
var flag = false
|
|
result.yj.forEach((item) => {
|
if (line.attributes['hb.code'] == item.STCD) {
|
item.fh = line.attributes['hb.fhdx']
|
|
flag = true
|
|
that.legendData[0].content[2].value += 1
|
|
line.attributes.lists = item
|
|
if (item.STCD != riverCode) {
|
var textFeature = new Feature({
|
geometry: new Point(line.geometry.paths[0][0])
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'top',
|
text: line.attributes['hb.hlmc'],
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: '#ff0909' }),
|
offsetX: 10,
|
offsetY: 10
|
})
|
}))
|
|
that.riskLayerWarn.getSource().addFeature(textFeature)
|
}
|
|
that.addPolygon(line, 'riskLayerWarn', '#ff0909')
|
|
that.addPoint(line.attributes['hb.jd'], line.attributes['hb.wd'], zdlog, 'siteLayerWarn', line.attributes['hb.name'], 0.4, line.attributes)
|
|
riverCode = item.STCD
|
}
|
})
|
|
result.zc.forEach((item) => {
|
if (line.attributes['hb.code'] == item.STCD) {
|
item.fh = line.attributes['hb.fhdx']
|
|
flag = true
|
|
that.legendData[0].content[1].value += 1
|
|
line.attributes.lists = item
|
|
if (item.STCD != riverCode) {
|
var textFeature = new Feature({
|
geometry: new Point(line.geometry.paths[0][0])
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'top',
|
text: line.attributes['hb.hlmc'],
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: '#44cc44' }),
|
offsetX: 10,
|
offsetY: 10
|
})
|
}))
|
|
that.riskLayerNormal.getSource().addFeature(textFeature)
|
}
|
|
that.addPolygon(line, 'riskLayerNormal', '#44cc44')
|
|
that.addPoint(line.attributes['hb.jd'], line.attributes['hb.wd'], zdlog, 'siteLayer', line.attributes['hb.name'], 0.4, line.attributes)
|
|
riverCode = item.STCD
|
}
|
})
|
|
if (flag == false) {
|
that.legendData[0].content[0].value += 1
|
|
if (line.attributes['hb.hlmc'] && line.attributes['hb.hlmc'] != null) {
|
var textFeature = new Feature({
|
geometry: new Point(line.geometry.paths[0][0])
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'top',
|
text: line.attributes['hb.hlmc'],
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: '#2196f3' }),
|
offsetX: 10,
|
offsetY: 10
|
})
|
}))
|
|
that.riskLayerNot.getSource().addFeature(textFeature)
|
}
|
|
that.addPolygon(line, 'riskLayerNot', '#2196f3')
|
}
|
}
|
})
|
})
|
|
var time = null
|
|
if (result.yj.length > 0) {
|
time = result.yj[0].ytime
|
} else if (result.zc.length > 0) {
|
time = result.zc[0].ytime
|
}
|
|
result.yj.forEach(function (item, index) {
|
if (
|
item.addvnm
|
) {
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.addvnm != it.行政区) {
|
a += 1
|
} else {
|
it.中小河流 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.addvnm) {
|
it.yj += 1
|
it.yjData.push(item)
|
|
it.wx.push(item)
|
}
|
})
|
|
item.YJ = '预警'
|
|
item.time = time
|
}
|
})
|
|
result.zc.forEach(function (item, index) {
|
if (
|
item.addvnm
|
) {
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.addvnm != it.行政区) {
|
a += 1
|
} else {
|
it.中小河流 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.addvnm) {
|
it.zc += 1
|
it.zcData.push(item)
|
|
it.wx.push(item)
|
}
|
})
|
|
item.YJ = '正常'
|
|
item.item = time
|
}
|
})
|
|
var textContentOne = ''
|
|
for (
|
var j = 0, a = 0, b = 0, c = 0, d = [], f = [], g = [];
|
j < that.oneDataTable.length;
|
j++
|
) {
|
a += that.oneDataTable[j].中小河流
|
b += that.oneDataTable[j].zc
|
c += that.oneDataTable[j].yj
|
|
d.push(...that.oneDataTable[j].zcData)
|
f.push(...that.oneDataTable[j].yjData)
|
g.push(...that.oneDataTable[j].wx)
|
|
if (that.oneDataTable[j].yj > 0) {
|
textContentOne += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='oneData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='yjData'> ${that.oneDataTable[j].yj} </strong> <i>条；</i> </span>`
|
}
|
}
|
|
that.oneDataTable.unshift({
|
行政区: '抚州市',
|
中小河流: a,
|
zc: b,
|
zcData: d,
|
yj: c,
|
yjData: f,
|
wx: g
|
})
|
|
var ooo = {
|
行政区: '抚州市',
|
中小河流: a,
|
zc: b,
|
zcData: d,
|
yj: c,
|
yjData: f,
|
wx: g
|
}
|
|
// 生成文字预警信息
|
that.oneTextEarly = `抚州市 <span ii='0' datac='${JSON.stringify(ooo)}' typec='wx'> ${a} </span> 条中小河流中，
|
预警<span ii='2' datac='${JSON.stringify(ooo)}' typec='yjData'> ${c} </span>条${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
|
var text = `${time}抚州市${a}条中小河流中，
|
预警${c}条${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
|
that.$parent.$parent.updateText(text)
|
|
that.loading = false
|
})
|
},
|
|
// 右侧单选框改变事件
|
radioChanged (e) {
|
if (e == this.dataType) return
|
|
this.bigRiverVisible = false
|
|
if (e == '实时') {
|
this.realShow = true
|
this.dataType = e
|
this.getYmDate()
|
} else {
|
this.toSelectFile()
|
}
|
},
|
|
// toSelectFile方法可以是自己需要做的操作，然后继续选择文件上传
|
toSelectFile () {
|
// 触发upload组件内部点击事件，弹出文件选择框
|
this.$refs.uploadExcel.$refs['upload-inner'].handleClick()
|
},
|
|
childBoxResize (val) {
|
this.boxShow = val
|
|
this.$refs['layer-control'].layerControlResize(val)
|
},
|
|
getYmDate () {
|
var that = this
|
that.loading = true
|
this.oneDataTable = []
|
|
this.riskLayerNot.getSource().clear()
|
this.riskLayerNormal.getSource().clear()
|
this.riskLayerWarn.getSource().clear()
|
this.siteLayer.getSource().clear()
|
this.siteLayerWarn.getSource().clear()
|
this.riverPointText.getSource().clear()
|
|
that.legendData[0].content[0].value = 0
|
that.legendData[0].content[1].value = 0
|
that.legendData[0].content[2].value = 0
|
this.legendData[0].content[0].btnClass = 'btn-wgl'
|
this.legendData[0].content[1].btnClass = 'btn-zc'
|
this.legendData[0].content[2].btnClass = 'btn-yj'
|
|
if (this.tableTime.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
const startTime = new Date(this.tableTime)
|
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 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())
|
|
getYMList({
|
time: start
|
}).then((res) => {
|
var result = res.data.data[0]
|
|
axios.get('http://59.55.128.156:6080/arcgis/rest/services/fzhl/MapServer/3/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => {
|
resultData.data.features.forEach(line => {
|
if (line.attributes['抚州50平方公里河流.RivOrder'] != 22) {
|
var riverCode = null
|
|
var flag = false
|
|
result.yj.forEach((item) => {
|
if (line.attributes['hb.code'] == item.STCD) {
|
item.fh = line.attributes['hb.fhdx']
|
|
flag = true
|
|
that.legendData[0].content[2].value += 1
|
|
line.attributes.lists = item
|
|
if (item.STCD != riverCode) {
|
var textFeature = new Feature({
|
geometry: new Point(line.geometry.paths[0][0])
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'top',
|
text: line.attributes['hb.hlmc'],
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: '#ff0909' }),
|
offsetX: 10,
|
offsetY: 10
|
})
|
}))
|
|
that.riskLayerWarn.getSource().addFeature(textFeature)
|
}
|
|
that.addPolygon(line, 'riskLayerWarn', '#ff0909')
|
|
that.addPoint(line.attributes['hb.jd'], line.attributes['hb.wd'], zdlog, 'siteLayerWarn', line.attributes['hb.name'], 0.4, line.attributes)
|
|
riverCode = item.STCD
|
}
|
})
|
|
result.zc.forEach((item) => {
|
if (line.attributes['hb.code'] == item.STCD) {
|
item.fh = line.attributes['hb.fhdx']
|
|
flag = true
|
|
that.legendData[0].content[1].value += 1
|
|
line.attributes.lists = item
|
|
if (item.STCD != riverCode) {
|
var textFeature = new Feature({
|
geometry: new Point(line.geometry.paths[0][0])
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'top',
|
text: line.attributes['hb.hlmc'],
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: '#44cc44' }),
|
offsetX: 10,
|
offsetY: 10
|
})
|
}))
|
|
that.riskLayerNormal.getSource().addFeature(textFeature)
|
}
|
|
that.addPolygon(line, 'riskLayerNormal', '#44cc44')
|
|
that.addPoint(line.attributes['hb.jd'], line.attributes['hb.wd'], zdlog, 'siteLayer', line.attributes['hb.name'], 0.4, line.attributes)
|
|
riverCode = item.STCD
|
}
|
})
|
|
if (flag == false) {
|
that.legendData[0].content[0].value += 1
|
|
if (line.attributes['hb.hlmc'] && line.attributes['hb.hlmc'] != null) {
|
var textFeature = new Feature({
|
geometry: new Point(line.geometry.paths[0][0])
|
})
|
|
textFeature.setStyle(new Style({
|
text: new Text({
|
textAlign: 'top',
|
text: line.attributes['hb.hlmc'],
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: '#2196f3' }),
|
offsetX: 10,
|
offsetY: 10
|
})
|
}))
|
|
that.riskLayerNot.getSource().addFeature(textFeature)
|
}
|
|
that.addPolygon(line, 'riskLayerNot', '#2196f3')
|
}
|
}
|
})
|
})
|
|
result.yj.forEach(function (item, index) {
|
if (
|
item.addvnm
|
) {
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.addvnm != it.行政区) {
|
a += 1
|
} else {
|
it.中小河流 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.addvnm) {
|
it.yj += 1
|
it.yjData.push(item)
|
|
it.wx.push(item)
|
}
|
})
|
|
item.YJ = '预警'
|
|
item.time = timetext
|
}
|
})
|
|
result.zc.forEach(function (item, index) {
|
if (
|
item.addvnm
|
) {
|
if (that.oneDataTable.length > 0) {
|
var a = 0
|
that.oneDataTable.forEach(function (it, index) {
|
if (item.addvnm != it.行政区) {
|
a += 1
|
} else {
|
it.中小河流 += 1
|
}
|
})
|
if (a == that.oneDataTable.length) {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
} else {
|
that.oneDataTable.push({
|
行政区: item.addvnm,
|
中小河流: 1,
|
zc: 0,
|
zcData: [],
|
yj: 0,
|
yjData: [],
|
wx: []
|
})
|
}
|
|
// 表格数据填充
|
that.oneDataTable.forEach(function (it, index) {
|
if (it.行政区 == item.addvnm) {
|
it.zc += 1
|
it.zcData.push(item)
|
|
it.wx.push(item)
|
}
|
})
|
|
item.YJ = '正常'
|
|
item.item = timetext
|
}
|
})
|
|
var textContentOne = ''
|
|
for (
|
var j = 0, a = 0, b = 0, c = 0, d = [], f = [], g = [];
|
j < that.oneDataTable.length;
|
j++
|
) {
|
a += that.oneDataTable[j].中小河流
|
b += that.oneDataTable[j].zc
|
c += that.oneDataTable[j].yj
|
|
d.push(...that.oneDataTable[j].zcData)
|
f.push(...that.oneDataTable[j].yjData)
|
g.push(...that.oneDataTable[j].wx)
|
|
if (that.oneDataTable[j].yj > 0) {
|
textContentOne += `<span> <i>${that.oneDataTable[j].行政区}：</i> <strong ii='oneData' datac='${JSON.stringify(that.oneDataTable[j])}' typec='yjData'> ${that.oneDataTable[j].yj} </strong> <i>条；</i> </span>`
|
}
|
}
|
|
that.oneDataTable.unshift({
|
行政区: '抚州市',
|
中小河流: a,
|
zc: b,
|
zcData: d,
|
yj: c,
|
yjData: f,
|
wx: g
|
})
|
|
var ooo = {
|
行政区: '抚州市',
|
中小河流: a,
|
zc: b,
|
zcData: d,
|
yj: c,
|
yjData: f,
|
wx: g
|
}
|
|
// 生成文字预警信息
|
that.oneTextEarly = `抚州市 <span ii='0' datac='${JSON.stringify(ooo)}' typec='wx'> ${a} </span> 条中小河流中，
|
预警<span ii='2' datac='${JSON.stringify(ooo)}' typec='yjData'> ${c} </span>条${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
|
var text = `${timetext}抚州市${a}条中小河流中，
|
预警${c}条${textContentOne.length > 0
|
? '（' + textContentOne + '）'
|
: ''
|
}。`
|
|
that.$parent.$parent.updateText(text)
|
|
that.loading = false
|
})
|
},
|
|
addPolygon (data, type, color) {
|
data.geometry.paths.forEach(item => {
|
var polygonFeature = new Feature({
|
geometry: new LineString(item),
|
dataReal: data.attributes,
|
pointType: 'polygon'
|
})
|
|
polygonFeature.setStyle(new Style({
|
// 填充色
|
fill: new Fill({
|
color: color
|
}),
|
// 边线颜色
|
stroke: new Stroke({
|
color: color,
|
width: 3.6
|
})
|
}))
|
|
this[type].getSource().addFeature(polygonFeature)
|
})
|
|
this[type].setVisible(true)
|
},
|
|
// 添加实体点
|
addPoint (latd, lttd, icon, layer, name, size, all) {
|
const iconFeature = new Feature({
|
geometry: new Point([Number(latd), Number(lttd)]),
|
name: layer,
|
dataReal: all,
|
pointType: 'point'
|
})
|
|
const iconStyle = new Style({
|
image: new Icon({
|
rotation: (all['抚州50平方公里河流.angle'] * Math.PI / 180),
|
scale: size,
|
opacity: 1,
|
src: icon
|
}),
|
|
text: new Text({
|
textAlign: 'top',
|
text: name,
|
font: 'bold 14px SimHei',
|
fill: new Fill({ color: 'red' }),
|
offsetX: -10,
|
offsetY: -16
|
})
|
})
|
|
iconFeature.setStyle(iconStyle)
|
|
this[layer].getSource().addFeature(iconFeature)
|
},
|
|
layerMoveEnd (e) {
|
var zoom = this.map2D.getView().getZoom() // 获取当前地图的缩放级别
|
if (zoom >= 12) {
|
this.riverPointText.setVisible(true)
|
} else {
|
this.riverPointText.setVisible(false)
|
}
|
},
|
|
layerClick (e) {
|
const that = this
|
|
that.bigRiverVisible = false
|
|
that.exportWordData = {}
|
|
// 在点击时获取像素区域
|
that.bigRiverRealData = {
|
lists: {}
|
}
|
|
that.bigRiverRealData['hb.fhdx'] = ''
|
|
var features = this.map2D.getFeaturesAtPixel(e.pixel)
|
|
if (features.length > 0) {
|
var cont = null
|
|
var type = null
|
|
features.forEach(item => {
|
if (item.values_.dataReal) {
|
cont = item.values_.dataReal
|
type = item.values_.pointType
|
|
if (type == 'point') {
|
return true
|
}
|
}
|
})
|
|
if (cont == null) return
|
if (cont['hb.code'] == null || cont['hb.code'] == undefined) return
|
|
if (type == 'point') {
|
that.retailTitle = cont['hb.name']
|
that.retailShowFlag = true
|
that.retailSrc = `/retail/sitepopup/river.html?id=${cont['hb.code']}`
|
|
return
|
}
|
|
var container = document.getElementById('popup')
|
|
var closer = document.getElementById('popup-closer')
|
|
that.overlay = new Overlay(/** @type {olx.OverlayOptions} */({
|
element: container,
|
autoPan: false,
|
autoPanAnimation: {
|
duration: 0 // 当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
|
}
|
}))
|
|
closer.onclick = function () {
|
that.overlay.setPosition(undefined)
|
closer.blur()
|
this.bigRiverVisible = false
|
return false
|
}
|
|
var coordinate = e.coordinate
|
|
that.overlay.setPosition(coordinate)
|
that.map2D.addOverlay(that.overlay)
|
|
cont.lists.fh = cont['hb.fhdx']
|
|
that.bigRiverVisible = true
|
|
that.bigRiverRealData = cont
|
|
cont.lists.minz = Number(cont.lists.minz).toFixed(2)
|
|
that.exportWordData.remark = '中小河流'
|
|
that.exportWordData.real = cont.lists
|
|
that.exportWordData.table = [cont.lists]
|
}
|
},
|
// 控制图层显示隐藏事件
|
layerControl (item) {
|
if (item.type == 'riskLayerNot') {
|
this.legendData[0].content[0].btnClass == '' ? this.legendData[0].content[0].btnClass = 'btn-wgl' : this.legendData[0].content[0].btnClass = ''
|
} else if (item.type == 'riskLayerNormal') {
|
this.legendData[0].content[1].btnClass == '' ? this.legendData[0].content[1].btnClass = 'btn-zc' : this.legendData[0].content[1].btnClass = ''
|
} else {
|
this.legendData[0].content[2].btnClass == '' ? this.legendData[0].content[2].btnClass = 'btn-yj' : this.legendData[0].content[2].btnClass = ''
|
}
|
|
this[item.type].setVisible(!this[item.type].getVisible())
|
},
|
|
layerControls (item) {
|
item.type.forEach(it => {
|
this[it].setVisible(!this[it].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
|
},
|
|
// 左侧表格数据导出
|
exportExcel () {
|
var filename = ''
|
var tHeader = []
|
var filterVal = []
|
var data = null
|
|
filename = '中小河流数据表格'
|
tHeader = [
|
'行政区',
|
'中小河流',
|
'预警'
|
]
|
filterVal = [
|
'行政区',
|
'中小河流',
|
'yj'
|
]
|
|
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.dataType == '实时') {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'河流名称',
|
'水位(m)',
|
'警戒水位(m)',
|
'日期',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'addvnm',
|
'STCD',
|
'stname',
|
'river',
|
'Z',
|
'yjsw',
|
'TM',
|
'YJ'
|
]
|
} else {
|
tHeader = [
|
'序号',
|
'县(区)',
|
'站码',
|
'站名',
|
'河流名称',
|
'水位(m)',
|
'警戒水位(m)',
|
'日期',
|
'是否预警'
|
]
|
filterVal = [
|
'ind',
|
'addvnm',
|
'STCD',
|
'stname',
|
'river',
|
'Z',
|
'yjsw',
|
'ytime',
|
'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
|
|
this.getYmDate()
|
},
|
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? '0' + s : s
|
},
|
|
dialogOpen (row, type) {
|
this.searchStname = ''
|
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 = ''
|
var b = 0
|
var c = ''
|
|
row.yjData.length > 0 &&
|
row.yjData.forEach((item) => {
|
a += item.addvnm + item.river + '河段将发生超警戒水位' + Number(item.Z - item.yjsw).toFixed(2) + '米左右洪水、'
|
b += 1
|
c += item.fh + '站、'
|
})
|
|
this.noteTitle = row['行政区']
|
this.noteText = `${year}年${month}月${day}日${hour}时受强降雨影响
|
${b > 0
|
? '，预警的河流有：' +
|
a.substr(0, a.length - 1) + '。抚河水文水资源监测中心提请' + c.substr(0, c.length - 1) + '等加强防范，及时避险。'
|
: '。'
|
} `
|
|
this.noteText = this.noteText.replace(/\s/g, '')
|
},
|
|
// dialog搜索方法
|
dialogSearch () {
|
var arr = []
|
this.dislogEarlyTable.forEach((item) => {
|
if (
|
(item.stname &&
|
item.stname.indexOf(this.searchStname) != -1) &&
|
(item.STCD &&
|
item.STCD.indexOf(this.searchStcd) != -1)
|
) {
|
arr.push(item)
|
}
|
})
|
|
arr.forEach((item, index) => {
|
item.ind = index + 1
|
})
|
this.currpage = 1
|
this.earlyTable = arr
|
},
|
// dialog清空方法
|
dialogSearchClear () {
|
this.searchStname = ''
|
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'))
|
}
|
}
|
},
|
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.riskLayerNot.getSource().clear()
|
this.riskLayerNormal.getSource().clear()
|
this.riskLayerWarn.getSource().clear()
|
this.siteLayer.getSource().clear()
|
this.siteLayerWarn.getSource().clear()
|
this.riverPointText.getSource().clear()
|
|
this.map2D.un('singleclick', this.layerClick)
|
this.map2D.un('moveend', this.layerMoveEnd)
|
this.siteLayerWarn.un('postrender', this.flickerPointTwo)
|
|
if (this.overlay != null) {
|
this.map2D.removeOverlay(this.overlay)
|
}
|
|
this.map2D.removeLayer(this.riskLayerNot)
|
this.map2D.removeLayer(this.riskLayerNormal)
|
this.map2D.removeLayer(this.riskLayerWarn)
|
this.map2D.removeLayer(this.siteLayer)
|
this.map2D.removeLayer(this.siteLayerWarn)
|
this.map2D.removeLayer(this.riverPointText)
|
|
this.waterAllLayer.setVisible(true)
|
}
|
}
|
</script>
|
|
<style lang='scss' scoped>
|
.risk-child-item .el-button:hover {
|
color: #606266;
|
|
background: transparent;
|
border: 0px;
|
}
|
</style>
|
