| | |
| | | element-loading-text="请稍等"
|
| | | element-loading-background="rgba(0, 0, 0, 0.6)"
|
| | | >
|
| | | <div v-if="noneData" class="noneData">
|
| | | 当前区域设备没有风场
|
| | | </div>
|
| | | <div v-if="noneData" class="noneData">当前区域设备没有风场</div>
|
| | | <div class="top">
|
| | | <span
|
| | | v-for="(item, index) in params"
|
| | |
| | | class="left"
|
| | | :class="{ click: changeColor === index }"
|
| | | @click="change(index)"
|
| | | >{{ item }}</span>
|
| | | >{{ item }}</span
|
| | | >
|
| | | <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
|
| | | <span class="right">{{ times }}秒</span>
|
| | | <span class="dropDown">
|
| | |
| | | :src="require('@/assets/images/regionalOverview/realTimeImg.png')"
|
| | | alt=""
|
| | | @click="turnState"
|
| | | >
|
| | | />
|
| | | <span class="text_Time">{{ dateFormat }}</span>
|
| | | <img
|
| | | class="drop-icon"
|
| | | :src="turnImg"
|
| | | alt=""
|
| | | @click="turnState"
|
| | | >
|
| | | <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
|
| | | </span>
|
| | | </div>
|
| | | <div class="topDate" style="height: 60px">
|
| | |
| | | jingdu: Number,
|
| | | monitorPointId: Number,
|
| | | monitorPointIds: Array,
|
| | | defaultData: Array,
|
| | | },
|
| | | data() {
|
| | | data () {
|
| | | return {
|
| | | compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
|
| | | compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
|
| | |
| | | timeInfo: '', // 选择的时间
|
| | | nyr: '', // 选择的年月日
|
| | | windJsonData: [],
|
| | | clickmac: '',
|
| | | childerItem: {},
|
| | | farterItem: {},
|
| | | indexsLaber: 0
|
| | | }
|
| | | },
|
| | | computed: {
|
| | | ...mapGetters(['regionCode']),
|
| | | },
|
| | | watch: {
|
| | | dateValue(n, o) {
|
| | | // console.log(n)
|
| | | dateValue (n, o) {
|
| | | // this.newDate()
|
| | | },
|
| | | regionCode(newCode, oldCode) {
|
| | | regionCode (newCode, oldCode) {
|
| | | this.timerKey = newCode // 用于监听code变化重新渲染子组件
|
| | | },
|
| | | windJsonData(newCode, oldCode) {
|
| | | windJsonData (newCode, oldCode) {
|
| | | this.$nextTick(() => {
|
| | | console.log('111')
|
| | |
|
| | | this.canvasWind(newCode)
|
| | | })
|
| | | },
|
| | | },
|
| | | mounted() {
|
| | | mounted () {
|
| | | this.currentHour()
|
| | | this.$Bus.$on(
|
| | | 'alarmTableVisible',
|
| | |
| | |
|
| | | // 事件代理
|
| | | this.eventProxy()
|
| | | window.deviceDetail = this.deviceDetail
|
| | | },
|
| | | created() {
|
| | | created () {
|
| | | const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
|
| | | this.jingduNew = newLL[1]
|
| | | this.weiduNew = newLL[0]
|
| | |
| | | this.newDate()
|
| | | // this.alertData(this.PageSize, this.currentPage)
|
| | | },
|
| | | beforeDestroy() {
|
| | | beforeDestroy () {
|
| | | if (this.timer) {
|
| | | clearInterval(this.timer)
|
| | | // console.log('timer定时器销毁成功')
|
| | | }
|
| | | if (this.timer2) {
|
| | | // console.log(this.timer2)
|
| | | clearInterval(this.timer2)
|
| | | // console.log('timer2定时器销毁成功')
|
| | | }
|
| | | // 离开页面时关闭websocket
|
| | | if (this.ws) {
|
| | | // console.log('WS关闭')
|
| | | this.ws.close()
|
| | | }
|
| | | },
|
| | | methods: {
|
| | | // 拿到某天的日期和星期
|
| | | getDayXQ(day) {
|
| | | getDayXQ (day) {
|
| | | var days = new Date()
|
| | | .getDay() // 星期
|
| | | .getDay() // 星期
|
| | | var rq = '' // 日期
|
| | | if (day === 'today') {
|
| | | rq = this.newData(0)
|
| | |
| | | return `${rq}(${days})`
|
| | | },
|
| | | // 计算当天之前或者之后的日期
|
| | | newData(day, info) {
|
| | | newData (day, info) {
|
| | | var today = new Date()
|
| | | var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
| | | today.setTime(targetday_milliseconds)
|
| | |
| | | }
|
| | | },
|
| | | // 事件代理
|
| | | eventProxy() {
|
| | | eventProxy () {
|
| | | // 拿到今天的日期和星期
|
| | | var ul = document.querySelector('#eventPro')
|
| | | var lis = document.querySelectorAll('#eventPro>li')
|
| | |
| | | lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
| | | }
|
| | | }
|
| | | // console.log('下边点击进来了', greenInfo, 'index')
|
| | |
|
| | | }
|
| | | that.times = 1
|
| | | that.getParamsData(true)
|
| | |
| | | // 鼠标移入移出事件
|
| | | for (let i = 0; i < lis.length; i++) {
|
| | | lis[i].onmouseenter = function () {
|
| | | // console.log('mouseenter', i)
|
| | | // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
| | | mouseDiv.style.transform = 'translateX(-50%)'
|
| | | mouseDiv.style.left = 1.36986 * (i + 1) + '%'
|
| | | mouseDiv.style.display = 'block'
|
| | | var times = (i - 0 + 1) % 24
|
| | | times = times > 9 ? times : '0' + times
|
| | | inText.innerHTML = times + ':00'
|
| | | // console.log(mouseDiv)
|
| | | }
|
| | | lis[i].onmouseleave = function () {
|
| | | mouseDiv.style.display = 'none'
|
| | | // console.log('移出事件', i)
|
| | | }
|
| | | }
|
| | | for (let i = 0; i < timeLis.length; i++) {
|
| | | timeLis[i].onmouseenter = function () {
|
| | | // console.log('mouseenter', i)
|
| | | // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
| | | mouseDiv.style.left = 1.36986 * i + '%'
|
| | | mouseDiv.style.transform = 'translateX(-50%)'
|
| | | mouseDiv.style.display = 'block'
|
| | | var times = i % 24
|
| | | times = times > 9 ? times : '0' + times
|
| | | inText.innerHTML = times + ':00'
|
| | | // console.log(mouseDiv)
|
| | | }
|
| | | timeLis[i].onmouseleave = function () {
|
| | | mouseDiv.style.display = 'none'
|
| | | // console.log('移出事件', i)
|
| | | }
|
| | | }
|
| | | },
|
| | | // 当前小时默认值
|
| | | currentHour() {
|
| | | currentHour () {
|
| | | // const aData = new Date()
|
| | | // const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
|
| | | // const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
| | |
| | | this.dateFormat = currentDate.toString()
|
| | | },
|
| | | // 日期格式化
|
| | | newDate() {
|
| | | newDate () {
|
| | | var aData = new Date()
|
| | | var month =
|
| | | aData.getMonth() < 9
|
| | |
| | | : aData.getMonth() + 1
|
| | | var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
| | | this.currentDate = aData.getFullYear() + '-' + month + '-' + date
|
| | | // console.log(this.currentDate)
|
| | | this.dateValue = [this.currentDate, this.currentDate]
|
| | | },
|
| | | // 报警弹窗移入
|
| | | mouseOver() {
|
| | | mouseOver () {
|
| | | this.map.scrollWheelZoom.disable()
|
| | | },
|
| | | // 报警弹窗移出
|
| | | mouseLeave() {
|
| | | mouseLeave () {
|
| | | this.map.scrollWheelZoom.enable()
|
| | | },
|
| | | // 百度经纬度转高德经纬度
|
| | | bd09togcj02(bd_lon, bd_lat) {
|
| | | bd09togcj02 (bd_lon, bd_lat) {
|
| | | var x_pi = (3.14159265358979324 * 3000.0) / 180.0
|
| | | var x = bd_lon - 0.0065
|
| | | var y = bd_lat - 0.006
|
| | |
| | | return [gg_lat, gg_lng]
|
| | | },
|
| | | // 请求设备坐标,当前的
|
| | | deviceMaker() {
|
| | | deviceMaker () {
|
| | | if (this.map) {
|
| | | this.map.eachLayer(function (layer) {
|
| | | // 卸载之前的风场图层
|
| | | if (
|
| | | !layer._container &&
|
| | | ('' + $(layer._container)
|
| | | .attr('class')).replace(/\s/g, '') !==
|
| | | 'leaflet-layer'
|
| | | .attr('class')).replace(/\s/g, '') !==
|
| | | 'leaflet-layer'
|
| | | ) {
|
| | | layer.remove()
|
| | | }
|
| | |
| | | time: this.nyr,
|
| | | },
|
| | | })
|
| | | .then((data) => {
|
| | | // console.log('五分钟设备数据')
|
| | | this.markDeviceSite(data)
|
| | | })
|
| | | .then((data) => {
|
| | | this.markDeviceSite(data)
|
| | | })
|
| | | },
|
| | | // 标记设备点
|
| | | markDeviceSite(data) {
|
| | | markDeviceSite (data) {
|
| | | var keyData = data.data.devices
|
| | | this.keyData = data.data.devices
|
| | | // 遍历国控站位置
|
| | | // this.stateControlStation()
|
| | | var groupIcon = L.layerGroup()
|
| | | .addTo(this.map)
|
| | | .addTo(this.map)
|
| | | var groupText = L.layerGroup()
|
| | | .addTo(this.map)
|
| | | .addTo(this.map)
|
| | | this.keys = []
|
| | | for (let i = 0; i < keyData.length; i++) {
|
| | | if (keyData[i].a34002) {
|
| | |
| | | this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
|
| | | } else if (keyData[i].a21004) {
|
| | | this.keys.push(Math.floor(JSON.parse(keyData[i].a21004)
|
| | | .toFixed(0)))
|
| | | .toFixed(0)))
|
| | | } else if (keyData[i].a21005) {
|
| | | this.keys.push(JSON.parse(keyData[i].a21005)
|
| | | .toFixed(3))
|
| | | .toFixed(3))
|
| | | } else if (keyData[i].a05024) {
|
| | | this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
|
| | | } else if (keyData[i].a99054) {
|
| | | this.keys.push(JSON.parse(keyData[i].a99054)
|
| | | .toFixed(3))
|
| | | .toFixed(3))
|
| | | } else {
|
| | | // for (let j = 0; j < keyData.length; j++) {
|
| | | this.keys.push(JSON.parse('null'))
|
| | |
| | | } else if (keyData[i].a21004) {
|
| | | var data = Math.floor(
|
| | | Math.floor(JSON.parse(keyData[i].a21004)
|
| | | .toFixed(0))
|
| | | .toFixed(0))
|
| | | )
|
| | | switch (true) {
|
| | | case data < 0: {
|
| | |
| | | }
|
| | | } else if (keyData[i].a21005) {
|
| | | var data = JSON.parse(keyData[i].a21005)
|
| | | .toFixed(3)
|
| | | .toFixed(3)
|
| | | switch (true) {
|
| | | case data < 0: {
|
| | | colorNum = 7
|
| | |
| | | }
|
| | | } else if (keyData[i].a99054) {
|
| | | var data = JSON.parse(keyData[i].a99054)
|
| | | .toFixed(3)
|
| | | .toFixed(3)
|
| | | switch (true) {
|
| | | case data < 0: {
|
| | | colorNum = 7
|
| | |
| | | icon: blueIcon,
|
| | | })
|
| | | groupIcon.addLayer(iconMarker)
|
| | | // console.log(JSON.parse(this.keys[i]))
|
| | | var myIcon = L.divIcon({
|
| | | html: this.keys[i],
|
| | | className: 'my-div-icon',
|
| | |
| | | })
|
| | |
|
| | | const TexteMarker = L.marker([lat, lng], { icon: myIcon })
|
| | | TexteMarker.vuecontext = this
|
| | | TexteMarker.inforData = keyData[i]
|
| | | groupText.addLayer(TexteMarker)
|
| | | const _this = this
|
| | | // 给标记添加鼠标移入事件,mouseover事件会冒泡
|
| | |
| | | // this.bindPopup().closePopup()
|
| | | // })
|
| | | }
|
| | | console.log(' this.keys', this.keys)
|
| | | },
|
| | | styleBgColor(keyName) {
|
| | | console.log('keyName', keyName)
|
| | | styleBgColor (keyName) {
|
| | | let bgColorList = {
|
| | | pm25colorbg: '',
|
| | | pm10colorbg: '',
|
| | |
| | | }
|
| | | } else if (i === 'a21004') {
|
| | | data = Math.floor(Math.floor(JSON.parse(keyName.a21004)
|
| | | .toFixed(0)))
|
| | | .toFixed(0)))
|
| | | switch (true) {
|
| | | case data < 0: {
|
| | | bgColorList.no210colorbg = '#999999'
|
| | |
| | | }
|
| | | } else if (i === 'a21005') {
|
| | | data = JSON.parse(keyName.a21005)
|
| | | .toFixed(3)
|
| | | .toFixed(3)
|
| | | switch (true) {
|
| | | case data < 0: {
|
| | | bgColorList.cocolorbg = '#999999'
|
| | |
| | | }
|
| | | } else if (i === 'a99054') {
|
| | | data = JSON.parse(keyName.a99054)
|
| | | .toFixed(3)
|
| | | .toFixed(3)
|
| | | switch (true) {
|
| | | case data < 0: {
|
| | | bgColorList.tvoccolorbg = '#999999'
|
| | |
| | | }
|
| | | return bgColorList
|
| | | },
|
| | | handleClick(data, marker) {
|
| | | deviceDetail () {
|
| | | console.log('this.farterItem', this.farterItem)
|
| | | this.monitorPointInfo = this.farterItem
|
| | |
|
| | | this.$router.push({
|
| | | name: 'deviceDetail',
|
| | | params: {
|
| | | monitorPointInfo: this.farterItem,
|
| | | device: this.clickmac,
|
| | | macName: this.clickmac,
|
| | | indexs: this.indexsLaber,
|
| | | items: [this.clickmac.latitude, this.clickmac.longitude]
|
| | | },
|
| | | query: {
|
| | | monitorPointInfo: JSON.stringify(this.farterItem),
|
| | | device: JSON.stringify(this.clickmac),
|
| | | macName: this.clickmac,
|
| | | indexs: this.indexsLaber,
|
| | | items: [this.clickmac.latitude, this.clickmac.longitude]
|
| | | }
|
| | | })
|
| | | },
|
| | | handleClick (data, marker) {
|
| | | this.clickmac = ''
|
| | | this.childerItem = {}
|
| | | this.farterItem = {}
|
| | | this.indexsLaber = 0
|
| | | this.clickmac = marker.inforData.mac
|
| | | this.childerItem = marker.inforData
|
| | | this.defaultData.forEach(item => {
|
| | | item.devices.forEach((dev, index) => {
|
| | | if (dev.mac === marker.inforData.mac) {
|
| | | this.farterItem = item
|
| | | this.indexsLaber = index
|
| | | }
|
| | | })
|
| | | })
|
| | | this.$request({
|
| | | url: '/historyFiveMinutely/queryFiveDataByMac',
|
| | | method: 'get',
|
| | |
| | | },
|
| | | })
|
| | | .then((res) => {
|
| | | console.log('res.data', res)
|
| | | if (res.message === '操作目标不存在') {
|
| | | var datafalse = '暂无五分钟数据'
|
| | | marker.bindPopup(datafalse)
|
| | | .openPopup()
|
| | | .openPopup()
|
| | | return
|
| | | }
|
| | | let colorliststyleBgColor = this.styleBgColor(res.data)
|
| | |
| | | let deviceDetails = res.data
|
| | | let windDeg = 0
|
| | | let windDir = ''
|
| | | let dushu =
|
| | | !deviceDetails.a01008 === '-'
|
| | | ? JSON.parse(deviceDetails.a01008)
|
| | | .toFixed(0)
|
| | | : '-'
|
| | | let level =
|
| | | !deviceDetails.a01007 === '-'
|
| | | ? WWindUtil.windFormatLevel(deviceDetails.a01007)
|
| | | : '-'
|
| | | let dushu = deviceDetails.a01008 === '-' ? '-' : JSON.parse(deviceDetails.a01008)
|
| | | .toFixed(0)
|
| | | let level = deviceDetails.a01007 === '0.0' ? '-' : WWindUtil.WindtoLevel(deviceDetails.a01007).level
|
| | | console.log('level', level)
|
| | | if (deviceDetails.a01008) {
|
| | | var windDirs = Number(
|
| | |
| | | // 请求数据更新弹框内容
|
| | | let html = ` <div data-reactroot="" class="marker_maptip">
|
| | | <div class="marker_title_1nQ">
|
| | | <span>设备详情</span>
|
| | | <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>
|
| | | </div>
|
| | | <div class="marker_firstline_2WH">
|
| | | <div class="marker_citypart_keg">
|
| | |
| | | <div class="marker_indexpart_2UI">
|
| | | <div
|
| | | class="marker_indexname_3TP"
|
| | | style="color: black;background:${
|
| | | colorliststyleBgColor.tvoccolorbg
|
| | | }"
|
| | | style="color: black;background:${colorliststyleBgColor.tvoccolorbg
|
| | | }"
|
| | | >
|
| | | TVOC
|
| | | </div>
|
| | |
| | | <div class="marker_item_2Kk">
|
| | | <div
|
| | | class="marker_itemname_Wq5"
|
| | | style="color: black;background:${
|
| | | colorliststyleBgColor.pm25colorbg
|
| | | } "
|
| | | style="color: black;background:${colorliststyleBgColor.pm25colorbg
|
| | | } "
|
| | | >
|
| | | PM2.5
|
| | | </div>
|
| | |
| | | <div class="marker_item_2Kk">
|
| | | <div
|
| | | class="marker_itemname_Wq5"
|
| | | style="color: black;background:${
|
| | | colorliststyleBgColor.pm10colorbg
|
| | | }"
|
| | | style="color: black;background:${colorliststyleBgColor.pm10colorbg
|
| | | }"
|
| | | >
|
| | | PM10
|
| | | </div>
|
| | |
| | | <div class="marker_item_2Kk">
|
| | | <div
|
| | | class="marker_itemname_Wq5"
|
| | | style="color: black;background:${
|
| | | colorliststyleBgColor.so2colorbg
|
| | | }"
|
| | | style="color: black;background:${colorliststyleBgColor.so2colorbg
|
| | | }"
|
| | | >
|
| | | SO2
|
| | | </div>
|
| | |
| | | <div class="marker_item_2Kk">
|
| | | <div
|
| | | class="marker_itemname_Wq5"
|
| | | style="color: black;background:${
|
| | | colorliststyleBgColor.no210colorbg
|
| | | }"
|
| | | style="color: black;background:${colorliststyleBgColor.no210colorbg
|
| | | }"
|
| | | >
|
| | | NO2
|
| | | </div>
|
| | |
| | | <div class="marker_item_2Kk">
|
| | | <div
|
| | | class="marker_itemname_Wq5"
|
| | | style="color: black;background:${
|
| | | colorliststyleBgColor.cocolorbg
|
| | | }"
|
| | | style="color: black;background:${colorliststyleBgColor.cocolorbg
|
| | | }"
|
| | | >
|
| | | CO
|
| | | </div>
|
| | |
| | | <div class="marker_item_2Kk">
|
| | | <div
|
| | | class="marker_itemname_Wq5"
|
| | | style="color: black; background:${
|
| | | colorliststyleBgColor.o3colorbg
|
| | | }"
|
| | | style="color: black; background:${colorliststyleBgColor.o3colorbg
|
| | | }"
|
| | | >
|
| | | O3
|
| | | </div>
|
| | |
| | | <div class='windBox'>
|
| | | <div style="position: relative;width: 50%;text-align: center;color: #999;border-right: 1px dotted #999;" clss='windIcon'>
|
| | | <img style="width:140px; height:140px" src=${this.compassBg}>
|
| | | <img style="width: 40px;height: 40px;position: absolute;left: 53%;top: 47%;transform: translate(-50%, -50%) rotate(${windDeg}deg)"
|
| | | <img style="width: 40px;height: 40px;position: absolute;left: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg)"
|
| | | src=${this.compassDirection}
|
| | | >
|
| | | </div>
|
| | | <div class='windInfor'>
|
| | | <div>风向: ${windDir} (${dushu}℃)</div>
|
| | | <div>风速: ${deviceDetails.a01007}m/s</div>
|
| | | <div>等级: ${level}</div>
|
| | | <div>等级: ${level}级</div>
|
| | | </div>
|
| | | </div>
|
| | |
|
| | | </div>`
|
| | | marker.bindPopup(html, { className: 'mypopup' })
|
| | | .openPopup()
|
| | | .openPopup()
|
| | | })
|
| | | .catch((err) => {
|
| | | console.log(err)
|
| | | })
|
| | | },
|
| | | handleCutZero(data) {
|
| | | handleCutZero (data) {
|
| | |
|
| | | let num = data.substring(0,data.indexOf(".")+4);
|
| | | let num = data.substring(0, data.indexOf(".") + 4);
|
| | | //拷贝一份 返回去掉零的新串
|
| | | // let num = Number(data).toFixed(3).toString()
|
| | | let newstr = num
|
| | |
| | | }
|
| | | return num
|
| | | },
|
| | | getMarkerInfor(data, marker) {
|
| | | getMarkerInfor (data, marker) {
|
| | | this.$request({
|
| | | url: '/historyFiveMinutely/queryPopDataByMac',
|
| | | method: 'get',
|
| | |
| | | if (res.message === '操作目标不存在') {
|
| | | var datafalse = '暂无五分钟数据'
|
| | | this.bindPopup(datafalse)
|
| | | .openPopup()
|
| | | .openPopup()
|
| | | return
|
| | | }
|
| | | for (const key in res.data) {
|
| | | var tempDecimal = res.data[key].replace(/[^\d.]/g, '')
|
| | | .split('.')[1]
|
| | | .split('.')[1]
|
| | | if (key !== '名称' && key !== '时间') {
|
| | | if (Number(tempDecimal) === 0) {
|
| | | res.data[key] =
|
| | |
| | | } else {
|
| | | res.data[key] =
|
| | | Number(res.data[key].split(' ')[0])
|
| | | .toFixed(2) +
|
| | | .toFixed(2) +
|
| | | res.data[key].split(' ')[1]
|
| | | }
|
| | | }
|
| | |
| | | .replace(/{|}|"/g, '')
|
| | | console.log(data)
|
| | | marker.bindPopup(data)
|
| | | .openPopup()
|
| | | .openPopup()
|
| | | })
|
| | | .catch((err) => {
|
| | | console.log(err)
|
| | |
| | | return data
|
| | | },
|
| | | // 请求风向标
|
| | | windDir() {
|
| | | windDir () {
|
| | | // console.log('加载风向')
|
| | | // console.log('风向标ws请求开始')
|
| | | // const that = this
|
| | |
| | | if (
|
| | | !layer._container &&
|
| | | ('' + $(layer._container)
|
| | | .attr('class')).replace(/\s/g, '') !==
|
| | | 'leaflet-layer'
|
| | | .attr('class')).replace(/\s/g, '') !==
|
| | | 'leaflet-layer'
|
| | | ) {
|
| | | layer.remove()
|
| | | }
|
| | |
| | | this.deviceMaker()
|
| | | },
|
| | | // 获得父组件改变regionCode子组件请求api功能
|
| | | getRegionApiRequest() {
|
| | | getRegionApiRequest () {
|
| | | this.getParamsData(true)
|
| | | setTimeout(() => {
|
| | | $.getJSON(
|
| | |
| | | }, 1000)
|
| | | },
|
| | | // 子组件地图的跳转中心点方法
|
| | | jumpMap(LngLat) {
|
| | | jumpMap (LngLat) {
|
| | | this.map.setView(LngLat, 18)
|
| | | },
|
| | | // 请求更新风场数据
|
| | | getParamsData(isFirst = true) {
|
| | | getParamsData (isFirst = true) {
|
| | | clearInterval(this.timer)
|
| | | this.timer = setInterval(() => {
|
| | | this.currentHour()
|
| | |
| | | }
|
| | | }, 1000)
|
| | | },
|
| | | findLayer(layerName) {
|
| | | findLayer (layerName) {
|
| | | // 根据图层名称查找图层
|
| | | if (!this.map) {
|
| | | return null
|
| | |
| | | return layer
|
| | | },
|
| | | // 初始化地图容器
|
| | | initMap() {
|
| | | initMap () {
|
| | | var map = L.map('mapContent', {
|
| | | inertia: false,
|
| | | minZoom: 2,
|
| | |
| | | L.tileLayer(
|
| | | 'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
|
| | | )
|
| | | .addTo(map)
|
| | | .addTo(map)
|
| | | this.map = map // data上需要挂载
|
| | | // const that = this
|
| | | // this.map.on('mousedown', function(ev) {
|
| | |
| | | window.map = map
|
| | | },
|
| | | // 更改不同的值区间
|
| | | change(index) {
|
| | | change (index) {
|
| | | this.changeColor = index
|
| | | var pr = ''
|
| | | switch (index) {
|
| | |
| | | }
|
| | | },
|
| | | // 请求风场图接口
|
| | | initData() {
|
| | | initData () {
|
| | | if (this.map) {
|
| | | this.map.eachLayer(function (layer) {
|
| | | // 卸载之前的风场图层
|
| | | if (
|
| | | !layer._container &&
|
| | | ('' + $(layer._container)
|
| | | .attr('class')).replace(/\s/g, '') !==
|
| | | 'leaflet-layer'
|
| | | .attr('class')).replace(/\s/g, '') !==
|
| | | 'leaflet-layer'
|
| | | ) {
|
| | | layer.remove()
|
| | | }
|
| | |
| | | this.windData()
|
| | | },
|
| | | // 风场图数据
|
| | | windData() {
|
| | | windData () {
|
| | | this.$request({
|
| | | url: '/monitorPoint/getWindData',
|
| | | method: 'get',
|
| | |
| | | console.log(err)
|
| | | })
|
| | | },
|
| | | canvasWind(data) {
|
| | | canvasWind (data) {
|
| | | const res = this.findLayer('wmsid')
|
| | | if (res) {
|
| | | this.map.removeLayer(res)
|
| | |
| | | }, 1000)
|
| | | },
|
| | | // 将页码,及每页显示的条数以参数传递提交给后台
|
| | | alertData(n1, n2) {
|
| | | alertData (n1, n2) {
|
| | | // 这里使用axios,使用时请提前引入
|
| | | this.$request({
|
| | | url: '/alarmInfo/getDataByConditionWithoutPage',
|
| | |
| | | alarmType: this.alartValue,
|
| | | },
|
| | | })
|
| | | .then((res) => {
|
| | | // console.log('分页数据')
|
| | | // console.log(res)
|
| | | var tempData = res.data
|
| | | // console.log(tempData)
|
| | | for (let i = 0; i < tempData.alarmInfos.length; i++) {
|
| | | tempData.alarmInfos[i].alarmInfoId = i + 1
|
| | | }
|
| | | // 将数据赋值给tableData
|
| | | this.gridData = tempData.alarmInfos
|
| | | // 将数据的长度赋值给totalCount
|
| | | this.totalCount = tempData.alarmInfos.length
|
| | | })
|
| | | .then((res) => {
|
| | | // console.log('分页数据')
|
| | | // console.log(res)
|
| | | var tempData = res.data
|
| | | // console.log(tempData)
|
| | | for (let i = 0; i < tempData.alarmInfos.length; i++) {
|
| | | tempData.alarmInfos[i].alarmInfoId = i + 1
|
| | | }
|
| | | // 将数据赋值给tableData
|
| | | this.gridData = tempData.alarmInfos
|
| | | // 将数据的长度赋值给totalCount
|
| | | this.totalCount = tempData.alarmInfos.length
|
| | | })
|
| | | },
|
| | | // 分页
|
| | | // 每页显示的条数
|
| | | handleSizeChange(val) {
|
| | | handleSizeChange (val) {
|
| | | // 改变每页显示的条数
|
| | | this.PageSize = val
|
| | | // 注意:在改变每页显示的条数时,要将页码显示到第一页
|
| | | this.currentPage = 1
|
| | | },
|
| | | // 显示第几页
|
| | | handleCurrentChange(val) {
|
| | | handleCurrentChange (val) {
|
| | | // 改变默认的页数
|
| | | this.currentPage = val
|
| | | // console.log(val)
|
| | | },
|
| | | // 单元格样式
|
| | | tableCellClassName({ row, column, rowIndex, columnIndex }) {
|
| | | tableCellClassName ({ row, column, rowIndex, columnIndex }) {
|
| | | for (const key in row) {
|
| | | if (key === column.property) {
|
| | | const code = column.property
|
| | |
| | | }
|
| | | return ''
|
| | | },
|
| | | turnState() {
|
| | | turnState () {
|
| | | // console.log(this.showOrHidden)
|
| | | if (this.showOrHidden === true) {
|
| | | this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
|
| | |
| | | this.showOrHidden = !this.showOrHidden
|
| | | },
|
| | | // 国控站经纬度
|
| | | stateControlStation() {
|
| | | stateControlStation () {
|
| | | // this.$axios.get('monitorPoint/queryStateControlStation', {
|
| | | this.$request({
|
| | | url: '/govMonitorPoint/queryStateControlStation',
|
| | |
| | | // console.log(res)
|
| | | var gkData = res.data
|
| | | var group = L.layerGroup()
|
| | | .addTo(this.map)
|
| | | .addTo(this.map)
|
| | | for (let i = 0; i < gkData.length; i++) {
|
| | | var glat = gkData[i].latitude
|
| | | var glng = gkData[i].longitude
|
| | |
| | | L.marker([glat, glng], {
|
| | | icon: gIcon,
|
| | | })
|
| | | .addTo(group)
|
| | | .addTo(group)
|
| | | var myIcon = L.divIcon({
|
| | | html: gkData[i].data,
|
| | | className: 'my-div-icon-g',
|
| | |
| | | L.marker([glat, glng], {
|
| | | icon: myIcon,
|
| | | })
|
| | | .addTo(group)
|
| | | .addTo(group)
|
| | | }
|
| | | })
|
| | | .catch((err) => {
|
| | |
| | | })
|
| | | },
|
| | | // 切换风场风向状态
|
| | | toggleWindState() {
|
| | | toggleWindState () {
|
| | | if (this.ws) {
|
| | | this.ws.close()
|
| | | }
|
| | |
| | | // console.log(this.windState)
|
| | | }
|
| | | },
|
| | | closeAlarmTableVisible() {
|
| | | closeAlarmTableVisible () {
|
| | | this.$store.state.alarmTableVisible = false
|
| | | },
|
| | | },
|