弹框接收信息展示修改

chenzeping

2021-04-01 0ca297f9622764653a7262b51bdff73b553dee79

弹框接收信息展示修改

 src/api/mapApi.js

@@ -20,6 +20,10 @@
  getSolidWasteBaseInfo (data) {
    return axios.get(mapUrl.getSolidWasteBaseInfo, data)
  },
  // 固废详细信息
  getSolidWasteDetail (data) {
    return axios.get(mapUrl.getSolidWasteDetail, data)
  },
  getWasteWater (data) {
    return axios.get(mapUrl.getWasteWater, data)
  },

 src/api/mapUrl.js

@@ -7,6 +7,7 @@

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

export const GetWasteGas = $HOST + '/wasteGas/getWasteGas'


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

@@ -9,14 +9,14 @@
    <div class="main">
      <div class="main-matter">
        <el-row type="flex" class="row-bg row-item-one" justify="space-around">
          <el-col :span="12">监测点名称:{{ displayContentTab2.StoragePlaceName }}</el-col>
          <el-col :span="12">生产单位:{{ displayContentTab2.StoragePlaceName }}</el-col>
          <el-col :span="12">排放类型加载:{{ displayContentTab2.DesignFloorArea }}</el-col>
          <el-col :span="8">监测点名称:{{ displayContentTab2.StoragePlaceName }}</el-col>
          <el-col :span="8">生产单位:{{ displayContentTab2.StoragePlaceName }}</el-col>
          <el-col :span="8">排放类型加载:{{ displayContentTab2.DesignFloorArea }}</el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="12">排放去向:{{ displayContentTab2.StorageQty }}</el-col>
          <el-col :span="12">控制级别名称:{{ displayContentTab2.SurplusFloorArea }}</el-col>
          <el-col :span="12">内/外排口:{{ displayContentTab2.StorageDate }}</el-col>
          <el-col :span="8">排放去向:{{ displayContentTab2.StorageQty }}</el-col>
          <el-col :span="8">控制级别名称:{{ displayContentTab2.SurplusFloorArea }}</el-col>
          <el-col :span="8">内/外排口:{{ displayContentTab2.StorageDate }}</el-col>
        </el-row>
      </div>
    </div>

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

@@ -7,18 +7,19 @@
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-video">
        <el-table
            tooltip-effect="dark"
            :data="data"
        >
          <el-table-column prop="name" label="序号"></el-table-column>
          <el-table-column prop="name" label="类别"></el-table-column>
          <el-table-column prop="date" label="固废名称"></el-table-column>
          <el-table-column prop="address" label="代码"></el-table-column>
          <el-table-column prop="address" label="产生量"></el-table-column>
          <el-table-column prop="name" label="储存量"></el-table-column>
          <el-table-column prop="date" label="产生装置"></el-table-column>
        </el-table>
<!--        <el-table-->
<!--            tooltip-effect="dark"-->
<!--            :data="displayContentTable2"-->
<!--        >-->
<!--          <el-table-column prop="StoragePlaceId" label="序号"></el-table-column>-->
<!--          <el-table-column prop="StoragePlaceTypeName" label="类别"></el-table-column>-->
<!--          <el-table-column prop="StoragePlaceName" label="固废名称"></el-table-column>-->
<!--          <el-table-column prop="StorageZDMJ" label="代码"></el-table-column>-->
<!--          <el-table-column prop="StorageZCNL" label="产生量"></el-table-column>-->
<!--          <el-table-column prop="StorageZCL" label="储存量"></el-table-column>-->
<!--          <el-table-column prop="StorageType" label="产生装置"></el-table-column>-->
<!--        </el-table>-->
        <span>{{ displayContentTable3.StoragePlaceTypeName }}</span>
      </div>
    </div>
  </div>
