样式/接口调整

ChenZeping

2021-04-27 8e8340911055cea995d410d98e0eeabf84e2e53f

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

@@ -1,386 +1,392 @@
<template>
  <div class="sewers-analysis-tab">
    <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;"
                       title="地图上点击选择需要进行连通分析的管段">起始管段
            </el-button>
            <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                       title="地图上点击与所选管段连通管段">结束管段
            </el-button>
            <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                       title="根据起始、结束管段进行连通性分析">连通性分析
            </el-button>
            <el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
                       title="根据起始、结束管段进行连通性分析">清除
            </el-button>
            <el-scrollbar style="height:450px">
              <el-card shadow="hover">
                <span class="fixed-style">起始管段</span>
                <el-table
                    ref="singleTable"
                    highlight-current-row
                    :data="tableDataLinkStart"
                    @row-click="linkSelectStart"
                    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-table"
                      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="fixed-style">结束管段</span>
                <el-table
                    max-height="200"
                    highlight-current-row
                    :data="tableDataLinkEnd"
                    @row-click="linkSelectEnd"
                    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-table"
                      fixed="right"
                      label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <span class="fixed-style">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
                <el-table
                    highlight-current-row
                    max-height="200"
                    :data="tableDataLinkResult"
                    @row-click="linkResultSelect"
                    style="width: 100%" size="mini">
    <!--    <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;"
                   title="地图上点击选择需要进行连通分析的管段">起始管段
        </el-button>
        <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                   title="地图上点击与所选管段连通管段">结束管段
        </el-button>
        <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                   title="根据起始、结束管段进行连通性分析">连通性分析
        </el-button>
        <el-button type="primary" @click="linkClear" size="mini" style="margin-bottom: 5px;"
                   title="根据起始、结束管段进行连通性分析">清除
        </el-button>
        <!--        <el-scrollbar style="height:450px">-->
        <!--          <el-card shadow="hover">-->
        <span class="fixed-style">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableDataLinkStart"
            @row-click="linkSelectStart"
            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-table"
              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="fixed-style">结束管段</span>
        <el-table
            max-height="200"
            highlight-current-row
            :data="tableDataLinkEnd"
            @row-click="linkSelectEnd"
            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-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkSelectEnd(scope.row)" type="text" size="small">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span class="fixed-style">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
        <el-table
            highlight-current-row
            max-height="200"
            :data="tableDataLinkResult"
            @row-click="linkResultSelect"
            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-table"
                      fixed="right"
                      label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                    </template>
                  </el-table-column>
          <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-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
            </template>
          </el-table-column>

                </el-table>
              </el-card>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane label="爆管" name="second" style="color: #cccccc">爆管（相关开关）
            <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-table
                  ref="singleTable"
                  highlight-current-row
                  :data="bgPipeLine"
                  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-table"
                    fixed="right"
                    label="操作"
                >
                  <template slot-scope="scope">
                    <el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <span class="fixed-style">需要关闭的阀门</span>
              <el-table
                  highlight-current-row
                  :data="bgFm"
                  @row-click="bgFmClick"
                  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>
        <!--          </el-card>-->
        <!--        </el-scrollbar>-->
      </el-tab-pane>
      <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-row>
        <!--        <el-card shadow="hover">-->
        <span class="fixed-style">发生爆裂的管段:</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="bgPipeLine"
            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-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="bgSelect(scope.row)" type="text" size="small">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span class="fixed-style">需要关闭的阀门：</span>
        <el-table
            highlight-current-row
            :data="bgFm"
            @row-click="bgFmClick"
            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-table"
                    fixed="right"
                    label="操作"
                >
                  <template slot-scope="scope">
                    <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="流向" name="third">
            <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
                       title="地图上点击要显示流向的管线">
              选择管段
            </el-button>
            <el-table
                :data="tableDataLiuxiang" 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-table"
                  fixed="right"
                  label="操作"
                  width="100"
              >
                <template slot-scope="scope">
                  <el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button>
                </template>
              </el-table-column>
            </el-table>
            <span>分析结果</span>
            <el-table
                highlight-current-row
                max-height="200"
                :data="lxTableDataResult"
                @row-click="lxResultSelect"
                style="width: 100%" size="mini">
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        </el-card>-->
      </el-tab-pane>
      <el-tab-pane label="流向" name="third">
        <el-button type="primary" @click="selectPipeLine" size="mini" style="margin-bottom: 5px;"
                   title="地图上点击要显示流向的管线">
          选择管段
        </el-button>
        <el-table
            :data="tableDataLiuxiang" 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-table"
              fixed="right"
              label="操作"
              width="100"
          >
            <template slot-scope="scope">
              <el-button @click="lxQuery(scope.row)" type="text" size="small">显示流向</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span class="fixed-style">分析结果</span>
        <el-table
            highlight-current-row
            max-height="200"
            :data="lxTableDataResult"
            @row-click="lxResultSelect"
            style="width: 100%" size="mini">

              <el-table-column
                  prop="lineloopna"
                  label="管线类型"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  prop="pipecode"
                  label="管线名称"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  prop="startpoint"
                  label="起点编号"
              >
              </el-table-column>
              <el-table-column
                  sortable
                  prop="endpointnu"
                  label="终点编号"
              >
              </el-table-column>
              <el-table-column
                  class-name="fixed-table"
                  fixed="right"
                  label="操作"
              >
                <template slot-scope="scope">
                  <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                </template>
              </el-table-column>
          <el-table-column
              prop="lineloopna"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              width="100"
              sortable
              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-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
            </template>
          </el-table-column>

            </el-table>
          </el-tab-pane>
          <el-tab-pane label="横断面" name="fourth">
            <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;" title="地图上绘制要进行分析截断面的线">
              绘制线段
            </el-button>
            <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析
            </el-button>
            <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
            </el-button>
            <el-card class="box-card">
              <div slot="header" class="fixed-style">
                <span>管线查询结果</span>
              </div>
              <el-table
                  :data="tableData"
                  style="width: 100%" @row-click="selectRow" size="mini">
                <el-table-column
                    prop="name"
                    label="管线名称"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="管线类型"
                    width="180">
                </el-table-column>
                <el-table-column
                    class-name="fixed-table"
                    fixed="right"
                    label="图表查看"
                >
                  <template slot-scope="scope">
                    <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="fixed-style">
                <span>断面图</span>
              </div>
              <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
              <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </transition>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="横断面" name="fourth">
        <el-button type="primary" @click="drawLine" size="mini" style="margin-bottom: 5px;" title="地图上绘制要进行分析截断面的线">
          绘制线段
        </el-button>
        <el-button type="primary" @click="jdmQuery" size="mini" style="margin-bottom: 5px;" title="截断面分析">截断面分析
        </el-button>
        <el-button type="primary" @click="jdmClear" size="mini" style="margin-bottom: 5px;" title="清除截断面分析结果">清除
        </el-button>
        <!--        <el-card class="box-card">-->
        <div slot="header" class="fixed-style">
          <span>管线查询结果</span>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%" @row-click="selectRow" size="mini">
          <el-table-column
              prop="name"
              label="管线名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="type"
              label="管线类型"
              width="180">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="图表查看"
          >
            <template slot-scope="scope">
              <el-button @click="selectRow(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--        </el-card>-->
        <el-card class="box-card">
          <div slot="header" class="fixed-style">
            <span>断面图</span>
          </div>
          <span v-show="!myChartShow" style="color: #909399;font-size: 12px;">暂无数据</span>
          <div v-show="myChartShow" id="echarts_box" ref="myChart" style="width: 600px;height:300px;"></div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!--      </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('没有找到连通的管段')
@@ -597,14 +609,34 @@
      //       color: '#ffff00'
      //     }
      //   }
      // const line = main.createFlowLine(param1)
      // const createFlowLine = (param) => {
      //   let flowLine = L.polyline(param.points, param.option)
      //   flowLine.addTo(map)
      //   return flowLine
      // }
      // this.linkPipeline.push(line)
      //   const line = main.createFlowLine(param1)
      //   const createFlowLine = (param) => {
      //     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;
}