Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

陈泽平

2021-05-31 3bfe1e5779946a5a3c09621219c0890e8c286868

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 public/assets/governEquipment.json

@@ -20,7 +20,7 @@
    "status": 1
  },
  {
    "no": 1,
    "no": 2,
    "company": "天津石化",
    "plate": "炼油板块",
    "unitName": "化工部",

 src/components/LayerController/logic/GovernEquipment.js

@@ -2,7 +2,7 @@
 * 污染源
 */
// 信息组件
const GovernEquipmentIndex = require('../../base-page/RiskSource/RiskSourceIndex.vue').default
const GovernEquipmentIndex = require('../../base-page/GovernEquipment/WasteWaterIndex').default
// 使用封装方法
const AnimalService = require('../service/AnimalService').default
// 请求接口数据
@@ -63,7 +63,7 @@
        comp: GovernEquipmentIndex, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          riskSourceId: e.layer.options.totransferData.no
          governId: e.layer.options.totransferData.no
        }
      },
      title: title // 标题

 src/components/base-page/GovernEquipment/Detail.vue

New file
@@ -0,0 +1,113 @@
<template>
  <div id="wasteWaterDetailBox" class="detail" style="width: 5rem">
    <el-table :data="tableData" style="width: 100%;" height="2.07rem">
      <el-table-column prop="LabMonTime" label="检测时间"></el-table-column>
      <el-table-column label="COD">
        <el-table-column prop="LabMonValue" label="监测值" width="80"></el-table-column>
        <el-table-column prop="LabMonValue" label="标准值" width="80"></el-table-column>
      </el-table-column>
      <el-table-column label="氨氮">
        <el-table-column prop="LabMonValue" label="监测值" width="80"></el-table-column>
        <el-table-column prop="LabMonValue" label="标准值" width="80"></el-table-column>
      </el-table-column>
      <el-table-column label="总磷">
        <el-table-column prop="LabMonValue" label="监测值" width="80"></el-table-column>
        <el-table-column prop="LabMonValue" label="标准值" width="80"></el-table-column>
      </el-table-column>
      <el-table-column label="总氮">
        <el-table-column prop="LabMonValue" label="监测值" width="80"></el-table-column>
        <el-table-column prop="LabMonValue" label="标准值" width="80"></el-table-column>
      </el-table-column>
      <!--      <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 PublicDataStandard from '../PublicDataStandard'
// import mapApi from '@/api/mapApi'
import mapApi from '../../../api/mapApi'
import 'dayjs/locale/es'
import dayjs from 'dayjs'

export default {
  name: 'Detail',
  components: {
    // PublicDataStandard
  },
  data () {
    return {
      tableData: [],
      timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      timeStart: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss')
    }
  },
  props: {
    LabMonPointId: {
      type: Number
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initdetail()
    })
  },
  methods: {
    async initdetail () {
      const timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      var timeStart = null
      var oDate = new Date()
      var year = oDate.getFullYear()
      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { // 判断是平年还是闰年
        timeStart = dayjs().subtract(366, 'day').format('YYYY-MM-DD HH:mm:ss')
      } else {
        timeStart = dayjs().subtract(365, 'day').format('YYYY-MM-DD HH:mm:ss')
      }
      const data = {
        companyId: 3900100145,
        companyCode: '',
        poltSourceId: '',
        labMonPointId: this.LabMonPointId ? this.LabMonPointId : '',
        poltMtrlId: '',
        monItemId: '28,31,35',
        emissTypeId: '',
        beginTime: timeStart,
        endTime: timeEnd
      }
      const result = (await mapApi.getQueryLabMonData(data)).Result.DataInfo
      // console.log(result)
      this.tableData = result
      for (let i = 0; i < result.length; i++) {
        if (result[i].LabMonValue === '0') {
          return '-'
        }
      }
    }
  }
}

</script>

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

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

 src/components/base-page/GovernEquipment/PublicTabs.vue