@@ -27,34 +28,30 @@
<script>
export default {
  name: 'PublicTable',
  props: ['requestSolidWasteData'],
  props: ['displayContentTable'],
  data () {
    return {
      data: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区'
      }]
      displayContentTable2: [
        {
          CompanyName: '中韩石化',
          StoragePlaceId: 3,
          StoragePlaceName: '灰渣场',
          StoragePlaceTypeName: '一般固废填埋场',
          StorageType: '粉煤灰、灰渣',
          StorageZCL: '38',
          StorageZCNL: '40.7',
          StorageZDMJ: '10.60798'
        }
      ],
      displayContentTable3: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getSolidWasteData()
      this.displayContentTable.forEach(item => {
        this.displayContentTable3 = item
    })
  },
  methods: {
    getSolidWasteData () {
      // const data = requestSolidWasteData
      // console.log(data)
    }
    })
  }
}
</script>

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -8,7 +8,7 @@
      <div class="public-bounced-content-left">
        <GasTab :displayContentTab="displayContentTab" ></GasTab>
        <div class="public-bounced-content-left-bottom">
          <PublicTable v-if="value === 'gufei'"></PublicTable>
          <PublicTable v-if="value === 'gufei'" :displayContentTable="displayContentTable"></PublicTable>
          <GasECharts v-else></GasECharts>
        </div>
      </div>
@@ -40,16 +40,18 @@
    return {
      displayContentTitle: '',
      displayContentTab: '',
      displayContentTable: '',
      flag: false
    }
  },
  methods: {
    setData (data, value) {
      data.forEach((item, index) => {
        // console.log(item.StoragePlaceName)
    setData (dataBasic, dataDetailed, value) {
      console.log(dataDetailed)
      dataBasic.forEach(item => {
        this.displayContentTitle = item.StoragePlaceName
      })
      this.displayContentTab = data
      this.displayContentTab = dataBasic
      this.displayContentTable = dataDetailed
      this.flag = true
      this.value = value
    },

 src/components/LayerController/logic/SolidWaste.js

@@ -36,7 +36,7 @@
      var iconUrl = this.differentTypes(judgeValue)

      const marker = L.marker([positionX, positionY], {
        test: getSolidWasteData[i],
        totransferData: getSolidWasteData[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [50, 50],
@@ -48,7 +48,7 @@
  }

  this.bindTooltip = (layer) => {
    return layer.options.test.Name
    return layer.options.totransferData.Name
  }

  this.clickListener = (e) => {
@@ -60,29 +60,6 @@
    this.requestSolidWasteData(e).then(e)
  }

  // 根据点击不同数据 进行接口的数据请求
  this.requestSolidWasteData = async (e) => {
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    const result = await mapApi.getSolidWasteBaseInfo(dataValue)
    // console.log(result)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.$mount()
    document.body.appendChild(instance.$el)
    instance.setData(result.Result.DataInfo, 'gufei')
  }

  // flayTo()
  // this.setPanTo = (pos, value) => {
  //   var position = pos
  //   position = this.map.latLngToLayerPoint(position)
  //   position.y += value
  //   position = this.map.layerPointToLatLng(position)
  //   this.map.flyTo(position)
  // }

  // 不同类型图片封装
  this.differentTypes = (judgeValue) => {
    var effectOfChange
@@ -93,4 +70,30 @@
    }
    return effectOfChange
  }

  // 根据点击不同数据 进行接口的数据请求
  this.requestSolidWasteData = async (e) => {
    // 基本信息展示
    const dataValue = {
      StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
    }
    const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
    // 详细信息展示
    const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)

    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.$mount()
    document.body.appendChild(instance.$el)
    instance.setData(resultBasic.Result.DataInfo, resultDetailed, 'gufei')
  }

  // flayTo()
  // this.setPanTo = (pos, value) => {
  //   var position = pos
  //   position = this.map.latLngToLayerPoint(position)
  //   position.y += value
  //   position = this.map.layerPointToLatLng(position)
  //   this.map.flyTo(position)
  // }
}