From 253590ef9d0ec11b526321c2c18d60c53990fd45 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期一, 19 四月 2021 13:09:14 +0800
Subject: [PATCH] 弹框修改

---
 src/components/BaseNav/WasteGas/PublicTabs.vue                                |   53 +-
 /dev/null                                                                     |  178 --------
 src/components/LayerController/logic/WasteGas.js                              |   75 ++-
 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue         |  127 +++--
 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js     |  427 +++++++++++++++++++++
 src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue              |    5 
 src/components/BaseNav/WasteGas/WasteGasIndex.vue                             |   99 ++++
 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue |  217 ++++++----
 8 files changed, 814 insertions(+), 367 deletions(-)

diff --git a/src/components/BaseNav/WasteGas/Index.vue b/src/components/BaseNav/WasteGas/Index.vue
deleted file mode 100644
index 1db65ea..0000000
--- a/src/components/BaseNav/WasteGas/Index.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<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>
-    <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 >姝e父</span>
-      <i style=" background: #4ec99c;"></i>
-      <span >棰勮</span>
-      <i style=" background: red;"></i>
-      <span >瓒呮爣</span>
-      <i style=" background: orange;"></i>
-    </div>
-    <component :is="currentTab" v-bind="$attrs" ref="Echats"></component>
-  </div>
-</template>
-
-<script>
-import ECharts from './echarts/Echarts'
-import EChartsHour from './echarts/EChartsHour'
-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: 'WasteGasIndex',
-  components: {
-    EChartsHour,
-    EChartsDate,
-    ECharts,
-    EChartsTable,
-    EChartsRealWasteWater,
-    EChartsHourWasteWater,
-    EChartsDateWasteWater,
-    EChartsWasteWaterTable
-  },
-  data () {
-    return {
-      currentTab: this.current(),
-      active: '0'
-    }
-  },
-  // updated () {
-  //   this.$refs.Echats.DrawEXHRealTimeDateChart()
-  // },
-  methods: {
-    tabTaggle (taggleMenu, num) {
-      this.currentTab = taggleMenu
-      this.active = num
-    },
-    current (currentTab) {
-      if (this.$attrs.value === 'feishui') {
-        currentTab = 'EChartsRealWasteWater'
-      } else {
-        currentTab = 'ECharts'
-      }
-      return currentTab
-    }
-  }
-}
-
-</script>
-
-<style scoped lang="less">
-.win {
-  position: relative;
-  background:@background-color;
-  border: 0.8px solid #396d83;
-}
-
-.border_corner {
-  z-index: 999;
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: rgba(0, 0, 0, 0);
-  border: 1.5px solid #47d5ea;
-}
-
-.border_corner_left_top {
-  top: 0;
-  left: 0;
-  border-right: none;
-  border-bottom: none;
-}
-
-.border_corner_right_top {
-  top: 0;
-  right: 0;
-  border-left: none;
-  border-bottom: none;
-}
-
-.border_corner_left_bottom {
-  bottom: 0;
-  left: 0;
-  border-right: none;
-  border-top: none;
-}
-
-.border_corner_right_bottom {
-  bottom: 0;
-  right: 0;
-  border-left: none;
-  border-top: none;
-}
-
-.tab {
-  display: flex;
-  border-bottom: 1px solid #396d83;
-  padding:0.02rem 0.04rem;
-}
-
-.tab li {
-  background-color: #243a55;
-  line-height:0.15rem;
-  height: 0.15rem;
-  text-align: center;
-  border-radius: 5px;
-  margin-right: 0.04rem;
-  padding:0 0.04rem;
-}
-.tab li.hover,
-.tab li:hover {
-  background-color: #0e639e;
-  color: #fff;
-  cursor: pointer;
-}
-.legend{
-  position: absolute;
-  top:0.05rem;
-  right: 0;
-  display: flex;
-  justify-items: center;
-}
-.legend i {
-  display: block;
-  width: 0.2rem;
-  height: 0.09rem;
-  margin:0 0.1rem 0 0.05rem;
-  border-radius: 0.02rem;
-}
-.legend span{
-  line-height: 0.09rem;
-  height: 0.09rem;
-  font-size: 0.06rem;
-}
-
-</style>
diff --git a/src/components/BaseNav/WasteGas/PublicTabs.vue b/src/components/BaseNav/WasteGas/PublicTabs.vue
index a0df48a..d33623c 100644
--- a/src/components/BaseNav/WasteGas/PublicTabs.vue
+++ b/src/components/BaseNav/WasteGas/PublicTabs.vue
@@ -6,40 +6,53 @@
     <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>