New file
@@ -0,0 +1,117 @@
<template>
  <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>
    <div class="main">
      <div class="main-matter">
        <div>
          <ul>
            <li><span class="namer">监测点名称：</span>{{ storagePlaceId.Name }}</li>
            <li><span class="namer">生产单位：</span>{{ storagePlaceId.porltName }}</li>
            <li><span class="namer">排放类型名称：</span>{{ storagePlaceId.MonTypeName }}</li>
            <li><span class="namer">排放去向：</span>{{ storagePlaceId.EmissDirecti }}</li>
            <li><span class="namer">控制级别名称：</span>{{ storagePlaceId.ContrLevelShowName }}</li>
            <li><span class="namer">内/外排放口：</span>{{ storagePlaceId.OrOutPortName }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import mapApi from '../../../api/mapApi'

export default {
  name: 'WaterTabs',
  props: ['storagePlaceId'],
  data () {
    return {}
  }
}
</script>

<style scoped lang="less">

.win {
  position: relative;
  margin-bottom: 0.04rem;
  background-color: @background-color;
}

.main {

  .main-matter {
    font-size: 0.06rem;
    font-weight: normal;
    padding: 0.04rem 0;
    border: 1px solid #396d83;

    ul {
      //width: 100%;
      //height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: -0.04rem;

      li {
        margin-bottom: 0.04rem;
        min-width: 31%;
        box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
        color: #00fff6;
        border-radius: 0.02rem;
        font-size: 0.08rem;
        line-height: 0.09rem;
        padding: 0.03rem .5%;
        .namer{
          display: inline-block;
          width: .6rem;
          text-align: right;
        }
      }

    }
  }
}

.border_corner {
  z-index: 999;
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  border: 1px 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;
}
</style>

 src/components/base-page/GovernEquipment/WasteWaterDayChart.vue

New file
@@ -0,0 +1,718 @@
<template>
    <div id="wasteWaterDayChartBox" class="echarts-box">
        <div class="tab-scroll">
            <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
        </div>
        <div class="echarts-form">
            <span class="demonstration">开始时间：</span>
            <el-date-picker v-model="formData.timeStart" value-format="yyyy-MM-dd" type="datetime" size="mini"></el-date-picker>
            <span class="demonstration">结束时间：</span>
            <el-date-picker v-model="formData.timeEnd" value-format="yyyy-MM-dd" type="datetime" size="mini"></el-date-picker>
            <span class="demonstration">采样点数：</span>
            <el-select class="selectBox" v-model="formData.region" placeholder="请选择" size="mini">
                <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
            <el-button @click="querySearch()">查询</el-button>
            <el-popover
                placement="top"
                width="100%"
                popper-class="popoverBoxStyle"
                trigger="click">
              <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
              <el-button slot="reference" id="mingxiBtn">明细表</el-button>
            </el-popover>
        </div>
        <div class="echarts-chart">
            <div ref="echartsDay"></div>
        </div>
        <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import PublicDataStandard from '../PublicDataStandard'
import mapApi from '@/api/mapApi'
import DynamicTable from '../../../views/popup/DynamicHeader/DynamicTable' // 多级表头

export default {
  name: 'WasteWaterDayChart',
  components: {
    PublicDataStandard,
    DynamicTable
  },
  data () {
    return {
      // tab栏传递接收数据
      dataStandard: [],
      tableData: null,
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
        timeEnd: dayjs().format('YYYY-MM-DD')
      },
      chart: null,
      dataType: 1,
      jcdID: 1,
      bzz: null,
      bzzList: [],
      // 表头数据
      tableConfig: [
        {
          id: 100,
          label: '排放点',
          prop: 'OnLineMonEmissPointName'
        },
        {
          id: 200,
          label: '监测时间',
          prop: 'MonTimeStr'
        },
        {
          id: 300,
          label: 'COD',
          prop: 'PoltmtrlName',
          children: [
            {
              id: 310,
              label: '实测排放量（kg/h）',
              prop: 'COD_EmissQty'
            },
            {
              id: 320,
              label: '实测浓度（mg/l）',
              prop: 'COD_MonQty'
            },
            {
              id: 330,
              label: '标准值（mg/l）',
              prop: 'COD_StdValue'
            }
          ]
        },
        {
          id: 400,
          label: '氨氮',
          prop: 'PoltmtrlName',
          children: [
            {
              id: 410,
              label: '实测排放量（kg/h）',
              prop: '氨氮_EmissQty'
            },
            {
              id: 420,
              label: '实测浓度（mg/l）',
              prop: '氨氮_MonQty'
            },
            {
              id: 430,
              label: '标准值（mg/l）',
              prop: '氨氮_StdValue'
            }
          ]
        },
        {
          id: 500,
          label: 'PH',
          prop: 'PoltmtrlName',
          children: [
            {
              id: 510,
              label: '实测排放量（kg/h）',
              prop: 'pH_EmissQty'
            },
            {
              id: 520,
              label: '实测浓度（mg/l）',
              prop: 'pH_MonQty'
            },
            {
              id: 530,
              label: '标准值（mg/l）',
              prop: 'pH_StdValue'
            }
          ]
        },
        {
          id: 600,
          label: '废水流量',
          prop: '',
          children: [
            {
              id: 610,
              label: '实测流量（m³/h）',
              prop: '废水流量_MonQty'
            }
          ]
        }
      ]
    }
  },
  props: {
    OnlineMonEmissPointId: {
      type: Number
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.draw24Chart()
    })
  },
  methods: {
    querySearch () {
      this.draw24Chart()
    },
    async draw24Chart () {
      const data = {
        poltSourceId: '',
        poltMtrlId: '',
        emissTypeId: '',
        onLineMonEmissPointId: 23,
        monItemId: '28,31,35', // 监测项  COD、氨氮、PH
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
      this.get24HourDate(result)
    },
    get24HourDate (res) {
      if (res.length > 0) {
        this.dataStandard = []
        this.tableData = this.analysisResult(res) // 小时明细表解析结果
        // 处理数据开始
        const d = res
        const nameList = [] // 存放图例
        const dateList = [] // 存放时间
        const dataList = [] // 存放数据
        let data
        const bzh = []

        for (let i = 0; i < d.length; i++) {
          if (d[i].MonItemId === '29') {
            continue
          }
          const MonTimeStr = d[i].MonTimeStr

          const d1 = MonTimeStr.split('/')
          // let d2=d1[2].split(' ');
          let strDate
          if (d1[1] > 9) {
            // if(d2[0]>9){
            strDate = MonTimeStr.substring(8, 10) + '日'
            // }else {
            //     strDate=MonTimeStr.substring(8,9)+"日";
            // }
          } else {
            // if(d2[0]>9){
            strDate = MonTimeStr.substring(7, 9) + '日'
            // }else {
            //     strDate=MonTimeStr.substring(7,8)+"日";
            // }
          }

          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            dateList.push(strDate)
            this.dataStandard.push({
              current: {
                name: d[i].PoltmtrlName.trim(),
                val: ''
              },
              standard: {
                name: '标准',
                val: ''
              }
            })
            bzh.push(d[i].StdValue)
            data = {
              name: d[i].PoltmtrlName.trim(),
              data: []
            }
            if (d[i].MonQty !== null) {
              data.data.push(d[i].MonQty)
            }
            dataList.push(data)
          } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) {
            nameList.push(d[i].PoltmtrlName)
            bzh.push(d[i].StdValue)
            this.dataStandard.push({
              current: {
                name: d[i].PoltmtrlName.trim(),
                val: ''
              },
              standard: {
                name: '标准',
                val: ''
              }
            })
            data = {
              name: d[i].PoltmtrlName.trim(),
              data: []
            }
            if (d[i].MonQty !== null) {
              data.data.push(d[i].MonQty)
            }
            dataList.push(data)
          } else {
            if (dateList.indexOf(strDate) < 0) {
              dateList.push(strDate)
            }
            for (let j = 0; j < dataList.length; j++) {
              if (d[i].PoltmtrlName.trim() === dataList[j].name) {
                if (d[i].MonQty !== null)dataList[j].data.push(d[i].MonQty)
              }
            }
          }
        }
        // 处理数据结束

        const lengList = []
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
          let 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)
          }

          this.bzz = {
            name: nameList[l],
            bzhui: bzh[l]
          }
          this.bzzList.push(this.bzz)
        }
        lengList.push(objTemp)

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

        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氨氮') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '总磷') {
            zdcbcolor = 'red'
            zxcolor = '#f48183'
          } else if (nameList[j] === '总氮') {
            zdcbcolor = 'red'
            zxcolor = '#d9f2f4'
          } else {
            zdcbcolor = 'red'
            zxcolor = '#9ACD32'
          }

          let sdata = []

          for (let k = 0; k < dataList.length; k++) {
            if (nameList[j].trim() === dataList[k].name.trim()) {
              sdata = dataList[k].data.reverse()
            }
          }

          const ydata = {
            name: nameList[j],
            data: sdata,
            zdcbcolor: zdcbcolor,
            zxcolor: zxcolor,
            bzz: bzh[j]
          }
          ydatas.push(ydata)
        }
        for (var t = 0; t < this.dataStandard.length; t++) {
          this.dataStandard[t].current.val = ydatas[t].data[ydatas[t].data.length - 1].toFixed(2)
          this.dataStandard[t].standard.val = ydatas[t].bzz
        }
        const yname = '浓度(mg/l)'
        this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      this.chart = this.$echarts.init(this.$refs.echartsDay)
      this.chart.clear()
      this.chart.clear()
      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      const bzzList = this.bzzList
      const serLists = []
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zxcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value) {
                    if (c.value[1] > biaozhuiz) {
                      return zdcbcolor
                    } else if (c.value[1] > biaozhuiz * 0.9) {
                      return '#FFA500'
                    } else {
                      return '#33c95f'
                    }
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                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: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let 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'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
        }
        serLists.push(obj)
      }
      const option = {
        /*  title: {
            text: title,
        }, */
        tooltip: { // 提示框
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          formatter: function (params) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // let name = params[i].name
              // 图表title名称
              const seriesName = params[i].seriesName
              // 值
              const value = params[i].value

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

              let maker = params[i].marker
              if (seriesName === 'COD') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
              } else if (seriesName === '氨氮') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
              } else if (seriesName === '总磷') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
              } else if (seriesName === '总氮') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
        },
        toolbox: { // 打印等工具
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '20%',
          left: '6%',
          right: '6%',
          bottom: '12%'
        },
        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: 'category',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
            // rotate: 20,
            // 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) {
          //   let max_val_list = [] // 所有显示折线的标准值
          //   if (bzzList && bzzList.length > 0) {
          //     $.each(bzzList, function (index, item) {
          //       max_val_list.push(item.bzhui)
          //     })
          //   }
          //   max_val_list = max_val_list.sort(function (a, b) {
          //     return a - b
          //   }) // 排序
          //   let ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
          //   return parseInt(ma)
          // },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: dataUnit,
          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.chart.setOption(option)
      window.onresize = this.chart.resize
    },
    analysisResult (result) {
      // 处理表格头
      const json = {}
      const arr = []
      // 处理表格内容
      const bodyDataList = []
      const dataMap = {}
      for (let i = 0; i < result.length; i++) {
        json[result[i].PoltmtrlName] = result[i].PoltmtrlName
        const rgdata = result[i]
        const timeTag = rgdata.MonTimeStr
        if (!dataMap[timeTag]) {
          dataMap[timeTag] = { MonTimeStr: '' + rgdata.MonTimeStr }
        }
        // 往数据中添加属性数据
        const el = dataMap[timeTag]
        el.OnLineMonEmissPointName = rgdata.OnLineMonEmissPointName
        el[rgdata.PoltmtrlName + '_EmissQty'] = rgdata.EmissQty ? rgdata.EmissQty.toFixed(2) : '--'
        el[rgdata.PoltmtrlName + '_MonQty'] = rgdata.MonQty ? rgdata.MonQty.toFixed(2) : '--'
        el[rgdata.PoltmtrlName + '_StdValue'] = rgdata.StdValue ? rgdata.StdValue.toFixed(2) : '--'
      }
      let FSLLtemp = null
      for (var key in json) {
        if (key === '废水流量' || key === '废水') {
          FSLLtemp = key
        } else {
          arr.push(key)
        }
      }
      if (FSLLtemp != null) {
        arr.push(FSLLtemp)
      }
      for (var p in dataMap) {
        bodyDataList.push(dataMap[p])
      }
      return bodyDataList
    }
  }
}
</script>

