yf-admin-ui/src/views/iosBasicData/report-container/report-container-los.vue

<template>
  <el-dialog
    :visible.sync="visible"
    top="0"
    width="100%"
    height="100%"
    style="width: 100%; height: 100%;"
    :before-close="onClose"
    :close-on-click-modal="false"
    append-to-body
    class="el-dialogDeep"
    :fullscreen="true"
  >
    <div id="reportContainer" style="width: 100%; height: 78vh; padding: 0"></div>
      <div class="slotDiv">
          <div style="width: 80%;padding: 15px;box-sizing: border-box;box-shadow:1px 2px 8px rgba(0,0,0,.5)">
              <slot></slot>
          </div>
      </div>
  </el-dialog>
</template>
<script>

export default {
  data() {
    return {
      visible: false,
      refreshFun: null,
    };
  },
  props: {
    switchDialog: {
      type: Boolean,
      default: false
    },
    reportName: {
      type: String
    },
    reportId: {
      type: String
    },
  },
  methods: {
    cellStyle() {
      return "padding:0;height:40px;";
    },
    onClose() {
      this.visible = false;
    },
    showContainer(initFun, refreshFun) {
      if (typeof initFun == 'function') {
        initFun()
      }
      this.refreshFun = refreshFun
      this.visible = true
      console.log(window.reportContainer)
      console.log('showContainer')
    },
    hideContainer() {
      if (typeof this.refreshFun == 'function') {
        this.refreshFun()
      }
      this.visible = false
      console.log('hideContainer')
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog__header {
  display: none;
}
.slotDiv {
    width: 100%;
    margin: 10px 0;
    height: 20vh;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
</style>