+        <!--        <div>-->
+        <!--          <ul>-->
+        <!--            <li>鐩戞祴鐐瑰悕绉�:{{ setWasteGasdata.Name }}</li>-->
+        <!--            <li>鐢熶骇鍗曚綅:{{ setWasteGasdata.porltName }}</li>-->
+        <!--            <li>鎺掓斁绫诲瀷鍚嶇О:{{ setWasteGasdata.MonTypeName }}</li>-->
+        <!--            <li>鎺掓斁鍘诲悜:{{ setWasteGasdata.EmissDirecti }}</li>-->
+        <!--            <li>鎺у埗绾у埆鍚嶇О:{{ setWasteGasdata.ContrLevelShowName }}</li>-->
+        <!--            <li>鍐�/澶栨帓鍙�:{{ setWasteGasdata.OrOutPortName }}</li>-->
+        <!--          </ul>-->
+        <ul>
+          <li>鐩戞祴鐐瑰悕绉�:</li>
+          <li>鐢熶骇鍗曚綅:</li>
+          <li>鎺掓斁绫诲瀷鍚嶇О:</li>
+          <li>鎺掓斁鍘诲悜:</li>
+          <li>鎺у埗绾у埆鍚嶇О:</li>
+          <li>鍐�/澶栨帓鍙�:</li>
+        </ul>
+        <!--        </div>-->
       </div>
     </div>
   </div>
 </template>
 
 <script>
+
+import mapApi from '@/api/mapApi'
+
 export default {
   name: 'GasTable',
-  props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'],
   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) {
+      const dataValue = {
+        StoragePlaceId: data
+      }
+      const resultBasic = await mapApi.getWasteGasDetails(dataValue)
+      console.log(resultBasic)
+    }
   }
 }
 </script>
