固废废水废气弹框问题修改

chenzeping

2021-04-16 0c71a89748fb4e4cd433e8e9883d460033a3b996

固废废水废气弹框问题修改

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -4,45 +4,49 @@
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
    </div>
    <div class="public-bounced-content">
      <div class="public-bounced-content-left">
        <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'"
                        :displayContentTable="displayContentTable"></public-table>
          <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
                        :value="value"
                        :getQueryOnlineMonData="getQueryOnlineMonData"
                        :getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails'
                        :ManualData="ManualData"
                        ref="PublicChart"
          >
          </public-chart>
        </div>
      </div>
      <div class="public-bounced-content-right" >
        <public-video></public-video>
      </div>
    </div>
<!--    <div class="public-bounced-content">-->
<!--      <div class="public-bounced-content-left">-->
<!--        <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'"-->
<!--                        :displayContentTable="displayContentTable"></public-table>-->
<!--          <public-chart v-else :getWasteGasDetails="getWasteGasDetails"-->
<!--                        :value="value"-->
<!--                        :getQueryOnlineMonData="getQueryOnlineMonData"-->
<!--                        :getWasteWaterMonitoringDetails='getWasteWaterMonitoringDetails'-->
<!--                        :ManualData="ManualData"-->
<!--                        ref="PublicChart"-->
<!--          >-->
<!--          </public-chart>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="public-bounced-content-right">-->
<!--        <public-video></public-video>-->
<!--      </div>-->
<!--    </div>-->
    <PublicSector></PublicSector>
  </div>
</template>

<script>

import '@/utils/dragBoxes'
import PublicTabs from '@components/BaseNav/PublicBounced/common/PublicTabs'
import PublicTable from '@components/BaseNav/PublicBounced/common/PublicTable'
import PublicVideo from '@components/BaseNav/PublicBounced/common/PublicVideo'
import PublicChart from './common/PublicChart'
// import PublicTabs from '@components/BaseNav/PublicBounced/common/PublicTabs'
// import PublicTable from '@components/BaseNav/PublicBounced/common/PublicTable'
// import PublicVideo from '@components/BaseNav/PublicBounced/common/PublicVideo'
// import PublicChart from './common/PublicChart'

import PublicSector from '@components/BaseNav/PublicSector'

