企业应急

ChenZeping02609

2021-05-13 3cd5fc1c2fd8ac0fa52050b4c23bb7fd7cbf954a

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

@@ -9,99 +9,32 @@
    <el-card class="box-card">
      <el-scrollbar style="height:2rem">
        <span class="clearfix">起始管段</span>
        <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            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="操作"
          >
        <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 :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 :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>
@@ -109,39 +42,42 @@
</template>

<script>

export default {
  name: 'Connectivity',
  data () {
    return {
      // 连通性
      linkType: 1, // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      tableData: []
      map: window.map,
      tableData: [],
      startingSection: []
    }
  },
  methods: {
    // 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
      this.linkType = 1
      // this.selectPipeLine()
    // 流向地图上点击
    selectPipeLine () {
      this.map.on('click', this.selectClick)
    },
    // 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管段')
      this.linkType = 0
      // this.selectPipeLine()
    // 地图上点击回调
    selectClick (e) {
      this.map.off('click', this.selectClick)
      const point = [e.latlng.lng, e.latlng.lat]
      console.log(point)
      // 根据数据进行数据请求
      // this.getPipeLine(point)
    },
    // 连通性分析
    linkQuery () {
      console.log('点击连通性分析')
    },
    // 清除功能
    linkClear () {
      console.log('点击清除')
    },
    // 选择起始管段
    linkSelectStart () {
      console.log('选择起始管段')
    // 数据请求
    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
    }
  }
}
@@ -151,6 +87,7 @@
/deep/ .fixed-tablea {
  background: rgba(0, 16, 30, 1) !important;
}

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