修改弹窗折线统计

zhangshuaibao

2021-03-31 9ebe61e0dd331eeb53c3b0cb022c732ceb9e6b87

修改弹窗折线统计

 public/assets/images/map/wastewater/fs_green.png

 public/assets/images/map/wastewater/fs_yellow.png

 src/api/mapApi.js

@@ -16,6 +16,6 @@
    return axios.get(mapUrl.getSolidWaste, data)
  },
  getWasteWater (data) {
    return axios.get(mapUrl.GetWasteWater, data)
    return axios.get(mapUrl.getWasteWater, data)
  }
}

 src/api/mapUrl.js

@@ -7,4 +7,4 @@

export const getSolidWaste = $HOST + '/wasteSolid/getSolidWaste'

export const GetWasteWater = $HOST + '/wasteWater/getWasteWater'
export const getWasteWater = $HOST + '/wasteWater/getWasteWater'

 src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue

New file
@@ -0,0 +1,64 @@
<template>
  <!-- 框 -->
  <div class="win">
    <div class="main">
      <div class="main-matter">
        <el-row type="flex" class="row-bg row-item-one" justify="space-around">
          <el-col :span="12">氮氧化物:{{ displayContent.Name }} 标准: 100</el-col>
          <el-col :span="12">二氧化硫:{{ displayContent.DeptSname }} 标准: 50</el-col>
          <el-col :span="12">烟尘:{{ displayContent.EmissTypeName }} 标准: 30</el-col>
          <el-col :span="12">废气流量:{{ displayContent.EmissTypeName }}</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EchartsTab',
  props: ['displayContent'],
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">

