管线分析

ChenZeping

2021-05-08 cd18d210fcede6bfa0fab319c1d78da7a9f3f228

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

@@ -1,420 +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
            class="tableBox"
            :data="tableDataLinkStart"
            max-height="100"
            @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"
              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"
    <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">

              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="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-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"
                </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>

              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
            </template>
          </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
                        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>
                    <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
                        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>-->
        <!--</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"

              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"

              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"
              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
              :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"
              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
            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"

              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>
        <!--</transition>-->
    </div>
</template>

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

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

@@ -472,7 +480,10 @@
      lxTableDataResult: [],

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

      echartsList: []

    }
  },
  mounted () {
@@ -578,7 +589,10 @@
      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())
@@ -603,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(200,0,200,.6)'
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectEndLine.getBounds())
@@ -786,8 +803,8 @@
      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)
    },

@@ -841,10 +858,6 @@
        this.linkPipeline.push(line)
      })
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    // getres (res) {
    //
    // },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
@@ -929,10 +942,7 @@
      }
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      const dataPoint = res.data.point
      console.log(dataPoint)
      // this.tableData = dataPoint.pipelines.extraData
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          pipename: dataPoint[i].pipelines.extraData.pipename,
@@ -940,33 +950,119 @@
        }
        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)
      // option 数据处理 const dataSeries = e.data.pointInterval
    selectRow (dataList) {
      // console.log(dataList)
      // 3. 使用刚指定的配置项和数据，显示图表
      const option = {
        xAxis: {
          type: 'category',
          // data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
          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],
          // data: dataSeries,
          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()
      }
@@ -976,104 +1072,110 @@
</script>

<style lang="less" scoped>
/*****滚动条***/
/deep/ .tableBox {
  .el-table__fixed-right-patch {
    display: none;
  }
}
    /*****滚动条***/
    /deep/ .tableBox {
        .el-table__fixed-right-patch {
            display: none;
        }
    }

/deep/ .tableBox::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
    /deep/ .tableBox::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
        /*height: 10px;*/
    }

/deep/ .tableBox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #000;
}
    /deep/ .tableBox::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 10px;
        background: #000;
    }

/deep/ .tableBox::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: @background-color;
  border-radius: 10px;
}
    /deep/ .tableBox::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: @background-color;
        border-radius: 10px;
    }

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

/deep/ .el-table tbody tr:hover > td {
  background: none !important
}
    /deep/ .el-table tbody tr:hover > td {
        background: none !important
    }

/deep/ .el-tabs__header {
  background: none !important;
}
    /deep/ .el-tabs__header {
        background: none !important;
    }

/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
    /deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 20px;
    }

/deep/ .el-tabs--border-card {
  background: none;
  border: none;
  box-shadow: none;
}
    /deep/ .el-tabs--border-card {
        background: none;
        border: none;
        box-shadow: none;
    }

/deep/ .el-tabs--border-card > .el-tabs__header {
  background: none;
  border-bottom: none;
  margin: 0;
}
    /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.is-active {
  color: #409EFF;
  background: none;
  border: 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 .el-tabs__item {
  border: none;
}
    /deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
        border: none;
    }

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

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

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

/deep/ .el-table__fixed-right::before, .el-table__fixed::before {
  background: none;
}
    /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-table__fixed-right {
        bottom: 0;
        padding: 0;
        margin: 0;
    }

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