样式/接口调整

ChenZeping

2021-04-27 8e8340911055cea995d410d98e0eeabf84e2e53f

样式/接口调整

 src/api/mapApi.js

@@ -69,5 +69,21 @@
  },
  DataItems (data) {
    return axios.get(mapUrl.DataItems, data)
  },
  // 管线连通性
  findConnectedPipelines (data) {
    return axios.get(mapUrl.findConnectedPipelines, data)
  },
  findPipelineByClickPoint (data) {
    return axios.get(mapUrl.findPipelineByClickPoint, data)
  },
  findFlowDirection (data) {
    return axios.get(mapUrl.findFlowDirection, data)
  },
  findLeakages (data) {
    return axios.get(mapUrl.findLeakages, data)
  },
  getCrossSection (data) {
    return axios.get(mapUrl.getCrossSection, data)
  }
}

 src/api/mapUrl.js

@@ -5,17 +5,20 @@

export const GetUser = $HOST + '/user/getUser'

// 固废
export const getSolidWaste = $HOST + '/wasteSolid/getSolidWaste'
export const getSolidWasteBaseInfo = $HOST + '/wasteSolid/getSolidWasteBaseInfo'
export const getSolidWasteDetail = $HOST + '/wasteSolid/getSolidWasteDetail'
export const getSolidWasteSurveyDetail = $HOST + '/wasteSolid/getSolidWasteSurveyDetail'

// 废气
export const getWasteGas = $HOST + '/wasteGas/getWasteGas'
export const getWasteGasDetails = $HOST + '/wasteGas/getWasteGasMonitoringDetails'
export const DataItems = $HOST + '/wasteGas/RTDB/DataItems' // 废气实时数据
export const getWasteGasMonData = $HOST + '/wasteGas/QueryOnlineMonData'
export const getWasteGasManualData = $HOST + '/wasteGas/QueryLabMonData'

// 废水
export const getWasteWater = $HOST + '/wasteWater/getWasteWater' // 废水点信息
export const getWasteWaterMonitoring = $HOST + '/wasteWater/getWasteWaterMonitoring' // 废水监测数据
export const getWasteWaterMonitoringDetails = $HOST + '/wasteWater/getWasteWaterMonitoringDetails' // 废水监测数据明细表
@@ -23,4 +26,13 @@
export const getQueryLabMonData = $HOST + '/wasteWater/QueryLabMonData' // 人工数据
export const getDataItems = $HOST + '/wasteWater/RTDB/DataItems' // 实时数据

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

// 管线分析
// export const findPipelineByClickPoint = $HOST + '/findPipelineByClickPoint'
export const findPipelineByClickPoint = 'http://xearth.cn:6202' + '/findPipelineByClickPoint'
export const findConnectedPipelines = 'http://xearth.cn:6202' + '/findConnectedPipelines'
export const findFlowDirection = 'http://xearth.cn:6202' + '/findFlowDirection'
export const findLeakages = 'http://xearth.cn:6202' + '/findLeakages'
export const getCrossSection = 'http://xearth.cn:6202' + '/getCrossSection'

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

@@ -678,9 +678,9 @@
  margin: 15px 0;
}

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

