弹框废气相关修改

chenzeping

2021-04-21 9a7a37389c784684cb848d86817fcc15f22e0f4a

弹框废气相关修改

 src/api/mapUrl.js

@@ -12,7 +12,7 @@

export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
export const DataItems = $HOST + '/wasteWater/RTDB/DataItems'
export const DataItems = $HOST + '/wasteGas/RTDB/DataItems' // 废气实时数据
export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData'
export const getWasteGasManualData = $HOST + '/wasteGas/QueryLabMonData'


 src/components/BaseNav/WasteGas/Detail.vue

@@ -1,56 +1,58 @@
<template>
  <el-table
      :data="tableData"
      style="width: 100%;height: 100%">
    <el-table-column
        prop="LabMonTime"
        label="检测时间">
    </el-table-column>
    <el-table-column
        label="氮氧化物">
      <el-table-column
          prop="NOMonTime"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="NOEndTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="二氧化硫">
      <el-table-column
          prop="SOMontime"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="SoEndTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="烟尘">
      <el-table-column
          prop="MonItemId"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="EndMonTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="非甲烷总烃">
      <el-table-column
          prop="MonItemId"
          label="监测值">
      </el-table-column>
      <el-table-column
          prop="MonItemId"
          label="标准值">
      </el-table-column>
    </el-table-column>
  </el-table>
 <div class="wastegas" style="width: 5rem;height: 1.5rem">
   <el-table
       :data="tableData"
       style="width: 100%;height: 100%">
     <el-table-column
         prop="LabMonTime"
         label="检测时间">
     </el-table-column>
     <el-table-column
         label="氮氧化物">
       <el-table-column
           prop="NOMonTime"
           label="监测值">
       </el-table-column>
       <el-table-column
           prop="NOEndTime"
           label="标准值">
       </el-table-column>
     </el-table-column>
     <el-table-column
         label="二氧化硫">
       <el-table-column
           prop="SOMontime"
           label="监测值">
       </el-table-column>
       <el-table-column
           prop="SoEndTime"
           label="标准值">
       </el-table-column>
     </el-table-column>
     <el-table-column
         label="烟尘">
       <el-table-column
           prop="MonItemId"
           label="监测值">
       </el-table-column>
       <el-table-column
           prop="EndMonTime"
           label="标准值">
       </el-table-column>
     </el-table-column>
     <el-table-column
         label="非甲烷总烃">
       <el-table-column
           prop="MonItemId"
           label="监测值">
       </el-table-column>
       <el-table-column
           prop="MonItemId"
           label="标准值">
       </el-table-column>
     </el-table-column>
   </el-table>
 </div>
</template>

<script>
@@ -78,7 +80,7 @@
        endTime: timeEnd
      }
      const result = (await mapApi.getWasteGasManualData(data)).Result.DataInfo
      console.log(result)
      // console.log(result)
      this.tableData = result
    }
  }

 src/components/BaseNav/WasteGas/HourData.vue

@@ -19,26 +19,25 @@
          </div>
        </div>
        <div class="detailbtn">查询</div>
        <div class="detailbtn">明细表</div>
        <div class="detailbtn" @click="ScheduleShow">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div>
    </div>
    <!-- 明细弹框 -->
    <!--        <el-dialog :visible.sync="dialogVisible"-->
    <!--                   :append-to-body="true"-->
    <!--                   width="68%"-->
    <!--                   center-->
    <!--                   v-dialogDrag-->
    <!--        >-->
    <!--            <div class="el-dialog-div" style="height: 500px">-->
    <!--                <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
    <!--            </div>-->
    <!--        </el-dialog>-->
<!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule"
               :modal="false"
               v-dialogDrag
    >
      <div class="el-dialog-div" style="height: 200px">
        <Scheduleof></Scheduleof>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof'
import PublicDataStandard from '../PublicDataStandard'

