废水人工检测数据图表

chenzeping

2021-04-21 a3413ab578d223cb5543fd6424a96340c17a25a1

废水人工检测数据图表

 src/components/BaseNav/WasteWater/DayData.vue

@@ -31,7 +31,7 @@
        <div class="detailbtn hover-bottom">查询</div>
        <div class="detailbtn hover-bottom">明细表</div>
      </div>
      <div style="width:5rem;height:2rem;" id="echarts" ref="echartsday">
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="echartsday">
      </div>
    </div>
    <!--    &lt;!&ndash; 明细弹框 &ndash;&gt;-->
@@ -306,7 +306,7 @@
    },
    effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsday)
      console.log(this.chart)
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
      if (datatype === 1) {

 src/components/BaseNav/WasteWater/Detail.vue

@@ -1,311 +1,117 @@
<template>
<!--  <el-table :data="tableData" style="width:730px" height="200px">-->
<!--    <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop"-->
<!--                     :label="item.label">-->
<!--       <el-table-column v-for="(item1, index1) in item.label" :key="index1" :prop="item1.prop" :label="item1.label">-->
<!--      </el-table-column>-->
<!--    </el-table-column>-->
<!--  </el-table>-->
  <div style="width: 5.9rem">
  <el-table
      :data="tableData"
      max-height="255px"
      style="width: 100%;height: 100%">
    <el-table-column
        prop="date"
        width="130"
        label="检测时间">
    </el-table-column>
    <el-table-column
        label="BOD5">
  <div class="detail" style="width: 5rem">
    <el-table
        :data="tableData"
        style="width: 100%;"
        height="200px"
    >
      <el-table-column
          prop="codWatch"
          label="监测值">
          prop="LabMonTime"
          label="检测时间">
      </el-table-column>
      <el-table-column
          prop="codTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="COD">
      <el-table-column
          prop="phWatch"
          label="监测值">
          label="COD">
        <el-table-column
            prop="LabMonValue"
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
      <el-table-column
          prop="codTime"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="PH">
      <el-table-column
          prop="bod5Watch"
          label="监测值">
          label="氨氮">
        <el-table-column
            prop="LabMonValue"
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
      <el-table-column
          prop="bod5Time"
          label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
        label="氨氮">
      <el-table-column
          prop="adWatch"
          label="监测值">
          label="总磷">
        <el-table-column
            prop="LabMonValue"
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
      <el-table-column
          prop="adTime"
          label="标准值">
          label="总氮">
        <el-table-column
            prop="LabMonValue"
            label="监测值">
        </el-table-column>
        <el-table-column
            prop="StdValue"
            label="标准值">
        </el-table-column>
      </el-table-column>
    </el-table-column>
    <el-table-column
            label="挥发酚">
      <el-table-column
              prop="adWatch"
              label="监测值">
      </el-table-column>
      <el-table-column
              prop="adTime"
              label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
            label="氟离子">
      <el-table-column
              prop="adWatch"
              label="监测值">
      </el-table-column>
      <el-table-column
              prop="adTime"
              label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
            label="硫化物">
      <el-table-column
              prop="adWatch"
              label="监测值">
      </el-table-column>
      <el-table-column
              prop="adTime"
              label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
            label="石油类">
      <el-table-column
              prop="adWatch"
              label="监测值">
      </el-table-column>
      <el-table-column
              prop="adTime"
              label="标准值">
      </el-table-column>
    </el-table-column>
    <el-table-column
            label="悬浮物">
      <el-table-column
              prop="adWatch"
              label="监测值">
      </el-table-column>
      <el-table-column
              prop="adTime"
              label="标准值">
      </el-table-column>
    </el-table-column>
  </el-table>
      <!--      <el-table-column-->
      <!--          fixed="right"-->
      <!--          label="苯">-->
      <!--        <el-table-column-->
      <!--            fixed="right"-->
      <!--            prop="LabMonValue"-->
      <!--            label="监测值">-->
      <!--        </el-table-column>-->
      <!--        <el-table-column-->
      <!--            fixed="right"-->
      <!--            prop="StdValue"-->
      <!--            label="标准值">-->
      <!--        </el-table-column>-->
      <!--      </el-table-column>-->
    </el-table>
  </div>
</template>

<script>

import mapApi from '@/api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

export default {
  name: 'Detail',
  data () {
    return {
      tableData: [{
        date: '2016-05-03 12:00:00',
        codWatch: '7.23',
        codTime: '-',
        phWatch: '0.43',
        phTime: '9.21',
        bod5Watch: '7.12',
        bod5Time: '-',
        adWatch: '0.23',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:00:15',
        codWatch: '-',
        codTime: '5.32',
        phWatch: '-',
        phTime: '0.23',
        bod5Watch: '1',
        bod5Time: '9.88',
        adWatch: '1.76',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:00:30',
        codWatch: '-',
        codTime: '0.92',
        phWatch: '-',
        phTime: '8.71',
        bod5Watch: '0.72',
        bod5Time: '-',
        adWatch: '6.23',
        adTime: '0.86'
      },
      {
        date: '2016-05-03 12:01:15',
        codWatch: '10.22',
        codTime: '-',
        phWatch: '-',
        phTime: '0.92',
        bod5Watch: '0.82',
        bod5Time: '-',
        adWatch: '23.82',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:01:30',
        codWatch: '0.31',
        codTime: '-',
        phWatch: '-',
        phTime: '6.12',
        bod5Watch: '0.31',
        bod5Time: '-',
        adWatch: '0.21',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:02:15',
        codWatch: '9.22',
        codTime: '-',
        phWatch: '-',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '0.72',
        adWatch: '-',
        adTime: '17.23'
      },
      {
        date: '2016-05-03 12:02:30',
        codWatch: '-',
        codTime: '-',
        phWatch: '0.83',
        phTime: '-',
        bod5Watch: '23.22',
        bod5Time: '-',
        adWatch: '-',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:03:15',
        codWatch: '8.74',
        codTime: '-',
        phWatch: '-',
        phTime: '13.22',
        bod5Watch: '-',
        bod5Time: '0.23',
        adWatch: '-',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:03:30',
        codWatch: '0.82',
        codTime: '-',
        phWatch: '-',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '32.42',
        adWatch: '-',
        adTime: '0.88'
      },
      {
        date: '2016-05-03 12:04:15',
        codWatch: '-',
        codTime: '-',
        phWatch: '0.71',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '15.83',
        adWatch: '-',
        adTime: '24.82'
      },
      {
        date: '2016-05-03 12:04:30',
        codWatch: '-',
        codTime: '19.65',
        phWatch: '29.22',
        phTime: '-',
        bod5Watch: '0.98',
        bod5Time: '-',
        adWatch: '-',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:05:15',
        codWatch: '19.32',
        codTime: '-',
        phWatch: '-',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '12.21',
        adWatch: '-',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:05:30',
        codWatch: '10.53',
        codTime: '-',
        phWatch: '-',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '23.71',
        adWatch: '-',
        adTime: '10.55'
      },
      {
        date: '2016-05-03 12:06:15',
        codWatch: '31.63',
        codTime: '-',
        phWatch: '-',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '0.56',
        adWatch: '-',
        adTime: '-'
      },
      {
        date: '2016-05-03 12:06:30',
        codWatch: '19.53',
        codTime: '-',
        phWatch: '-',
        phTime: '-',
        bod5Watch: '-',
        bod5Time: '0.28',
        adWatch: '-',
        adTime: '0.75'
      }]
      tableData: []
    }
  },
  created () {
    // this.$nextTick(() => {
    //   this.$attrs.ManualData.forEach(item => {
    //     this.tableData = [...item]
    //   })
    //   this.tableData.LabMonTime = 100
    //   console.log(this.tableData)
    // })
  mounted () {
    this.initdetail()
  },
  methods: {
    async initdetail () {
      const timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      const timeStart = dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
      const data = {
        companyId: 3900100145,
        labMonPointId: 219,
        beginTime: timeStart,
        endTime: timeEnd
      }
      const result = (await mapApi.getQueryLabMonData(data)).Result.DataInfo
      console.log(result)
      this.tableData = result
    }
  }
}

</script>

<style scoped>
.el-table--border::after, .el-table--group::after, .el-table::before{
/deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
  background: none;
}

/*/deep/ .el-table {*/
/*  border: none !important;*/
/*}*/
</style>

 src/components/BaseNav/WasteWater/HourData.vue

@@ -23,7 +23,7 @@
        <div class="detailbtn">明细表</div>
      </div>
      <div class="boxChart">
        <div style="width: 5rem;height:2rem;" id="echarts" ref="echartsHour"></div>
        <div style="width: 5rem;height:1.5rem;" id="echarts" ref="echartsHour"></div>
      </div>
    </div>
  </div>
@@ -312,7 +312,7 @@
    },
    effChartShow (divid, title, legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsHour)
      console.log(this.chart)
      // console.log(this.chart)
      this.chart.clear()
      var dataUnit = ''
      if (datatype === 1) {

 src/components/BaseNav/WasteWater/RealData.vue

@@ -29,7 +29,7 @@
        </div>
        <div class="detailbtn" @click="onSubmit">查询</div>
      </div>
      <div style="width:5rem;height:2rem;" ref="echarts"></div>
      <div style="width:5rem;height:1.5rem;" ref="echarts"></div>
    </div>
  </div>
</template>
@@ -180,7 +180,7 @@
            }

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

            // bzh.push(d[i].StdValue);
          } else if (nameList.indexOf(name) < 0) {
@@ -243,7 +243,7 @@

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

        for (let l = 0; l < nameList.length; l++) {
          let obj
@@ -625,7 +625,7 @@
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
      // const interValHander = setInterval(function () {
      //   this.initEchartsData()
      console.log('间隔请求数据')
      // console.log('间隔请求数据')
      // }, 1500)
      // console.log(interValHander)
    }