---
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: '402192',
  apiEnv: 'dev',
  cameraVideoPrefix: 'https://smart.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>
);
```