Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

徐旺旺

2021-05-10 0a737390691ff057220b1f27d4144934264f7fe2

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

@@ -1,83 +1,94 @@
<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="管线名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">结束管段</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
        </el-table-column>
      </el-table>
      <span class="clearfix">分析结果</span>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="date"
            label="管线名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="管线类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            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 prop="pipecode" label="管线名称"></el-table-column>
          <el-table-column sortable prop="startpoint" label="起点编号"></el-table-column>
          <el-table-column sortable 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>