Merge remote-tracking branch 'origin/develop' into develop

yangdelong

2021-04-09 653c004b4f44396cdb4dce04c17152c7563e37f8

Merge remote-tracking branch 'origin/develop' into develop

 .DS_Store

Binary files differ

 .gitignore

@@ -29,4 +29,4 @@
.DS_Store
package-lock.json
.idea
.dist
/dist

 package.json

@@ -16,7 +16,7 @@
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "dayjs": "^1.9.6",
    "dayjs": "^1.10.4",
    "echarts": "^4.2.1",
    "element-ui": "^2.14.1",
    "esri-leaflet": "^3.0.1",

 public/assets/.DS_Store

Binary files differ

 public/assets/images/.DS_Store

Binary files differ

 public/assets/images/map-pages/.DS_Store

Binary files differ

 public/assets/images/map-pages/icon/.DS_Store

Binary files differ

 public/assets/images/map/company.png

Binary files differ

 public/assets/images/map/company_oil.png

 public/assets/images/map/company_refining.png

 public/assets/images/map/company_sales.png

 src/.DS_Store

Binary files differ

 src/api/mapApi.js

@@ -36,6 +36,10 @@
  getWasteGasDetails (data) {
    return axios.get(mapUrl.getWasteGasDetails, data)
  },
  // 废气点小时日数据
  getWasteGasMonData (data) {
    return axios.get(mapUrl.getWasteGasMonData, data)
  },
  // 废水点
  getWasteWater (data) {
    return axios.get(mapUrl.getWasteWater, data)
@@ -48,7 +52,22 @@
  getWasteWaterMonitoringDetails (data) {
    return axios.get(mapUrl.getWasteWaterMonitoringDetails, data)
  },
  // 废水日数据和小时数据及明细表
  getQueryOnlineMonData (data) {
    return axios.get(mapUrl.getQueryOnlineMonData, data)
  },
  // 废水人工数据
  getQueryLabMonData (data) {
    return axios.get(mapUrl.getQueryLabMonData, data)
  },
  // 废水实时数据
  getDataItems (data) {
    return axios.get(mapUrl.getDataItems, data)
  },
  getCompany (data) {
    return axios.get(mapUrl.getCompany, data)
  },
  DataItems (data) {
    return axios.get(mapUrl.DataItems, data)
  }
}

 src/api/mapUrl.js

@@ -12,9 +12,14 @@

export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
export const DataItems = $HOST + '/wasteWater/RTDB/DataItems'
export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData'

export const getWasteWater = $HOST + '/wasteWater/getWasteWater'
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring'
export const getWasteWaterMonitoringDetails = $HOST + '/wasteWater/getWasteWaterMonitoringDetails'
export const getWasteWater = $HOST + '/wasteWater/getWasteWater' // 废水点信息
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring' // 废水监测数据
export const getWasteWaterMonitoringDetails = $HOST + '/wasteWater/getWasteWaterMonitoringDetails' // 废水监测数据明细表
export const getQueryOnlineMonData = $HOST + '/wasteWater/QueryOnlineMonData' // 废水日数据小时数据及明细表数据
export const getQueryLabMonData = $HOST + '/wasteWater/QueryLabMonMonData' // 人工数据
export const getDataItems = $HOST + '/wasteWater/RTDB/DataItems' // 实时数据

export const getCompany = $HOST + '/company/getCompany'

 src/assets/.DS_Store

Binary files differ

 src/assets/css/map/_map-variable.less

@@ -6,6 +6,7 @@
@color-tool: #C0C4CC;//工具色
@color-shadow: #00fff6;//显示颜色
@background-color: rgba(0, 16, 30, .7);//背景填充色
@background-color4: rgba(0, 16, 30, .4);//背景填充色
@background-color-light: rgba(40, 50, 100, .4);//光晕
@background-color-split: rgba(0, 255, 246, .14);//分割线
@background-color-tools: #1A4951;//工具箱

 src/assets/css/map/map-panel-style.less

@@ -1,5 +1,9 @@
@import "_map-variable";

.leaflet-container,
html,body{
 // font-family: 'Microsoft YaHei';
  font: 12px/1.5 "Microsoft YaHei", Arial, Helvetica, sans-serif;
}
/*全局设置***********/
h1, h2, h3, h4, h5, h6, ul, li, p {
  padding: 0;
@@ -243,18 +247,67 @@

/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip {
  background: @background-color-split;
  border: none;
  position: absolute;
  top:0;
  left: 0;
  display: flex;
  justify-content: center;
  justify-items: center;
  img{display: block;width: 30px;height: 30px;margin-left: -15px;margin-top: -15px}
  ul{
    width: 120px;
    margin-left: -60px;
    text-align: center;
    display: flex;
    position: absolute;
    top:20px;
    left:0;
    li{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      font-weight: 900;
      text-shadow: 0 0 4px #fff;
  color: red;
  font-size: 16px;
  font-weight: 900 !important;
  text-shadow: 0 0 5px #fff;
  //filter:Dropshadow(offx=1,offy=0,color=white)
  //Dropshadow(offx=0,offy=1,color=white)
  //Dropshadow(offx=0,offy=-1,color=white)
  //Dropshadow(offx=-1,offy=0,color=white);
      height: 20px;
      line-height: 18px;
      overflow: visible;
    }
  }
}
/*.company-bindTooltip {
  //background: @background-color-split;
  background: none;
  border: none;
  color: red;
  //font-size: 16px;
  box-shadow: none;
  -webkit-text-stroke: .5px #fff;
  text-shadow: 0 0 5px #fff;
  filter:Dropshadow(offx=1,offy=0,color=white)
  Dropshadow(offx=0,offy=1,color=white)
  Dropshadow(offx=0,offy=-1,color=white)
  Dropshadow(offx=-1,offy=0,color=white);
  box-shadow: none;
  -webkit-text-stroke: 0.1px #fff;
  font: 16px "Microsoft YaHei", Arial, Helvetica, sans-serif;
  ul{
    position: relative;
    li:not(:first-child){
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      font-weight: 900;
    }
    li{
      text-shadow: 0 0 4px #fff;
    }
  }
}*/
.company-bindTooltip:before{
  display: none;
}

.company-bindTooltip-hover h3 {
@@ -268,15 +321,15 @@
  list-style: none;
  margin: 0;
  padding: 0;
  width: 260px;
  display: flex;
  //width: 260px;
  //display: flex;
  flex-wrap: wrap;
}

.company-bindTooltip-hover ul li {
  margin: 0;
  padding: 3px 0;
  width: 50%;
  //width: 50%;
}

/*************** PublicTable 表格样式。*********************************/
@@ -310,6 +363,13 @@
}
.el-table tbody tr:hover>td {
  background-color:#28304d !important;
}
//修改表格高度
.el-table td {
  padding: 0!important;
  height: 30px;
  line-height: 30px;
  font-size: 0.01rem !important;
}
/***********************************************动画效果************/
.transition{
@@ -345,6 +405,7 @@
  .icon{
    width: 20px;
    margin: 0 auto;
    font-size: 20px;
  }

}
@@ -355,3 +416,7 @@
  text-align: center;
  border-bottom: 1px solid @background-color-split;
}

.el-tabs__header .is-top {

}

 src/assets/images/.DS_Store

Binary files differ

 src/assets/images/map-pages/.DS_Store

Binary files differ

 src/assets/images/map-pages/icon/.DS_Store

Binary files differ

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

File was deleted

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