export default {
  name: 'PublicBounced',
  components: {
    PublicTabs,
    PublicTable,
    PublicChart,
    PublicVideo
    PublicSector
    // PublicTabs,
    // PublicTable,
    // PublicChart,
    // PublicVideo
  },
  data () {
    return {

 src/components/BaseNav/PublicSector.vue

New file
@@ -0,0 +1,45 @@
<template>
  <div class="public-bounced-content">
    <WasteSolidIndex>
      <template v-slot:WasteSolidTabs></template>
      <template v-slot:WasteSolidTable></template>
      <template v-slot:WasteSolidVideo></template>
    </WasteSolidIndex>
  </div>
</template>

<script>

import WasteSolidIndex from '@components/BaseNav/WasteSolid/WasteSolidIndex'

export default {
  name: 'PublicSector',
  components: {
    WasteSolidIndex
  },
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
.public-bounced {
  z-index: 2000;
  position: absolute;
  top: 35%;
  left: 20%;

  .public-bounced-content {
    padding: 0.1rem;
    display: flex;

    .public-bounced-content-left {
    }

    .public-bounced-content-right {
      margin-left: 0.1rem;
    }
  }
}
</style>

 src/components/BaseNav/PublicVideo.vue

 src/components/BaseNav/WasteSolid/PublicTable.vue

@@ -7,7 +7,7 @@
  <!--      </el-table>-->
  <!--    </div>-->
  <!--  </div>-->
  <div class="main">
  <div class="slotChildTable">
    <span></span>
    <span></span>
    <span></span>
@@ -117,13 +117,13 @@
  background: none !important
}

.main {
.slotChildTable {
  position: relative;
  background: rgba(33, 41, 69, 0.9);
  //border: 1px solid red;
}

.main span:nth-child(1) {
.slotChildTable span:nth-child(1) {
  position: absolute;
  left: -1px;
  top: -1px;

 src/components/BaseNav/WasteSolid/PublicTabs.vue

@@ -7,14 +7,13 @@
    <div class="main">
      <div class="main-matter">
        <div>
          <ul>
            <!--            <li>场所名称:{{ setSolidWaste.StoragePlaceName }}</li>-->
            <!--            <li>贮存能力:{{ setSolidWaste.StorageQty }}(吨)</li>-->
            <!--            <li>剩余贮存能力:{{ setSolidWaste.SurplusFloorArea }}(吨)</li>-->
            <!--            <li>占地面积(㎡):{{ setSolidWaste.DesignFloorArea }}(㎡)</li>-->
            <!--            <li>最近贮存日期:{{ setSolidWaste.StorageDate }}</li>-->
            <!--            <li class="lastli"></li>-->
            <li v-for="(item,index) in tabList" :key="index"></li>
          <ul v-for="(item,index) in setSolidWaste" :key="index">
            <li>场所名称:{{ item.StoragePlaceName }}</li>
            <li>贮存能力:{{ item.StoragePlaceName }}</li>
            <li>剩余贮存能力:{{ item.StorageQty }}</li>
            <li>占地面积(㎡):{{ item.SurplusFloorArea }}</li>
            <li>最近贮存日期:{{ item.DesignFloorArea }}</li>
            <li class="lastli"></li>
          </ul>
        </div>
      </div>
@@ -25,10 +24,17 @@
<script>
export default {
  name: 'GasTable',
  props: ['setSolidWaste', 'value', 'setWasteGasdata', 'setWasteWaterdata'],
  data () {
    return {
      tabList: []
      tabList: [],
      setSolidWaste: [{
        StoragePlaceId: 0,
        StoragePlaceName: '取水单元干泥暂存库',
        DesignFloorArea: 0.024,
        StorageQty: 0.016,
        SurplusFloorArea: 0.018,
        StorageDate: '2021-01-17'
      }]
    }
  },
  methods: {

 src/components/BaseNav/WasteSolid/PublicVideo.vue

File was deleted

 src/components/BaseNav/WasteSolid/WasteSolidIndex.vue

@@ -1,29 +1,29 @@
<template>
  <div class="public-bounced map-background" v-drag v-show="flag">
    <div class="public-bounced-title panel-title" ref="publicBounced">
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
  <div class="public-bounced-content">
    <div class="public-bounced-content-left">
      <slot name='WasteSolidTabs'>
        <PublicTabs></PublicTabs>
      </slot>
      <div class="public-bounced-content-left-bottom">
        <slot name='WasteSolidTable'>
          <PublicTable></PublicTable>
        </slot>
      </div>
    </div>
    <div class="public-bounced-content">
      <div class="public-bounced-content-left">
        <public-tabs :setSolidWaste="displayContentTab"></public-tabs>
        <div class="public-bounced-content-left-bottom">
          <public-table :displayContentTable="displayContentTable"></public-table>
        </div>
      </div>
      <div class="public-bounced-content-right">
        <public-video></public-video>
      </div>
    <div class="public-bounced-content-right">
      <slot name='WasteSolidVideo'>
        <PublicVideo></PublicVideo>
      </slot>
    </div>
  </div>
</template>

<script>

import '@/utils/dragBoxes'
// import '@/utils/dragBoxes'
import PublicTabs from '@components/BaseNav/WasteSolid/PublicTabs'
import PublicTable from '@components/BaseNav/WasteSolid/PublicTable'
import PublicVideo from '@components/BaseNav/WasteSolid/PublicVideo'
import PublicVideo from '@components/BaseNav/PublicVideo'

export default {
  name: 'WasteSolidIndex',
@@ -34,8 +34,14 @@
  },
  data () {
    return {
      displayContentTitle: '',
      displayContentTab: '',
      displayContentTabs: [{
        StoragePlaceId: 0,
        StoragePlaceName: '取水单元干泥暂存库',
        DesignFloorArea: 0.024,
        StorageQty: 0.016,
        SurplusFloorArea: 0.018,
        StorageDate: '2021-01-17'
      }],
      displayContentTable: '',
      flag: false
    }

 src/components/BaseNav/WasteWater/PublicVideo.vue

File was deleted

 src/components/LayerController/logic/WasteSolid.js

@@ -11,7 +11,8 @@
// 使用封装方法
const AnimalService = require('../service/AnimalService').default

const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default
// const publicBounced = require('../../BaseNav/PublicBounced/PublicBounced').default
const PublicVideo = require('../../BaseNav/PublicVideo').default

module.exports = function () {
  /**
@@ -72,26 +73,37 @@
  // 根据点击不同数据 进行接口的数据请求
  this.requestSolidWasteData = async (e) => {
    // 基本信息 和 详细信息 展示数据所需参数
    const dataValue = {
      StoragePlaceId: e.layer.options.totransferData.StoragePlaceId
    }
    // 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)
    // const resultBasic = await mapApi.getSolidWasteBaseInfo(dataValue)
    // 详细信息展示 table
    const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)
    // const resultDetailed = await mapApi.getSolidWasteDetail(dataValue)

    // 绑定弹框实例
    const PublicBounced = window.Vue.extend(publicBounced)
    const instance = new PublicBounced().$mount()
    document.body.appendChild(instance.$el)
    // document.body.removeChild(instance.$el)
    // 通过方法 向绑定弹框传递数据
    instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    // // 绑定弹框实例
    // const PublicBounced = window.Vue.extend(publicBounced)
    // const instance = new PublicBounced().$mount()
    // document.body.appendChild(instance.$el)
    // // document.body.removeChild(instance.$el)
    // // 通过方法 向绑定弹框传递数据
    // instance.setData(title, resultBasic.Result.DataInfo, resultDetailed.Result.DataInfo, 'gufei')
    /* flyTo()弹出框平移事件 */
    this.setPanTo(e.latlng, 300)
    window.$layer.open({
      content: {
        content: PublicVideo, // 组件
        parent: this, // 父组件
        data: { // 传递的参数
          info: this.info,
          storagePlaceId: e.layer.options.totransferData.StoragePlaceId
        }
      },
      title: title // 标题
    })
  }

  // flayTo() 弹框的可滑动事件