fix:接口修改和echarts修改

quanyawei

2023-10-08 d1b793c51a67e7aebf04d35c0200b21681337024

 src/components/Wind/Map.vue

@@ -13,8 +13,7 @@
        class="left"

        :class="{ click: changeColor === index }"

        @click="change(index)"

        >{{ item }}</span

      >

      >{{ item }}</span>

      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->

      <span class="right">{{ times }}秒</span>

      <span class="dropDown">

@@ -23,170 +22,170 @@
          :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

@@ -197,7 +196,7 @@
          "

          class="dayDiv"

        >

          <p class="p1"></p>

          <p class="p1" />

          <p style="position: relative">

            <span

              class="borderLine"

@@ -208,8 +207,8 @@
                height: 47px;

                bottom: 0;

              "

            ></span>

            <span class="p2"></span>

            />

            <span class="p2" />

            <span

              class="borderLine"

              style="

@@ -219,9 +218,9 @@
                height: 47px;

                bottom: 0;

              "

            ></span>

            />

          </p>

          <p class="p3"></p>

          <p class="p3" />

        </div>

      </div>

    </div>

@@ -264,9 +263,10 @@
              :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

@@ -314,9 +314,10 @@
        @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>

@@ -332,6 +333,7 @@
import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件

import { mapGetters } from 'vuex'

import { gcj02towgs84 } from '@/assets/json/transform'

import requestObj from '@/utils/request'

export default {

  components: { RegionalOverview },

  props: {

@@ -339,7 +341,7 @@
    weidu: Number,

    jingdu: Number,

    monitorPointId: Number,

    monitorPointIds: Array,

    monitorPointIds: Array

  },

  data() {

    return {

@@ -388,70 +390,70 @@
      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'),

@@ -462,11 +464,11 @@
      chooseTime: false,

      dateInfo: '', // 选择的日期

      timeInfo: '', // 选择的时间

      nyr: '', // 选择的年月日

      nyr: '' // 选择的年月日

    }

  },

  computed: {

    ...mapGetters(['regionCode']),

    ...mapGetters(['regionCode'])

  },

  watch: {

    dateValue(n, o) {

@@ -475,11 +477,17 @@
    },

    regionCode(newCode, oldCode) {

      this.timerKey = newCode // 用于监听code变化重新渲染子组件

    },

    }

  },

  mounted() {

    this.currentHour()

    this.$Bus.$on('alarmTableVisible', (res) => (this.alarmTableVisible = res))

    this.$Bus.$on(

      'alarmTableVisible',

      (res) => (

        (this.alarmTableVisible = res),

        this.alertData(this.PageSize, this.currentPage)

      )

    )

    // 初始化地图容器

    this.initMap()



@@ -496,7 +504,7 @@
    this.getParamsData()

    this.windDir()

    this.newDate()

    this.alertData(this.PageSize, this.currentPage)

    // this.alertData(this.PageSize, this.currentPage)

  },

  beforeDestroy() {

    if (this.timer) {

@@ -676,7 +684,7 @@
      }

      // 鼠标移入移出事件

      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%)'

@@ -687,13 +695,13 @@
          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 + '%'

@@ -704,7 +712,7 @@
          inText.innerHTML = times + ':00'

          // console.log(mouseDiv)

        }

        timeLis[i].onmouseleave = function () {

        timeLis[i].onmouseleave = function() {

          mouseDiv.style.display = 'none'

          // console.log('移出事件', i)

        }

@@ -989,7 +997,7 @@
    deviceMaker() {

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function (layer) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

@@ -1009,11 +1017,11 @@
          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')

        console.log(data, 'tata')

        that.loading = false

        this.markDeviceSite(data)

      })

@@ -1334,23 +1342,24 @@
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

          // iconUrl: require('@/assets/icon/ico2.png'),

          iconSize: [60, 60],

          iconAnchor: [13, 21],

          className: 'my-device',

          iconAnchor: [30, 48],

          className: 'my-device'

        })

        // 添加标记到地图

        L.marker([lat, lng], {

          icon: blueIcon,

          icon: blueIcon

        }).addTo(group)

        // console.log(JSON.parse(this.keys[i]))

        var myIcon = L.divIcon({

          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: 30,

          iconSize: [60, 60],

          iconAnchor: [40, 40]

        })

        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)

        // 给标记添加鼠标移入事件，mouseover事件会冒泡

        var _this = this

        marker.on('mouseover', function (e) {

        marker.on('mouseover', function(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, '')

@@ -1364,10 +1373,15 @@
              params: {

                mac: keyData[i].mac,

                chooseTime: _this.chooseTime,

                time: _this.nyr,

              },

                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, '')

@@ -1395,7 +1409,7 @@
            })

        })

        // 给标记点添加鼠标移出事件

        marker.on('mouseout', function (e) {

        marker.on('mouseout', function(e) {

          this.noneData = false

          this.bindPopup().closePopup()

        })

@@ -1413,8 +1427,8 @@
        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002',

        },

          sensorCode: 'a34002'

        }

      })

        .then((res) => {

          // console.log('国控站信息')

@@ -1429,19 +1443,19 @@
              // 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)

          }

        })

@@ -1473,7 +1487,7 @@
      // const that = this

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function (layer) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

@@ -1510,7 +1524,7 @@
      this.getParamsData()

      setTimeout(() => {

        $.getJSON(

          'http://47.99.64.149:8080/screen_api_v2/screen/windAndDeviceDataByArea',

          `${requestObj.baseUrl}/screen_api_v2/screen/windAndDeviceDataByArea`,

          { monitorPointId: this.$store.state.monitorPointId },

          (data) => {

            // 遍历所有图层

@@ -1596,7 +1610,7 @@
        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(

@@ -1659,7 +1673,7 @@
      //   console.log(this.monitorPointId)

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function (layer) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

@@ -1685,8 +1699,8 @@
        params: {

          monitorPointIds: this.monitorPointIds.toString(),

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

          // console.log('新风场数据')

@@ -1711,7 +1725,7 @@
              // velocityType: 'Global Wind',

              velocityType: 'GBR Wind',

              displayPosition: 'bottomleft',

              displayEmptyString: 'No wind data',

              displayEmptyString: 'No wind data'

            },

            data: res.data[0], // 数据  格式可参照

            // data: data2,

@@ -1731,8 +1745,8 @@
              '#345B1B',

              '#186303',

              '#175103',

              '#053F03',

            ],

              '#053F03'

            ]

            // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']

          })

          velocityLayer.addTo(this.map) // 添加到图上

@@ -1758,8 +1772,8 @@
          startTime: this.dateValue[0],

          endTime: this.dateValue[1],

          index: this.factorValue,

          alarmType: this.alartValue,

        },

          alarmType: this.alartValue

        }

      }).then((res) => {

        // console.log('分页数据')

        // console.log(res)

@@ -1820,8 +1834,8 @@
    },

    closeAlarmTableVisible() {

      this.$store.state.alarmTableVisible = false

    },

  },

    }

  }

}

</script>



@@ -2112,4 +2126,9 @@
  background-color: #ff0000 !important;

  color: #790000 !important;

}

.leaflet-marker-icon.leaflet-interactive {

  pointer-events: auto;

  margin-left: -45px;

  margin-top: -40px;

}

</style>