import dayjs from 'dayjs'
@@ -48,7 +47,8 @@
  name: 'HourData',
  components: {
    // PublicDetailedList
    PublicDataStandard
    PublicDataStandard,
    Scheduleof
  },
  data () {
    return {
@@ -98,6 +98,7 @@
        timeStart: null,
        timeEnd: null
      },
      showSchedule: false,
      dataType: 2,
      myChart: null,
      exhbzz: null,
@@ -111,6 +112,9 @@
    })
  },
  methods: {
    ScheduleShow () {
      this.showSchedule = !this.showSchedule
    },
    async initnData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')

 src/components/BaseNav/WasteGas/RealData.vue

@@ -27,7 +27,7 @@
            <el-option label="100" value="100"></el-option>
          </el-select>
        </div>
        <div class="detailbtn" @click="onSubmit">查询</div>
        <div class="detailbtn" @click="querySearch">查询</div>
      </div>
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
    </div>
@@ -97,21 +97,15 @@
      // 开始 /结束 时间 和采样点值的绑定值数据
      formInline: {
        region: '',
        timeStart: '',
        timeEnd: ''
      },

      // echarts的options数据传入
      echartsOptions: {
        legend: [],
        ydatas: [],
        yname: ' 浓度(mg/m³)'
        timeEnd: '',
        timeStart: ''
      },

      // 实时数据列表
      RealTimeDataList: [],
      EXHRealTimeDataList: [],
      bzz: null,
      bzzList: []
      exhbzz: [],
      exhbzzList: []
    }
  },
  mounted () {
@@ -121,14 +115,14 @@
  },
  methods: {
    // 点击查询按钮功能
    onSubmit () {
      this.DrawEXHRealTimeDateChart()
    querySearch () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYYMMDD HHmmss')
      this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYYMMDD HHmmss')
      this.initEchartsData()
    },
    // 初始化数据获取echarts的options数据
    async initEchartsData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: this.formInline.timeEnd,
@@ -136,6 +130,7 @@
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      console.log(result)
      this.getRtdb15s(result)
    },
    // echarts数据处理