diff --git a/src/components/BaseNav/WasteGas/WasteGasIndex.vue b/src/components/BaseNav/WasteGas/WasteGasIndex.vue
new file mode 100644
index 0000000..cbf990a
--- /dev/null
+++ b/src/components/BaseNav/WasteGas/WasteGasIndex.vue
@@ -0,0 +1,99 @@
+<template>
+  <public-sector>
+    <template v-slot:tabs>
+      <public-tabs ref='refsTabsData'></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 () {
+    this.$nextTick(() => {
+      this.refsData()
+      console.log(this.storagePlaceId)
+    })
+  },
+  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>
diff --git a/src/components/BaseNav/WasteGas/flueGas.js b/src/components/BaseNav/WasteGas/flueGas.js
deleted file mode 100644
index 0ab51b2..0000000
--- a/src/components/BaseNav/WasteGas/flueGas.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import { FlueGas } from '@/api/request'
-import defaultImg from '@assets/images/map-pages/basenav/flugas/green_airquality_2.png'
-import Setting from '@assets/images/map-pages/basenav/flugas/green_airquality_3.png'
-// 鍥剧墖
-
-class AddGasHelper {
-  constructor (options) {
-    this.map = options.map
-    this.L = window.L
-    this.FlueGasLayerGroup = this.L.layerGroup().addTo(this.map)
-    this.FlueGasPopup = null
-    this.L.sgis = this.L.sgis || this.L
-    this.FlueGasMarkersLabels = []
-    this.pulseHeighLightMarker = null
-  }
-
-  // 鑾峰彇鏁版嵁
-  requestData (data) {
-    FlueGas(data).then(res => {
-      console.log(res)
-      this.DrawFlueGasContent(res.Result.DataInfo)
-    }).catch(err => {
-      console.log(err)
-    })
-  }
-
-  // 鏍规嵁鑾峰彇鏁版嵁 鐢诲嚭 鍐呭
-  DrawFlueGasContent (data) {
-    // 鍥炬爣鏍峰紡鎵╁睍
-    var FlueGasIcon = this.PlueGasIcon()
-
-    // //鍔犺浇鏁版嵁鍓嶅鏋滃瓨鍦ㄥ浘灞傜粍 閭d箞娓呴櫎鎺�
-    if (this.FlueGasLayerGroup) {
-      this.FlueGasLayerGroup.clearLayers()
-    }
-    for (let i = 0; i < data.length; i++) {
-      // 缁忕含搴� 浣嶇疆
-      const positionX = data[i].Latitude
-      const positionY = data[i].Longitude
-
-      // 鍒ゆ柇 缁忕含搴︿綅缃俊鎭槸鍚﹀瓨鍦�
-      // if (positionX != null && positionY != null) {
-      // 鐢ㄤ簬 鍒ゆ柇 => 鍒ゆ柇鏄惁灞曠ず鑴夊啿鏁堟灉 => temp(涓存椂)
-      const determineValueOne = data[i].LongDayWarning
-      var determineValueTwo = data[i].StorageQty
-      const positionArea = [positionX, positionY]
-
-      // 鍥炬爣灞曠ず
-      var iconUrl = this.PlueGasIconUrl(determineValueOne, determineValueTwo, positionArea)
-      var Icon = new FlueGasIcon({ iconUrl: iconUrl })
-      // var url = Icon.options.iconUrl
-
-      const marker = this.L.marker([positionX, positionY], { icon: Icon })
-      // const latlngs = positionArea[2]
-      // // 绾�
-      // var polyline = this.L.polyline(latlngs, { color: 'red' }).addTo(this.map)
-      // console.log(polyline)
-      // marker.bindPopup(() => {
-      //   return this.FlueGasPopup.$el
-      // }, {
-      //   className: 's-map-popup',
-      //   minWidth: 1548,
-      //   closeButton: true,
-      //   autoClose: false
-      // })
-      // 鍒掕繃鍑虹幇 灞曠ず鏁版嵁
-      marker.bindTooltip(data[i].porltName, {
-        permanent: true,
-        offset: [0, -16],
-        direction: 'top',
-        className: ''
-      })
-      // 鐐瑰嚮 浜嬩欢
-      marker.on('click', (e) => {
-        try {
-          // console.log(e)
-          this.EffectOfPulse(e.target.getLatLng())
-          this.FlueGasPopup.setData(data[i])
-          // this.FlueGasPopup.setData(data[i])
-          return this.FlueGasPopup.$el
-        } catch (error) {
-          console.log(error)
-        }
-      })
-      // 璁剧疆鍐呭娣诲姞鍒板浘灞�
-      this.FlueGasLayerGroup.addLayer(marker)
-      // }
-    }
-  }
-
-  // 鐐瑰嚮杩涜鐨� 鍐呭鐨勮缃�
-  SetPlueGasContent (config, containerPopup) {
-    this.FlueGasPopup = containerPopup
-  }
-
-  // 鍥炬爣鏍峰紡鎵╁睍 => 鍏夊湀 鍥炬爣鑴夊啿
-  PlueGasIcon () {
-    return this.L.Icon.extend({
-      options: {
-        iconSize: [50, 50],
-        iconAnchor: [25, 25]
-      }
-    })
-  }
-
-  // 鏍规嵁绫诲瀷杩斿洖鍥剧墖鍔犺浇url
-  PlueGasIconUrl (determineValueOne, determineValueTwo, position) {
-    var EffectOfChange
-    if (determineValueOne === 1 || determineValueTwo === 1) {
-      EffectOfChange = defaultImg
-      this.EffectOfPulse(position, this.FlueGasMarkersLabels, this.pulseHeighLightMarker)
-    } else {
-      EffectOfChange = Setting
-    }
-    return EffectOfChange
-  }
-
-  // 鑴夊啿鏁堟灉璁剧疆瀹炵幇
-  EffectOfPulse (position, markers, layerGroup) {
-    // // 鍖哄垎鐩存帴鎵ц 鍜屽垽鏂墽琛岀殑涓嶅悓鍖哄埆
-    var differentColor = ''
-    if (markers) {
-      differentColor = '#ff0000'
-    } else {
-      differentColor = '#98FB98'
-    }
-    // 鍧愭爣鏁版嵁锛氭姤璀︿紶杩涙潵鐨勬槸鏁扮粍 / 鐐瑰嚮浼犺繘鏉ョ殑鏄痮bject
-    var FinalPosition = position instanceof Array ? {
-      lat: position[0],
-      lng: position[1]
-    } : position
-    // 鎻掍欢 鏁堟灉瀹炵幇
-    var pulsingIcon = this.L.icon.pulse({
-      iconSize: [20, 20],
-      color: differentColor,
-      fillColor: ''
-    })
-    if (markers) {
-      // markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
-      // this.L.layerGroup(markers).addLayer(layerGroup)
-    } else {
-      var picGroupMarker = new this.L.FeatureGroup()
-      this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
-      this.pulseHeighLightMarker = picGroupMarker.addTo(this.FlueGasLayerGroup)
-      this.PulseCountSetting()
-    }
-  }
-
-  PulseCountSetting () {
-    var HeightLightTime = 5
-    var PulseNumber = 5
-    const pulseinterver = setInterval(() => {
-      if (PulseNumber > 0) {
-        PulseNumber--
-      } else {
-        this.pulseClear(pulseinterver)
-        PulseNumber = HeightLightTime
-      }
-    }, 1000)
-  }
-
-  // 娓呴櫎 鍥惧眰
-  pulseClear (pulseinterver) {
-    clearInterval(pulseinterver)
-    pulseinterver = null
-
-    if (this.PlueGasLayerGroup) {
-      // this.PlueGasLayerGroup.clearLayers()
-    } else {
-      this.PlueGasLayerGroup = this.L.layerGroup().addTo(this.map)
-    }
-    if ((this.pulseHeighLightMarker)) {
-      this.pulseHeighLightMarker.remove()
-    }
-  }
-}
-
-export default AddGasHelper
diff --git a/src/components/LayerController/logic/WasteGas.js b/src/components/LayerController/logic/WasteGas.js
index 022588c..1915e1b 100644
--- a/src/components/LayerController/logic/WasteGas.js
+++ b/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 () {
   /**
@@ -58,37 +59,49 @@
   this.clickListener = async (e) => {
     // console.log(e)
     this.animalService.pulseEffect(e.latlng)
-    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)
-    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')
+    // const dataValue = {
+    //   StoragePlaceId: e.layer.options.test.StoragePlaceId
+    // }
+    // console.log(e.layer.options.test.EpsGisMonPointId)
+    const title = e.layer.options.test.Name
+    // 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')
+    window.$layer.open({
+      content: {
+        content: WasteGasIndex, // 缁勪欢
+        parent: this, // 鐖剁粍浠�
+        data: { // 浼犻�掔殑鍙傛暟
+          storagePlaceId: e.layer.options.test.StoragePlaceId
+        }
+      },
+      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) => {
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
index 89504b1..7eb985a 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue
+++ b/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>
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
new file mode 100644
index 0000000..63d8e26
--- /dev/null
+++ b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/PublicWay.js
@@ -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('姝f祦鍚戞樉绀�')
+//     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()
+//     }
+//   }
+// }
diff --git a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue b/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
index f973a19..c1deb22 100644
--- a/src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Tube.vue
+++ b/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)
     }
   }
 }
diff --git a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue b/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
index 3d3d000..6e9c12e 100644
--- a/src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
+++ b/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)
     }
   }
 }

--
Gitblit v1.8.0