废水图表分化

zhangshuaibao

2021-04-19 0d28d10afaa575546ad3235aac147b50ac8f8013

废水图表分化

 src/api/mapApi.js

@@ -48,10 +48,6 @@
  getWasteWater (data) {
    return axios.get(mapUrl.getWasteWater, data)
  },
  // 废水监测数据
  getWasteWaterMonitoring (data) {
    return axios.get(mapUrl.getWasteWaterMonitoring, data)
  },
  // 废水点明细表
  getWasteWaterMonitoringDetails (data) {
    return axios.get(mapUrl.getWasteWaterMonitoringDetails, data)

 src/components/BaseNav/WasteWater/DayData.vue

@@ -15,7 +15,7 @@
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
             <el-date-picker  type="datetime"   v-model="formInline.timeStart">
             <el-date-picker  type="datetime"  v-model="formInline.timeStart">
             </el-date-picker>
            </span>
          </div>
@@ -46,27 +46,27 @@
      </div>
    </div>
    <!-- 明细弹框 -->
    <el-dialog :visible.sync="dialogVisible"
               :append-to-body="true"
               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
               width="68%"
               center
               v-dialogDrag
    >
      <div class="el-dialog-div" style="height: 260px">
        <public-detailed-list v-bind="$attrs"></public-detailed-list>
      </div>
    </el-dialog>
<!--    <el-dialog :visible.sync="dialogVisible"-->
<!--               :append-to-body="true"-->
<!--               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
<!--               width="68%"-->
<!--               center-->
<!--               v-dialogDrag-->
<!--    >-->
<!--      <div class="el-dialog-div" style="height: 260px">-->
<!--        <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'

export default {
  name: 'DayData',
  components: {
    PublicDetailedList
    // PublicDetailedList
  },
  data () {
    return {

 src/components/BaseNav/WasteWater/HourData.vue

@@ -45,28 +45,28 @@
            </div>
        </div>
        <!-- 明细弹框 -->
        <el-dialog :visible.sync="dialogVisible"
                   :append-to-body="true"
                   :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
                   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="dialogVisible"-->
<!--                   :append-to-body="true"-->
<!--                   :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
<!--                   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>-->
    </div>
</template>

<script>
import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
// import dayjs from 'dayjs'

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
    // PublicDetailedList
  },
  data () {
    return {

 src/components/BaseNav/WasteWater/PublicTabs.vue

@@ -7,14 +7,13 @@
    <div class="main">
      <div class="main-matter">
        <div>
          <ul>
            <!--            <li>场所名称:{{ setSolidWaste.StoragePlaceName }}</li>-->
            <!--            <li>贮存能力:{{ setSolidWaste.StorageQty }}(吨)</li>-->
            <!--            <li>剩余贮存能力:{{ setSolidWaste.SurplusFloorArea }}(吨)</li>-->
            <!--            <li>占地面积(㎡):{{ setSolidWaste.DesignFloorArea }}(㎡)</li>-->
            <!--            <li>最近贮存日期:{{ setSolidWaste.StorageDate }}</li>-->
            <!--            <li class="lastli"></li>-->
            <li v-for="(item,index) in tabList" :key="index"></li>
          <ul v-for="(item,index) in setWasteWater" :key="index">
            <li>监测点名称:{{ item.Name }}</li>
            <li>生产单位:{{ item.porltName }}</li>
            <li>排放类型名称:{{ item.MonTypeName }}</li>
            <li>排放去向:{{ item.EmissDirecti }}</li>
            <li>控制级别名称:{{ item.ContrLevelShowName }}</li>
            <li>内/外排放口:{{ item.OrOutPortName }}</li>
          </ul>
        </div>
      </div>
@@ -23,23 +22,34 @@
</template>

<script>
import mapApi from '../../../api/mapApi'
export default {
  name: 'GasTable',
  props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'],
  name: 'WaterTabs',
  data () {
    return {
      tabList: []
      setWasteWater: []
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.refsDataTabs()
    // })
  },
  methods: {
    // async getTabsData () {
    //   // 基本信息 和 详细信息 展示数据所需参数
    //   const dataValue = {
    //     StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
    //   }
    //   // 基本信息 tabs
    //   const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
    // }
    async refsDataTabs (data) {
      // 基本信息 和 详细信息 展示数据所需参数
      // const EpsGisMonPointId = {
      //   EpsGisMonPointId: data
      // }
      // 基本信息 tabs
      const result = await mapApi.getWasteWater()
      // for (var i = 0; i < result.length; i++) {
      //   if (result[i].Name === data.title) {
      //   }
      // }
      this.setWasteWater = result.Result.DataInfo
      // return result
    }
  }
}
</script>
@@ -81,9 +91,6 @@
        padding: 0.03rem .5%;
      }

      .lastli {
        visibility: hidden
      }
    }
  }
}

 src/components/BaseNav/WasteWater/RealData.vue

New file
@@ -0,0 +1,942 @@
<!--  废水实时数据  -->
<template>
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">COD : <i style="color: #e8ee0b">11.24385</i> 标准 : <i style="color: #fff">50</i></span>
        <span class="grid-content">氮氧 :<i style="color: #e8ee0b">0.1889014</i>  标准 : <i style="color: #fff">30</i></span>
        <span class="grid-content">总磷 : <i style="color: #e8ee0b">0.03812287</i> 标准 : <i style="color: #fff">5</i></span>
        <span class="grid-content">废水流量 : <i style="color: #e8ee0b">32.16287</i></span>
      </div>
    </div>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" v-model="formInline.timeStart">
              </el-date-picker>
            </span>
          </div>
          <div class="pickerData">
            <span >结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" v-model="formInline.timeEnd">
              </el-date-picker>
            </span>
          </div>
        </div>
        <div>
          采样点数:
          <el-select v-model="formInline.region" placeholder="50">
            <el-option label="0" value="0"></el-option>
            <el-option label="25" value="25"></el-option>
            <el-option label="50" value="50"></el-option>
            <el-option label="75" value="75"></el-option>
            <el-option label="100" value="100"></el-option>
          </el-select>
        </div>
        <div class="detailbtn"  @click="onSubmit">查询</div>
      </div>
      <div class="boxChart">
        <div style="width: 5rem;height: 1.5rem;" id="popChart" ref="main"></div>
      </div>
    </div>
  </div>
</template>

<script>
import 'dayjs/locale/es'
import dayjs from 'dayjs'

export default {
  name: 'ECharts',
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
      RealTimeChart: null,
      value: '',
      days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
      formInline: {
        region: '',
        timeStart: '2021-04-13 12:47:18',
        timeEnd: '2021-04-13 12:52:18'
      },
      JsonRealWasteWater: {
        id: 'mycharteff_second ',
        title: 'COD',
        legend: [
          {
            icon: 'image://../assets/imgs/legend/NOX.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '氨氮',
            textStyle: { color: '#ccc' }
          },
          {
            icon: 'image://../assets/imgs/legend/YanChen.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '总磷',
            textStyle: { color: '#ccc' }
          },
          {
            icon: 'image://../assets/imgs/legend/SO2.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '总氮',
            textStyle: { color: '#ccc' }
          },
          {
            icon: 'image://../assets/imgs/legend/NOX.png',
            itemHeight: 5,
            itemWidth: 20,
            name: 'COD',
            textStyle: { color: '#ccc' }
          },
          {
            icon: 'image://../assets/imgs/legend/VOCs.png',
            itemHeight: 5,
            itemWidth: 20,
            name: '废水流量',
            textStyle: { color: '#ccc' }
          }
        ],
        ydatas: [
          {
            name: '氮氧',
            data: [{ name: '氮氧', value: ['2021/04/13 12:47:18', 0.1900156] },
              { name: '氮氧', value: ['2021/04/13 12:47:33', 0.1902795] },
              { name: '氮氧', value: ['2021/04/13 12:47:48', 0.1892689] },
              { name: '氮氧', value: ['2021/04/13 12:48:03', 0.1882582] },
              { name: '氮氧', value: ['2021/04/13 12:48:18', 0.1882284] },
              { name: '氮氧', value: ['2021/04/13 12:48:33', 0.1886617] },
              { name: '氮氧', value: ['2021/04/13 12:48:48', 0.1873395] },
              { name: '氮氧', value: ['2021/04/13 12:49:03', 0.1866319] },
              { name: '氮氧', value: ['2021/04/13 12:49:18', 0.1895212] },
              { name: '氮氧', value: ['2021/04/13 12:49:33', 0.1898232] },
              { name: '氮氧', value: ['2021/04/13 12:49:48', 0.1880916] },
              { name: '氮氧', value: ['2021/04/13 12:50:03', 0.1883546] },
              { name: '氮氧', value: ['2021/04/13 12:50:18', 0.1907846] },
              { name: '氮氧', value: ['2021/04/13 12:50:33', 0.1887416] },
              { name: '氮氧', value: ['2021/04/13 12:50:48', 0.1873472] },
              { name: '氮氧', value: ['2021/04/13 12:51:03', 0.1886214] },
              { name: '氮氧', value: ['2021/04/13 12:51:18', 0.1891896] },
              { name: '氮氧', value: ['2021/04/13 12:51:33', 0.1891176] },
              { name: '氮氧', value: ['2021/04/13 12:51:48', 0.1890455] },
              { name: '氮氧', value: ['2021/04/13 12:52:03', 0.1889734] },
              { name: '氮氧', value: ['2021/04/13 12:52:18', 0.1889014] }],
            zdcbcolor: 'red',
            zxcolor: '#00B0F0',
            bzz: 3
          },
          {
            name: '总磷',
            data: [{ name: '总磷', value: ['2021/04/13 12:47:18', 0.03813388] },
              { name: '总磷', value: ['2021/04/13 12:47:33', 0.03813333] },
              { name: '总磷', value: ['2021/04/13 12:47:48', 0.03813278] },
              { name: '总磷', value: ['2021/04/13 12:48:03', 0.03813223] },
              { name: '总磷', value: ['2021/04/13 12:48:18', 0.03813168] },
              { name: '总磷', value: ['2021/04/13 12:48:33', 0.03813113] },
              { name: '总磷', value: ['2021/04/13 12:48:48', 0.03813057] },
              { name: '总磷', value: ['2021/04/13 12:49:03', 0.03813003] },
              { name: '总磷', value: ['2021/04/13 12:49:18', 0.03812947] },
              { name: '总磷', value: ['2021/04/13 12:49:33', 0.03812892] },
              { name: '总磷', value: ['2021/04/13 12:49:48', 0.03812837] },
              { name: '总磷', value: ['2021/04/13 12:50:03', 0.03812782] },
              { name: '总磷', value: ['2021/04/13 12:50:18', 0.03812727] },
              { name: '总磷', value: ['2021/04/13 12:50:33', 0.03812672] },
              { name: '总磷', value: ['2021/04/13 12:50:48', 0.03812617] },
              { name: '总磷', value: ['2021/04/13 12:51:03', 0.03812562] },
              { name: '总磷', value: ['2021/04/13 12:51:18', 0.03812507] },
              { name: '总磷', value: ['2021/04/13 12:51:33', 0.03812452] },
              { name: '总磷', value: ['2021/04/13 12:51:48', 0.03812397] },
              { name: '总磷', value: ['2021/04/13 12:52:03', 0.03812342] },
              { name: '总磷', value: ['2021/04/13 12:52:18', 0.03812287] }],
            zdcbcolor: 'red',
            zxcolor: '#f48183',
            bzz: 0.3
          },
          {
            name: '总氮',
            data: [{ name: '总氮', value: ['2021/04/13 12:47:18', 2.779342] },
              { name: '总氮', value: ['2021/04/13 12:47:33', 2.779337] },
              { name: '总氮', value: ['2021/04/13 12:47:48', 2.779331] },
              { name: '总氮', value: ['2021/04/13 12:48:03', 2.779823] },
              { name: '总氮', value: ['2021/04/13 12:48:18', 2.779321] },
              { name: '总氮', value: ['2021/04/13 12:48:33', 2.779344] },
              { name: '总氮', value: ['2021/04/13 12:48:48', 2.779452] },
              { name: '总氮', value: ['2021/04/13 12:49:03', 2.779224] },
              { name: '总氮', value: ['2021/04/13 12:49:18', 2.779133] },
              { name: '总氮', value: ['2021/04/13 12:49:33', 2.779445] },
              { name: '总氮', value: ['2021/04/13 12:49:48', 2.779743] },
              { name: '总氮', value: ['2021/04/13 12:50:03', 2.779332] },
              { name: '总氮', value: ['2021/04/13 12:50:18', 2.779562] },
              { name: '总氮', value: ['2021/04/13 12:50:33', 2.779560] },
              { name: '总氮', value: ['2021/04/13 12:50:48', 2.779534] },
              { name: '总氮', value: ['2021/04/13 12:51:03', 2.779412] },
              { name: '总氮', value: ['2021/04/13 12:51:18', 2.779673] },
              { name: '总氮', value: ['2021/04/13 12:51:33', 2.779452] },
              { name: '总氮', value: ['2021/04/13 12:51:48', 2.779397] },
              { name: '总氮', value: ['2021/04/13 12:52:03', 2.779342] },
              { name: '总氮', value: ['2021/04/13 12:52:18', 2.779287] }],
            zdcbcolor: 'red',
            zxcolor: '#e0ffff',
            bzz: 15
          },
          {
            name: '废水流量',
            data: [{ name: '废水流量', value: ['2021/04/13 12:47:18', 31.63029] },
              { name: '废水流量', value: ['2021/04/13 12:47:33', 31.9791] },
              { name: '废水流量', value: ['2021/04/13 12:47:48', 31.92095] },
              { name: '废水流量', value: ['2021/04/13 12:48:03', 32.05784] },
              { name: '废水流量', value: ['2021/04/13 12:48:18', 32.01669] },
              { name: '废水流量', value: ['2021/04/13 12:48:33', 32.39344] },
              { name: '废水流量', value: ['2021/04/13 12:48:48', 32.66452] },
              { name: '废水流量', value: ['2021/04/13 12:49:03', 32.45224] },
              { name: '废水流量', value: ['2021/04/13 12:49:18', 32.42133] },
              { name: '废水流量', value: ['2021/04/13 12:49:33', 32.88445] },
              { name: '废水流量', value: ['2021/04/13 12:49:48', 32.36743] },
              { name: '废水流量', value: ['2021/04/13 12:50:03', 32.83332] },
              { name: '废水流量', value: ['2021/04/13 12:50:18', 32.15562] },
              { name: '废水流量', value: ['2021/04/13 12:50:33', 32.61560] },
              { name: '废水流量', value: ['2021/04/13 12:50:48', 32.89534] },
              { name: '废水流量', value: ['2021/04/13 12:51:03', 32.72412] },
              { name: '废水流量', value: ['2021/04/13 12:51:18', 32.48673] },
              { name: '废水流量', value: ['2021/04/13 12:51:33', 32.03452] },
              { name: '废水流量', value: ['2021/04/13 12:51:48', 32.93397] },
              { name: '废水流量', value: ['2021/04/13 12:52:03', 32.84342] },
              { name: '废水流量', value: ['2021/04/13 12:52:18', 32.16287] }],
            zdcbcolor: 'red',
            zxcolor: '#9ACD32',
            bzz: null
          },
          {
            name: 'COD',
            data: [{ name: 'COD', value: ['2021/04/13 12:47:18', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:47:33', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:47:48', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:48:03', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:48:18', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:48:33', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:48:48', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:49:03', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:49:18', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:49:33', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:49:48', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:50:03', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:50:18', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:50:33', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:50:48', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:51:03', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:51:18', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:51:33', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:51:48', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:52:03', 11.24385] },
              { name: 'COD', value: ['2021/04/13 12:52:18', 11.24385] }],
            zdcbcolor: 'red',
            zxcolor: '#fff21c',
            bzz: 35
          }
        ],
        yname: ' 浓度(mg/l)'
      },
      JSONTimeData: {
        id: 21,
        unionTagCodeList: ['TJIP45.rl3AT25035', 'TJIP45.rl3AT25033', 'TJIP45.rl3FT35032', 'TJIP45.rl3AT25034']
      },
      res: [{ UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.02153, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.7473, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.56014, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.59335, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.49617, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.33835, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 34.93116, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 35.831, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 36.67476, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.04687, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.78848, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 38.03456, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 37.81089, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.28693, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 39.79956, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.11547, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 40.72007, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.11903, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 44.28426, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 45.07601, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25035', TagValue: 43.81406, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.312585, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.507234, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.383248, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.385284, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.719143, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.730373, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.602137, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.459584, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.313675, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.305554, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.911544, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.744454, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.267665, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.606314, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.599967, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 1.939136, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.03244, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.183742, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.323384, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.403428, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25033', TagValue: 2.347282, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.018858, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020605, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.047671, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.020306, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.054744, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.027292, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.026794, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.03381, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.041131, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.02754, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.998859, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.014368, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.019042, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.046045, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.024141, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.016951, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.01229, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.00666, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 5.005168, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.99309, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3FT35032', TagValue: 4.983859, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.128864, ReadTime: '2021/04/14 03:59:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.096089, ReadTime: '2021/04/14 03:59:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.13711, ReadTime: '2021/04/14 04:00:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.191255, ReadTime: '2021/04/14 04:00:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.159299, ReadTime: '2021/04/14 04:00:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.089755, ReadTime: '2021/04/14 04:00:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.098142, ReadTime: '2021/04/14 04:01:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.084317, ReadTime: '2021/04/14 04:01:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.040828, ReadTime: '2021/04/14 04:01:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.066903, ReadTime: '2021/04/14 04:01:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.12027, ReadTime: '2021/04/14 04:02:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.075927, ReadTime: '2021/04/14 04:02:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.062984, ReadTime: '2021/04/14 04:02:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.190477, ReadTime: '2021/04/14 04:02:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.192902, ReadTime: '2021/04/14 04:03:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.061741, ReadTime: '2021/04/14 04:03:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 0.991724, ReadTime: '2021/04/14 04:03:30', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.006655, ReadTime: '2021/04/14 04:03:45', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.044971, ReadTime: '2021/04/14 04:04:00', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.077099, ReadTime: '2021/04/14 04:04:15', ErrorMessage: null },
        { UnionTagCode: 'TJIP45.rl3AT25034', TagValue: 1.131417, ReadTime: '2021/04/14 04:04:30', ErrorMessage: null }],
      startTime: '',
      endTime: '',
      step: ''
    }
  },
  mounted () {
    this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
    this.formInline.timeStart = dayjs().subtract(1, 'minute').format('YYYY-MM-DD HH:mm:ss')
    // console.log(this.formInline.timeStart)
    // console.log(this.JsonRealWasteWater.ydatas[0].data[0].value[0])
  },
  updated () {
    this.DrawRealTimeDateChart()
  },
  methods: {
    onSubmit () {
      this.DrawRealTimeDateChart()
    },
    // 画废水折线图--实时数据
    DrawRealTimeDateChart () {
      var legend = this.JsonRealWasteWater.legend
      var ydatas = this.JsonRealWasteWater.ydatas
      var yname = this.JsonRealWasteWater.yname
      this.RealTimeChart = this.$echarts.init(this.$refs.main)
      var serLists = []
      for (var i = 0; i < ydatas.length; i++) {
        // var zdcbcolor = ydatas[i].zdcbcolor
        var bz = ydatas[i].bzz
        var obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  // var biaozhuiz
                  // for (var i = 0; i < bzzList.length; i++) {
                  //   if (bzzList[i].name == c.seriesName) {
                  //     biaozhuiz = bzzList[i].bzhui
                  //   }
                  // }
                  // if (c.value[1] > biaozhuiz) {
                  //   return zdcbcolor
                  // } else if (c.value[1] > biaozhuiz * 0.9) {
                  //   return '#FFA500'
                  // }
                  // {
                  //   return '#33c95f'
                  // }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data,
            markLine: { // 平均值 ， 和 指标上限
              symbol: 'none',
              data: [{
                label: {
                  normal: {
                    position: 'end',
                    formatter: ''// ydatas[i].name+'标准值' //+'{c}'
                  }
                },
                name: '标准值',
                yAxis: bz,
                lineStyle: {
                  color: ydatas[i].zxcolor,
                  type: 'dashed',
                  width: 2
                }
              }
              ]
            }
          }
        } else {
          obj = {
            name: ydatas[i].name,
            // symbol:'circle', // 折点形状
            // symbolSize: 3,   //大小
            smooth: true, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  return '#33c95f'
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 2
                },
                // borderColor:'black',  //折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }

            },
            type: 'line',
            data: ydatas[i].data
          }
        }

        if (ydatas[i].name === '废气流量' || ydatas[i].name === '废气') {
          obj.yAxisIndex = 1
        }
        serLists.push(obj)
      }

      var option = {
        /*  title: {
          text: title,
      }, */
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          formatter: function (params) {
            var s = params[0].name + '<br />'
            for (var i = 0; i < params.length; i++) {
              // var name = params[i].name
              // 图表title名称
              var seriesName = params[i].seriesName
              // 值
              var value = params[i].value[1]
              // var valueFliter = this.formatter(value)
              var maker = params[i].marker
              var colo = ''
              switch (seriesName) {
                case 'COD':
                  colo = '#fff21c'
                  break
                case '氨氮':
                  colo = '#00B0F0'
                  break
                case '总磷':
                  colo = '#f48183'
                  break
                case '总氮':
                  colo = '#e0ffff'
                  break
                default:
                  colo = '#9ACD32'
                  break
              }
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
              s += maker + seriesName + ':' + value + '<br />'
            }
            return s
          }
        },
        toolbox: { // 打印等工具
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: { // 网格
          top: '20%',
          left: '7%',
          bottom: '15%',
          right: '5%'
        },
        legend: {
          data: legend
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 100
        }, {
          start: 0,
          end: 100,
          show: false,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        xAxis: { // x 轴设置
          type: 'time',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
            // rotate: 30,
            margin: 6,
            interval: 0,
            textStyle: {
              color: '#fff'
            }
          },
          splitLine: { // 网格垂直线为 虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
          // data: xdata
        },
        yAxis: [{
          type: 'value',
          name: yname,
          max: function (value) {
            return parseInt(value.max + 30)
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: '流量(m³/d)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }],
        series: serLists
      }
      this.RealTimeChart.setOption(option)
      /* RealTimeChart.on('legendselectchanged', function (params) {
        // console.log(params);
        var StdVal = null
        var op = { yAxis: {} }
        if (params.selected.COD) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == 'COD') {
                StdVal = bzzList[i].bzhui
              }
            }
          }

          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['氨氮']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '氨氮') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        } else if (params.selected['总磷']) {
          if (bzzList && bzzList.length > 0) {
            for (let i = 0; i < bzzList.length; i++) {
              if (bzzList[i].name == '总磷') {
                StdVal = bzzList[i].bzhui
              }
            }
          }
          op.yAxis.max = function (value) {
            var ma
            if (value.max < StdVal) {
              ma = StdVal
            } else {
              ma = Math.ceil(value.max)
            }
            return ma
          }
        }
        RealTimeChart.setOption(op)
      }) */
    },
    getRtdb15s (unionTagCodeList, startTime, endTime, step, res) {
      if (res.length > 0) {
        // 处理数据开始
        var d = res
        var nameList = [] // 存放图例

        var data // 数据类型// var data={name:'',value:[now1.getFullYear(), now1.getMonth() + 1, now1.getDate().join('/'),value]}
        var datalist // 存放data的数组
        // var bzh = []
        for (var i = 0; i < d.length; i++) {
          if (d[i].ErrorMessage != null) {
            continue
          }

          // var name = CFG.DATA_REALTIME_TAGCODETABLE[d[i].UnionTagCode].TagName

          if (nameList.length === 0) {
            nameList.push(name)
            var newdate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newdate, d[i].TagValue]
            }

            datalist = {
              name: name,
              data: [data]
            }

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

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

            data = {
              name: name,
              value: [newdate, d[i].TagValue]
            }
            datalist = {
              name: name,
              data: [data]
            }
            this.RealTimeDataList.push(datalist)
          } else if (i === d.length - 1) {
            if (nameList.indexOf(name) < 0) {
              nameList.push(name)
              // bzh.push(d[i].StdValue);

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

              data = {
                name: name,
                value: [newdate, d[i].TagValue]
              }
              datalist = {
                name: name,
                data: [data]
              }
              // RealTimeDataList.push(datalist)
            } else {
              // var 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)
                }
              }
            }
          } else {
            const newdate = new Date(d[i].ReadTime)
            data = {
              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)
              }
            }
          }
        }

        // var divid = 'mycharteff_second'
        // var title = name
        var lengList = []
        var objTemp

        for (var l = 0; l < nameList.length; l++) {
          var obj
          var iconurl
          if (nameList[l] === 'COD') {
            iconurl = 'image://../assets/imgs/legend/SO2.png'
          } else if (nameList[l] === '氨氮') {
            iconurl = 'image://../assets/imgs/legend/NOX.png'
          } else if (nameList[l] === '总磷') {
            iconurl = 'image://../assets/imgs/legend/YanChen.png'
          } else if (nameList[l] === '总氮') {
            iconurl = 'image://../assets/imgs/legend/zongdan.png'
          } else {
            iconurl = 'image://../assets/imgs/legend/VOCs.png'
          }

          if (nameList[l] === '废水' || nameList[l] === '废水流量') { // 将废水流量排到数组最后
            objTemp = {
              name: nameList[l],
              icon: iconurl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
          } else {
            obj = {
              name: nameList[l],
              icon: iconurl,
              textStyle: {
                color: '#ccc'
              },
              itemWidth: 20,
              itemHeight: 5
            }
            lengList.push(obj)
          }
        }
        lengList.push(objTemp)

        this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname)
      }
    },
    // 实时数据调用钩子函数
    IntervalRealTimeDate (id, unionTagCodeList, BBZMAPPING) {
      // 定时器函数
      this.interValHander = setInterval(function () {
        // $('.RealTime').empty()
        this.startTime = dayjs().subtract(5, 'minute').format('YYYY-MM-DD HH:mm:ss')
        this.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
        this.step = '15'
        // this.getRtdb15s(this.unionTagCodeList, this.startTime, this.endTime, this.step, this.res)
        // PreQueryTime=endTime;
        this.DrawRealTimeDateChart(this.JsonRealWasteWater.id, this.JsonRealWasteWater.title, this.JsonRealWasteWater.legend, this.JsonRealWasteWater.ydatas, this.JsonRealWasteWater.yname)
        this.IntervalRealTimeDate(this.JSONTimeData.id, this.JSONTimeData.unionTagCodeList, this.BBZMAPPING)
      }, 15000)
    }
  }
}
</script>

