弹窗布局

wangqi

2021-03-29 f0c30b0c1fd5e4346a23ab7cacf7ca12f91feaaf

弹窗布局

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -5,13 +5,14 @@
      <i class="el-icon-circle-close" @click="closePopup"></i>
    </div>
    <div class="public-bounced-content">
      <span>内容</span>
<!--      <span>内容</span>-->
      <popup-gas></popup-gas>
    </div>
  </div>
</template>

<script>

import PopupGas from '@components/flueGas/popup-gas'
export default {
  name: 'PublicBounced',
  data () {
@@ -20,6 +21,9 @@
      flag: false
    }
  },
  components: {
    PopupGas
  },
  methods: {
    setData (data) {
      this.displayContent = data

 src/components/BaseNav/SolidWaste/SolidWaste.js

@@ -63,7 +63,7 @@
        // 点击 事件
        marker.on('click', (e) => {
          try {
            // console.log(e)
            console.log(e)
            this.EffectOfPulse(e.target.getLatLng())
            this.SolidWastePopup.setData(data[i])
            return this.SolidWastePopup.$el

 src/components/flueGas/GasComponents/GasTable.vue

@@ -34,11 +34,11 @@
.el-row {
  color: #00d0f9;
  .el-col{
    width: 240px;
    width: 200px;
    height: 28px;
    background-color: #243a55;
    border-radius: 0.05rem;
    margin: 5px;
    //margin: 5px;
    text-align: center;
    line-height: 28px;
  }

 src/components/flueGas/flueGas.js

@@ -55,14 +55,14 @@
      // // 线
      // var polyline = this.L.polyline(latlngs, { color: 'red' }).addTo(this.map)
      // console.log(polyline)
      marker.bindPopup(() => {
        return this.FlueGasPopup.$el
      }, {
        className: 's-map-popup',
        minWidth: 1548,
        closeButton: true,
        autoClose: false
      })
      // marker.bindPopup(() => {
      //   return this.FlueGasPopup.$el
      // }, {
      //   className: 's-map-popup',
      //   minWidth: 1548,
      //   closeButton: true,
      //   autoClose: false
      // })
      // 划过出现 展示数据
      marker.bindTooltip(data[i].porltName, {
        permanent: true,
@@ -73,9 +73,10 @@
      // 点击 事件
      marker.on('click', (e) => {
        try {
          // console.log(e)
          console.log(e)
          this.EffectOfPulse(e.target.getLatLng())
          this.FlueGasPopup.setDate(data[i])
          this.FlueGasPopup.setData(data[i])
          return this.FlueGasPopup.$el
        } catch (error) {
          console.log(error)
        }

 src/components/flueGas/popup-gas.vue

@@ -35,10 +35,10 @@
    }
  },
  methods: {
    setDate (data) {
      console.log(data)
      this.displayContent = data
    }
    // setDate (data) {
    //   console.log(data)
    //   this.displayContent = data
    // }
  }
}
</script>

 src/styles/theme-dark/variable.less

@@ -1,4 +1,4 @@
@import "../common/variable";
//@import "../common/variable";

/* 主题色
-------------------------- */

 src/views/MapTemplate.vue

@@ -17,9 +17,7 @@
    <enterprise></enterprise>
    <!--    <el-button id="map-btn" el-icon-c-scale-to-original icon="el-icon-c-scale-to-original" circle @click="isShowHidden"></el-button>-->
    <el-button type="primary" @click="ChangeState" class="solid-waste">固废</el-button>
<!--    <SolidContent ref="SolidWastePopup"></SolidContent>-->
    <el-button type="primary" @click="AddGasHelper" class="flue-gas">废气</el-button>
    <popup-gas ref="FlueGas"></popup-gas>
    <PublicBounced ref="PublicBounced"></PublicBounced>
  </div>
</template>
@@ -44,7 +42,7 @@
// import SolidContent from '@components/SolidWaste/SolidContent'
// 废气
import AddGasHelper from '@components/flueGas/flueGas'
import PopupGas from '@/components/flueGas/popup-gas'
// import PopupGas from '@/components/flueGas/popup-gas'
// // 公共展示数据
import PublicBounced from '@components/BaseNav/PublicBounced/PublicBounced'
export default {
@@ -62,7 +60,7 @@
    Popup,
    summarySheets,
    // SolidContent,
    PopupGas,
    // PopupGas,
    PublicBounced
  },
  data () {