New file
@@ -0,0 +1,397 @@
<!--  日数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
            <!--            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
            <!--            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
            <!--            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
            <!--            <el-tag>废气流量 : 120343.18</el-tag>-->
            <el-row>
                <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
                <!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
            </el-row>
        </div>
        <div class="form-echrts">
            <div class="from-search">
                <el-row type="flex">
                    <el-col :span="14">
                        <div class="pickerMon">
                            <div class="pickerData">
                                <span> 开始时间:</span>
                                <span class="pickerTable"><el-date-picker
                                        type="datetime"
                                        v-model="value1">
                      </el-date-picker></span>
                            </div>
                            <div class="pickerData">
                                <span >结束时间:</span>
                                <span class="pickerTable">
                        <el-date-picker
                                type="datetime"
                                v-model="value2"
                        >
                      </el-date-picker>
                      </span>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        采样点数:
                        <input list="source" id="ipt" class="echatsInput">
                        <datalist id="source">
                            <option value="0" />
                            <option value="25" />
                            <option value="50" />
                            <option value="75" />
                            <option value="100" />
                        </datalist>
                    </el-col>
                    <el-col class="detailbtn" :span="2" @click="onSubmit">查询</el-col>
                    <el-col :span="3">
                        <div class="detailbtn" @click="dialogVisible = true" >明细表</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-col>
                </el-row>
            </div>
            <div style="width:5rem;height:2rem;" id="echarts" ref="main">
            </div>
        </div>
    </div>
</template>

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

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        }
        this.myChart.resize()
      }
    },
    initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
      var options = {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          }
        },
        legend: {
          x: '200px',
          y: '30px',
          data: [{
            name: 'COD',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '氨氮',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废水流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        // 图标缩放设置
        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
          }
        }],
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: ['10%', '10%'],
          data: dataDate,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          splitLine: { // 网格垂直线为虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          position: 'left', // 多 Y 轴使用
          name: '浓度(mg/m³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        },
        {
          type: 'value',
          position: 'right', // 多 Y 轴使用
          name: '流量(m³/h³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        }],
        series: [
          {
            name: 'COD',
            type: 'line',
            stack: '总量',
            data: dataValue1,
            yAxisIndex: 0
          },
          {
            name: '氨氮',
            type: 'line',
            stack: '总量',
            data: dataValue2,
            yAxisIndex: 0
          },
          {
            name: '废水流量',
            type: 'line',
            stack: '总量',
            data: dataValue3,
            yAxisIndex: 1
          }
        ]
      }
      return options
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
      console.log(dataWatch)
      var dataValue1 = []
      var dataValue2 = []
      var dataValue3 = []
      var dataDate = []
      for (var i = 0; i < 24; i++) {
        dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8))
      }
      for (var n = 0; n < dataWatch.length; n++) {
        if (dataWatch[n].PoltmtrlName === 'COD') {
          dataValue1.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '氨氮') {
          dataValue2.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '废水流量') {
          dataValue3.push(dataWatch[n].MonQty)
        }
      }
      const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
  }
}
</script>

<style scoped lang="less">
    .grid-content{
        font-size: 8px!important;
        background-color:#2e4967;
        text-align: center;
        margin: 0 2px 4px 2px;
        border-radius: 2px;
    }
    .Infomation {
        margin-left: 10px;
    }

    .el-tag {
        height: 25px;
        width: 140px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 10px;
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
        padding: 0 15px;
    }

    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .from-search{
            margin-top: 6px;
            .pickerMon{
                display: flex;
                .pickerData{
                    flex: 1;
                    display: flex;
                    .pickerTable{
                        margin-left: 6px;
                        width: 40px;

                        /deep/.el-input__icon {
                            width: 0.9rem;
                            font-size: 0;
                        }
                    }
                }
            }
            /deep/.el-date-editor--datetime{
                width: 100%;
            }
            /deep/.el-input__inner{
                position: relative;
                width: 0.9rem!important;
                height: 0.125rem!important;
                background-color: #2e4967;
                color: #ffffff;
                font-size: 8px;
                padding: 0;
                //padding-left:20px ;
                //padding: 0!important;
            }
            .echatsInput{
                color: #00ffff;
                background-color: #2e4967;
                border: none;
                border-radius: 6px;
                width: 40px;
            }
            .detailbtn{
                background-color:#2e4967;
                text-align: center;
                padding: 0 7px;
                line-height: 20px;
                border-radius: 4px;
                margin-right: 6px;
            }
        }
        .el-dialog-div {
            //height: 50vh!important;
            overflow: auto;
            //overflow: hidden;
        }

        #echarts {
            margin: 0;
            padding: 0;
            //height: 3rem;
            //border: 1px solid #396d83;
            //margin: 10px 10px 10px 10px;
        }
    }
</style>

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

New file
@@ -0,0 +1,476 @@
<!--  小时数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
<!--            <el-tag>氮氧化物 : 29.93 标准 : 100</el-tag>-->
<!--            <el-tag>二氧化硫 : 17.34 标准 : 50</el-tag>-->
<!--            <el-tag>烟尘 : 6.93 标准 : 30</el-tag>-->
<!--            <el-tag>废气流量 : 120343.18</el-tag>-->
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
<!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
          </el-row>
        </div>
        <div class="form-echrts">
            <!--    :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName"      -->
            <div class="from-search">
<!--                <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--                    <el-form-item label="审批人">-->
<!--                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <div class="block">-->
<!--                        <el-date-picker-->
<!--                            size="'mini"-->
<!--                                class="date"-->
<!--                                v-model="value"-->
<!--                                type="datetimerange"-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->
<!--                    <el-form-item label="采样点数" class="text-size">-->
<!--                        <el-select v-model="formInline.region" placeholder="0">-->
<!--                            <el-option label="0" value="shanghai"></el-option>-->
<!--                            <el-option label="25" value="beijing"></el-option>-->
<!--                            <el-option label="50" value="beijing"></el-option>-->
<!--                            <el-option label="75" value="beijing"></el-option>-->
<!--                            <el-option label="100" value="beijing"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--                    </el-form-item>-->

<!--                </el-form>-->
              <div class="layoutFrom">
                <div class="pickerMon">
                  <div class="pickerData pickerDataLeft">
                    <span> 开始时间:</span>
                    <span class="pickerTable"><el-date-picker
                        type="datetime"
                        v-model="value1">
                      </el-date-picker></span>
                  </div>
                  <div class="pickerData">
                    <span >结束时间:</span>
                    <span class="pickerTable">
                        <el-date-picker
                            type="datetime"
                            v-model="value2"
                        >
                      </el-date-picker>
                      </span>
                  </div>
                </div>
                <div class="sampling">
                  <span>
                     采样点数:
                  </span>
                  <input list="source" id="ipt" class="echatsInput">
                  <datalist id="source">
                    <option value="0" />
                    <option value="25" />
                    <option value="50" />
                    <option value="75" />
                    <option value="100" />
                  </datalist>
                </div>
                <div class="InquiryBtn">
                  <div>查询</div>
                </div>
                <div class="detailBox">
                  <div class="detailbtn" @click="dialogVisible = true" >明细表</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>
                </div>
              </div>
            </div>
            <div style="width:5rem;height:2rem;" id="echarts" ref="main">
            </div>
        </div>
    </div>