@@ -144,27 +139,25 @@
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例
        // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        let data = {}
        // 存放data的数组
        let datalist
        // var bzh = []

        let data // 数据类型// let data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        let datalist // 存放data的数组
        // let bzh = []
        for (let i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
          }
          // const name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName
          // 临时name数据
          const nameListTemp = [
            {
              'TJIP45.lscl2tbAIA-10505-1': '氮氧化物',
              'TJIP45.lscl2tbAIA-10505-2': '烟尘',
              'TJIP45.lscl2tb552AISA11202A': '二氧化磷',
              'TJIP45.lscl2tb552AISA11201B': 'ph',
              'TJIP45.lscl2tb552AI10710': '二氧化碳'
              'TJIP45.y2h508CEMS01NOX': '氮氧化物',
              'TJIP45.y2h508CEMS01SO2': '烟尘',
              'TJIP45.y2h508CEMS01F': '二氧化磷',
              'TJIP45.y2h508CEMS01PM': 'ph'
              // 'TJIP45.lscl2tb552AI10710': '二氧化碳'
            }
          ]

          const name = nameListTemp[0][d[i].UnionTagCode]

          if (nameList.length === 0) {
@@ -178,17 +171,10 @@
              name: name,
              data: [data]
            }

            this.RealTimeDataList.push(datalist)
            // console.log(this.RealTimeDataList)

            // bzh.push(d[i].StdValue);
            this.EXHRealTimeDataList.push(datalist)
          } else if (nameList.indexOf(name) < 0) {
            nameList.push(name)
            // bzh.push(d[i].StdValue);

            const newdate = new Date(d[i].ReadTime)

            data = {
              name: name,
              value: [newdate, d[i].TagValue]
@@ -197,11 +183,10 @@
              name: name,
              data: [data]
            }
            this.RealTimeDataList.push(datalist)
            this.EXHRealTimeDataList.push(datalist)
          } else if (i === d.length - 1) {
            if (nameList.indexOf(name) < 0) {
              nameList.push(name)
              // bzh.push(d[i].StdValue);
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
@@ -211,16 +196,16 @@
                name: name,
                data: [data]
              }
              this.RealTimeDataList.push(datalist)
              this.EXHRealTimeDataList.push(datalist)
            } else {
              const newdate = new Date(d[i].ReadTime)
              data = {
                name: name,
                value: [newdate, d[i].TagValue]
              }
              for (var k = 0; k < this.RealTimeDataList.length; k++) {
                if (this.RealTimeDataList[k].name === name) {
                  this.RealTimeDataList[k].data.push(data)
              for (let k = 0; k < this.EXHRealTimeDataList.length; k++) {
                if (this.EXHRealTimeDataList[k].name === name) {
                  this.EXHRealTimeDataList[k].data.push(data)
                }
              }
            }
@@ -230,20 +215,19 @@
              name: name,
              value: [newdate, d[i].TagValue]
            }
            for (let k = 0; k < this.RealTimeDataList.length; k++) {
              if (this.RealTimeDataList[k].name === name) {
                this.RealTimeDataList[k].data.push(data)
            for (let k = 0; k < this.EXHRealTimeDataList.length; k++) {
              if (this.EXHRealTimeDataList[k].name === name) {
                this.EXHRealTimeDataList[k].data.push(data)
              }
            }
          }
        }
        // console.log(this.EXHRealTimeDataList)

        const divid = 'mycharteff_second'
        const divid = 'mychart_ss'
        const title = name

        const lengList = []
        let objTemp = []
        // console.log(objTemp)
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
@@ -260,8 +244,7 @@
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }

          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            // eslint-disable-next-line no-const-assign
          if (nameList[l] === '废气' || nameList[l] === '废气流量') { // 将废气流量排到数组最后
            objTemp = {
              name: nameList[l],
              icon: iconurl,
@@ -283,12 +266,10 @@
            }
            lengList.push(obj)
          }
          // console.log(lengList)
        }
        lengList.push(objTemp)

        const legend = lengList
        // const xdata = dateList.reverse();
        const ydatas = []

        for (let j = 0; j < nameList.length; j++) {
@@ -314,46 +295,45 @@
          const BBZMAPPING = [
            {
              COD: 35,
              废水流量: null,
              ph: 9,
              总氮: 15,
              总磷: 0.3,
              黯淡: 3
              氨氮: 3
            }
          ]
          for (let m = 0; m < this.RealTimeDataList.length; m++) {
          for (let m = 0; m < this.EXHRealTimeDataList.length; m++) {
            let stdValue = null
            if (this.RealTimeDataList[m].name === nameList[j]) {
              // for (let p in BBZMAPPING) {
              //   stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              // }
              BBZMAPPING.forEach((item) => {
                stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
              })
            if (this.EXHRealTimeDataList[m].name === nameList[j]) {
              for (const i in this.BBZMAPPING) {
                console.log(i)
                stdValue = BBZMAPPING[this.EXHRealTimeDataList[m].name]
              }

              ydata = {
                name: nameList[j],
                data: this.RealTimeDataList[m].data,
                data: this.EXHRealTimeDataList[m].data,
                zdcbcolor: zdcbcolor,
                zxcolor: zxcolor,
                bzz: stdValue
              }
              this.bzz = {
              this.exhbzz = {
                name: nameList[j],
                bzhui: stdValue
              }
              this.bzzList.push(this.bzz)
              this.exhbzzList.push(this.exhbzz)
              ydatas.push(ydata)
            }
          }
        }
        const yname = '浓度(mg/l)'

        const yname = '浓度(mg/m³)'

        this.DrawRealTimeDateChart(divid, title, legend, ydatas, yname)
        //
        // this.IntervalRealTimeDate(id, unionTagCodeList, BBZMAPPING)
        this.IntervalRealTimeDate()
      }
    },
    // 获取数据用于echarts图表绘制
    DrawRealTimeDateChart (id, title, legend, ydatas, yname) {
      // console.log(ydatas)
      this.myChart = this.$echarts.init(this.$refs.echarts)
      const serLists = []
      let dataUnit
@@ -371,7 +351,7 @@
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (var i = 0; i < this.bzzList.length; i++) {
                  for (let i = 0; i < this.bzzList.length; i++) {
                    if (this.bzzList[i].name === c.seriesName) {
                      biaozhuiz = this.bzzList[i].bzhui
                    }
@@ -472,13 +452,13 @@
          formatter: function (params) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // var name = params[i].name
              // let name = params[i].name
              // 图表title名称
              const seriesName = params[i].seriesName
              // 值
              const value = params[i].value[1]

              // var valueFliter = formatter(value)
              // let valueFliter = formatter(value)
              const valueFliter = parseFloat(value).toFixed(2)

              let maker = params[i].marker

 src/components/BaseNav/WasteGas/RealTimeEcharts.vue

File was deleted

 src/components/BaseNav/WasteGas/Scheduleof.vue

New file
@@ -0,0 +1,46 @@
<template>
  <div class="public-schedule">
    <el-table :data="tableData" max-height="500px" border>
      <el-scrollbar style="height: 50vh">
        <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³)" width="60"></el-table-column>
          <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
        </el-table-column>
        <el-table-column label="二氧化硫">
          <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
        </el-table-column>
        <el-table-column label="烟尘">
          <el-table-column prop="MonQty" label="浓度(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="OrglQty" label="折算值(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="ConvertQty" label="标准值(mg/m³)" width="60"></el-table-column>
          <el-table-column prop="EmissQty" label="排放量(kg/h)" width="60"></el-table-column>
        </el-table-column>
        <el-table-column label="废气流量">
          <el-table-column prop="StdValue" label="气量"></el-table-column>
        </el-table-column>
      </el-scrollbar>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Scheduleof',
  data () {
    return {
      tableData: []
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/BaseNav/WasteWater/Detail.vue

@@ -98,7 +98,7 @@
        endTime: timeEnd
      }
      const result = (await mapApi.getQueryLabMonData(data)).Result.DataInfo
      console.log(result)
      // console.log(result)
      this.tableData = result
    }
  }

 src/components/BaseNav/WasteWater/RealData.vue

@@ -135,7 +135,7 @@
        $endTime: this.formInline.timeStart,
        $step: 15
      }
      const result = (await mapApi.DataItems(data)).data
      const result = (await mapApi.getDataItems(data)).data
      this.getRtdb15s(result)
    },
    // echarts数据处理
@@ -314,10 +314,10 @@
          const BBZMAPPING = [
            {
              COD: 35,
              废水流量: null,
              ph: 9,
              总氮: 15,
              总磷: 0.3,
              黯淡: 3
              氨氮: 3
            }
          ]
          for (let m = 0; m < this.RealTimeDataList.length; m++) {

 src/components/LayerController/logic/WasteGas.js

@@ -57,40 +57,10 @@
  }

  this.clickListener = async (e) => {
    // console.log(e)
    console.log(e)
    this.animalService.pulseEffect(e.latlng)
    // const dataValue = {
    //   StoragePlaceId: e.layer.options.test.StoragePlaceId
    // }
    // console.log(e.layer.options.test.EpsGisMonPointId)
    const title = e.layer.options.test.Name
    const res = e.layer.options.test
    console.log(res)
    // const GasOnlinedata = {
    //   onLineMonEmissPointId: '23',
    //   monItemId: '28,31',
    //   beginTime: '2020-04-06 15:13:20',
    //   endTime: '2020-04-07 15:13:20',
    //   dataType: '1'
    // }
    // const GasManualData = {
    //   companyId: '3900100145',
    //   labMonPointId: '219',
    //   beginTime: '2020-04-06 15:13:20',
    //   endTime: ' 2020-04-07 15:13:20'
    // }
    // const ManualData = await mapApi.getWasteGasManualData(GasManualData)
    // console.log(ManualData)
    // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
    // // console.log(Mondata)
    // const result = await mapApi.getWasteGasDetails(dataValue)
    // console.log(result.Result.DataInfo)
    // const PublicBounced = window.Vue.extend(publicBounced)
    // const instance = new PublicBounced()
    // // console.log(e.layer.options.test)
    // instance.$mount()
    // document.body.appendChild(instance.$el)
    // instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
    window.$layer.open({
      content: {
        content: WasteGasIndex, // 组件
@@ -101,9 +71,7 @@
      },
      title: title // 标题
    })
    // console.log(e.layer.options.totransferData.EpsGisMonPointId)
    this.setPanTo(e.latlng, 150)
    // console.log(e.latlng)
  }
  // 不同类型图片加载
  this.differentTypes = (ContrLevel) => {