/****************************报表二级子弹框样式***/
.el-tabs__nav-wrap::after {

 src/components/BaseNav/WasteGas/DayData.vue

@@ -1,56 +1,37 @@
<!--  日数据  -->
<template>
  <div id="Tab">
  <div class="echarts-box">
    <div class="tab-scroll">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
            </span>
      <span class="time-select">{{ formData.timeStart }}日—{{ formData.timeEnd }}日</span>
          </div>
          <div class="pickerData">
            <span>结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
            </span>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.timeStart"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.timeEnd"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="formData.region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button>查询</el-button>
      <el-button>明细表</el-button>
          </div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="wastegasday"></div>
        </div>
        <!--        <div>-->
        <!--          采样点数:-->
        <!--          <el-select v-model="formInline.region" placeholder="50">-->
        <!--            <el-option label="0" value="0"></el-option>-->
        <!--            <el-option label="25" value="25"></el-option>-->
        <!--            <el-option label="50" value="50"></el-option>-->
        <!--            <el-option label="75" value="75"></el-option>-->
        <!--            <el-option label="100" value="100"></el-option>-->
        <!--          </el-select>-->
        <!--        </div>-->
        <div class="detailbtn hover-bottom">查询</div>
        <div class="detailbtn hover-bottom">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegasday">
      </div>
    </div>
    <!--    &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 PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'

import PublicDataStandard from '../PublicDataStandard'
import 'dayjs/locale/es'
import dayjs from 'dayjs'
@@ -59,7 +40,6 @@
export default {
  name: 'DayData',
  components: {
    // PublicDetailedList
    PublicDataStandard
  },
  data () {
@@ -106,9 +86,11 @@
            val: null
          }
        }],
      formInline: {
        timeStart: null,
        timeEnd: null
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      dataType: 1,
      myChart: null,
@@ -126,14 +108,11 @@
  },
  methods: {
    async initnData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formInline.timeStart,
        endTime: this.formInline.timeEnd,
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo
@@ -493,7 +472,7 @@
        },
        grid: { // 网格
          top: '20%',
          left: '5%'
          left: '15%'
          // containLabel: true
        },
        legend: { // 图例
@@ -618,107 +597,4 @@
</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;
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 0.02rem;

    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

      > div:first-child {
        margin-right: 10px;
      }

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px
        }

        .pickerTable {
          margin-left: 3px;
        }
      }
    }

    /deep/ .el-date-editor--datetime {
      width: 100%;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 1rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 0.08rem;
      height: 0.15rem;
      padding: 0;
      border: none;
      text-align: center;
      z-index: 9999;
      //padding-left:20px ;
      //padding: 0!important;
    }

    /deep/ .el-input__icon {
      display: block;
      width: 1rem;
      height: 0.15rem;
      line-height: 0.15rem;
      cursor: pointer;
      font-size: 0;
    }

    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }

    .detailbtn {
      background-color: #2e4967;
      text-align: center;
      padding: 0 7px;
      height: 0.15rem;
      line-height: 0.15rem;
      border-radius: 4px;
      margin-right: 6px;
    }
  }

  .el-dialog-div {
    overflow: auto;
  }

  #echarts {
    margin: 0;
    padding: 0;
  }
}
</style>

 src/components/BaseNav/WasteGas/HourData.vue

@@ -1,27 +1,31 @@
<!--  小时数据  -->
<template>
  <div id="Tab">
  <div class="echarts-box">
    <div class="tab-scroll">
    <PublicDataStandard :dataStandard="dataStandard"></PublicDataStandard>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
                          <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
                        </span>
      <span class="time-select">{{ formData.timeStart }}时—{{ formData.timeEnd }}时</span>
          </div>
          <div class="pickerData">
            <span>结束时间:</span>
            <span class="pickerTable">
                            <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
                        </span>
    <div class="echarts-form">
      <span class="demonstration">开始时间：</span>
      <el-date-picker
          v-model="formData.timeStart"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">结束时间：</span>
      <el-date-picker
          v-model="formData.timeEnd"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime">
      </el-date-picker>
      <span class="demonstration">采样点数：</span>
      <el-select v-model="formData.region" placeholder="请选择" style="width: 80px">
        <el-option v-for="(item,index) in formData.regionList" :key="index" :label="item" :value="item"></el-option>
      </el-select>
      <el-button @click="querySearch">查询</el-button>
      <el-button @click="ScheduleShow">明细表</el-button>
          </div>
        </div>
        <div class="detailbtn">查询</div>
        <div class="detailbtn" @click="ScheduleShow">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="wastegashour"></div>
    <div class="echarts-chart">
      <div style="width:5rem;height:1.5rem;" ref="wastegashour"></div>
    </div>
    <!--    明细弹框-->
    <el-dialog :visible.sync="showSchedule"
