| | |
|---|
| | | 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"
|
|---|
| | |
|---|
| | | 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"
|
|---|
| | | :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="topDate"
|
|---|
| | | style="height: 60px"
|
|---|
| | | >
|
|---|
| | | <div
|
|---|
| | | id="eventPro"
|
|---|
| | | class="jdt"
|
|---|
| | | >
|
|---|
| | | <div class="mouseDiv">
|
|---|
| | | <span class="inText" />
|
|---|
| | | <div class="sjDiv" />
|
|---|
| | |
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | </div>
|
|---|
| | | <div class="timeDiv" style="position: relative">
|
|---|
| | | <div
|
|---|
| | | class="timeDiv"
|
|---|
| | | style="position: relative"
|
|---|
| | | >
|
|---|
| | | <ul id="timeUl">
|
|---|
| | | <li style="width: 0.83%" />
|
|---|
| | | <li />
|
|---|
| | |
|---|
| | | </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"
|
|---|
| | |
|---|
| | | 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"
|
|---|
| | |
|---|
| | | :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"
|
|---|
| | |
|---|
| | | <el-button
|
|---|
| | | type="primary"
|
|---|
| | | @click="alertData(PageSize, currentPage)"
|
|---|
| | | >查询</el-button>
|
|---|
| | | >
|
|---|
| | | 查询
|
|---|
| | | </el-button>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <el-table
|
|---|
| | |
|---|
| | | 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="因子"
|
|---|
| | |
|---|
| | | @size-change="handleSizeChange"
|
|---|
| | | @current-change="handleCurrentChange"
|
|---|
| | | />
|
|---|
| | | <div slot="footer" class="dialog-footer">
|
|---|
| | | <div
|
|---|
| | | slot="footer"
|
|---|
| | | class="dialog-footer"
|
|---|
| | | >
|
|---|
| | | <el-button
|
|---|
| | | size="mini"
|
|---|
| | | @click="alarmTableVisible = false"
|
|---|
| | | >关 闭</el-button>
|
|---|
| | | >
|
|---|
| | | 关 闭
|
|---|
| | | </el-button>
|
|---|
| | | </div>
|
|---|
| | | </el-dialog>
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | import 'leaflet/dist/leaflet.css'
|
|---|
| | | import 'leaflet-velocity/dist/leaflet-velocity.css'
|
|---|
| | | import L from 'leaflet'
|
|---|
| | | import 'wind-js-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'
|
|---|
| | | // import { gcj02towgs84 } from '@/assets/json/transform'
|
|---|
| | | export default {
|
|---|
| | | components: { RegionalOverview },
|
|---|
| | | props: {
|
|---|
| | |
|---|
| | | weidu: Number,
|
|---|
| | | jingdu: Number,
|
|---|
| | | monitorPointId: Number,
|
|---|
| | | monitorPointIds: Array
|
|---|
| | | monitorPointIds: Array,
|
|---|
| | | defaultData: Array
|
|---|
| | | },
|
|---|
| | | data() {
|
|---|
| | | 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'],
|
|---|
| | |
|---|
| | | // 总条数，根据接口获取数据长度(注意：这里不能为空)
|
|---|
| | | totalCount: 0,
|
|---|
| | | // 个数选择器（可修改）
|
|---|
| | | pageSizes: [10, 20, 30, 40],
|
|---|
| | | pageSizes: [10, 50, 100, 200],
|
|---|
| | | // 默认每页显示的条数（可修改）
|
|---|
| | | PageSize: 20,
|
|---|
| | | factorOptions: [
|
|---|
| | |
|---|
| | | turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
|
|---|
| | | showOrHidden: true,
|
|---|
| | | dateFormat: '',
|
|---|
| | | selectData: new Date(),
|
|---|
| | | alarmTableVisible: false,
|
|---|
| | | chooseTimeInfo: false, // 是否选择了时间点
|
|---|
| | | chooseTime: false,
|
|---|
| | | dateInfo: '', // 选择的日期
|
|---|
| | | timeInfo: '', // 选择的时间
|
|---|
| | | nyr: '', // 选择的年月日
|
|---|
| | | windALLData: []
|
|---|
| | | windJsonData: [],
|
|---|
| | | clickmac: '',
|
|---|
| | | childerItem: {},
|
|---|
| | | farterItem: {},
|
|---|
| | | indexsLaber: 0,
|
|---|
| | | time: new Date()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | ...mapGetters(['regionCode'])
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | dateValue(n, o) {
|
|---|
| | | // console.log(n)
|
|---|
| | | dateValue (n, o) {
|
|---|
| | | // this.newDate()
|
|---|
| | | },
|
|---|
| | | regionCode(newCode, oldCode) {
|
|---|
| | | regionCode (newCode, oldCode) {
|
|---|
| | | this.timerKey = newCode // 用于监听code变化重新渲染子组件
|
|---|
| | | },
|
|---|
| | | windJsonData (newCode, oldCode) {
|
|---|
| | | this.$nextTick(() => {
|
|---|
| | | this.canvasWind(newCode)
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | mounted () {
|
|---|
| | | this.currentHour()
|
|---|
| | | this.$Bus.$on(
|
|---|
| | | 'alarmTableVisible',
|
|---|
| | | (res) => (
|
|---|
| | | res => (
|
|---|
| | | // eslint-disable-next-line no-sequences
|
|---|
| | | (this.alarmTableVisible = res),
|
|---|
| | | this.alertData(this.PageSize, this.currentPage)
|
|---|
| | | )
|
|---|
| | |
|---|
| | |
|
|---|
| | | // 事件代理
|
|---|
| | | this.eventProxy()
|
|---|
| | | window.deviceDetail = this.deviceDetail
|
|---|
| | | },
|
|---|
| | | created() {
|
|---|
| | | 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.initData()
|
|---|
| | | // this.change(0)
|
|---|
| | | this.windData()
|
|---|
| | | this.getParamsData()
|
|---|
| | | // this.deviceMaker()
|
|---|
| | | this.getParamsData(false)
|
|---|
| | | // this.windDir()
|
|---|
| | | this.newDate()
|
|---|
| | |
|
|---|
| | | // this.alertData(this.PageSize, this.currentPage)
|
|---|
| | | },
|
|---|
| | | beforeDestroy() {
|
|---|
| | | beforeDestroy () {
|
|---|
| | | if (this.timer) {
|
|---|
| | | clearInterval(this.timer)
|
|---|
| | | // console.log('timer定时器销毁成功')
|
|---|
| | | }
|
|---|
| | | if (this.timer2) {
|
|---|
| | | // console.log(this.timer2)
|
|---|
| | | clearInterval(this.timer2)
|
|---|
| | | // console.log('timer2定时器销毁成功')
|
|---|
| | | }
|
|---|
| | | // 离开页面时关闭websocket
|
|---|
| | | if (this.ws) {
|
|---|
| | | // console.log('WS关闭')
|
|---|
| | | this.ws.close()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | methods: {
|
|---|
| | | // 拿到某天的日期和星期
|
|---|
| | | getDayXQ(day) {
|
|---|
| | | var days = new Date().getDay() // 星期
|
|---|
| | | getDayXQ (day) {
|
|---|
| | | 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) // 昨天日期
|
|---|
| | |
|---|
| | | return `${rq}(${days})`
|
|---|
| | | },
|
|---|
| | | // 计算当天之前或者之后的日期
|
|---|
| | | newData(day, info) {
|
|---|
| | | newData (day, info) {
|
|---|
| | | var today = new Date()
|
|---|
| | | var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
|
|---|
| | | today.setTime(targetday_milliseconds)
|
|---|
| | |
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 事件代理
|
|---|
| | | eventProxy() {
|
|---|
| | | eventProxy () {
|
|---|
| | | // 拿到今天的日期和星期
|
|---|
| | | var ul = document.querySelector('#eventPro')
|
|---|
| | | var lis = document.querySelectorAll('#eventPro>li')
|
|---|
| | |
|---|
| | | 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颜色设为初始值
|
|---|
| | |
|---|
| | | 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'
|
|---|
| | | console.log(111, this.nyr)
|
|---|
| | | } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
|
|---|
| | | this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
|
|---|
| | | console.log(222, this.nyr)
|
|---|
| | | } else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {
|
|---|
| | | this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
|
|---|
| | | console.log(333, this.nyr)
|
|---|
| | | } else {
|
|---|
| | | this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
|
|---|
| | | console.log(444, this.nyr)
|
|---|
| | | }
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | that.times = 1
|
|---|
| | | that.getParamsData()
|
|---|
| | | that.getParamsData(true)
|
|---|
| | | }
|
|---|
| | | // timeUl绑定点击事件
|
|---|
| | | timeUl.onclick = (e) => {
|
|---|
| | | timeUl.onclick = e => {
|
|---|
| | | // 给所有的li颜色设为初始值
|
|---|
| | | var target = e.target
|
|---|
| | | if (target.tagName.toLowerCase() === 'li') {
|
|---|
| | |
|---|
| | | 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'
|
|---|
| | | console.log(111, this.nyr)
|
|---|
| | | } else if (i / 24 < 2 && i / 24 >= 1) {
|
|---|
| | | this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'
|
|---|
| | | console.log(222, this.nyr)
|
|---|
| | | } else if (i / 24 < 3 && i / 24 >= 2) {
|
|---|
| | | this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'
|
|---|
| | | console.log(333, this.nyr)
|
|---|
| | | } else {
|
|---|
| | | this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'
|
|---|
| | | console.log(444, this.nyr)
|
|---|
| | | }
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | |
|---|
| | | lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | // console.log('下边点击进来了', greenInfo, 'index')
|
|---|
| | | }
|
|---|
| | | that.times = 1
|
|---|
| | | that.getParamsData()
|
|---|
| | | that.getParamsData(true)
|
|---|
| | | }
|
|---|
| | | // 鼠标移入移出事件
|
|---|
| | | for (let i = 0; i < lis.length; i++) {
|
|---|
| | | lis[i].onmouseenter = function() {
|
|---|
| | | // console.log('mouseenter', i)
|
|---|
| | | // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
|---|
| | | 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'
|
|---|
| | | // 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() {
|
|---|
| | | // console.log('mouseenter', i)
|
|---|
| | | // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
|---|
| | | 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'
|
|---|
| | | // console.log(mouseDiv)
|
|---|
| | | }
|
|---|
| | | timeLis[i].onmouseleave = function() {
|
|---|
| | | timeLis[i].onmouseleave = function () {
|
|---|
| | | mouseDiv.style.display = 'none'
|
|---|
| | | // console.log('移出事件', i)
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 当前小时默认值
|
|---|
| | | currentHour() {
|
|---|
| | | currentHour () {
|
|---|
| | | // const aData = new Date()
|
|---|
| | | // const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1
|
|---|
| | | // const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
|---|
| | | // 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
|
|---|
| | |
|---|
| | | this.dateFormat = currentDate.toString()
|
|---|
| | | },
|
|---|
| | | // 日期格式化
|
|---|
| | | newDate() {
|
|---|
| | | newDate () {
|
|---|
| | | var aData = new Date()
|
|---|
| | | var month =
|
|---|
| | | aData.getMonth() < 9
|
|---|
| | |
|---|
| | | : aData.getMonth() + 1
|
|---|
| | | var date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()
|
|---|
| | | this.currentDate = aData.getFullYear() + '-' + month + '-' + date
|
|---|
| | | // console.log(this.currentDate)
|
|---|
| | | this.dateValue = [this.currentDate, this.currentDate]
|
|---|
| | | },
|
|---|
| | | // 报警弹窗移入
|
|---|
| | | mouseOver() {
|
|---|
| | | mouseOver () {
|
|---|
| | | this.map.scrollWheelZoom.disable()
|
|---|
| | | },
|
|---|
| | | // 报警弹窗移出
|
|---|
| | | mouseLeave() {
|
|---|
| | | mouseLeave () {
|
|---|
| | | this.map.scrollWheelZoom.enable()
|
|---|
| | | },
|
|---|
| | | // 百度经纬度转高德经纬度
|
|---|
| | | bd09togcj02(bd_lon, bd_lat) {
|
|---|
| | | bd09togcj02 (bd_lon, bd_lat) {
|
|---|
| | | var x_pi = (3.14159265358979324 * 3000.0) / 180.0
|
|---|
| | | var x = bd_lon - 0.0065
|
|---|
| | | var y = bd_lat - 0.006
|
|---|
| | |
|---|
| | | return [gg_lat, gg_lng]
|
|---|
| | | },
|
|---|
| | | // 请求设备坐标,当前的
|
|---|
| | | deviceMaker() {
|
|---|
| | | // 遍历所有图层
|
|---|
| | | deviceMaker () {
|
|---|
| | | if (this.map) {
|
|---|
| | | // const res = this.findLayer('wmsid')
|
|---|
| | | // this.map.removeLayer(res)
|
|---|
| | | this.map.eachLayer(function (layer) {
|
|---|
| | | // 卸载之前的风场图层
|
|---|
| | | if (
|
|---|
| | | !layer._container &&
|
|---|
| | | ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
|---|
| | | 'leaflet-layer'
|
|---|
| | | ) {
|
|---|
| | | layer.remove()
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | const that = this
|
|---|
| | | this.$request({
|
|---|
| | | url: '/historyFiveMinutely/queryDeviceAndData',
|
|---|
| | | method: 'get',
|
|---|
| | |
|---|
| | | chooseTime: this.chooseTime,
|
|---|
| | | time: this.nyr
|
|---|
| | | }
|
|---|
| | | }).then((data) => {
|
|---|
| | | // console.log('五分钟设备数据')
|
|---|
| | | console.log(data, 'tata')
|
|---|
| | | that.loading = false
|
|---|
| | | }).then(data => {
|
|---|
| | | this.markDeviceSite(data)
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 标记设备点
|
|---|
| | | markDeviceSite(data) {
|
|---|
| | | markDeviceSite (data) {
|
|---|
| | | var keyData = data.data.devices
|
|---|
| | | this.keyData = data.data.devices
|
|---|
| | | // 遍历国控站位置
|
|---|
| | | // this.stateControlStation()
|
|---|
| | |
|
|---|
| | | var groupIcon = L.layerGroup().addTo(this.map)
|
|---|
| | | var groupText = L.layerGroup().addTo(this.map)
|
|---|
| | | this.keys = []
|
|---|
| | | var markerList = []
|
|---|
| | | for (let i = 0; i < keyData.length; i++) {
|
|---|
| | | if (keyData[i].a34002) {
|
|---|
| | | this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
|
|---|
| | |
|---|
| | | // 对比各个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
|
|---|
| | |
|---|
| | | 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
|
|---|
| | |
|---|
| | | 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
|
|---|
| | |
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | } else if (keyData[i].a21004) {
|
|---|
| | | var data = Math.floor(
|
|---|
| | | let data = Math.floor(
|
|---|
| | | Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))
|
|---|
| | | )
|
|---|
| | | switch (true) {
|
|---|
| | |
|---|
| | | 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
|
|---|
| | |
|---|
| | | 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
|
|---|
| | |
|---|
| | | 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
|
|---|
| | |
|---|
| | | iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
|
|---|
| | | // iconUrl: require('@/assets/icon/ico2.png'),
|
|---|
| | | iconSize: [60, 60],
|
|---|
| | | iconAnchor: [30, 48],
|
|---|
| | | className: 'my-device'
|
|---|
| | | })
|
|---|
| | |
|
|---|
| | | // 添加标记到地图
|
|---|
| | | const a = L.marker([lat, lng], {
|
|---|
| | | const iconMarker = L.marker([lat, lng], {
|
|---|
| | | icon: blueIcon
|
|---|
| | | })
|
|---|
| | | markerList.push(a)
|
|---|
| | | const bg = `<div style='height:20px;cursor: pointer;'>${this.keys[i]}</div>`
|
|---|
| | | console.log(JSON.parse(this.keys[i]))
|
|---|
| | | groupIcon.addLayer(iconMarker)
|
|---|
| | | var myIcon = L.divIcon({
|
|---|
| | | html: bg,
|
|---|
| | | html: this.keys[i],
|
|---|
| | | className: 'my-div-icon',
|
|---|
| | | iconSize: [50, 20],
|
|---|
| | | iconAnchor: [26, 30]
|
|---|
| | | iconSize: [60, 60],
|
|---|
| | | iconAnchor: [40, 40]
|
|---|
| | | })
|
|---|
| | | var b = L.marker([lat, lng], { icon: myIcon })
|
|---|
| | |
|
|---|
| | | const TexteMarker = L.marker([lat, lng], { icon: myIcon })
|
|---|
| | | TexteMarker.inforData = keyData[i]
|
|---|
| | | groupText.addLayer(TexteMarker)
|
|---|
| | | const _this = this
|
|---|
| | | // 给标记添加鼠标移入事件，mouseover事件会冒泡
|
|---|
| | | var _this = this
|
|---|
| | | b.on('mouseover', function(e) {
|
|---|
| | | console.log('e', e)
|
|---|
| | | TexteMarker.on('click', function (e) {
|
|---|
| | | const MarkerTarget = e.target
|
|---|
| | | // _this.getMarkerInfor(keyData[i], MarkerTarget)
|
|---|
| | | this.noneData = false
|
|---|
| | | _this
|
|---|
| | | .$request({
|
|---|
| | | url: '/historyFiveMinutely/queryPopDataByMac',
|
|---|
| | | method: 'get',
|
|---|
| | | params: {
|
|---|
| | | mac: keyData[i].mac,
|
|---|
| | | chooseTime: _this.chooseTime,
|
|---|
| | | time: _this.nyr
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | if (res.message === '操作目标不存在') {
|
|---|
| | | var datafalse = '暂无五分钟数据'
|
|---|
| | | this.bindPopup(datafalse).openPopup()
|
|---|
| | | return
|
|---|
| | | }
|
|---|
| | | 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 num = res.data[key].split(' ')[0]
|
|---|
| | | // res.data[key] = (num - 0).toFixed(3)
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | var data = JSON.stringify(res.data)
|
|---|
| | | .replace(/,/g, `<br>`)
|
|---|
| | | .replace(/{|}|"/g, '')
|
|---|
| | | this.bindPopup(data).togglePopup()
|
|---|
| | | })
|
|---|
| | | .catch((err) => {
|
|---|
| | | console.log(err)
|
|---|
| | | })
|
|---|
| | | // const _this = e.target.vuecontext
|
|---|
| | | _this.handleClick(keyData[i], MarkerTarget)
|
|---|
| | | })
|
|---|
| | | // 给标记点添加鼠标移出事件
|
|---|
| | | b.on('mouseout', function(e) {
|
|---|
| | | this.noneData = false
|
|---|
| | | this.bindPopup().togglePopup()
|
|---|
| | | })
|
|---|
| | | markerList.push(b)
|
|---|
| | | // TexteMarker.on('mouseout', function(e) {
|
|---|
| | | // this.noneData = false
|
|---|
| | | // this.bindPopup().closePopup()
|
|---|
| | | // })
|
|---|
| | | }
|
|---|
| | | L.layerGroup(markerList).addTo(this.map)
|
|---|
| | | },
|
|---|
| | | // 给标记点添加移入移出事件
|
|---|
| | | // moveInAndOut() {
|
|---|
| | | //
|
|---|
| | | // },
|
|---|
| | | // 国控站经纬度
|
|---|
| | | stateControlStation() {
|
|---|
| | | // this.$axios.get('monitorPoint/queryStateControlStation', {
|
|---|
| | | this.$request({
|
|---|
| | | url: '/govMonitorPoint/queryStateControlStation',
|
|---|
| | | method: 'get',
|
|---|
| | | 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 === 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: {
|
|---|
| | | regionCode: 130900,
|
|---|
| | | sensorCode: 'a34002'
|
|---|
| | | 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]
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | // console.log('国控站信息')
|
|---|
| | | // console.log(res)
|
|---|
| | | var gkData = res.data
|
|---|
| | | 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: [55, 55],
|
|---|
| | | iconAnchor: [13, 21],
|
|---|
| | | className: 'my-device'
|
|---|
| | | })
|
|---|
| | | // 添加标记到地图
|
|---|
| | | L.marker([glat, glng], {
|
|---|
| | | icon: gIcon
|
|---|
| | | }).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)
|
|---|
| | | },
|
|---|
| | | 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) => {
|
|---|
| | | .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)
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | 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()
|
|---|
| | | // setTimeout(() => {
|
|---|
| | | // $.getJSON(
|
|---|
| | | // 'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
|
|---|
| | | // { monitorPointId: this.$store.state.monitorPointId },
|
|---|
| | | // (data) => {
|
|---|
| | | // this.map.setView([data[2], data[1]], 12)
|
|---|
| | | // }
|
|---|
| | | // )
|
|---|
| | | // }, 1000)
|
|---|
| | | // if (this.windState === 1) {
|
|---|
| | | // this.initData()
|
|---|
| | | // } else if (this.windState === 2) {
|
|---|
| | | // this.windDir()
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | 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) {
|
|---|
| | | jumpMap (LngLat) {
|
|---|
| | | this.map.setView(LngLat, 18)
|
|---|
| | | },
|
|---|
| | | // 请求更新风场数据
|
|---|
| | | getParamsData() {
|
|---|
| | | console.log('getParamsData', this.windState)
|
|---|
| | | getParamsData (isFirst = true) {
|
|---|
| | | clearInterval(this.timer)
|
|---|
| | | this.timer = setInterval(() => {
|
|---|
| | | this.currentHour()
|
|---|
| | |
|---|
| | | // console.log('else')
|
|---|
| | | }
|
|---|
| | | setTimeout(() => {
|
|---|
| | | this.change(this.changeColor)
|
|---|
| | | console.log('change', isFirst)
|
|---|
| | | if (isFirst) {
|
|---|
| | | this.windData()
|
|---|
| | | this.deviceMaker()
|
|---|
| | | } else {
|
|---|
| | | this.change(this.changeColor)
|
|---|
| | | }
|
|---|
| | | this.times = 300
|
|---|
| | | }, 100)
|
|---|
| | | }
|
|---|
| | | }, 1000)
|
|---|
| | | },
|
|---|
| | |
|
|---|
| | | // 初始化地图
|
|---|
| | | // initMap() {
|
|---|
| | | // var map = new AMap.Map('container', {
|
|---|
| | | // resizeEnable: true,
|
|---|
| | | // rotateEnable: true,
|
|---|
| | | // pitchEnable: true,
|
|---|
| | | // zoom: 14,
|
|---|
| | | // pitch: 80,
|
|---|
| | | // expandZoomRange: true,
|
|---|
| | | // zooms: [3, 20],
|
|---|
| | | // center: [120.9781494, 31.4265156]
|
|---|
| | | // })
|
|---|
| | | // this.map = map
|
|---|
| | | // this.map.on('click', () => {
|
|---|
| | | // if (this.infoWindow !== null) {
|
|---|
| | | // this.infoWindow.close()
|
|---|
| | | // }
|
|---|
| | | // })
|
|---|
| | | // },
|
|---|
| | | 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() {
|
|---|
| | | const map = L.map('mapContent', {
|
|---|
| | | 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
|
|---|
| | |
|---|
| | | '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
|
|---|
| | | const that = this
|
|---|
| | | this.map.invalidateSize(true)
|
|---|
| | | this.map.on('movestart', function(ev) {
|
|---|
| | | that.map.stop()
|
|---|
| | | console.log('move')
|
|---|
| | | const res = that.findLayer('wmsid')
|
|---|
| | | if (that.map.hasLayer(res)) {
|
|---|
| | | const res = that.findLayer('wmsid')
|
|---|
| | | that.map.removeLayer(res)
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | this.map.on('moveend', function(ev) {
|
|---|
| | | that.openLayer()
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | findLayer(layerName) { // 根据图层名称查找图层
|
|---|
| | | if (!this.map) {
|
|---|
| | | return null
|
|---|
| | | }
|
|---|
| | | const gisMap_layers = this.map._layers
|
|---|
| | | let layer = null
|
|---|
| | | for (const i in gisMap_layers) {
|
|---|
| | | if (gisMap_layers[i].options.id === layerName) {
|
|---|
| | | layer = gisMap_layers[i]
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | return layer
|
|---|
| | | 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) {
|
|---|
| | | console.log('change', this.windState)
|
|---|
| | | change (index) {
|
|---|
| | | this.changeColor = index
|
|---|
| | | var pr = ''
|
|---|
| | | switch (index) {
|
|---|
| | |
|---|
| | | this.sensorKey = pr
|
|---|
| | | // 请求设备坐标
|
|---|
| | | // this.toggleWindState()
|
|---|
| | | this.deviceMaker()
|
|---|
| | | this.openLayer()
|
|---|
| | | if (this.windState === 1) {
|
|---|
| | | this.deviceMaker()
|
|---|
| | | this.windData()
|
|---|
| | | } else if (this.windState === 2) {
|
|---|
| | | this.windDir()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 请求风场图接口
|
|---|
| | | initData() {
|
|---|
| | | this.windData()
|
|---|
| | | 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() {
|
|---|
| | | windData () {
|
|---|
| | | this.$request({
|
|---|
| | | url: '/monitorPoint/getWindData',
|
|---|
| | | method: 'get',
|
|---|
| | |
|---|
| | | time: this.nyr
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | this.windALLData = []
|
|---|
| | | this.windALLData = res.data[0]
|
|---|
| | | this.openLayer()
|
|---|
| | | .then(res => {
|
|---|
| | | this.windJsonData = res.data[0]
|
|---|
| | | return this.windJsonData
|
|---|
| | | })
|
|---|
| | | .catch((err) => {
|
|---|
| | | .catch(err => {
|
|---|
| | | console.log(err)
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | openLayer() {
|
|---|
| | | canvasWind (data) {
|
|---|
| | | const res = this.findLayer('wmsid')
|
|---|
| | | if (this.map.hasLayer(res)) {
|
|---|
| | | const res = this.findLayer('wmsid')
|
|---|
| | | if (res) {
|
|---|
| | | this.map.removeLayer(res)
|
|---|
| | | }
|
|---|
| | | var velocityLayer = L.velocityLayer({
|
|---|
| | | displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
|---|
| | | id: 'wmsid',
|
|---|
| | | localMode: true,
|
|---|
| | | displayValues: true, // 是否显示当前鼠标移动位置，风场信息
|
|---|
| | | displayOptions: {
|
|---|
| | | // 显示信息配置
|
|---|
| | | // velocityType: 'Global Wind',
|
|---|
| | |
|---|
| | | displayPosition: 'bottomleft',
|
|---|
| | | displayEmptyString: 'No wind data'
|
|---|
| | | },
|
|---|
| | | data: this.windALLData, // 数据 格式可参照
|
|---|
| | | data: data, // 数据 格式可参照
|
|---|
| | | // data: data2,
|
|---|
| | | // 以下为控制参数，后面为默认值
|
|---|
| | | minVelocity: 0, // 粒子最小速度（ m/s ）
|
|---|
| | | maxVelocity: 8, // 粒子最大速度（ m/s ）
|
|---|
| | | velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
|---|
| | | particleAge: 50, // 粒子在再生之前绘制的最大帧数
|
|---|
| | | particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
|---|
| | | lineWidth: 1.5, // 绘制粒子的线宽
|
|---|
| | | particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
|---|
| | | frameRate: 15, // 每秒所需的帧数
|
|---|
| | |
|---|
| | | '#053F03'
|
|---|
| | | ]
|
|---|
| | | // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
|
|---|
| | | }, { collapsed: false, hideSingleBase: true })
|
|---|
| | | })
|
|---|
| | | velocityLayer.addTo(this.map) // 添加到图上
|
|---|
| | | setTimeout(() => {
|
|---|
| | | this.loading = false
|
|---|
| | | }, 1000)
|
|---|
| | | },
|
|---|
| | | // 将页码，及每页显示的条数以参数传递提交给后台
|
|---|
| | | alertData(n1, n2) {
|
|---|
| | | alertData (n1, n2) {
|
|---|
| | | // 这里使用axios，使用时请提前引入
|
|---|
| | | this.$request({
|
|---|
| | | url: '/alarmInfo/getDataByConditionWithoutPage',
|
|---|
| | |
|---|
| | | index: this.factorValue,
|
|---|
| | | alarmType: this.alartValue
|
|---|
| | | }
|
|---|
| | | }).then((res) => {
|
|---|
| | | }).then(res => {
|
|---|
| | | // console.log('分页数据')
|
|---|
| | | // console.log(res)
|
|---|
| | | var tempData = res.data
|
|---|
| | |
|---|
| | | },
|
|---|
| | | // 分页
|
|---|
| | | // 每页显示的条数
|
|---|
| | | handleSizeChange(val) {
|
|---|
| | | handleSizeChange (val) {
|
|---|
| | | // 改变每页显示的条数
|
|---|
| | | this.PageSize = val
|
|---|
| | | // 注意：在改变每页显示的条数时，要将页码显示到第一页
|
|---|
| | | this.currentPage = 1
|
|---|
| | | },
|
|---|
| | | // 显示第几页
|
|---|
| | | handleCurrentChange(val) {
|
|---|
| | | handleCurrentChange (val) {
|
|---|
| | | // 改变默认的页数
|
|---|
| | | this.currentPage = val
|
|---|
| | | // console.log(val)
|
|---|
| | | },
|
|---|
| | | // 单元格样式
|
|---|
| | | tableCellClassName({ row, column, rowIndex, columnIndex }) {
|
|---|
| | | tableCellClassName ({ row, column, rowIndex, columnIndex }) {
|
|---|
| | | // eslint-disable-next-line no-unused-vars
|
|---|
| | | for (const key in row) {
|
|---|
| | | if (key === column.property) {
|
|---|
| | | const code = column.property
|
|---|
| | |
|---|
| | | }
|
|---|
| | | return ''
|
|---|
| | | },
|
|---|
| | | turnState() {
|
|---|
| | | turnState () {
|
|---|
| | | // console.log(this.showOrHidden)
|
|---|
| | | if (this.showOrHidden === true) {
|
|---|
| | | this.turnImg = require('@/assets/images/regionalOverview/dropDown.png')
|
|---|
| | |
|---|
| | | }
|
|---|
| | | this.showOrHidden = !this.showOrHidden
|
|---|
| | | },
|
|---|
| | | closeAlarmTableVisible() {
|
|---|
| | | // 国控站经纬度
|
|---|
| | | stateControlStation () {
|
|---|
| | | // this.$axios.get('monitorPoint/queryStateControlStation', {
|
|---|
| | | this.$request({
|
|---|
| | | url: '/govMonitorPoint/queryStateControlStation',
|
|---|
| | | method: 'get',
|
|---|
| | | params: {
|
|---|
| | | regionCode: 130900,
|
|---|
| | | sensorCode: 'a34002'
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then(res => {
|
|---|
| | | // console.log('国控站信息')
|
|---|
| | | // console.log(res)
|
|---|
| | | var gkData = res.data
|
|---|
| | | 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: [55, 55],
|
|---|
| | | iconAnchor: [13, 21],
|
|---|
| | | className: 'my-device'
|
|---|
| | | })
|
|---|
| | | // 添加标记到地图
|
|---|
| | | L.marker([glat, glng], {
|
|---|
| | | icon: gIcon
|
|---|
| | | }).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)
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 切换风场风向状态
|
|---|
| | | 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 {
|
|---|
| | |
|---|
| | | 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-top: 13px;
|
|---|
| | | padding-left: 20px;
|
|---|
| | | padding-top: 6px;
|
|---|
| | | font-family: '微软雅黑';
|
|---|
| | | z-index: 10003;
|
|---|
| | | cursor: pointer !important;
|
|---|
| | | /* -webkit-transform-origin-x: 0; */
|
|---|
| | | /* -webkit-transform: scale(0.90); */
|
|---|
| | | }
|
|---|
| | |
|---|
| | | padding-top: 11px;
|
|---|
| | | font-family: '微软雅黑';
|
|---|
| | | z-index: 10003;
|
|---|
| | | pointer-events: none !important;
|
|---|
| | | cursor: pointer !important;
|
|---|
| | | /* -webkit-transform-origin-x: 0; */
|
|---|
| | | /* -webkit-transform: scale(0.90); */
|
|---|
| | | }
|
|---|
| | |
|---|
| | | }
|
|---|
| | | .my-device {
|
|---|
| | | z-index: 999;
|
|---|
| | | pointer-events: none !important;
|
|---|
| | | cursor: pointer !important;
|
|---|
| | | }
|
|---|
| | | .windDir-icon {
|
|---|
| | | z-index: 10001;
|
|---|
| | |
|---|
| | | /* 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;
|
|---|
| | |
|---|
| | | margin-left: -45px;
|
|---|
| | | margin-top: -40px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | </style>
|
|---|