<style scoped lang="less">
.grid-content{
  font-size: 8px;
  background-color: #2e4967;
  text-align: center;
  border-radius: 2px;
  margin-right: 10px;
  padding:0 10px
}
.infomation {
  padding: 5px 10px;
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search{
    display: flex;
    padding:5px;
    >div{margin-left: 10px}
    .pickerMon{
      display: flex;
      >div:first-child {
        margin-right: 10px;
      }
      .pickerData{
        flex: 1;
        display: flex;
        >span{line-height: 22px}
        .pickerTable {
          margin-left: 3px;
        }
      }
    }
    /deep/.el-date-editor--datetime{
      width: 100%;
    }
    /deep/.el-input__inner{
      position: relative;
      width:140px;
      background-color: #2e4967;
      color: #ffffff;
      font-size: 12px;
      height: 24px;
      padding: 0;
      border-color:#00fff6;
      text-align: center;
      //padding-left:20px ;
      //padding: 0!important;
    }
    /deep/.el-input__icon{
      display: block;
      width: 140px;
      height: 22px;
      line-height: 22px;
      cursor: pointer;
      font-size: 0;
    }
    .echatsInput{
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 80px;
      height: 22px;
      text-align: center;
    }
    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 24px;
      border-radius: 4px;
      margin-right: 6px;
    }
    .detailbtn:hover{
      box-shadow: 0 0 0.03rem #fff700 !important;
      color:#fff700 !important;
      cursor: pointer;
    }
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
  }
}
</style>

 src/components/BaseNav/WasteWater/WasteWater.js

