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

chenyabin

2021-04-19 c7a549da66df42d4ec5c78ddf2cc138772616941

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

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -132,7 +132,7 @@
  }

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

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

@@ -4,17 +4,11 @@
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <ul class="tab" v-show="this.$attrs.value === 'feiqi'">
        <ul class="tab">
            <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-show="this.$attrs.value !== 'feiqi'">
            <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>
@@ -34,22 +28,13 @@
import EChartsDate from './echarts/EChartsDate'
import EChartsTable from './echarts/EChartsTable'

import EChartsRealWasteWater from './echarts/EChartsRealWasteWater'
import EChartsHourWasteWater from './echarts/EChartsHourWasteWater'
import EChartsDateWasteWater from './echarts/EChartsDateWasteWater'
import EChartsWasteWaterTable from './echarts/EChartsWasteWaterTable'

export default {
  name: 'PublicChart',
  components: {
    EChartsHour,
    EChartsDate,
    ECharts,
    EChartsTable,
    EChartsRealWasteWater,
    EChartsHourWasteWater,
    EChartsDateWasteWater,
    EChartsWasteWaterTable
    EChartsTable
  },
  data () {
    return {

 src/components/BaseNav/PublicBounced/common/PublicDataStandard.vue

New file
@@ -0,0 +1,45 @@
<template>
  <div class="animation">
    <div class="information">
<!--      <span class="grid-content">氮氧化物 : <i style="color: #e8ee0b">29.93</i>  标准 : <i style="color: #fff">100</i></span>-->
<!--      <span class="grid-content">二氧化硫 : <i style="color: #e8ee0b">17.34</i> 标准 : <i style="color: #fff">50</i></span>-->
<!--      <span class="grid-content">烟尘 : <i style="color: #e8ee0b">6.93</i> 标准 : <i style="color: #fff">30</i></span>-->
<!--      <span class="grid-content">废气流量 : <i style="color: #e8ee0b">120343.18</i></span>-->
      <span class="grid-content" v-for="item in dataStandard" :key="item.current.name">{{ item.current.name }} :
        <i style="color: #e8ee0b">{{ item.current.val }}</i>  {{ item.standard.name ?item.standard.name+':':'' }} <i style="color: #fff">{{ item.standard.val }}</i></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublicDataStandard',
  props: {
    dataStandard: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style lang="less" scoped>
.animation {
  .information {
    padding: 0.02rem 0.04rem;

    .grid-content {
      font-size: 0.08rem;
      background-color: #2e4967;
      text-align: center;
      border-radius: 0.01rem;
      height: 0.15rem;
      line-height: 0.15rem;
      margin-right: 0.04rem;
      padding: 0 0.04rem
    }
  }
}
</style>

 src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue

@@ -1,14 +1,7 @@
<!--  日数据  -->
<template>
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <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>
<public-data-standard :dataStandard = "dataStandard"></public-data-standard>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
@@ -41,30 +34,32 @@
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="main">
      </div>
    </div>
    <!-- 明细弹框 -->
    <el-dialog :visible.sync="dialogVisible"
               :append-to-body="true"
               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"
               width="68%"
               center
               v-dialogDrag
    >
      <div class="el-dialog-div" style="height: 500px">
        <public-detailed-list v-bind="$attrs"></public-detailed-list>
      </div>
    </el-dialog>
<!--    &lt;!&ndash; 明细弹框 &ndash;&gt;-->
<!--    <el-dialog :visible.sync="dialogVisible"-->
<!--               :append-to-body="true"-->
<!--               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
<!--               width="68%"-->
<!--               center-->
<!--               v-dialogDrag-->
<!--    >-->
<!--      <div class="el-dialog-div" style="height: 500px">-->
<!--        <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
<!--      </div>-->
<!--    </el-dialog>-->
  </div>
</template>

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

export default {
  name: 'ECharts',
  components: {
    PublicDetailedList
    PublicDataStandard
    // PublicDetailedList
  },
  data () {
    return {
@@ -78,6 +73,23 @@
        timeEnd: ''
      },
      info: this.series,
      dataStandard: [{
        current: { name: '氮氧化物1', val: 29.93 },
        standard: { name: '标准', val: 100 }
      },
      {
        current: { name: '二氧化硫', val: 17.34 },
        standard: { name: '标准', val: 50 }
      },
      {
        current: { name: '烟尘', val: 6.93 },
        standard: { name: '标准', val: 30 }
      },
      {
        current: { name: '废气流量', val: 120343.18 },
        standard: { name: '', val: null }
      }
      ],
      JsonDayCharts: {
        id: 'mychartsDay',
        title: '加热炉烟气',
@@ -695,22 +707,6 @@
</script>

<style scoped lang="less">

.animation {
  .infomation {
    padding: 0.02rem 0.04rem;
    .grid-content {
      font-size: 0.08rem;
      background-color: #2e4967;
      text-align: center;
      border-radius: 0.01rem;
      height: 0.15rem;
      line-height: 0.15rem;
      margin-right: 0.04rem;
      padding:0 0.04rem
    }
  }
}
    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;

 src/components/BaseNav/PublicBounced/common/echarts/EChartsHour.vue

@@ -1,14 +1,7 @@
<!--  小时数据  -->
<template>
    <div id="Tab">
        <div class="infomation">
          <div>
            <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>
      <public-data-standard :dataStandard = "dataStandard"></public-data-standard>
        <div class="form-echrts">
            <div class="from-search">
                <div class="pickerMon">
@@ -48,9 +41,11 @@
// import mapApi from '@/api/mapApi'
import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import dayjs from 'dayjs'
import PublicDataStandard from '@components/BaseNav/PublicBounced/common/PublicDataStandard'
export default {
  name: 'ECharts',
  components: {
    PublicDataStandard,
    PublicDetailedList
  },
  data () {
@@ -64,6 +59,23 @@
        timeEnd: null
      },
      myChart: null,
      dataStandard: [{
        current: { name: '氮氧化物1', val: 29.93 },
        standard: { name: '标准', val: 100 }
      },
      {
        current: { name: '二氧化硫', val: 17.34 },
        standard: { name: '标准', val: 50 }
      },
      {
        current: { name: '烟尘', val: 6.93 },
        standard: { name: '标准', val: 30 }
      },
      {
        current: { name: '废气流量', val: 120343.18 },
        standard: { name: '', val: null }
      }
      ],
      JsonCtarts: {
        id: 'mychart',
        title: '加热炉烟气',
@@ -926,21 +938,6 @@
</script>

<style scoped lang="less">
    .animation {
        .infomation {
            padding: 0.02rem 0.04rem;
            .grid-content {
                font-size: 0.08rem;
                background-color: #2e4967;
                text-align: center;
                border-radius: 0.01rem;
                height: 0.15rem;
                line-height: 0.15rem;
                margin-right: 0.04rem;
                padding:0 0.04rem
            }
        }
    }
    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;

 src/components/BaseNav/PublicBounced/common/echarts/Echarts.vue

@@ -36,9 +36,9 @@
        </div>
        <div class="detailbtn"  @click="onSubmit">查询</div>
      </div>
        <div  style="width:5rem;height:1.5rem;" ref="echarts"> </div>
      </div>
      <div  style="width:5rem;height:1.5rem;" ref="echarts"> </div>
    </div>
  </div>
</template>

<script>
@@ -1010,6 +1010,7 @@
        this.IntervalEXHRealTimeDate()
      }, 15000)
    }

  }
}
</script>

 src/components/BaseNav/PublicVideo.vue

@@ -1,17 +1,14 @@
<template>
  <div class="win">
    <!-- 四个角的边框效果 -->
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <!--      <div class="main-video">-->
  <div class="public-video">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="video-content">
      <video controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
      </video>
      <!--      </div>-->
    </div>
  </div>
</template>
@@ -23,58 +20,55 @@
</script>

<style scoped lang="less">
.win {

.public-video {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
  //height: 2rem;

}
  .video-content {
    border: 1px solid #396d83;
    width: 2.5rem;
    height: 2.5rem;

.main {
  border: 1px solid #396d83;
  width: 2.5rem;
  height: 2.5rem;
  video {
    width: 100%;
    height: 100%;
    outline: none;
    video {
      width: 100%;
      height: 100%;
      outline: none;
    }
  }
}

.border_corner {
  z-index: 999;
.public-video span {
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
}

.public-video span:nth-child(1) {
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #47d5ea;
  left: -1px;
  top: -1px;
  border-width: 1px 0 0 1px;
}

.border_corner_left_top {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
.public-video span:nth-child(2) {
  position: absolute;
  right: -1px;
  top: -1px;
  border-width: 1px 1px 0 0;
}

.border_corner_right_top {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
.public-video span:nth-child(3) {
  position: absolute;
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

.border_corner_left_bottom {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.border_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
.public-video span:nth-child(4) {
  position: absolute;
  left: -1px;
  bottom: -1px;
  border-width: 0 0 1px 1px;
}
</style>

 src/components/BaseNav/WasteGas/DayData.vue

@@ -3,7 +3,7 @@
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : 100</span>
        <span class="grid-content">氮氧化物 :<i style="color: #e8ee0b">29.93</i>  标准 : <i style="color: #e8ee0b">100</i> </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>

 src/components/BaseNav/WasteGas/Index.vue

File was deleted

 src/components/BaseNav/WasteGas/PublicTabs.vue

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

<script>

// import mapApi from '@/api/mapApi'

export default {
  name: 'GasTable',
  props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'],
  props: ['storagePlaceId'],
  data () {
    return {
      tabList: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.getTabsData()
    })
  },
  methods: {
    // async getTabsData () {
    //   // 基本信息 和 详细信息 展示数据所需参数
    //   const dataValue = {
    //     StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
    //   }
    //   // 基本信息 tabs
    //   const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
    // }
    async refsDataTabs (data) {
      console.log(data)
      // const dataValue = {
      //   StoragePlaceId: data
      // }
      // const resultBasic = await mapApi.getWasteGasDetails(dataValue)
      // console.log(resultBasic)
    }
  }
}
</script>

 src/components/BaseNav/WasteGas/RealTimeEcharts.vue

@@ -2,9 +2,9 @@
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <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">29.93</i>  标准 : <i  style="color: #fff">100</i></span>
        <span class="grid-content">二氧化硫 : <i  style="color: #e8ee0b">17.34s</i> 标准 : <i  style="color: #fff">50</i></span>
        <span class="grid-content">烟尘 : <i  style="color: #e8ee0b">6.93</i> 标准 : <i  style="color: #fff">30</i></span>
        <span class="grid-content">废气流量 : <i  style="color: #e8ee0b">5.23</i></span>
      </div>
    </div>

 src/components/BaseNav/WasteGas/WasteGasIndex.vue

New file
@@ -0,0 +1,99 @@
<template>
  <public-sector>
    <template v-slot:tabs>
      <public-tabs ref='refsTabsData' :storagePlaceId="storagePlaceId"></public-tabs>
    </template>
    <template v-slot:table>
      <public-echarts ref="refsTableData"></public-echarts>
    </template>
    <template v-slot:video>
      <public-video></public-video>
    </template>
  </public-sector>
</template>

<script>

import PublicTabs from '@components/BaseNav/WasteGas/PublicTabs'
import PublicEcharts from '@components/BaseNav/PublicBounced/common/PublicChart'
import PublicVideo from '@components/BaseNav/PublicVideo'
import PublicSector from '@components/BaseNav/PublicSector'

export default {
  name: 'WasteGasIndex',
  props: ['storagePlaceId'],
  components: {
    PublicSector,
    PublicTabs,
    PublicEcharts,
    PublicVideo
  },
  mounted () {
    console.log(this.storagePlaceId)
    this.$nextTick(() => {
      this.refsData()
    })
  },
  data () {
    return {}
  },
  methods: {
    refsData () {
      const data = this.storagePlaceId
      this.$refs.refsTabsData.refsDataTabs(data)
      this.$refs.refsTableData.refsDataTable(data)
    }
  }
}
</script>

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

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

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

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

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

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

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

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

 src/components/BaseNav/WasteGas/flueGas.js

File was deleted

 src/components/BaseNav/WasteSolid/PublicTable.vue

@@ -5,7 +5,7 @@
    <span></span>
    <span></span>
    <div class="main-table">
      <el-table :data="listData" style="width: 100%" height="325px" :row-class-name="tableRowClassName">
      <el-table :data="listData" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
        <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                         :label="item.label" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
@@ -56,7 +56,7 @@
  },
  mounted () {
    this.$nextTick(() => {
      this.listData.push({}, {}, {}, {}, {}, {})
      // this.listData.push(this.listData2, {}, {}, {}, {}, {})
    })
  },
  methods: {
@@ -66,7 +66,6 @@
      }
      const result = await mapApi.getSolidWasteDetail(StoragePlaceId)
      this.listData = result.Result.DataInfo[0]
      console.log(this.listData)
    },
    // 隔行颜色设置
    tableRowClassName ({
@@ -85,9 +84,6 @@
</script>

<style lang="less" scoped>
.main-table {
  border: 1px #02a6b5 solid;
}

/deep/ .el-table td {
  border-bottom: none !important;
@@ -98,8 +94,8 @@
}

/deep/ .el-table td {
  height: 45px !important;
  line-height: 45px !important;
  height: 30px !important;
  line-height: 30px !important;
}

/deep/ .el-table tbody tr:hover > td {
@@ -109,16 +105,22 @@
.slotChildTable {
  position: relative;
  background: rgba(33, 41, 69, 0.9);
  //border: 1px solid red;

  .main-table {
    border: 1px #396d83 solid;
  }
}

.slotChildTable span {
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
}

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

@@ -126,9 +128,6 @@
  position: absolute;
  right: -1px;
  top: -1px;
  padding: 10px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 1px 1px 0 0;
}

@@ -136,9 +135,6 @@
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 10px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 1px 1px 0;
}

@@ -146,9 +142,6 @@
  position: absolute;
  left: -1px;
  bottom: -1px;
  padding: 10px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 1px 1px;
}


 src/components/BaseNav/WasteSolid/PublicTabs.vue

@@ -1,22 +1,18 @@
<template>
  <div class="win">
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-matter">
        <div>
          <ul v-for="(item,index) in setSolidWaste" :key="index">
            <li>场所名称:{{ item.StoragePlaceName }}</li>
            <li>贮存能力:{{ item.StoragePlaceName }}</li>
            <li>剩余贮存能力:{{ item.StorageQty }}</li>
            <li>占地面积(㎡):{{ item.SurplusFloorArea }}</li>
            <li>最近贮存日期:{{ item.DesignFloorArea }}</li>
            <li class="lastli"></li>
          </ul>
        </div>
      </div>
  <div class="slotChildTabs">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <div class="tabs-content">
      <ul v-for="(item,index) in setSolidWaste" :key="index">
        <li>场所名称:{{ item.StoragePlaceName }}</li>
        <li>贮存能力:{{ item.StoragePlaceName }}</li>
        <li>剩余贮存能力:{{ item.StorageQty }}</li>
        <li>占地面积(㎡):{{ item.SurplusFloorArea }}</li>
        <li>最近贮存日期:{{ item.DesignFloorArea }}</li>
        <li class="lastli"></li>
      </ul>
    </div>
  </div>
</template>
@@ -33,7 +29,7 @@
  },
  mounted () {
    this.$nextTick(() => {
      this.refsDataTabs()
      // this.refsDataTabs()
    })
  },
  methods: {
@@ -50,33 +46,27 @@

<style scoped lang="less">

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

.main {

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

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

      li {
        margin-bottom: 0.04rem;
        text-align: center;
        min-width: 31%;
        min-width: 30%;
        background-color: #243a55;
        color: #00d0f9;
        border-radius: 0.02rem;
@@ -92,40 +82,43 @@
  }
}

.border_corner {
  z-index: 999;
.slotChildTabs span:nth-child(1) {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #47d5ea;
  left: -1px;
  top: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 1px 0 0 1px;
}

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

.border_corner_right_top {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
.slotChildTabs span:nth-child(3) {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 1px 1px 0;
}

.border_corner_left_bottom {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.border_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
.slotChildTabs span:nth-child(4) {
  position: absolute;
  left: -1px;
  bottom: -1px;
  padding: 6px;
  border-style: solid;
  border-color: #02a6b5;
  border-width: 0 0 1px 1px;
}
</style>

 src/components/BaseNav/WasteSolid/WasteSolidIndex.vue

@@ -34,30 +34,13 @@
    })
  },
  data () {
    return {
      displayContentTabs: [{
        StoragePlaceId: 0,
        StoragePlaceName: '取水单元干泥暂存库',
        DesignFloorArea: 0.024,
        StorageQty: 0.016,
        SurplusFloorArea: 0.018,
        StorageDate: '2021-01-17'
      }]
    }
    return {}
  },
  methods: {
    refsData () {
      const data = this.storagePlaceId
      this.$refs.refsTabsData.refsDataTabs(data)
      this.$refs.refsTableData.refsDataTable(data)
    },
    // 固废相关信息设置
    setData (title, dataBasic, dataDetailed, value) {
      this.flag = true
      this.value = value
      this.displayContentTitle = title
      this.displayContentTab = dataBasic[0]
      this.displayContentTable = dataDetailed[0]
    }
  }
}
@@ -97,7 +80,7 @@
  }

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

 src/components/LayerController/LayerController.vue

@@ -283,7 +283,7 @@
    color:@color;
  }
  .legend-content{
    width: 1.79167rem;
    //width: 1.79167rem;
  }
}


 src/components/LayerController/logic/PipeLineAnimal.js

@@ -11,20 +11,22 @@
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]
      const code = config.code
      const styles = config.styles
      // window.layerFactory.show(config)
      const layer = window.layerFactory.layers[code]
      if (layer) {
        if (layer.eachLayer) {
          layer.eachLayer(function (layer) {
            var newStyles = Object.assign(STYLES, styles)
            layer.setStyle({
              fill: STYLES.FILL,
              weight: STYLES.WEIGHT,
              fillColor: STYLES.FILL_COLOR,
              color: STYLES.COLOR,
              fillOpacity: STYLES.FILL_OPACITY,
              opacity: STYLES.OPACITY,
              dashArray: STYLES.DASH_ARRAY,
              dashSpeed: STYLES.DASH_SPPED
              fill: newStyles.FILL,
              weight: newStyles.WEIGHT,
              fillColor: newStyles.FILL_COLOR,
              color: newStyles.COLOR,
              fillOpacity: newStyles.FILL_OPACITY,
              opacity: newStyles.OPACITY,
              dashArray: newStyles.DASH_ARRAY,
              dashSpeed: newStyles.DASH_SPPED
            })
          })
          // 重新添加到地图上，动画才有效果
@@ -33,33 +35,9 @@
        }
      }
    }
    /* window.$layer.iframe({
      content: {
        content: publicBounced,
        parent: this,
        data: {
          info: this.info,
          fn: () => {
            alert(1)
          }
        }
      },
      area: ['901px', '101px'],
      title: '这是一个标题这是一个标题这是一个标题这是一个标题',
      maxmin: true,
      shade: false,
      shadeClose: false,
      scrollbar: false,
      resize: true,
      btn: ['a', 'b'],
      cancel: () => {
        alert(2110)
      }
    }) */
  }

  this.destory = () => {
    console.log('destory!!!')
    const layers = LayerPipeLines.layers
    for (var i = 0; i < layers.length; i++) {
      const config = layers[i]

 src/components/LayerController/logic/WasteGas.js

@@ -11,7 +11,8 @@
// const ImagBright = '/assets/images/map/exhaust/fq_bright_green.png'

const mapApi = require('../../../api/mapApi').default
const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default
// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default
const WasteGasIndex = require('../../BaseNav/WasteGas/WasteGasIndex').default
// const WasteGasChats = require('./WasteGasChats').default
module.exports = function () {
  /**
@@ -61,34 +62,48 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.test.StoragePlaceId
    }
    console.log(dataValue)
    const GasOnlinedata = {
      onLineMonEmissPointId: '23',
      monItemId: '28,31',
      beginTime: '2020-04-06 15:13:20',
      endTime: '2020-04-07 15:13:20',
      dataType: '1'
    }
    const GasManualData = {
      companyId: '3900100145',
      labMonPointId: '219',
      beginTime: '2020-04-06 15:13:20',
      endTime: ' 2020-04-07 15:13:20'
    }
    const ManualData = await mapApi.getWasteGasManualData(GasManualData)
    console.log(ManualData)
    const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
    // console.log(Mondata)
    // console.log(e.layer.options.test.EpsGisMonPointId)
    const title = e.layer.options.test.Name
    const res = e.layer.options.test
    console.log(res)
    // const GasOnlinedata = {
    //   onLineMonEmissPointId: '23',
    //   monItemId: '28,31',
    //   beginTime: '2020-04-06 15:13:20',
    //   endTime: '2020-04-07 15:13:20',
    //   dataType: '1'
    // }
    // const GasManualData = {
    //   companyId: '3900100145',
    //   labMonPointId: '219',
    //   beginTime: '2020-04-06 15:13:20',
    //   endTime: ' 2020-04-07 15:13:20'
    // }
    // const ManualData = await mapApi.getWasteGasManualData(GasManualData)
    // console.log(ManualData)
    // const Mondata = await mapApi.getWasteGasMonData(GasOnlinedata)
    // // console.log(Mondata)
    const result = await mapApi.getWasteGasDetails(dataValue)
    // console.log(result.Result.DataInfo)
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced()
    // 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')
    console.log(result.Result.DataInfo)
    // const PublicBounced = window.Vue.extend(publicBounced)
    // const instance = new PublicBounced()
    // // 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')
    window.$layer.open({
      content: {
        content: WasteGasIndex, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          storagePlaceId: res
        }
      },
      title: title // 标题
    })
    // console.log(e.layer.options.totransferData.EpsGisMonPointId)
    this.setPanTo(e.latlng, 150)
    console.log(e.latlng)
    // console.log(e.latlng)
  }
  // 不同类型图片加载
  this.differentTypes = (ContrLevel) => {

 src/components/LayerController/modules/LcServiceLayer.vue

@@ -95,7 +95,7 @@

            .wms-panel-scrollbar{
                height: 457px;
                width: 100%;
                width: 2.5rem;
                font-size: 14px;
            }
            .layerbox {

 src/components/LayerController/service/LayerFactory.js

@@ -2,7 +2,7 @@
import BusiLayerService from './BusiLayerService'
import WmsLayerService from './WmsLayerService'
import EventLayerService from './EventLayerService'

import { clone } from '../../../utils/utils'
class LayerFactory {
  constructor (options) {
    this.L = options.L
@@ -112,15 +112,37 @@
  hide (config) {
    var layer = this.layers[config.code]
    layer && this.map.removeLayer(layer)
    this.load(config)
    // this.load(config)
  }

  toggle (code) {

  }

  flyByLayerId (code, id) {
    const layer = this.layers[code]
  /**
   *
   * 根据传的 feature对象定位
   * @param code
   * @param feature
   */
  flyByFeature (feature, code) {
    const type = feature.geometry.type
    var point = []
    switch (type) {
      case 'Point':
        point = clone(feature.geometry.coordinates)
        break
      case 'MultiLineString':
        var coordinates = feature.geometry.coordinates
        point = clone(coordinates[parseInt(coordinates.length / 2)][0])
        break
    }
    window.map.flyTo(point.reverse(), 15)
    code && this.openPopup(code, feature.id)
  }

  openPopup (layerId, id) {
    const layer = this.layers[layerId]

    if (layer.eachLayer) {
      layer.eachLayer(function (layer) {

 src/components/layer/src/layer.vue

@@ -1,7 +1,7 @@
<template>
  <div class="public-bounced map-background" v-drag :style="style">
    <div class="public-bounced-title panel-title" ref="publicBounced">
      <span>{{title}}</span>
      <span>{{ title }}</span>
      <i class="el-icon-circle-close" @click="close"></i>
    </div>
    <div class="public-bounced-content" :id="id">
@@ -27,8 +27,7 @@
      }
    }
  },
  computed: {
  },
  computed: {},
  mounted () {
  },
  methods: {
@@ -71,11 +70,11 @@
</script>

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

  .public-bounced-title {
    cursor: move;
@@ -85,38 +84,38 @@
    align-items: center;
    justify-content: space-between;

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

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

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

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

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

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

 src/components/panel/topicSearch/SewersSearch.vue

@@ -142,9 +142,7 @@
      }
    },
    handleLocation (val) {
      const bound = this.L.geoJSON([val], {}).getBounds()
      window.map.flyToBounds(bound)
      window.layerFactory.flyByLayerId(this.form.dataType.code, val.id)
      window.layerFactory.flyByFeature(val, this.form.dataType.code)
      // layer && layer.openPopup()
    },
    btnAffiliatedFacilities (item) {

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

@@ -1,90 +1,109 @@
<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-button type="primary" size="mini" @click="linkClickStart" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button>
      <el-button type="primary" size="mini" @click="linkClickEnd" title="地图上点击与所选管段连通管段">结束管段</el-button>
      <el-button type="primary" size="mini" @click="linkQuery" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
      <el-button type="primary" size="mini" @click="linkClear" title="根据起始、结束管段进行连通性分析">清除</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-scrollbar style="height:2rem">
        <span class="clearfix">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            max-height="200"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-tablea"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
            </template>
          </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-scrollbar>
    </el-card>
  </div>
</template>
@@ -94,11 +113,45 @@
  name: 'Connectivity',
  data () {
    return {
      // 连通性
      linkType: 1, // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      tableData: []
    }
  },
  methods: {
    // 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
      this.linkType = 1
      // this.selectPipeLine()
    },
    // 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管段')
      this.linkType = 0
      // this.selectPipeLine()
    },
    // 连通性分析
    linkQuery () {
      console.log('点击连通性分析')
    },
    // 清除功能
    linkClear () {
      console.log('点击清除')
    },
    // 选择起始管段
    linkSelectStart () {
      console.log('选择起始管段')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .fixed-tablea {
  background: rgba(0, 16, 30, 1) !important;
}
/deep/ .el-table__fixed-right::before {
  background: none;
}
</style>

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js

New file
@@ -0,0 +1,427 @@
// export default {
//   handleClick (tab, event) {
//     console.log(tab, event)
//     this.clearLinkPipe()
//     this.clearLX()
//     this.linkClear()
//     this.jdmClear()
//     this.bgFm = []
//     this.bgPipeLine = []
//     this.tableData = []
//     this.tableDataLiuxiang = []
//     this.tableDataLinkStart = []
//     this.tableDataLinkEnd = []
//     this.tableDataLinkResult = []
//   },
//   linkClickStart () {
//     console.log('地图点击起始管段')
//     this.linkType = 1
//     this.selectPipeLine()
//   },
//   linkClickEnd () {
//     console.log('地图点击结束管段')
//     this.linkType = 0
//     this.selectPipeLine()
//   },
//   linkSelectStart (e) {
//     console.log('选择起始管段')
//     console.log(e)
//     this.$refs.singleTable.setCurrentRow(e)
//     this.currentSelectStart = e
//     if (this.currentSelectStartLine != null) {
//       this.currentSelectStartLine.remove()
//       this.currentSelectStartLine = null
//     }
//     const geom = JSON.parse(e.geomText)
//     this.currentSelectStartLine = L.geoJSON(geom, {
//       style: function (feature) {
//         return { color: 'rgba(0,255,0,.6)' }
//       }
//     }).addTo(this.map)
//     this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
//   },
//   linkSelectEnd (e) {
//     console.log('选择结束管段')
//     console.log(e)
//     this.currentSelectEnd = e
//
//     if (this.currentSelectEndLine != null) {
//       this.currentSelectEndLine.remove()
//       this.currentSelectEndLine = null
//     }
//
//     const geom = JSON.parse(e.geomText)
//     this.currentSelectEndLine = L.geoJSON(geom, {
//       style: function (feature) {
//         return { color: 'rgba(200,0,200,.6)' }
//       }
//     }).addTo(this.map)
//     this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
//   },
//   linkResultSelect (e) {
//     console.log('连通性分析结果列表点击')
//     console.log(e)
//
//     const geom = JSON.parse(e.geomText)
//     if (this.currentSelectResultLine != null) {
//       this.currentSelectResultLine.remove()
//       this.currentSelectResultLine = null
//     }
//     this.currentSelectResultLine = L.geoJSON(geom, {
//       style: function (feature) {
//         return {
//           color: 'rgba(255,0,0,.6)',
//           weight: 6
//         }
//       }
//     }).addTo(this.map)
//     this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
//   },
//   // 连通性查询
//   async linkQuery () {
//     this.tableDataLinkResult = []
//     if (this.linkPipeline.length > 1) {
//       this.linkPipeline.forEach((itm) => {
//         itm.remove()
//       })
//       this.linkPipeline = []
//     }
//     if (this.currentSelectStart === null || this.currentSelectEnd === null) {
//       this.$message('请选择起始管段和结束管段')
//       return
//     }
//     const param = {
//       startLineID: this.currentSelectStart.id,
//       endLineID: this.currentSelectEnd.id
//     }
//
//     const res = await api.findConnectedPipelines(param)
//
//     if (res.data.length === 0) {
//       this.$message('没有找到连通的管段')
//       this.currentLinkIsTrue = '不连通'
//       return
//     }
//     this.tableDataLinkResult = res.data
//     this.currentLinkIsTrue = '连通'
//     const linkPipe = []
//     res.data.forEach((itm, idx) => {
//       const geom = JSON.parse(itm.geomText)
//       const points = []
//       geom.coordinates.forEach((it, id) => {
//         points.push(it.reverse())
//       })
//
//       linkPipe.push(points)
//     })
//
//     linkPipe.forEach((itm, idx) => {
//       const param1 = {
//         points: itm,
//         option: {
//           dashArray: '15 15',
//           dashSpeed: -30,
//           color: '#ffff00'
//         }
//       }
//       const line = main.createFlowLine(param1)
//       this.linkPipeline.push(line)
//     })
//   },
//
//   linkClear () {
//     if (this.currentSelectStartLine != null) {
//       this.currentSelectStartLine.remove()
//       this.currentSelectStartLine = null
//     }
//     if (this.currentSelectEndLine != null) {
//       this.currentSelectEndLine.remove()
//       this.currentSelectEndLine = null
//     }
//     if (this.currentSelectResultLine != null) {
//       this.currentSelectResultLine.remove()
//       this.currentSelectResultLine = null
//     }
//     if (this.bgMarker != null) {
//       this.bgMarker.remove()
//       this.bgMarker = null
//     }
//   },
//   lxResultSelect () {
//     console.log('连通性分析结果列表点击')
//     console.log(e)
//
//     const geom = JSON.parse(e.geomText)
//     if (this.currentSelectResultLine != null) {
//       this.currentSelectResultLine.remove()
//       this.currentSelectResultLine = null
//     }
//     this.currentSelectResultLine = L.geoJSON(geom, {
//       style: function (feature) {
//         return { color: 'rgba(0,250,255,.6)' }
//       }
//     }).addTo(this.map)
//     this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
//   },
//   async lxQuery (e) {
//     this.clearLinkPipe()
//     const param = {
//       lineNodeID: e.startpoint
//     }
//     const res = await api.findFlowDirection(param)
//
//     this.lxTableDataResult = res.data
//     const linkPipe = []
//     res.data.forEach((itm, idx) => {
//       const geom = JSON.parse(itm.geomText)
//       const points = []
//       geom.coordinates.forEach((it, id) => {
//         points.push(it.reverse())
//       })
//
//       linkPipe.push(points)
//     })
//
//     linkPipe.forEach((itm, idx) => {
//       const param1 = {
//         points: itm,
//         option: {
//           dashArray: '15 15',
//           dashSpeed: -30,
//           color: '#ffff00'
//         }
//       }
//       const line = main.createFlowLine(param1)
//       this.linkPipeline.push(line)
//     })
//   },
//
//   bgClick () {
//     this.selectPipeLine()
//   },
//   async bgSelect (e) {
//     console.log('选择爆管管段')
//     console.log(e)
//     this.bgFm = []
//     if (this.bgMarker != null) {
//       this.bgMarker.remove()
//       this.bgMarker = null
//     }
//
//     if (this.currentSelectEndLine != null) {
//       this.currentSelectEndLine.remove()
//       this.currentSelectEndLine = null
//     }
//     this.clearLinkPipe()
//     const geom = JSON.parse(e.geomText)
//     this.currentSelectEndLine = L.geoJSON(geom, {
//       style: function (feature) {
//         return { color: 'rgba(200,0,200,.6)' }
//       }
//     }).addTo(this.map)
//     this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
//
//     const param = {
//       lineID: e.id
//     }
//     const res = await api.findLeakages(param)
//     console.log(res)
//
//     const len = res.data.length
//     if (len === 0) {
//       this.$message('未找到需要关闭的阀门')
//
//       return
//     }
//     res.data.reverse()
//     this.bgFm = res.data
//
//     this.bgPoint = res.data[0].startControlPoint
//
//     const point = JSON.parse(this.bgPoint.geomText)
//
//     const p = [point.coordinates[1], point.coordinates[0]]
//
//     this.bgMarker = main.createFlowMarker(p)
//     this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
//     this.bgMarker.addTo(this.map)
//     this.map.flyTo(p)
//
//     const linkPipe = []
//     res.data.forEach((itm, idx) => {
//       const geom = JSON.parse(itm.geomText)
//       const points = []
//       geom.coordinates.forEach((it, id) => {
//         points.push(it.reverse())
//       })
//
//       linkPipe.push(points)
//     })
//
//     linkPipe.forEach((itm, idx) => {
//       const param1 = {
//         points: itm,
//         option: {
//           dashArray: '15 15',
//           dashSpeed: -30,
//           color: '#ffff00'
//         }
//       }
//       const line = main.createFlowLine(param1)
//       this.linkPipeline.push(line)
//     })
//   },
//   bgFmClick (e) {
//     console.log('点击影响的阀门')
//     console.log(e)
//     const point = [e.data[0][0], e.data[0][1]]
//     const marker = main.createFlowMarker(point)
//     marker.addTo(this.map)
//     this.map.flyTo(point, 16)
//   },
//   // 流向地图上点击
//   selectPipeLine () {
//     this.map.on('click', this.selectClick)
//   },
//   // 地图上点击回调
//   selectClick (e) {
//     this.map.off('click', this.selectClick)
//     const point = [e.latlng.lng, e.latlng.lat]
//     console.log(point)
//     this.getPipeLine(point)
//   },
//
//   // 流向数据请求
//   async getPipeLine (point) {
//     const param = {
//       x: point[0],
//       y: point[1],
//       radius: 3
//     }
//
//     const res = await api.getPipeline(param)
//     // 3 流向
//
//     if (this.activeName === 'first') {
//       if (this.linkType) {
//         this.tableDataLinkStart = res.data
//       } else {
//         this.tableDataLinkEnd = res.data
//       }
//     } else if (this.activeName === 'second') {
//       this.bgPipeLine = res.data
//     } else if (this.activeName === 'third') {
//       this.tableDataLiuxiang = res.data
//     } else if (this.activeName === 'fourth') {
//
//     }
//
//     console.log(res)
//   },
//   // 流向-管线选择
//   selectRowLiuXiang (e) {
//     // 选择要显示的流向线
//     console.log('选择要显示的流向线')
//     console.log(e)
//   },
//   lxHandleClick (e) {
//     console.log('正流向显示')
//     console.log(e)
//
//     this.clearLX()
//     const param = {
//       points: e.data,
//       option: {
//         dashArray: '15 15',
//         dashSpeed: -30
//       }
//     }
//     this.flowPipeLine = main.createFlowLine(param)
//   },
//   clearLinkPipe () {
//     if (this.linkPipeline.length > 0) {
//       this.linkPipeline.forEach((itm, idx) => {
//         itm.remove()
//       })
//     }
//     this.linkPipeline = []
//   },
//   clearLX () {
//     if (this.flowPipeLine != null) {
//       this.flowPipeLine.remove()
//       this.flowPipeLine = null
//     }
//   },
//   lxHandleClick2 (e) {
//     console.log('逆流向显示')
//     console.log(e)
//     if (this.flowPipeLine != null) {
//       this.flowPipeLine.remove()
//       this.flowPipeLine = null
//     }
//     const param = {
//       points: e.data,
//       option: {
//         dashArray: '15 15',
//         dashSpeed: 30
//       }
//     }
//     this.flowPipeLine = main.createFlowLine(param)
//   },
//   // 横断面数据请求
//   async getHdmPoint (line) {
//     console.log('横断面的绘制线')
//     console.table(line)
//     this.hdmParam = {
//       x1: line[0].lng,
//       y1: line[0].lat,
//       x2: line[1].lng,
//       y2: line[1].lat
//     }
//   },
//   // 横断面选择后 图表展示
//   async selectRow (e) {
//     console.log(e)
//     // 3. 使用刚指定的配置项和数据，显示图表
//
//     const option = {
//       xAxis: {
//         type: 'category',
//         data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
//       },
//       yAxis: {
//         type: 'value'
//       },
//       series: [{
//         data: [820, 932, 901, 934, 1290, 1330, 1320],
//         type: 'line'
//       }]
//     }
//
//     this.myChartShow = true
//     this.myChart.setOption(option)
//   },
//   drawLine () {
//     console.log('drawLine')
//     if (this.measure === null) {
//       this.measure = new DrawLine(this.map)
//     }
//     this.measure.destory()
//     this.measure.init()
//   },
//   async jdmQuery () {
//     if (this.hdmParam == null) {
//       this.$message('请先在地图上绘制截断线')
//       return
//     }
//     const res = await api.getCrossSection(this.hdmParam)
//     console.log(res)
//     // debugger
//   },
//   jdmClear () {
//     this.hdmParam = null
//     if (this.measure != null) {
//       this.measure.destory()
//     }
//   }
// }

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

@@ -2,72 +2,89 @@
  <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-button type="primary" size="mini" @click="bgClick">选择管线</el-button>
      <el-button type="primary" size="mini" @click="handleClick('czp')">清除</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-scrollbar style="height:350px">
        <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-scrollbar>
    </el-card>
  </div>
</template>

<script>

// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay'

export default {
  name: 'Tube',
  data () {
    return {
      tableData: []
      tableData: [],
      tube: []
    }
  },
  methods: {
    // 选指管线
    bgClick () {
      this.selectPipeLine()
    },
    // 清楚绘制
    handleClick (val) {
      console.log(val)
      // PublicWay.handleClick(val)
    }
  }
}

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

@@ -23,8 +23,10 @@
import Flow from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/Flow'
import CrossSectional from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/CrossSectional'

// import PublicWay from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay'

export default {
  name: 'SewersFirstTab',
  name: 'SewersAnalysis',
  components: {
    Connectivity,
    Tube,
@@ -39,6 +41,7 @@
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      // PublicWay.handleClick(tab, event)
    }
  }
}

 src/conf/layers/LayerPipeLines.js

@@ -19,7 +19,7 @@
      sname: '管网',
      checked: false,
      // wfs: WFS_URL + '?TYPENAME=管网&FILTER=<Filter xmlns="http://www.opengis.net/ogc"><PropertyIsEqualTo><PropertyName>mediumtype</PropertyName><Literal>雨水管线</Literal></PropertyIsEqualTo></Filter>',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=linenumtype=\'雨水管线\'',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=linenumtype=\'雨水管线\'',
      icon: 'sewers/雨水线.png',
      color: '#0070ff',
      minZoom: 13,
@@ -43,7 +43,7 @@
      checked: false,
      minZoom: 13,
      color: '#ffaa00',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'含油污水\'',
      styles: {
        COLOR: '#ffaa00',
        FILL_COLOR: '#ffaa00'
@@ -96,7 +96,7 @@
      checked: false,
      minZoom: 13,
      color: '#a8a800',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=50&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',
      wfs: 'http://xearth.cn:6240/geoserver/sewer/wfs?typeName=sewer:pipeline&maxFeatures=500&outputFormat=application%2Fjson&cql_filter=mediumtype=\'生产污水\'',
      styles: {
        COLOR: '#a8a800',
        FILL_COLOR: '#a8a800'

 src/utils/utils.js

@@ -22,3 +22,38 @@
  // eslint-disable-next-line no-unreachable
  return url + '\n' + arg + '\n' + argValue
}

/**
 * 复制对象
 * @param obj
 * @returns {{}}
 */
export function clone (obj) {
  var o
  // 如果  他是对象object的话  , 因为null,object,array  也是'object';
  if (typeof obj === 'object') {
    // 如果  他是空的话
    if (obj === null) {
      o = null
    } else {
      // 如果  他是数组arr的话
      if (obj instanceof Array) {
        o = []
        for (var i = 0, len = obj.length; i < len; i++) {
          o.push(clone(obj[i]))
        }
      } else {
        // 如果  他是对象object的话
        o = {}
        for (var j in obj) {
          o[j] = clone(obj[j])
        }
      }
    }
  } else {
    o = obj
  }
  return o
}

export default clone