@@ -36,10 +40,10 @@
</template>

<script>
// import PublicDetailedList from '@components/BaseNav/PublicBounced/common/echarts/PublicDetailedList'
import Scheduleof from '@components/BaseNav/WasteGas/Scheduleof'
import PublicDataStandard from '../PublicDataStandard'

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

@@ -94,9 +98,11 @@
            val: null
          }
        }],
      formInline: {
        timeStart: null,
        timeEnd: null
      formData: {
        region: '25',
        regionList: [25, 50, 75, 100],
        timeStart: dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
        timeEnd: dayjs().format('YYYY-MM-DD HH:mm:ss')
      },
      showSchedule: false,
      dataType: 2,
@@ -115,15 +121,15 @@
    ScheduleShow () {
      this.showSchedule = !this.showSchedule
    },
    querySearch () {
      console.log('查询')
    },
    async initnData () {
      // 用于接口数据请求的参数 开始/结束时间 || 可选择查询的开始/结束时间
      this.formInline.timeEnd = dayjs().format('YYYY-MM-DD HH:mm:ss')
      this.formInline.timeStart = dayjs().subtract(24, 'hours').format('YYYY-MM-DD HH:mm:ss')
      const data = {
        onLineMonEmissPointId: 23,
        monItemId: 28,
        beginTime: this.formInline.timeStart,
        endTime: this.formInline.timeEnd,
        beginTime: this.formData.timeStart,
        endTime: this.formData.timeEnd,
        dataType: this.dataType
      }
      const result = (await mapApi.getWasteGasMonData(data)).Result.DataInfo
@@ -530,7 +536,7 @@
        },
        grid: { // 网格
          top: '20%',
          left: '5%'
          left: '15%'
          // containLabel: true
        },
        legend: { // 图例
@@ -655,106 +661,4 @@
</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;
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 0.02rem;

    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

      > div:first-child {
        margin-right: 10px;
      }

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px
        }

        .pickerTable {
          margin-left: 3px;
        }
      }
    }

    /deep/ .el-date-editor--datetime {
      width: 100%;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 1rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 0.08rem;
      height: 0.15rem;
      padding: 0;
      border: none;
      z-index: 9999;
      text-align: center;
      //padding-left:20px ;
      //padding: 0!important;
    }

    /deep/ .el-input__icon {
      display: block;
      width: 1rem;
      height: 0.15rem;
      line-height: 0.15rem;
      cursor: pointer;
      font-size: 0;
    }

    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }

    .detailbtn {
      background-color: #2e4967;
      text-align: center;
      padding: 0 7px;
      height: 0.15rem;
      line-height: 0.15rem;
      border-radius: 4px;
      margin-right: 6px;
    }
  }

  .el-dialog-div {
    overflow: auto;
  }

  #echarts {
    margin: 0;
    padding: 0;
  }
}
</style>

 src/components/panel/ToolBoxPanel.vue

@@ -15,10 +15,12 @@
              v-for="(item,index) in menuList" :key="index"
              :width="item.index === '2'?230 : 150"
              v-model="isShow[index]">
            <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''" @click.native="changeChoose(index)">
            <el-button slot="reference" class="el-button" :class="active === index? 'tools-panel-choose':''"
                       @click.native="changeChoose(index)">
              <i :class="'icon iconfont '+item.icon"></i>
            </el-button>
            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" v-show="item.index!=='2'" :class="indexT==toolActive?'hover':''" >
            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)"
                       v-show="item.index!=='2'" :class="indexT==toolActive?'hover':''">
              <i :class="'icon iconfont '+itemT.icon"></i>
            </el-button>
            <lc-base-map v-show="item.index==='2'"></lc-base-map>
@@ -429,6 +431,7 @@
    -o-transform:rotate(90deg);
    display: block;
  }

