弹框公共问题修改

chenzeping

2021-04-14 062f5d4a5c511f360c2d73a66b24ce84d5cb2d68

弹框公共问题修改

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -6,7 +6,7 @@
    </div>
    <div class="public-bounced-content">
      <div class="public-bounced-content-left">
        <public-tabs :displayContentTab="displayContentTab" :value="value"
        <public-tabs :setSolidWaste="displayContentTab" :value="value"
                     :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>
        <div class="public-bounced-content-left-bottom">
          <public-table v-if="value === 'gufei'"
@@ -46,13 +46,13 @@
  },
  data () {
    return {
      setWasteGasdata: '',
      setWasteWaterdata: '',
      displayContentTitle: '',
      displayContentTab: '',
      displayContentTable: '',
      flag: false,
      value: '',
      setWasteGasdata: '',
      setWasteWaterdata: '',
      getWasteGasDetails: [],
      getWasteWaterMonitoringDetails: [],
      getQueryOnlineMonData: [],
@@ -64,16 +64,13 @@
    closePopup () {
      this.flag = false
    },
    setData (dataBasic, dataDetailed, value) {
    // 固废相关信息设置
    setData (title, dataBasic, dataDetailed, value) {
      this.flag = true
      this.value = value
      dataBasic.forEach(item => {
        this.displayContentTitle = item.StoragePlaceName
      })
      this.displayContentTab = dataBasic
      this.displayContentTable = dataDetailed
      this.flag = true
      this.value = value
      this.displayContentTitle = title
      this.displayContentTab = dataBasic[0]
      this.displayContentTable = dataDetailed[0]
    },
    setGasData (data, dataDetails, GasHourData, ManualData, value) {
      // console.log(this.$refs)

 src/components/BaseNav/PublicBounced/common/PublicTable.vue

@@ -1,17 +1,10 @@
<template>
  <div class="win">
    <!-- 四个角的边框效果 -->
    <div class="border_corner border_corner_left_top"></div>
    <div class="border_corner border_corner_right_top"></div>
    <div class="border_corner border_corner_left_bottom"></div>
    <div class="border_corner border_corner_right_bottom"></div>
    <div class="main">
      <div class="main-table">
        <el-table :data="listData" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                           :label="item.label"></el-table-column>
        </el-table>
      </div>
  <div class="react">
    <div class="main-table">
      <el-table :data="displayContentTable" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
        <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                         :label="item.label"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
@@ -55,13 +48,6 @@
      ]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.displayContentTable.forEach(item => {
        this.listData = item
      })
    })
  },
  methods: {
    tableRowClassName ({
      row,
@@ -79,52 +65,17 @@
</script>

<style lang="less" scoped>

.win {
.react {
  position: relative;
  background-color: rgba(33, 41, 69, 0.9);
}

.main {
  .main-table {
    width: 100%;
  }
}

.border_corner {
  z-index: 999;
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #47d5ea;
}

.border_corner_left_top {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.border_corner_right_top {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}

.border_corner_left_bottom {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}

.border_corner_right_bottom {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  background: linear-gradient(to left, #02a6b5, #02a6b5) left top no-repeat,
  linear-gradient(to bottom, #02a6b5, #02a6b5) left top no-repeat,
  linear-gradient(to left, #02a6b5, #02a6b5) right top no-repeat,
  linear-gradient(to bottom, #02a6b5, #02a6b5) right top no-repeat,
  linear-gradient(to left, #02a6b5, #02a6b5) left bottom no-repeat,
  linear-gradient(to bottom, #02a6b5, #02a6b5) left bottom no-repeat,
  linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat,
  linear-gradient(to left, #02a6b5, #02a6b5) right bottom no-repeat;
  background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
}
</style>

 src/components/BaseNav/PublicBounced/common/PublicTabs.vue

@@ -18,14 +18,14 @@
            <li>内/外排口:{{ setWasteGasdata.OrOutPortName }}</li>
          </ul>
        </div>
        <div v-else-if="value === 'gufei'">
        <div v-if="value === 'gufei'">
          <ul>
            <li>场所名称:{{ tabData.StoragePlaceName }}</li>
            <li>贮存能力:{{ tabData.StorageQty }}(吨)</li>
            <li>剩余贮存能力:{{ tabData.SurplusFloorArea }}(吨)</li>
            <li>占地面积(㎡):{{ tabData.DesignFloorArea }}(㎡)</li>
            <li>最近贮存日期:{{ tabData.StorageDate }}</li>
            <li></li>
            <li>场所名称:{{ setSolidWaste.StoragePlaceName }}</li>
            <li>贮存能力:{{ setSolidWaste.StorageQty }}(吨)</li>
            <li>剩余贮存能力:{{ setSolidWaste.SurplusFloorArea }}(吨)</li>
            <li>占地面积(㎡):{{ setSolidWaste.DesignFloorArea }}(㎡)</li>
            <li>最近贮存日期:{{ setSolidWaste.StorageDate }}</li>
            <li class="lastli"></li>
          </ul>
        </div>
        <div v-else-if="value === 'feishui'">
@@ -46,23 +46,7 @@
<script>
export default {
  name: 'GasTable',
  props: ['displayContentTab', 'value', 'setWasteGasdata', 'setWasteWaterdata'],
  data () {
    return {
      tabData: []
    }
  },
  mounted () {
    this.processingData()
  },
  methods: {
    processingData () {
      for (var i = 0; i < this.displayContentTab.length; i++) {
        // console.log(this.displayContentTab[i])
        this.tabData = this.displayContentTab[i]
      }
    }
  }
  props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata']
}
</script>

@@ -85,6 +69,7 @@
    font-weight: normal;
    padding: 6px;
    border: 1px solid #396d83;

    ul {
      //width: 100%;
      //height: 100%;
@@ -93,6 +78,7 @@
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: -6px;

      li {
        margin-bottom: 6px;
        text-align: center;
@@ -103,7 +89,10 @@
        font-size: 0.08rem;
      }

      li:last-child {
      //li:last-child {
      //  visibility: hidden
      //}
      .lastli {
        visibility: hidden
      }
    }

 src/components/LayerController/logic/SolidWaste.js

@@ -75,6 +75,9 @@
    const dataValue = {
      StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
    }
    // console.log(e.layer.options.totransferData.Name)
    // 弹框标题
    const title = e.layer.options.totransferData.Name
    // 基本信息 tabs
    const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
    // 详细信息展示 table
@@ -86,7 +89,7 @@
    document.body.appendChild(instance.$el)
    // document.body.removeChild(instance.$el)
    // 通过方法 向绑定弹框传递数据
    instance.setData(resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    /* flyTo()弹出框平移事件 */
    this.setPanTo(e.latlng, 200)
  }

 src/components/panel/topicSearch/SolidWasteSearch.vue

@@ -141,7 +141,7 @@
  methods: {
    setBounced (val) {
      const pos = [val.Latitude, val.Longitude]
      window.map.flyTo(pos, 16)
      window.map.flyTo(pos, 11)
    },
    handlePipelineType (val) {
      this.solidWasteTypeOptions.forEach(item => {