web-prod2/src/views/dashboard-screen/chart-map/chartMap.vue

<template>
  <div class="iframe-wrap">
    <iframe id="mapFrame" ref="mapFrame" src="/gis/index.html" frameborder="none" :onload="loadDone"/>
  </div>

</template>
<script>
import {chartMap} from '@/api/dashboard-json'

export default {
  name: 'ChartMap',
  created() {
    window['mapFrame'] = this.$refs.mapFrame
  },
  mounted() {
    this.$refs.mapFrame.onload = () => {
      this.loadDone()
    }
  },
  methods: {
    loadDone() {
      chartMap().then(res => {
        const data = (res.info || []).map(item => {
          const ret = {
            title: item.title?.replace('运行工区', ''),
            data: {}
          }
          item.xaxis.forEach((key, index) => {
            ret.data[key] = item.series[index].data
          })
          return ret
        })
        window['mapData'] = data;
        this.$refs.mapFrame.contentWindow.postMessage(
          {
            data: data
          },
          '*'
        )
        this.$refs.mapFrame.contentWindow.addEventListener('message', (evt) => {
          console.log('onMessage', evt)
        })
        console.log('data', data)
      })
      console.log('loadDone')
    }
  }
}
</script>

<style scoped lang="scss">
.iframe-wrap {
  width: 100%;
  height: 100%;

  iframe {
    width: 100%;
    height: 100%;
  }
}

::v-deep {
  #container {
    background-image: none !important;
  }
}

</style>