From 7c99f16331b22b46b3992f28f10afcdcc4f1f2c0 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 25 Oct 2023 14:47:53 +0800
Subject: [PATCH] fix:实时风场图点击弹窗修改
---
src/components/Wind/WRatingArr.js | 429 ++++++++++++++++++
.eslintrc.js | 2
src/components/Wind/Map.vue | 730 +++++++++++++++++++++++++++----
src/components/Wind/dataModel.css | 173 +++++++
4 files changed, 1,233 insertions(+), 101 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index 1dd83b6..54bb8f5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,7 +15,7 @@
//it is base on https://github.com/vuejs/eslint-config-vue
rules: {
'eqeqeq': ['error', 'always'], // ���������������������������
- 'semi': 2, // ���������������������������������
+ 'semi': 0, // ���������������������������������
'no-use-before-define': [1, 'nofunc'], // ������������������������
'max-lines': ['error', { 'max': 2000, 'skipBlankLines': true }],
'no-mixed-spaces-and-tabs': 'warn', // ���������������������tab������������
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 61678cc..f62f064 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -5,7 +5,9 @@
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"
@@ -24,7 +26,12 @@
@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">
@@ -263,10 +270,9 @@
:value="item.value"
/>
</el-select>
- <el-button
- type="primary"
- @click="alertData(PageSize, currentPage)"
- >������</el-button>
+ <el-button type="primary" @click="alertData(PageSize, currentPage)">
+ ������
+ </el-button>
</div>
</div>
<el-table
@@ -314,10 +320,9 @@
@current-change="handleCurrentChange"
/>
<div slot="footer" class="dialog-footer">
- <el-button
- size="mini"
- @click="alarmTableVisible = false"
- >��� ���</el-button>
+ <el-button size="mini" @click="alarmTableVisible = false">
+ ��� ���
+ </el-button>
</div>
</el-dialog>
</div>
@@ -327,9 +332,11 @@
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'
@@ -340,10 +347,12 @@
weidu: Number,
jingdu: Number,
monitorPointId: Number,
- monitorPointIds: Array
+ monitorPointIds: Array,
},
data() {
return {
+ compassBg: require('@/assets/images/regionalOverview/wind_watch.png'),
+ compassDirection: require('@/assets/images/regionalOverview/wind_point.png'),
timerKey: '', // ���������������������������
map: null,
code: [],
@@ -389,70 +398,70 @@
factorOptions: [
{
label: '������������',
- value: 'all'
+ value: 'all',
},
{
label: 'PM10',
- value: 'PM10'
+ value: 'PM10',
},
{
label: 'PM2.5',
- value: 'PM2.5'
+ value: 'PM2.5',
},
{
label: 'SO2',
- value: 'SO2'
+ value: 'SO2',
},
{
label: 'NO2',
- value: 'NO2'
+ value: 'NO2',
},
{
label: 'CO',
- value: 'CO'
+ value: 'CO',
},
{
label: 'O3',
- value: 'O3'
- }
+ value: 'O3',
+ },
],
alertOptions: [
{
label: '������������������',
- value: 'all'
+ value: 'all',
},
{
label: '������',
- value: 'overrun'
+ value: 'overrun',
},
{
label: '���������',
- value: 'sudden'
+ value: 'sudden',
},
{
label: '������������������100%',
- value: 'state100'
+ value: 'state100',
},
{
label: '������������������150%',
- value: 'state150'
+ value: 'state150',
},
{
label: '������������������250%',
- value: 'state250'
+ value: 'state250',
},
{
label: '������������������100%',
- value: 'city100'
+ value: 'city100',
},
{
label: '������������������150%',
- value: 'city150'
+ value: 'city150',
},
{
label: '������������������250%',
- value: 'city250'
- }
+ value: 'city250',
+ },
],
currentDate: '',
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
@@ -464,11 +473,11 @@
dateInfo: '', // ���������������
timeInfo: '', // ���������������
nyr: '', // ������������������
- windJsonData: []
+ windJsonData: [],
}
},
computed: {
- ...mapGetters(['regionCode'])
+ ...mapGetters(['regionCode']),
},
watch: {
dateValue(n, o) {
@@ -484,7 +493,7 @@
this.canvasWind(newCode)
})
- }
+ },
},
mounted() {
this.currentHour()
@@ -529,7 +538,8 @@
methods: {
// ������������������������������
getDayXQ(day) {
- var days = new Date().getDay() // ������
+ var days = new Date()
+.getDay() // ������
var rq = '' // ������
if (day === 'today') {
rq = this.newData(0)
@@ -680,7 +690,7 @@
}
// ������������������������
for (let i = 0; i < lis.length; i++) {
- lis[i].onmouseenter = function() {
+ lis[i].onmouseenter = function () {
// console.log('mouseenter', i)
// mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
mouseDiv.style.transform = 'translateX(-50%)'
@@ -691,13 +701,13 @@
inText.innerHTML = times + ':00'
// console.log(mouseDiv)
}
- lis[i].onmouseleave = function() {
+ lis[i].onmouseleave = function () {
mouseDiv.style.display = 'none'
// console.log('������������', i)
}
}
for (let i = 0; i < timeLis.length; i++) {
- timeLis[i].onmouseenter = function() {
+ timeLis[i].onmouseenter = function () {
// console.log('mouseenter', i)
// mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
mouseDiv.style.left = 1.36986 * i + '%'
@@ -708,7 +718,7 @@
inText.innerHTML = times + ':00'
// console.log(mouseDiv)
}
- timeLis[i].onmouseleave = function() {
+ timeLis[i].onmouseleave = function () {
mouseDiv.style.display = 'none'
// console.log('������������', i)
}
@@ -768,11 +778,12 @@
// ������������������,���������
deviceMaker() {
if (this.map) {
- this.map.eachLayer(function(layer) {
+ this.map.eachLayer(function (layer) {
// ���������������������������
if (
!layer._container &&
- ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ ('' + $(layer._container)
+.attr('class')).replace(/\s/g, '') !==
'leaflet-layer'
) {
layer.remove()
@@ -787,11 +798,11 @@
organizationId: this.$store.state.orgId,
regionCode: this.$store.state.regionCode,
chooseTime: this.chooseTime,
- time: this.nyr
- }
- }).then((data) => {
+ time: this.nyr,
+ },
+ })
+.then((data) => {
// console.log('���������������������')
- console.log(data, 'tata')
this.markDeviceSite(data)
})
},
@@ -801,8 +812,10 @@
this.keyData = data.data.devices
// ���������������������
// this.stateControlStation()
- var groupIcon = L.layerGroup().addTo(this.map)
- var groupText = L.layerGroup().addTo(this.map)
+ 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) {
@@ -812,13 +825,16 @@
} 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)))
+ 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))
+ 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))
+ 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'))
@@ -946,7 +962,8 @@
}
} else if (keyData[i].a21004) {
var data = Math.floor(
- Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
+ Math.floor(JSON.parse(keyData[i].a21004)
+.toFixed(0))
)
switch (true) {
case data < 0: {
@@ -985,7 +1002,8 @@
break
}
} else if (keyData[i].a21005) {
- var data = JSON.parse(keyData[i].a21005).toFixed(3)
+ var data = JSON.parse(keyData[i].a21005)
+.toFixed(3)
switch (true) {
case data < 0: {
colorNum = 7
@@ -1061,7 +1079,8 @@
break
}
} else if (keyData[i].a99054) {
- var data = JSON.parse(keyData[i].a99054).toFixed(3)
+ var data = JSON.parse(keyData[i].a99054)
+.toFixed(3)
switch (true) {
case data < 0: {
colorNum = 7
@@ -1105,12 +1124,12 @@
// iconUrl: require('@/assets/icon/ico2.png'),
iconSize: [60, 60],
iconAnchor: [30, 48],
- className: 'my-device'
+ className: 'my-device',
})
// ���������������������
const iconMarker = L.marker([lat, lng], {
- icon: blueIcon
+ icon: blueIcon,
})
groupIcon.addLayer(iconMarker)
// console.log(JSON.parse(this.keys[i]))
@@ -1118,17 +1137,20 @@
html: this.keys[i],
className: 'my-div-icon',
iconSize: [60, 60],
- iconAnchor: [40, 40]
+ iconAnchor: [40, 40],
})
const TexteMarker = L.marker([lat, lng], { icon: myIcon })
+ TexteMarker.vuecontext = this
groupText.addLayer(TexteMarker)
const _this = this
// ������������������������������������mouseover���������������
- TexteMarker.on('click', function(e) {
+ TexteMarker.on('click', function (e) {
const MarkerTarget = e.target
- _this.getMarkerInfor(keyData[i], MarkerTarget)
+ // _this.getMarkerInfor(keyData[i], MarkerTarget)
this.noneData = false
+ // const _this = e.target.vuecontext
+ _this.handleClick(keyData[i], MarkerTarget)
})
// ������������������������������������
// TexteMarker.on('mouseout', function(e) {
@@ -1136,6 +1158,510 @@
// this.bindPopup().closePopup()
// })
}
+ console.log(' this.keys', this.keys)
+ },
+ styleBgColor(keyName) {
+ console.log('keyName', keyName)
+ let bgColorList = {
+ pm25colorbg: '',
+ pm10colorbg: '',
+ so2colorbg: '', //������������
+ no210colorbg: '', //������������
+ cocolorbg: '', //������������
+ o3colorbg: '', //������
+ tvoccolorbg: '', //TVOC
+ }
+
+ let data = ''
+ for (let i in keyName) {
+ if (i === 'a34002') {
+ data = Math.floor(JSON.parse(keyName.a34002))
+ 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))
+ 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))
+ 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)
+.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)
+.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))
+ 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)
+.toFixed(3)
+ switch (true) {
+ case data < 0: {
+ 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
+ },
+ handleClick(data, marker) {
+ this.$request({
+ url: '/historyFiveMinutely/queryFiveDataByMac',
+ method: 'get',
+ params: {
+ mac: data.mac,
+ chooseTime: this.chooseTime,
+ time: this.nyr,
+ },
+ })
+ .then((res) => {
+ console.log('res.data', res)
+ if (res.message === '���������������������') {
+ var datafalse = '���������������������'
+ marker.bindPopup(datafalse)
+.openPopup()
+ return
+ }
+ let colorliststyleBgColor = this.styleBgColor(res.data)
+ console.log('colorliststyleBgColor', colorliststyleBgColor)
+ 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)
+ : '-'
+ console.log('level', level)
+ if (deviceDetails.a01008) {
+ var windDirs = Number(
+ deviceDetails.a01008.substr(0, deviceDetails.a01008.length - 1)
+ )
+ // console.log(windDirs)
+ windDeg = windDirs
+ if (windDirs === 0 || windDirs === '-') {
+ windDir = '������'
+ } else if (windDirs > 0 && windDirs < 90) {
+ windDir = '���������'
+ } else if (windDirs === 90) {
+ windDir = '������'
+ } else if (windDirs > 90 && windDirs < 180) {
+ windDir = '���������'
+ } else if (windDirs === 180) {
+ windDir = '������'
+ } else if (windDirs > 180 && windDirs < 270) {
+ windDir = '���������'
+ } else if (windDirs === 270) {
+ windDir = '������'
+ } else if (windDirs > 270 && windDirs < 360) {
+ windDir = '���������'
+ }
+ }
+ // ������������������������������
+ 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">${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: 53%;top: 47%;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>
+ </div>
+
+ </div>`
+ marker.bindPopup(html, { className: 'mypopup' })
+.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({
@@ -1144,27 +1670,28 @@
params: {
mac: data.mac,
chooseTime: this.chooseTime,
- time: this.nyr
- }
+ time: this.nyr,
+ },
})
.then((res) => {
if (res.message === '���������������������') {
var datafalse = '���������������������'
- this.bindPopup(datafalse).openPopup()
+ this.bindPopup(datafalse)
+.openPopup()
return
}
for (const key in res.data) {
- var tempDecimal = res.data[key]
- .replace(/[^\d.]/g, '')
- .split('.')[1]
+ 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]
+ 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]
+ Number(res.data[key].split(' ')[0])
+.toFixed(2) +
+ res.data[key].split(' ')[1]
}
}
}
@@ -1172,7 +1699,8 @@
.replace(/,/g, `<br>`)
.replace(/{|}|"/g, '')
console.log(data)
- marker.bindPopup(data).openPopup()
+ marker.bindPopup(data)
+.openPopup()
})
.catch((err) => {
console.log(err)
@@ -1186,11 +1714,12 @@
// const that = this
// ������������������
if (this.map) {
- this.map.eachLayer(function(layer) {
+ this.map.eachLayer(function (layer) {
// ���������������������������
if (
!layer._container &&
- ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ ('' + $(layer._container)
+.attr('class')).replace(/\s/g, '') !==
'leaflet-layer'
) {
layer.remove()
@@ -1252,7 +1781,8 @@
}
}, 1000)
},
- findLayer(layerName) { // ������������������������������
+ findLayer(layerName) {
+ // ������������������������������
if (!this.map) {
return null
}
@@ -1276,12 +1806,13 @@
renderer: L.canvas(),
zoomControl: false, // ������������
attributionControl: false, // ���������������logol
- crs: L.CRS.EPSG3857 // ���������������������EPSG3857���������������������EPSG3395������������������������ EPSG4326 WGS84
+ 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)
+ )
+.addTo(map)
this.map = map // data���������������
// const that = this
// this.map.on('mousedown', function(ev) {
@@ -1343,11 +1874,12 @@
// ���������������������
initData() {
if (this.map) {
- this.map.eachLayer(function(layer) {
+ this.map.eachLayer(function (layer) {
// ���������������������������
if (
!layer._container &&
- ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ ('' + $(layer._container)
+.attr('class')).replace(/\s/g, '') !==
'leaflet-layer'
) {
layer.remove()
@@ -1365,8 +1897,8 @@
params: {
monitorPointIds: this.monitorPointIds.toString(),
chooseTime: this.chooseTime,
- time: this.nyr
- }
+ time: this.nyr,
+ },
})
.then((res) => {
this.windJsonData = res.data[0]
@@ -1389,7 +1921,7 @@
// velocityType: 'Global Wind',
velocityType: 'GBR Wind',
displayPosition: 'bottomleft',
- displayEmptyString: 'No wind data'
+ displayEmptyString: 'No wind data',
},
data: data, // ������ ���������������
// data: data2,
@@ -1409,8 +1941,8 @@
'#345B1B',
'#186303',
'#175103',
- '#053F03'
- ]
+ '#053F03',
+ ],
// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
})
velocityLayer.addTo(this.map) // ���������������
@@ -1433,9 +1965,10 @@
startTime: this.dateValue[0],
endTime: this.dateValue[1],
index: this.factorValue,
- alarmType: this.alartValue
- }
- }).then((res) => {
+ alarmType: this.alartValue,
+ },
+ })
+.then((res) => {
// console.log('������������')
// console.log(res)
var tempData = res.data
@@ -1501,14 +2034,15 @@
method: 'get',
params: {
regionCode: 130900,
- sensorCode: 'a34002'
- }
+ sensorCode: 'a34002',
+ },
})
.then((res) => {
// console.log('���������������')
// console.log(res)
var gkData = res.data
- var group = L.layerGroup().addTo(this.map)
+ 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
@@ -1517,20 +2051,22 @@
// iconUrl:require('@/assets/images/tl_PM10.png'),
iconSize: [55, 55],
iconAnchor: [13, 21],
- className: 'my-device'
+ className: 'my-device',
})
// ���������������������
L.marker([glat, glng], {
- icon: gIcon
- }).addTo(group)
+ icon: gIcon,
+ })
+.addTo(group)
var myIcon = L.divIcon({
html: gkData[i].data,
className: 'my-div-icon-g',
- iconSize: 30
+ iconSize: 30,
})
L.marker([glat, glng], {
- icon: myIcon
- }).addTo(group)
+ icon: myIcon,
+ })
+.addTo(group)
}
})
.catch((err) => {
@@ -1556,12 +2092,13 @@
},
closeAlarmTableVisible() {
this.$store.state.alarmTableVisible = false
- }
- }
+ },
+ },
}
</script>
<style lang="scss">
+@import './dataModel.css';
html,
body,
#mapContent {
@@ -1800,14 +2337,7 @@
/* padding-left: 10px; */
/* padding-top: 30px; */
}
-.leaflet-popup-content {
- width: 235px !important;
- font-size: 12px;
- -webkit-transform-origin-x: 0;
- z-index: 1000;
- /* -webkit-transform: scale(0.90); */
- /* font-family: ui-serif; */
-}
+
.buttom-left {
/* background-image: url("@/assets/images/tl_PM10.png"); */
position: absolute;
diff --git a/src/components/Wind/WRatingArr.js b/src/components/Wind/WRatingArr.js
new file mode 100644
index 0000000..ecee90c
--- /dev/null
+++ b/src/components/Wind/WRatingArr.js
@@ -0,0 +1,429 @@
+/**
+ * ������-������������������
+ */
+var WWindUtil = {};
+/**
+ * ������json
+ */
+WWindUtil.WDJson = {
+ "N": {
+ "en": "N",
+ "cn": "���",
+ "desc": "���"
+ },
+ "NNE": {
+ "en": "NNE",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "NE": {
+ "en": "NE",
+ "cn": "������",
+ "desc": "������"
+ },
+ "ENE": {
+ "en": "ENE",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "E": {
+ "en": "E",
+ "cn": "���",
+ "desc": "���"
+ },
+ "ESE": {
+ "en": "ESE",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "SE": {
+ "en": "SNE",
+ "cn": "������",
+ "desc": "������"
+ },
+ "SSE": {
+ "en": "SSE",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "S": {
+ "en": "S",
+ "cn": "���",
+ "desc": "���"
+ },
+ "SSW": {
+ "en": "SSW",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "SW": {
+ "en": "SW",
+ "cn": "������",
+ "desc": "������"
+ },
+ "WSW": {
+ "en": "WSW",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "W": {
+ "en": "W",
+ "cn": "���",
+ "desc": "���"
+ },
+ "WNW": {
+ "en": "WNW",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "NW": {
+ "en": "NW",
+ "cn": "������",
+ "desc": "������"
+ },
+ "NNW": {
+ "en": "NW",
+ "cn": "���������",
+ "desc": "������������"
+ },
+ "ERROR": {
+ "en": "error value",
+ "cn": "������������",
+ "desc": "������������"
+ }
+
+};
+
+/**
+ * ������������
+ */
+WWindUtil.WRatingArr = [
+ {
+ "min": 0,
+ "max": 1.5,
+ "level": 1,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 1.6,
+ "max": 3.3,
+ "level": 2,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 3.4,
+ "max": 5.4,
+ "level": 3,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 5.5,
+ "max": 7.9,
+ "level": 4,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 8.0,
+ "max": 10.7,
+ "level": 5,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 10.8,
+ "max": 13.8,
+ "level": 6,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 13.9,
+ "max": 17.1,
+ "level": 7,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 17.2,
+ "max": 20.7,
+ "level": 8,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 20.8,
+ "max": 24.4,
+ "level": 9,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 24.5,
+ "max": 28.4,
+ "level": 10,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 28.5,
+ "max": 32.6,
+ "level": 11,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 32.7,
+ "max": 36.9,
+ "level": 0,
+ "name": "������",
+ "landScene": "������������"
+ },
+ {
+ "min": 37.0,
+ "max": 41.4,
+ "level": 13,
+ "name": "",
+ "landScene": ""
+ },
+ {
+ "min": 41.5,
+ "max": 46.1,
+ "level": 14,
+ "name": "",
+ "landScene": ""
+ },
+ {
+ "min": 46.2,
+ "max": 50.9,
+ "level": 15,
+ "name": "",
+ "landScene": ""
+ },
+ {
+ "min": 51.0,
+ "max": 56.0,
+ "level": 16,
+ "name": "",
+ "landScene": ""
+ },
+ {
+ "min": 56.1,
+ "max": null,
+ "level": 17,
+ "name": "",
+ "landScene": ""
+ }
+]
+
+/** ������������������������
+ * @param {Object} windNumberValue ���������
+ */
+WWindUtil.to16WindDirection = function (windNumberValue) {
+ if (windNumberValue > 360) {
+ return WWindUtil.WDJson.ERROR;
+ }
+ let a = Math.ceil(windNumberValue / 11.25);
+ let ret;
+ switch (a) {
+ case 32:
+ case 1:
+ ret = WWindUtil.WDJson.N;
+ break;
+
+ case 2:
+ case 3:
+ ret = WWindUtil.WDJson.NNE;
+ break;
+
+
+ case 4:
+ case 5:
+ ret = WWindUtil.WDJson.NE;
+ break;
+
+ case 6:
+ case 7:
+ ret = WWindUtil.WDJson.ENE;
+ break;
+
+ case 8:
+ case 9:
+ ret = WWindUtil.WDJson.E;
+ break;
+
+ case 10:
+ case 11:
+ ret = WWindUtil.WDJson.ESE;
+ break;
+
+ case 12:
+ case 13:
+ ret = WWindUtil.WDJson.SE;
+ break;
+
+ case 14:
+ case 15:
+ ret = WWindUtil.WDJson.SSE;
+ break;
+
+ case 16:
+ case 17:
+ ret = WWindUtil.WDJson.S;
+ break;
+
+ case 18:
+ case 19:
+ ret = WWindUtil.WDJson.SSW;
+ break;
+
+ case 20:
+ case 21:
+ ret = WWindUtil.WDJson.SW;
+ break;
+
+ case 22:
+ case 23:
+ ret = WWindUtil.WDJson.WSW;
+ break;
+
+ case 24:
+ case 25:
+ ret = WWindUtil.WDJson.W;
+ break;
+
+ case 26:
+ case 27:
+ ret = WWindUtil.WDJson.WNW;
+ break;
+
+ case 28:
+ case 29:
+ ret = WWindUtil.WDJson.NW;
+ break;
+
+ case 30:
+ case 31:
+ ret = WWindUtil.WDJson.NNW;
+ break;
+
+ default:
+ ret = WWindUtil.WDJson.ERROR;
+ break;
+
+ }
+ return ret;
+}
+
+/** ������������������������
+ * @param {Object} windNumberValue ���������
+ */
+WWindUtil.to8WindDirection = function (windNumberValue) {
+ if (windNumberValue > 360) {
+ return WWindUtil.WDJson.ERROR;
+ }
+ let a = Math.ceil(windNumberValue / 22.5);
+ let ret;
+ switch (a) {
+ case 16:
+ case 1:
+ ret = WWindUtil.WDJson.N;
+ break;
+
+ case 2:
+ case 3:
+ ret = WWindUtil.WDJson.NE;
+ break;
+
+
+ case 4:
+ case 5:
+ ret = WWindUtil.WDJson.E;
+ break;
+
+ case 6:
+ case 7:
+ ret = WWindUtil.WDJson.SE;
+ break;
+
+ case 8:
+ case 9:
+ ret = WWindUtil.WDJson.S;
+ break;
+
+ case 10:
+ case 11:
+ ret = WWindUtil.WDJson.SW;
+ break;
+
+ case 12:
+ case 13:
+ ret = WWindUtil.WDJson.W;
+ break;
+
+ case 14:
+ case 15:
+ ret = WWindUtil.WDJson.NW;
+ break;
+
+ default:
+ ret = WWindUtil.WDJson.ERROR;
+ break;
+
+ }
+ return ret;
+}
+
+/** ���������������������
+ * @param {Object} value ��������� (m/s)
+ */
+WWindUtil.WindtoLevel = function (value) {
+ let vl = Number(value);
+ if (!vl || vl < 0) { return null; }
+ let arr = WWindUtil.WRatingArr;
+ if (vl >= arr[arr.length - 1].min) {
+ return arr[arr.length - 1];
+ }
+ for (let i = 0; i < arr.length; i++) {
+ if (vl >= arr[i].min && vl <= arr[i].max) {
+ return arr[i];
+ }
+ }
+ return null;
+}
+
+// ������������������
+WWindUtil.windValueFormat = function (value) {
+ try {
+ let vl = Number(value);
+ if (!vl || vl > 360 || vl < 0) {
+ return '-';
+ }
+ return WWindUtil.to16WindDirection(value).desc;
+ } catch (e) {
+ return '-';
+ }
+}
+
+/** ������������������������
+ * @param {Object} value ���������
+ */
+WWindUtil.windFormatLevel = function (value) {
+ try {
+ let vl = Number(value);
+ if (!vl || vl > 100 || vl < 0) {
+ return "-";
+ }
+ return WWindUtil.WindtoLevel(value).level + "���(" + WWindUtil.WindtoLevel(value).name + ")";
+ } catch (e) {
+ return "-";
+ }
+}
+
+
+export {
+ WWindUtil
+};
diff --git a/src/components/Wind/dataModel.css b/src/components/Wind/dataModel.css
new file mode 100644
index 0000000..2b70606
--- /dev/null
+++ b/src/components/Wind/dataModel.css
@@ -0,0 +1,173 @@
+.mypopup {
+ .leaflet-popup-content-wrapper {
+ width: 415px;
+ height: 300px;
+
+ }
+
+}
+
+.marker_maptip {
+ width: 380px;
+ background: #fff;
+ padding: 0;
+}
+
+.marker_maptip .marker_title_1nQ {
+ font-size: 18px;
+ margin-bottom: 10px;
+ border-bottom: 1px solid #ddd;
+}
+
+.marker_maptip .marker_title_1nQ icon {
+ float: right;
+ display: block;
+ margin-right: 8px;
+ margin-top: 8px;
+ cursor: pointer;
+}
+
+.marker_maptip .marker_title_1nQ icon:hover {
+ box-shadow: 2px 2px 1px #888;
+}
+
+.marker_maptip .marker_firstline_2WH {
+ width: 100%;
+ height: 44px;
+ margin-bottom: 8px;
+ text-align: center;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_citypart_keg {
+ float: left;
+ width: 74.6%;
+ margin-right: 0.8%;
+ background: #eee;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_name_3Lz {
+ font-size: 20px;
+ white-space: nowrap;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_name_small_1VU {
+ font-size: 16px;
+ height: 28px;
+ line-height: 28px;
+ white-space: nowrap;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_time_w5m {
+ font-size: 12px;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI {
+ width: 24.4%;
+ float: left;
+ margin-right: 0.8%;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI .marker_indexname_3TP {
+ height: 20px;
+ line-height: 20px;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI .marker_indexvalue_1O7 {
+ height: 24px;
+ font-size: 16px;
+ line-height: 24px;
+ color: #666;
+ background: #eee;
+}
+
+.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI:last-child {
+ margin-right: 0;
+}
+
+.marker_maptip .marker_secondline_2Om {
+ width: 100%;
+ height: 44px;
+ margin-bottom: 8px;
+}
+
+.marker_maptip .marker_secondline_2Om .marker_item_2Kk {
+ width: 16%;
+ height: 44px;
+ float: left;
+ text-align: center;
+ margin-right: 0.8%;
+}
+
+.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemname_Wq5 {
+ height: 20px;
+ line-height: 20px;
+}
+
+.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemvalue_1l1 {
+ height: 24px;
+ font-size: 15px;
+ line-height: 24px;
+ color: #666;
+ background: #eee;
+ text-align: center;
+}
+
+.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemvalue_1l1 .marker_redpoint_2aL {
+ width: 4px;
+ height: 4px;
+ padding: 3px;
+ border-radius: 50%;
+ background: red;
+ margin: -5px auto 0;
+}
+
+.marker_maptip .marker_secondline_2Om .marker_item_2Kk:last-child {
+ margin-right: 0;
+}
+
+.marker_maptip .marker_thirdline_1q_ {
+ border: 0;
+ color: #999;
+ width: 100%;
+ margin-bottom: 8px;
+}
+
+.marker_maptip .marker_thirdline_1q_ .marker_tablename_XLo {
+ text-align: left;
+ width: 12%;
+}
+
+.marker_maptip .marker_thirdline_1q_ .marker_tablevalue_23Q {
+ text-align: left;
+ width: 18.333%;
+ white-space: nowrap;
+}
+
+.marker_maptip .marker_fourthline_27d {
+ height: 120px;
+ width: 100%;
+}
+
+.marker_maptip .windBox {
+ display: flex;
+ justify-content: space-between;
+}
+
+.marker_maptip .windBox .windInfor {
+ width: 50%;
+ color: #999;
+ font-size: 17px;
+ padding-top: 15px;
+ padding-left: 30px;
+}
+
+.marker_maptip .windBox .windInfor div {
+ margin-top: 10px;
+}
+
+.marker_maptip .windBox .windIcon {
+ text-align: center;
+ font-size: 15px;
+ width: 50%;
+ color: #999;
+}
\ No newline at end of file
--
Gitblit v1.8.0