管线分析功能样式表格修改

ChenZeping

2021-04-30 bc01f19e361a4c05748942de1b968cf85fbee08b

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

@@ -1,7 +1,7 @@
<template>
  <div class="sewers-analysis-tab">
    <!--    <transition name="el-fade-in-linear">-->
    <!--      <el-card>-->
    <!--<transition name="el-fade-in-linear">-->
    <!--<el-card>-->
    <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;"
@@ -20,8 +20,9 @@
        <!--          <el-card shadow="hover">-->
        <span class="fixed-style">起始管段</span>
        <el-table
            class="tableBox"
            :data="tableDataLinkStart"
            max-height="200"
            max-height="100"
            @row-click="linkSelectStart"
            style="width: 100%" size="mini">
          <el-table-column
@@ -53,7 +54,6 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -63,6 +63,7 @@
        </el-table>
        <span class="fixed-style">结束管段</span>
        <el-table
            class="tableBox"
            height="100"
            max-height="200"
            highlight-current-row
@@ -98,7 +99,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"

              label="操作"
          >
            <template slot-scope="scope">
@@ -106,8 +107,9 @@
            </template>
          </el-table-column>
        </el-table>
        <span class="fixed-style">分析结果:<span style="color: red;">{{ currentLinkIsTrue }}</span></span>
        <span class="fixed-style">分析结果:<span style="color: red;margin-left: 15px">{{ currentLinkIsTrue }}</span></span>
        <el-table
            class="tableBox"
            highlight-current-row
            max-height="200"
            :data="tableDataLinkResult"
@@ -115,11 +117,12 @@
            style="width: 100%" size="mini">

          <el-table-column
              prop="lineloopna"
              prop="material"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -129,20 +132,20 @@
          <el-table-column
              sortable
              width="100"
              prop="startpoint"
              prop="material"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              sortable
              width="100"
              prop="endpointnu"
              prop="material"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"

              label="操作"
          >
            <template slot-scope="scope">
@@ -151,8 +154,8 @@
          </el-table-column>

        </el-table>
        <!--          </el-card>-->
        <!--        </el-scrollbar>-->
        <!--</el-card>-->
        <!--</el-scrollbar>-->
      </el-tab-pane>
      <el-tab-pane label="爆管" style=";color: #cccccc" name="second">
        <el-row>
@@ -166,16 +169,20 @@
        <!--        <el-card shadow="hover">-->
        <span class="fixed-style">发生爆裂的管段</span>
        <el-table
            max-height="200"
            class="tableBox"
            ref="singleTable"
            highlight-current-row
            :data="bgPipeLine"
            style="width: 100%" size="mini">
          <el-table-column
              :show-overflow-tooltip="true"
              prop="pipecode"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -183,6 +190,7 @@
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -190,6 +198,7 @@
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -198,7 +207,7 @@
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"

              label="操作"
          >
            <template slot-scope="scope">
@@ -208,17 +217,21 @@
        </el-table>
        <span class="fixed-style">需要关闭的阀门</span>
        <el-table
            class="tableBox"
            highlight-current-row
            max-height="200"
            :data="bgFm"
            @row-click="bgFmClick"
            style="width: 100%" size="mini">
          <el-table-column
              :show-overflow-tooltip="true"
              prop="lineloopna"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              sortable
              :show-overflow-tooltip="true"
              width="100"
              prop="pipecode"
              label="管线名称"
@@ -226,12 +239,14 @@
          </el-table-column>
          <el-table-column
              sortable
              :show-overflow-tooltip="true"
              width="100"
              prop="startpoint"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="endpointnu"
@@ -241,7 +256,7 @@

          <el-table-column
              class-name="fixed-table"
              fixed="right"

              label="操作"
          >
            <template slot-scope="scope">
@@ -257,13 +272,17 @@
          选择管段
        </el-button>
        <el-table
            max-height="200"
            class="tableBox"
            :data="tableDataLiuxiang" size="mini">
          <el-table-column
              prop="lineloopna"
              :show-overflow-tooltip="true"
              prop="pipecode"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="pipecode"
@@ -271,22 +290,23 @@
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="startpoint"
              prop="pipecode"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="endpointnu"
              prop="pipecode"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作"
              width="100"
          >
@@ -297,6 +317,7 @@
        </el-table>
        <span class="fixed-style">分析结果</span>
        <el-table
            class="tableBox"
            highlight-current-row
            max-height="200"
            :data="lxTableDataResult"
