| | |
|---|
| | | 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">
|
|---|
| | |
|---|
| | | :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" />
|
|---|
| | | <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
|
|---|
| | | </span>
|
|---|
| | | </div>
|
|---|
| | | <div class="topDate" style="height: 60px">
|
|---|
| | | <div class="jdt" id="eventPro">
|
|---|
| | | <div id="eventPro" class="jdt">
|
|---|
| | | <div class="mouseDiv">
|
|---|
| | | <span class="inText"></span>
|
|---|
| | | <div class="sjDiv"></div>
|
|---|
| | | <span class="inText" />
|
|---|
| | | <div class="sjDiv" />
|
|---|
| | | </div>
|
|---|
| | | <div class="mouseDiv2">
|
|---|
| | | <span class="inText2"></span>
|
|---|
| | | <div class="sjDiv2"></div>
|
|---|
| | | <span class="inText2" />
|
|---|
| | | <div class="sjDiv2" />
|
|---|
| | | </div>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | </div>
|
|---|
| | | <div class="timeDiv" style="position: relative">
|
|---|
| | | <ul id="timeUl">
|
|---|
| | | <li style="width: 0.83%"></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li style="width: 0.83%" />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>03</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>06</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>09</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>12</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>15</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>18</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>21</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <!-- -->
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>03</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>06</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>09</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>12</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>15</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>18</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>21</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <!-- -->
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>03</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>06</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>09</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>12</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>15</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>18</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>21</li>
|
|---|
| | | <li></li>
|
|---|
| | | <li></li>
|
|---|
| | | <li />
|
|---|
| | | <li />
|
|---|
| | | <li>00</li>
|
|---|
| | | </ul>
|
|---|
| | | <div
|
|---|
| | |
|---|
| | | "
|
|---|
| | | class="dayDiv"
|
|---|
| | | >
|
|---|
| | | <p class="p1"></p>
|
|---|
| | | <p class="p1" />
|
|---|
| | | <p style="position: relative">
|
|---|
| | | <span
|
|---|
| | | class="borderLine"
|
|---|
| | |
|---|
| | | height: 47px;
|
|---|
| | | bottom: 0;
|
|---|
| | | "
|
|---|
| | | ></span>
|
|---|
| | | <span class="p2"></span>
|
|---|
| | | />
|
|---|
| | | <span class="p2" />
|
|---|
| | | <span
|
|---|
| | | class="borderLine"
|
|---|
| | | style="
|
|---|
| | |
|---|
| | | height: 47px;
|
|---|
| | | bottom: 0;
|
|---|
| | | "
|
|---|
| | | ></span>
|
|---|
| | | />
|
|---|
| | | </p>
|
|---|
| | | <p class="p3"></p>
|
|---|
| | | <p class="p3" />
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | :value="item.value"
|
|---|
| | | />
|
|---|
| | | </el-select>
|
|---|
| | | <el-button type="primary" @click="alertData(PageSize, currentPage)"
|
|---|
| | | >查询</el-button
|
|---|
| | | >
|
|---|
| | | <el-button
|
|---|
| | | type="primary"
|
|---|
| | | @click="alertData(PageSize, currentPage)"
|
|---|
| | | >查询</el-button>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <el-table
|
|---|
| | |
|---|
| | | @current-change="handleCurrentChange"
|
|---|
| | | />
|
|---|
| | | <div slot="footer" class="dialog-footer">
|
|---|
| | | <el-button size="mini" @click="alarmTableVisible = false"
|
|---|
| | | >关 闭</el-button
|
|---|
| | | >
|
|---|
| | | <el-button
|
|---|
| | | size="mini"
|
|---|
| | | @click="alarmTableVisible = false"
|
|---|
| | | >关 闭</el-button>
|
|---|
| | | </div>
|
|---|
| | | </el-dialog>
|
|---|
| | | </div>
|
|---|
| | |
|---|
| | | import 'leaflet/dist/leaflet.css'
|
|---|
| | | import 'leaflet-velocity/dist/leaflet-velocity.css'
|
|---|
| | | import L from 'leaflet'
|
|---|
| | | import 'wind-js-leaflet'
|
|---|
| | | import 'leaflet-rotatedmarker/leaflet.rotatedMarker.js'
|
|---|
| | | import 'leaflet-velocity/dist/leaflet-velocity'
|
|---|
| | | import $ from 'jquery'
|
|---|
| | |
|---|
| | | weidu: Number,
|
|---|
| | | jingdu: Number,
|
|---|
| | | monitorPointId: Number,
|
|---|
| | | monitorPointIds: Array,
|
|---|
| | | monitorPointIds: Array
|
|---|
| | | },
|
|---|
| | | data() {
|
|---|
| | | return {
|
|---|
| | |
|---|
| | | 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'),
|
|---|
| | |
|---|
| | | dateInfo: '', // 选择的日期
|
|---|
| | | timeInfo: '', // 选择的时间
|
|---|
| | | nyr: '', // 选择的年月日
|
|---|
| | | windALLData: []
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | ...mapGetters(['regionCode']),
|
|---|
| | | ...mapGetters(['regionCode'])
|
|---|
| | | },
|
|---|
| | | watch: {
|
|---|
| | | dateValue(n, o) {
|
|---|
| | |
|---|
| | | },
|
|---|
| | | regionCode(newCode, oldCode) {
|
|---|
| | | this.timerKey = newCode // 用于监听code变化重新渲染子组件
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | mounted() {
|
|---|
| | | this.currentHour()
|
|---|
| | |
|---|
| | | this.jingduNew = newLL[1]
|
|---|
| | | this.weiduNew = newLL[0]
|
|---|
| | | // 初始化风场数据
|
|---|
| | | // this.initData()
|
|---|
| | | // this.change(0)
|
|---|
| | | this.windData()
|
|---|
| | | this.change(0)
|
|---|
| | | this.getParamsData()
|
|---|
| | | this.windDir()
|
|---|
| | | // this.deviceMaker()
|
|---|
| | | this.newDate()
|
|---|
| | |
|
|---|
| | | // this.alertData(this.PageSize, this.currentPage)
|
|---|
| | | },
|
|---|
| | | beforeDestroy() {
|
|---|
| | |
|---|
| | | }
|
|---|
| | | // 鼠标移入移出事件
|
|---|
| | | for (let i = 0; i < lis.length; i++) {
|
|---|
| | | lis[i].onmouseenter = function () {
|
|---|
| | | lis[i].onmouseenter = function() {
|
|---|
| | | // console.log('mouseenter', i)
|
|---|
| | | // mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
|
|---|
| | | mouseDiv.style.transform = 'translateX(-50%)'
|
|---|
| | |
|---|
| | | inText.innerHTML = times + ':00'
|
|---|
| | | // console.log(mouseDiv)
|
|---|
| | | }
|
|---|
| | | lis[i].onmouseleave = function () {
|
|---|
| | | lis[i].onmouseleave = function() {
|
|---|
| | | mouseDiv.style.display = 'none'
|
|---|
| | | // console.log('移出事件', i)
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | for (let i = 0; i < timeLis.length; i++) {
|
|---|
| | | timeLis[i].onmouseenter = function () {
|
|---|
| | | timeLis[i].onmouseenter = function() {
|
|---|
| | | // console.log('mouseenter', i)
|
|---|
| | | // mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
|
|---|
| | | mouseDiv.style.left = 1.36986 * i + '%'
|
|---|
| | |
|---|
| | | inText.innerHTML = times + ':00'
|
|---|
| | | // console.log(mouseDiv)
|
|---|
| | | }
|
|---|
| | | timeLis[i].onmouseleave = function () {
|
|---|
| | | timeLis[i].onmouseleave = function() {
|
|---|
| | | mouseDiv.style.display = 'none'
|
|---|
| | | // console.log('移出事件', i)
|
|---|
| | | }
|
|---|
| | |
|---|
| | | },
|
|---|
| | | // 当前小时默认值
|
|---|
| | | 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
|
|---|
| | |
|---|
| | | mouseLeave() {
|
|---|
| | | this.map.scrollWheelZoom.enable()
|
|---|
| | | },
|
|---|
| | | // initWebpack() {
|
|---|
| | | // // 拼写参数
|
|---|
| | | // var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
|
|---|
| | | // // 拼写URL
|
|---|
| | | // var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
|
|---|
| | | // socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
|
|---|
| | | // this.ws = new WebSocket(socketUrl)
|
|---|
| | | // this.ws.onopen = this.onopen
|
|---|
| | | // this.ws.onmessage = this.onmessage
|
|---|
| | | // this.ws.onclose = this.onclose
|
|---|
| | | // this.ws.onerror = this.onerror
|
|---|
| | | // },
|
|---|
| | | // reconnect() { // 重新连接
|
|---|
| | | // var that = this
|
|---|
| | | // if (that.lockReconnect) {
|
|---|
| | | // return
|
|---|
| | | // }
|
|---|
| | | // that.lockReconnect = true
|
|---|
| | | // // 没连接上会一直重连，设置延迟避免请求过多
|
|---|
| | | // that.timeoutnum && clearTimeout(that.timeoutnum)
|
|---|
| | | // that.timeoutnum = setTimeout(function() {
|
|---|
| | | // // 新连接
|
|---|
| | | // that.initWebpack()
|
|---|
| | | // that.lockReconnect = false
|
|---|
| | | // }, 5000)
|
|---|
| | | // },
|
|---|
| | | // reset() { // 重置心跳
|
|---|
| | | // var that = this
|
|---|
| | | // // 清除时间
|
|---|
| | | // clearTimeout(that.timeoutObj)
|
|---|
| | | // clearTimeout(that.serverTimeoutObj)
|
|---|
| | | // // 重启心跳
|
|---|
| | | // that.start()
|
|---|
| | | // },
|
|---|
| | | // start() { // 开启心跳
|
|---|
| | | // // console.log('开启心跳')
|
|---|
| | | // var self = this
|
|---|
| | | // self.timeoutObj && clearTimeout(self.timeoutObj)
|
|---|
| | | // self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
|
|---|
| | | // self.timeoutObj = setTimeout(function() {
|
|---|
| | | // // 这里发送一个心跳，后端收到后，返回一个心跳消息，
|
|---|
| | | // if (self.ws.readyState === 1) { // 如果连接正常
|
|---|
| | | // self.ws.send('heartCheck')
|
|---|
| | | // } else { // 否则重连
|
|---|
| | | // self.reconnect()
|
|---|
| | | // }
|
|---|
| | | // self.serverTimeoutObj = setTimeout(function() {
|
|---|
| | | // // 超时关闭
|
|---|
| | | // self.ws.close()
|
|---|
| | | // }, self.timeout)
|
|---|
| | | // }, self.timeout)
|
|---|
| | | // },
|
|---|
| | | // onopen() {
|
|---|
| | | // // console.log('连接开启')
|
|---|
| | | // // 开启心跳
|
|---|
| | | // this.start()
|
|---|
| | | // },
|
|---|
| | | // onmessage(msg) {
|
|---|
| | | // var that = this
|
|---|
| | | // if (JSON.parse(msg.data).名称) {
|
|---|
| | | // that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
|---|
| | | // } else {
|
|---|
| | | // that.wsData1 = msg.data
|
|---|
| | | // if (that.windState === 2) {
|
|---|
| | | // for (let i = 0; i < that.keyData.length; i++) {
|
|---|
| | | // // 更新风向标
|
|---|
| | | // // 遍历出(通过mac匹配)要更新的风向标
|
|---|
| | | // if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
|
|---|
| | | // var blueIcon1 = L.icon({ // 设置图标样式
|
|---|
| | | // iconUrl: require('@/assets/images/icoWind03.png'),
|
|---|
| | | // iconSize: [30, 30],
|
|---|
| | | // iconAnchor: [15, 25],
|
|---|
| | | // className: 'iconWind'
|
|---|
| | | // })
|
|---|
| | | // // L.marker用来在地图中放置注记
|
|---|
| | | // that.marker = L.marker([that.lats[i], that.lngs[i]], {
|
|---|
| | | // icon: blueIcon1,
|
|---|
| | | // rotationAngle: Number(JSON.parse(that.wsData1).风向)
|
|---|
| | | // })
|
|---|
| | | // if (i === 0) {
|
|---|
| | | // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
|---|
| | | // that.map.addLayer(that.marker)
|
|---|
| | | // } else {
|
|---|
| | | // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
|---|
| | | // for (let j = 0; j < that.markerObject.length; j++) {
|
|---|
| | | // if (that.coordinates[0] === that.markerObject[j].mac1) {
|
|---|
| | | // that.map.removeLayer(that.markerObject[j].marker)
|
|---|
| | | // that.map.addLayer(that.marker)
|
|---|
| | | // } else if (that.coordinates[i] === that.markerObject[j].mac1) {
|
|---|
| | | // that.map.removeLayer(that.markerObject[j].marker)
|
|---|
| | | // that.map.addLayer(that.marker)
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // // 收到服务器信息，心跳重置
|
|---|
| | | // this.reset()
|
|---|
| | | // },
|
|---|
| | | // onclose(e) {
|
|---|
| | | // // console.log('连接关闭')
|
|---|
| | | // // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
|
|---|
| | | // // 重连
|
|---|
| | | // this.reconnect()
|
|---|
| | | // },
|
|---|
| | | // onerror(e) {
|
|---|
| | | // console.log('出现错误')
|
|---|
| | | // // 重连
|
|---|
| | | // this.reconnect()
|
|---|
| | | // },
|
|---|
| | | // ws方法
|
|---|
| | | // wsStart() {
|
|---|
| | | // var that = this
|
|---|
| | | // // 拼写参数
|
|---|
| | | // var param = this.accountId + '&' + this.orgId + '&' + this.regionCode
|
|---|
| | | // // 拼写URL
|
|---|
| | | // var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param
|
|---|
| | | // // 替换http为WS
|
|---|
| | | // // console.log(socketUrl)
|
|---|
| | | // socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')
|
|---|
| | | // this.ws = new WebSocket(socketUrl)
|
|---|
| | | // // if (this.ws) {
|
|---|
| | | // // this.ws.close()
|
|---|
| | | // // console.log('ws心跳关闭')
|
|---|
| | | // // }
|
|---|
| | | // // this.ws = new WebSocket(socketUrl)
|
|---|
| | | // // console.log('ws心跳开启')
|
|---|
| | |
|
|---|
| | | // this.ws.onopen = function() {
|
|---|
| | | // // console.log('websocket开启成功')
|
|---|
| | | // }
|
|---|
| | | // 获得消息事件
|
|---|
| | | // this.ws.onmessage = function(msg) {
|
|---|
| | | // if (JSON.parse(msg.data).名称) {
|
|---|
| | | // that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
|---|
| | | // // console.log(that.wsData2)
|
|---|
| | | // } else {
|
|---|
| | | // that.wsData1 = msg.data
|
|---|
| | | // // console.log(that.wsData1)
|
|---|
| | | // if (that.windState === 2) {
|
|---|
| | | // for (let i = 0; i < that.keyData.length; i++) {
|
|---|
| | | // // 更新风向标
|
|---|
| | | // // 遍历出(通过mac匹配)要更新的风向标
|
|---|
| | | // if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {
|
|---|
| | | // var blueIcon1 = L.icon({
|
|---|
| | | // iconUrl: require('@/assets/images/icoWind03.png'),
|
|---|
| | | // iconSize: [30, 30],
|
|---|
| | | // iconAnchor: [15, 25],
|
|---|
| | | // className: 'iconWind'
|
|---|
| | | // })
|
|---|
| | | // that.marker = L.marker([that.lats[i], that.lngs[i]], {
|
|---|
| | | // icon: blueIcon1,
|
|---|
| | | // rotationAngle: Number(JSON.parse(that.wsData1).风向)
|
|---|
| | | // })
|
|---|
| | | // if (i === 0) {
|
|---|
| | | // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
|---|
| | | // that.map.addLayer(that.marker)
|
|---|
| | | // } else {
|
|---|
| | | // that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })
|
|---|
| | | // for (let j = 0; j < that.markerObject.length; j++) {
|
|---|
| | | // if (that.coordinates[0] === that.markerObject[j].mac1) {
|
|---|
| | | // that.map.removeLayer(that.markerObject[j].marker)
|
|---|
| | | // that.map.addLayer(that.marker)
|
|---|
| | | // } else if (that.coordinates[i] === that.markerObject[j].mac1) {
|
|---|
| | | // that.map.removeLayer(that.markerObject[j].marker)
|
|---|
| | | // that.map.addLayer(that.marker)
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | // 百度经纬度转高德经纬度
|
|---|
| | | bd09togcj02(bd_lon, bd_lat) {
|
|---|
| | | var x_pi = (3.14159265358979324 * 3000.0) / 180.0
|
|---|
| | |
|---|
| | | var gg_lat = z * Math.sin(theta)
|
|---|
| | | return [gg_lat, gg_lng]
|
|---|
| | | },
|
|---|
| | | // /**
|
|---|
| | | // * GCJ02 转换为 WGS84
|
|---|
| | | // * @param lng
|
|---|
| | | // * @param lat
|
|---|
| | | // * @returns {*[]}
|
|---|
| | | // */
|
|---|
| | | // gcj02towgs84(lng, lat) {
|
|---|
| | | // if (this.out_of_china(lng, lat)) {
|
|---|
| | | // return [lat,lng]
|
|---|
| | | // } else {
|
|---|
| | | // var dlat = this.transformlat(lng - 105.0, lat - 35.0);
|
|---|
| | | // var dlng = this.transformlng(lng - 105.0, lat - 35.0);
|
|---|
| | | // var radlat = lat / 180.0 * PI;
|
|---|
| | | // var magic = Math.sin(radlat);
|
|---|
| | | // magic = 1 - ee * magic * magic;
|
|---|
| | | // var sqrtmagic = Math.sqrt(magic);
|
|---|
| | | // dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
|
|---|
| | | // dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
|
|---|
| | | // var mglat = lat + dlat;
|
|---|
| | | // var mglng = lng + dlng;
|
|---|
| | | // return [ lat * 2 - mglat,lng * 2 - mglng]
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | //
|
|---|
| | | // transformlat(lng, lat) {
|
|---|
| | | // var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
|
|---|
| | | // ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
|---|
| | | // ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
|
|---|
| | | // ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
|
|---|
| | | // return ret
|
|---|
| | | // },
|
|---|
| | | // transformlng(lng, lat) {
|
|---|
| | | // var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
|
|---|
| | | // ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
|
|---|
| | | // ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
|
|---|
| | | // ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
|
|---|
| | | // return ret
|
|---|
| | | // },
|
|---|
| | | // /**
|
|---|
| | | // * 判断是否在国内，不在国内则不做偏移
|
|---|
| | | // * @param lng
|
|---|
| | | // * @param lat
|
|---|
| | | // * @returns {boolean}
|
|---|
| | | // */
|
|---|
| | | // out_of_china(lng, lat) {
|
|---|
| | | // return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
|
|---|
| | | // },
|
|---|
| | | // 请求设备坐标,当前的
|
|---|
| | | deviceMaker() {
|
|---|
| | | // 遍历所有图层
|
|---|
| | | if (this.map) {
|
|---|
| | | this.map.eachLayer(function (layer) {
|
|---|
| | | // 卸载之前的风场图层
|
|---|
| | | if (
|
|---|
| | | !layer._container &&
|
|---|
| | | ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
|---|
| | | 'leaflet-layer'
|
|---|
| | | ) {
|
|---|
| | | layer.remove()
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | // const res = this.findLayer('wmsid')
|
|---|
| | | // this.map.removeLayer(res)
|
|---|
| | | }
|
|---|
| | | const that = this
|
|---|
| | | this.$request({
|
|---|
| | |
|---|
| | | organizationId: this.$store.state.orgId,
|
|---|
| | | regionCode: this.$store.state.regionCode,
|
|---|
| | | chooseTime: this.chooseTime,
|
|---|
| | | time: this.nyr,
|
|---|
| | | },
|
|---|
| | | time: this.nyr
|
|---|
| | | }
|
|---|
| | | }).then((data) => {
|
|---|
| | | // console.log('五分钟设备数据')
|
|---|
| | | console.log(data, 'tata')
|
|---|
| | |
|---|
| | | },
|
|---|
| | | // 标记设备点
|
|---|
| | | markDeviceSite(data) {
|
|---|
| | | // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]
|
|---|
| | | // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]
|
|---|
| | | var keyData = data.data.devices
|
|---|
| | | this.keyData = data.data.devices
|
|---|
| | | // 遍历国控站位置
|
|---|
| | | this.stateControlStation()
|
|---|
| | | var group = L.layerGroup().addTo(this.map)
|
|---|
| | | // this.stateControlStation()
|
|---|
| | |
|
|---|
| | | 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)))
|
|---|
| | |
|---|
| | | this.keys.push(JSON.parse('null'))
|
|---|
| | | // }
|
|---|
| | | }
|
|---|
| | | // console.log(this.keys)
|
|---|
| | | // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)
|
|---|
| | | // var lat = newL[0]
|
|---|
| | | // this.lats[i] = newL[0]
|
|---|
| | | // var lng = newL[1]
|
|---|
| | | // this.lngs[i] = newL[1]
|
|---|
| | | var lat = keyData[i].latitude
|
|---|
| | | this.lats[i] = keyData[i].latitude
|
|---|
| | | var lng = keyData[i].longitude
|
|---|
| | |
|---|
| | | iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
|
|---|
| | | // iconUrl: require('@/assets/icon/ico2.png'),
|
|---|
| | | iconSize: [60, 60],
|
|---|
| | | iconAnchor: [30, 48],
|
|---|
| | | className: 'my-device',
|
|---|
| | | className: 'my-device'
|
|---|
| | | })
|
|---|
| | | // 添加标记到地图
|
|---|
| | | L.marker([lat, lng], {
|
|---|
| | | icon: blueIcon,
|
|---|
| | | }).addTo(group)
|
|---|
| | | // console.log(JSON.parse(this.keys[i]))
|
|---|
| | | var myIcon = L.divIcon({
|
|---|
| | | html: this.keys[i],
|
|---|
| | | className: 'my-div-icon',
|
|---|
| | | iconSize: [60, 60],
|
|---|
| | | iconAnchor: [40, 40],
|
|---|
| | | const a = L.marker([lat, lng], {
|
|---|
| | | icon: blueIcon
|
|---|
| | | })
|
|---|
| | | var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
|
|---|
| | | markerList.push(a)
|
|---|
| | | const bg = `<div style='height:20px;cursor: pointer;'>${this.keys[i]}</div>`
|
|---|
| | | console.log(JSON.parse(this.keys[i]))
|
|---|
| | | var myIcon = L.divIcon({
|
|---|
| | | html: bg,
|
|---|
| | | className: 'my-div-icon',
|
|---|
| | | iconSize: [50, 20],
|
|---|
| | | iconAnchor: [26, 30]
|
|---|
| | | })
|
|---|
| | | var b = L.marker([lat, lng], { icon: myIcon })
|
|---|
| | | // 给标记添加鼠标移入事件，mouseover事件会冒泡
|
|---|
| | | var _this = this
|
|---|
| | | marker.on('mouseover', function (e) {
|
|---|
| | | b.on('mouseover', function(e) {
|
|---|
| | | console.log('e', e)
|
|---|
| | | this.noneData = false
|
|---|
| | | // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {
|
|---|
| | | // var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
|
|---|
| | | // // console.log(data)
|
|---|
| | | // this.bindPopup(data).openPopup()
|
|---|
| | | // })
|
|---|
| | | _this
|
|---|
| | | .$request({
|
|---|
| | | url: '/historyFiveMinutely/queryPopDataByMac',
|
|---|
| | |
|---|
| | | params: {
|
|---|
| | | mac: keyData[i].mac,
|
|---|
| | | chooseTime: _this.chooseTime,
|
|---|
| | | time: _this.nyr,
|
|---|
| | | },
|
|---|
| | | time: _this.nyr
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | if (res.message == '操作目标不存在') {
|
|---|
| | | if (res.message === '操作目标不存在') {
|
|---|
| | | var datafalse = '暂无五分钟数据'
|
|---|
| | | this.bindPopup(datafalse).openPopup()
|
|---|
| | | return
|
|---|
| | |
|---|
| | | var data = JSON.stringify(res.data)
|
|---|
| | | .replace(/,/g, `<br>`)
|
|---|
| | | .replace(/{|}|"/g, '')
|
|---|
| | | this.bindPopup(data).openPopup()
|
|---|
| | | this.bindPopup(data).togglePopup()
|
|---|
| | | })
|
|---|
| | | .catch((err) => {
|
|---|
| | | console.log(err)
|
|---|
| | | })
|
|---|
| | | })
|
|---|
| | | // 给标记点添加鼠标移出事件
|
|---|
| | | marker.on('mouseout', function (e) {
|
|---|
| | | b.on('mouseout', function(e) {
|
|---|
| | | this.noneData = false
|
|---|
| | | this.bindPopup().closePopup()
|
|---|
| | | this.bindPopup().togglePopup()
|
|---|
| | | })
|
|---|
| | | markerList.push(b)
|
|---|
| | | }
|
|---|
| | | L.layerGroup(markerList).addTo(this.map)
|
|---|
| | | },
|
|---|
| | | // 给标记点添加移入移出事件
|
|---|
| | | // moveInAndOut() {
|
|---|
| | |
|---|
| | | method: 'get',
|
|---|
| | | params: {
|
|---|
| | | regionCode: 130900,
|
|---|
| | | sensorCode: 'a34002',
|
|---|
| | | },
|
|---|
| | | sensorCode: 'a34002'
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | // console.log('国控站信息')
|
|---|
| | |
|---|
| | | // 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,
|
|---|
| | | 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,
|
|---|
| | | icon: myIcon
|
|---|
| | | }).addTo(group)
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | |
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 切换风场风向状态
|
|---|
| | | 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)
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | // 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)
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | // 请求风向标
|
|---|
| | | 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()
|
|---|
| | | // 执行ws方法
|
|---|
| | | // this.wsStart()
|
|---|
| | | // this.initWebpack()
|
|---|
| | | // console.log('这是ws需要的三个参数')
|
|---|
| | | // console.log(this.accountId, this.orgId, this.regionCode)
|
|---|
| | | // this.timer2 = setInterval(() => {
|
|---|
| | | // if (this.ws) {
|
|---|
| | | // this.ws.close()
|
|---|
| | | // console.log('ws心跳关闭')
|
|---|
| | | // }
|
|---|
| | | // // 执行ws方法
|
|---|
| | | // this.wsStart()
|
|---|
| | | // console.log('ws心跳开启')
|
|---|
| | | // }, 60000)
|
|---|
| | | },
|
|---|
| | | // 获得父组件改变regionCode子组件请求api功能
|
|---|
| | | getRegionApiRequest() {
|
|---|
| | | // console.log(this.$store.state.regionCode)
|
|---|
| | | // this.ws.close()
|
|---|
| | | // console.log('ws关闭')
|
|---|
| | | // 请求更新风场数据
|
|---|
| | | this.getParamsData()
|
|---|
| | | setTimeout(() => {
|
|---|
| | | $.getJSON(
|
|---|
| | | 'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',
|
|---|
| | | { monitorPointId: this.$store.state.monitorPointId },
|
|---|
| | | (data) => {
|
|---|
| | | // 遍历所有图层
|
|---|
| | | // console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
|
|---|
| | | // console.log(data)
|
|---|
| | | // this.map.eachLayer(function(layer) {
|
|---|
| | | // // 卸载之前的风场图层
|
|---|
| | | // if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {
|
|---|
| | | // layer.remove()
|
|---|
| | | // }
|
|---|
| | | // })
|
|---|
| | | this.map.setView([data[2], data[1]], 12)
|
|---|
| | | // console.log('跳转成功')
|
|---|
| | | }
|
|---|
| | | )
|
|---|
| | | }, 1000)
|
|---|
| | | if (this.windState === 1) {
|
|---|
| | | // this.ws.close()
|
|---|
| | | this.initData()
|
|---|
| | | // console.log('请求风场图')
|
|---|
| | | } else if (this.windState === 2) {
|
|---|
| | | this.windDir()
|
|---|
| | | // console.log('请求风向标')
|
|---|
| | | }
|
|---|
| | | // 请求设备坐标
|
|---|
| | | // this.deviceMaker()
|
|---|
| | | // this.getParamsData()
|
|---|
| | | },
|
|---|
| | | // 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()
|
|---|
| | | // }
|
|---|
| | | // },
|
|---|
| | | // 子组件地图的跳转中心点方法
|
|---|
| | | jumpMap(LngLat) {
|
|---|
| | | // console.log('我是子组件方法')
|
|---|
| | | // console.log(this.jumpData)
|
|---|
| | | // console.log(LngLat)
|
|---|
| | | this.map.setView(LngLat, 18)
|
|---|
| | | },
|
|---|
| | | // 请求更新风场数据
|
|---|
| | | getParamsData() {
|
|---|
| | | console.log('getParamsData', this.windState)
|
|---|
| | | clearInterval(this.timer)
|
|---|
| | | this.timer = setInterval(() => {
|
|---|
| | | this.currentHour()
|
|---|
| | |
|---|
| | | this.chooseTimeInfo = false
|
|---|
| | | // console.log('else')
|
|---|
| | | }
|
|---|
| | | // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')
|
|---|
| | | // clearInterval(this.timer)
|
|---|
| | | if (this.windState === 1) {
|
|---|
| | | // this.ws.close()
|
|---|
| | | this.initData()
|
|---|
| | | // console.log('请求风场图')
|
|---|
| | | } else if (this.windState === 2) {
|
|---|
| | | this.windDir()
|
|---|
| | | // console.log('请求风向标')
|
|---|
| | | }
|
|---|
| | | setTimeout(() => {
|
|---|
| | | this.change(this.changeColor)
|
|---|
| | | this.times = 300
|
|---|
| | |
|---|
| | | }
|
|---|
| | | }, 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()
|
|---|
| | | // }
|
|---|
| | | // })
|
|---|
| | | // },
|
|---|
| | | // 初始化地图容器
|
|---|
| | | initMap() {
|
|---|
| | | // console.log('这是index传到map的经纬度')
|
|---|
| | | // console.log(this.weidu)
|
|---|
| | | // console.log(this.jingdu)
|
|---|
| | | var map = L.map('mapContent', {
|
|---|
| | | const map = L.map('mapContent', {
|
|---|
| | | minZoom: 2,
|
|---|
| | | maxZoom: 18,
|
|---|
| | | center: [this.weiduNew, this.jingduNew],
|
|---|
| | | zoom: 14,
|
|---|
| | | 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)
|
|---|
| | | // L.tileLayer(
|
|---|
| | | // 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
|
|---|
| | | // ).addTo(map)
|
|---|
| | | this.map = map // data上需要挂载
|
|---|
| | | 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
|
|---|
| | | },
|
|---|
| | | // 更改不同的值区间
|
|---|
| | | change(index) {
|
|---|
| | | console.log('change', this.windState)
|
|---|
| | | this.changeColor = index
|
|---|
| | | var pr = ''
|
|---|
| | | switch (index) {
|
|---|
| | |
|---|
| | | this.sensorKey = pr
|
|---|
| | | // 请求设备坐标
|
|---|
| | | // this.toggleWindState()
|
|---|
| | | if (this.windState === 1) {
|
|---|
| | | this.initData()
|
|---|
| | | } else if (this.windState === 2) {
|
|---|
| | | this.windDir()
|
|---|
| | | }
|
|---|
| | | this.deviceMaker()
|
|---|
| | | this.openLayer()
|
|---|
| | | },
|
|---|
| | | // 请求风场图接口
|
|---|
| | | initData() {
|
|---|
| | | // console.log('加载风场')
|
|---|
| | | // const that = this
|
|---|
| | | // 请求更新风场数据
|
|---|
| | | // console.log(this.monitorPointId)
|
|---|
| | | // 遍历所有图层
|
|---|
| | | if (this.map) {
|
|---|
| | | this.map.eachLayer(function (layer) {
|
|---|
| | | // 卸载之前的风场图层
|
|---|
| | | if (
|
|---|
| | | !layer._container &&
|
|---|
| | | ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==
|
|---|
| | | 'leaflet-layer'
|
|---|
| | | ) {
|
|---|
| | | layer.remove()
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | this.deviceMaker()
|
|---|
| | | // console.log('请求风场之前')
|
|---|
| | | // $.ajaxSettings.async = false
|
|---|
| | | // for (let i = 0; i < this.monitorPointIds.length; i++) {
|
|---|
| | | this.windData()
|
|---|
| | | // }
|
|---|
| | | this.deviceMaker()
|
|---|
| | | },
|
|---|
| | | // 风场图数据
|
|---|
| | | windData() {
|
|---|
| | |
|---|
| | | params: {
|
|---|
| | | monitorPointIds: this.monitorPointIds.toString(),
|
|---|
| | | chooseTime: this.chooseTime,
|
|---|
| | | time: this.nyr,
|
|---|
| | | },
|
|---|
| | | time: this.nyr
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then((res) => {
|
|---|
| | | // console.log('新风场数据')
|
|---|
| | | // console.log(res)
|
|---|
| | | // if (res.data[0][0].data.length === 0) {
|
|---|
| | | // this.noneData = true
|
|---|
| | | // }
|
|---|
| | | // 生成风场实例
|
|---|
| | | // var data2 = res.data[0]
|
|---|
| | | // data2[1].header.parameterNumberName = 'northward_wind'
|
|---|
| | | // data2[0].header.parameterUnit = 'm.s-1'
|
|---|
| | | // data2[1].header.parameterUnit = 'm.s-1'
|
|---|
| | | // data2[0].header.dx = 0.00234842479
|
|---|
| | | // data2[1].header.dx = 0.00234842479
|
|---|
| | | // data2[0].header.dy = 0.0018464922
|
|---|
| | | // data2[1].header.dy = 0.0018464922
|
|---|
| | | // console.log(data2, 'data2')
|
|---|
| | | var velocityLayer = L.velocityLayer({
|
|---|
| | | displayValues: false, // 是否显示当前鼠标移动位置，风场信息
|
|---|
| | | displayOptions: {
|
|---|
| | | // 显示信息配置
|
|---|
| | | // velocityType: 'Global Wind',
|
|---|
| | | velocityType: 'GBR Wind',
|
|---|
| | | displayPosition: 'bottomleft',
|
|---|
| | | displayEmptyString: 'No wind data',
|
|---|
| | | },
|
|---|
| | | data: res.data[0], // 数据 格式可参照
|
|---|
| | | // data: data2,
|
|---|
| | | // 以下为控制参数，后面为默认值
|
|---|
| | | minVelocity: 0, // 粒子最小速度（ m/s ）
|
|---|
| | | maxVelocity: 8, // 粒子最大速度（ m/s ）
|
|---|
| | | velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
|---|
| | | particleAge: 90, // 粒子在再生之前绘制的最大帧数
|
|---|
| | | lineWidth: 1.5, // 绘制粒子的线宽
|
|---|
| | | particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
|---|
| | | frameRate: 15, // 每秒所需的帧数
|
|---|
| | | colorScale: [
|
|---|
| | | '#A2D839',
|
|---|
| | | '#7EB530',
|
|---|
| | | '#6E9F26',
|
|---|
| | | '#4E7522',
|
|---|
| | | '#345B1B',
|
|---|
| | | '#186303',
|
|---|
| | | '#175103',
|
|---|
| | | '#053F03',
|
|---|
| | | ],
|
|---|
| | | // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
|
|---|
| | | })
|
|---|
| | | velocityLayer.addTo(this.map) // 添加到图上
|
|---|
| | | // console.log('风场数据')
|
|---|
| | | // console.log(res.data[0])
|
|---|
| | | this.windALLData = []
|
|---|
| | | this.windALLData = res.data[0]
|
|---|
| | | this.openLayer()
|
|---|
| | | })
|
|---|
| | | .catch((err) => {
|
|---|
| | | console.log(err)
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | openLayer() {
|
|---|
| | | const res = this.findLayer('wmsid')
|
|---|
| | | if (this.map.hasLayer(res)) {
|
|---|
| | | const res = this.findLayer('wmsid')
|
|---|
| | | this.map.removeLayer(res)
|
|---|
| | | }
|
|---|
| | | var velocityLayer = L.velocityLayer({
|
|---|
| | | id: 'wmsid',
|
|---|
| | | localMode: true,
|
|---|
| | | displayValues: true, // 是否显示当前鼠标移动位置，风场信息
|
|---|
| | | displayOptions: {
|
|---|
| | | // 显示信息配置
|
|---|
| | | // velocityType: 'Global Wind',
|
|---|
| | | velocityType: 'GBR Wind',
|
|---|
| | | displayPosition: 'bottomleft',
|
|---|
| | | displayEmptyString: 'No wind data'
|
|---|
| | | },
|
|---|
| | | data: this.windALLData, // 数据 格式可参照
|
|---|
| | | // 以下为控制参数，后面为默认值
|
|---|
| | | minVelocity: 0, // 粒子最小速度（ m/s ）
|
|---|
| | | maxVelocity: 8, // 粒子最大速度（ m/s ）
|
|---|
| | | velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )
|
|---|
| | | particleAge: 50, // 粒子在再生之前绘制的最大帧数
|
|---|
| | | lineWidth: 1.5, // 绘制粒子的线宽
|
|---|
| | | particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）
|
|---|
| | | frameRate: 15, // 每秒所需的帧数
|
|---|
| | | colorScale: [
|
|---|
| | | '#A2D839',
|
|---|
| | | '#7EB530',
|
|---|
| | | '#6E9F26',
|
|---|
| | | '#4E7522',
|
|---|
| | | '#345B1B',
|
|---|
| | | '#186303',
|
|---|
| | | '#175103',
|
|---|
| | | '#053F03'
|
|---|
| | | ]
|
|---|
| | | // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']
|
|---|
| | | }, { collapsed: false, hideSingleBase: true })
|
|---|
| | | velocityLayer.addTo(this.map) // 添加到图上
|
|---|
| | | },
|
|---|
| | | // 将页码，及每页显示的条数以参数传递提交给后台
|
|---|
| | | alertData(n1, n2) {
|
|---|
| | |
|---|
| | | startTime: this.dateValue[0],
|
|---|
| | | endTime: this.dateValue[1],
|
|---|
| | | index: this.factorValue,
|
|---|
| | | alarmType: this.alartValue,
|
|---|
| | | },
|
|---|
| | | alarmType: this.alartValue
|
|---|
| | | }
|
|---|
| | | }).then((res) => {
|
|---|
| | | // console.log('分页数据')
|
|---|
| | | // console.log(res)
|
|---|
| | |
|---|
| | | },
|
|---|
| | | closeAlarmTableVisible() {
|
|---|
| | | this.$store.state.alarmTableVisible = false
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | |
|
|---|
| | |
|---|
| | | .my-div-icon {
|
|---|
| | | font-size: 14px;
|
|---|
| | | text-align: center;
|
|---|
| | | padding-left: 20px;
|
|---|
| | | padding-top: 6px;
|
|---|
| | | padding-top: 13px;
|
|---|
| | | 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;
|
|---|
| | |
|---|
| | | margin-left: -45px;
|
|---|
| | | margin-top: -40px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | </style>
|
|---|
