garafana界面样式修改

frame引入garafana界面，部分可编辑操作不对外暴露，需要自定义样式，隐藏菜单和顶部编辑栏；但是garafana引入属于跨域引入，不可以直接获取garafana界面元素，本文章对具体实现做一总结。

iframe引入garafana

iframe的src地址为garafana地址，添加参数&monitorFlag=true让用户区分引入与未引入

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { TreeSelect, Card, Row, Spin } from 'antd';

import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import jQuery from 'jquery';

import styles from './Monitoring.less';

const $ = jQuery;

@connect(({ monitor, loading }) => ({
  monitor,
  loading: loading.models.monitor,
}))
class Monitoring extends PureComponent {
  state = {
    value: '', // 默认值 不能为空 监控页面有修改，需对应修改
    treedata: [],
    iframeUrl: '', // 默认值 不能为空
    iframePrefix: 'http://localhost:3000',
    iframeLoading: true,
    iframeHeight: 600,
  };

  componentDidMount() {
    // iframe的高度
    this.setState({
      iframeHeight: $('body').height() - 280,
    });

    // 发送消息 添加监听
    window.addEventListener('message', this.messageEvent);
  }

  componentWillUnmount() {
    // 移除监听
    window.removeEventListener('message', this.messageEvent);
  }

 // iframe传来的数据，初始loading为true,什么时候iframe传来数据，改为false,体现一个加载过程，用户体验良好
  messageEvent = event => {
    if (event.data === 'loadSuccess') {
      this.setState({
        iframeLoading: false,
      });
    }
  };

  render() {
    const { value, treedata, iframeUrl, iframePrefix, iframeLoading, iframeHeight } = this.state;
    return (