<template>
|
<div class="content-container">
|
|
<div class="main-content"
|
id="MainContent">
|
<router-view ref='target-name' />
|
</div>
|
|
<div class="modele-name" v-show='modelText.length > 0' v-text="modelText">
|
|
</div>
|
|
<el-button v-show='leftShow'
|
class="flexible-btn"
|
:icon=" show ? 'el-icon-arrow-left' : 'el-icon-arrow-right' "
|
id="FlexibleBtn"
|
type="primary"
|
@click="flexibelClick"></el-button>
|
|
<div v-show='leftShow'
|
class="general-situation-box"
|
id="GeneralSituation">
|
<span v-html="textareas">
|
</span>
|
<el-button type="text"
|
@click="detailClick"
|
size='mini'>
|
更多>>
|
</el-button>
|
</div>
|
|
<div class="map-scene"
|
ref="MapSceneContent">
|
<div>
|
<div class="tool-content"
|
@click="threeFlagChange">{{ selectFlag == true ? '2D' : '3D' }}</div>
|
<Map ref="modalForm" />
|
</div>
|
</div>
|
|
<el-button class="bulletin-btn"
|
type="primary"
|
@click="waterRainVisible = true">
|
简报
|
</el-button>
|
|
<el-dialog title="水雨情"
|
class="water-rain-box"
|
custom-class="way"
|
:visible.sync="waterRainVisible"
|
width="540"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false">
|
|
<div class="risk-text">
|
|
<div class="header">
|
|
<el-date-picker v-model="generalTime"
|
type="datetimerange"
|
format="yyyy-MM-dd HH"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
size="samll"
|
:editable="false">
|
</el-date-picker>
|
<el-button size="samll"
|
type="primary"
|
@click="probablyUpdate"
|
icon="el-icon-search">查询</el-button>
|
</div>
|
<div class="content"
|
v-loading="topLoading"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.2)">
|
<p v-html="textProbably"
|
@click="retailOpen($event)"></p>
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog :title="retailTitle"
|
class="retail-popup"
|
:visible.sync="retailShowFlag"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false">
|
<iframe :src="retailSrc"
|
frameborder="0"></iframe>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import Map from '@/components/map/map.vue'
|
import store from '@/store/' // 全局状态
|
import axios from 'axios'
|
// eslint-disable-next-line no-unused-vars
|
import { customList } from '@/api/reservoir'
|
|
// eslint-disable-next-line no-unused-vars
|
import { customRiserwayList } from '@/api/riserway'
|
|
import {
|
pointRainList,
|
// eslint-disable-next-line no-unused-vars
|
regionRainList
|
} from '@/api/rainWaterFeeling/rainWaterFeeling'
|
|
export default {
|
name: 'Main',
|
components: {
|
Map
|
},
|
data () {
|
return {
|
modelText: '',
|
leftShow: true,
|
textareas: '',
|
show: false,
|
boxWidth: 0,
|
waterRainVisible: false,
|
// 左侧顶部时间
|
pickerOptions: {
|
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])
|
}
|
}
|
]
|
},
|
// 保存自定义时间
|
generalTime: [
|
new Date().setTime(new Date().getTime() - 3600 * 1000),
|
new Date()
|
],
|
// 顶部文字
|
textProbably: '',
|
topLoading: true,
|
|
// 水雨情简报内容相关
|
retailTitle: '',
|
retailShowFlag: false,
|
retailSrc: '',
|
|
threeFlag: false,
|
selectFlag: false,
|
map3D: null,
|
map2D: store.state.openlayers.map2D
|
}
|
},
|
created () {
|
this.generalTime[0] = this.timeOrTimeNum(this.generalTime[0])
|
},
|
mounted () {
|
this.map3D = store.state.openlayers.map3D
|
this.probablyUpdate()
|
// var credit = this.map3D.scene_._frameState.creditDisplay
|
// if (credit.container) {
|
// credit.container.removeChild(credit.container)
|
// }
|
},
|
methods: {
|
leftCenter (val) {
|
},
|
|
leftCenterTwo () {
|
|
},
|
|
leftShowClick (val) {
|
this.leftShow = val
|
},
|
|
updateText (val) {
|
this.textareas = val
|
},
|
|
detailClick () {
|
if (this.show) return
|
this.flexibelClick()
|
},
|
|
flexibelClick () {
|
this.show = !this.show
|
|
this.$refs['target-name'].boxResize(this.show)
|
|
if (this.show) {
|
document.getElementById('MainContent').style.width = this.boxWidth
|
|
var a = this.boxWidth.replace(/[^0-9]/ig, '')
|
|
document.getElementById('FlexibleBtn').style.left = a + 'px'
|
} else {
|
document.getElementById('MainContent').style.width = 0
|
|
document.getElementById('FlexibleBtn').style.left = 0
|
}
|
|
this.$refs.modalForm.resize()
|
|
// this.boxWidth
|
},
|
// 查询概况事件
|
// 顶部文字更新
|
probablyUpdate () {
|
if (this.generalTime.length == 0) {
|
this.$message({ message: '请选择时间', duration: 2000 })
|
return
|
}
|
this.topLoading = true
|
this.textProbably = ''
|
const startTime = new Date(this.generalTime[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.generalTime[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())
|
|
axios
|
.all([
|
pointRainList(start, end),
|
customRiserwayList(start, end),
|
customList(start, end),
|
regionRainList(start, end)
|
])
|
.then((data) => {
|
var result = data[3].data.data[0]
|
|
var str = result.text
|
|
result.List.length > 0 &&
|
result.List.forEach((item, index) => {
|
item.siteNum = 0
|
|
result.Num.forEach((it) => {
|
if (item.region == it.ADDVNM) {
|
item.siteNum += 1
|
}
|
})
|
})
|
|
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
|
})
|
|
if (result.List.length > 0) {
|
str += `${result.List[0].region}${result.List[0].dyp}毫米最大，`
|
str += `${result.List[1].region}${result.List[1].dyp}毫米次之，`
|
str += `${result.List[2].region}${result.List[2].dyp}毫米第三。`
|
}
|
|
var txt = ''
|
txt += '<span>雨情：</span>'
|
txt += str
|
|
txt += data[0].data.data[0].text
|
txt += '<br>'
|
|
txt += '<span>水情：</span>'
|
txt += data[1].data.data[0].text
|
txt += '<br>'
|
|
// txt += data[0].data.data[0].text
|
txt += '<span>水库水情：</span>'
|
txt += data[2].data.data[0].text
|
|
this.textProbably = txt
|
this.textProbably = this.textProbably.replace(
|
/\$\$\$\$\$廖坊/,
|
"<strong class='text-tab' stcd='62401300'>廖坊"
|
)
|
this.textProbably = this.textProbably.replace(
|
/&&&&&/,
|
'</strong>'
|
)
|
this.textProbably = this.textProbably.replace(
|
/\$\$\$\$\$洪门/,
|
"<strong class='text-tab' stcd='62403400'>洪门"
|
)
|
this.textProbably = this.textProbably.replace(
|
/&&&&&/,
|
'</strong>'
|
)
|
|
if (this.textProbably.indexOf('$$$$$洪门') != -1) {
|
this.textProbably = this.textProbably.replace(
|
/\$\$\$\$\$洪门/, '洪门'
|
)
|
this.textProbably = this.textProbably.replace(/&&&&&/, '')
|
}
|
|
if (this.textProbably.indexOf('$$$$$廖坊') != -1) {
|
this.textProbably = this.textProbably.replace(
|
/\$\$\$\$\$廖坊/, '廖坊'
|
)
|
this.textProbably = this.textProbably.replace(/&&&&&/, '')
|
}
|
|
this.topLoading = false
|
})
|
},
|
retailOpen (e) {
|
if (e.target.nodeName == 'STRONG') {
|
this.retailTitle = e.target.innerText
|
this.retailShowFlag = true
|
this.retailSrc = `/retail/popup/reservoir.html?stcd=${e.target.attributes.stcd.value}`
|
}
|
},
|
// 页面初始化时，时间修改的事件
|
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
|
},
|
// 处理时间补零操作
|
disposeTime (s) {
|
return s < 10 ? '0' + s : s
|
},
|
|
resize (val, minval, flag, model) {
|
if (model) {
|
this.modelText = model
|
} else {
|
this.modelText = ''
|
}
|
|
this.boxWidth = val
|
|
this.show = false
|
|
this.$refs['target-name'].boxResize(this.show)
|
|
document.getElementById('MainContent').style.width = 0
|
|
document.getElementById('FlexibleBtn').style.left = 0
|
|
// document.getElementById('MainContent').style.minWidth = minval
|
|
// document.getElementById('FlexibleBtn').style.left = val
|
|
var view = this.map2D.getView()
|
|
view.setCenter([116.46736567614217, 27.529382927598178])
|
|
view.setZoom(9.2)
|
|
this.$refs.modalForm.resize()
|
},
|
threeFlagChange () {
|
this.selectFlag = !this.selectFlag
|
this.selectFlag == true
|
? this.map3D.setEnabled(true)
|
: this.map3D.setEnabled(false)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
</style>
|
