---
order: 2
group:
  title: 事件区
---

## 事件详情左侧面板

<!-- Demo1:

```tsx
import React from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  eventId: '860941',
  apiEnv: 'show',
  cameraVideoPrefix: 'https://ruxin.gtdreamlife.com',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...props} />
    </div>
  </div>
);
```

Demo2:

```tsx
import React from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  eventId: '377353',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...props} />
    </div>
  </div>
);
```

Demo3:

```tsx
import React from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  eventId: '328546',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...props} />
    </div>
  </div>
);
```

Demo4:

```tsx
import React from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  eventId: '328424',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...props} />
    </div>
  </div>
);
```

Demo5:

```tsx
import React from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  eventId: '328595',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...props} />
    </div>
  </div>
);
```

Demo6:

```tsx
import React from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  eventId: '377366',
  size: {
    width: 420,
    height: 1080,
  },
};

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...props} />
    </div>
  </div>
);
``` -->

Demo8:

```tsx
import React, { useEffect, useState } from 'react';
import { Button } from 'antd';
import * as Charts from 'edata-charts';
import { DispatchIOCEvent } from '../../../utils';

const props = {
  id: 'testId',
  // eventId: '595308',
  size: {
    width: 420,
    height: 1080,
  },
};

const [initialProps, setInitialProps] = useState(props);

// useEffect(() => {
//   setTimeout(() => {
//     setInitialProps({
//       id: 'testId',
//       eventId: '595308',
//       size: {
//         width: 420,
//         height: 1080,
//       },
//     });
//   }, 3000);
// }, []);

export default () => (
  <div style={{ position: 'relative', width: '100%', height: 1080 }}>
    <div
      style={{
        width: 420,
        height: 1080,
        background: 'rgba(0, 0, 0, 0.5)',
        position: 'absolute',
        left: 0,
        top: 0,
      }}
    >
      <Charts.BizEventDetailLeftPanel {...initialProps} />
    </div>
  </div>
);
```