管线分析

ChenZeping

2021-05-08 c5e63df7862894b6fc89d05da0a7ea19f130b172

管线分析

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

@@ -5,20 +5,20 @@
        <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="地图上点击选择需要进行连通分析的管段">起始管段
                           title="地图上点击选择需要进行连通分析的管线">起始管线
                </el-button>
                <el-button type="primary" @click="linkClickEnd" size="mini" style="margin-bottom: 5px;"
                           title="地图上点击与所选管段连通管段">结束管段
                           title="地图上点击与所选管线连通管线">结束管线
                </el-button>
                <el-button type="primary" @click="linkQuery" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管段进行连通性分析">连通性分析
                           title="根据起始、结束管线进行连通性分析">连通性分析
                </el-button>
                <el-button type="primary" @click="handleClick" size="mini" style="margin-bottom: 5px;"
                           title="根据起始、结束管段进行连通性分析">清除
                           title="根据起始、结束管线进行连通性分析">清除
                </el-button>
                <!--        <el-scrollbar style="height:450px">-->
                <!--          <el-card shadow="hover">-->
                <span class="fixed-style">起始管段</span>
                <span class="fixed-style">起始管线</span>
                <el-table
                        class="tableBox"
                        max-height="200"
@@ -63,7 +63,7 @@
                        </template>
                    </el-table-column>
                </el-table>
                <span class="fixed-style">结束管段</span>
                <span class="fixed-style">结束管线</span>
                <el-table
                        class="tableBox"
                        height="100"
@@ -163,15 +163,15 @@
                <el-row>
                    <span>爆管（相关开关）</span>
                    <el-button type="primary" @click="bgClick" size="mini" style="margin-bottom: 5px;"
                               title="地图上点击选择发生爆管的管段">
                        选择管段
                               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>
                <span class="fixed-style">发生爆裂的管线</span>
                <el-table
                        max-height="200"
                        class="tableBox"
@@ -273,7 +273,7 @@
            <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"
@@ -458,23 +458,23 @@
      bgMarker: null,
      hdmParam: null,

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

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

      // 流向 选择的管段 的table表格数据
      // 流向 选择的管线 的table表格数据
      tableDataLiuxiang: [],
      // 流向 分析结果 的table表格数据
      lxTableDataResult: [],
@@ -570,16 +570,16 @@
      })
    },

    // 连通性 ===> 地图点击起始管段e
    // 连通性 ===> 地图点击起始管线e
    linkClickStart (e) {
      console.log(e)
      console.log('地图点击起始管段')
      console.log('地图点击起始管线')
      this.linkType = 1
      this.selectPipeLine()
    },
    // 连通性 起始管段 table列表数据 选择数据事件 的点击事件
    // 连通性 起始管线 table列表数据 选择数据事件 的点击事件
    linkSelectStart (e) {
      console.log('选择起始管段')
      console.log('选择起始管线')
      // this.$refs.singleTable.setCurrentRow(e)
      this.currentSelectStart = e
      if (this.currentSelectStartLine != null) {
@@ -597,15 +597,15 @@
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectStartLine.getBounds())
    },
    // 连通性 ===> 地图点击结束管段
    // 连通性 ===> 地图点击结束管线
    linkClickEnd () {
      console.log('地图点击结束管段')
      console.log('地图点击结束管线')
      this.linkType = 0
      this.selectPipeLine()
    },
    // 连通性 结束管段 table列表数据 选择数据事件 的点击事件
    // 连通性 结束管线 table列表数据 选择数据事件 的点击事件
    linkSelectEnd (e) {
      console.log('选择结束管段')
      console.log('选择结束管线')
      this.currentSelectEnd = e

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

@@ -652,7 +652,7 @@
      console.log(res)
      // 判断数据结果 === 0 则没有请求到数据
      if (res.data.length === 0) {
        this.$message('没有找到连通的管段')
        this.$message('没有找到连通的管线')
        this.currentLinkIsTrue = '不连通'
        return
      }
@@ -722,12 +722,12 @@
      }
    },

    // 爆管 ===> 选择管段
    // 爆管 ===> 选择管线
    bgClick () {
      this.selectPipeLine()
    },
    async bgSelect (e) {
      console.log('选择爆管管段')
      console.log('选择爆管管线')
      console.log(e)
      this.bgFm = []
      if (this.bgMarker != null) {
@@ -1072,32 +1072,6 @@
</script>

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

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

    /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/ .el-table .has-gutter tr th {
        border: none !important;
    }
@@ -1108,50 +1082,6 @@

    /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--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 .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/ .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__body {
        padding: 0;
    }

    /deep/ .fixed-style {
@@ -1169,13 +1099,43 @@
        background: none;
    }

    /deep/ .el-table__fixed-right {
        bottom: 0;
        padding: 0;
        margin: 0;
    }
    /*/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {*/
    /*    padding-left: 20px;*/
    /*}*/

    /deep/ .fixed-table {
        background: rgba(0, 16, 30, 0.9) !important;
    }
    /*/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 .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/ .panel-right ::-webkit-scrollbar-thumb {*/
    /*    background: none;*/
    /*    border: none;*/
    /*}*/

    /*/deep/ .el-card__body {*/
    /*    padding: 0;*/
    /*}*/
    /*/deep/ .el-table__fixed-right {*/
    /*    bottom: 0;*/
    /*    padding: 0;*/
    /*    margin: 0;*/
    /*}*/
</style>