明细表动态渲染

wangqi

2021-04-06 95fdec54d006ddd9bedd632486b708ba03a78cb3

明细表动态渲染

 src/api/mapApi.js

@@ -28,9 +28,14 @@
  getSolidWasteSurveyDetail (data) {
    return axios.get(mapUrl.getSolidWasteSurveyDetail, data)
  },
  // 废气点加载
  getWasteGas (data) {
    return axios.get(mapUrl.getWasteGas, data)
  },
  // 废气明细表
  getWasteGasDetails (data) {
    return axios.get(mapUrl.getWasteGasDetails, data)
  },
  getWasteWater (data) {
    return axios.get(mapUrl.getWasteWater, data)
  },

 src/api/mapUrl.js

@@ -11,6 +11,7 @@
export const getSolidWasteSurveyDetail = $HOST + '/wasteSolid/getSolidWasteSurveyDetail'

export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'

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


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

@@ -6,13 +6,37 @@
            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>
            <el-tag>废气流量 : 120343.18</el-tag>
        </div>
        <div style="width:750px;height:260px;" id="echarts" ref="main"></div>
      <div class="form-echrts">
        <div>
          <el-button size="mini" round @click="dialogVisible = true">明细表</el-button>
          <el-dialog  :visible.sync="dialogVisible"
                      :append-to-body="true"
                      width="66%"
                      center
                      >
            <div class="el-dialog-div" style="height: 600px">
              <public-detailed-list v-bind="$attrs"></public-detailed-list>
            </div>
          </el-dialog>
        </div>
        <div style="width:750px;height:260px;" id="echarts" ref="main">
        </div>
      </div>
    </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/GasComponents/PublicDetailedList'
export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    drawChart: function () {
      const myChart = this.$echarts.init(this.$refs.main)
@@ -195,10 +219,21 @@
        border: none;
        padding: 0 15px;
    }
  #echarts{
    margin: 0;
    padding: 0;
    border: 1px solid #396d83;
    margin: 10px 10px 10px 10px;
    .form-echrts{
      width: 100%;
      height: 100%;
      border: 1px solid #396d83;
      //margin: 10px 10px 10px 10px;
      .el-dialog-div{
        //height: 50vh!important;
        overflow: auto;
        //overflow: hidden;
      }
      #echarts {
        margin: 0;
        padding: 0;
        //border: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
    }
  }
</style>

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

@@ -10,7 +10,7 @@
            <li @click='tabTaggle("ECharts")'>月数据</li>
            <li @click='tabTaggle("ECharts")'>人工数据</li>
        </ul>
        <component :is="currentTab"></component>
        <component :is="currentTab" v-bind="$attrs"></component>
    </div>
</template>


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

New file
@@ -0,0 +1,51 @@
<template>
  <div class="PublicDetailedList">
    <el-table :data="tableData" max-height="600px">
      <el-table-column prop="OnLineMonEmissPointName" label="排放点"></el-table-column>
      <el-table-column prop="MonTimeStr" label="监测时间"></el-table-column>
      <el-table-column  label="氮氧化物">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
      </el-table-column>
      <el-table-column label="二氧化硫">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
      </el-table-column>
      <el-table-column  label="烟尘">
        <el-table-column prop="MonQty" label="浓度(mg/m³)"></el-table-column>
        <el-table-column prop="OrglQty" label="折算值(mg/m³)"></el-table-column>
        <el-table-column prop="ConvertQty" label="标准值(mg/m³)"></el-table-column>
        <el-table-column prop="EmissQty" label="排放量(kg/h)"></el-table-column>
      </el-table-column>
      <el-table-column  label="废气流量">
        <el-table-column prop="StdValue" label="气量"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'PublicDetailedList',
  data () {
    return {
      tableData: []
    }
  },
  mounted () {
    this.tableData = this.$attrs.getWasteGasDetails
    console.log(this.$attrs.getWasteGasDetails)
  }
}

</script>

<style scoped>
.PublicDetailedList{
  /*height: 100%*/
}
</style>

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -10,7 +10,7 @@
                    :setWasteGasdata="setWasteGasdata"></PublicTabs>
        <div class="public-bounced-content-left-bottom">
          <PublicTable v-if="value === 'gufei'" :displayContentTable="displayContentTable"></PublicTable>
          <PublicChart v-else></PublicChart>
          <PublicChart :getWasteGasDetails="getWasteGasDetails" v-else></PublicChart>
        </div>
      </div>
      <div class="public-bounced-content-right">
@@ -43,7 +43,8 @@
      displayContentTab: '',
      displayContentTable: '',
      flag: false,
      value: ''
      value: '',
      getWasteGasDetails: []
    }
  },
  methods: {
@@ -56,8 +57,10 @@
      this.flag = true
      this.value = value
    },
    setGasData (data, value) {
    setGasData (data, dataDetails, value) {
      this.setWasteGasdata = data
      this.getWasteGasDetails = dataDetails
      // console.log(dataDetails)
      this.displayContentTitle = data.Name
      this.flag = true
      this.value = value

 src/components/LayerController/logic/WasteGas.js

@@ -50,13 +50,14 @@
  this.clickListener = async (e) => {
    // console.log(e)
    this.animalService.pulseEffect(e.latlng)
    // const dataValue = {
    //   StoragePlaceId: e.layer.options.test.StoragePlaceId
    // }
    // const result = await mapApi.getWasteGas(dataValue)
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    const result = await mapApi.getWasteGasDetails(dataValue)
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.setGasData(e.layer.options.test, 'feiqi')
    instance.setGasData(e.layer.options.test, result.Result.DataInfo, 'feiqi')
    // console.log(e.layer.options.test)
    instance.$mount()
    document.body.appendChild(instance.$el)