</template>

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

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
  },
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
      value: '',
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    drawChart: function () {
      window.onresize = function () {
        var h1 = document.documentElement.clientHeight// 获取屏幕的高度
        if (h1 > 700) {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        } else {
          this.myChart.getDom().style.height = 3 + 'rem'
          this.myChart.getDom().style.width = 6 + 'rem'
        }
        this.myChart.resize()
      }
    },
    initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
      var options = {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              color: '#1a4245'
            }
          }
        },
        legend: {
          x: '200px',
          y: '30px',
          data: [{
            name: 'COD',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '氨氮',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废水流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        // 图标缩放设置
        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
          }
        }],
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dataDate,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          splitLine: { // 网格垂直线为虚线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: { // x 轴刻度显示
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1 // 这里是为了突出显示加上的
            }
          }
        },
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          position: 'left', // 多 Y 轴使用
          name: '浓度(mg/m³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        },
        {
          type: 'value',
          position: 'right', // 多 Y 轴使用
          name: '流量(m³/h³)',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff' // 坐标的字体颜色
            }
          },
          axisPointer: {
            snap: true // 自动吸附最近的点
          },
          splitLine: {
            show: false // y轴 网格线不显示
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff', // 坐标轴的颜色
              width: 1
            }
          }
        }],
        series: [
          {
            name: 'COD',
            type: 'line',
            stack: '总量',
            data: dataValue1,
            yAxisIndex: 0
          },
          {
            name: '氨氮',
            type: 'line',
            stack: '总量',
            data: dataValue2,
            yAxisIndex: 0
          },
          {
            name: '废水流量',
            type: 'line',
            stack: '总量',
            data: dataValue3,
            yAxisIndex: 1
          }
        ]
      }
      return options
    }
  },
  // methods: {
  //   // onSubmit () {
  //   //   console.log('submit!')
  //   // },
  //   drawChart: function () {
  //     const myChart = this.$echarts.init(this.$refs.main)
  //     myChart.setOption(this.options)
  //     window.onresize = function () {
  //       var h1 = document.documentElement.clientHeight// 获取屏幕的高度
  //       if (h1 > 700) {
  //         myChart.getDom().style.height = 3 + 'rem'
  //         myChart.getDom().style.width = 6 + 'rem'
  //       } else {
  //         myChart.getDom().style.height = 3 + 'rem'
  //         myChart.getDom().style.width = 6 + 'rem'
  //       }
  //       myChart.resize()
  //     }
  //   }
  // },
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
      console.log(dataWatch)
      var dataValue1 = []
      var dataValue2 = []
      var dataValue3 = []
      var dataDate = []
      for (var i = 0; i < 24; i++) {
        dataDate.push(dataWatch[i].MonTimeStr.substring(9))
      }
      for (var n = 0; n < dataWatch.length; n++) {
        if (dataWatch[n].PoltmtrlName === 'COD') {
          dataValue1.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '氨氮') {
          dataValue2.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '废水流量') {
          dataValue3.push(dataWatch[n].MonQty)
        }
      }
      const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
  }
}
</script>

<style scoped lang="less">
.grid-content{
  font-size: 8px!important;
  background-color:#2e4967;
  text-align: center;
  margin: 0 2px 4px 2px;
  border-radius: 2px;
}
.Infomation {
  margin-left: 10px;
}

.el-tag {
  height: 25px;
    width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search{
    margin-top: 6px;
    .layoutFrom{
      display: flex;
       .sampling{
        margin-left: 100px;
         >span{
           margin-right: 10px;
         }
      }
      .InquiryBtn{
        margin-left: 30px;
        width: 36px;
        height: 20px;
        font-size: 8px;
        background-color:#2e4967 ;
        text-align: center;
        border-radius: 3px;
      }
      .detailBox{
        margin-left: 30px;
      }
      .pickerMon{
        display: flex;
        .pickerDataLeft{
          margin-left: 10px;
          margin-right: 90px;
        }
        .pickerData{
          flex: 1;
          display: flex;
          >span{
            margin-right: 15px;
          }
          .pickerTable{
            margin-left: 6px;
            width: 40px;

            /deep/.el-input__icon {
              width: 1rem;
              font-size: 0;
            }
          }
        }
      }
    }
    /deep/.el-input__inner{
      position: relative;
      width: 0.9rem!important;
      height: 0.125rem!important;
      background-color: #2e4967;
      color: #ffffff;
      font-size: 8px;
      padding: 0;
      //padding-left:20px ;
      //padding: 0!important;
    }
    .echatsInput{
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 40px;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

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

New file
@@ -0,0 +1,213 @@
<template>
  <div style="width:100%;height:2rem;margin-top: 0.3rem" ref="echarts"></div>
</template>

<script>

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

export default {
  name: 'ECharts',
  data () {
    return {
      myChart: [],
      result: [],
      days: dayjs(new Date()).format('YYYYMMDDHHmmss'),
      value: '',
      seriesData: [],
      aseries: ''
    }
  },
  methods: {
    drawChart () {
      this.myChart = this.$echarts.init(this.$refs.echarts)

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        grid: {
          containLabel: false
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: false
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          // data: this.seriesData,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              // width: 1
              show: false
            }
          }
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        },
        series: [
          {
            name: '模拟数据',
            type: 'line',
            // showSymbol: false,
            // hoverAnimation: false,
            data: this.seriesData
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      this.myChart.setOption(option)
    },
    async echartsData () {
      const addDays = dayjs().add(300, 'day')
      const data = {
        $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
        $startTime: this.dayjs,
        $endTime: addDays,
        $step: 15
      }
      const result = await mapApi.DataItems(data)
      this.result = result.data
      for (let i = 0; i < result.length; i++) {
        //   // console.log(result[i])

        // const seriesData = []
        const aseries = []
        // let nameData = ''

        this.seriesData.push(result[i].ReadTime)
        aseries.push(result[i].TagValue)
        // nameData = result[i].UnionTagCode
        this.aseries = result[i].UnionTagCode
      }
      this.myChart.setOption({
        series: [{
          data: this.seriesData
        }]
      })
    },
    // 数据的请求
    requestEcharts () {
      setInterval(async () => {
        const addDays = dayjs().add(300, 'day')
        const data = {
          $tagCodeList: 'TJIP45.yyqAI90305,TJIP45.yyqAI90303,TJIP45.yyqFI_90310N,TJIP45.yyqAI90304,TJIP45.yyqAIR001',
          $startTime: this.dayjs,
          $endTime: addDays,
          $step: 15
        }
        const result = await mapApi.DataItems(data)
        this.result = result.data
        for (let i = 0; i < result.length; i++) {
          //   // console.log(result[i])

          // const seriesData = []
          const aseries = []
          // let nameData = ''

          this.seriesData.push(result[i].ReadTime)
          aseries.push(result[i].TagValue)
          // nameData = result[i].UnionTagCode
          this.aseries = result[i].UnionTagCode
        }
        this.myChart.setOption({
          series: [{
            data: this.seriesData
          }]
        })
      }, 3000)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.requestEcharts()
      this.drawChart()
      this.echartsData()
    })
  }
}
</script>

<style scoped lang="less">
.Infomation {
  margin-left: 10px;
  height: 0.2rem;
}

.el-tag {
  height: 25px;
  width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
  width: 100%;
  height: 1rem;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
  }

  #echarts {
    margin: 0;
    padding: 0;
    //height: 3rem;
    //border: 1px solid #396d83;
    //margin: 10px 10px 10px 10px;
  }
}
</style>

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

@@ -6,8 +6,8 @@
    <div class="border_corner border_corner_right_bottom"></div>
    <ul class="tab">
      <li @click='tabTaggle("ECharts")'>实时数据</li>
      <li @click='tabTaggle("ECharts")'>小时数据</li>
      <li @click='tabTaggle("ECharts")'>日数据</li>
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("EChartsDate")'>日数据</li>
      <li @click='tabTaggle("ECharts")'>人工数据</li>
    </ul>
    <component :is="currentTab" v-bind="$attrs"></component>
@@ -15,22 +15,24 @@
</template>

<script>
import ECharts from './ECharts'
import EChartsHour from './EChartsHour'
import EChartsDate from './EChartsDate'

export default {
  name: 'PublicChart',
  components: {
    ECharts
    EChartsHour,
    EChartsDate
  },
  data () {
    return {
      currentTab: 'ECharts'
      currentTab: 'EChartsHour'
    }
  },
  methods: {
    tabTaggle (taggleMenu) {
      this.currentTab = taggleMenu
      debugger
      // debugger
    }
  }
}
@@ -46,10 +48,10 @@

.win {
  position: relative;
  margin-bottom: 13px;
  /*margin-bottom: 13px;*/
  background-color: rgba(33, 41, 69, 0.9);
  border: 0.8px solid #396d83;
  height: 1.5rem;
  /*height: 1.5rem;*/
}