File was deleted

 src/components/BaseNav/WasteWater/WasteWaterIndex.vue

New file
@@ -0,0 +1,219 @@
<template>
  <public-sector>
    <template v-slot:tabs>
      <public-tabs ></public-tabs>
    </template>
    <template v-slot:table>
      <div class="win">
        <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>
        <ul class="tab">
          <li :class="active==0?'hover':''" @click='tabTaggle("RealData",0)'>实时数据</li>
          <li :class="active==1?'hover':''" @click='tabTaggle("HourData",1)'>小时数据</li>
          <li :class="active==2?'hover':''" @click='tabTaggle("DayData",2)'>日数据</li>
          <li :class="active==3?'hover':''" @click='tabTaggle("Detail",3)'>人工数据</li>
        </ul>
        <div class="legend" >
          <span >正常</span>
          <i style=" background: #4ec99c;"></i>
          <span >预警</span>
          <i style=" background: red;"></i>
          <span >超标</span>
          <i style=" background: orange;"></i>
        </div>
        <component :is="currentTab" v-bind="$attrs" ref="Echats"></component>
      </div>
    </template>
    <template v-slot:video>
      <public-video></public-video>
    </template>
  </public-sector>
</template>

<script>

// import '@/utils/dragBoxes'
import PublicTabs from './PublicTabs'
import PublicVideo from '../PublicVideo'
import PublicSector from '..//PublicSector'
// 图表组件
import RealData from './RealData'
import HourData from './HourData'
import DayData from './DayData'
import Detail from './Detail'

