管线分析

ChenZeping

2021-05-08 c5e63df7862894b6fc89d05da0a7ea19f130b172

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

@@ -1,394 +1,427 @@
<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="handleClick" 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
            :data="tableDataLinkStart"
            max-height="200"
            @row-click="linkSelectStart"
            style="width: 100%" size="mini">
          <el-table-column
              prop="datasource"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="material"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="material"
              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
            height="100"
            max-height="200"
            highlight-current-row
            :data="tableDataLinkEnd"
            @row-click="linkSelectEnd"
            style="width: 100%" size="mini">
          <el-table-column
              prop="datasource"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="material"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="material"
              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">
    <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="handleClick" 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
                        class="tableBox"
                        max-height="200"
                        highlight-current-row
                        :data="tableDataLinkStart"
                        @row-click="linkSelectStart"
                        style="width: 100%" size="mini">
                    <el-table-column
                            prop="datasource"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="终点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            class-name="fixed-table"
                            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
                        class="tableBox"
                        height="100"
                        max-height="200"
                        highlight-current-row
                        :data="tableDataLinkEnd"
                        @row-click="linkSelectEnd"
                        style="width: 100%" size="mini">
                    <el-table-column
                            prop="datasource"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            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;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
                <el-table
                        class="tableBox"
                        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="material"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            width="100"
                            prop="material"
                            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="爆管" style=";color: #cccccc" name="second">
        <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="pipecode"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              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="爆管" style=";color: #cccccc" name="second">
                <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
                        max-height="200"
                        class="tableBox"
                        ref="singleTable"
                        highlight-current-row
                        :data="bgPipeLine"
                        style="width: 100%" size="mini">
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            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
                        class="tableBox"
                        highlight-current-row
                        max-height="200"
                        :data="bgFm"
                        @row-click="bgFmClick"
                        style="width: 100%" size="mini">
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="lineloopna"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            sortable
                            :show-overflow-tooltip="true"
                            width="100"
                            prop="startpoint"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            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 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
                            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
                        max-height="200"
                        class="tableBox"
                        :data="tableDataLiuxiang" size="mini">
                    <el-table-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            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
                        class="tableBox"
                        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
              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-column
                            :show-overflow-tooltip="true"
                            prop="pipecode"
                            label="管线类型"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            width="100"
                            sortable
                            prop="pipecode"
                            label="管线名称"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            label="起点编号"
                    >
                    </el-table-column>
                    <el-table-column
                            :show-overflow-tooltip="true"
                            sortable
                            width="100"
                            prop="pipecode"
                            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: 350px;height:200px;"></div>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!--      </el-card>-->
    <!--    </transition>-->
  </div>
                </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
                        class="tableBox"
                        :data="tableData"
                        max-height="200"
                        style="width: 100%" @row-click="selectRow" size="mini">
                    <el-table-column
                            prop="pipename"
                            label="管线名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mediumtype"
                            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: 350px;height:200px;"></div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
        <!--</el-card>-->
        <!--</transition>-->
    </div>
</template>

<script>
@@ -407,6 +440,7 @@
      map: window.map,

      myChart: null,
      options: [],
      myChartShow: false,
      flowPipeLine: null,

@@ -424,29 +458,32 @@
      bgMarker: null,
      hdmParam: null,

      // 连通性  // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      // 连通性  // 1  连通性起始管线   0 连通性结束管线 用来判断是点击了起始  还是结束管线
      linkType: 1,
      // 连通性 起始管段 表格数据
      // 连通性 起始管线 表格数据
      tableDataLinkStart: [],
      // 连通性 结束管段 表格数据
      // 连通性 结束管线 表格数据
      tableDataLinkEnd: [],
      // 连通性 分析结果 展示 => 连通 || 不连通
      currentLinkIsTrue: '',
      // 连通性 分析结果 表格数据
      tableDataLinkResult: [],

      // 爆管 发生爆裂的管段 table表格数据
      // 爆管 发生爆裂的管线 table表格数据
      bgPipeLine: [],
      // 爆管 需要关闭的阀门 table表格数据
      bgFm: [],

      // 流向 选择的管段 的table表格数据
      // 流向 选择的管线 的table表格数据
      tableDataLiuxiang: [],
      // 流向 分析结果 的table表格数据
      lxTableDataResult: [],

      // 横断面 管线查询结果 的table表格数据
      tableData: []
      tableData: [],

      echartsList: []

    }
  },
  mounted () {
@@ -473,6 +510,7 @@
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      this.lxTableDataResult = []
    },

    // 流向地图上点击
