<template>
|
<div
|
id="mapContent"
|
v-loading="loading"
|
element-loading-text="请稍等"
|
element-loading-background="rgba(0, 0, 0, 0.6)"
|
>
|
<div
|
v-if="noneData"
|
class="noneData"
|
>
|
当前区域设备没有风场
|
</div>
|
<div class="top">
|
<span
|
v-for="(item, index) in params"
|
:key="index"
|
class="left"
|
:class="{ click: changeColor === index }"
|
@click="change(index)"
|
>{{ item }}</span>
|
<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
|
<span class="right">{{ times }}秒</span>
|
<span class="dropDown">
|
<img
|
class="realTime_top"
|
:src="require('@/assets/images/regionalOverview/realTimeImg.png')"
|
alt=""
|
@click="turnState"
|
>
|
<span class="text_Time">
|
<el-date-picker
|
v-model="selectData"
|
popper-class="tpc"
|
value-format="yyyy-MM-dd HH"
|
format="yyyy-MM-dd HH"
|
:clearable="false"
|
:editable="false"
|
type="datetime"
|
:picker-options="pickerOptions"
|
placeholder="选择日期时间"
|
@change="changeData"
|
/>
|
</span>
|
<img
|
class="drop-icon"
|
:src="turnImg"
|
alt=""
|
@click="turnState"
|
>
|
</span>
|
</div>
|
<div
|
class="topDate"
|
style="height: 60px"
|
>
|
<div
|
id="eventPro"
|
class="jdt"
|
>
|
<div class="mouseDiv">
|
<span class="inText" />
|
<div class="sjDiv" />
|
</div>
|
<div class="mouseDiv2">
|
<span class="inText2" />
|
<div class="sjDiv2" />
|
</div>
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
<li />
|
</div>
|
<div
|
class="timeDiv"
|
style="position: relative"
|
>
|
<ul id="timeUl">
|
<li style="width: 0.83%" />
|
<li />
|
<li />
|
<li>03</li>
|
<li />
|
<li />
|
<li>06</li>
|
<li />
|
<li />
|
<li>09</li>
|
<li />
|
<li />
|
<li>12</li>
|
<li />
|
<li />
|
<li>15</li>
|
<li />
|
<li />
|
<li>18</li>
|
<li />
|
<li />
|
<li>21</li>
|
<li />
|
<li />
|
<li />
|
<!-- -->
|
<li />
|
<li />
|
<li>03</li>
|
<li />
|
<li />
|
<li>06</li>
|
<li />
|
<li />
|
<li>09</li>
|
<li />
|
<li />
|
<li>12</li>
|
<li />
|
<li />
|
<li>15</li>
|
<li />
|
<li />
|
<li>18</li>
|
<li />
|
<li />
|
<li>21</li>
|
<li />
|
<li />
|
<li />
|
<!-- -->
|
<li />
|
<li />
|
<li>03</li>
|
<li />
|
<li />
|
<li>06</li>
|
<li />
|
<li />
|
<li>09</li>
|
<li />
|
<li />
|
<li>12</li>
|
<li />
|
<li />
|
<li>15</li>
|
<li />
|
<li />
|
<li>18</li>
|
<li />
|
<li />
|
<li>21</li>
|
<li />
|
<li />
|
<li>00</li>
|
</ul>
|
<div
|
style="
|
display: flex;
|
width: 100%;
|
border-top: 1px solid rgba(255, 255, 255, 0.5);
|
"
|
class="dayDiv"
|
>
|
<p class="p1" />
|
<p style="position: relative">
|
<span
|
class="borderLine"
|
style="
|
position: absolute;
|
left: 0;
|
border-left: 1px solid rgba(255, 255, 255, 1);
|
height: 47px;
|
bottom: 0;
|
"
|
/>
|
<span class="p2" />
|
<span
|
class="borderLine"
|
style="
|
position: absolute;
|
right: 0;
|
border-right: 1px solid rgba(255, 255, 255, 1);
|
height: 47px;
|
bottom: 0;
|
"
|
/>
|
</p>
|
<p class="p3" />
|
</div>
|
</div>
|
</div>
|
<regional-overview
|
:key="timerKey"
|
:map="map"
|
:show-flag="showOrHidden"
|
/>
|
<div
|
:style="{ background: 'url(' + bg + ') no-repeat' }"
|
class="buttom-left"
|
/>
|
<el-dialog
|
title="污染报警查询"
|
:visible.sync="alarmTableVisible"
|
width="80%"
|
@mouseover.native="mouseOver"
|
@mouseleave.native="mouseLeave"
|
>
|
<div class="topSelect">
|
<div>
|
<el-date-picker
|
v-model="dateValue"
|
style="width: 400px"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
value-format="yyyy-MM-dd"
|
/>
|
<el-select
|
v-model="factorValue"
|
placeholder="选择因子"
|
>
|
<el-option
|
v-for="item in factorOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-select
|
v-model="alartValue"
|
placeholder="选择报警类型"
|
>
|
<el-option
|
v-for="item in alertOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
<el-button
|
type="primary"
|
@click="alertData(PageSize, currentPage)"
|
>
|
查询
|
</el-button>
|
</div>
|
</div>
|
<el-table
|
:data="
|
gridData.slice((currentPage - 1) * PageSize, currentPage * PageSize)
|
"
|
border
|
stripe
|
:cell-class-name="tableCellClassName"
|
height="400"
|
>
|
<el-table-column
|
property="alarmInfoId"
|
label="序号"
|
width="50"
|
align="center"
|
/>
|
<el-table-column
|
property="alarm_time"
|
label="报警时间"
|
width="150"
|
/>
|
<el-table-column
|
property="deviceName"
|
label="站点名称"
|
width="200"
|
/>
|
<el-table-column
|
property="index"
|
label="因子"
|
width="80"
|
align="center"
|
/>
|
<el-table-column
|
property="alarm_type"
|
label="报警类型"
|
width="200"
|
align="center"
|
/>
|
<el-table-column
|
property="alarm_information"
|
label="报警信息"
|
align="center"
|
/>
|
</el-table>
|
<el-pagination
|
:current-page="currentPage"
|
:page-sizes="pageSizes"
|
:page-size="PageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="totalCount"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
<div
|
slot="footer"
|
class="dialog-footer"
|
>
|
<el-button
|
size="mini"
|
@click="alarmTableVisible = false"
|
>
|
关 闭
|
</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import 'leaflet/dist/leaflet.css'
|
import 'leaflet-velocity/dist/leaflet-velocity.css'
|
import L from 'leaflet'
|
import _ from 'lodash'
|
import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
|
import 'leaflet-velocity/dist/leaflet-velocity'
|
import $ from 'jquery'
|
import { WWindUtil } from '@/components/Wind/WRatingArr.js'
|
import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件
|
import { mapGetters } from 'vuex'
|
// import { gcj02towgs84 } from '@/assets/json/transform'
|
export default {
|
components: { RegionalOverview },
|
props: {
|
jumpData: Array,
|
weidu: Number,
|
jingdu: Number,
|
monitorPointId: Number,
|
monitorPointIds: Array,
|
defaultData: Array
|
},
|
data () {
|
return {
|
compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
|
compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
|
timerKey: '', // 用于重新渲染子组件
|
map: null,
|
code: [],
|
pickerOptions: {
|
disabledDate: (time) => {
|
return time.getTime() > Date.now() - 1 * 24 * 3600 * 1000
|
},
|
},
|
latlng: [],
|
noneData: false,
|
params: ['PM10', 'PM2.5', 'SO2', 'NO2', 'CO', 'O3', 'TVOC'],
|
changeColor: 0,
|
times: 1,
|
sensorKey: 'a34002',
|
keys: [],
|
bg: require('@/assets/images/tl_PM10.png'),
|
windState: 1,
|
windStateText: '风场图',
|
keyData: [],
|
lats: [],
|
lngs: [],
|
accountId: this.$store.state.accountId,
|
orgId: this.$store.state.orgId,
|
coordinates: [],
|
markerObject: [],
|
loading: true,
|
ws: null,
|
lockReconnect: false, // 是否真正建立连接
|
timeout: 58 * 1000, // 30秒一次心跳
|
timeoutObj: null, // 心跳心跳倒计时
|
serverTimeoutObj: null, // 心跳倒计时
|
timeoutnum: null, // 断开 重连倒计时,
|
jingduNew: this.jingdu,
|
weiduNew: this.weidu,
|
alartValue: 'all',
|
dateValue: '',
|
factorValue: 'all',
|
// 总数据
|
gridData: [],
|
// 默认显示第几页
|
currentPage: 1,
|
// 总条数，根据接口获取数据长度(注意：这里不能为空)
|
totalCount: 0,
|
// 个数选择器（可修改）
|
pageSizes: [10, 50, 100, 200],
|
// 默认每页显示的条数（可修改）
|
PageSize: 20,
|
factorOptions: [
|
{
|
label: '全部因子',
|
value: 'all'
|
},
|
{
|
label: 'PM10',
|
value: 'PM10'
|
},
|
{
|
label: 'PM2.5',
|
value: 'PM2.5'
|
},
|
{
|
label: 'SO2',
|
value: 'SO2'
|
},
|
{
|
label: 'NO2',
|
value: 'NO2'
|
},
|
{
|
label: 'CO',
|
value: 'CO'
|
},
|
{
|
label: 'O3',
|
value: 'O3'
|
}
|
],
|
alertOptions: [
|
{
|
label: '全部报警类型',
|
value: 'all'
|
},
|
{
|
label: '超限',
|
value: 'overrun'
|
},
|
{
|
label: '突然高',
|
value: 'sudden'
|
},
|
{
|
label: '超过国控站点100%',
|
value: 'state100'
|
},
|
{
|
label: '超过国控站点150%',
|
value: 'state150'
|
},
|
{
|
label: '超过国控站点250%',
|
value: 'state250'
|
},
|
{
|
label: '超过市区均值100%',
|
value: 'city100'
|
},
|
{
|
label: '超过市区均值150%',
|
value: 'city150'
|
},
|
{
|
label: '超过市区均值250%',
|
value: 'city250'
|
}
|
],
|
currentDate: '',
|
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
|
showOrHidden: true,
|
dateFormat: '',
|
selectData: new Date(),
|
alarmTableVisible: false,
|
chooseTimeInfo: false, // 是否选择了时间点
|
chooseTime: false,
|
dateInfo: '', // 选择的日期
|
timeInfo: '', // 选择的时间
|
nyr: '', // 选择的年月日
|
windJsonData: [],
|
clickmac: '',
|
childerItem: {},
|
farterItem: {},
|
indexsLaber: 0,
|
time: new Date()
|
}
|
},
|
computed: {
|
...mapGetters(['regionCode'])
|
},
|
watch: {
|
dateValue (n, o) {
|
// this.newDate()
|
},
|
regionCode (newCode, oldCode) {
|
this.timerKey = newCode // 用于监听code变化重新渲染子组件
|
},
|
windJsonData (newCode, oldCode) {
|
this.$nextTick(() => {
|
this.canvasWind(newCode)
|
})
|
}
|
},
|
mounted () {
|
this.currentHour()
|
this.$Bus.$on(
|
'alarmTableVisible',
|
res => (
|
// eslint-disable-next-line no-sequences
|
(this.alarmTableVisible = res),
|
this.alertData(this.PageSize, this.currentPage)
|
)
|
)
|
// 初始化地图容器
|
this.initMap()
|
|
// 事件代理
|
this.eventProxy()
|
window.deviceDetail = this.deviceDetail
|
},
|
created () {
|
if (this.$store.state.orgId === 72) {
|
this.changeColor = 1
|
}
|
const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
|
this.jingduNew = newLL[1]
|
this.weiduNew = newLL[0]
|
this.getParamsData(false)
|
// this.windDir()
|
this.newDate()
|
// this.alertData(this.PageSize, this.currentPage)
|
},
|
beforeDestroy () {
|
if (this.timer) {
|
clearInterval(this.timer)
|
}
|
if (this.timer2) {
|
clearInterval(this.timer2)
|
}
|
// 离开页面时关闭websocket
|
if (this.ws) {
|
this.ws.close()
|
}
|
},
|
methods: {
|
// 拿到某天的日期和星期
|
getDayXQ (day) {
|
var days = new Date().getDay() // 星期 // 星期
|
var rq = '' // 日期
|
if (day === 'today') {
|
rq = this.newData(0) // 今天日期
|
} else if (day === 'yesterday') {
|
days = (days + 7 - 1) % 7
|
rq = this.newData(-1) // 昨天日期
|
} else if (day === 'beforeYea') {
|
days = (days + 7 - 2) % 7
|
rq = this.newData(-2) // 前天日期
|
}
|
switch (days) {
|
case 1:
|
days = '周一'
|
break
|
case 2:
|
days = '周二'
|
break
|
case 3:
|
days = '周三'
|
break
|
case 4:
|
days = '周四'
|
break
|
case 5:
|
days = '周五'
|
break
|
case 6:
|
days = '周六'
|
break
|
case 0:
|
days = '周日'
|
break
|
}
|
return `${rq}(${days})`
|
},
|
// 计算当天之前或者之后的日期
|
newData (day, info) {
|
var today = new Date()
|
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
today.setTime(targetday_milliseconds)
|
var tYear = today.getFullYear()
|
var tMonth = today.getMonth() + 1
|
tMonth = tMonth < 10 ? '0' + tMonth : tMonth
|
var tDate = today.getDate()
|
tDate = tDate < 10 ? '0' + tDate : tDate
|
if (info === 'nyr') {
|
return tYear + '-' + tMonth + '-' + tDate
|
} else {
|
return tMonth + '/' + tDate
|
}
|
},
|
// 事件代理
|
eventProxy () {
|
// 拿到今天的日期和星期
|
var ul = document.querySelector('#eventPro')
|
var lis = document.querySelectorAll('#eventPro>li')
|
var timeUl = document.querySelector('#timeUl')
|
var timeLis = document.querySelectorAll('#timeUl>li')
|
var mouseDiv = document.querySelector('.mouseDiv')
|
var mouseDiv2 = document.querySelector('.mouseDiv2')
|
var inText = document.querySelector('.inText')
|
var inText2 = document.querySelector('.inText2')
|
var p1 = document.querySelector('.p1')
|
var p2 = document.querySelector('.p2')
|
var p3 = document.querySelector('.p3')
|
p3.innerHTML = this.getDayXQ('today')
|
p2.innerHTML = this.getDayXQ('yesterday')
|
p1.innerHTML = this.getDayXQ('beforeYea')
|
var greenInfo = 0
|
var that = this
|
ul.onclick = e => {
|
var target = e.target
|
if (target.tagName.toLowerCase() === 'li') {
|
// 给所有的li颜色设为初始值
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
}
|
// var li = this.querySelectorAll('li')
|
// var index = Array.prototype.indexOf.call(li, target)
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].style.backgroundColor = 'green'
|
if (lis[i] === target) {
|
// mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
mouseDiv2.style.left = 1.36986 * (i + 1) + '%'
|
mouseDiv2.style.transform = 'translateX(-50%)'
|
mouseDiv2.style.display = 'block'
|
var times = (i - 0 + 1) % 24
|
times = times > 9 ? times : '0' + times
|
inText2.innerHTML = times + ':00'
|
this.chooseTimeInfo = true // 选择时间点
|
this.chooseTime = true // 选择时间点
|
console.log('times', times)
|
if ((i + 1) / 24 < 1) {
|
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
|
} else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
|
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
|
} else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
|
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
|
} else {
|
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
|
}
|
break
|
}
|
}
|
}
|
that.times = 1
|
that.getParamsData(true)
|
}
|
// timeUl绑定点击事件
|
timeUl.onclick = e => {
|
// 给所有的li颜色设为初始值
|
var target = e.target
|
if (target.tagName.toLowerCase() === 'li') {
|
for (let i = 0; i < timeLis.length; i++) {
|
if (timeLis[i] === target) {
|
greenInfo = i
|
// mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
mouseDiv2.style.left = 1.36986 * i + '%'
|
mouseDiv2.style.transform = 'translateX(-50%)'
|
mouseDiv2.style.display = 'block'
|
var times = i % 24
|
times = times > 9 ? times : '0' + times
|
inText2.innerHTML = times + ':00'
|
this.chooseTimeInfo = true // 选择时间点
|
this.chooseTime = true // 选择时间点
|
console.log('times', times)
|
if (i / 24 < 1) {
|
this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
|
} else if (i / 24 < 2 && i / 24 >= 1) {
|
this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
|
} else if (i / 24 < 3 && i / 24 >= 2) {
|
this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
|
} else {
|
this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
|
}
|
break
|
}
|
}
|
for (let i = 0; i < lis.length; i++) {
|
if (i < greenInfo) {
|
lis[i].style.backgroundColor = 'green'
|
} else {
|
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
}
|
}
|
}
|
that.times = 1
|
that.getParamsData(true)
|
}
|
// 鼠标移入移出事件
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].onmouseenter = function () {
|
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'
|
}
|
lis[i].onmouseleave = function () {
|
mouseDiv.style.display = 'none'
|
}
|
}
|
for (let i = 0; i < timeLis.length; i++) {
|
timeLis[i].onmouseenter = function () {
|
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'
|
}
|
timeLis[i].onmouseleave = function () {
|
mouseDiv.style.display = 'none'
|
}
|
}
|
},
|
// 当前小时默认值
|
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()
|
// const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1
|
// const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
// this.dateFormat = currentDate.toString()
|
const aData = new Date()
|
const month =
|
aData.getMonth() < 9
|
? '0' + (aData.getMonth() + 1)
|
: aData.getMonth() + 1
|
const date =
|
aData.getDate() < 10 ? '0' + aData.getDate() : aData.getDate()
|
const hour = aData.getHours()
|
const currentDate =
|
aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'
|
this.dateFormat = currentDate.toString()
|
},
|
// 日期格式化
|
newDate () {
|
var aData = new Date()
|
var month =
|
aData.getMonth() < 9
|
? '0' + (aData.getMonth() + 1)
|
: aData.getMonth() + 1
|
var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
this.currentDate = aData.getFullYear() + '-' + month + '-' + date
|
this.dateValue = [this.currentDate, this.currentDate]
|
},
|
// 报警弹窗移入
|
mouseOver () {
|
this.map.scrollWheelZoom.disable()
|
},
|
// 报警弹窗移出
|
mouseLeave () {
|
this.map.scrollWheelZoom.enable()
|
},
|
// 百度经纬度转高德经纬度
|
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
|
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
|
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
|
var gg_lng = z * Math.cos(theta)
|
var gg_lat = z * Math.sin(theta)
|
return [gg_lat, gg_lng]
|
},
|
// 请求设备坐标,当前的
|
deviceMaker () {
|
if (this.map) {
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (
|
!layer._container &&
|
('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
'leaflet-layer'
|
) {
|
layer.remove()
|
}
|
})
|
}
|
this.$request({
|
url: '/historyFiveMinutely/queryDeviceAndData',
|
method: 'get',
|
params: {
|
sensorCode: this.sensorKey,
|
organizationId: this.$store.state.orgId,
|
regionCode: this.$store.state.regionCode,
|
chooseTime: this.chooseTime,
|
time: this.nyr
|
}
|
}).then(data => {
|
this.markDeviceSite(data)
|
this.stateControlStation()// 遍历国控站位置
|
})
|
},
|
// 标记设备点
|
markDeviceSite (data) {
|
var keyData = data.data.devices
|
this.keyData = data.data.devices
|
var groupIcon = L.layerGroup().addTo(this.map)
|
var groupText = L.layerGroup().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].a34002)))
|
} else if (keyData[i].a34004) {
|
this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
|
} else if (keyData[i].a21026) {
|
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)))
|
} else if (keyData[i].a21005) {
|
this.keys.push(JSON.parse(keyData[i].a21005).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))
|
} else {
|
// for (let j = 0; j < keyData.length; j++) {
|
this.keys.push(JSON.parse('null'))
|
// }
|
}
|
var lat = keyData[i].latitude
|
this.lats[i] = keyData[i].latitude
|
var lng = keyData[i].longitude
|
this.lngs[i] = keyData[i].longitude
|
// 对比各个key中的标准数据，标记展示不同的颜色
|
var colorNum = 7
|
if (keyData[i].a34002) {
|
let data = Math.floor(JSON.parse(keyData[i].a34002))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 50: {
|
colorNum = 1
|
break
|
}
|
case data <= 150: {
|
colorNum = 2
|
break
|
}
|
case data <= 250: {
|
colorNum = 3
|
break
|
}
|
case data <= 350: {
|
colorNum = 4
|
break
|
}
|
case data <= 420: {
|
colorNum = 5
|
break
|
}
|
case data > 420: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a34004) {
|
let data = Math.floor(JSON.parse(keyData[i].a34004))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 35: {
|
colorNum = 1
|
break
|
}
|
case data <= 75: {
|
colorNum = 2
|
break
|
}
|
case data <= 115: {
|
colorNum = 3
|
break
|
}
|
case data <= 150: {
|
colorNum = 4
|
break
|
}
|
case data <= 250: {
|
colorNum = 5
|
break
|
}
|
case data > 250: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a21026) {
|
let data = Math.floor(JSON.parse(keyData[i].a21026))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 50: {
|
colorNum = 1
|
break
|
}
|
case data <= 150: {
|
colorNum = 2
|
break
|
}
|
case data <= 475: {
|
colorNum = 3
|
break
|
}
|
case data <= 800: {
|
colorNum = 4
|
break
|
}
|
case data <= 1600: {
|
colorNum = 5
|
break
|
}
|
case data > 1600: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a21004) {
|
let data = Math.floor(
|
Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
|
)
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 40: {
|
colorNum = 1
|
break
|
}
|
case data <= 80: {
|
colorNum = 2
|
break
|
}
|
case data <= 180: {
|
colorNum = 3
|
break
|
}
|
case data <= 280: {
|
colorNum = 4
|
break
|
}
|
case data <= 565: {
|
colorNum = 5
|
break
|
}
|
case data > 565: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a21005) {
|
let data = JSON.parse(keyData[i].a21005).toFixed(3)
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 2: {
|
colorNum = 1
|
break
|
}
|
case data <= 4: {
|
colorNum = 2
|
break
|
}
|
case data <= 14: {
|
colorNum = 3
|
break
|
}
|
case data <= 24: {
|
colorNum = 4
|
break
|
}
|
case data <= 36: {
|
colorNum = 5
|
break
|
}
|
case data > 36: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a05024) {
|
let data = Math.floor(JSON.parse(keyData[i].a05024))
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 160: {
|
colorNum = 1
|
break
|
}
|
case data <= 200: {
|
colorNum = 2
|
break
|
}
|
case data <= 300: {
|
colorNum = 3
|
break
|
}
|
case data <= 400: {
|
colorNum = 4
|
break
|
}
|
case data <= 800: {
|
colorNum = 5
|
break
|
}
|
case data > 800: {
|
colorNum = 6
|
break
|
}
|
default:
|
break
|
}
|
} else if (keyData[i].a99054) {
|
let data = JSON.parse(keyData[i].a99054).toFixed(3)
|
switch (true) {
|
case data < 0: {
|
colorNum = 7
|
break
|
}
|
case data === 0: {
|
colorNum = 0
|
break
|
}
|
case data <= 0.5: {
|
colorNum = 1
|
break
|
}
|
case data <= 1: {
|
colorNum = 2
|
break
|
}
|
case data <= 1.5: {
|
colorNum = 3
|
break
|
}
|
case data <= 2: {
|
colorNum = 4
|
break
|
}
|
case data <= 3: {
|
colorNum = 5
|
break
|
}
|
case data > 3: {
|
colorNum = 6
|
break
|
}
|
// default:
|
// break
|
}
|
}
|
|
var blueIcon = L.icon({
|
iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
|
// iconUrl: require('@/assets/icon/ico2.png'),
|
iconSize: [60, 60],
|
iconAnchor: [30, 48],
|
className: 'my-device'
|
})
|
|
// 添加标记到地图
|
const iconMarker = L.marker([lat, lng], {
|
icon: blueIcon
|
})
|
groupIcon.addLayer(iconMarker)
|
var myIcon = L.divIcon({
|
html: this.keys[i],
|
className: 'my-div-icon',
|
iconSize: [60, 60],
|
iconAnchor: [40, 40]
|
})
|
|
const TexteMarker = L.marker([lat, lng], { icon: myIcon })
|
TexteMarker.inforData = keyData[i]
|
groupText.addLayer(TexteMarker)
|
const _this = this
|
// 给标记添加鼠标移入事件，mouseover事件会冒泡
|
TexteMarker.on('click', function (e) {
|
const MarkerTarget = e.target
|
// _this.getMarkerInfor(keyData[i], MarkerTarget)
|
this.noneData = false
|
// const _this = e.target.vuecontext
|
_this.handleClick(keyData[i], MarkerTarget)
|
})
|
// 给标记点添加鼠标移出事件
|
// TexteMarker.on('mouseout', function(e) {
|
// this.noneData = false
|
// this.bindPopup().closePopup()
|
// })
|
}
|
},
|
styleBgColor (keyName) {
|
let bgColorList = {
|
pm25colorbg: '',
|
pm10colorbg: '',
|
so2colorbg: '', // 二氧化硫
|
no210colorbg: '', // 二氧化氮
|
cocolorbg: '', // 一氧化碳
|
o3colorbg: '', // 臭氧
|
tvoccolorbg: '' // TVOC
|
}
|
|
let data = ''
|
// eslint-disable-next-line no-unused-vars
|
for (let i in keyName) {
|
if (i === 'a34002') {
|
data = Math.floor(JSON.parse(keyName.a34002) || 0)
|
switch (true) {
|
case data < 0: {
|
bgColorList.pm10colorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.pm10colorbg = '#688fb1'
|
break
|
}
|
case data <= 50: {
|
bgColorList.pm10colorbg = '#00ff01'
|
break
|
}
|
case data <= 150: {
|
bgColorList.pm10colorbg = '#fdfe00'
|
break
|
}
|
case data <= 250: {
|
bgColorList.pm10colorbg = '#fd8102'
|
break
|
}
|
case data <= 350: {
|
bgColorList.pm10colorbg = '#fc0101'
|
break
|
}
|
case data <= 420: {
|
bgColorList.pm10colorbg = '#c00261'
|
break
|
}
|
case data > 420: {
|
bgColorList.pm10colorbg = '#9f012f'
|
break
|
}
|
default:
|
break
|
}
|
} else if (i === 'a34004') {
|
data = Math.floor(JSON.parse(keyName.a34004) || 0)
|
switch (true) {
|
case data < 0: {
|
bgColorList.pm25colorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.pm25colorbg = '#688fb1'
|
break
|
}
|
case data <= 35: {
|
bgColorList.pm25colorbg = '#00ff01'
|
break
|
}
|
case data <= 75: {
|
bgColorList.pm25colorbg = '#fdfe00'
|
break
|
}
|
case data <= 115: {
|
bgColorList.pm25colorbg = '#fd8102'
|
break
|
}
|
case data <= 150: {
|
bgColorList.pm25colorbg = '#fc0101'
|
break
|
}
|
case data <= 250: {
|
bgColorList.pm25colorbg = '#c00261'
|
break
|
}
|
case data > 250: {
|
bgColorList.pm25colorbg = '#9f012f'
|
break
|
}
|
default:
|
break
|
}
|
} else if (i === 'a21026') {
|
data = Math.floor(JSON.parse(keyName.a21026) || 0)
|
switch (true) {
|
case data < 0: {
|
bgColorList.so2colorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.so2colorbg = '#688fb1'
|
break
|
}
|
case data <= 50: {
|
bgColorList.so2colorbg = '#00ff01'
|
break
|
}
|
case data <= 150: {
|
bgColorList.so2colorbg = '#fdfe00'
|
break
|
}
|
case data <= 475: {
|
bgColorList.so2colorbg = '#fd8102'
|
break
|
}
|
case data <= 800: {
|
bgColorList.so2colorbg = '#fc0101'
|
break
|
}
|
case data <= 1600: {
|
bgColorList.so2colorbg = '#c00261'
|
break
|
}
|
case data > 1600: {
|
bgColorList.so2colorbg = '#9f012f'
|
break
|
}
|
default:
|
break
|
}
|
} else if (i === 'a21004') {
|
data = Math.floor(
|
Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))
|
)
|
switch (true) {
|
case data < 0: {
|
bgColorList.no210colorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.no210colorbg = '#688fb1'
|
break
|
}
|
case data <= 40: {
|
bgColorList.no210colorbg = '#00ff01'
|
break
|
}
|
case data <= 80: {
|
bgColorList.no210colorbg = '#fdfe00'
|
break
|
}
|
case data <= 180: {
|
bgColorList.no210colorbg = '#fd8102'
|
break
|
}
|
case data <= 280: {
|
bgColorList.no210colorbg = '#fc0101'
|
break
|
}
|
case data <= 565: {
|
bgColorList.no210colorbg = '#c00261'
|
break
|
}
|
case data > 565: {
|
bgColorList.no210colorbg = '#9f012f'
|
break
|
}
|
default:
|
break
|
}
|
} else if (i === 'a21005') {
|
data = JSON.parse(keyName.a21005 || 0).toFixed(3)
|
switch (true) {
|
case data < 0: {
|
bgColorList.cocolorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.cocolorbg = '#688fb1'
|
break
|
}
|
case data <= 2: {
|
bgColorList.cocolorbg = '#00ff01'
|
break
|
}
|
case data <= 4: {
|
bgColorList.cocolorbg = '#fdfe00'
|
break
|
}
|
case data <= 14: {
|
bgColorList.cocolorbg = '#fd8102'
|
break
|
}
|
case data <= 24: {
|
bgColorList.cocolorbg = '#fc0101'
|
break
|
}
|
case data <= 36: {
|
bgColorList.cocolorbg = '#c00261'
|
break
|
}
|
case data > 36: {
|
bgColorList.cocolorbg = '#9f012f'
|
break
|
}
|
default:
|
break
|
}
|
} else if (i === 'a05024') {
|
data = Math.floor(JSON.parse(keyName.a05024) || 0)
|
switch (true) {
|
case data < 0: {
|
bgColorList.o3colorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.o3colorbg = '#688fb1'
|
break
|
}
|
case data <= 160: {
|
bgColorList.o3colorbg = '#00ff01'
|
break
|
}
|
case data <= 200: {
|
bgColorList.o3colorbg = '#fdfe00'
|
break
|
}
|
case data <= 300: {
|
bgColorList.o3colorbg = '#fd8102'
|
break
|
}
|
case data <= 400: {
|
bgColorList.o3colorbg = '#fc0101'
|
break
|
}
|
case data <= 800: {
|
bgColorList.o3colorbg = '#c00261'
|
break
|
}
|
case data > 800: {
|
bgColorList.o3colorbg = '#9f012f'
|
break
|
}
|
default:
|
break
|
}
|
} else if (i === 'a99054') {
|
data = JSON.parse(keyName.a99054 || 0).toFixed(3)
|
switch (true) {
|
case data < 0: {
|
bgColorList.tvoccolorbg = '#999999'
|
break
|
}
|
case data === '-': {
|
bgColorList.tvoccolorbg = '#999999'
|
break
|
}
|
case data === 0: {
|
bgColorList.tvoccolorbg = '#688fb1'
|
break
|
}
|
case data <= 0.5: {
|
bgColorList.tvoccolorbg = '#00ff01'
|
break
|
}
|
case data <= 1: {
|
bgColorList.tvoccolorbg = '#fdfe00'
|
break
|
}
|
case data <= 1.5: {
|
bgColorList.tvoccolorbg = '#fd8102'
|
break
|
}
|
case data <= 2: {
|
bgColorList.tvoccolorbg = '#fc0101'
|
break
|
}
|
case data <= 3: {
|
bgColorList.tvoccolorbg = '#c00261'
|
break
|
}
|
case data > 3: {
|
bgColorList.tvoccolorbg = '#9f012f'
|
break
|
}
|
// default:
|
// break
|
}
|
}
|
}
|
return bgColorList
|
},
|
deviceDetail () {
|
console.log('this.farterItem', this.clickmac)
|
console.log('this.childerItem', this.childerItem)
|
this.monitorPointInfo = this.farterItem
|
|
this.$router.push({
|
name: 'deviceDetail',
|
params: {
|
monitorPointInfo: this.farterItem,
|
device: this.childerItem,
|
macName: this.clickmac,
|
indexs: this.indexsLaber,
|
items: [this.childerItem.latitude, this.childerItem.longitude]
|
},
|
query: {
|
monitorPointInfo: JSON.stringify(this.farterItem),
|
device: JSON.stringify(this.childerItem),
|
macName: this.clickmac,
|
indexs: this.indexsLaber,
|
items: [this.childerItem.latitude, this.childerItem.longitude]
|
}
|
})
|
},
|
handleClick (data, marker) {
|
this.clickmac = ''
|
this.childerItem = {}
|
this.farterItem = {}
|
this.indexsLaber = 0
|
this.clickmac = marker.inforData.mac
|
this.childerItem = marker.inforData
|
console.log('this.defaultData', this.defaultData)
|
this.defaultData.forEach(item => {
|
if (item.devices) {
|
item.devices.forEach((dev, index) => {
|
if (dev.mac === marker.inforData.mac) {
|
this.farterItem = item
|
this.indexsLaber = index
|
}
|
})
|
}
|
})
|
this.$request({
|
url: '/historyFiveMinutely/queryFiveDataByMac',
|
method: 'get',
|
params: {
|
mac: data.mac,
|
chooseTime: this.chooseTime,
|
time: this.nyr
|
}
|
})
|
.then(res => {
|
if (res.message === '操作目标不存在') {
|
var datafalse = '暂无五分钟数据'
|
marker.bindPopup(datafalse).openPopup()
|
return
|
}
|
this.childerItem.name = res.data.name
|
let colorliststyleBgColor = this.styleBgColor(res.data)
|
console.log('colorliststyleBgColor', colorliststyleBgColor)
|
let deviceDetails = _.cloneDeep(res.data)
|
// eslint-disable-next-line no-unused-vars
|
for (let key in deviceDetails) {
|
if (deviceDetails[key] === null) {
|
deviceDetails[key] = '-'
|
}
|
}
|
console.log('deviceDetails', deviceDetails)
|
let windTip = 'inline'
|
let windDeg = 0
|
let windDir = ''
|
let dushu =
|
deviceDetails.a01008 === '-'
|
? '-'
|
: JSON.parse(deviceDetails.a01008).toFixed(0)
|
let levelNumber =
|
deviceDetails.a01007 === '-'
|
? '0.0'
|
: Number(deviceDetails.a01007).toFixed(1)
|
let level =
|
deviceDetails.a01007 === '0.0'
|
? '-'
|
: WWindUtil.WindtoLevel(levelNumber).name
|
console.log('level', level)
|
if (deviceDetails.a01008) {
|
var windDirs = dushu === '-' ? 0 : Number(dushu)
|
WWindUtil.windValueFormat(windDirs)
|
console.log('windDirs', WWindUtil.windValueFormat(windDirs))
|
windDeg = windDirs
|
windTip = 'inline'
|
if (windDirs === 0 || windDirs === '-') {
|
windDir = '-'
|
windTip = 'none'
|
} else {
|
windDir = WWindUtil.windValueFormat(windDirs)
|
windTip = 'inline'
|
}
|
}
|
// 请求数据更新弹框内容
|
let htmlClassName = 'mypopup'
|
let html = ` <div data-reactroot="" class="marker_maptip">
|
<div class="marker_title_1nQ">
|
<span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>
|
</div>
|
<div class="marker_firstline_2WH">
|
<div class="marker_citypart_keg">
|
<div class="marker_name_small_1VU">${deviceDetails.name}</div>
|
<div class="marker_time_w5m">${deviceDetails.dataTime}</div>
|
</div>
|
<div class="marker_indexpart_2UI">
|
<div
|
class="marker_indexname_3TP"
|
style="color: black;background:${
|
colorliststyleBgColor.tvoccolorbg
|
}"
|
>
|
TVOC
|
</div>
|
<div class="marker_indexvalue_1O7">
|
${this.handleCutZero(deviceDetails.a99054)}
|
</div>
|
</div>
|
</div>
|
<div class="marker_secondline_2Om">
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${
|
colorliststyleBgColor.pm25colorbg
|
} "
|
>
|
PM2.5
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a34004)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${
|
colorliststyleBgColor.pm10colorbg
|
}"
|
>
|
PM10
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a34002)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${
|
colorliststyleBgColor.so2colorbg
|
}"
|
>
|
SO2
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a21026)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${
|
colorliststyleBgColor.no210colorbg
|
}"
|
>
|
NO2
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a21004)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.cocolorbg}"
|
>
|
CO
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a21005)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black; background:${colorliststyleBgColor.o3colorbg}"
|
>
|
O3
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a05024)}
|
</div>
|
</div>
|
</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: 51%;top: 49%;transform: translate(-50%, -50%) rotate(${windDeg}deg);display: ${windTip};"
|
src=${this.compassDirection}
|
>
|
</div>
|
<div class='windInfor'>
|
<div v-if="false">风向: ${windDir} ( ${dushu} ° )</div>
|
<div>风速: ${levelNumber} m/s</div>
|
<div>等级: ${level}</div>
|
</div>
|
</div>
|
|
</div>`
|
if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') {
|
htmlClassName = 'mypopupNoWind'
|
html = ` <div data-reactroot="" class="marker_maptip">
|
<div class="marker_title_1nQ">
|
<span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>
|
</div>
|
<div class="marker_firstline_2WH">
|
<div class="marker_citypart_keg">
|
<div class="marker_name_small_1VU">${deviceDetails.name}</div>
|
<div class="marker_time_w5m">${deviceDetails.dataTime}</div>
|
</div>
|
<div class="marker_indexpart_2UI">
|
<div
|
class="marker_indexname_3TP"
|
style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"
|
>
|
TVOC
|
</div>
|
<div class="marker_indexvalue_1O7">
|
${this.handleCutZero(deviceDetails.a99054)}
|
</div>
|
</div>
|
</div>
|
<div class="marker_secondline_2Om">
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.pm25colorbg} "
|
>
|
PM2.5
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a34004)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.pm10colorbg}"
|
>
|
PM10
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a34002)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.so2colorbg}"
|
>
|
SO2
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a21026)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.no210colorbg}"
|
>
|
NO2
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a21004)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.cocolorbg}"
|
>
|
CO
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a21005)}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black; background:${colorliststyleBgColor.o3colorbg}"
|
>
|
O3
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(deviceDetails.a05024)}
|
</div>
|
</div>
|
</div>
|
</div>`
|
}
|
marker.bindPopup(html, { className: htmlClassName }).openPopup()
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
handleCutZero (data) {
|
let num = data.substring(0, data.indexOf('.') + 4)
|
// 拷贝一份 返回去掉零的新串
|
// let num = Number(data).toFixed(3).toString()
|
let newstr = num
|
// 循环变量 小数部分长度
|
let leng = num.length - num.indexOf('.') - 1
|
// 判断是否有效数
|
if (num.indexOf('.') > -1) {
|
// 循环小数部分
|
for (let i = leng; i > 0; i--) {
|
// 如果newstr末尾有0
|
if (
|
newstr.lastIndexOf('0') > -1 &&
|
newstr.substr(newstr.length - 1, 1) === 0
|
) {
|
let k = newstr.lastIndexOf('0')
|
// 如果小数点后只有一个0 去掉小数点
|
if (newstr.charAt(k - 1) === '.') {
|
return newstr.substring(0, k - 1)
|
} else {
|
// 否则 去掉一个0
|
newstr = newstr.substring(0, k)
|
}
|
} else {
|
// 如果末尾没有0
|
return newstr
|
}
|
}
|
}
|
return num
|
},
|
getMarkerInfor (data, marker) {
|
this.$request({
|
url: '/historyFiveMinutely/queryPopDataByMac',
|
method: 'get',
|
params: {
|
mac: data.mac,
|
chooseTime: this.chooseTime,
|
time: this.nyr
|
}
|
})
|
.then(res => {
|
if (res.message === '操作目标不存在') {
|
var datafalse = '暂无五分钟数据'
|
this.bindPopup(datafalse).openPopup()
|
return
|
}
|
// eslint-disable-next-line no-unused-vars
|
for (const key in res.data) {
|
var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
|
if (key !== '名称' && key !== '时间') {
|
if (Number(tempDecimal) === 0) {
|
res.data[key] =
|
parseInt(res.data[key]) + res.data[key].split(' ')[1]
|
} else {
|
res.data[key] =
|
Number(res.data[key].split(' ')[0]).toFixed(2) +
|
res.data[key].split(' ')[1]
|
}
|
}
|
}
|
var data = JSON.stringify(res.data)
|
.replace(/,/g, `<br>`)
|
.replace(/{|}|"/g, '')
|
console.log(data)
|
marker.bindPopup(data).openPopup()
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
return data
|
},
|
// 请求风向标
|
windDir () {
|
// console.log('加载风向')
|
// console.log('风向标ws请求开始')
|
// const that = this
|
// 遍历所有图层
|
if (this.map) {
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (
|
!layer._container &&
|
('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
'leaflet-layer'
|
) {
|
layer.remove()
|
}
|
})
|
}
|
// 执行生成设备点方法
|
this.deviceMaker()
|
},
|
// 获得父组件改变regionCode子组件请求api功能
|
getRegionApiRequest () {
|
this.getParamsData(true)
|
setTimeout(() => {
|
$.getJSON(
|
'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
|
{ monitorPointId: this.$store.state.monitorPointId },
|
data => {
|
this.map.setView([data[2], data[1]], 12)
|
// console.log('跳转成功')
|
}
|
)
|
}, 1000)
|
},
|
// 子组件地图的跳转中心点方法
|
jumpMap (LngLat) {
|
this.map.setView(LngLat, 18)
|
},
|
// 请求更新风场数据
|
getParamsData (isFirst = true) {
|
clearInterval(this.timer)
|
this.timer = setInterval(() => {
|
this.currentHour()
|
this.times--
|
if (this.times === 0) {
|
// 时间点选择标记消失
|
if (!this.chooseTimeInfo) {
|
var mouseDiv2 = document.querySelector('.mouseDiv2')
|
mouseDiv2.style.display = 'none'
|
var lis = document.querySelectorAll('#eventPro>li')
|
for (let i = 0; i < lis.length; i++) {
|
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
}
|
this.chooseTime = false
|
// console.log('rgb000')
|
} else {
|
this.chooseTimeInfo = false
|
// console.log('else')
|
}
|
setTimeout(() => {
|
console.log('change', isFirst)
|
if (isFirst) {
|
this.windData()
|
this.deviceMaker()
|
} else {
|
this.change(this.changeColor)
|
}
|
this.times = 300
|
}, 100)
|
}
|
}, 1000)
|
},
|
findLayer (layerName) {
|
// 根据图层名称查找图层
|
if (!this.map) {
|
return null
|
}
|
const gisMap_layers = this.map._layers
|
let layer = null
|
// eslint-disable-next-line no-unused-vars
|
for (const i in gisMap_layers) {
|
if (gisMap_layers[i].options.id === layerName) {
|
layer = gisMap_layers[i]
|
}
|
}
|
return layer
|
},
|
// 初始化地图容器
|
initMap () {
|
var map = L.map('mapContent', {
|
inertia: false,
|
minZoom: 2,
|
maxZoom: 18,
|
center: [this.weiduNew, this.jingduNew],
|
zoom: 14,
|
renderer: L.canvas(),
|
zoomControl: false, // 缩放组件
|
attributionControl: false, // 去掉右下角logol
|
crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84
|
})
|
// 定义图层样式
|
L.tileLayer(
|
'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
|
).addTo(map)
|
this.map = map // data上需要挂载
|
// const that = this
|
// this.map.on('mousedown', function(ev) {
|
// const res = that.findLayer('wmsid')
|
// if (res) {
|
// that.map.removeLayer(res)
|
// }
|
// })
|
// this.map.on('mouseup', function(ev) {
|
// console.log('1111111')
|
// that.canvasWind(this.windJsonData)
|
// })
|
window.map = map
|
},
|
changeData (val) {
|
console.log(val)
|
this.nyr = val + ':00'
|
const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00'))
|
|
console.log(date)
|
this.chooseTime = true
|
// var p1 = document.querySelector('.p1')
|
// var p2 = document.querySelector('.p2')
|
// var p3 = document.querySelector('.p3')
|
// this.time = date
|
// p3.innerHTML = this.getDayXQ('today')
|
// p2.innerHTML = this.getDayXQ('yesterday')
|
// p1.innerHTML = this.getDayXQ('beforeYea')
|
this.initData()
|
},
|
// 更改不同的值区间
|
change (index) {
|
this.changeColor = index
|
var pr = ''
|
switch (index) {
|
case 0:
|
pr = 'a34002'
|
this.bg = require('@/assets/images/tl_PM10.png')
|
break
|
case 1:
|
pr = 'a34004'
|
this.bg = require('@/assets/images/tl_PM2.5.png')
|
break
|
case 2:
|
pr = 'a21026'
|
this.bg = require('@/assets/images/tl_SO2.png')
|
break
|
case 3:
|
pr = 'a21004'
|
this.bg = require('@/assets/images/tl_NO2.png')
|
break
|
case 4:
|
pr = 'a21005'
|
this.bg = require('@/assets/images/tl_CO.png')
|
break
|
case 5:
|
pr = 'a05024'
|
this.bg = require('@/assets/images/tl_O3.png')
|
break
|
case 6:
|
pr = 'a99054'
|
this.bg = require('@/assets/images/tl_TVOCNew.png')
|
break
|
}
|
this.sensorKey = pr
|
// 请求设备坐标
|
// this.toggleWindState()
|
if (this.windState === 1) {
|
this.deviceMaker()
|
this.windData()
|
} else if (this.windState === 2) {
|
this.windDir()
|
}
|
},
|
// 请求风场图接口
|
initData () {
|
if (this.map) {
|
this.map.eachLayer(function (layer) {
|
// 卸载之前的风场图层
|
if (
|
!layer._container &&
|
('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
'leaflet-layer'
|
) {
|
layer.remove()
|
}
|
})
|
}
|
this.deviceMaker()
|
this.windData()
|
},
|
// 风场图数据
|
windData () {
|
this.$request({
|
url: '/monitorPoint/getWindData',
|
method: 'get',
|
params: {
|
monitorPointIds: this.monitorPointIds.toString(),
|
chooseTime: this.chooseTime,
|
time: this.nyr
|
}
|
})
|
.then(res => {
|
this.windJsonData = res.data[0]
|
return this.windJsonData
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
canvasWind (data) {
|
const res = this.findLayer('wmsid')
|
if (res) {
|
this.map.removeLayer(res)
|
}
|
var velocityLayer = L.velocityLayer({
|
displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
id: 'wmsid',
|
displayOptions: {
|
// 显示信息配置
|
// velocityType: 'Global Wind',
|
velocityType: 'GBR Wind',
|
displayPosition: 'bottomleft',
|
displayEmptyString: 'No wind data'
|
},
|
data: data, // 数据 格式可参照
|
// data: data2,
|
// 以下为控制参数，后面为默认值
|
minVelocity: 0, // 粒子最小速度（ m/s ）
|
maxVelocity: 8, // 粒子最大速度（ m/s ）
|
velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
lineWidth: 1.5, // 绘制粒子的线宽
|
particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
frameRate: 15, // 每秒所需的帧数
|
colorScale: [
|
'#A2D839',
|
'#7EB530',
|
'#6E9F26',
|
'#4E7522',
|
'#345B1B',
|
'#186303',
|
'#175103',
|
'#053F03'
|
]
|
// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
|
})
|
velocityLayer.addTo(this.map) // 添加到图上
|
setTimeout(() => {
|
this.loading = false
|
}, 1000)
|
},
|
// 将页码，及每页显示的条数以参数传递提交给后台
|
alertData (n1, n2) {
|
// 这里使用axios，使用时请提前引入
|
this.$request({
|
url: '/alarmInfo/getDataByConditionWithoutPage',
|
method: 'get',
|
params: {
|
organization_id: this.$store.state.orgId,
|
// 每页显示的条数
|
// size: n1,
|
// 显示第几页
|
// current: n2,
|
startTime: this.dateValue[0],
|
endTime: this.dateValue[1],
|
index: this.factorValue,
|
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
|
})
|
},
|
// 分页
|
// 每页显示的条数
|
handleSizeChange (val) {
|
// 改变每页显示的条数
|
this.PageSize = val
|
// 注意：在改变每页显示的条数时，要将页码显示到第一页
|
this.currentPage = 1
|
},
|
// 显示第几页
|
handleCurrentChange (val) {
|
// 改变默认的页数
|
this.currentPage = val
|
// console.log(val)
|
},
|
// 单元格样式
|
tableCellClassName ({ row, column, rowIndex, columnIndex }) {
|
// eslint-disable-next-line no-unused-vars
|
for (const key in row) {
|
if (key === column.property) {
|
const code = column.property
|
if (code === 'alarm_type') {
|
// console.log(row[key])
|
if (row[key] === 0 || row[key] === '' || row[key] === null) {
|
return ''
|
} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 100) {
|
return 'yellow'
|
} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 150) {
|
return 'orange'
|
} else if (Number(row[key].replace(/[^0-9]/gi, '')) === 250) {
|
return 'red'
|
}
|
}
|
}
|
}
|
return ''
|
},
|
turnState () {
|
// console.log(this.showOrHidden)
|
if (this.showOrHidden === true) {
|
this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
|
} else {
|
this.turnImg = require('@/assets/images/regionalOverview/putAway.png')
|
}
|
this.showOrHidden = !this.showOrHidden
|
},
|
// 国控站经纬度
|
stateControlStation () {
|
// this.$axios.get('monitorPoint/queryStateControlStation', {
|
this.$request({
|
url: '/govMonitorPoint/getGovMonitorPoints',
|
method: 'get'
|
})
|
.then(res => {
|
console.log('国控站信息')
|
console.log(res)
|
var gkData = res.data
|
let _this = this
|
var group = L.layerGroup().addTo(this.map)
|
for (let i = 0; i < gkData.length; i++) {
|
var glat = gkData[i].latitude
|
var glng = gkData[i].longitude
|
var gIcon = L.icon({
|
iconUrl: require('@/assets/icon/gk.png'),
|
// iconUrl:require('@/assets/images/tl_PM10.png'),
|
iconSize: [60, 60],
|
iconAnchor: [30, 48],
|
className: 'my-device'
|
})
|
// 添加标记到地图
|
let marker = L.marker([glat, glng], {
|
icon: gIcon
|
}).addTo(group)
|
marker.inforData = gkData[i]
|
marker.on('click', function (e) {
|
console.log('Marker clicked!', e.target)
|
_this.handleguoClick(gkData[i], e.target)
|
})
|
// var myIcon = L.divIcon({
|
// html: gkData[i].data,
|
// className: 'my-div-icon-g',
|
// iconSize: 30
|
// })
|
// L.marker([glat, glng], {
|
// icon: myIcon
|
// }).addTo(group)
|
}
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
handleguoClick (data, marker) {
|
this.clickmac = ''
|
this.childerItem = {}
|
this.farterItem = {}
|
this.indexsLaber = 0
|
this.clickmac = marker.inforData.guid
|
this.childerItem = marker.inforData
|
console.log('this.defaultData', this.defaultData)
|
this.defaultData.forEach(item => {
|
if (item.devices) {
|
item.devices.forEach((dev, index) => {
|
if (dev.mac === marker.inforData.mac) {
|
this.farterItem = item
|
this.indexsLaber = index
|
}
|
})
|
}
|
})
|
this.$request({
|
url: '/historyFiveMinutely/historyAqi',
|
method: 'get',
|
params: {
|
guid: data.guid,
|
}
|
})
|
.then(res => {
|
if (res.message === '操作目标不存在') {
|
var datafalse = '暂无数据'
|
marker.bindPopup(datafalse).openPopup()
|
return
|
}
|
this.childerItem.name = marker.inforData.name
|
let colorliststyleBgColor = this.styleBgColor(res.data[0])
|
console.log('colorliststyleBgColor', colorliststyleBgColor)
|
let deviceDetails = _.cloneDeep(res.data[0])
|
deviceDetails.name = marker.inforData.name
|
let dataTime = deviceDetails.dataTime.replace(/["\\]/g, '')
|
deviceDetails.a99054 = '-'
|
// eslint-disable-next-line no-unused-vars
|
for (let key in deviceDetails) {
|
if (deviceDetails[key] === null) {
|
deviceDetails[key] = '-'
|
}
|
}
|
console.log('deviceDetails', deviceDetails)
|
console.log('dataTime', dataTime)
|
let htmlClassName = 'mypopupNoWind'
|
let html = ` <div data-reactroot="" class="marker_maptip">
|
<div class="marker_title_1nQ">
|
<span >设备详情</span>
|
</div>
|
<div class="marker_firstline_2WH">
|
<div class="marker_citypart_keg">
|
<div class="marker_name_small_1VU">${deviceDetails.name}</div>
|
<div class="marker_time_w5m">${dataTime}</div>
|
</div>
|
<div class="marker_indexpart_2UI">
|
<div
|
class="marker_indexname_3TP"
|
style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"
|
>
|
TVOC
|
</div>
|
<div class="marker_indexvalue_1O7">
|
${deviceDetails.a99054}
|
</div>
|
</div>
|
</div>
|
<div class="marker_secondline_2Om">
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.pm25colorbg} "
|
>
|
PM2.5
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(String(deviceDetails.a34004))}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.pm10colorbg}"
|
>
|
PM10
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(String(deviceDetails.a34002))}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.so2colorbg}"
|
>
|
SO2
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(String(deviceDetails.a21026))}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.no210colorbg}"
|
>
|
NO2
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(String(deviceDetails.a21004))}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black;background:${colorliststyleBgColor.cocolorbg}"
|
>
|
CO
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(String(deviceDetails.a21005))}
|
</div>
|
</div>
|
<div class="marker_item_2Kk">
|
<div
|
class="marker_itemname_Wq5"
|
style="color: black; background:${colorliststyleBgColor.o3colorbg}"
|
>
|
O3
|
</div>
|
<div class="marker_itemvalue_1l1">
|
${this.handleCutZero(String(deviceDetails.a05024))}
|
</div>
|
</div>
|
</div>
|
</div>`
|
|
marker.bindPopup(html, { className: htmlClassName }).openPopup()
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
// 切换风场风向状态
|
toggleWindState () {
|
if (this.ws) {
|
this.ws.close()
|
}
|
if (this.windState === 2) {
|
this.windState = 1
|
this.windStateText = '风场图'
|
this.initData()
|
// console.log(this.windState)
|
} else if (this.windState === 1) {
|
this.windState = 2
|
this.windStateText = '风向标'
|
this.windDir()
|
// console.log(this.windState)
|
}
|
},
|
closeAlarmTableVisible () {
|
this.$store.state.alarmTableVisible = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import './dataModel.css';
|
html,
|
body,
|
#mapContent {
|
width: 100%;
|
height: 100%;
|
}
|
// .topSelect{
|
// display: flex;
|
// margin-bottom: 20px;
|
// padding: 20px 15px 0 15px;
|
// display: flex;
|
// justify-content: space-between;
|
// span:first-child{
|
// flex: 1;
|
// }
|
// }
|
.noneData {
|
position: absolute;
|
color: #000;
|
background: #fff;
|
z-index: 999;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%);
|
padding: 20px 50px;
|
/* opacity: 0.5; */
|
font-size: 28px;
|
/* border-radius: 10px; */
|
border: 2px solid #ff7f50;
|
}
|
.topDate {
|
position: absolute;
|
top: 50px;
|
width: 100%;
|
padding: 15px 10px 3px 10px;
|
z-index: 999;
|
//background: #ccc;
|
background: rgba(204, 204, 204, 0.8);
|
box-shadow: 1px 1px 5px #666;
|
cursor: pointer;
|
}
|
.mouseDiv,
|
.mouseDiv2 {
|
position: absolute;
|
left: 0;
|
background-color: #009845;
|
width: 36px;
|
height: 22px;
|
border-radius: 5px;
|
top: -34px;
|
display: none;
|
text-align: center;
|
line-height: 22px;
|
padding: 1px;
|
color: white;
|
}
|
.sjDiv,
|
.sjDiv2 {
|
width: 0px;
|
height: 0px;
|
border: 10px solid transparent;
|
border-top-color: #009845;
|
position: absolute;
|
left: 0;
|
right: 0;
|
margin: auto;
|
top: 100%;
|
z-index: -1;
|
}
|
.mouseDiv2 {
|
background-color: #2b2b2b;
|
}
|
.sjDiv2 {
|
border-top-color: #2b2b2b;
|
}
|
.jdt {
|
height: 5px;
|
width: 100%;
|
display: flex;
|
position: relative;
|
}
|
.timeDiv {
|
width: 100%;
|
float: left;
|
}
|
.topDate .timeDiv:nth-child(3) {
|
border-left: 1px solid white;
|
border-right: 1px solid white;
|
}
|
.topDate ul {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
}
|
.topDate li {
|
width: 1.36986%;
|
//padding: 0 2%;
|
box-sizing: border-box;
|
//transform: translateX(50%);
|
}
|
.topDate p {
|
text-align: center;
|
font-size: 16px;
|
margin: 0;
|
padding: 0;
|
}
|
.jdt li {
|
//box-sizing: border-box;
|
border-left: 1px solid white;
|
background-color: rgba(0, 0, 0, 0.3);
|
height: 100%;
|
width: 1.36986%;
|
list-style: none;
|
position: relative;
|
left: 0;
|
top: 0;
|
}
|
.dayDiv p {
|
width: 32.87664%;
|
text-align: center;
|
}
|
.top {
|
position: absolute;
|
top: 0px;
|
width: 100%;
|
padding: 5px 10px;
|
z-index: 999;
|
/* background: #ccc; */
|
background: rgba(204, 204, 204, 0.5);
|
//box-shadow: 1px 1px 5px #666;
|
}
|
.top > .left {
|
padding: 5px 10px;
|
border: 1px solid #aaa;
|
border-right: none;
|
background: #fff;
|
/* border-radius: 3px; */
|
cursor: pointer;
|
font-size: 16px;
|
float: left;
|
margin-top: 4px;
|
-webkit-transform-origin-x: 0;
|
/* -webkit-transform: scale(0.90); */
|
}
|
.top > .left:nth-child(1) {
|
border-radius: 5px 0 0 5px;
|
}
|
.top > .left:nth-last-child(2) {
|
border-radius: 0 5px 5px 0;
|
border-right: 1px solid #aaa;
|
}
|
.top > .left:hover {
|
background: #666;
|
color: #fff;
|
}
|
.click {
|
color: #fff;
|
background-color: #666 !important;
|
}
|
.top > .right {
|
position: fixed;
|
right: 410px;
|
top: 55px;
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
background: green;
|
color: #fff;
|
float: right;
|
line-height: 40px;
|
text-align: center;
|
border: 1px solid #333;
|
opacity: 0.7;
|
}
|
|
.top > .dropDown {
|
width: 400px;
|
height: 51px;
|
line-height: 51px;
|
text-align: center;
|
color: #fff;
|
font-size: 18px;
|
position: fixed;
|
right: 0;
|
top: 50px;
|
background-color: rgba(15, 69, 103, 0.8);
|
}
|
.dropDown > .drop-icon {
|
vertical-align: middle;
|
width: 24px;
|
position: relative;
|
left: 14px;
|
top: -2px;
|
}
|
.realTime_top {
|
width: 120px;
|
float: left;
|
margin-top: 9px;
|
margin-left: 10px;
|
}
|
.text_Time {
|
float: left;
|
margin-left: 37px;
|
.el-date-editor{
|
width: 145px!important;
|
.el-input__prefix{
|
display: none!important;
|
}
|
.el-input__inner{
|
cursor: pointer;
|
font-size: 18px;
|
color: #fff;
|
padding: 0px!important;
|
border: none;
|
background: inherit;
|
|
}
|
}
|
}
|
.tpc{
|
left: unset!important;
|
right: 60px;
|
}
|
.tpc .el-time-spinner__wrapper {
|
width:100% !important;
|
}
|
.tpc .el-scrollbar:nth-of-type(2) {
|
display: none !important;
|
}
|
|
.my-div-icon {
|
font-size: 14px;
|
text-align: center;
|
padding-left: 20px;
|
padding-top: 6px;
|
font-family: '微软雅黑';
|
z-index: 10003;
|
/* -webkit-transform-origin-x: 0; */
|
/* -webkit-transform: scale(0.90); */
|
}
|
.my-div-icon-g {
|
font-size: 14px;
|
text-align: center;
|
padding-left: 20px;
|
padding-top: 11px;
|
font-family: '微软雅黑';
|
z-index: 10003;
|
/* -webkit-transform-origin-x: 0; */
|
/* -webkit-transform: scale(0.90); */
|
}
|
.iconWind {
|
z-index: 10002;
|
}
|
.my-device {
|
z-index: 999;
|
}
|
.windDir-icon {
|
z-index: 10001;
|
margin-top: 20px;
|
/* padding-left: 10px; */
|
/* padding-top: 30px; */
|
}
|
|
.buttom-left {
|
/* background-image: url("@/assets/images/tl_PM10.png"); */
|
position: absolute;
|
bottom: 10px;
|
left: 10px;
|
width: 435px;
|
height: 36px;
|
z-index: 999;
|
border-radius: 3px;
|
}
|
.middle {
|
padding: 5px 10px;
|
border: 1px solid #aaa;
|
background: #fff;
|
border-radius: 3px;
|
cursor: pointer;
|
font-size: 16px;
|
float: left;
|
margin-top: 4px;
|
-webkit-transform-origin-x: 0;
|
margin-left: 20px;
|
}
|
.el-dialog__body {
|
padding: 10px 20px;
|
}
|
.el-dialog__footer {
|
padding: 0px 20px 15px;
|
}
|
.yellow {
|
background-color: #ffff00 !important;
|
color: #868600 !important;
|
}
|
.orange {
|
background-color: #ff7e00 !important;
|
color: #844100 !important;
|
}
|
.red {
|
background-color: #ff0000 !important;
|
color: #790000 !important;
|
}
|
.leaflet-marker-icon.leaflet-interactive {
|
pointer-events: auto;
|
margin-left: -45px;
|
margin-top: -40px;
|
}
|
</style>
|