<style lang="less">
#wasteWaterDayChartBox .echarts-form .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
  border-color: #336fa4;
}
#wasteWaterDayChartBox .echarts-form{
  margin-top: 1px
}
#wasteWaterDayChartBox .echarts-form .el-input__icon{
  height: .13rem;
  top: -.02rem;
  right: -0.03rem;
  position: absolute;
  color: #00d0f9;
}
#wasteWaterDayChartBox .echarts-form .selectBox .el-input__icon:last-child{
  top: .02rem;
}
#wasteWaterDayChartBox .echarts-form .selectBox .is-reverse{
  top: -.02rem !important;
}
#wasteWaterDayChartBox .echarts-form .el-button{
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
}
#mingxiBtn{
  margin-left: -.02rem;
}
</style>

 src/components/base-page/GovernEquipment/WasteWaterHoursChart.vue

New file
@@ -0,0 +1,736 @@
<template>
  <div id="wasteWaterHoursChartBox" class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd HH" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select class="selectBox" v-model="formData.region" placeholder="请选择" size="mini">
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch()">查询</el-button>
      <el-popover
          placement="top"
          width="100%"
          popper-class="popoverBoxStyle"
          trigger="click">
        <dynamic-table :tableData="tableData" :tableHeader="tableConfig" v-if="tableData"></dynamic-table>
        <el-button slot="reference" id="mingxiBtn">明细表</el-button>
      </el-popover>
    </div>
    <div class="echarts-chart">
      <div ref="echartsHour"></div>
    </div>
    <span class="time-select">{{ formData.startTime }}时—{{ formData.endTime }}时</span>
  </div>
</template>

<script>
import PublicDataStandard from '../PublicDataStandard'
import dayjs from 'dayjs'
import mapApi from '../../../api/mapApi'
import DynamicTable from '../../../views/popup/DynamicHeader/DynamicTable' // 多级表头

