派生自 wuyushui/SewerAndRainNetwork

陈泽平
2021-05-18 3b1b5623e44135a8e693698cb7a30adf66d86964
src/components/panel/topicSearch/SewersSelect/SewersAnalysis.vue
@@ -1,139 +1,14 @@
<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-row>
                    <el-button type="primary" @click="linkClickStart" size="mini" title="地图上点击选择需要进行连通分析的管段">起始管段
                    </el-button>
                    <el-button type="primary" @click="linkClickEnd" size="mini" title="地图上点击与所选管段连通管段">结束管段</el-button>
                    <el-button type="primary" @click="linkQuery" size="mini" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
                    <el-button type="primary" @click="handleClick" size="mini" title="根据起始、结束管段进行连通性分析">清除</el-button>
                </el-row>
                <!--        <el-scrollbar style="height:450px">-->
                <!--          <el-card shadow="hover">-->
                <span class="fixed-style">起始管段</span>
                <el-table class="tableBox" height="100" max-height="200" :data="tableDataLinkStart"
                          highlight-current-row 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 width="40" 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="操作" width="40">
                        <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"
                          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="操作" width="40">
                        <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>-->
                <Connectivity></Connectivity>
            </el-tab-pane>
            <el-tab-pane label="爆管" style="color: #cccccc" name="second">
                <el-row>
                    <span>爆管(相关开关)</span>
                    <el-button type="primary" @click="bgClick" size="mini" title="地图上点击选择发生爆管的管段">选择管段</el-button>
                    <el-button type="primary" @click="handleClick" size="mini" 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="操作" width="40">
                        <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="pipecode" 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="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="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--        </el-card>-->
                <Tube></Tube>
            </el-tab-pane>
            <el-tab-pane label="流向" name="third">
                <el-button type="primary" @click="selectPipeLine" size="mini" highlight-current-row
                           title="地图上点击要显示流向的管段">选择管段
                </el-button>
                <el-table max-height="200" class="tableBox" highlight-current-row :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="60">
                        <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" fixed="right" label="操作" width="40">
                        <template slot-scope="scope">
                            <el-button @click="linkResultSelect(scope.row)" type="text" size="small">定位</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Flow></Flow>
            </el-tab-pane>
            <el-tab-pane label="横断面" name="fourth">
                <el-row>
@@ -170,8 +45,6 @@
                     style="width:350px;height:200px;margin: 0 auto"></div><!-- v-show="myChartShow" -->
            </el-tab-pane>
        </el-tabs>
        <!--</el-card>-->
        <!--</transition>-->
    </div>
</template>
@@ -181,10 +54,17 @@
import DrawLine from './AnalysisChoose/DrawLine'
import mapApi from '../../../../api/mapApi'
import { pulseEffect } from '../../../../utils/utils'
// import iconUrl from '../../../../assets/images/other.png'
import Connectivity from './AnalysisChoose/Connectivity'
import Tube from './AnalysisChoose/Tube'
import Flow from './AnalysisChoose/Flow'
export default {
  name: 'SewersAnalysis',
  components: {
    Connectivity,
    Tube,
    Flow
  },
  data () {
    return {
      // 地图点击类型 first连通性点击  second爆管点击  third流向点击 fourth横断面
@@ -270,7 +150,7 @@
    // 地图上点击
    selectPipeLine () {
      window.map.on('click', this.selectClick)
      // // 关闭弹窗
      // 关闭弹窗
      window.layerFactory.clickSwitch = false
    },
    // 地图上点击回调