@@ -532,16 +570,16 @@
      })
    },

    // 连通性 ===> 地图点击起始管段e
    // 连通性 ===> 地图点击起始管线e
    linkClickStart (e) {
      console.log(e)
      console.log('地图点击起始管段')
      console.log('地图点击起始管线')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    // 连通性 起始管线 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      console.log('选择起始管段')
      console.log('选择起始管线')
      // this.$refs.singleTable.setCurrentRow(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
@@ -551,20 +589,23 @@
      const geom = JSON.parse(e.geomText)
      this.currentSelectStartLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(0,255,0,.6)' }
          return {
            weight: 10,
            color: 'rgba(0,255,0,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    // 连通性 ===> 地图点击结束管线
    linkClickEnd () {
      console.log('地图点击结束管段')
      console.log('地图点击结束管线')
      this.linkType = 0
      this.selectPipeLine()
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    // 连通性 结束管线 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      console.log('选择结束管线')
      this.currentSelectEnd = e

      // 做判断remove
@@ -576,7 +617,10 @@
      const geom = JSON.parse(e.geomText)
      this.currentSelectEndLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return { color: 'rgba(200,0,200,.6)' }
          return {
            weight: 10,
            color: 'rgba(255, 247, 0, 0.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
@@ -591,9 +635,9 @@
        })
        this.linkPipeline = []
      }
      // 判断 如果起始管段 结束管段没有数据 则返回false 提示还未选择起始/结束管段
      // 判断 如果起始管线 结束管线没有数据 则返回false 提示还未选择起始/结束管线
      if (this.currentSelectStart === null || this.currentSelectEnd === null) {
        this.$message('请选择起始管段和结束管段')
        this.$message('请选择起始管线和结束管线')
        return false
      }

@@ -608,7 +652,7 @@
      console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        this.$message('没有找到连通的管线')
        this.currentLinkIsTrue = '不连通'
        return
      }
@@ -655,8 +699,8 @@
            weight: 6
          }
        }
      }).addTo(this.map)
      this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 连通性的清除功能
    linkClear () {
@@ -678,12 +722,12 @@
      }
    },

    // 爆管 ===> 选择管段
    // 爆管 ===> 选择管线
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管段')
      console.log('选择爆管管线')
      console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
@@ -759,15 +803,15 @@
      console.log('点击影响的阀门')
      console.log(e)
      const point = [e.data[0][0], e.data[0][1]]
      // const marker = main.createFlowMarker(point)
      // marker.addTo(this.map)
      const marker = this.createFlowMarker(point)
      marker.addTo(this.map)
      window.map.flyTo(point, 16)
    },

    // 流向分析结果table列表数据点击
    lxResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)
      // console.log('连通性分析结果列表点击')
      // console.log(e)

      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
@@ -814,10 +858,6 @@
        this.linkPipeline.push(line)
      })
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    // getres (res) {
    //
    // },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