export default {
  name: 'WasteWaterHoursChart',
  components: {
    PublicDataStandard,
    DynamicTable
  },
  data () {
    return {
      // tab栏传递接收数据
      dataStandard: [],
      popUpName: '',
      tableData: null,
      mingxiBoxHtml: '',
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        startTime: dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      chart: null,
      jcdID: 1,
      dataType: 2,
      bzz: null,
      bzzList: [],
      bz: '',
      // 表头数据
      tableConfig: [
        {
          id: 100,
          label: '排放点',
          prop: 'OnLineMonEmissPointName'
        },
        {
          id: 200,
          label: '监测时间',
          prop: 'MonTimeStr'
        },
        {
          id: 300,
          label: 'COD',
          prop: 'PoltmtrlName',
          children: [
            {
              id: 310,
              label: '实测排放量（kg/h）',
              prop: 'COD_EmissQty'
            },
            {
              id: 320,
              label: '实测浓度（mg/l）',
              prop: 'COD_MonQty'
            },
            {
              id: 330,
              label: '标准值（mg/l）',
              prop: 'COD_StdValue'
            }
          ]
        },
        {
          id: 400,
          label: '氨氮',
          prop: 'PoltmtrlName',
          children: [
            {
              id: 410,
              label: '实测排放量（kg/h）',
              prop: '氨氮_EmissQty'
            },
            {
              id: 420,
              label: '实测浓度（mg/l）',
              prop: '氨氮_MonQty'
            },
            {
              id: 430,
              label: '标准值（mg/l）',
              prop: '氨氮_StdValue'
            }
          ]
        },
        {
          id: 500,
          label: 'PH',
          prop: 'PoltmtrlName',
          children: [
            {
              id: 510,
              label: '实测排放量（kg/h）',
              prop: 'pH_EmissQty'
            },
            {
              id: 520,
              label: '实测浓度（mg/l）',
              prop: 'pH_MonQty'
            },
            {
              id: 530,
              label: '标准值（mg/l）',
              prop: 'pH_StdValue'
            }
          ]
        },
        {
          id: 600,
          label: '废水流量',
          prop: '',
          children: [
            {
              id: 610,
              label: '实测流量（m³/h）',
              prop: '废水流量_MonQty'
            }
          ]
        }
      ]
    }
  },
  props: {
    OnlineMonEmissPointId: {
      type: Number
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.draw24Chart()
    })
  },
  methods: {
    // 点击查询功能
    querySearch () {
      this.draw24Chart()
    },
    // 初始化数据请求
    async draw24Chart () {
      const data = {
        poltSourceId: '',
        poltMtrlId: '',
        emissTypeId: '',
        onLineMonEmissPointId: 23,
        monItemId: '28,31,35', // 监测项  COD、氨氮、PH
        beginTime: this.formData.startTime,
        endTime: this.formData.endTime,
        dataType: this.dataType
      }
      const result = (await mapApi.getQueryOnlineMonData(data)).Result.DataInfo
      this.popUpName = result[0].OnLineMonEmissPointName
      this.get24HourDate(result)
    },
    // 绘制小时数据折线图
    get24HourDate (result) {
      if (result.length > 0) {
        this.dataStandard = []
        this.tableData = this.analysisResult(result) // 小时明细表解析结果
        const d = result
        const nameList = [] // 存放图例
        const dateList = [] // 存放时间
        let dataList = [] // 存放数据
        let data = []
        const bzh = []
        for (let i = 0; i < d.length; i++) {
          if (d[i].MonItemId === '29') {
            continue
          }

          const MonTimeStr = d[i].MonTimeStr

          let strDate
          const d1 = MonTimeStr.split('/') // 月
          const d2 = d1[2].split(' ')
          const t = MonTimeStr.split(' ')
          const hlist = t[1].split(':')
          const h = hlist[0]
          if (d1[1] > 9) {
            //  strDate=MonTimeStr.substring(8,10)+"日";
            if (d2[0] > 9) {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(11, 13) + '时'
              } else {
                strDate += MonTimeStr.substring(11, 12) + '时'
              }
            } else {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(10, 12) + '时'
              } else {
                strDate += MonTimeStr.substring(10, 11) + '时'
              }
            }
          } else {
            if (d2[0] > 9) {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(10, 12) + '时'
              } else {
                strDate += MonTimeStr.substring(10, 11) + '时'
              }
            } else {
              strDate = ''
              if (h > 9) {
                strDate += MonTimeStr.substring(9, 11) + '时'
              } else {
                strDate += MonTimeStr.substring(9, 10) + '时'
              }
            }
          }
          if (nameList.length === 0) {
            nameList.push(d[i].PoltmtrlName.trim())
            this.dataStandard.push({
              current: {
                name: d[i].PoltmtrlName.trim(),
                val: 29.93
              },
              standard: {
                name: '标准',
                val: 100
              }
            })
            dateList.push(strDate)
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            if (d[i].MonQty !== null)data.push(d[i].MonQty)
            bzh.push(d[i].StdValue)
          } else if (nameList.indexOf(d[i].PoltmtrlName.trim()) < 0) {
            nameList.push(d[i].PoltmtrlName)
            this.dataStandard.push({
              current: {
                name: d[i].PoltmtrlName.trim(),
                val: 29.93
              },
              standard: {
                name: '标准',
                val: 100
              }
            })
            bzh.push(d[i].StdValue)
            dataList.push(data)
            data = []
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            if (d[i].MonQty !== null)data.push(d[i].MonQty)
          } else if (i === d.length - 1) {
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            data.push(d[i].MonQty)
            dataList.push(data)
          } else {
            if (dateList.indexOf(strDate) < 0) {
              dateList.push(strDate)
            }
            // data.push()
            if ((d[i].PoltmtrlName === '废水流量' || d[i].PoltmtrlName === '废水') && d[i].MonQty < 0) {
              d[i].MonQty = 0
            }
            if (d[i].MonQty !== null)data.push(d[i].MonQty)
          }
        }
        const newList = []

        for (let i = 0; i < dataList.length; i++) {
          const list = dataList[i].reverse()
          newList.push(list)
        }
        dataList = newList

        const lengList = []
        let objTemp

        for (let l = 0; l < nameList.length; l++) {
          let obj
          let 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)

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

        for (let j = 0; j < nameList.length; j++) {
          let zdcbcolor, zxcolor
          if (nameList[j] === 'COD') {
            zdcbcolor = 'red'
            zxcolor = '#fff21c'
          } else if (nameList[j] === '氨氮') {
            zdcbcolor = 'red'
            zxcolor = '#00B0F0'
          } else if (nameList[j] === '废水流量') {
            zdcbcolor = 'red'
            zxcolor = '#8fdc6e'
          }
          const ydata = {
            name: nameList[j],
            data: dataList[j],
            zdcbcolor: zdcbcolor,
            zxcolor: zxcolor,
            bzz: bzh[j]
          }

          this.bzz = {
            name: nameList[j],
            bzhui: bzh[j]
          }
          this.bzzList.push(this.bzz)
          ydatas.push(ydata)
        }
        // console.log(ydatas)

        const yname = '浓度(mg/l)'
        for (var t = 0; t < this.dataStandard.length; t++) {
          this.dataStandard[t].current.val = ydatas[t].data[ydatas[t].data.length - 1].toFixed(2)
          this.dataStandard[t].standard.val = ydatas[t].bzz
        }
        this.effChartShow(legend, xdata, ydatas, yname, this.jcdID, this.datatype)
      }
    },
    effChartShow (legend, xdata, ydatas, yname, jcdID, datatype) {
      // console.log(ydatas)
      // 初始化图标
      this.chart = this.$echarts.init(this.$refs.echartsHour)
      this.chart.clear()
      // const bzlist = this.bzzList
      // const bzz = this.bz

      let dataUnit = ''
      if (datatype === 1) {
        dataUnit = '流量(m³/d)'
      } else {
        dataUnit = '流量(m³/h)'
      }
      const bzzList = this.bzzList
      const serLists = []
      for (let i = 0; i < ydatas.length; i++) {
        const zdcbcolor = ydatas[i].zxcolor
        const bz = ydatas[i].bzz
        let obj
        if (bz) {
          obj = {
            name: ydatas[i].name,
            symbol: 'circle', // 折点形状
            symbolSize: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let i = 0; i < bzzList.length; i++) {
                    if (bzzList[i].name === c.seriesName) {
                      biaozhuiz = bzzList[i].bzhui
                    }
                  }
                  if (c.value) {
                    if (c.value[1] > biaozhuiz) {
                      return zdcbcolor
                    } else if (c.value[1] > biaozhuiz * 0.9) {
                      return '#FFA500'
                    } else {
                      return '#33c95f'
                    }
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: ydatas[i].zxcolor, // 折点边框的颜色
                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: 10, // 大小
            smooth: false, // 直线 ，true 为曲线
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                  let biaozhuiz
                  for (let 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'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
                  width: 5
                },
                borderColor: 'black', // 折点边框的颜色
                label: { // 显示值
                  show: false
                }
              }
            },
            type: 'line',
            data: ydatas[i].data
          }
        }
        serLists.push(obj)
      }
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          formatter: function (params) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              // let name = params[i].name
              // 图表title名称
              const seriesName = params[i].seriesName
              // 值
              const value = params[i].value

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

              let maker = params[i].marker
              if (seriesName === 'COD') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff21c;"></span>'
              } else if (seriesName === '氨氮') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00B0F0;"></span>'
              } else if (seriesName === '总磷') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f48183;"></span>'
              } else if (seriesName === '废水流量') {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#9ACD32;"></span>'
              } else {
                maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#d9f2f4;"></span>'
              }
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          data: legend
        },
        grid: {
          // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '20%',
          left: '6%',
          right: '6%',
          bottom: '12%'
        },
        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: 'category',
          boundaryGap: false,
          axisLabel: { // x轴全部显示
            // rotate: 20,
            // 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) {
          //   let max_val_list = [] // 所有显示折线的标准值
          //   if (bzzList && bzzList.length > 0) {
          //     $.each(bzzList, function (index, item) {
          //       max_val_list.push(item.bzhui)
          //     })
          //   }
          //   max_val_list = max_val_list.sort(function (a, b) {
          //     return a - b
          //   }) // 排序
          //   let ma = value.max > max_val_list[max_val_list.length - 1] ? value.max + 5 : max_val_list[max_val_list.length - 1]
          //   return parseInt(ma)
          // },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          }, // y轴 网格线不显示,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1// 这里是为了突出显示加上的
            }
          }
        }, {
          type: 'value',
          name: dataUnit,
          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.chart.setOption(option)
      window.onresize = this.chart.resize
    },
    analysisResult (result) {
      // 处理表格头
      const json = {}
      const arr = []
      // 处理表格内容
      const bodyDataList = []
      const dataMap = {}
      for (let i = 0; i < result.length; i++) {
        json[result[i].PoltmtrlName] = result[i].PoltmtrlName
        const rgdata = result[i]
        const timeTag = rgdata.MonTimeStr
        if (!dataMap[timeTag]) {
          dataMap[timeTag] = { MonTimeStr: '' + rgdata.MonTimeStr }
        }
        // 往数据中添加属性数据
        const el = dataMap[timeTag]
        el.OnLineMonEmissPointName = rgdata.OnLineMonEmissPointName
        el[rgdata.PoltmtrlName + '_EmissQty'] = rgdata.EmissQty ? rgdata.EmissQty.toFixed(2) : '--'
        el[rgdata.PoltmtrlName + '_MonQty'] = rgdata.MonQty ? rgdata.MonQty.toFixed(2) : '--'
        el[rgdata.PoltmtrlName + '_StdValue'] = rgdata.StdValue ? rgdata.StdValue.toFixed(2) : '--'
      }
      let FSLLtemp = null
      for (var key in json) {
        if (key === '废水流量' || key === '废水') {
          FSLLtemp = key
        } else {
          arr.push(key)
        }
      }
      if (FSLLtemp != null) {
        arr.push(FSLLtemp)
      }
      for (var p in dataMap) {
        bodyDataList.push(dataMap[p])
      }
      return bodyDataList
    }
  }
}
</script>
<style>
#wasteWaterHoursChartBox .echarts-form .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
  border-color: #336fa4;
}
#wasteWaterHoursChartBox .echarts-form .el-input__icon{
  height: .13rem;
  top: -.02rem;
  right: -0.03rem;
  position: absolute;
  color: #00d0f9;
}
#wasteWaterHoursChartBox .echarts-form .selectBox .el-input__icon:last-child{
  top: .02rem;
}
#wasteWaterHoursChartBox .echarts-form .selectBox .is-reverse{
  top: -.02rem !important;
}
#wasteWaterHoursChartBox .echarts-form .el-button{
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
}
#mingxiBtn{
  margin-left: -.02rem;
}
</style>

 src/components/base-page/GovernEquipment/WasteWaterIndex.vue