.win {
  position: relative;
  margin-bottom: 13px;
  background-color: rgba(33, 41, 69,0.9);
}
.main {
  width: 100%;
  height: 100%;
  .main-matter{
    font-size: 13px;
    font-weight: normal;
    border: 1px solid #396d83;
    .row-item-one{
      margin-bottom: 7px;
    }
    .el-row {
      width: 100%;
      color: #00d0f9;
      display: flex;
      font-size: 12px !important;
      .el-col{
        flex: 1;
        width: 100%;
        background-color: #243a55;;
        text-align: center;
        line-height: 28px;
        margin-left: 6px;
        border-radius: 4px;
        &:nth-child(1){
          margin-left:0;
        }
      }
    }
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue

@@ -1,15 +1,7 @@
<template>
  <!-- 框 -->
  <div class="win">
    <!-- 四个角的边框效果 -->
    <div class="main">
        <div id="echarts" ref="main"></div>
        <div class="border_corner border_corner_left_top"></div>
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
      </div>
  </div>
</template>

<script>
@@ -157,12 +149,8 @@
</script>

<style scoped lang="less">
    .win {
        /*width: 100%;*/
        /*height: 100%;*/
        position: relative;
        //display: inline-block;
        background-color: rgba(33, 41, 69,0.9);
    .main{
        background: #00fff6;
    }
    #echarts{
        width: 600px;
@@ -170,38 +158,5 @@
        position: relative;
        margin: 0;
        padding: 0;
    }
    .border_corner{
        z-index: 2500;
        position: absolute;
        width: 14px;
        height: 14px;
        background: rgba(0,0,0,0);
        border: 2px solid #47d5ea;
    }
    .border_corner_left_top{
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
    }
    .border_corner_right_top{
        top: 0;
        right: 0;
        border-left: none;
        border-bottom: none;
    }
    .border_corner_left_bottom{
        bottom: 0;
        left: 0;
        border-right: none;
        border-top: none;
        border-bottom-left-radius: 4px;
    }
    .border_corner_right_bottom{
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue

@@ -1,11 +1,13 @@
<template>
<div>
  <el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    <el-tab-pane label="实试数据" name="first">实试数据</el-tab-pane>
    <el-tab-pane label="日数据" name="second">日数据</el-tab-pane>
    <el-tab-pane label="月数据" name="third">月数据</el-tab-pane>
    <el-tab-pane label="人工数据" name="fourth">人工数据</el-tab-pane>
  </el-tabs>
  <EchartsTab :></EchartsTab>
  <GasECharts></GasECharts>>
</div>
</template>


 src/components/LayerController/logic/SolidWaste.js

@@ -20,7 +20,7 @@
      layer: layer
    })
    const res = await mapApi.getSolidWaste()
    // console.log(res)
    console.log(res)
    const data = res.Result.DataInfo || {}
    for (let i = 0; i < data.length; i++) {
      // 经纬度 位置

 src/components/LayerController/logic/WasteWater.js

@@ -2,48 +2,62 @@
 * 废水
 */
const AnimalService = require('../service/AnimalService').default
const AjaxUtils = require('../../../utils/AjaxUtils').default
const mapApi = require('../../../api/mapApi').default

// const getWasteWater = require('../../../utils/axios').default
const testValue1 = '/assets/images/map/wastewater/fs_green.png'
const testValue2 = '/assets/images/map/wastewater/fs_yellow.png'

module.exports = function () {
  /**
   * 返回marker对象数组
   * @param L leaflet对象
   */
  this.init = (layer, L) => {
    this.animalService = new AnimalService({ L: L, layer: layer })
    AjaxUtils.get4JsonDataByUrl('http://10.246.162.140:8080/EPInterface/DataService/EPMapService.asmx/ObtainningConInfo', {
      companyId: 3900100145,
      id: '',
      monType: 1,
      userCode: 'wenchun.deng',
      monDuration: '',
      epName: '',
      secdDeptId: '',
      contrLevel: '',
      dataStatus: '',
      dataFlag: '',
      runStatus: '',
      emissTypeId: ''
    }, function (res) {
      console.log(res)
      const data = res.data.Result.DataInfo
      for (let i = 0; i < data.length; i++) {
        // 经纬度 位置
        const positionX = data[i].Latitude
        const positionY = data[i].Longitude
        layer.addLayer(L.marker([positionX, positionY], {}))
      }
  this.init = async (layer, L) => {
    this.animalService = new AnimalService({
      L: L,
      layer: layer
    })
    const res = await mapApi.getWasteWater()
    console.log(res)
    const data = res.Result.DataInfo
    console.log(data)
    for (let i = 0; i < data.length; i++) {
      // 经纬度 位置
      const positionX = data[i].Latitude
      const positionY = data[i].Longitude

      // 定义类型 用来区分数据的不同
      const testValue = data[i].ContrLevel
      const iconUrl = this.differentTypes(testValue)
      const marker = L.marker.magic([positionX, positionY], {
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [50, 50],
          iconAnchor: [25, 25]
        })
      })
      layer.addLayer(marker)
    }
  }

  this.bindTooltip = (layer) => {
    return 'aaaa'
    return '测试废水'
  }

  this.clickListener = (e) => {
    console.log(e)
    // console.log(e)
    this.animalService.pulseEffect(e.latlng)
    return this.PublicBounced.$el
  }

  // 根据返回值的不同标记不同图片
  this.differentTypes = (testValue) => {
    let testChange
    if (testValue === 1) {
      testChange = testValue1
    } else {
      testChange = testValue2
    }
    return testChange
  }
}

 src/conf/layers/LayerWasteWater.js

@@ -8,7 +8,7 @@
  checked: true,
  layers: [
    {
      code: 'fsqy',
      code: 'wasteWaterqy',
      name: '企业',
      sname: '企业', // 表名
      checked: true, // 默认选中状态
@@ -25,7 +25,7 @@
      childLayer: 'fsss,hbss' // 关联PointLayers
    },
    {
      code: 'fspfk',
      code: 'wasteWaterfk',
      name: '排放口',
      sname: '排放口',
      checked: true, // 默认选中状态

 src/views/MapTemplate.vue

@@ -18,7 +18,7 @@
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
<!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
<!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>
<!--    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>-->
    <PublicBounced ref="PublicBounced"></PublicBounced>
  </div>
</template>
@@ -60,7 +60,6 @@
  },
  data () {
    return {
      // isShowBtn: false,
      map: null,
      lcServiceLayerVisible: false,
      basemapHelper: {},
@@ -79,25 +78,6 @@
    })
  },
  methods: {
    AddGasHelper () {
      const data = {
        companyId: 3900100145,
        id: '',
        monType: 2,
        userCode: 'wenchun.deng',
        monDuration: '',
        epName: '',
        secdDeptId: '',
        contrLevel: '',
        dataStatus: '',
        dataFlag: '',
        runStatus: '',
        emissTypeId: ''
      }
      const AddGas = new AddGasHelper({ map: this.map })
      AddGas.requestData(data)
      AddGas.SetPlueGasContent(this.config, this.$refs.PublicBounced)
    },
    saveMapStatus () {
      window.serviceLayerHelper = this.serviceLayerHelper
      this.$store.commit('setMapObj', this.map)