export default {
  name: 'WasteWaterIndex',
  props: ['EpsGisMonPointId'],
  components: {
    PublicSector,
    PublicTabs,
    PublicVideo,
    RealData,
    HourData,
    DayData,
    Detail
  },
  mounted () {
    this.$nextTick(() => {
      this.refsData()
    })
  },
  data () {
    return {
      currentTab: RealData,
      active: '0',
      displayContentTable: '',
      flag: false,
      tabTaggle (taggleMenu, num) {
        this.currentTab = taggleMenu
        this.active = num
      }
    }
  },
  methods: {
    refsData () {
      // 请求数据需要携带的参数
      // const data = this.EpsGisMonPointId
      this.$refs.refsTabsData.refsDataTabs()
    }
  }
}
</script>

<style lang="less" scoped>
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 35%;
  left: 20%;

  .public-bounced-title {
    cursor: move;
    height: 0.1rem;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      color: #f4f7ff;
      margin: 0 15px;
      font-size: 14px;
    }

    i {
      color: #C0C4CC;
      margin: 0 15px;
      font-size: 22px;
      cursor: pointer;
    }

    i:hover {
      color: #00fff6;
    }
  }

  .public-bounced-content {
    padding: 0.1rem;
    display: flex;
    //align-items: center;
    //justify-content: space-around;

    .public-bounced-content-left {
      //width: 4.8rem;
    }

    .public-bounced-content-right {
      //width: 3rem;
      margin-left: 0.1rem;
    }
  }
}
.win {
  position: relative;
  background:@background-color;
  border: 0.8px solid #396d83;
}