@@ -902,31 +942,127 @@
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      const dataPoint = res.data.point
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          pipename: dataPoint[i].pipelines.extraData.pipename,
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype
        }
        this.tableData.push(obj)
      }
      this.dealWithData(res)
    },
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      this.echartsList = []
      for (let i = 0; i < dataSeries.length; i++) {
        if (storeData.length === 0) {
          storeData.push(name)
          tempData = {
            name: dataSeries[i].pipelines.oilPipeID,
            data: e.data.pointInterval,
            type: 'line'
          }
          this.echartsList.push(tempData)
        }
        dataList.push(dataSeries[i].pipelines.oilPipeID)
      }
      // console.log(dataList)
      // const seriesList = e.data.pointInterval
      // let seriesdata
      // for (let i = 0; i < seriesList.length; i++) {
      //   console.log(seriesList[i])
      // }
      // x数据处理
      this.selectRow(dataList)
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    async selectRow (e) {
      console.log(e)
    selectRow (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      const option = {
        xAxis: {
          type: 'category',
          data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        yAxis: {
          type: 'value'
        // legend: {
        //   // data: ['直接访问', '搜索引擎']
        //   data: dataList
        // },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '3%',
          // containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            // data: dataList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
          }
        ],
        // series: [
        //   {
        //     name: '搜索引擎',
        //     type: 'line',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       position: 'top'
        //     },
        //     areaStyle: {},
        //     emphasis: {
        //       focus: 'series'
        //     },
        //     data: [820, 932, 901, 934, 1290, 1330, 1320]
        //   }
        // ]
        series: this.echartsList
      }
      this.myChartShow = true
      this.myChart.setOption(option)
      this.myChart.clear()
      this.myChart.setOption(this.option)
    },
    // 横断面清除
    jdmClear () {
      this.hdmParam = null
      this.tableData = []
      this.option = []
      this.myChartShow = false
      this.myChart.clear()
      if (this.measure != null) {
        this.measure.destory()
      }
@@ -936,90 +1072,70 @@
</script>

<style lang="less" scoped>
///deep/ .el-table__row:hover > td {
//  background: none !important;
//}
//
///deep/ .el-table__row--striped:hover > td {
//  background: none !important;
//}
    /deep/ .el-table .has-gutter tr th {
        border: none !important;
    }

///deep/ .el-table__row.hover-row {
//  background: rgba(0, 16, 30, 0.9) !important
//}
    /deep/ .el-table tbody tr:hover > td {
        background: none !important
    }

/deep/ .el-table .has-gutter tr th {
  border: none !important;
}
    /deep/ .el-tabs__header {
        background: none !important;
    }

/deep/ .el-table tbody tr:hover > td {
  background: none !important
}
    /deep/ .fixed-style {
        font-size: 12px;
        display: inline-block;
        color: #ffffff;
        margin: 15px;
    }

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

/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
    /deep/ .el-table__fixed-right::before, .el-table__fixed::before {
        background: none;
    }

/deep/ .el-tabs--border-card {
  background: none;
  border: none;
  box-shadow: none;
}
    /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/
    /*    padding-left: 20px;*/
    /*}*/

/deep/ .el-tabs--border-card > .el-tabs__header {
  background: none;
  border-bottom: none;
  margin: 0;
}
    /*/deep/ .el-tabs--border-card {*/
    /*    background: none;*/
    /*    border: none;*/
    /*    box-shadow: none;*/
    /*}*/

/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #409EFF;
  background: none;
  border: none;
}
    /*/deep/ .el-tabs--border-card > .el-tabs__header {*/
    /*    background: none;*/
    /*    border-bottom: none;*/
    /*    margin: 0;*/
    /*}*/

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

/deep/ .panel-right ::-webkit-scrollbar-thumb {
  background: none;
  border: none;
}
    /*/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {*/
    /*    border: none;*/
    /*}*/

/deep/ .el-card {
  //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;
}
    /*/deep/ .panel-right ::-webkit-scrollbar-thumb {*/
    /*    background: none;*/
    /*    border: none;*/
    /*}*/

/deep/ .el-card__body {
  padding: 0;
}

/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, 0.9) !important;
}
    /*/deep/ .el-card__body {*/
    /*    padding: 0;*/
    /*}*/
    /*/deep/ .el-table__fixed-right {*/
    /*    bottom: 0;*/
    /*    padding: 0;*/
    /*    margin: 0;*/
    /*}*/
</style>