New file
@@ -0,0 +1,208 @@
<template>
  <public-sector>
    <template v-slot:tabs>
      <public-tabs :storagePlaceId="storagePlaceId"></public-tabs>
    </template>
    <template v-slot:publicPart>
      <div class="public-part">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="navigation">
          <div class="navigation-left">
            <div :class="active===0?'hover':''" class="uncheck" @click='tabTaggle("RealData",0)'>实时数据</div>
            <div :class="active===1?'hover':''" class="uncheck" @click='tabTaggle("HourData",1)'>小时数据</div>
            <div :class="active===2?'hover':''" class="uncheck" @click='tabTaggle("DayData",2)'>日数据</div>
            <div :class="active===3?'hover':''" class="uncheck" @click='tabTaggle("Detail",3)'>人工监测数据</div>
          </div>
          <div class="navigation-right" v-if="active !== 3">
            <p>正常</p>
            <i style=" background: #4ec99c;"></i>
            <p>预警</p>
            <i style=" background: #fc9303;"></i>
            <p>超标</p>
            <i style=" background: #fc1d04;"></i>
          </div>
        </div>
        <component :is="currentTab" :OnlineMonEmissPointId="OnlineMonEmissPointId" :LabMonPointId='LabMonPointId' ref="RealData"></component>
      </div>
    </template>
<!--    <template v-slot:video>
      <public-video></public-video>
    </template>-->
  </public-sector>
</template>

<script>

import PublicTabs from './PublicTabs'
import PublicVideo from '../PublicVideo'
import PublicSector from '../PublicSector'
// 图表组件
import RealData from './WasteWaterRealChart'
import HourData from './WasteWaterHoursChart'
import DayData from './WasteWaterDayChart'
import Detail from './Detail'

