管线分析横截面

ChenZeping

2021-05-06 1929431aba55ed59dc09564fd1ee6c0fa3ec0a9f

管线分析横截面

 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>
@@ -472,7 +479,10 @@
      lxTableDataResult: [],

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

      echartsList: []

    }
  },
  mounted () {
@@ -786,8 +796,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 +851,6 @@
        this.linkPipeline.push(line)
      })
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    // getres (res) {
    //
    // },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
@@ -929,10 +935,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,26 +943,106 @@
        }
        this.tableData.push(obj)
      }
      this.dealWithData(res)
    },
    dealWithData (e) {
      const dataSeries = e.data.point
      let tempData
      const storeData = []
      const dataList = []
      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']
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        yAxis: {
          type: 'value'
        legend: {
          // data: ['直接访问', '搜索引擎']
          data: dataList
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          // data: dataSeries,
          type: 'line'
        }]
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        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)
@@ -967,6 +1050,8 @@
    // 横断面清除
    jdmClear () {
      this.hdmParam = null
      this.tableData = []
      this.myChartShow = false
      if (this.measure != null) {
        this.measure.destory()
      }
@@ -976,104 +1061,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>

 src/components/table/SummarySheet.vue

@@ -1,36 +1,36 @@
<template>
  <div class="summary-sheets">
    <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
      <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
        <i class="el-icon-tickets icon"></i>
      </div>
    </el-tooltip>
    <transition name="animationChange">
      <div class="subtopic" v-if="subtopic">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
          <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('统计表')">
            <i class="icon iconfont iconbiaoge2"></i>
            <!--<span class="icon-name">统计表</span>-->
          </div>
    <div class="summary-sheets">
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="报表" placement="left">
            <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn">
                <i class="el-icon-tickets icon"></i>
            </div>
        </el-tooltip>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
          <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('指标')">
            <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
            <i class="el-icon-office-building icon"></i>
          </div>
        </el-tooltip>
        <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
          <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('预报警')">
            <i class="icon iconfont iconbaojing01"></i>
            <!--<span class="icon-name">预报警</span>-->
          </div>
        </el-tooltip>
      </div>
    </transition>
    <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
    <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
    <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
  </div>
        <transition name="animationChange">
            <div class="subtopic" v-if="subtopic">
                <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="统计表" placement="bottom">
                    <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('统计表')">
                        <i class="icon iconfont iconbiaoge2"></i>
                        <!--<span class="icon-name">统计表</span>-->
                    </div>
                </el-tooltip>
                <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="指标" placement="bottom">
                    <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('指标')">
                        <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> -->
                        <i class="el-icon-office-building icon"></i>
                    </div>
                </el-tooltip>
                <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="预报警" placement="bottom">
                    <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('预报警')">
                        <i class="icon iconfont iconbaojing01"></i>
                        <!--<span class="icon-name">预报警</span>-->
                    </div>
                </el-tooltip>
            </div>
        </transition>
        <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover>
        <Warn v-show="companyVisible" ref="titlePropWarn"></Warn>
        <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics>
    </div>
</template>

<script>
@@ -56,26 +56,15 @@
      subtopic: false
    }
  },
  // mounted () {
  //   const that = this
  //   bus.$on('changeState', function (state) {
  //     if (state.num !== 2 && state.type) {
  //       that.subtopic = false
  //     }
  //   })
  //   this.$nextTick(() => {
  //     this.$refs.summarySheets.$on('closeDialog', () => {
  //       that.summaryVisible = false
  //     })
  //     this.$refs.warnDialog.$on('closeDialog', () => {
  //       that.warnVisible = false
  //     })
  //     this.$refs.indexStatisticsDialog.$on('closeDialog', () => {
  //       that.companyVisible = false
  //     })
  //   })
  // },
  methods: {
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    },
    closeBtn (item) {
      this.$refs.titleProp.refsDatatitle(item)
      this.summaryVisible = !this.summaryVisible
@@ -93,74 +82,66 @@
      this.warnVisible = !this.warnVisible
      this.summaryVisible = false
      this.companyVisible = false
    },
    subtopicBtn () {
      this.subtopic = !this.subtopic
      const state = {
        type: this.subtopic,
        num: 2
      }
      bus.$emit('changeState', state)
    }
  }
}
</script>

<style lang="less">
.summary-sheets {
  position: absolute;
  display: inline-flex;
  overflow: hidden;
  top: 0.42979rem;
  left: 0.14583rem;
  /*width: 850px;*/
  /*height: 265px;*/
  z-index: 500;
    .summary-sheets {
        position: absolute;
        display: inline-flex;
        overflow: hidden;
        top: 0.42979rem;
        left: 0.14583rem;
        /*width: 850px;*/
        /*height: 265px;*/
        z-index: 500;

  .subtopic {
    display: inline-flex;
        .subtopic {
            display: inline-flex;

    .iconBtn {
      margin-left: 0.03rem;
      border-color: #00fff6;
      color: #00fff6;
            .iconBtn {
                margin-left: 0.03rem;
                border-color: #00fff6;
                color: #00fff6;
            }

            .iconBtn.active-button {
                //border-color:#00fff6 !important;
                //color:#00fff6 !important;
            }
        }

        .dialog {
            //width: 800px;
            //height: 300px;
            position: absolute;
            top: 15%;
            left: 3rem;
        }

        .animationChange-enter-active, .animationChange-leave-active {
            transition: all 0.5s;
        }

        .animationChange-enter, .animationChange-leave-to {
            opacity: 0;
            transform: translateX(-100px);
        }

        /*color: #fff;*/

        .el-icon-c-scale-to-original {
            width: 30px;
            height: 30px;
            font-size: 30px;
        }

        .el-dialog.el-dialog--center {
            left: 0.5rem;
            top: 0.73979rem;
        }

    }

    .iconBtn.active-button {
      //border-color:#00fff6 !important;
      //color:#00fff6 !important;
    }
  }

  .dialog {
    //width: 800px;
    //height: 300px;
    position: absolute;
    top: 15%;
    left: 3rem;
  }

  .animationChange-enter-active, .animationChange-leave-active {
    transition: all 0.5s;
  }

  .animationChange-enter, .animationChange-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

  /*color: #fff;*/

  .el-icon-c-scale-to-original {
    width: 30px;
    height: 30px;
    font-size: 30px;
  }

  .el-dialog.el-dialog--center {
    left: 0.5rem;
    top: 0.73979rem;
  }

}
</style>