| | |
|---|
| | | alt=""
|
|---|
| | | @click="turnState"
|
|---|
| | | >
|
|---|
| | | <span class="text_Time">{{ dateFormat }}</span>
|
|---|
| | | <span class="text_Time">
|
|---|
| | | <el-date-picker
|
|---|
| | | v-model="selectData"
|
|---|
| | | popper-class="tpc"
|
|---|
| | | value-format="yyyy-MM-dd HH"
|
|---|
| | | format="yyyy-MM-dd HH"
|
|---|
| | | :clearable="false"
|
|---|
| | | :editable="false"
|
|---|
| | | type="datetime"
|
|---|
| | | :picker-options="pickerOptions"
|
|---|
| | | placeholder="选择日期时间"
|
|---|
| | | @change="changeData"
|
|---|
| | | />
|
|---|
| | | </span>
|
|---|
| | | <img
|
|---|
| | | class="drop-icon"
|
|---|
| | | :src="turnImg"
|
|---|
| | |
|---|
| | | 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,
|
|---|
| | |
|---|
| | | clickmac: '',
|
|---|
| | | childerItem: {},
|
|---|
| | | farterItem: {},
|
|---|
| | | indexsLaber: 0
|
|---|
| | | indexsLaber: 0,
|
|---|
| | | time: new Date()
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | |
|---|
| | | methods: {
|
|---|
| | | // 拿到某天的日期和星期
|
|---|
| | | getDayXQ (day) {
|
|---|
| | | var days = new Date().getDay() // 星期
|
|---|
| | | var days = new Date().getDay() // 星期 // 星期
|
|---|
| | | var rq = '' // 日期
|
|---|
| | | if (day === 'today') {
|
|---|
| | | rq = this.newData(0)
|
|---|
| | | rq = this.newData(0) // 今天日期
|
|---|
| | | } else if (day === 'yesterday') {
|
|---|
| | | days = (days + 7 - 1) % 7
|
|---|
| | | rq = this.newData(-1) // 昨天日期
|
|---|
| | |
|---|
| | | inText2.innerHTML = times + ':00'
|
|---|
| | | this.chooseTimeInfo = true // 选择时间点
|
|---|
| | | this.chooseTime = true // 选择时间点
|
|---|
| | | console.log('times', times)
|
|---|
| | | if ((i + 1) / 24 < 1) {
|
|---|
| | | this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
|
|---|
| | | } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {
|
|---|
| | |
|---|
| | | inText2.innerHTML = times + ':00'
|
|---|
| | | this.chooseTimeInfo = true // 选择时间点
|
|---|
| | | this.chooseTime = true // 选择时间点
|
|---|
| | | console.log('times', times)
|
|---|
| | | if (i / 24 < 1) {
|
|---|
| | | this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'
|
|---|
| | | } else if (i / 24 < 2 && i / 24 >= 1) {
|
|---|
| | |
|---|
| | | }
|
|---|
| | | }).then(data => {
|
|---|
| | | this.markDeviceSite(data)
|
|---|
| | | this.stateControlStation()// 遍历国控站位置
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | // 标记设备点
|
|---|
| | | markDeviceSite (data) {
|
|---|
| | | var keyData = data.data.devices
|
|---|
| | | this.keyData = data.data.devices
|
|---|
| | | // 遍历国控站位置
|
|---|
| | | // this.stateControlStation()
|
|---|
| | | var groupIcon = L.layerGroup().addTo(this.map)
|
|---|
| | | var groupText = L.layerGroup().addTo(this.map)
|
|---|
| | | this.keys = []
|
|---|
| | |
|---|
| | | bgColorList.tvoccolorbg = '#999999'
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case data === '-': {
|
|---|
| | | bgColorList.tvoccolorbg = '#999999'
|
|---|
| | | break
|
|---|
| | | }
|
|---|
| | | case data === 0: {
|
|---|
| | | bgColorList.tvoccolorbg = '#688fb1'
|
|---|
| | | break
|
|---|
| | |
|---|
| | | // })
|
|---|
| | | window.map = map
|
|---|
| | | },
|
|---|
| | | changeData (val) {
|
|---|
| | | console.log(val)
|
|---|
| | | this.nyr = val + ':00'
|
|---|
| | | const date = new Date(this.nyr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2})(?!\d)/, '$1 $2:00'))
|
|---|
| | |
|
|---|
| | | console.log(date)
|
|---|
| | | this.chooseTime = true
|
|---|
| | | // var p1 = document.querySelector('.p1')
|
|---|
| | | // var p2 = document.querySelector('.p2')
|
|---|
| | | // var p3 = document.querySelector('.p3')
|
|---|
| | | // this.time = date
|
|---|
| | | // p3.innerHTML = this.getDayXQ('today')
|
|---|
| | | // p2.innerHTML = this.getDayXQ('yesterday')
|
|---|
| | | // p1.innerHTML = this.getDayXQ('beforeYea')
|
|---|
| | | this.initData()
|
|---|
| | | },
|
|---|
| | | // 更改不同的值区间
|
|---|
| | | change (index) {
|
|---|
| | | this.changeColor = index
|
|---|
| | |
|---|
| | | stateControlStation () {
|
|---|
| | | // this.$axios.get('monitorPoint/queryStateControlStation', {
|
|---|
| | | this.$request({
|
|---|
| | | url: '/govMonitorPoint/queryStateControlStation',
|
|---|
| | | method: 'get',
|
|---|
| | | params: {
|
|---|
| | | regionCode: 130900,
|
|---|
| | | sensorCode: 'a34002'
|
|---|
| | | }
|
|---|
| | | url: '/govMonitorPoint/getGovMonitorPoints',
|
|---|
| | | method: 'get'
|
|---|
| | | })
|
|---|
| | | .then(res => {
|
|---|
| | | // console.log('国控站信息')
|
|---|
| | | // console.log(res)
|
|---|
| | | console.log('国控站信息')
|
|---|
| | | console.log(res)
|
|---|
| | | var gkData = res.data
|
|---|
| | | let _this = this
|
|---|
| | | var group = L.layerGroup().addTo(this.map)
|
|---|
| | | for (let i = 0; i < gkData.length; i++) {
|
|---|
| | | var glat = gkData[i].latitude
|
|---|
| | |
|---|
| | | var gIcon = L.icon({
|
|---|
| | | iconUrl: require('@/assets/icon/gk.png'),
|
|---|
| | | // iconUrl:require('@/assets/images/tl_PM10.png'),
|
|---|
| | | iconSize: [55, 55],
|
|---|
| | | iconAnchor: [13, 21],
|
|---|
| | | iconSize: [60, 60],
|
|---|
| | | iconAnchor: [30, 48],
|
|---|
| | | className: 'my-device'
|
|---|
| | | })
|
|---|
| | | // 添加标记到地图
|
|---|
| | | L.marker([glat, glng], {
|
|---|
| | | let marker = L.marker([glat, glng], {
|
|---|
| | | icon: gIcon
|
|---|
| | | }).addTo(group)
|
|---|
| | | var myIcon = L.divIcon({
|
|---|
| | | html: gkData[i].data,
|
|---|
| | | className: 'my-div-icon-g',
|
|---|
| | | iconSize: 30
|
|---|
| | | marker.inforData = gkData[i]
|
|---|
| | | marker.on('click', function (e) {
|
|---|
| | | console.log('Marker clicked!', e.target)
|
|---|
| | | _this.handleguoClick(gkData[i], e.target)
|
|---|
| | | })
|
|---|
| | | L.marker([glat, glng], {
|
|---|
| | | icon: myIcon
|
|---|
| | | }).addTo(group)
|
|---|
| | | // var myIcon = L.divIcon({
|
|---|
| | | // html: gkData[i].data,
|
|---|
| | | // className: 'my-div-icon-g',
|
|---|
| | | // iconSize: 30
|
|---|
| | | // })
|
|---|
| | | // L.marker([glat, glng], {
|
|---|
| | | // icon: myIcon
|
|---|
| | | // }).addTo(group)
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .catch(err => {
|
|---|
| | | console.log(err)
|
|---|
| | | })
|
|---|
| | | },
|
|---|
| | | handleguoClick (data, marker) {
|
|---|
| | | this.clickmac = ''
|
|---|
| | | this.childerItem = {}
|
|---|
| | | this.farterItem = {}
|
|---|
| | | this.indexsLaber = 0
|
|---|
| | | this.clickmac = marker.inforData.guid
|
|---|
| | | this.childerItem = marker.inforData
|
|---|
| | | console.log('this.defaultData', this.defaultData)
|
|---|
| | | this.defaultData.forEach(item => {
|
|---|
| | | if (item.devices) {
|
|---|
| | | item.devices.forEach((dev, index) => {
|
|---|
| | | if (dev.mac === marker.inforData.mac) {
|
|---|
| | | this.farterItem = item
|
|---|
| | | this.indexsLaber = index
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | this.$request({
|
|---|
| | | url: '/historyFiveMinutely/historyAqi',
|
|---|
| | | method: 'get',
|
|---|
| | | params: {
|
|---|
| | | guid: data.guid,
|
|---|
| | | }
|
|---|
| | | })
|
|---|
| | | .then(res => {
|
|---|
| | | if (res.message === '操作目标不存在') {
|
|---|
| | | var datafalse = '暂无数据'
|
|---|
| | | marker.bindPopup(datafalse).openPopup()
|
|---|
| | | return
|
|---|
| | | }
|
|---|
| | | this.childerItem.name = marker.inforData.name
|
|---|
| | | let colorliststyleBgColor = this.styleBgColor(res.data[0])
|
|---|
| | | console.log('colorliststyleBgColor', colorliststyleBgColor)
|
|---|
| | | let deviceDetails = _.cloneDeep(res.data[0])
|
|---|
| | | deviceDetails.name = marker.inforData.name
|
|---|
| | | deviceDetails.a99054 = '-'
|
|---|
| | | // eslint-disable-next-line no-unused-vars
|
|---|
| | | for (let key in deviceDetails) {
|
|---|
| | | if (deviceDetails[key] === null) {
|
|---|
| | | deviceDetails[key] = '-'
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | console.log('deviceDetails', deviceDetails)
|
|---|
| | | let htmlClassName = 'mypopupNoWind'
|
|---|
| | | let html = ` <div data-reactroot="" class="marker_maptip">
|
|---|
| | | <div class="marker_title_1nQ">
|
|---|
| | | <span >设备详情</span>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_firstline_2WH">
|
|---|
| | | <div class="marker_citypart_keg">
|
|---|
| | | <div class="marker_name_small_1VU">${deviceDetails.name}</div>
|
|---|
| | | <div class="marker_time_w5m">${deviceDetails.dataTime}</div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_indexpart_2UI">
|
|---|
| | | <div
|
|---|
| | | class="marker_indexname_3TP"
|
|---|
| | | style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"
|
|---|
| | | >
|
|---|
| | | TVOC
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_indexvalue_1O7">
|
|---|
| | | ${deviceDetails.a99054}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_secondline_2Om">
|
|---|
| | | <div class="marker_item_2Kk">
|
|---|
| | | <div
|
|---|
| | | class="marker_itemname_Wq5"
|
|---|
| | | style="color: black;background:${colorliststyleBgColor.pm25colorbg} "
|
|---|
| | | >
|
|---|
| | | PM2.5
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_itemvalue_1l1">
|
|---|
| | | ${this.handleCutZero(String(deviceDetails.a34004))}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_item_2Kk">
|
|---|
| | | <div
|
|---|
| | | class="marker_itemname_Wq5"
|
|---|
| | | style="color: black;background:${colorliststyleBgColor.pm10colorbg}"
|
|---|
| | | >
|
|---|
| | | PM10
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_itemvalue_1l1">
|
|---|
| | | ${this.handleCutZero(String(deviceDetails.a34002))}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_item_2Kk">
|
|---|
| | | <div
|
|---|
| | | class="marker_itemname_Wq5"
|
|---|
| | | style="color: black;background:${colorliststyleBgColor.so2colorbg}"
|
|---|
| | | >
|
|---|
| | | SO2
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_itemvalue_1l1">
|
|---|
| | | ${this.handleCutZero(String(deviceDetails.a21026))}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_item_2Kk">
|
|---|
| | | <div
|
|---|
| | | class="marker_itemname_Wq5"
|
|---|
| | | style="color: black;background:${colorliststyleBgColor.no210colorbg}"
|
|---|
| | | >
|
|---|
| | | NO2
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_itemvalue_1l1">
|
|---|
| | | ${this.handleCutZero(String(deviceDetails.a21004))}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_item_2Kk">
|
|---|
| | | <div
|
|---|
| | | class="marker_itemname_Wq5"
|
|---|
| | | style="color: black;background:${colorliststyleBgColor.cocolorbg}"
|
|---|
| | | >
|
|---|
| | | CO
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_itemvalue_1l1">
|
|---|
| | | ${this.handleCutZero(String(deviceDetails.a21005))}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_item_2Kk">
|
|---|
| | | <div
|
|---|
| | | class="marker_itemname_Wq5"
|
|---|
| | | style="color: black; background:${colorliststyleBgColor.o3colorbg}"
|
|---|
| | | >
|
|---|
| | | O3
|
|---|
| | | </div>
|
|---|
| | | <div class="marker_itemvalue_1l1">
|
|---|
| | | ${this.handleCutZero(String(deviceDetails.a05024))}
|
|---|
| | | </div>
|
|---|
| | | </div>
|
|---|
| | | </div> |
|---|
| | | </div>`
|
|---|
| | |
|
|---|
| | | marker.bindPopup(html, { className: htmlClassName }).openPopup()
|
|---|
| | | })
|
|---|
| | | .catch(err => {
|
|---|
| | | console.log(err)
|
|---|
| | |
|---|
| | | 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;
|
|---|
