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

zhangshuaibao

2021-04-13 edbf4224c71014eacdcdcde12a9a2885ab0ffd23

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


 Conflicts:

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

 package.json

@@ -13,7 +13,7 @@
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "axios": "^0.18.0",
    "axios": "^0.21.1",
    "babel-polyfill": "^6.26.0",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.4",

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

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

.leaflet-container,
html,body{
 // font-family: 'Microsoft YaHei';
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;
@@ -11,7 +13,9 @@
  list-style: none;
}

i{font-style: normal}
i {
  font-style: normal
}

.el-button--primary {
  color: @color;
@@ -111,6 +115,7 @@

  thead.is-group th {
    background: transparent;
    padding: 0
  }

  .el-table__expanded-cell {
@@ -214,60 +219,75 @@
  margin-left: 10px;
}

.el-scrollbar__wrap{
.el-scrollbar__wrap {

}

.el-scrollbar__wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.el-scrollbar__wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  border-radius: 10px;
  background: none;
}

.el-scrollbar__wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : none;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: none;
  border-radius: 10px;
}

#el-scrollbar__wrap::-webkit-scrollbar-button { /*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
  background: #74D334;
}

/*******************操作按钮点击选中整体样式******************************/
.el-button{
.el-button {

}

.hover-bottom:hover,
.active-button{
.active-button {
  border: 0.00521rem solid #fff700 !important;
  box-shadow: 0 0 0.03rem #fff700 !important;
  color:#fff700 !important;
  color: #fff700 !important;
}

/***************Company 图层 悬浮框样式。*********************************/
.company-bindTooltip{
.company-bindTooltip {
  position: absolute;
  top:0;
  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{

  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{
    top: 20px;
    left: 0;

    li {
      position: absolute;
      top:0;
      left:0;
      top: 0;
      left: 0;
      width: 100%;
      font-weight: 900;
      text-shadow: 0 0 4px #fff;
@@ -279,6 +299,7 @@
    }
  }
}

/*.company-bindTooltip {
  //background: @background-color-split;
  background: none;
@@ -308,7 +329,7 @@
    }
  }
}*/
.company-bindTooltip:before{
.company-bindTooltip:before {
  display: none;
}

@@ -336,16 +357,19 @@

/*************** PublicTable 表格样式。*********************************/

.el-table{
  border-bottom: 1px solid #fff;
.el-table {
  border: 1px solid #396d83 !important;

  .el-table__body-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: none;
  }
  .cell{

  .cell {
    padding: 0 3px !important;
    i{

    i {
      display: block;
      font-style: normal;
      font-size: 10px;
@@ -353,25 +377,34 @@
    }
  }
}
.el-table--border th{

.el-table--border th {
  border-right: none;
  border-left: 1px solid #ddd;
}
.el-table--border th.gutter{border-left: none}

.el-table--border th.gutter {
  border-left: none
}

.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {

  text-align: center;
}
.el-table th>.cell {

.el-table th > .cell {
  border: 1px #396d83 solid;
  color: #00fff6;
}
.el-table__row>td{

.el-table__row > td {
  border: none;
}
.el-table::before {//去掉最下面的那一条线

.el-table::before { //去掉最下面的那一条线
  height: 0;
}

.el-table td, .el-table th.is-leaf {
  font-size: 0.08rem;
}
@@ -383,21 +416,24 @@
.el-table .success-row {
  background: #30455f;
}
.el-table tbody tr:hover>td {
  background-color:#28304d !important;

.el-table tbody tr:hover > td {
  background-color: #28304d !important;
}

//修改表格高度
.el-table td {
  padding: 0!important;
  padding: 0 !important;
  font-size: 0.01rem !important;
}

/***********************************************动画效果************/
.transition{
.transition {
  transition: all .5s;
 /* transform-origin: top left;*/
  /* transform-origin: top left;*/
  animation: bounce-in .2s;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
@@ -408,9 +444,10 @@
    opacity: 1;
  }
}

/**map 页面图标按钮*/
.iconBtn {
  width:0.26rem;
  width: 0.26rem;
  height: 0.26rem;
  text-align: center;
  background: rgba(0, 16, 30, 0.5);
@@ -423,14 +460,16 @@
  justify-content: center;
  justify-items: center;
  border-radius: 0.03rem;
  .icon{

  .icon {
    width: 20px;
    margin: 0 auto;
    font-size: 20px;
  }

}
.panel-title{

.panel-title {
  color: @color-title;
  font-size: 18px;
  padding: 10px;
@@ -442,61 +481,131 @@

}

.el-picker-panel{
.el-picker-panel {
  background: @background-color;
  border-color:@color;
  color:@color;
  .el-picker-panel__body-wrapper{
  border-color: @color;
  color: @color;

  .el-picker-panel__body-wrapper {
    background: @background-color;
  }
  .el-input__inner{
    background:@background-color;
    border-color:@color;
  }
  .el-date-table td.today span{
    color:@color-highlight;
  }
  .el-picker-panel__footer{

  .el-input__inner {
    background: @background-color;
    border-top-color:@color;
    border-color: @color;
  }
  .el-date-table th{
    border-bottom-color:@color;

  .el-date-table td.today span {
    color: @color-highlight;
  }
  .el-button{

  .el-picker-panel__footer {
    background: @background-color;
    color:@color;
    border-color:@color;
    border-top-color: @color;
  }
  .el-button--text{

  .el-date-table th {
    border-bottom-color: @color;
  }

  .el-button {
    background: @background-color;
    color: @color;
    border-color: @color;
  }

  .el-button--text {
    padding: 7px 15px;
  }
  .el-button:hover{

  .el-button:hover {
    background: @background-color;
    color:@color-highlight;
    border-color:@color-highlight;
    color: @color-highlight;
    border-color: @color-highlight;
  }
  .el-input__inner{
    color:#fff;

  .el-input__inner {
    color: #fff;
    text-align: center;
  }
  .el-date-picker__time-header{
    border-bottom-color:@background-color-split;

  .el-date-picker__time-header {
    border-bottom-color: @background-color-split;
  }
  .el-date-picker__header-label{color:#fff}

  .el-date-picker__header-label {
    color: #fff
  }
}
.el-select-dropdown{

.el-select-dropdown {
  background: @background-color;
  border-color:@color;
  color:@color;
  .el-select-dropdown__item{
    color:#fff;
  border-color: @color;
  color: @color;

  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.hover{

  .el-select-dropdown__item.hover {
    background: @background-color;
    box-shadow:  0 0 5px @color-highlight inset;
    box-shadow: 0 0 5px @color-highlight inset;
  }
  .el-select-dropdown__item.selected{
    color:@color-highlight;

  .el-select-dropdown__item.selected {
    color: @color-highlight;
  }
  }
}

/***********************************************右侧管线相关************/
.el-tabs__header {
  background: none;
}

.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}

.el-tabs--border-card {
  background: none;
  border: none;
  box-shadow: none;
}

.el-tabs--border-card > .el-tabs__header {
  background: none;
  border-bottom: none;
  margin: 0;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #409EFF;
  background: none;
  border: none;
}

.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: none;
}

.panel-right ::-webkit-scrollbar-thumb {
  background: none;
  border: none;
}

.el-card {
  margin-top: 15px;
  background: rgba(0, 16, 30, 0.5);
  border: 0.00521rem solid @color;
  box-shadow: 0 0 0.03rem @color;
}

.clearfix {
  display: inline-block;
  color: #ffffff;
  margin: 15px 0;
}

.fixed-table {
  background: rgba(0, 16, 30, 1) !important;
}

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

@@ -3,10 +3,10 @@
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i>120343.18</i></span>
        <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>
      </div>
    </div>
    <div class="form-echrts">
@@ -25,16 +25,16 @@
            </span>
          </div>
        </div>
        <div>
          采样点数:
          <el-select v-model="formInline.region" placeholder="50">
            <el-option label="0" value="0"></el-option>
            <el-option label="25" value="25"></el-option>
            <el-option label="50" value="50"></el-option>
            <el-option label="75" value="75"></el-option>
            <el-option label="100" value="100"></el-option>
          </el-select>
        </div>
<!--        <div>-->
<!--          采样点数:-->
<!--          <el-select v-model="formInline.region" placeholder="50">-->
<!--            <el-option label="0" value="0"></el-option>-->
<!--            <el-option label="25" value="25"></el-option>-->
<!--            <el-option label="50" value="50"></el-option>-->
<!--            <el-option label="75" value="75"></el-option>-->
<!--            <el-option label="100" value="100"></el-option>-->
<!--          </el-select>-->
<!--        </div>-->
        <div class="detailbtn"  @click="onSubmit">查询</div>
        <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
      </div>
@@ -138,6 +138,10 @@
        datatype: 1
      }
    }
  },
  mounted () {
    this.onSubmit()
    // this.CreateChart(this.JsonDayCharts.id, this.JsonDayCharts.title, this.JsonDayCharts.legend, this.JsonDayCharts.xdata, this.JsonDayCharts.ydatas, this.JsonDayCharts.yname, this.JsonDayCharts.id, this.JsonDayCharts.datatype)
  },
  methods: {
    onSubmit () {
@@ -667,40 +671,6 @@
    //   }
    //   return options
    // }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.drawChart()
    //   const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse()
    //   console.log(dataWatch)
    //   var dateDate = []
    //   // {COD:[3,4,5]}
    //   var data = {}
    //   for (var n = 0; n < dataWatch.length; n++) {
    //     var d = dataWatch[n].MonTimeStr.substring(5, 9)
    //     if (dateDate.indexOf(d) < 0) {
    //       dateDate.push(d)
    //     }
    //     if (data[dataWatch[n].PoltmtrlName]) {
    //       data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty)
    //     } else {
    //       data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty]
    //     }
    //   }
    //   var series = []
    //   for (var k in data) {
    //     series.push({
    //       name: k,
    //       type: 'line',
    //       yAxisIndex: k === '废水流量' ? 1 : 0,
    //       data: data[k]
    //     })
    //   }
    //   console.log(series)
    //   const opitons = this.initOptions(dateDate, series)
    //   this.mychartDay = this.$echarts.init(this.$refs.main)
    //   this.mychartDay.setOption(opitons)
    // })
  }
}
</script>

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

@@ -3,10 +3,10 @@
    <div id="Tab">
        <div class="infomation">
          <div>
            <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
            <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
            <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
            <span class="grid-content">废气流量 : <i>120343.18</i></span>
            <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : 100</span>
            <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : 50</span>
            <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : 30</span>
            <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>
          </div>
        </div>
        <div class="form-echrts">
@@ -30,16 +30,16 @@
                      </span>
                    </div>
                </div>
                <div>
                    采样点数:
                    <el-select v-model="formInline.region">
                        <el-option label="0" value="0"></el-option>
                        <el-option label="25" value="25"></el-option>
                        <el-option label="50" value="50"></el-option>
                        <el-option label="75" value="75"></el-option>
                        <el-option label="100" value="100"></el-option>
                    </el-select>
                </div>
<!--                <div>-->
<!--                    采样点数:-->
<!--                    <el-select v-model="formInline.region">-->
<!--                        <el-option label="0" value="0"></el-option>-->
<!--                        <el-option label="25" value="25"></el-option>-->
<!--                        <el-option label="50" value="50"></el-option>-->
<!--                        <el-option label="75" value="75"></el-option>-->
<!--                        <el-option label="100" value="100"></el-option>-->
<!--                    </el-select>-->
<!--                </div>-->
                <div class="detailbtn"  @click="onSubmit">查询</div>
                <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
             </div>
@@ -141,18 +141,31 @@
      }
    }
  },
  // mounted () {
  //   // this.$nextTick(() => {
  //   //   console.log(1)
  //   this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
  //   // }
  // },
  created () {
    // this.$nextTick(() => {
    // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
    // }
  },
  mounted () {
    this.onSubmit()
    // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
  },
  methods: {
    onSubmit () {
      console.log(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      this.CreateChart()
      // console.log(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
      // this.CreateChart(this.JsonCtarts.id, this.JsonCtarts.title, this.JsonCtarts.legend, this.JsonCtarts.xdata, this.JsonCtarts.ydatas, this.JsonCtarts.yname, this.JsonCtarts.id, this.JsonCtarts.datatype)
    },
    CreateChart: function (id, title, legend, xdata, ydatas, yname, jcdID, datatype) {
    CreateChart: function () {
      // var id = this.JsonCtarts.id
      // var title = this.JsonCtarts.title
      var legend = this.JsonCtarts.legend
      var xdata = this.JsonCtarts.xdata
      var ydatas = this.JsonCtarts.ydatas
      var yname = this.JsonCtarts.yname
      // var jcdId = this.JsonCtarts.jcdID
      var datatype = this.JsonCtarts.datatype

      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.clear()
      var dataUnit = ''
@@ -450,6 +463,7 @@
        }],
        series: serLists
      }
      console.log(option)
      this.myChart.setOption(option)
      /*
      this.myChart.on('legendselectchanged', function (params) {

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

@@ -577,6 +577,9 @@
    border-radius: 2px;
    margin-right: 10px;
    padding:0 10px
  //>i{
  //    color: #f00;
  //  }
}
.infomation {
  padding: 5px 10px;

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

@@ -2,10 +2,10 @@
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i>120343.18</i></span>
        <span class="grid-content">氮氧化物 :<i  style="color: #e8ee0b">29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i  style="color: #e8ee0b">17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i  style="color: #e8ee0b">6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i  style="color: #e8ee0b">120343.18</i></span>
      </div>
    </div>
    <div class="form-echrts">
@@ -14,7 +14,7 @@
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker  type="datetime"   v-model="formInline.timeStart"></el-date-picker>
              <el-date-picker  type="datetime"  v-model="formInline.timeStart"></el-date-picker>
            </span>
          </div>
          <div class="pickerData">
@@ -205,10 +205,20 @@
      }
    }
  },
  // mounted () {
  //   this.DrawEXHRealTimeDateChart()
  // },
  mounted () {
    // const Day = new Date()
    // console.log(Day)
    this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname)
  },
  methods: {
    // EndTime () {
    //   var myDate = new Date()
    //   var mytime = myDate.toLocaleTimeString() // 获取当前时间
    //   console.log(mytime)
    // },
    // handleshowcomplaint(row) {
    //   this.temp.complaint_consultationtime = new Date()
    // },
    onSubmit () {
      this.DrawEXHRealTimeDateChart(this.JsonTimeCtarts.id, this.JsonTimeCtarts.title, this.JsonTimeCtarts.legend, this.JsonTimeCtarts.ydatas, this.JsonTimeCtarts.yname)
    },
@@ -490,6 +500,9 @@
  border-radius: 2px;
  margin-right: 10px;
  padding:0 10px
  >i{
    color: #ffffff;
  }
}
.animation {
  //width: 600px;

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

@@ -5,16 +5,16 @@
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab" v-if="this.$attrs.value === 'feiqi'">
            <li @click='tabTaggle("ECharts")'>实时数据</li>
            <li @click='tabTaggle("EChartsHour")'>小时数据</li>
            <li @click='tabTaggle("EChartsDate")'>日数据</li>
            <li @click='tabTaggle("EChartsTable")'>人工数据</li>
            <li :class="active==0?'hover':''" @click='tabTaggle("ECharts",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHour",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDate",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("EChartsTable",3)'>人工数据</li>
        </ul>
        <ul class="tab" v-else>
            <li @click='tabTaggle("EChartsRealWasteWater")'>实时数据</li>
            <li @click='tabTaggle("EChartsHourWasteWater")'>小时数据</li>
            <li @click='tabTaggle("EChartsDateWasteWater")'>日数据</li>
            <li @click='tabTaggle("EChartsWasteWaterTable")'>人工数据</li>
            <li :class="active==0?'hover':''" @click='tabTaggle("EChartsRealWasteWater",0)'>实时数据</li>
            <li :class="active==1?'hover':''" @click='tabTaggle("EChartsHourWasteWater",1)'>小时数据</li>
            <li :class="active==2?'hover':''" @click='tabTaggle("EChartsDateWasteWater",2)'>日数据</li>
            <li :class="active==3?'hover':''" @click='tabTaggle("EChartsWasteWaterTable",3)'>人工数据</li>
        </ul>
        <div class="legend" >
            <span >正常</span>
@@ -24,7 +24,7 @@
            <span >超标</span>
            <i style=" background: orange;"></i>
        </div>
        <component :is="currentTab" v-bind="$attrs"></component>
        <component :is="currentTab" v-bind="$attrs" ref="Echatrs"></component>
    </div>
</template>

@@ -51,14 +51,19 @@
    EChartsRealWasteWater,
    EChartsWasteWaterTable
  },
  mounted () {
    this.$refs.Echatrs.CreateChart()
  },
  data () {
    return {
      currentTab: 'EChartsHourWasteWater'
      currentTab: 'EChartsHour',
      active: '1'
    }
  },
  methods: {
    tabTaggle (taggleMenu) {
    tabTaggle (taggleMenu, num) {
      this.currentTab = taggleMenu
      this.active = num
      // debugger
    }
  }

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

@@ -58,7 +58,7 @@
  methods: {
    processingData () {
      for (var i = 0; i < this.displayContentTab.length; i++) {
        console.log(this.displayContentTab[i])
        // console.log(this.displayContentTab[i])
        this.tabData = this.displayContentTab[i]
      }
    }

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -1,5 +1,5 @@
<template>
  <div class="public-bounced map-background" v-drag v-if="flag">
  <div class="public-bounced map-background" v-drag v-show="flag">
    <div class="public-bounced-title panel-title" ref="publicBounced">
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
@@ -63,7 +63,7 @@
  mounted () {
    // this.$nextTick(() => {
    // console.log(this.$refs.publicBounced)
    // console.log(this.$refs.PublicChart)
    console.log(this.$refs.PublicChart)
    // })
  },
  methods: {
@@ -82,11 +82,12 @@
      this.value = value
    },
    setGasData (data, dataDetails, GasHourData, ManualData, value) {
      // console.log(this.$refs)
      this.setWasteGasdata = data
      this.getWasteGasDetails = dataDetails
      this.getQueryOnlineMonData = GasHourData
      this.ManualData = ManualData
      console.log(this.getQueryOnlineMonData)
      // console.log(this.getQueryOnlineMonData)
      this.displayContentTitle = data.Name
      this.flag = true
      this.value = value

 src/components/LayerController/logic/SolidWaste.js

@@ -82,9 +82,9 @@

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

 src/components/LayerController/logic/WasteGas.js

@@ -82,10 +82,10 @@
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
    // console.log(e.layer.options.test)
    instance.$mount()
    document.body.appendChild(instance.$el)
    instance.setGasData(e.layer.options.test, result.Result.DataInfo, Mondata.Result.DataInfo, ManualData.Result.DataInfo, 'feiqi')
    this.setPanTo(e.latlng, 80)
  }
  // 不同类型图片加载

 src/components/LayerController/service/LayerFactory.js

@@ -21,6 +21,43 @@

        var checked = config.checked
        checked && this.load(config)
        checked && this.toggleZoomByConfnig(config)
      }
    }
  }

  /**
   * 控制显示的级别
   * @param layerConfig
   */
  initEvent (layerConfig) {
    this.map.on('zoomend ', (e) => this.toggleZoomByLayer(layerConfig))
  }

  toggleZoomByLayer (layerConfig) {
    var config = layerConfig
    if (Array.isArray(layerConfig)) {
      for (var i = 0, l = layerConfig.length; i < l; i++) {
        config = layerConfig[i]
        var layers = config.layers
        var childLayer = config.childLayer
        layers && this.toggleZoomByLayer(layers)
        childLayer && this.toggleZoomByLayer(childLayer)
        this.toggleZoomByConfnig(config)
      }
    } else {
      this.toggleZoomByConfnig(layerConfig)
    }
  }

  toggleZoomByConfnig (config) {
    const zoom = this.map.getZoom()
    var checked = config.checked
    if (checked && config.minZoom) {
      if (zoom > config.minZoom) {
        this.show(config)
      } else {
        this.hide(config)
      }
    }
  }
@@ -91,9 +128,9 @@
        this.setZIndex(layer.getLayers())
      } else {
        if (layer.feature && (layer.feature.geometry.type === 'LineString' || layer.feature.geometry.type === 'MultiLineString')) {
          layer.bringToBack()
          layer.bringToBack && layer.bringToBack()
        } else {
          layer.bringToFront()
          layer.bringToFront && layer.bringToFront()
        }
      }
    }

 src/components/panel/RightSearchPanel.vue

@@ -1,47 +1,49 @@
<template>
  <div class="panel-right" v-show="isShow">
      <transition name="searchPanelChange">
          <div style=" display: inline-flex;">
              <div class="panel-tab">
                  <div class="container">
                      <!--  <ul>
                          <li style="text-align: right">
                              <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  v-for="item in topicList" :key="item.name" :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'" @click="()=>{selected(item)}" v-show="item.isShow" >
                          <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                              <li>
                                  <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
                              </li>
                          </el-tooltip>
                      </ul>
                  </div>
              </div>
              <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] "  >
                  <div class="panel-fold-btn" @click="toggleMonitorPanel">
                      <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
                  </div>
                  <div :class="'search-container map-background'" v-show="selectGroup" >
                      <div @click="setSearchPanelChange" 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;font-size: 13px;">
                          <component :title="title" :is="gcComp"></component>
                      </div>
                  </div>
              </div>
    <transition name="searchPanelChange">
      <div style=" display: inline-flex;">
        <div class="panel-tab">
          <div class="container">
            <!--  <ul>
                <li style="text-align: right">
                    <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 v-for="item in topicList" :key="item.name"
                :class="item.checked?'module-wrap map-btn-active':'module-wrap map-btn-unactive'"
                @click="()=>{selected(item)}" v-show="item.isShow">
              <el-tooltip :popper-class="'map-tooltip'" effect="dark" :content="item.name" placement="left">
                <li>
                  <img src="../../assets/images/map-pages/icon/sl.png" class="icon">
                </li>
              </el-tooltip>
            </ul>
          </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>
        <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] ">
          <div class="panel-fold-btn" @click="toggleMonitorPanel">
            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']"></div>
          </div>
      </el-tooltip> -->
          <div :class="'search-container map-background'" v-show="selectGroup">
            <div @click="setSearchPanelChange" 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;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>

@@ -55,10 +57,20 @@
import SolidWasteSearch from '@components/panel/topicSearch/SolidWasteSearch'
import SewersSearch from '@components/panel/topicSearch/SewersSearch'
import SoilGroundWaterSearch from '@components/panel/topicSearch/SoilGroundWaterSearch.vue'
import PipeChangesSearch from '@components/panel/topicSearch/pipeChangesSearch.vue'
import PipeInformationSearch from '@components/panel/topicSearch/pipeInformationSearch.vue'

import bus from '@/eventBus'

export default {
  name: 'MonitorPanel',
  components: { GasWasteSearch, WaterWasteSearch, SolidWasteSearch, EnvRiskSearch, DischargeSearch },
  components: {
    GasWasteSearch,
    WaterWasteSearch,
    SolidWasteSearch,
    EnvRiskSearch,
    DischargeSearch
  },
  data () {
    return {
      isShow: true,
@@ -134,6 +146,12 @@
        case '管线':
          this.gcComp = SewersSearch
          break
        case '管道变更':
          this.gcComp = PipeChangesSearch
          break
        case '管道信息':
          this.gcComp = PipeInformationSearch
          break
      }
    },
    handlePage (page) {
@@ -153,33 +171,33 @@
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
    //   if (right === '10px') {
    //     rightControl.animate({
    //       right: '-322px'
    //     })
    //     el.css({
    //       transform: 'rotateY(180deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '320px',
    //       speed: 1000
    //     })
    //   } else {
    //     rightControl.animate({
    //       right: '10px'
    //     })
    //     el.css({
    //       transform: 'rotateY(0deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '290px',
    //       speed: 1000
    //     })
    //   }
      //   if (right === '10px') {
      //     rightControl.animate({
      //       right: '-322px'
      //     })
      //     el.css({
      //       transform: 'rotateY(180deg)',
      //       'transform-origin': '50% 50%',
      //       transition: 'transform 1s linear'
      //     })
      //     el2.animate({
      //       right: '320px',
      //       speed: 1000
      //     })
      //   } else {
      //     rightControl.animate({
      //       right: '10px'
      //     })
      //     el.css({
      //       transform: 'rotateY(0deg)',
      //       'transform-origin': '50% 50%',
      //       transition: 'transform 1s linear'
      //     })
      //     el2.animate({
      //       right: '290px',
      //       speed: 1000
      //     })
      //   }
    },
    defaultLastOne () {
      let v = {}
@@ -211,28 +229,33 @@
</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;
  /*  height: 5.6475rem;*/
    overflow: hidden;
.searchPanelChange-enter-active {
  transform-origin: top right;
  animation: bounce-in .2s;
}
.module-wrap{

.searchPanelChange-leave-active {
  transform-origin: top right;
  animation: bounce-in .2s reverse;
}

.search-container {
  position: relative;
  //width: 1.79167rem;
  //width: 2.39167rem;
  width: 2.3rem;
  /*  height: 5.6475rem;*/
  overflow: hidden;
}

.module-wrap {
  width: 0.15rem;
  height: 0.15rem;
  padding: .04167rem;
  //padding: .00521rem;
  background: rgba(0,16,30,.5);
  background: rgba(0, 16, 30, .5);
  border-radius: .03125rem;
  border: .00521rem solid rgba(255,247,0,.5);
  border: .00521rem solid rgba(255, 247, 0, .5);
  margin: .04167rem 0;
  font-size: .08333rem;
  -webkit-transition: all .2s linear;
@@ -240,16 +263,19 @@
  cursor: pointer;
  position: relative;
  line-height: 0.15rem;
  li{

  li {
    margin: 0.00521rem 0;
    text-align: center;
    img{

    img {
      width: 0.1rem;
      height: 0.1rem;

    }
  }
}

.panel-right {
  display: inline-flex;
  //width: 322px;
@@ -285,28 +311,30 @@
  //  background-color: #061e51 !important;
  //  border: solid 1px #0e639e !important;
  //}
    .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.special-button:hover{
        background:@background-color;
        border:1px solid @color;
        box-shadow: 0 0 2px @color;
        color:@color;
    }
  .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.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;
@@ -400,18 +428,20 @@
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .panel-fold-btn{

  .panel-fold-btn {
    overflow: hidden;
    position: absolute;
    top:45%;
    top: 45%;
    left: -18px;
    /*left: 0px;*/
    //right: 320px;
    /*right: 290px;*/
    z-index: 1000;
    /*right: 0px;*/
    background-color: rgba(5,24,66,.8);
    background-color: rgba(5, 24, 66, .8);
    border-radius: 10px 0 0 10px;

    .btn-stretch {
      //width: 20px;
      //height: 40px;
@@ -421,8 +451,9 @@
      transform: rotateY(0deg);
      transform-origin: 50% 50%;
      transition: transform 1s linear;
        /*transition: 3s linear;*/
      /*transition: 3s linear;*/
    }

    .btn-shrink {
      width: 20px;
      height: 40px;
@@ -442,14 +473,17 @@
    font-size: 12px;
    background-color: #0B3B6D;
  }
  .tab-item:hover{

  .tab-item:hover {
    cursor: pointer;
  }

  .panel-tab {
    position: relative;
    z-index: 500;
    margin-right: .025rem;
    .container{

    .container {
      max-height: 3.125rem;
      overflow: hidden;
      position: relative;
@@ -469,10 +503,12 @@
    //background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    //background-size: 100% 98%;
  }
  .a{

  .a {
    transform: translateX(328px);
    transition: transform 3s linear;
    }
  }

  .panel_searchTotal {
    font-size: 12px;
    float: right;
@@ -504,71 +540,90 @@
    display: grid;
    font-size: 18px;
  }
    /*input 点击搜索样式*/
    .rightButtonSearch{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-input{margin-right: 10px}
        .el-icon-search{
            width: 40px;
            border:1px solid @color;
            height: 28px;
            line-height: 28px;
            text-align: center;
            color:#fff;
            border-radius: 2px;
            cursor:pointer;
            background: rgba(0,16,30,.5);
            padding:0;
        }
    }
    /*单选按钮样式*/
    .levelOfRisk{padding-left:20px}
    .levelOfRisk .el-radio{padding-bottom:6px}

    .levelOfRisk-type{
        display: inline-block;
        position: relative;
        padding-right: 5px;
        color:@color-shadow;
        i{
            display: block;
            width: 15px;
            height: 10px;
            position: absolute;
            top:50%;
            right: -15px;
            margin-top: -5px;
        }
    }
    .el-radio.is-checked .levelOfRisk-type{color:#409EFF}
  /*input 点击搜索样式*/

    .environmental-risk-list{
        position: relative;
        cursor: pointer;
        padding-left:50px;
        padding-top:5px;
        padding-bottom:5px;
        color: @color-shadow;
        border-bottom:1px solid @background-color-split;
        .state{
            width: 30px;
            height: 30px;
            position: absolute;
            top:50%;
            left:10px;
            margin-top: -15px;
            border-radius: 50%;
            box-shadow: 0 0 3px #000;
            background: #0B3B6D;
        }
  .rightButtonSearch {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-input {
      margin-right: 10px
    }
    .environmental-risk-list.hover,
    .environmental-risk-list:hover{
        color:@color-over;
        background: @background-color;

    .el-icon-search {
      width: 40px;
      border: 1px solid @color;
      height: 28px;
      line-height: 28px;
      text-align: center;
      color: #fff;
      border-radius: 2px;
      cursor: pointer;
      background: rgba(0, 16, 30, .5);
      padding: 0;
    }
  }

  /*单选按钮样式*/

  .levelOfRisk {
    padding-left: 20px
  }

  .levelOfRisk .el-radio {
    padding-bottom: 6px
  }

  .levelOfRisk-type {
    display: inline-block;
    position: relative;
    padding-right: 5px;
    color: @color-shadow;

    i {
      display: block;
      width: 15px;
      height: 10px;
      position: absolute;
      top: 50%;
      right: -15px;
      margin-top: -5px;
    }
  }

  .el-radio.is-checked .levelOfRisk-type {
    color: #409EFF
  }

  .environmental-risk-list {
    position: relative;
    cursor: pointer;
    padding-left: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: @color-shadow;
    border-bottom: 1px solid @background-color-split;

    .state {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 50%;
      left: 10px;
      margin-top: -15px;
      border-radius: 50%;
      box-shadow: 0 0 3px #000;
      background: #0B3B6D;
    }
  }

  .environmental-risk-list.hover,
  .environmental-risk-list:hover {
    color: @color-over;
    background: @background-color;
  }

  input::-webkit-input-placeholder {
    color: #569ee1;
@@ -695,7 +750,7 @@

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }
@@ -724,48 +779,66 @@
      background-color: #061e51 !important;
    }
  }

  .unfold {
    transform: translateX(332px);
    transition: transform 0.5s linear;
  }

  .shrink {
    transform: translateX(0px);
    transition: transform 0.5s linear;
  }
    /******************以下公共部分**********/
    .sewers-search{
        position: relative;
        overflow: hidden;
        .panel-title{}
        .search-panel{
            background-color: transparent;
            padding: 10px;
            border-bottom: 1px solid @background-color-split;
            // .el-input{width:calc(100% - 40px);position: relative}
            /deep/ input {
                border-radius: 0;
                background-color: @background-color-split ;
                border: solid 1px @color ;
                color: @color-gray;
                font-size: 0.01rem;
                padding:0 15px;
                .el-select .el-input.is-focus .el-input__inner{
                    border-color: @color;
                }
            }
            .el-input__inner{background: none;color:#fff;font-size: 14px;border-radius: 0; border-color: @color;background: rgba(0,16,30,.5);}
        }
        .search-btn{

        }
        //location-btn{
        //
        //}
        .location-btn:hover,.el-input__icon:hover{
            color: @color;
            cursor: pointer;
        }
  /******************以下公共部分**********/

  .sewers-search {
    position: relative;
    overflow: hidden;

    .panel-title {
    }

    .search-panel {
      background-color: transparent;
      padding: 10px;
      border-bottom: 1px solid @background-color-split;
      // .el-input{width:calc(100% - 40px);position: relative}
      /deep/ input {
        border-radius: 0;
        background-color: @background-color-split;
        border: solid 1px @color;
        color: @color-gray;
        font-size: 0.01rem;
        padding: 0 15px;

        .el-select .el-input.is-focus .el-input__inner {
          border-color: @color;
        }
      }

      .el-input__inner {
        background: none;
        color: #fff;
        font-size: 14px;
        border-radius: 0;
        border-color: @color;
        background: rgba(0, 16, 30, .5);
      }
    }

    .search-btn {

    }

    //location-btn{
    //
    //}
    .location-btn:hover, .el-input__icon:hover {
      color: @color;
      cursor: pointer;
    }
  }
}

</style>

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,75 +1,73 @@
<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" class="search-panel-item">
                <el-select style="width: 100%"  v-model="form.pipelineType" @change="handlePipelineType"  :popper-class="'select-down'">
                  <el-option
                      v-for="item in pipelineTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="form.pipelineType+'：'" size="mini">
                <el-select style="width: 100%"  v-model="form.dataType"  @change="handleDataType" :popper-class="'select-down'">
                  <el-option
                      v-for="item in dataTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item >-->
              <div class="rightButtonSearch">
                <el-input  v-model="form.keyword" size="mini"  placeholder="在此输入关键字搜索">
                  <!-- <el-button slot="append" icon="el-icon-search" size="mini"></el-button>-->
                  <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
                  <!-- <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> -->
                </el-input>
                <el-button class="el-icon-search" @click="handleSearch"></el-button>
              </div>
              <!--              </el-form-item>-->
              <!--              <el-form-item>-->
              <!--                <input type="button" class="btn-ok" @click="handleSearch" value="查询">-->
              <!--                <input type="button" class="btn-reset" @click="handleSearch" value="重置">-->
              <!--              </el-form-item>-->
            </el-form>
          </div>
          <el-scrollbar style="height:380.44px;" >
            <div class="environmental-risk-list" v-for="(item,index) in list" :key="index" >
              <!--  <i class="state"></i> -->
              <div @click="handleLocation(item)">
                <h3  class="B-TMD-table-list-title-y" :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]" >{{ item.properties.pipename }}</h3>
                <p v-for="itm in labelList" :key="itm.label">
                  <span>{{ itm.label }}：</span>
                  <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
                </p>
              </div>
  <div class="sewers-search" v-if="gdVisible">
    <div class="panel-title">{{ title }}</div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="查询" name="first">
        <div class="search-panel ">
          <el-form ref="form" :model="form" label-width="90px" class="search-form">
            <el-form-item label="设施类型：" size="mini" class="search-panel-item">
              <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                         :popper-class="'select-down'">
                <el-option
                    v-for="item in pipelineTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="form.pipelineType+'：'" size="mini">
              <el-select style="width: 100%" v-model="form.dataType" @change="handleDataType"
                         :popper-class="'select-down'">
                <el-option
                    v-for="item in dataTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <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-scrollbar>
          <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>
          </el-form>
        </div>
      <!--        <div class="monitor2" v-if="hbVisible">-->
      <!--          <env-protect-search></env-protect-search>-->
      <!--        </div>-->
      <!--        <div class="monitor2" v-if="pkVisible">-->
      <!--          <discharge-search></discharge-search>-->
      <!--        </div>-->
        <el-scrollbar style="height:380.44px;">
          <div class="environmental-risk-list" v-for="(item,index) in list" :key="index">
            <div @click="handleLocation(item)">
              <h3 class="B-TMD-table-list-title-y"
                  :class="['B-TMD-table-list-title-y-nam', { 'warning': item.vehicleStatus==='910003' }, { 'offline': item.vehicleStatus==='910001' }]">
                {{ item.properties.pipename }}</h3>
              <p v-for="itm in labelList" :key="itm.label">
                <span>{{ itm.label }}：</span>
                <span :title="item.properties[itm.key] ">{{ item.properties[itm.key] }}</span>
              </p>
            </div>
          </div>
        </el-scrollbar>
        <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>
      </el-tab-pane>
      <el-tab-pane label="分析" name="second">
        <SewersAnalysis></SewersAnalysis>
      </el-tab-pane>
      <el-tab-pane label="历史" name="third">
        <SewersHistory></SewersHistory>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
@@ -77,10 +75,20 @@

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'

// 引入分析组件内容
import SewersAnalysis from '@components/panel/topicSearch/SewersSelect/SewersAnalysis'
import SewersHistory from '@components/panel/topicSearch/SewersSelect/SewersHistory'

export default {
  name: 'SewersSearch',
  components: {
    SewersAnalysis,
    SewersHistory
  },
  data () {
    return {
      activeName: 'first',
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
@@ -104,6 +112,9 @@
  },
  props: ['title'],
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    handlePipelineType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue

New file
@@ -0,0 +1,104 @@
<template>
  <div class="connectivity">
    <el-row>
      <el-button type="primary" size="mini">起始管段</el-button>
      <el-button type="primary" size="mini">结束管段</el-button>
      <el-button type="primary" size="mini">连通性分析</el-button>
      <el-button type="primary" size="mini">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <span class="clearfix">起始管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">结束管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">分析结果</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

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

<style lang="less" scoped>
</style>

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional.vue

New file
@@ -0,0 +1,66 @@
<template>
  <div class="connectivity">
    <el-row>
      <el-button type="primary" size="mini">绘制线段</el-button>
      <el-button type="primary" size="mini">截断面分析</el-button>
      <el-button type="primary" size="mini">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <span class="clearfix">管线查询结果</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">断面图</span>
      <div class="cross-section">
        <span>暂无数据</span>
      </div>
    </el-card>
  </div>
</template>

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

<style lang="less" scoped>
.cross-section {
  background: rgba(0, 16, 30, 0.5);
  border: 0.00521rem solid @color;
  box-shadow: 0 0 0.03rem @color;
  color: #ffffff;
  width: 100%;
  height: 50px;
  border-radius: 3px;
  text-align: center;
  line-height: 50px;
}
</style>

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow.vue

New file
@@ -0,0 +1,75 @@
<template>
  <div class="connectivity">
    <el-row>
      <el-button type="primary" size="mini">选择管段</el-button>
    </el-row>
    <el-card class="box-card">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">分析结果</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

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

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue

New file
@@ -0,0 +1,82 @@
<template>
  <div class="connectivity">
    <el-row>
      <span class="tube-span">爆管(相关开关)</span>
      <el-button type="primary" size="mini">选择管线</el-button>
      <el-button type="primary" size="mini">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <span class="clearfix">发生爆裂的管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">需要关闭的阀门</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

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

<style lang="less" scoped>
.tube-span {
  color: #ffffff !important;
  font-size: 14px;
  margin: 0 15px;
}
</style>

 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue

New file
@@ -0,0 +1,48 @@
<template>
  <div class="sewers-analysis-tab">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="连通性" name="first">
        <Connectivity></Connectivity>
      </el-tab-pane>
      <el-tab-pane label="爆管" name="second">
        <Tube></Tube>
      </el-tab-pane>
      <el-tab-pane label="流向" name="third">
        <Flow></Flow>
      </el-tab-pane>
      <el-tab-pane label="横断面" name="four">
        <CrossSectional></CrossSectional>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Connectivity from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity'
import Tube from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube'
import Flow from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow'
import CrossSectional from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional'

export default {
  name: 'SewersFirstTab',
  components: {
    Connectivity,
    Tube,
    Flow,
    CrossSectional
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
</style>

 src/components/panel/topicSearch/SewersSelect/SewersHistory.vue

New file
@@ -0,0 +1,143 @@
<template>
  <div class="sewers-search" v-if="judgeVisible">
    <div class="search-panel ">
      <el-form ref="form" :model="form" label-width="90px" class="search-form">
        <el-form-item v-for="(item,index) in Options" :key="index" :label="item.label+'：'" size="mini"
                      class="search-panel-item">
          <el-select style="width: 100%" v-model="form.pipelineType" @change="handlePipelineType"
                     :popper-class="'select-down'">
            <el-option
                v-for="(ite,index) in item.options"
                :key="index"
                :label="ite.label"
                :value="ite.value">
            </el-option>
          </el-select>
        </el-form-item>
        <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:286.22px">
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
      <div class="environmental-risk-list hover"><!-- v-for="(item,index) in list" :key="index" -->
        <i class="state"></i>
        <div>
          <h3>###炼化部</h3>
          <p>所属部门：<span>炼化部</span></p>
          <p>风险级别：<span>三级</span></p>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>

export default {
  name: 'SewersHistory',
  data () {
    return {
      judgeVisible: true,
      form: {
        keyword: '历史数据'
      },
      // 数据搜索之后，存储数据的
      searchDataDisplay: [],
      Options: [
        {
          value: '1',
          label: '管线类型',
          options: [{
            value: '1-1',
            layerName: '雨水管线',
            key: 'yushuiguanxian',
            label: '雨水管线'
          }],
          labelList: [{
            label: '雨水管线',
            key: 'yushuiguanxian'
          }, {
            label: '长度(m)',
            key: 'length'
          }]
        },
        {
          value: '2',
          label: '变更年份',
          options: [{
            value: '2-1',
            layerName: '2004',
            key: '2004',
            label: '2004年'
          }, {
            value: '2-2',
            layerName: '2005',
            key: '2005',
            label: '2005年'
          }, {
            value: '2-3',
            layerName: '2006',
            key: '2006',
            label: '2006年'
          }],
          labelList: [{
            label: '输送介质',
            key: 'mediumtype'
          }, {
            label: '长度(m)',
            key: 'length'
          }]
        },
        {
          value: '3',
          label: '变更类型',
          options: [{
            value: '3-1',
            layerName: '全部',
            key: 'type',
            label: '全部'
          }],
          labelList: [{
            label: '输送介质',
            key: 'mediumtype'
          }, {
            label: '长度(m)',
            key: 'length'
          }]
        }
      ]
    }
  },
  methods: {
    handlePipelineType (val) {
      console.log(val)
    },
    // 点击搜索实现数据的搜索展示
    handleSearch (data) {
      console.log(data)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/pipeChangesSearch.vue

New file
@@ -0,0 +1,157 @@
<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" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更年份：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="变更类型：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions2" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <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 hover" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1 <button style="float:right">附属设施</button></h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1</h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</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>
    <!--        <div class="monitor2" v-if="hbVisible">-->
    <!--          <env-protect-search></env-protect-search>-->
    <!--        </div>-->
    <!--        <div class="monitor2" v-if="pkVisible">-->
    <!--          <discharge-search></discharge-search>-->
    <!--        </div>-->
</template>

<script>
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'DischargeSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      form: {
        areaVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      areaTypeOptions: [
        { label: '生活污水管线', value: '1' },
        { label: '含盐管线', value: '2' },
        { label: '雨水管线', value: '3' },
        { label: '含油管线', value: '4' },
        { label: '事故水管线', value: '5' },
        { label: '含碱管线', value: '6' },
        { label: '循环水管线', value: '7' },
        { label: '净化水管线', value: '8' }
      ],
      areaTypeOptions1: [
        { label: '2016', value: '1' },
        { label: '2017', value: '2' },
        { label: '2018', value: '3' },
        { label: '2019', value: '4' },
        { label: '2020', value: '5' },
        { label: '2016', value: '6' }
      ],
      areaTypeOptions2: [
        { label: '全部', value: '1' },
        { label: '在用', value: '2' },
        { label: '停用', value: '3' },
        { label: '废弃', value: '4' },
        { label: '拆除', value: '5' },
        { label: '其他', value: '6' }
      ]
    }
  },
  props: ['title'],
  methods: {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
      }
      console.log(param)
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName(this.form.query.layerName)
      wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        this.list = res.data.features
      }
    },
    handleLocation (val) {
      console.log(val)
      const bound = this.L.geoJSON([val], {}).getBounds()
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/panel/topicSearch/pipeInformationSearch.vue

New file
@@ -0,0 +1,139 @@
<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" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="管线信息：" size="mini" class="search-panel-item">
                    <el-select style="width: 100%"  v-model="form.areaVal" @change="areaType"  :popper-class="'select-down'">
                        <el-option v-for="(item,index) in areaTypeOptions1" :key="index" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <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 hover" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1 <button style="float:right">附属设施</button></h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</span></p>
                </div>
            </div>
            <div class="environmental-risk-list" ><!-- v-for="(item,index) in list" :key="index" -->
                <i class="state"></i>
                <div>
                    <h3>管线名称1</h3>
                    <p>管线长度：<span>751米</span></p>
                    <p>投运年限：<span style="display: inline-block;margin-right: 10px">5年</span> 介质：<span>生活污水</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>
    <!--        <div class="monitor2" v-if="hbVisible">-->
    <!--          <env-protect-search></env-protect-search>-->
    <!--        </div>-->
    <!--        <div class="monitor2" v-if="pkVisible">-->
    <!--          <discharge-search></discharge-search>-->
    <!--        </div>-->
</template>

<script>
import { PipelineTypeOptions } from '@/conf/layers/LayerSewers'

import WfsHelper from '@components/helpers/WfsHelper'
import AjaxUtils from '@utils/AjaxUtils'
export default {
  name: 'DischargeSearch',
  data () {
    return {
      gdVisible: true,
      list: [],
      labelList: PipelineTypeOptions[0].labelList,
      total: 0,
      form: {
        areaVal: '',
        type: ''
      },
      // pageSize: 10,
      // current: 1,
      isWaybillHover: true,
      isRouteHover: false,
      areaTypeOptions: [
        { label: '管线本体', value: '1' }, { label: '附属设施', value: '2' }, { label: '环保设施', value: '3' }
      ],
      areaTypeOptions1: [
        { label: '全部管线', value: '1' },
        { label: '生活污水管线', value: '1' },
        { label: '含盐管线', value: '1' },
        { label: '雨水管线', value: '1' },
        { label: '含油管线', value: '1' },
        { label: '事故水管线', value: '1' },
        { label: '含碱管线', value: '1' },
        { label: '循环水管线', value: '1' },
        { label: '净化水管线', value: '1' }
      ]
    }
  },
  props: ['title'],
  methods: {
    // 区域筛选
    areaType (val) {
      this.pipelineTypeOptions.forEach((itm) => {
        if (val === itm.value) {

        }
      })
    },
    async handleSearch () {
      const param = {
        pipelineType: this.form.pipelineType,
        dataType: this.form.dataType
      }
      console.log(param)
      var wfsHelper = new WfsHelper()
      wfsHelper.addTypeName(this.form.query.layerName)
      wfsHelper.addLike(this.form.query.key, this.form.keyword)
      // const _this = this
      const res = await AjaxUtils.GetDataAsynByUrl(wfsHelper.getUrl(), {})
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        this.list = res.data.features
      }
    },
    handleLocation (val) {
      console.log(val)
      const bound = this.L.geoJSON([val], {}).getBounds()
      var layer = window.serviceLayerHelper.getByLayerId(val.id)
      layer && layer.openPopup()
      this.$store.state.map.map.flyToBounds(bound)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

 src/components/table/components/AirQuality.vue

@@ -1,55 +1,23 @@
<template>
    <div class="AirQuality">
        <el-table
                class="tableBox"
                :data="tableData"
                :header-cell-style="tableHeaderColor"
                :cell-style="rowClass"
                border
        >
            <el-table-column
                    width="30px"
                    label=""
            >
        <el-table class="tableBox" :data="tableData" :header-cell-style="tableHeaderColor" :cell-style="rowClass" border>
            <el-table-column width="30px" label="">
                <template>
                    <i class="el-icon-caret-right"></i>
                    <span style="margin-left: 10px"></span>
                </template>
            </el-table-column>
            <el-table-column
                    label="序号"
                    width="60px"
                    type="index">
            </el-table-column>
            <el-table-column
                    prop="UserName"
                    label="企业名称"
                    width="120px">
            </el-table-column>
            <el-table-column
                    prop="AQI"
                    label="AQI"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="MajorPollutant"
                    label="首要污染物 "
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="AirQualityCategory"
                    label="空气质量类别"
                    width="200px">
            </el-table-column>
            <el-table-column
                    prop="RegionalColor"
                    label="区域颜色"
                    width="200px">
              <template slot-scope="scope">
                <div v-if="scope.row.RegionalColor==='四级红色'" style="background-color: red">{{scope.row.RegionalColor}}</div>
                <div v-else-if="scope.row.RegionalColor==='三级橙色'" style="background-color: orange">{{scope.row.RegionalColor}}</div>
                <div v-else style="background-color: green">{{scope.row.RegionalColor}}</div>
              </template>
            <el-table-column label="序号" width="60px" type="index"></el-table-column>
            <el-table-column prop="UserName" label="企业名称"></el-table-column>
            <el-table-column prop="AQI" label="AQI"></el-table-column>
            <el-table-column prop="MajorPollutant" label="首要污染物 "></el-table-column>
            <el-table-column prop="AirQualityCategory" label="空气质量类别"></el-table-column>
            <el-table-column prop="RegionalColor" label="区域颜色">
                  <template slot-scope="scope">
                        <div v-if="scope.row.RegionalColor==='四级红色'" style="background-color: red">{{scope.row.RegionalColor}}</div>
                        <div v-else-if="scope.row.RegionalColor==='三级橙色'" style="background-color: orange">{{scope.row.RegionalColor}}</div>
                        <div v-else style="background-color: green">{{scope.row.RegionalColor}}</div>
                  </template>
            </el-table-column>
        </el-table>
    </div>
@@ -89,11 +57,11 @@
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
      // return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    }
  }
}

 src/components/table/components/IndexStatistics.vue

@@ -1,171 +1,60 @@
<template>
    <el-tabs v-model="activeName">
        <el-tab-pane label="指标统计" name="first"><el-table
                :data="tableData">
            <el-table-column
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="单位名称">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="工业取水量(m3)">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="外排废水量(m3)">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="工业废气排放量(m3)">
            </el-table-column>
            <el-table-column label="COD(t)">
                    <el-table-column
                            prop="province"
                            label="累计产生量">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="当月产生量">
                    </el-table-column>
            </el-table-column>
            <el-table-column label="氨氮(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
        <el-tab-pane label="指标统计" name="first">
            <el-table :data="tableData" >
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="date" label="单位名称"></el-table-column>
                <el-table-column prop="province" label="工业取水量(m3)"></el-table-column>
                <el-table-column prop="province" label="外排废水量(m3)"></el-table-column>
                <el-table-column prop="province" label="工业废气排放量(m3)"></el-table-column>
                <el-table-column label="COD(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                <el-table-column label="氨氮(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="二氧化硫(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                <el-table-column label="二氧化硫(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                <el-table-column label="氮氧化物(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="氮氧化物(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                <el-table-column label="VOCs(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                <el-table-column label="固废(t)">
                    <el-table-column prop="province" label="累计产生量"></el-table-column>
                    <el-table-column prop="city" label="当月产生量"></el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="VOCs(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
            </el-table-column>
            <el-table-column label="固废(t)">
                <el-table-column
                        prop="province"
                        label="累计产生量">
                </el-table-column>
                <el-table-column
                        prop="city"
                        label="当月产生量">
                </el-table-column>
            </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table :data="tableData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="企业名称"></el-table-column>
            <el-table-column prop="name" label="废水达标率"></el-table-column>
            <el-table-column prop="province" label="名次"></el-table-column>
            <el-table-column prop="city" label="废气达标率"></el-table-column>
            <el-table-column prop="address" label="名次"></el-table-column>
            <el-table-column prop="zip" label="传输率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
            <el-table-column prop="zip" label="设备完好率"></el-table-column>
            <el-table-column prop="zip" label="排名"></el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="企业排名" name="second"><el-table
                :data="tableData"
                style="width: 100%"
                max-height="250">
            <el-table-column
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="企业名称">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="废水达标率">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="废气达标率">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="传输率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="排名">
            </el-table-column>
        </el-table></el-tab-pane>
        <el-tab-pane label="排放点排名" name="third"><el-table
                :data="tableData">
            <el-table-column
                    type="index"
                    label="序号">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="排放点名称">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="排放类型">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="达标率">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="传输率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="设备完好率">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="名次">
            </el-table-column>
        <el-tab-pane label="排放点排名" name="third"><el-table :data="tableData">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="date" label="排放点名称"></el-table-column>
            <el-table-column prop="name" label="排放类型"></el-table-column>
            <el-table-column prop="province" label="达标率"></el-table-column>
            <el-table-column prop="city" label="名次"></el-table-column>
            <el-table-column prop="address" label="传输率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
            <el-table-column prop="zip" label="设备完好率"></el-table-column>
            <el-table-column prop="zip" label="名次"></el-table-column>
        </el-table></el-tab-pane>
    </el-tabs>


 src/components/table/components/SolidWaste.vue

@@ -18,63 +18,33 @@
              placement="bottom"
              trigger="click"
              :disabled="!isShowIcon"
              popper-class="popovers"
          >
              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="45px"
          type="index">
      <el-table-column label="序号" width="45px" type="index">
      </el-table-column>
      <el-table-column
          prop="UserName"
          label="企业名称"
          width="120px">
      <el-table-column prop="UserName" label="企业名称" width="120px">
        <template slot-scope="scope">
          <div v-if="scope.row.UserName==='集团名称'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else-if="scope.row.UserName==='天津石化'" style="color: #00ffff">{{scope.row.UserName}}</div>
          <div v-else >{{scope.row.UserName}}</div>
        </template>
      </el-table-column>
      <el-table-column
          prop="WasteWaters"
          label="外排废水量（m³）"
          width="100px">
      </el-table-column>
      <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="70px">
        </el-table-column>
        <el-table-column
            prop="MonthOutPut"
            label="当月生产量"
            width="70px">
        </el-table-column>
        <el-table-column prop="AddOutPut" label="累计产生量" width="70px"></el-table-column>
        <el-table-column prop="MonthOutPut" label="当月生产量" width="70px"></el-table-column>
      </el-table-column>
      <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 prop="NH4NPut" label="累计产生量"></el-table-column>
        <el-table-column prop="NH4NMonth" label="当月生产量"></el-table-column>
      </el-table-column>
      <el-table-column label="排放口检测统计状态">
        <el-table-column
            prop="normal"
            label="正常"
            width="60px">
        <el-table-column prop="normal" label="正常" width="60px">
          <template slot-scope="{row,$index}">
            <u v-if="$index!=2" >{{row.normal}}</u>
            <el-popover v-else
@@ -92,25 +62,10 @@
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
            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">
        <el-table-column 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
@@ -201,11 +156,11 @@
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
      // return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {

 src/components/table/components/WasteWater.vue

@@ -3,9 +3,6 @@
           <el-table
                   class="tableBox"
                   :data="tableData"
                   style="width: 100%"
                   :header-cell-style="tableHeaderColor"
                   :cell-style="rowClass"
                   @cell-click="handle"
           >
               <el-table-column
@@ -41,11 +38,7 @@
                   <div v-else >{{scope.row.UserName}}</div>
                 </template>
               </el-table-column>
               <el-table-column
                       prop="WasteWaters"
                       label="外排废水量（m³）"
                       width="100px">
               </el-table-column>
               <el-table-column prop="WasteWaters" label="外排废水量（m³）"></el-table-column>
               <el-table-column label="COD  (t)">
                   <el-table-column
                           prop="AddOutPut"
@@ -201,11 +194,11 @@
  },
  methods: {
    tableHeaderColor ({ row, column, owIndex, columnIndex }) {
      return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    //  return 'background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;font-wight:500;font-size:12px;text-align:center;height:0px'
    },
    // 表头样式设置
    rowClass  () {
      return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
      // return 'text-align: center;background-color: rgba(26, 73, 81, 0.901960784313726);color:#fff;width:64px'
    },
    // 获取点击的表格
    handle (row, column, event, cell) {
@@ -228,17 +221,6 @@
}
</script>

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

</style>

 src/components/table/components/tabHandover.vue

@@ -1,5 +1,5 @@
<template>
  <el-tabs  v-model="activeName" type="border-card">
  <el-tabs  v-model="activeName">
    <el-tab-pane label="废水" name="first">
      <waste-water></waste-water>
    </el-tab-pane>

 src/components/table/summarySheets.vue

@@ -27,13 +27,13 @@
            </el-tooltip>
        </div>
    </transition>
    <Dialog ref="summarySheets" title="企业预警报警分类统计" >
    <Dialog ref="summarySheets" title="报表" >
      <tab-handover></tab-handover>
    </Dialog>
    <Dialog ref="warnDialog" title="企业预警报警分类统计" >
    <Dialog ref="warnDialog" title="预报警" >
      <warn></warn>
    </Dialog>
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计">
    <Dialog ref="indexStatisticsDialog" title="企业指标分类统计" >
      <index-statistics></index-statistics>
    </Dialog>
  </div>

 src/conf/Topic.js

@@ -60,4 +60,18 @@
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '管道变更',
  id: 8,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}, {
  name: '管道信息',
  id: 9,
  checked: false,
  isShow: true,
  icon: '/assets/images/menu/special.png',
  comp: ''
}]

 src/conf/layers/LayerArea.js

@@ -13,24 +13,21 @@
      name: '公司',
      sname: '公司', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
      code: 'sewersAreaMt',
      name: '码头',
      sname: '码头',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
      code: 'sewersAreaZz',
      name: '装置区',
      sname: '装置区',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]
}

 src/conf/layers/LayerBasin.js

@@ -14,32 +14,28 @@
      name: '长江流域',
      sname: '长江流域', // 表名
      checked: true, // 默认选中状态
      url: WFS_URL + '?TYPENAME=公司',
      minZoom: 10
      url: WFS_URL + '?TYPENAME=公司'
    },
    {
      code: 'basinHh',
      name: '黄河流域',
      sname: '黄河流域',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=码头',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=码头'
    },
    {
      code: 'basinBh',
      name: '渤海流域',
      sname: '渤海流域',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=装置区'
    },
    {
      code: 'basinQt',
      name: '其他',
      sname: '其他',
      checked: true, // 默认选中状态
      wfs: WFS_URL + '?TYPENAME=装置区',
      minZoom: 10
      wfs: WFS_URL + '?TYPENAME=装置区'
    }
  ]
}

 src/conf/layers/LayerFsss.js

@@ -2,18 +2,26 @@
 * 区域
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine2/wfs'
export const LayerFsss = {
  code: 'sewersFsss',
  name: '附属设施',
  checked: false, // 默认选中状态
  layers: [
    {
      code: 'pipeSection',
      name: '管段',
      sname: '管段',
      checked: false,
      minZoom: 15,
      wfs: WFS_URL + '?TYPENAME=管段'
    },
    {
      code: 'fourlink',
      name: '四通',
      sname: '四通',
      checked: true,
      minZoom: 10,
      minZoom: 15,
      wfs: WFS_URL + '?TYPENAME=四通',
      icon: 'sewers/四通.png'
    },
@@ -22,7 +30,7 @@
      name: '三通',
      sname: '三通',
      checked: false,
      minZoom: 10,
      minZoom: 15,
      wfs: WFS_URL + '?TYPENAME=三通',
      icon: 'sewers/三通.png'
    },

 src/conf/layers/LayerHbss.js

@@ -2,7 +2,7 @@
 * 区域
 */
const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine2/wfs'
export const LayerHbss = {
  code: 'sewersHbss',
  name: '环保设施',

 src/conf/layers/LayerPipeLines.js

@@ -5,7 +5,7 @@
import { LayerFsss } from './LayerFsss'

const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine/wfs'
const WFS_URL = APP_GIS_HOST_2 + '/server/ogcserver/PipeLine2/wfs'

export const LayerPipeLines = {
  code: 'sewersPipeLines',

 src/conf/layers/LayerSewers.js

@@ -1,3 +1,8 @@
/**
 * todo 准备删除此文件！！！！
 * @type {string}
 */

const APP_GIS_HOST_2 = 'http://xearth.cn:8088'
export const LayerSewersPoint = [
  {

 src/styles/theme-dark/el-ui/tabs.less

@@ -1,12 +1,15 @@
.el-tabs{}
.el-tabs{

}
.el-table td, .el-table th{
  padding: 0;
}
.el-tabs__header{
  border-bottom: 1px solid @background-color-split !important;
  padding: 0;
  position: relative;
  margin: 0 0 15px;
}

.el-tabs__active-bar{
  position: absolute;
  bottom: 0;

 src/views/MapTemplate.vue

@@ -91,7 +91,7 @@
        map: this.map
      })
      layerFactory.init(this.$store.state.map.serviceLayers.LayerSewersLine)
      layerFactory.init(this.$store.state.map.serviceLayers.layerSewersPoint)
      layerFactory.initEvent(this.$store.state.map.serviceLayers.LayerSewersLine)
      window.layerFactory = layerFactory

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

 src/views/popup/Dialog.vue

@@ -2,7 +2,6 @@
    <el-dialog  v-dialogDrag
            :title="title"
            :visible.sync="centerDialogVisible"
            width="30%"
            :modal="false"
            :close-on-click-modal="false"
             @close='closeDialog'