export default {
  name: 'WasteWaterIndex',
  props: {
    storagePlaceId: {
      type: Object
    },
    OnlineMonEmissPointId: {
      type: Number
    },
    LabMonPointId: {
      type: Number
    }
  },
  components: {
    PublicSector,
    PublicTabs,
    PublicVideo,
    RealData,
    HourData,
    DayData,
    Detail
  },
  data () {
    return {
      activeName: 'first',
      currentTab: RealData,
      active: 0
    }
  },
  methods: {
    tabTaggle (taggleMenu, num) {
      this.currentTab = taggleMenu
      this.active = num
    },
    current (currentTab) {
      currentTab = RealData
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0.07rem;
  border-bottom: 1px #243a55 solid;
  .navigation-left {
    display: flex;
    align-items: center;

    .uncheck {
      cursor: pointer;
      margin-left: -0.05rem;
      width: .8rem;
      padding: 6px 0;
      /*border: 1px solid #2b87c8;*/
      /*border-radius: 4px;*/
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-image: url("../../../../public/assets/images/map-pages/title_bg.png");
      text-align: center;
      vertical-align: middle !important;
      color: #fff;
    }

    .default-uncheck {
      background-color: #0e639e;
      color: #C0C0C0;
      cursor: pointer;
    }

    .hover {
      background-image: url("../../../../public/assets/images/map-pages/title_bg2.png");
      color: #ffffff;
      cursor: pointer;
    }

    .hover:hover {
      cursor: pointer;
      border-radius: 4px;
      text-align: center;
      color: #F0FFFF;
    }
  }

  .navigation-left :hover {
    color: #fff;
    cursor: pointer;
  }

  .navigation-right {
    display: flex;
    align-items: center;

    i {
      display: block;
      width: 0.1rem;
      height: 0.1rem;
      margin: 0 0.1rem 0 0.05rem;
      border-radius: 50%;
      border: 2px #ffffff solid;
    }
  }
}

.public-part {
  position: relative;
  background-color: @background-color;
  font-size: 0.06rem;
  font-weight: normal;
  padding: 0.04rem 0;
  border: 1px solid #396d83;
}

.public-part span:nth-child(1) {
  position: absolute;
  left: -2px;
  top: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 2px 0 0 2px;
}

.public-part span:nth-child(2) {
  position: absolute;
  right: -2px;
  top: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 2px 2px 0 0;
}

.public-part span:nth-child(3) {
  position: absolute;
  right: -2px;
  bottom: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 2px 2px 0;
}

.public-part span:nth-child(4) {
  position: absolute;
  left: -2px;
  bottom: -2px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 2px 2px;
}

</style>

 src/components/base-page/GovernEquipment/WasteWaterRealChart.vue

New file
@@ -0,0 +1,643 @@
<template>
  <div id="wasteWaterRealChartBox" class="echarts-box">
    <div class="tab-scroll">
      <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    </div>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker v-model="formData.startTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker v-model="formData.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="mini"></el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select class="selectBox" v-model="formData.region" placeholder="请选择" size="mini">
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch()">查询</el-button>
      <!-- <el-button>明细表</el-button>-->
    </div>
    <div class="echarts-chart">
      <div  ref="echarts"></div>
    </div>
    <span class="time-select">{{ formData.startTime }}—{{ formData.endTime }}</span>
  </div>
</template>

<script>

import 'dayjs/locale/es'
import dayjs from 'dayjs'

import mapApi from '../../../api/mapApi'
import PublicDataStandard from '../PublicDataStandard'

export default {
  name: 'WasteWaterRealChart',
  components: {
    PublicDataStandard
  },
  data () {
    return {
      // tab栏传递接收数据
      dataStandard: [
        {
          current: {
            name: '氮氧化物',
            val: 29.93
          },
          standard: {
            name: '标准',
            val: 100
          }
        },
        {
          current: {
            name: '二氧化硫',
            val: 17.34
          },
          standard: {
            name: '标准',
            val: 50
          }
        },
        {
          current: {
            name: '烟尘',
            val: 6.93
          },
          standard: {
            name: '标准',
            val: 30
          }
        },
        {
          current: {
            name: '废气流量',
            val: 120
          },
          standard: {
            name: '',
            val: null
          }
        }],
      // 表单数据绑定值
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        startTime: dayjs().subtract(3, 'minute').format('YYYY-MM-DD HH:mm:ss'),
        endTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      // 数据分类处理存储列表
      RealTimeDataList: [],
      // 用于处理标准值
      standardValues: null,
      // 标准值列表
      standardValuesList: [],
      // 用于图表展示设置数组
      nameList: [],
      legendList: [],
      ydatas: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initEchartsData()
    })
  },
  methods: {
    // 查询搜索功能
    querySearch () {
      this.initEchartsData()
    },
    // 初始化数据请求
    async initEchartsData () {
      const data = {
        $tagCodeList: 'TJIP45.y2h508CEMS01NOX,CTJIP45.y2h508CEMS01SO2,CTJIP45.y2h508CEMS01F,CTJIP45.y2h508CEMS01PM',
        $startTime: this.formData.startTime,
        $endTime: this.formData.endTime,
        $step: 15
      }
      const result = (await mapApi.getDataItems(data)).data
      // 数据按类别分组
      this.pointsSet(result)
      // 图标存储处理
      this.legendSet()
      // y轴data数据
      this.yDataSet()
      // 根据已有数据绘制图表
      this.drawRealTimeDateChart()
    },
    // 接口数据按照 数据内分类别设置
    pointsSet (d) {
      // 数组数据置空
      this.nameList = []
      this.RealTimeDataList = []

      let data = []
      let datalist = []

      for (let i = 0; i < d.length; i++) {
        // 判断是否继续执行
        if (d[i].ErrorMessage != null) {
          continue
        }

        // temp 临时数据判断方法
        const tempList = [
          {
            'TJIP45.lscl2tb552AISA11201B': 'COD',
            'TJIP45.lscl2tbAIA-10505-1': '氨氮',
            'TJIP45.lscl2tbAIA-10505-2': '总磷',
            'TJIP45.lscl2tb552AI10710': '总氮',
            'TJIP45.lscl2tb552AISA11202A': '废水流量'
          }
        ]
        // 指标 临时用于数据处理
        const name = tempList[0][d[i].UnionTagCode]

        // 判断市局类型进行分组 =>数组为空时
        if (this.nameList.length === 0) {
          this.nameList.push(name)
          const 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 (this.nameList.indexOf(name) < 0) {
          // 没有指标时
          this.nameList.push(name)
          const 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 (this.nameList.indexOf(name) < 0) {
            this.nameList.push(name)
            const newDate = new Date(d[i].ReadTime)
            data = {
              name: name,
              value: [newDate, d[i].TagValue]
            }
            datalist = {
              name: name,
              data: [data]
            }
            this.RealTimeDataList.push(datalist)
          } 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)
              }
            }
          }
        } 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)
            }
          }
        }
      }
    },
    // legend类别图表展示设置数组
    legendSet () {
      this.legendList = []
      let objTemp
      for (let l = 0; l < this.nameList.length; l++) {
        let obj
        let IconUrl
        if (this.nameList[l] === 'COD') {
          IconUrl = 'image://../assets/imgs/legend/SO2.png'
        } else if (this.nameList[l] === '氨氮') {
          IconUrl = 'image://../assets/imgs/legend/NOX.png'
        } else if (this.nameList[l] === '总磷') {
          IconUrl = 'image://../assets/imgs/legend/YanChen.png'
        } else if (this.nameList[l] === '总氮') {
          IconUrl = 'image://../assets/imgs/legend/zongdan.png'
        } else if (this.nameList[l] === '废水流量') {
          IconUrl = 'image://../assets/imgs/legend/VOCs.png'
        }
        if (this.nameList[l] === '废水' || this.nameList[l] === '废水流量') { // 将废水流量排到数组最后
          objTemp = {
            name: this.nameList[l],
            icon: IconUrl,
            textStyle: {
              color: '#ccc'
            },
            itemWidth: 20,
            itemHeight: 5
          }
        } else {
          obj = {
            name: this.nameList[l],
            icon: IconUrl,
            textStyle: {
              color: '#ccc'
            },
            itemWidth: 20,
            itemHeight: 5
          }
          this.legendList.push(obj)
        }
      }
      this.legendList.push(objTemp)
    },
    // yDataSet 数据处理
    yDataSet () {
      // 数组添加数据 置空
      this.standardValuesList = []
      this.ydatas = []
      for (let j = 0; j < this.nameList.length; j++) {
        let pointColor, lineColor
        if (this.nameList[j] === 'COD') {
          pointColor = 'red'
          lineColor = '#ffff00'
        } else if (this.nameList[j] === '氨氮') {
          pointColor = 'red'
          lineColor = '#00B0F0'
        } else if (this.nameList[j] === '总磷') {
          pointColor = 'red'
          lineColor = '#f48183'
        } else if (this.nameList[j] === '总氮') {
          pointColor = 'red'
          lineColor = '#e0ffff'
        } else if (this.nameList[j] === '废水流量') {
          pointColor = 'red'
          lineColor = '#9ACD32'
        }

        // 临时数据
        const BBZMAPPING = {
          COD: 35,
          氨氮: 30,
          总磷: 0.3,
          总氮: 15,
          废水流量: 3
        }
        for (let m = 0; m < this.RealTimeDataList.length; m++) {
          let stdValue = null
          if (this.RealTimeDataList[m].name === this.nameList[j]) {
            stdValue = BBZMAPPING[this.RealTimeDataList[m].name]
            this.standardValues = {
              name: this.nameList[j],
              standardValue: stdValue
            }
            const yData = {
              name: this.nameList[j],
              data: this.RealTimeDataList[m].data,
              pointColor: pointColor,
              lineColor: lineColor,
              standardValue: stdValue
            }
            this.standardValuesList.push(this.standardValues)
            this.ydatas.push(yData)
          }
        }
      }
    },
    // 根据处理好的数组进行echarts图标的渲染
    drawRealTimeDateChart () {
      this.myChart = this.$echarts.init(this.$refs.echarts)
      this.myChart.clear()

      // y轴侧边标题neme
      const ySideName = '浓度(mg/m³)'
      // 标准值列表
      const standardValuesList = this.standardValuesList

      // 应用于数据结果判断标准值
      let standardValue

      // series数据存储
      const serLists = []

      for (let i = 0; i < this.ydatas.length; i++) {
        // 应用于数据处理
        const pointColor = this.ydatas[i].pointColor
        // 数据标准值
        const bz = this.ydatas[i].standardValue
        let seriesObj

        if (bz) {
          seriesObj = {
            name: this.ydatas[i].name,
            smooth: true,
            type: 'line',
            data: this.ydatas[i].data,
            // borderColor: this.ydatas[i].pointColor,
            borderColor: '#fff',
            itemStyle: {
              normal: {
                color: function (c) {
                  for (let i = 0; i < standardValuesList.length; i++) {
                    if (standardValuesList[i].name === c.seriesName) {
                      standardValue = standardValuesList[i].standardValue
                    }
                  }
                  if (c.value[1] > standardValue) {
                    return pointColor
                  } else if (c.value[1] > standardValue * 0.7) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: {
                  color: this.ydatas[i].lineColor,
                  width: 2
                },
                label: { // 显示值
                  show: false
                }
              }
            },
            markLine: {
              symbol: 'none',
              data: [{
                label: {
                  normal: {
                    position: 'end',
                    formatter: bz
                  }
                },
                name: '标准值',
                yAxis: bz,
                lineStyle: {
                  normal: {
                    color: function (c) {
                      for (let i = 0; i < standardValuesList.length; i++) {
                        if (standardValuesList[i].name === c.seriesName) {
                          standardValue = standardValuesList[i].standardValue
                        }
                      }
                      if (c.value[1] > standardValue) {
                        return pointColor
                      } else if (c.value[1] > standardValue * 0.7) {
                        return '#FFA500'
                      } else {
                        return '#33c95f'
                      }
                    }
                  }
                }
              }]
            }
          }
        } else {
          seriesObj = {
            name: this.ydatas[i].name,
            symbol: 'circle',
            symbolSize: 10,
            smooth: false,
            yAxisIndex: 1,
            // borderColor:'black',
            type: 'line',
            data: this.ydatas[i].data,
            itemStyle: {
              normal: {
                color: function (c) {
                  for (let i = 0; i < standardValuesList.length; i++) {
                    if (standardValuesList[i].name === c.seriesName) {
                      standardValue = standardValuesList[i].standardValue
                    }
                  }
                  if (c.value[1] > standardValue) {
                    return pointColor
                  } else if (c.value[1] > standardValue * 0.9) {
                    return '#FFA500'
                  } else {
                    return '#33c95f'
                  }
                },
                lineStyle: { // 折线的颜色
                  color: this.ydatas[i].lineColor,
                  width: 2
                },
                label: { // 显示值
                  show: false
                }
              }
            }
          }
        }
        if (this.ydatas[i].name === '废水流量' || this.ydatas[i].name === '废水') {
          seriesObj.yAxisIndex = 1
        }
        serLists.push(seriesObj)
      }
      const dataUnit = '流量(m³/h)'
      // echarts图表option数据
      const options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          },
          formatter: function (params) {
            let s = params[0].name + '<br />'
            for (let i = 0; i < params.length; i++) {
              const seriesName = params[i].seriesName
              // 值
              const value = params[i].value[1]

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

              let maker = params[i].marker
              let colo = ''
              switch (seriesName) {
                case 'COD':
                  colo = '#ffff00'
                  break
                case '氨氮':
                  colo = '#00B0F0'
                  break
                case '总氮':
                  colo = '#e0ffff'
                  break
                case '废水流量':
                  colo = '#9ACD32'
                  break
                case '总磷':
                  colo = '#f48183'
                  break
                default:
                  colo = ''
                  break
              }
              maker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + colo + ';"></span>'
              s += maker + seriesName + ':' + valueFliter + '<br />'
            }
            return s
          }
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          // 与绝对定位相似，top，left，right，bottom 设定是根据上级盒子宽高来计算
          top: '20%',
          left: '6%',
          right: '6%',
          bottom: '12%'
        },
        legend: {
          data: this.legendList
        },
        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: {
          type: 'time',
          boundaryGap: false,
          axisLabel: {
            // 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
            }
          }
        },
        yAxis: [{
          type: 'value',
          name: ySideName,
          max: function (value) {
            return parseInt(value.max + 3)
          },
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        }, {
          type: 'value',
          name: dataUnit,
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff'
            }
          },
          axisPointer: {
            snap: true
          },
          splitLine: {
            show: false
          },
          // inverse: true,
          // nameLocation: 'start',
          // max:500,
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        }],
        series: serLists
      }
      this.myChart.setOption(options)
      window.onresize = this.myChart.resize
    }
  }
}
</script>

