弹框修改

chenzeping

2021-04-19 253590ef9d0ec11b526321c2c18d60c53990fd45

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

@@ -1,90 +1,109 @@
<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="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="操作"
          >
            <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>
@@ -94,12 +113,45 @@
  name: 'Connectivity',
  data () {
    return {
      // 连通性
      linkType: 1, // 1  连通性起始管段   0 连通性结束管段 用来判断是点击了起始  还是结束管段
      tableData: []
    }
  },
  methods: {
    // 地图点击起始管段
    linkClickStart () {
      console.log('地图点击起始管段')
      this.linkType = 1
      // this.selectPipeLine()
    },
    // 地图点击结束管段
    linkClickEnd () {
      console.log('地图点击结束管段')
      this.linkType = 0
      // this.selectPipeLine()
    },
    // 连通性分析
    linkQuery () {
      console.log('点击连通性分析')
    },
    // 清除功能
    linkClear () {
      console.log('点击清除')
    },
    // 选择起始管段
    linkSelectStart () {
      console.log('选择起始管段')
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .fixed-tablea {
  background: rgba(0, 16, 30, 1) !important;
}
/deep/ .el-table__fixed-right::before {
  background: none;
}
</style>