From a19b20afeacf84c1c743c76b5018bcfbddac2270 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 15 Nov 2024 09:10:12 +0800
Subject: [PATCH] fix: 国控站
---
src/components/Wind/Map.vue | 262 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 236 insertions(+), 26 deletions(-)
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index d3a2760..e0c8fcb 100644
--- a/src/components/Wind/Map.vue
+++ b/src/components/Wind/Map.vue
@@ -28,7 +28,20 @@
alt=""
@click="turnState"
>
- <span class="text_Time">{{ dateFormat }}</span>
+ <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"
@@ -396,6 +409,11 @@
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'],
@@ -432,7 +450,7 @@
// ������������������������������������������(���������������������������)
totalCount: 0,
// ������������������������������
- pageSizes: [10, 20, 30, 40],
+ pageSizes: [10, 50, 100, 200],
// ������������������������������������������
PageSize: 20,
factorOptions: [
@@ -507,6 +525,7 @@
turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
showOrHidden: true,
dateFormat: '',
+ selectData: new Date(),
alarmTableVisible: false,
chooseTimeInfo: false, // ������������������������
chooseTime: false,
@@ -517,7 +536,8 @@
clickmac: '',
childerItem: {},
farterItem: {},
- indexsLaber: 0
+ indexsLaber: 0,
+ time: new Date()
}
},
computed: {
@@ -580,10 +600,10 @@
methods: {
// ������������������������������
getDayXQ (day) {
- var days = new Date().getDay() // ������
+ var days = new Date().getDay() // ������ // ������
var rq = '' // ������
if (day === 'today') {
- rq = this.newData(0)
+ rq = this.newData(0) // ������������
} else if (day === 'yesterday') {
days = (days + 7 - 1) % 7
rq = this.newData(-1) // ������������
@@ -672,6 +692,7 @@
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) {
@@ -705,6 +726,7 @@
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) {
@@ -832,14 +854,13 @@
}
}).then(data => {
this.markDeviceSite(data)
+ this.stateControlStation()// ���������������������
})
},
// ���������������
markDeviceSite (data) {
var keyData = data.data.devices
this.keyData = data.data.devices
- // ���������������������
- // this.stateControlStation()
var groupIcon = L.layerGroup().addTo(this.map)
var groupText = L.layerGroup().addTo(this.map)
this.keys = []
@@ -1429,6 +1450,10 @@
bgColorList.tvoccolorbg = '#999999'
break
}
+ case data === '-': {
+ bgColorList.tvoccolorbg = '#999999'
+ break
+ }
case data === 0: {
bgColorList.tvoccolorbg = '#688fb1'
break
@@ -1968,6 +1993,22 @@
// })
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
@@ -2170,17 +2211,14 @@
stateControlStation () {
// this.$axios.get('monitorPoint/queryStateControlStation', {
this.$request({
- url: '/govMonitorPoint/queryStateControlStation',
- method: 'get',
- params: {
- regionCode: 130900,
- sensorCode: 'a34002'
- }
+ url: '/govMonitorPoint/getGovMonitorPoints',
+ method: 'get'
})
.then(res => {
- // console.log('���������������')
- // console.log(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
@@ -2188,23 +2226,170 @@
var gIcon = L.icon({
iconUrl: require('@/assets/icon/gk.png'),
// iconUrl:require('@/assets/images/tl_PM10.png'),
- iconSize: [55, 55],
- iconAnchor: [13, 21],
+ iconSize: [60, 60],
+ iconAnchor: [30, 48],
className: 'my-device'
})
// ���������������������
- L.marker([glat, glng], {
+ let marker = L.marker([glat, glng], {
icon: gIcon
}).addTo(group)
- var myIcon = L.divIcon({
- html: gkData[i].data,
- className: 'my-div-icon-g',
- iconSize: 30
+ marker.inforData = gkData[i]
+ marker.on('click', function (e) {
+ console.log('Marker clicked!', e.target)
+ _this.handleguoClick(gkData[i], e.target)
})
- L.marker([glat, glng], {
- icon: myIcon
- }).addTo(group)
+ // 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
+ deviceDetails.a99054 = '-'
+ // eslint-disable-next-line no-unused-vars
+ for (let key in deviceDetails) {
+ if (deviceDetails[key] === null) {
+ deviceDetails[key] = '-'
+ }
+ }
+ console.log('deviceDetails', deviceDetails)
+ 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">${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">
+ ${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)
@@ -2437,11 +2622,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