管线分析

chenzeping

2021-04-19 39638e1ec95822792c7520dcd0f5a807957cadde

 src/components/panel/topicSearch/SewersSelect/AnalysisChoose/Connectivity.vue

@@ -1,104 +1,161 @@
<template>
  <div class="connectivity">
    <el-row>
      <el-button type="primary" size="mini">起始管段</el-button>
      <el-button type="primary" size="mini">结束管段</el-button>
      <el-button type="primary" size="mini">连通性分析</el-button>
      <el-button type="primary" size="mini">清除</el-button>
      <el-button type="primary" size="mini" @click="linkClickStart" title="地图上点击选择需要进行连通分析的管段">起始管段</el-button>
      <el-button type="primary" size="mini" @click="linkClickEnd" title="地图上点击与所选管段连通管段">结束管段</el-button>
      <el-button type="primary" size="mini" @click="linkQuery" title="根据起始、结束管段进行连通性分析">连通性分析</el-button>
      <el-button type="primary" size="mini" @click="linkClear" title="根据起始、结束管段进行连通性分析">清除</el-button>
    </el-row>
    <el-card class="box-card">
      <span class="clearfix">起始管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">结束管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">分析结果</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线类型">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线名称">
        </el-table-column>
        <el-table-column
            prop="province"
            label="起点编号">
        </el-table-column>
        <el-table-column
            prop="city"
            label="终点编号">
        </el-table-column>
        <el-table-column
            class-name="fixed-table"
            fixed="right"
            label="操作">
        </el-table-column>
      </el-table>
      <el-scrollbar style="height:2rem">
        <span class="clearfix">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="startingSection"
            max-height="200"
            style="width: 100%" size="mini">
          <el-table-column
              prop="lineloopna"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="pipecode"
              label="管线名称"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-tablea"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="linkSelectStart(scope.row)" type="text" size="small">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <span class="clearfix">结束管段</span>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="管线类型">
          </el-table-column>
          <el-table-column
              prop="name"
              label="管线名称">
          </el-table-column>
          <el-table-column
              prop="province"
              label="起点编号">
          </el-table-column>
          <el-table-column
              prop="city"
              label="终点编号">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作">
          </el-table-column>
        </el-table>
        <span class="clearfix">分析结果</span>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="管线类型">
          </el-table-column>
          <el-table-column
              prop="name"
              label="管线名称">
          </el-table-column>
          <el-table-column
              prop="province"
              label="起点编号">
          </el-table-column>
          <el-table-column
              prop="city"
              label="终点编号">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作">
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'Connectivity',
  data () {
    return {
      tableData: []
      // 连通性
      linkType: 1, // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      map: window.map,
      tableData: [],
      startingSection: []
    }
  },
  methods: {
    // 流向地图上点击
    selectPipeLine () {
      this.map.on('click', this.selectClick)
    },
    // 地图上点击回调
    selectClick (e) {
      this.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      console.log(point)
      // 根据数据进行数据请求
      // this.getPipeLine(point)
    },
    // 数据请求
    async getPipeLine (point) {
      const param = {
        x: point[0],
        y: point[1],
        radius: 3
      }
      console.log(param)
      // const res = await api.getPipeline(param)
      // console.log(res)
      // this.startingSection = res.data
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .fixed-tablea {
  background: rgba(0, 16, 30, 1) !important;
}

/deep/ .el-table__fixed-right::before {
  background: none;
}
</style>