.animationChange-enter-active, .animationChange-leave-active {
  transition: all 0.5s;
}
@@ -447,6 +450,7 @@
  .specific-tools {
    display: flex;
    overflow: hidden;

     .el-button {
      z-index: 999;
      padding: 0;
@@ -458,6 +462,7 @@
       border: 0.00521rem solid #00fff6;
      vertical-align: middle !important;
       font-size: 20px;

      .base-map-img {
        position: absolute;
      }
@@ -465,19 +470,23 @@
      .base-map-img:hover {
        cursor: pointer;
      }

      img {
        width: 22px;
        height: 22px;
      }

      .span-default {
        display: block;
        font-size: 10px;
      }

      span {
        display: block;
        font-size: 10px;
      }
    }

    .specific-tools-group .el-button{
      span{
        color: #0B89B5;
@@ -508,6 +517,7 @@
        border: 0.00521rem solid #fff700;
        box-shadow: 0 0 0.03rem #fff700;
        color:#fff700;

        img {
          width: 22px;
          height: 22px;
@@ -531,12 +541,14 @@
        color:@color-tool;
        border:1px solid @color-tool;
      }

      .special-button:hover{
        color: #00fff6;
      }
    }
  }
}

.base-map-inner-panel {
  display: flex;
  justify-content: center;

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

@@ -1,7 +1,7 @@
<template>
  <div class="sewers-analysis-tab">
    <transition name="el-fade-in-linear">
      <el-card>
    <!--    <transition name="el-fade-in-linear">-->
    <!--      <el-card>-->
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="连通性" name="first">
            <el-button type="primary" @click="linkClickStart" size="mini" style="margin-bottom: 5px;"
@@ -16,8 +16,8 @@
            <el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
                       title="根据起始、结束管段进行连通性分析">清除
            </el-button>
            <el-scrollbar style="height:450px">
              <el-card shadow="hover">
        <!--        <el-scrollbar style="height:450px">-->
        <!--          <el-card shadow="hover">-->
                <span class="fixed-style">起始管段</span>
                <el-table
                    ref="singleTable"
@@ -150,17 +150,20 @@
                  </el-table-column>

                </el-table>
              </el-card>
            </el-scrollbar>
        <!--          </el-card>-->
        <!--        </el-scrollbar>-->
          </el-tab-pane>
          <el-tab-pane label="爆管" name="second" style="color: #cccccc">爆管（相关开关）
      <el-tab-pane label="爆管" name="second" style="color: #cccccc">
        <el-row>
          <span>爆管（相关开关）</span>
            <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;" title="地图上点击选择发生爆管的管段">
              选择管段
            </el-button>
            <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;" title="清除绘制">清除
            </el-button>
            <el-card shadow="hover">
              <span class="fixed-style">发生爆裂的管段</span>
        </el-row>
        <!--        <el-card shadow="hover">-->
        <span class="fixed-style">发生爆裂的管段:</span>
              <el-table
                  ref="singleTable"
                  highlight-current-row
@@ -202,7 +205,7 @@
                  </template>
                </el-table-column>
              </el-table>
              <span class="fixed-style">需要关闭的阀门</span>
        <span class="fixed-style">需要关闭的阀门：</span>
              <el-table
                  highlight-current-row
                  :data="bgFm"
@@ -245,7 +248,7 @@
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
        <!--        </el-card>-->
          </el-tab-pane>
          <el-tab-pane label="流向" name="third">
            <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
@@ -291,7 +294,7 @@
                </template>
              </el-table-column>
            </el-table>
            <span>分析结果</span>
        <span class="fixed-style">分析结果</span>
            <el-table
                highlight-current-row
                max-height="200"
@@ -305,6 +308,7 @@
              >
              </el-table-column>
              <el-table-column
              width="100"
                  sortable
                  prop="pipecode"
                  label="管线名称"
@@ -312,12 +316,14 @@
              </el-table-column>
              <el-table-column
                  sortable
              width="100"
                  prop="startpoint"
                  label="起点编号"
              >
              </el-table-column>
              <el-table-column
                  sortable
              width="100"
                  prop="endpointnu"
                  label="终点编号"
              >
@@ -342,7 +348,7 @@
            </el-button>
            <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
            </el-button>
            <el-card class="box-card">
        <!--        <el-card class="box-card">-->
              <div slot="header" class="fixed-style">
                <span>管线查询结果</span>
              </div>
@@ -369,7 +375,7 @@
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
        <!--        </el-card>-->
            <el-card class="box-card">
              <div slot="header" class="fixed-style">
                <span>断面图</span>
@@ -379,8 +385,8 @@
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </transition>
    <!--      </el-card>-->
    <!--    </transition>-->
  </div>
</template>

@@ -453,7 +459,7 @@
  methods: {
    // tab切换
    handleClick (tab, event) {
      console.log(tab, event)
      // console.log(tab, event)
      this.clearLinkPipe()
      this.clearLX()
      this.linkClear()
@@ -475,15 +481,56 @@
    selectClick (e) {
      window.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 mapApi.findPipelineByClickPoint(param)
      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') {

    // 连通性 ===> 地图点击起始管段
    linkClickStart () {
      }
      console.log(res)
    },

    // 连通性 ===> 地图点击起始管段e
    linkClickStart (e) {
      console.log(e)
      console.log('地图点击起始管段')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      console.log('选择起始管段')
      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 = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(0,255,0,.6)' }
        }
      }).addTo(this.map)
      this.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    linkClickEnd () {
@@ -491,66 +538,29 @@
      this.linkType = 0
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    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())
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    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())
    },
    // 连通性 分析结果table列表数据选择点击事件
    linkResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)
      this.currentSelectEnd = 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())
      // 做判断remove
      if (this.currentSelectEndLine != null) {
        this.currentSelectEndLine.remove()
        this.currentSelectEndLine = null
      }

      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(200,0,200,.6)' }
        }
      }).addTo(this.map)
      this.map.panInsideBounds(this.currentSelectEndLine.getBounds())
    },
    // 连通性查询
    async linkQuery () {
      // 设置分析结果为空
      // 每次查询分析结果为空
      this.tableDataLinkResult = []
      if (this.linkPipeline.length > 1) {
        this.linkPipeline.forEach((itm) => {
@@ -568,8 +578,10 @@
        startLineID: this.currentSelectStart.id,
        endLineID: this.currentSelectEnd.id
      }
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
@@ -599,12 +611,32 @@
      //   }
      // const line = main.createFlowLine(param1)
      // const createFlowLine = (param) => {
      //   let flowLine = L.polyline(param.points, param.option)
      //   flowLine.addTo(map)
      //     const flowLine = window.L.polyline(param.points, param.option)
      //     flowLine.addTo(window.map)
      //   return flowLine
      // }
      // this.linkPipeline.push(line)
      // })
    },
    // 连通性 分析结果table列表数据选择点击事件
    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())
    },
    // 连通性的清除功能
    linkClear () {
@@ -769,36 +801,6 @@
        this.flowPipeLine = null
      }
    },

    // 流向数据请求
    async getPipeLine (point) {
      // const param = {
      //   x: point[0],
      //   y: point[1],
      //   radius: 3
      // }
      // console.log(param)

      // 根据参数请求接口数据
      // 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) {
      // 选择要显示的流向线
@@ -946,10 +948,12 @@
}

/deep/ .el-card {
  margin-top: 15px;
  background: rgba(0, 16, 30, 0.5);
  //width: 95%;
  //margin: 5px auto;
  //border: none;
  //background: rgba(0, 16, 30, 0.5);
  //border: 0.00521rem solid @color;
  box-shadow: 0 0 0.03rem @color;
  //box-shadow: 0 0 0.03rem @color;
}

/deep/ .el-card__body {
@@ -957,11 +961,20 @@
}

/deep/ .fixed-style {
  font-size: 12px;
  display: inline-block;
  color: #ffffff;
  margin: 15px;
}

/deep/ th.is-leaf {
  border: none !important;
}

/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
  background: none;
}

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