From f3a8b27eb23c940dcd67bd459b76b0457fcb8b46 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 13 Jun 2024 13:29:49 +0800
Subject: [PATCH] fix: 样式修改
---
src/components/Wind/Map.vue | 614 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 394 insertions(+), 220 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 218f1e7..f66f6b1 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -5,7 +5,12 @@
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"
@@ -13,8 +18,7 @@
class="left"
:class="{ click: changeColor === index }"
@click="change(index)"
- >{{ item }}</span
- >
+ >{{ item }}</span>
<!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
<span class="right">{{ times }}���</span>
<span class="dropDown">
@@ -23,13 +27,36 @@
:src="require('@/assets/images/regionalOverview/realTimeImg.png')"
alt=""
@click="turnState"
- />
- <span class="text_Time">{{ dateFormat }}</span>
- <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />
+ >
+ <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"
+ 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="topDate"
+ style="height: 60px"
+ >
+ <div
+ id="eventPro"
+ class="jdt"
+ >
<div class="mouseDiv">
<span class="inText" />
<div class="sjDiv" />
@@ -111,7 +138,10 @@
<li />
<li />
</div>
- <div class="timeDiv" style="position: relative">
+ <div
+ class="timeDiv"
+ style="position: relative"
+ >
<ul id="timeUl">
<li style="width: 0.83%" />
<li />
@@ -225,7 +255,11 @@
</div>
</div>
</div>
- <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
+ <regional-overview
+ :key="timerKey"
+ :map="map"
+ :show-flag="showOrHidden"
+ />
<div
:style="{ background: 'url(' + bg + ') no-repeat' }"
class="buttom-left"
@@ -248,7 +282,10 @@
end-placeholder="������������"
value-format="yyyy-MM-dd"
/>
- <el-select v-model="factorValue" placeholder="������������">
+ <el-select
+ v-model="factorValue"
+ placeholder="������������"
+ >
<el-option
v-for="item in factorOptions"
:key="item.value"
@@ -256,7 +293,10 @@
:value="item.value"
/>
</el-select>
- <el-select v-model="alartValue" placeholder="������������������">
+ <el-select
+ v-model="alartValue"
+ placeholder="������������������"
+ >
<el-option
v-for="item in alertOptions"
:key="item.value"
@@ -264,7 +304,10 @@
:value="item.value"
/>
</el-select>
- <el-button type="primary" @click="alertData(PageSize, currentPage)">
+ <el-button
+ type="primary"
+ @click="alertData(PageSize, currentPage)"
+ >
������
</el-button>
</div>
@@ -284,8 +327,16 @@
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="alarm_time"
+ label="������������"
+ width="150"
+ />
+ <el-table-column
+ property="deviceName"
+ label="������������"
+ width="200"
+ />
<el-table-column
property="index"
label="������"
@@ -313,8 +364,14 @@
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
- <div slot="footer" class="dialog-footer">
- <el-button size="mini" @click="alarmTableVisible = false">
+ <div
+ slot="footer"
+ class="dialog-footer"
+ >
+ <el-button
+ size="mini"
+ @click="alarmTableVisible = false"
+ >
��� ���
</el-button>
</div>
@@ -333,7 +390,7 @@
import { WWindUtil } from '@/components/Wind/WRatingArr.js'
import RegionalOverview from '@/components/Wind/RegionalOverview' // ������������������
import { mapGetters } from 'vuex'
-import { gcj02towgs84 } from '@/assets/json/transform'
+// import { gcj02towgs84 } from '@/assets/json/transform'
export default {
components: { RegionalOverview },
props: {
@@ -342,7 +399,7 @@
jingdu: Number,
monitorPointId: Number,
monitorPointIds: Array,
- defaultData: Array,
+ defaultData: Array
},
data () {
return {
@@ -387,81 +444,82 @@
// ������������������������������������������(���������������������������)
totalCount: 0,
// ������������������������������
- pageSizes: [10, 20, 30, 40],
+ pageSizes: [10, 50, 100, 200],
// ������������������������������������������
PageSize: 20,
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'),
showOrHidden: true,
dateFormat: '',
+ selectData: new Date(),
alarmTableVisible: false,
chooseTimeInfo: false, // ������������������������
chooseTime: false,
@@ -476,7 +534,7 @@
}
},
computed: {
- ...mapGetters(['regionCode']),
+ ...mapGetters(['regionCode'])
},
watch: {
dateValue (n, o) {
@@ -489,13 +547,14 @@
this.$nextTick(() => {
this.canvasWind(newCode)
})
- },
+ }
},
mounted () {
this.currentHour()
this.$Bus.$on(
'alarmTableVisible',
- (res) => (
+ res => (
+ // eslint-disable-next-line no-sequences
(this.alarmTableVisible = res),
this.alertData(this.PageSize, this.currentPage)
)
@@ -508,6 +567,9 @@
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]
@@ -531,8 +593,7 @@
methods: {
// ������������������������������
getDayXQ (day) {
- var days = new Date()
- .getDay() // ������
+ var days = new Date().getDay() // ������
var rq = '' // ������
if (day === 'today') {
rq = this.newData(0)
@@ -603,7 +664,7 @@
p1.innerHTML = this.getDayXQ('beforeYea')
var greenInfo = 0
var that = this
- ul.onclick = (e) => {
+ ul.onclick = e => {
var target = e.target
if (target.tagName.toLowerCase() === 'li') {
// ������������li���������������������
@@ -641,7 +702,7 @@
that.getParamsData(true)
}
// timeUl������������������
- timeUl.onclick = (e) => {
+ timeUl.onclick = e => {
// ������������li���������������������
var target = e.target
if (target.tagName.toLowerCase() === 'li') {
@@ -676,7 +737,6 @@
lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
}
}
-
}
that.times = 1
that.getParamsData(true)
@@ -766,9 +826,8 @@
// ���������������������������
if (
!layer._container &&
- ('' + $(layer._container)
- .attr('class')).replace(/\s/g, '') !==
- 'leaflet-layer'
+ ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ 'leaflet-layer'
) {
layer.remove()
}
@@ -782,12 +841,11 @@
organizationId: this.$store.state.orgId,
regionCode: this.$store.state.regionCode,
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
+ }).then(data => {
+ this.markDeviceSite(data)
})
- .then((data) => {
- this.markDeviceSite(data)
- })
},
// ���������������
markDeviceSite (data) {
@@ -795,10 +853,8 @@
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) {
@@ -808,16 +864,13 @@
} 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'))
@@ -830,7 +883,7 @@
// ������������key������������������������������������������������
var colorNum = 7
if (keyData[i].a34002) {
- var data = Math.floor(JSON.parse(keyData[i].a34002))
+ let data = Math.floor(JSON.parse(keyData[i].a34002))
switch (true) {
case data < 0: {
colorNum = 7
@@ -868,7 +921,7 @@
break
}
} else if (keyData[i].a34004) {
- var data = Math.floor(JSON.parse(keyData[i].a34004))
+ let data = Math.floor(JSON.parse(keyData[i].a34004))
switch (true) {
case data < 0: {
colorNum = 7
@@ -906,7 +959,7 @@
break
}
} else if (keyData[i].a21026) {
- var data = Math.floor(JSON.parse(keyData[i].a21026))
+ let data = Math.floor(JSON.parse(keyData[i].a21026))
switch (true) {
case data < 0: {
colorNum = 7
@@ -944,9 +997,8 @@
break
}
} else if (keyData[i].a21004) {
- var data = Math.floor(
- Math.floor(JSON.parse(keyData[i].a21004)
- .toFixed(0))
+ let data = Math.floor(
+ Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
)
switch (true) {
case data < 0: {
@@ -985,8 +1037,7 @@
break
}
} else if (keyData[i].a21005) {
- var data = JSON.parse(keyData[i].a21005)
- .toFixed(3)
+ let data = JSON.parse(keyData[i].a21005).toFixed(3)
switch (true) {
case data < 0: {
colorNum = 7
@@ -1024,7 +1075,7 @@
break
}
} else if (keyData[i].a05024) {
- var data = Math.floor(JSON.parse(keyData[i].a05024))
+ let data = Math.floor(JSON.parse(keyData[i].a05024))
switch (true) {
case data < 0: {
colorNum = 7
@@ -1062,8 +1113,7 @@
break
}
} else if (keyData[i].a99054) {
- var data = JSON.parse(keyData[i].a99054)
- .toFixed(3)
+ let data = JSON.parse(keyData[i].a99054).toFixed(3)
switch (true) {
case data < 0: {
colorNum = 7
@@ -1107,19 +1157,19 @@
// 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)
var myIcon = L.divIcon({
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 })
@@ -1145,17 +1195,18 @@
let bgColorList = {
pm25colorbg: '',
pm10colorbg: '',
- so2colorbg: '', //������������
- no210colorbg: '', //������������
- cocolorbg: '', //������������
- o3colorbg: '', //������
- tvoccolorbg: '', //TVOC
+ 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))
+ data = Math.floor(JSON.parse(keyName.a34002) || 0)
switch (true) {
case data < 0: {
bgColorList.pm10colorbg = '#999999'
@@ -1193,7 +1244,7 @@
break
}
} else if (i === 'a34004') {
- data = Math.floor(JSON.parse(keyName.a34004))
+ data = Math.floor(JSON.parse(keyName.a34004) || 0)
switch (true) {
case data < 0: {
bgColorList.pm25colorbg = '#999999'
@@ -1231,7 +1282,7 @@
break
}
} else if (i === 'a21026') {
- data = Math.floor(JSON.parse(keyName.a21026))
+ data = Math.floor(JSON.parse(keyName.a21026) || 0)
switch (true) {
case data < 0: {
bgColorList.so2colorbg = '#999999'
@@ -1269,8 +1320,9 @@
break
}
} else if (i === 'a21004') {
- data = Math.floor(Math.floor(JSON.parse(keyName.a21004)
- .toFixed(0)))
+ data = Math.floor(
+ Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))
+ )
switch (true) {
case data < 0: {
bgColorList.no210colorbg = '#999999'
@@ -1308,8 +1360,7 @@
break
}
} else if (i === 'a21005') {
- data = JSON.parse(keyName.a21005)
- .toFixed(3)
+ data = JSON.parse(keyName.a21005 || 0).toFixed(3)
switch (true) {
case data < 0: {
bgColorList.cocolorbg = '#999999'
@@ -1347,7 +1398,7 @@
break
}
} else if (i === 'a05024') {
- data = Math.floor(JSON.parse(keyName.a05024))
+ data = Math.floor(JSON.parse(keyName.a05024) || 0)
switch (true) {
case data < 0: {
bgColorList.o3colorbg = '#999999'
@@ -1385,8 +1436,7 @@
break
}
} else if (i === 'a99054') {
- data = JSON.parse(keyName.a99054)
- .toFixed(3)
+ data = JSON.parse(keyName.a99054 || 0).toFixed(3)
switch (true) {
case data < 0: {
bgColorList.tvoccolorbg = '#999999'
@@ -1457,13 +1507,16 @@
this.indexsLaber = 0
this.clickmac = marker.inforData.mac
this.childerItem = marker.inforData
+ console.log('this.defaultData', this.defaultData)
this.defaultData.forEach(item => {
- item.devices.forEach((dev, index) => {
- if (dev.mac === marker.inforData.mac) {
- this.farterItem = item
- this.indexsLaber = index
- }
- })
+ 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',
@@ -1471,53 +1524,58 @@
params: {
mac: data.mac,
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
})
- .then((res) => {
+ .then(res => {
if (res.message === '���������������������') {
var datafalse = '���������������������'
- marker.bindPopup(datafalse)
- .openPopup()
+ marker.bindPopup(datafalse).openPopup()
return
}
this.childerItem.name = res.data.name
let colorliststyleBgColor = this.styleBgColor(res.data)
console.log('colorliststyleBgColor', colorliststyleBgColor)
- let deviceDetails = res.data
+ 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
+ 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 = Number(
- deviceDetails.a01008.substr(0, deviceDetails.a01008.length - 1)
- )
- // console.log(windDirs)
+ var windDirs = dushu === '-' ? 0 : Number(dushu)
+ WWindUtil.windValueFormat(windDirs)
+ console.log('windDirs', WWindUtil.windValueFormat(windDirs))
windDeg = windDirs
+ windTip = 'inline'
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 = '���������'
+ 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>
@@ -1530,8 +1588,9 @@
<div class="marker_indexpart_2UI">
<div
class="marker_indexname_3TP"
- style="color: black;background:${colorliststyleBgColor.tvoccolorbg
- }"
+ style="color: black;background:${
+ colorliststyleBgColor.tvoccolorbg
+}"
>
TVOC
</div>
@@ -1544,8 +1603,9 @@
<div class="marker_item_2Kk">
<div
class="marker_itemname_Wq5"
- style="color: black;background:${colorliststyleBgColor.pm25colorbg
- } "
+ style="color: black;background:${
+ colorliststyleBgColor.pm25colorbg
+} "
>
PM2.5
</div>
@@ -1556,8 +1616,9 @@
<div class="marker_item_2Kk">
<div
class="marker_itemname_Wq5"
- style="color: black;background:${colorliststyleBgColor.pm10colorbg
- }"
+ style="color: black;background:${
+ colorliststyleBgColor.pm10colorbg
+}"
>
PM10
</div>
@@ -1568,8 +1629,9 @@
<div class="marker_item_2Kk">
<div
class="marker_itemname_Wq5"
- style="color: black;background:${colorliststyleBgColor.so2colorbg
- }"
+ style="color: black;background:${
+ colorliststyleBgColor.so2colorbg
+}"
>
SO2
</div>
@@ -1580,8 +1642,9 @@
<div class="marker_item_2Kk">
<div
class="marker_itemname_Wq5"
- style="color: black;background:${colorliststyleBgColor.no210colorbg
- }"
+ style="color: black;background:${
+ colorliststyleBgColor.no210colorbg
+}"
>
NO2
</div>
@@ -1592,8 +1655,7 @@
<div class="marker_item_2Kk">
<div
class="marker_itemname_Wq5"
- style="color: black;background:${colorliststyleBgColor.cocolorbg
- }"
+ style="color: black;background:${colorliststyleBgColor.cocolorbg}"
>
CO
</div>
@@ -1604,8 +1666,7 @@
<div class="marker_item_2Kk">
<div
class="marker_itemname_Wq5"
- style="color: black; background:${colorliststyleBgColor.o3colorbg
- }"
+ style="color: black; background:${colorliststyleBgColor.o3colorbg}"
>
O3
</div>
@@ -1617,52 +1678,143 @@
<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)"
+ <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>������: ${windDir} (${dushu}���)</div>
- <div>������: ${levelNumber}m/s</div>
+ <div v-if="false">������: ${windDir} ( ${dushu} �� )</div>
+ <div>������: ${levelNumber} m/s</div>
<div>������: ${level}</div>
</div>
</div>
</div>`
- marker.bindPopup(html, { className: 'mypopup' })
- .openPopup()
+ 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) => {
+ .catch(err => {
console.log(err)
})
},
handleCutZero (data) {
-
- let num = data.substring(0, data.indexOf(".") + 4);
- //������������ ������������������������
+ let num = data.substring(0, data.indexOf('.') + 4)
+ // ������������ ������������������������
// let num = Number(data).toFixed(3).toString()
let newstr = num
- //������������ ������������������
+ // ������������ ������������������
let leng = num.length - num.indexOf('.') - 1
- //���������������������
+ // ���������������������
if (num.indexOf('.') > -1) {
- //������������������
+ // ������������������
for (let i = leng; i > 0; i--) {
- //������newstr���������0
+ // ������newstr���������0
if (
newstr.lastIndexOf('0') > -1 &&
newstr.substr(newstr.length - 1, 1) === 0
) {
let k = newstr.lastIndexOf('0')
- //������������������������������0 ���������������
+ // ������������������������������0 ���������������
if (newstr.charAt(k - 1) === '.') {
return newstr.substring(0, k - 1)
} else {
- //������ ������������0
+ // ������ ������������0
newstr = newstr.substring(0, k)
}
} else {
- //������������������0
+ // ������������������0
return newstr
}
}
@@ -1676,27 +1828,25 @@
params: {
mac: data.mac,
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
})
- .then((res) => {
+ .then(res => {
if (res.message === '���������������������') {
var datafalse = '���������������������'
- this.bindPopup(datafalse)
- .openPopup()
+ 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]
+ 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) +
+ Number(res.data[key].split(' ')[0]).toFixed(2) +
res.data[key].split(' ')[1]
}
}
@@ -1705,10 +1855,9 @@
.replace(/,/g, `<br>`)
.replace(/{|}|"/g, '')
console.log(data)
- marker.bindPopup(data)
- .openPopup()
+ marker.bindPopup(data).openPopup()
})
- .catch((err) => {
+ .catch(err => {
console.log(err)
})
return data
@@ -1724,9 +1873,8 @@
// ���������������������������
if (
!layer._container &&
- ('' + $(layer._container)
- .attr('class')).replace(/\s/g, '') !==
- 'leaflet-layer'
+ ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ 'leaflet-layer'
) {
layer.remove()
}
@@ -1742,7 +1890,7 @@
$.getJSON(
'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',
{ monitorPointId: this.$store.state.monitorPointId },
- (data) => {
+ data => {
this.map.setView([data[2], data[1]], 12)
// console.log('������������')
}
@@ -1794,6 +1942,7 @@
}
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]
@@ -1812,13 +1961,12 @@
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) {
@@ -1832,6 +1980,11 @@
// that.canvasWind(this.windJsonData)
// })
window.map = map
+ },
+ changeData (val) {
+ this.nyr = val + ':00'
+ this.chooseTime = true
+ this.initData()
},
// ������������������������
change (index) {
@@ -1884,9 +2037,8 @@
// ���������������������������
if (
!layer._container &&
- ('' + $(layer._container)
- .attr('class')).replace(/\s/g, '') !==
- 'leaflet-layer'
+ ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
+ 'leaflet-layer'
) {
layer.remove()
}
@@ -1903,14 +2055,14 @@
params: {
monitorPointIds: this.monitorPointIds.toString(),
chooseTime: this.chooseTime,
- time: this.nyr,
- },
+ time: this.nyr
+ }
})
- .then((res) => {
+ .then(res => {
this.windJsonData = res.data[0]
return this.windJsonData
})
- .catch((err) => {
+ .catch(err => {
console.log(err)
})
},
@@ -1927,7 +2079,7 @@
// velocityType: 'Global Wind',
velocityType: 'GBR Wind',
displayPosition: 'bottomleft',
- displayEmptyString: 'No wind data',
+ displayEmptyString: 'No wind data'
},
data: data, // ������ ���������������
// data: data2,
@@ -1947,8 +2099,8 @@
'#345B1B',
'#186303',
'#175103',
- '#053F03',
- ],
+ '#053F03'
+ ]
// colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
})
velocityLayer.addTo(this.map) // ���������������
@@ -1971,22 +2123,21 @@
startTime: this.dateValue[0],
endTime: this.dateValue[1],
index: this.factorValue,
- alarmType: this.alartValue,
- },
+ alarmType: this.alartValue
+ }
+ }).then(res => {
+ // console.log('������������')
+ // console.log(res)
+ var tempData = res.data
+ // console.log(tempData)
+ for (let i = 0; i < tempData.alarmInfos.length; i++) {
+ tempData.alarmInfos[i].alarmInfoId = i + 1
+ }
+ // ������������������tableData
+ this.gridData = tempData.alarmInfos
+ // ���������������������������totalCount
+ this.totalCount = tempData.alarmInfos.length
})
- .then((res) => {
- // console.log('������������')
- // console.log(res)
- var tempData = res.data
- // console.log(tempData)
- for (let i = 0; i < tempData.alarmInfos.length; i++) {
- tempData.alarmInfos[i].alarmInfoId = i + 1
- }
- // ������������������tableData
- this.gridData = tempData.alarmInfos
- // ���������������������������totalCount
- this.totalCount = tempData.alarmInfos.length
- })
},
// ������
// ���������������������
@@ -2004,6 +2155,7 @@
},
// ���������������
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
@@ -2040,15 +2192,14 @@
method: 'get',
params: {
regionCode: 130900,
- sensorCode: 'a34002',
- },
+ sensorCode: 'a34002'
+ }
})
- .then((res) => {
+ .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
@@ -2057,25 +2208,23 @@
// 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) => {
+ .catch(err => {
console.log(err)
})
},
@@ -2098,8 +2247,8 @@
},
closeAlarmTableVisible () {
this.$store.state.alarmTableVisible = false
- },
- },
+ }
+ }
}
</script>
@@ -2306,11 +2455,36 @@
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;
--
Gitblit v1.8.0