.border_corner {

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

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

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

@@ -7,8 +7,7 @@
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-table">
        <el-table :data="listData" style="width: 100%" stripe='stripe'
                  tooltip-effect="dark" :row-class-name="tableRowClassName">
        <el-table :data="listData" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                           :label="item.label"></el-table-column>
        </el-table>
@@ -84,8 +83,6 @@
.win {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  //width: 6rem;
  height: 1.5rem;
}

.main {

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

@@ -14,7 +14,7 @@
            <el-col :span="8">生产单位:{{ setWasteGasdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteGasdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
          <el-row type="flex" class="row-bg row-item-two" justify="space-around">
            <el-col :span="8">排放去向:{{ setWasteGasdata.EmissDirecti }}</el-col>
            <el-col :span="18">控制级别名称:{{ setWasteGasdata.ContrLevelShowName }}</el-col>
            <el-col :span="18">内/外排口:{{ setWasteGasdata.OrOutPortName }}</el-col>
@@ -36,7 +36,7 @@
            <el-col :span="8">生产单位:{{ setWasteWaterdata.porltName }}</el-col>
            <el-col :span="8">排放类型名称:{{ setWasteWaterdata.MonTypeName }}</el-col>
          </el-row>
          <el-row type="flex" class="row-bg" justify="space-around">
          <el-row type="flex" class="row-bg row-item-two" justify="space-around">
            <el-col :span="8">排放去向:{{ setWasteWaterdata.EmissDirecti }}</el-col>
            <el-col :span="8">控制级别名称:{{ setWasteWaterdata.ContrLevelShowName }}</el-col>
            <el-col :span="8">内/外排口:{{ setWasteWaterdata.OrOutPortName }}</el-col>
@@ -77,7 +77,7 @@
  margin-bottom: 10px;
  background-color: rgba(33, 41, 69, 0.9);
  //width: 6rem;
  height: 0.5rem;
  //height: 0.5rem;
}

.main {
@@ -87,25 +87,31 @@
  .main-matter {
    font-size: 13px;
    font-weight: normal;
    //padding: 10px 6px;
    padding: 0 6px;
    border: 1px solid #396d83;

    .row-item-one {
      //flex-wrap: nowrap;
      overflow: hidden;
      margin-top: 6px;
      margin-bottom: 7px;
      //margin-left: 10px;
    }

    .row-item-two{
      margin-bottom: 6px;
    }
    .el-row {
      width: 100%;
      color: #00d0f9;
      display: flex;
      font-size: 12px !important;
      text-align: center;

      .el-col {
        text-align: center;
        flex: 1;
        width: 100%;
        background-color: #243a55;
        text-align: center;
        line-height: 28px;
        margin-left: 6px;
        border-radius: 4px;

@@ -122,7 +128,7 @@
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
      line-height: 35px;
      line-height: 30px;

      li {
        text-align: center;

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

@@ -26,12 +26,13 @@
.win {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  height: 2.1rem;
  //height: 2rem;
  width: 3rem;
}

.main {
  border: 1px solid #396d83;
  padding: 5px;
  //padding: 5px;
  height: 2rem;

  video {

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -1,5 +1,6 @@
<template>
  <div class="public-bounced" v-drag v-if="flag">
    <!--    <Echarts></Echarts>-->
    <div class="public-bounced-title">
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
@@ -13,44 +14,21 @@
                        :displayContentTable="displayContentTable"></public-table>
          <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
                        :value="value"
                        :getWasteWaterMonitoring="getWasteWaterMonitoring"
                        :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails
"></public-chart>
                        :getQueryOnlineMonData="getQueryOnlineMonData"
                        :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails">
          </public-chart>
        </div>
      </div>
      <div class="public-bounced-content-right">
        <public-video></public-video>
      </div>
    </div>
    <!--    <el-dialog-->
    <!--        :visible.sync="flag"-->
    <!--        width="70%"-->
    <!--        v-drag-->
    <!--        :modal="false">-->
    <!--      <div class="public-bounced-title">-->
    <!--        <span>{{ displayContentTitle }}</span>-->
    <!--        <i class="el-icon-circle-close" @click="closePopup"></i>-->
    <!--      </div>-->
    <!--      <div class="public-bounced-content">-->
    <!--        <div class="public-bounced-content-left">-->
    <!--          <public-tabs :displayContentTab="displayContentTab" :value="value"-->
    <!--                       :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>-->
    <!--          <div class="public-bounced-content-left-bottom">-->
    <!--            <public-table v-if="value === 'gufei'"-->
    <!--                          :displayContentTable="displayContentTable"></public-table>-->
    <!--            <public-chart v-else :getWasteGasDetails="getWasteGasDetails"-->
    <!--                          :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="public-bounced-content-right">-->
    <!--          <public-video></public-video>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>

// import Echarts from '@components/BaseNav/PublicBounced/GasComponents/Echarts'

import '@/components/BaseNav/SolidWaste/directive/dir'
import PublicTabs from '@components/BaseNav/PublicBounced/GasComponents/PublicTabs'
@@ -61,6 +39,7 @@
export default {
  name: 'PublicBounced',
  components: {
    // Echarts,
    PublicTabs,
    PublicTable,
    PublicChart,
@@ -77,7 +56,7 @@
      value: '',
      getWasteGasDetails: [],
      getWasteWaterMonitoringDetails: [],
      getWasteWaterMonitoring: []
      getQueryOnlineMonData: []
    }
  },
  methods: {
@@ -103,10 +82,10 @@
      this.flag = true
      this.value = value
    },
    setWaterData (dataWater, dataDetail, drawData, value) {
    setWaterData (dataWater, dataDetail, hourData, value) {
      this.setWasteWaterdata = dataWater
      // console.log(data)
      this.getWasteWaterMonitoring = drawData
      this.getQueryOnlineMonData = hourData
      // console.log(drawData)
      this.getWasteWaterMonitoringDetails = dataDetail
      this.displayContentTitle = dataWater.Name
@@ -119,14 +98,10 @@

<style lang="less" scoped>
.public-bounced {
  width: 10rem;
  //height: 2.6rem;
  //width: 70vw;
  //height: 30vh;
  z-index: 999;
  position: absolute;
  top: 5%;
  left: 5%;
  top: 15%;
  left: 20%;
  background-color: #002432;
  border: 1px #9fc5c8 solid;

@@ -153,17 +128,18 @@
  }

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

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

    .public-bounced-content-right {
      width: 3rem;
      //width: 3rem;
      margin-left: 0.1rem;
    }
  }
}

 src/components/LayerController/LayerController.vue

@@ -7,7 +7,7 @@
        <!--        <span class="icon-name">图层</span>-->
      </div>
    </el-tooltip>
    <transition name="animationChange">
    <transition name="layerChange">
      <div :class="'legend-content map-background'" v-show="layerControllerVisible">
        <lc-service-layer></lc-service-layer>
        <button  @click="showPanel" type="button" class="el-button special-button el-button--default el-icon-d-arrow-left"></button>
@@ -74,14 +74,27 @@
</script>

<style lang="less">
  .animationChange-enter-active, .animationChange-leave-active {

  .layerChange-enter-active {
    transform-origin: top left;
    animation: bounce-in .2s;
  }
  .layerChange-leave-active {
    transform-origin: top left;
    animation: bounce-in .2s reverse;
  }
  /*

  .layerChange-enter-active,
  .layerChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
  .layerChange-enter,
  .layerChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }
  }*/
  .float-panel.active{
    overflow: visible;
  }
@@ -234,17 +247,26 @@
    background: #0E3565;
  }
  .el-button--default{
    padding: 15px 3px;
    background:@background-color;
    padding: 0;
    background:@background-color4;
    color:@color-tool;
    position: absolute;
    top:0;
    left: 100%;
    margin-left: .02rem;
    border-radius: 0.03rem 50% 50% 0.03rem;
    top:24px;
    right:0.02rem;
    border:none;//1px solid @color-tool;
    width: 0.2rem;
    height: 0.2rem;
    text-align: center;
    line-height: 0.2rem;
    margin-top: -0.1rem;
    border-radius: 50%;
    // border-radius: 0.03rem 50% 50% 0.03rem;
  }
  .el-button--default:hover{
    background:@background-color;
    border:1px solid @color;
    box-shadow: 0 0 2px @color;
    color:@color;
  }
  .legend-content{
    width: 1.79167rem;

 src/components/LayerController/logic/Company.js

@@ -2,7 +2,7 @@
 * 固废
 */
// 区分不同类型 使用不同img
const companyImg = '/assets/images/map/company.png'
const companyImg = '/assets/images/map/company_refining.png'

const mapApi = require('../../../api/mapApi').default
const AnimalService = require('../service/AnimalService').default
@@ -28,20 +28,29 @@
      const positionY = data[i].Longitude

      var iconUrl = companyImg
      const htmls = '<div><img src="' + iconUrl + '"><ul><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li><li>' + data[i].name + '</li></ul></div>'
      var myIcon = L.divIcon({
        html: htmls,
        className: 'company-bindTooltip',
        iconSize: 16
      })

      const marker = L.marker([positionX, positionY], {
        icon: L.icon({
        /* icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [30, 30],
          iconAnchor: [13, 5]
        }),
          iconAnchor: [15, 15]
        }), */
        icon: myIcon,
        test: data[i]
      })
      marker.bindTooltip(data[i].name, {
      /* const htmls = '<ul><li>' + data[i].name + '</li></ul>'
      marker.bindTooltip(htmls, {
        permanent: true,
        offset: [0, 14],
        offset: [0, 5],
        direction: 'bottom',
        className: 'company-bindTooltip'
      })
      }) */
      layer.addLayer(marker)
    }
  }

 src/components/LayerController/logic/SolidWaste.js

@@ -39,8 +39,8 @@
        totransferData: getSolidWasteData[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [30, 30],
          iconAnchor: [15, 15]
        })
      })
      layer.addLayer(marker)

 src/components/LayerController/logic/WasteGas.js

@@ -40,8 +40,8 @@
        test: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [30, 38],
          iconAnchor: [15, 19]
        })
      })
      layer.addLayer(marker)
@@ -59,6 +59,16 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    // const GasOnlinedata = {
    //   onLineMonEmissPointId: 23,
    //   monItemId: 28,
    //   emissTypeld: 2,
    //   beginTime: 2020/0o4/0o6 15:13:20,
    //   endTime=2020/0o4/0o7;15:13:20,
    //   dataType:1
    // }
    // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
    // console.log(Mondata)
    const result = await mapApi.getWasteGasDetails(dataValue)
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)

 src/components/LayerController/logic/WasteWater.js

@@ -37,8 +37,8 @@
        test: data[i],
        icon: L.icon({
          iconUrl: iconUrl,
          iconSize: [20, 20],
          iconAnchor: [10, 10]
          iconSize: [35, 35],
          iconAnchor: [18, 18]
        })
      })
      layer.addLayer(marker)
@@ -55,12 +55,28 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    const drawback = await mapApi.getWasteWaterMonitoring()
    console.log(drawback)
    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 15:13:20',
    //   endTime: '2020-04-07',
    //   dataType: '1'
    // }
    const hourData = await mapApi.getQueryOnlineMonData(hourValue)
    // const dateData = await mapApi.getQueryOnlineMonData(dateValue)
    // const drawback = await mapApi.getWasteWaterMonitoring()
    // console.log(drawback)
    const result = await mapApi.getWasteWaterMonitoringDetails(dataValue)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.setWaterData(e.layer.options.test, result.Result.DataInfo, drawback.Result.DataInfo, 'feishui')
    instance.setWaterData(e.layer.options.test, result.Result.DataInfo, hourData.Result.DataInfo, 'feishui')
    // console.log(e.layer.options.test)
    instance.$mount()
    document.body.appendChild(instance.$el)

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -4,19 +4,19 @@
        <div class="wms-panel">
            <el-scrollbar class="wms-panel-scrollbar">
                <div v-for="item in serviceLayers" :key="item.code" class="layerbox">
                    <i class="downUp el-icon-caret-bottom" @click="item.isShow=!item.isShow" :class="item.isShow?'':'active'" ></i><!-- el-icon-arrow-down -->
                    <!-- 一级图层遍历 -->
                    <div style="padding-left:10px;padding-top:10px">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code"
                               @change="swAllLayers(item)"/>{{ item.name }}
                    <div style="padding-left:25px;padding-top:10px;color:#fff">
                        <input type="checkbox" :name="'wmsLayer_'+item.code" :checked="item.checked" :value="item.code" @change="swAllLayers(item)"/>{{ item.name }}
                    </div>
                    <div class="layerbox-item">
                    <div class="layerbox-item" v-show="item.isShow">
                        <!-- 二级图层遍历 -->
                        <div class="basemap-layer-item" v-for="itm in item.layers" :key="itm.code">
                            <input type="checkbox"
                                   :name="'wmsSublayers_'+item.code+'_'+itm.code"
                                   :checked="itm.checked"
                                   :value="itm.code"
                                   @change="swWmsLayer(itm)"/>{{ itm.name }}
                                   @change="swAllLayers(itm)"/>{{ itm.name }}
                            <!-- 三级图层遍历 -->
                            <div class="layerbox-item-3">
                                <div class="basemap-layer-item" v-for="layer in itm.layers" :key="layer.code">
@@ -24,7 +24,8 @@
                                           :name="'wmsSublayers_'+item.code+'_'+layer.code"
                                           :checked="layer.checked"
                                           :value="layer.code"
                                           @change="swWmsLayer(layer)"/>{{ layer.name }}
                                           @change="swAllLayers(layer)"/>
                                    <span :style="'color:'+layer.color">{{ layer.name }}</span>
                                </div>
                            </div>
                        </div>
@@ -37,9 +38,7 @@
</template>

<script>
import WfsHelper from '../../helpers/WfsHelper'
import LcServiceLayerFilter from '@components/LayerController/modules/LcServiceLayerFilter'
import AjaxUtils from '../../../utils/AjaxUtils'

export default {
  name: 'LcServiceLayer',
@@ -50,52 +49,33 @@
    }
  },
  mounted () {
    // console.log('03步骤：', this.helper)
    this.updateServiceLayerList()
  },
  methods: {
    swAllLayers (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      for (let i = 0, len = item.layers.length; i < len; ++i) {
        item.layers[i].checked = item.checked
      this.toggleLayer(item)
      this.swLayers(item.layers, item.checked)
    },
    swLayers (layers, checked) {
      if (layers) {
        for (let i = 0, len = layers.length; i < len; ++i) {
          var layer = layers[i]
          layer.checked = checked
          this.toggleLayer(layer)
          if (layer.layers) {
            this.swLayers(layer.layers, checked)
      }
      this.updateWms()
        }
      }
    },
    loadWfs () {
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName('管线点')
      wfsHelper.addEquals('pipename', '研究院01路YS000001')

      AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {}, (res) => {
        console.log(res)
      })
    },
    swWmsLayer (itm) {
      itm.checked = !itm.checked
    toggleLayer (itm) {
      if (itm.checked) {
        window.layerFactory.show(itm)
      } else {
        window.layerFactory.hide(itm)
      }
      // this.updateWms()
    },
    updateServiceLayerList () {

    },
    updateWms () {
      var mapConfig = this.mapConfig
      var wmsHelper = new WfsHelper()
      wmsHelper.initMapConfig(mapConfig)
      var wmsLayersMap = wmsHelper.getWmsLayersMap()
      for (var k in wmsLayersMap) {
        var layers = wmsLayersMap[k]
        var tileLayer = window.serviceLayerHelper.getTileLayer(k)
        if (tileLayer) {
          tileLayer.setParams({ layers: layers.join(',') }, false)
          tileLayer.setUrl(tileLayer.config.url, false)
        }
      }
    }
  }
}
@@ -117,6 +97,23 @@
            }
            .layerbox {
                width: 100%;
                position: relative;
                .downUp{
                    position: absolute;
                    top:3px;
                    left: -2px;
                    height: 30px;
                    width: 30px;
                    text-align: center;
                    line-height: 30px;
                    cursor: pointer;
                    font-size: 20px;
                    transition: all 1.5s;
                }
                .downUp.active{
                    transform: rotate(-90deg);
                }
                .downUp:hover{font-size: 26px;font-weight: 900}
                .layerbox-item {
                    padding-left: 30px;
                    padding-top: 5px;

 src/components/LayerController/modules/LcServiceLayerFilter.vue

@@ -9,7 +9,7 @@
                    <div class="content">
                        <div v-for="filter in item.layers" :key="filter.code">
                            <input type="checkbox" :value="filter.code" :checked="filter.checked"
                                   @change="swSubFilter(item.url,filter)"><label
                                   @change="swAllSubFilter(filter)"><label
                                :title="filter.name">{{filter.name}}</label>
                        </div>
                    </div>
@@ -20,7 +20,6 @@
</template>

<script>
import { mapMutations } from 'vuex'
import { LayerSewersPoint } from '@src/conf/layers/LayerSewers'

export default {
@@ -43,12 +42,26 @@
    }
  },
  methods: {
    ...mapMutations([]),
    swAllSubFilter (item) {
      // eslint-disable-next-line no-debugger
      item.checked = !item.checked
      // window.serviceLayerHelper.loadLayers()
      this.toggleLayer(item)
      this.swLayers(item.layers, item.checked)
    },
    swLayers (layers, checked) {
      if (layers) {
        for (let i = 0, len = layers.length; i < len; ++i) {
          var layer = layers[i]
          layer.checked = checked
          this.toggleLayer(layer)
          if (layer.layers) {
            this.swLayers(layer.layers, checked)
          }
        }
      }
    },
    // todo 还需要优化，在有多个需要子图层独立弹窗情况下无效
    // 监听上级图层存在独立弹窗的选中情况
    toggle (serviceLayers) {
      if (serviceLayers) {
        for (var i = 0; i < serviceLayers.length; i++) {
@@ -76,8 +89,7 @@
        }
      }
    },
    swSubFilter (url, item) {
      item.checked = !item.checked
    toggleLayer (item) {
      if (item.checked) {
        window.layerFactory.show(item)
      } else {

 src/components/LayerController/service/WfsLayerService.js

@@ -45,9 +45,9 @@
          fillColor: STYLES.FILL_COLOR,
          color: STYLES.COLOR,
          fillOpacity: STYLES.FILL_OPACITY,
          opacity: STYLES.OPACITY,
          dashArray: STYLES.DASH_ARRAY,
          dashSpeed: STYLES.DASH_SPPED
          opacity: STYLES.OPACITY
          // dashArray: STYLES.DASH_ARRAY,
          // dashSpeed: STYLES.DASH_SPPED
        }
      },
      pointToLayer: (geoJsonPoint, latlng) => {

 src/components/panel/BaseNavMenuItem.vue

 src/components/panel/RightSearchPanel.vue

@@ -1,16 +1,17 @@
<template>
  <div class="panel-right" v-show="isShow">
      <transition name="searchPanelChange">
          <div style=" display: inline-flex;">
    <div class="panel-tab">
<!--      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd"-->
<!--           :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">-->
<!--        <img :src="item.icon" style="width: 24px;height: 24px;"></div>-->
      <div class="container">
          <ul>
                      <!--  <ul>
              <li style="text-align: right">
                  <button type="button" class="el-button special-button el-button--default el-icon-d-arrow-right"></button>
                              <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default">
                                  <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                                  <i class=" el-icon-d-arrow-left" v-else ></i>
                              </div>
              </li>
          </ul>

                      </ul> -->
        <ul  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" >
              <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                  <li>
@@ -20,30 +21,27 @@
        </ul>
      </div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
      </div>

      <div :class="'search-container map-background'">
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div @click="setSearchPanelChange" type="button" class="el-button special-button el-button--default ">
                          <i class=" el-icon-d-arrow-right" v-if="selectGroup"></i>
                          <i class=" el-icon-d-arrow-left" v-else ></i>
                      </div>
        <div class="el-message-box__content" style="padding:0 6px 6px 6px;font-size: 13px;">
          <component :title="title" :is="gcComp"></component>
        </div>
      </div>
    </div>
          </div>
       </transition>
      <!-- <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="搜索" placement="left" v-show="!selectGroup">
          <div :class="selectGroup === true ?'active-button':''" class="iconBtn"   @click="setSearchPanelChange" style="position: absolute;top:0;right: 0" >
             <i class="el-icon-search icon"></i>
          </div>
      </el-tooltip> -->
  </div>
</template>

@@ -75,7 +73,8 @@
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网',
      isCollapse: true
      isCollapse: true,
      selectGroup: true
    }
  },
  computed: {},
@@ -98,9 +97,18 @@
    handleClose (done) {
      console.log(done)
    },
    setSearchPanelChange () {
      this.selectGroup = !this.selectGroup
      if (!this.selectGroup) {
        this.topicList.forEach((itm) => {
          itm.checked = false
        })
      }
    },
    selected (val) {
      // console.log(val)
      this.title = val.name
      this.selectGroup = true
      this.topicList.forEach((itm) => {
        itm.checked = val.name === itm.name
      })
@@ -180,7 +188,14 @@
</script>

<style lang="less">

    .searchPanelChange-enter-active {
        transform-origin: top right;
        animation: bounce-in .2s;
    }
    .searchPanelChange-leave-active {
        transform-origin: top right;
        animation: bounce-in .2s reverse;
    }
.search-container {
    position: relative;
    width: 1.79167rem;
@@ -247,16 +262,28 @@
  //  background-color: #061e51 !important;
  //  border: solid 1px #0e639e !important;
  //}
    .el-button--default {
        padding: 15px 3px;
        background: rgba(0, 16, 30, 0.7);
        color: #C0C4CC;
        border-radius:50%  0.03rem 0.03rem 50% ;
    .el-button--default.special-button {
        padding: 0;
        background:@background-color4;
        color:@color-tool;
        position: absolute;
        top:24px;
        right:0.02rem;
        border:none;//1px solid @color-tool;
        width: 0.2rem;
        height: 0.2rem;
        text-align: center;
        line-height: 0.2rem;
        margin-top: -0.1rem;
        border-radius: 50%;
        z-index: 999;
    }
    .el-button--default:hover{
    .el-button--default.special-button:hover{
        background:@background-color;
        border:1px solid @color;
        box-shadow: 0 0 2px @color;
        color:@color;
    }

  .el-form-item__label {
    color: rgb(52, 224, 255);
    color: @color;

 src/components/panel/ToolBoxPanel.vue

@@ -41,9 +41,9 @@
<!--            </div>-->
            <lc-base-map v-show="item.index==='2'"></lc-base-map>
          </el-popover>
          <el-button @click="changeSelect" class="special-button">
          <!-- <el-button @click="changeSelect" class="special-button">
            <i class="el-icon-d-arrow-left"></i>
          </el-button>
          </el-button> -->
        </el-row>
      </transition>
    </div>
@@ -382,12 +382,15 @@
    },
    changeSelect () {
      this.selectGroup = false
      this.isShow = !this.isShow
      this.active = -1
    },
    changeSelectMouse () {
      this.selectGroup = true
      this.selectGroup = !this.selectGroup
      if (this.selectGroup) {
      this.isShow = []
      } else {
        this.isShow = !this.isShow
        this.active = -1
      }
    }
  }
}
@@ -489,8 +492,9 @@
      .special-button {
        width: 0.1362rem;
        height: 0.2725rem;
        color: #C0C4CC;
        border-radius: 0.03rem 50% 50% 0.03rem;
        background:@background-color4;
        color:@color-tool;
        border:1px solid @color-tool;
      }
      .special-button:hover{
        color: #00fff6;

 src/components/panel/bounced/TextBounced.vue

 src/components/plugin/DownLoad.js

 src/components/plugin/FullScreen.js

 src/components/plugin/MakeTation.js

 src/components/plugin/MeaSure.js

 src/components/plugin/leaflet-measure-path/leaflet-measure-path.css

 src/components/plugin/leaflet-measure-path/leaflet-measure-path.js

 src/components/table/components/SolidWaste.vue

@@ -1,8 +1,9 @@
<template>
   <div class="Solid-Waste">
  <div class="waste-water">
       <el-table
               class="tableBox"
               :data="tableData"
        style="width: 100%"
               :header-cell-style="tableHeaderColor"
               :cell-style="rowClass"
               @cell-click="handle"
@@ -11,14 +12,23 @@
                   width="30px"
                   label=""
           >
               <template>
                   <i class="el-icon-caret-right"></i>
                   <span style="margin-left: 10px"></span>
        <template slot-scope="{row,$index}">
          <!--                   <i class="el-icon-caret-right" v-if="$index ===1"></i>-->
          <el-popover
              placement="bottom"
              trigger="click"
              :disabled="!isShowIcon"
              popper-class="popovers"
          >
            <ChemicalWastewater v-show="$index ===1"></ChemicalWastewater>
            <i class="el-icon-caret-right" :class="{active: isActive === $index}" slot="reference" @click="doIcon($index)"></i>
            <!--                   <i class="el-icon-caret-bottom"   slot="reference" v-else @click="doIcon($index)"></i>-->
          </el-popover>
               </template>
           </el-table-column>
           <el-table-column
                   label="序号"
                   width="60px"
          width="45px"
                   type="index">
           </el-table-column>
           <el-table-column
@@ -31,81 +41,161 @@
               <div v-else >{{scope.row.UserName}}</div>
             </template>
           </el-table-column>
           <el-table-column label="产生量 （吨）">
      <el-table-column
          prop="WasteWaters"
          label="外排废水量（m³）"
          width="100px">
      </el-table-column>
      <el-table-column label="COD  (t)">
               <el-table-column
                       prop="AddOutPut"
                       label="一般固废"
                       width="100px">
            label="累计产生量"
            width="70px">
               </el-table-column>
               <el-table-column
                       prop="MonthOutPut"
                       label="危险废物"
                       width="100px">
            label="当月生产量"
            width="70px">
               </el-table-column>
           </el-table-column>
           <el-table-column label="贮存状态（个）">
      <el-table-column label="氨氮  (t)">
        <el-table-column
            prop="NH4NPut"
            label="累计产生量"
            width="70px">
        </el-table-column>
        <el-table-column
            prop="NH4NMonth"
            label="当月生产量"
            width="70px">
        </el-table-column>
      </el-table-column>
      <el-table-column label="排放口检测统计状态">
               <el-table-column
                       prop="normal"
                       label="正常"
                       width="100px">
            width="60px">
                 <template slot-scope="{row,$index}">
                   <u v-if="$index!=1" >{{row.normal}}</u>
            <u v-if="$index!=2" >{{row.normal}}</u>
                   <el-popover v-else
                               placement="bottom-end"
                               width="200"
                               trigger="click"
                               title="监测点排放明细"
                        popper-class="popovers"
                        title="监测点明细表"
                   >
                     <ChemicalWastewater></ChemicalWastewater>
              <refinery></refinery>
                     <u slot="reference" style="color: #00ffff">{{row.normal}}</u>
              <!--                       <i class="el-icon-caret-bottom" v-else-if="isShowIcon&&scope.row.index===1"></i>-->
              <!--                       <i v-if="isShowIcon" class="el-icon-caret-bottom" slot="reference" @click="isbtn"></i>-->
              <!--                   <i v-else class="el-icon-caret-right" slot="reference" @click="isbtn"></i>-->
                   </el-popover>
                 </template>
               </el-table-column>
               <el-table-column
                       prop="warning"
                       label="预警"
                       width="100px">
            prop="overProof"
            label="超标"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="Abnormal"
            label="异常"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="StopProduction"
            label="停产"
            width="60px">
        </el-table-column>
        <el-table-column
            prop="deficiency"
            label="缺失"
            width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=1" >{{row.deficiency}}</u>
            <el-popover v-else
                        placement="bottom-end"
                        width="200"
                        trigger="click"
                        title="天津石化监测点缺失报警明细"
                        popper-class="popovers"
            >
              <MissingAlarm></MissingAlarm>
              <u slot="reference" style="color: #00ffff">{{row.deficiency}}</u>
            </el-popover>
          </template>
               </el-table-column>
           </el-table-column>
       </el-table>
    <!--       <ChemicalWastewater v-show="isShowIcon"></ChemicalWastewater>-->
    <!--           </el-col>-->
    <!--       </el-row>-->
   </div>
</template>

<script>
import ChemicalWastewater from '@components/table/components/componented/ChemicalWastewater'
import ChemicalWastewater from './componented/ChemicalWastewater'
import Refinery from '@components/table/components/componented/refinery'
import MissingAlarm from '@components/table/components/componented/MissingAlarm'
export default {
  name: 'SolidWaste',
  components: {
    MissingAlarm,
    Refinery,
    ChemicalWastewater
  },
  data () {
    return {
      isActive: '',
      isShowIcon: false,
      tableData: [{
        UserName: '集团名称',
        AddOutPut: '580',
        MonthOutPut: '250',
        normal: '10',
        warning: '9'
        WasteWaters: '',
        AddOutPut: '',
        MonthOutPut: '',
        NH4NPut: '',
        NH4NMonth: '',
        normal: '',
        overProof: '',
        Abnormal: '',
        StopProduction: '',
        deficiency: ''
      }, {
        UserName: '天津石化',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'
      }, {
        UserName: 'xxxx炼化3',
        WasteWaters: '116.6',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'
      }, {
        UserName: 'xxxx4',
        WasteWaters: '116.6',
        AddOutPut: '58.3',
        MonthOutPut: '13.1',
        warning: '13.1',
        normal: '21'
        NH4NPut: '58.3',
        NH4NMonth: '13.1',
        normal: '21',
        overProof: '2',
        Abnormal: '2',
        StopProduction: '2',
        deficiency: '2'

      }]
    }
  },
@@ -120,14 +210,35 @@
    // 获取点击的表格
    handle (row, column, event, cell) {
      console.log(row.UserName)
    },
    doIcon (index) {
      if (index !== 1) {
        this.isShowIcon = false
        this.isActive = ''
        return
      }
      this.isShowIcon = !this.isShowIcon
      if (index === this.isActive) {
        this.isActive = ''
        return
      }
      this.isActive = index
    }
  }
}
</script>

<style scoped>
.Solid-Waste{
    width: 100%;
    height: 100%;
.popovers{
  width: auto !important;
  background-color: gray !important;
}
.popovers.el-popover{
  padding:0;
}
.active {
  /*color: red;*/
  transform:rotate(90deg);
}

</style>

 src/components/table/components/tabHandover.vue

@@ -4,7 +4,8 @@
      <waste-water></waste-water>
    </el-tab-pane>
    <el-tab-pane label="废气" name="second">
      <waste-gas></waste-gas>
      <waste-water></waste-water>
<!--      <waste-gas></waste-gas>-->
    </el-tab-pane>
    <el-tab-pane label="固废" name="third">
      <solid-waste></solid-waste>
@@ -17,14 +18,14 @@

<script>
import WasteWater from '@components/table/components/WasteWater'
import WasteGas from '@components/table/components/WasteGas'
// import WasteGas from '@components/table/components/WasteGas'
import SolidWaste from '@components/table/components/SolidWaste'
import AirQuality from '@components/table/components/AirQuality'
export default {
  name: 'tabHandover',
  components: {
    WasteWater,
    WasteGas,
    // WasteGas,
    SolidWaste,
    AirQuality
  },

 src/components/table/summarySheets.vue

@@ -1,37 +1,87 @@
<template>
    <div class="summary-sheets">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="left">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn" >
         <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
        <div class="subtopic" v-if="subtopic">
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
            <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn">
                <img src="@assets/images/map-pages/icon/toolbox/table.png" alt="" class="icon">
                <!--<span class="icon-name">统计表</span>-->
            </div>
        </el-tooltip>
        <Dialog ref="summarySheets" title="企业指标分类统计">
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
              <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog()" >
                <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
                <i class="el-icon-office-building icon"></i>
              </div>
            </el-tooltip>
            <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
              <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog()" >
                <img src="@/assets/images/map-pages/icon/map/warn.png" alt="" class="icon">
                <!--<span class="icon-name">预报警</span>-->
              </div>
            </el-tooltip>
        </div>
    </transition>
    <Dialog ref="summarySheets" title="企业预警报警分类统计" >
          <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="企业预警报警分类统计" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
      <index-statistics></index-statistics>
        </Dialog >
    </div>
</template>

<script>
import tabHandover from '@components/table/components/tabHandover'
import Dialog from '@views/popup/Dialog'
// import Dialog from '@views/popup/Dialog'
import Dialog from '../../views/popup/Dialog'
import Warn from './components/Warn'
import IndexStatistics from './components/IndexStatistics'

import '@/components/BaseNav/SolidWaste/directive/dir'

export default {
  name: 'summary-sheet.vue',
  components: {
    tabHandover,
    Dialog
    Dialog,
    Warn,
    IndexStatistics
    // Dialog
  },
  data () {
    return {
      summaryVisible: false
      summaryVisible: false,
      dialogShow: false,
      comp: Warn,
      warnVisible: false,
      companyVisible: false,
      subtopic: false
    }
  },
  methods: {
    closeBtn () {
      // const summary = document.getElementById('summary')
      // summary.style.display = 'none'
      this.$refs.summarySheets.show()
      this.summaryVisible = true
    },
    showWarnDialog () {
      this.$refs.warnDialog.show()
      this.warnVisible = true
    },
    showStatisDialog () {
      this.$refs.indexStatisticsDialog.show()
      this.companyVisible = true
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
    }
  },
  mounted () {
@@ -40,21 +90,59 @@
      this.$refs.summarySheets.$on('closeDialog', () => {
        that.summaryVisible = false
      })
      this.$refs.warnDialog.$on('closeDialog', () => {
        that.warnVisible = false
      })
      this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
        that.companyVisible = false
      })
    })
  }
}
</script>

<style scoped lang="less">
  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

    .summary-sheets {
        position: absolute;
  display: inline-flex;
  overflow: hidden;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index:500;
  .subtopic{
    display: inline-flex;
    .iconBtn{
      margin-left: 0.03rem;
      border-color:#DCDFE6;
      color:#fff;
    }
    .iconBtn.active-button{
      border-color:#00fff6 !important;
      color:#00fff6 !important;
    }
  }

  .dialog {
    //width: 800px;
    //height: 300px;
    position: absolute;
    top: 15%;
    left: 3rem;
  }

        /*color: #fff;*/

       .el-icon-c-scale-to-original {
         width: 30px;
         height: 30px;

 src/conf/Constants.js

@@ -20,7 +20,7 @@
  OPACITY: 1,
  DASH_ARRAY: '4,4',
  DASH_SPPED: -5,
  ICON_SIZE: [20, 20]
  ICON_SIZE: [10, 10]
}

export const props = {

 src/conf/LayerPipeLine.js

@@ -9,5 +9,6 @@
  code: 'sewersPipeLine',
  name: '管线数据',
  checked: true,
  isShow: true,
  layers: [LayerPipeLines, LayerPk, LayerArea]
}

 src/conf/LayerTopic.js

@@ -8,10 +8,14 @@
import { LayerEnvRisk } from './layers/LayerEnvRisk'
import { LayerSoilGroundWater } from './layers/LayerSoilGroundWater'
import { LayerPollutionSources } from './layers/LayerPollutionSources'
import { LayerPipeLines } from './layers/LayerPipeLines'
import { LayerArea } from './layers/LayerArea'
import { LayerVideo } from './layers/LayerVideo'

export const LayerTopic = {
  code: 'sewersTopic',
  name: '专题图层',
  checked: true,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater]
  isShow: true,
  layers: [LayerPollutionSources, LayerWasteWater, LayerWasteGas, LayerWasteSolid, LayerAirQuality, LayerEnvRisk, LayerSoilGroundWater, LayerPipeLines, LayerVideo, LayerArea]
}

 src/conf/MapConfig.js

@@ -2,7 +2,6 @@
import TDT from './TDT'
import { LayerSewersPoint } from './layers/LayerSewers'
import { LayerTopic } from './LayerTopic'
import { LayerPipeLine } from './LayerPipeLine'
import { LayerBasin } from './layers/LayerBasin'

const curWwwPath = window.document.location.href
@@ -43,7 +42,7 @@
  IntranetBaseMaps: TDT.intranet,
  InternetBaseMaps: TDT.internet,
  Layers: {
    LayerSewersLine: [LayerBasin, LayerTopic, LayerPipeLine],
    LayerSewersLine: [LayerBasin, LayerTopic],
    layerSewersPoint: LayerSewersPoint
  } // 污雨水图层配置
}

 src/conf/layers/LayerBasin.js

@@ -7,6 +7,7 @@
  code: 'sewersBasin',
  name: '区域图层',
  checked: true,
  isShow: true,
  layers: [
    {
      code: 'basinCj',

 src/conf/layers/LayerEnvRisk.js

@@ -14,7 +14,8 @@
      sname: '风险统计图', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMaterial',
@@ -22,7 +23,8 @@
      sname: '物资库',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      minZoom: 10,
      color: ''
    },
    {
      code: 'envRiskMajor',
@@ -30,7 +32,8 @@
      sname: '重大风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'red'
    },
    {
      code: 'envRiskFirst',
@@ -38,7 +41,8 @@
      sname: '一级风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'sandybrown'
    },
    {
      code: 'envRiskSecond',
@@ -46,7 +50,8 @@
      sname: '二级风险',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      minZoom: 10,
      color: 'yellow'
    }
  ]
}

 src/conf/layers/LayerVideo.js

New file
@@ -0,0 +1,8 @@
/**
 * 视频监控
 */
export const LayerVideo = {
  code: 'sewersVideo',
  name: '视频监控',
  checked: false
}

 src/views/MapTemplate.vue

@@ -10,7 +10,7 @@
    <!--    <menu-special></menu-special>-->
    <legend-panel></legend-panel>
    <summary-sheets></summary-sheets>
    <enterprise></enterprise>
    <!-- <enterprise></enterprise> -->
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <!--    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>-->
    <!--    <el-button type="primary" @click="ChangeWaterState" class="Waste-water">废水</el-button>-->
@@ -31,7 +31,7 @@
import Popup from '@views/popup/Popup'
// import MenuSpecial from '@components/panel/MenuTopic'
import LegendPanel from '@components/panel/LegendPanel'
import Enterprise from '../components/table/enterprise'
// import Enterprise from '../components/table/enterprise'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
import LayerFactory from '@components/LayerController/service/LayerFactory'
@@ -39,7 +39,7 @@
export default {
  name: 'MapTemplate',
  components: {
    Enterprise,
    // Enterprise,
    LegendPanel,
    // MenuSpecial,
    ToolBoxPanel,
@@ -91,6 +91,7 @@
        map: this.map
      })
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.init(this.$store.state.map.serviceLayers.layerSewersPoint)
      window.layerFactory = layerFactory

      this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手