@@ -304,11 +325,13 @@
            style="width: 100%" size="mini">

          <el-table-column
              prop="lineloopna"
              :show-overflow-tooltip="true"
              prop="pipecode"
              label="管线类型"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              width="100"
              sortable
              prop="pipecode"
@@ -316,22 +339,23 @@
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="startpoint"
              prop="pipecode"
              label="起点编号"
          >
          </el-table-column>
          <el-table-column
              :show-overflow-tooltip="true"
              sortable
              width="100"
              prop="endpointnu"
              prop="pipecode"
              label="终点编号"
          >
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope">
@@ -354,21 +378,23 @@
          <span>管线查询结果</span>
        </div>
        <el-table
            class="tableBox"
            :data="tableData"
            max-height="200"
            style="width: 100%" @row-click="selectRow" size="mini">
          <el-table-column
              prop="name"
              prop="pipename"
              label="管线名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="type"
              prop="mediumtype"
              label="管线类型"
              width="180">
          </el-table-column>
          <el-table-column
              class-name="fixed-table"
              fixed="right"

              label="图表查看"
          >
            <template slot-scope="scope">
@@ -386,8 +412,8 @@
        </el-card>
      </el-tab-pane>
    </el-tabs>
    <!--      </el-card>-->
    <!--    </transition>-->
    <!--</el-card>-->
    <!--</transition>-->
  </div>
</template>

@@ -465,6 +491,7 @@
      this.clearLX()
      this.linkClear()
      this.jdmClear()
      this.currentLinkIsTrue = ''
      this.bgFm = []
      this.bgPipeLine = []
      this.tableData = []
@@ -472,6 +499,7 @@
      this.tableDataLinkStart = []
      this.tableDataLinkEnd = []
      this.tableDataLinkResult = []
      this.lxTableDataResult = []
    },

    // 流向地图上点击
@@ -503,7 +531,9 @@
        this.bgPipeLine = res.data
      } else if (this.activeName === 'third') {
        this.tableDataLiuxiang = res.data
      } else if (this.activeName === 'fourth') {}
      } else if (this.activeName === 'fourth') {
      }
      // debugger
      console.log(res.data)
    },
    // 流向显示 的方法参数封
@@ -511,6 +541,22 @@
      const flowLine = window.L.polyline(param.points, param.option)
      flowLine.addTo(window.map)
      return flowLine
    },
    createFlowMarker (point) {
      return window.L.marker(point, {
        icon: window.L.divIcon({
          className: 'dIcon',
          html: '<div class="plane live">' +
              // '<img src="'+require("../../assets/images/map/ship.png")+
              '<div style="position: absolute;' +
              '    width: 20px;' +
              '    height: 20px;' +
              '    border-radius: 50%;' +
              '  content: \'\'; background-color: #FF664A;"/>' +
              '<span></span><span></span></div></>',
          iconSize: [90, 36]
        })
      })
    },

    // 连通性 ===> 地图点击起始管段e
@@ -577,11 +623,13 @@
        this.$message('请选择起始管段和结束管段')
        return false
      }

      // 请求数据时的参数
      const param = {
        startLineID: this.currentSelectStart.id,
        endLineID: this.currentSelectEnd.id
        startLineID: this.currentSelectStart.pipesegcode,
        endLineID: this.currentSelectEnd.pipesegcode
      }
      console.log(param)
      // 请求接口和数据
      const res = await mapApi.findConnectedPipelines(param)
      console.log(res)
@@ -619,23 +667,23 @@
    },
    // 连通性 分析结果table列表数据选择点击事件
    linkResultSelect (e) {
      // console.log('连通性分析结果列表点击')
      // console.log(e)
      console.log('连通性分析结果列表点击')
      console.log(e)

      // const geom = JSON.parse(e.geomText)
      // if (this.currentSelectResultLine != null) {
      //   this.currentSelectResultLine.remove()
      //   this.currentSelectResultLine = null
      // }
      // this.currentSelectResultLine = L.geoJSON(geom, {
      //   style: function (feature) {
      //     return {
      //       color: 'rgba(255,0,0,.6)',
      //       weight: 6
      //     }
      //   }
      // }).addTo(this.map)
      // this.map.panInsideBounds(this.currentSelectResultLine.getBounds())
      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
        this.currentSelectResultLine.remove()
        this.currentSelectResultLine = null
      }
      this.currentSelectResultLine = window.L.geoJSON(geom, {
        style: function (feature) {
          return {
            color: 'rgba(255,0,0,.6)',
            weight: 6
          }
        }
      }).addTo(window.map)
      window.map.panInsideBounds(this.currentSelectResultLine.getBounds())
    },
    // 连通性的清除功能
    linkClear () {
@@ -686,7 +734,7 @@

      // 数据请求参数
      const param = {
        lineID: e.id
        lineID: e.pipesegcode
      }
      const res = await mapApi.findLeakages(param)
      console.log(res)
@@ -698,6 +746,7 @@
      }
      res.data.reverse()
      this.bgFm = res.data
      console.log(res.data)

      this.bgPoint = res.data[0].startControlPoint