.border_corner {
  z-index: 999;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  border: 1.5px 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_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

.tab {
  display: flex;
  border-bottom: 1px solid #396d83;
  padding:0.02rem 0.04rem;
}

.tab li {
  background-color: #243a55;
  line-height:0.15rem;
  height: 0.15rem;
  text-align: center;
  border-radius: 5px;
  margin-right: 0.04rem;
  padding:0 0.04rem;
}
.tab li.hover,
.tab li:hover {
  background-color: #0e639e;
  color: #fff;
  cursor: pointer;
}
.legend{
  position: absolute;
  top:0.05rem;
  right: 0;
  display: flex;
  justify-items: center;
}
.legend i {
  display: block;
  width: 0.2rem;
  height: 0.09rem;
  margin:0 0.1rem 0 0.05rem;
  border-radius: 0.02rem;
}
.legend span{
  line-height: 0.09rem;
  height: 0.09rem;
  font-size: 0.06rem;
}

</style>

 src/components/LayerController/logic/WasteSolid.js

@@ -11,6 +11,8 @@
// 使用封装方法
const AnimalService = require('../service/AnimalService').default

// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default

module.exports = function () {
  /**
   * 返回marker对象数组
@@ -32,7 +34,8 @@
      // 定义类型 用来区分数据的不同 1.接口接口数据来进行数据的判断 2.根据数据类型的不同，进行不同类型的图片显示
      const judgeValue = getSolidWasteData[i].StorageQty
      var iconUrl = this.differentTypes(judgeValue)

      // console.log(getSolidWasteData[i].Latitude, getSolidWasteData[i].Longitude)
      // console.log(getSolidWasteData[i])
      const marker = L.marker([positionX, positionY], {
        totransferData: getSolidWasteData[i],
        icon: L.icon({
@@ -41,6 +44,9 @@
          iconAnchor: [15, 15]
        })
      })
      // console.log(L.icon)
      // console.log(iconUrl)
      // console.log(marker)
      layer.addLayer(marker)
    }
  }
@@ -69,17 +75,33 @@

  // 根据点击不同数据 进行接口的数据请求
  this.requestSolidWasteData = async (e) => {
    // 基本信息 和 详细信息 展示数据所需参数
    // const dataValue = {
    //   StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
    // }
    // console.log(e.layer.options.totransferData.Name)
    // 弹框标题
    const title = e.layer.options.totransferData.Name
    // 基本信息 tabs
    // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
    // 详细信息展示 table
    // const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)

    // // 绑定弹框实例
    // const PublicBounced = window.Vue.extend(publicBounced)
    // const instance = new PublicBounced().$mount()
    // document.body.appendChild(instance.$el)
    // // document.body.removeChild(instance.$el)
    // // 通过方法 向绑定弹框传递数据
    // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    /* flyTo()弹出框平移事件 */
    this.setPanTo(e.latlng, 300)

    // console.log(e.layer.options.totransferData.StoragePlaceId)
    window.$layer.open({
      content: {
        content: WasteSolidIndex, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          info: this.info,
          storagePlaceId: e.layer.options.totransferData.StoragePlaceId
        }
      },

 src/components/LayerController/logic/WasteWater.js

@@ -1,10 +1,13 @@
/**
 * 废水
 */
// import WasteWater from "../../table/components/WasteWater";

const AnimalService = require('../service/AnimalService').default
const mapApi = require('../../../api/mapApi').default
// 弹窗数据引进
const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default
const WasteWaterIndex = require('@components/BaseNav/WasteWater/WasteWaterIndex').default
// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default

const NormalImg = '/assets/images/map/wastewater/fs_bright_green.png' // 正常
const OffImg = '/assets/images/map/wastewater/fs_gray.png' // 停运
@@ -34,11 +37,11 @@
      const testValue = data[i].ContrLevel
      const iconUrl = this.differentTypes(testValue)
      const marker = L.marker([positionX, positionY], {
        test: data[i],
        totransferData: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [35, 35],
          iconAnchor: [18, 18]
          iconAnchor: [15, 15]
        })
      })
      layer.addLayer(marker)
@@ -46,42 +49,57 @@
  }

  // 分割线-------------------------------------------------------------------------------
  // this.
  this.bindTooltip = (layer) => {
    return layer.options.test.Name
    return layer.options.totransferData.Name
  }

  this.clickListener = async (e) => {
    // console.log(e)
  this.clickListener = (e) => {
    // 点击marker的pulse()光波
    this.animalService.pulseEffect(e.latlng)
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    const hourValue = {
      onLineMonEmissPointId: '23',
      monItemId: '28,31',
      beginTime: '2020-04-06 15:13:20',
      endTime: '2020-04-07 15:13:20',
      dataType: '2'
    }
    const dateValue = {
      onLineMonEmissPointId: '23',
      monItemId: '28,31',
      beginTime: '2020-04-06',
      endTime: '2020-04-07',
      dataType: '1'
    }
    const detailData = await mapApi.getWasteWaterMonitoringDetails(dataValue) // 明细表返回数据
    const hourData = await mapApi.getQueryOnlineMonData(hourValue) // 小时数据
    const dateData = await mapApi.getQueryOnlineMonData(dateValue) // 日数据
    // const drawback = await mapApi.getWasteWaterMonitoring()
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.setWaterData(e.layer.options.test, detailData.Result.DataInfo, hourData.Result.DataInfo, dateData.Result.DataInfo, 'feishui')
    // console.log(e.layer.options.test)
    instance.$mount()
    document.body.appendChild(instance.$el)
    this.setPanTo(e.latlng, 80)
    /* 点击数据的接口请求 */
    this.requestWasteWaterData(e).then(e)
    console.log()
  }
  this.requestWasteWaterData = async (e) => {
    // 基本信息 和 详细信息 展示数据所需参数
    // const dataValue = {
    //   StoragePlaceId: e.layer.options.test.StoragePlaceId
    // }
    // 弹框标题
    const title = e.layer.options.totransferData.Name
    console.log(e.layer.options)
    // 基本信息 tabs
    // const resultBasic = await mapApi.getWasteWater(dataValue)
    // 图表信息展示 echarts
    // 实时数据
    // const resultReal = await mapApi.getDataItems(Value)
    // 小时数据 及 明细表数据
    // const result = await mapApi.getQueryOnlineMonData(dataValue)
    // 日数据 及 明细表数据
    // const result = await mapApi.getQueryOnlineMonData(dataValue)
    // 人工数据
    // const resultEchart = await mapApi.getQueryLabMonData(dataValue)

    // // 绑定弹框实例
    // const PublicBounced = window.Vue.extend(publicBounced)
    // const instance = new PublicBounced().$mount()
    // document.body.appendChild(instance.$el)
    // // document.body.removeChild(instance.$el)
    // // 通过方法 向绑定弹框传递数据
    // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    /* flyTo()弹出框平移事件 */
    this.setPanTo(e.latlng, 150)
    window.$layer.open({
      content: {
        content: WasteWaterIndex, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          info: this.info
          // storagePlaceId: e.layer.options.totransferData.StoragePlaceId
        }
      },
      title: title // 标题
    })
  }

  // 根据返回值的不同标记不同图片
@@ -115,6 +133,7 @@
    }
    return testChange
  }
  // flayTo() 弹框的可滑动事件
  this.setPanTo = (pos, value) => {
    var position = pos
    position = window.map.latLngToLayerPoint(position)