<style lang="less">
#wasteWaterRealChartBox .echarts-form .el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
  border-color: #336fa4;
}
#wasteWaterRealChartBox .echarts-form{
  margin-top: 1px
}
#wasteWaterRealChartBox .echarts-form .el-input__icon{
  height: .13rem;
  top: -.02rem;
  right: -0.03rem;
  position: absolute;
  color: #00d0f9;
}
#wasteWaterRealChartBox .echarts-form .selectBox .el-input__icon:last-child{
  top: .02rem;
}
#wasteWaterRealChartBox .echarts-form .selectBox .is-reverse{
  top: -.02rem !important;
}
#wasteWaterRealChartBox .echarts-form .el-button{
  background-color: rgba(0, 0, 0, 0);
  height: .13rem;
}
</style>

 src/components/base-page/RiskSource/PublicTable.vue

@@ -174,7 +174,12 @@
</script>

<style lang="less" scoped>

/deep/ .el-table .warning-row{
  background-color: rgba(0, 0, 0, 0) !important;
}
/deep/ .el-table .success-row{
  background-color: rgba(48, 69, 95, .6) !important;
}
/deep/ .el-table thead tr {
  color: #02a6b5 !important;
  //.el-table .has-gutter tr th .cell {

 src/components/panel/RightSearchPanel.vue

@@ -50,7 +50,7 @@

<script>
import EnvRiskSearch from './topicSearch/EnvRiskSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import PollutionSourceSearch from './topicSearch/PollutionSourceSearch'
import { topicList } from '../../conf/Topic'

import WasteGasSearch from '@components/panel/topicSearch/WasteGasSearch'
@@ -69,7 +69,7 @@
    WasteWaterSearch,
    SolidWasteSearch,
    EnvRiskSearch,
    DischargeSearch,
    PollutionSourceSearch,
    EnterpriseEmergencySearch
  },
  data () {
@@ -150,7 +150,7 @@
      this.title = val.name
      switch (val.name) {
        case '污染源':
          this.gcComp = DischargeSearch
          this.gcComp = PollutionSourceSearch
          break
        case '废水':
          this.gcComp = WasteWaterSearch

 src/components/panel/topicSearch/DischargeSearch.vue

File was deleted

 src/components/panel/topicSearch/EnvRiskSearch.vue

@@ -24,7 +24,8 @@
          </el-select>
        </el-form-item>
        <el-form-item label="单位部门：" size="mini">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType" :popper-class="'select-down'">
          <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType"
                     :popper-class="'select-down'">
            <el-option
                v-for="item in enterpriseSubunitsTypeOptions"
                :key="item.value"
@@ -35,7 +36,9 @@
        </el-form-item>
        <el-form-item label="风险级别：" size="mini"></el-form-item>
        <el-radio-group v-model="form.type" class="levelOfRisk">
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span></el-radio>
          <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index">
            <span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span>
          </el-radio>
        </el-radio-group>
        <div class="page_total">
          <p>共计
@@ -155,14 +158,13 @@

    handleLocation (val) {
      const pos = [val.Latitude, val.Longitude]
      debugger
      window.map.setView(pos, 15)
      window.$layer.open({
        content: {
          comp: RiskSourceIndex, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            storagePlaceId: val.no
            riskSourceId: val.no
          }
        },
        title: '天津石化' + val.riskname

 src/components/panel/topicSearch/PollutionSourceSearch.vue

New file
@@ -0,0 +1,130 @@
<template>
    <div class="sewers-search" v-if="gdVisible">
        <div class="panel-title">{{title}}</div>
        <div class="search-panel ">
            <el-form ref="form" :model="form" label-width="90px" class="search-form">
                <el-form-item label="二级单位：" size="mini">
                  <el-select style="width: 100%"  v-model="form.enterpriseSubunitsVal"  @change="enterpriseSubunitsType"
                             :popper-class="'select-down'">
                    <el-option
                            v-for="item in enterpriseSubunitsTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="运行状态：" size="mini"></el-form-item>
                <el-radio-group v-model="form.type" class="levelOfRisk">
                  <el-radio  v-for="(item,index) in levelOfRisk" :label="item.value" :key="index">
                    <span class="levelOfRisk-type">{{item.name}}<i :style="'background:'+item.color"></i></span>
                  </el-radio>
                </el-radio-group>
                <div class="page_total">
                    <p>共计
                        <span>{{total}}</span>
                        条记录
                    </p>
                </div>
                <div class="rightButtonSearch">
                    <el-input v-model="form.keyword" size="mini" placeholder="在此输入关键字搜索"></el-input>
                    <el-button class="el-icon-search" @click="handleSearch"></el-button>
                </div>
            </el-form>
        </div>
        <el-scrollbar style="height:416.44px">
          <div class="environmental-risk-list" v-for="(item,index) in list" :key="index"
               @click="handleLocation(item)">
              <img :src='iconUrl[1]' alt="" class="state"/>
                <div>
                  <h3>{{ item.governName }}</h3>
                  <p>所属部门：<span>{{ item.unitName }}</span></p>
                </div>
            </div>
        </el-scrollbar>
        <!--   <span class="location-btn" @click="handleLocation(item)">588</span> -->
        <el-card class="footer-page" v-if="total > 10">
            <el-pagination
                    small
                    @current-change="handlePage"
                    :page-size=pageSize
                    layout="prev, pager, next"
                    :total=total
                    :current-page=current
                    class="warnPagination"
            >
            </el-pagination>
        </el-card>
    </div>
</template>

<script>

import GovernEquipmentIndex from '@components/base-page/GovernEquipment/WasteWaterIndex'
import { pulseEffect, setPanTo } from '@utils/utils'
const mapApi = require('../../../api/mapApi').default

export default {
  name: 'PollutionSource',
  data () {
    return {
      gdVisible: true,
      list: [],
      total: 0,
      pageSize: 10,
      current: 1,
      enterpriseSubunitsTypeOptions: [],
      form: {
        enterpriseSubunitsVal: '',
        type: ''
      },
      isWaybillHover: true,
      isRouteHover: false,
      levelOfRisk: [
        { name: '正常', value: '1', color: 'green' },
        { name: '停运', value: '2', color: 'grey' }
      ],
      iconUrl: ['',
        require('../../../../public/assets/images/map/governEquipment/govern_green.png')
      ]
    }
  },
  props: ['title'],
  methods: {
    handlePage () {

    },
    // 二级单位筛选
    enterpriseSubunitsType (val) {

    },
    async handleSearch () {
      const param = {
      }
      const res = await mapApi.getGovernEquipment(param)
      this.list = res // 临时数据
    },

    handleLocation (val) {
      const pos = [val.Latitude, val.Longitude]
      window.map.setView(pos, 15)
      window.$layer.open({
        content: {
          comp: GovernEquipmentIndex, // 组件
          parent: this, // 父组件
          data: { // 传递的参数
            governId: val.no
          }
        },
        title: '天津石化' + val.governName
      })
      pulseEffect([val.Latitude, val.Longitude])
      setPanTo(pos, 250)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/conf/Topic.js

@@ -5,7 +5,7 @@
}

export const TopicComp = {
  dischargeSearch: () => import('@components/panel/topicSearch/DischargeSearch'),
  pollutionSourceSearch: () => import('@components/panel/topicSearch/PollutionSourceSearch'),
  envProtectSearch: () => import('@components/panel/topicSearch/EnvRiskSearch'),
  soilGroundWaterSearch: () => import('@components/panel/topicSearch/SoilGroundWaterSearch'),
  sewersSearch: () => import('@components/panel/topicSearch/SewersSearch.vue'),