@@ -705,10 +754,10 @@

      const p = [point.coordinates[1], point.coordinates[0]]

      // this.bgMarker = main.createFlowMarker(p)
      this.bgMarker = this.createFlowMarker(p)
      this.bgMarker.bindTooltip(this.bgPoint.pointnumbe)
      this.bgMarker.addTo(this.map)
      this.map.flyTo(p)
      this.bgMarker.addTo(window.map)
      window.map.flyTo(p)

      const linkPipe = []
      res.data.forEach((itm, idx) => {
@@ -717,7 +766,6 @@
        geom.coordinates.forEach((it, id) => {
          points.push(it.reverse())
        })

        linkPipe.push(points)
      })

@@ -745,8 +793,8 @@

    // 流向分析结果table列表数据点击
    lxResultSelect (e) {
      console.log('连通性分析结果列表点击')
      console.log(e)
      // console.log('连通性分析结果列表点击')
      // console.log(e)

      const geom = JSON.parse(e.geomText)
      if (this.currentSelectResultLine != null) {
@@ -762,17 +810,13 @@
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示
    async lxQuery (e) {
      // console.log(e)
      console.log(e)
      this.clearLinkPipe()
      const param = {
        // lineNodeID: e.startpoint
        lineNodeID: e.gid
        lineNodeID: e.startpointnumber
      }
      const res = await mapApi.findFlowDirection(param)
      this.getres(res)
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    getres (res) {
      this.lxTableDataResult = res.data
      const linkPipe = []
      res.data.forEach((itm, idx) => {
@@ -797,6 +841,10 @@
        this.linkPipeline.push(line)
      })
    },
    // 点击显示流向 table列表中的数据 => 进行官网流向的显示 的数据处理方法
    // getres (res) {
    //
    // },
    // 清除流向
    clearLX () {
      if (this.flowPipeLine != null) {
@@ -882,14 +930,26 @@
      // 已绘制线图 进行绘制横断面数据分析
      const res = await mapApi.getCrossSection(this.hdmParam)
      console.log(res)
      const dataPoint = res.data.point
      console.log(dataPoint)
      // this.tableData = dataPoint.pipelines.extraData
      for (let i = 0; i < dataPoint.length; i++) {
        const obj = {
          pipename: dataPoint[i].pipelines.extraData.pipename,
          mediumtype: dataPoint[i].pipelines.extraData.mediumtype
        }
        this.tableData.push(obj)
      }
    },
    // 横断面绘制完成后 进行横断面数据分析 进行图表展示
    async selectRow (e) {
      console.log(e)
      // option 数据处理 const dataSeries = e.data.pointInterval
      // 3. 使用刚指定的配置项和数据，显示图表
      const option = {
        xAxis: {
          type: 'category',
          // data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
          data: ['井1', '井2', '井3', '井4', '井5', '井6', '井7']
        },
        yAxis: {
@@ -897,10 +957,11 @@
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          // data: dataSeries,
          type: 'line'
        }]
      }
      // this.myChartShow = true
      this.myChartShow = true
      this.myChart.setOption(option)
    },
    // 横断面清除
@@ -915,17 +976,31 @@
</script>

<style lang="less" scoped>
///deep/ .el-table__row:hover > td {
//  background: none !important;
//}
//
///deep/ .el-table__row--striped:hover > td {
//  background: none !important;
//}
/*****滚动条***/
/deep/ .tableBox {
  .el-table__fixed-right-patch {
    display: none;
  }
}

///deep/ .el-table__row.hover-row {
//  background: rgba(0, 16, 30, 0.9) !important
//}
/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;