diff --git a/spug_web/src/pages/alarm/group/Form.js b/spug_web/src/pages/alarm/group/Form.js
index 6ba5a3b..57b75bd 100644
--- a/spug_web/src/pages/alarm/group/Form.js
+++ b/spug_web/src/pages/alarm/group/Form.js
@@ -56,10 +56,11 @@ class ComForm extends React.Component {
           <Form.Item {...itemLayout} required label="选择联系人">
             {getFieldDecorator('contacts', {valuePropName: 'targetKeys', initialValue: info['contacts']})(
               <Transfer
-              titles={['已有联系人', '已选联系人']}
-              listStyle={{width: 199}}
-              dataSource={contactStore.records.map(x => ({key: x.id, title: x.name}))}
-              render={item => item.title}/>
+                rowKey={item => item.id}
+                titles={['已有联系人', '已选联系人']}
+                listStyle={{width: 199}}
+                dataSource={contactStore.records}
+                render={item => item.name}/>
             )}
           </Form.Item>
         </Form>
diff --git a/spug_web/src/pages/monitor/Form.js b/spug_web/src/pages/monitor/Form.js
index a897140..1a096d9 100644
--- a/spug_web/src/pages/monitor/Form.js
+++ b/spug_web/src/pages/monitor/Form.js
@@ -1,11 +1,13 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Input, Select, Radio, message } from 'antd';
+import { Modal, Form, Input, Select, Radio, message, Steps, Button, Transfer, Checkbox } from 'antd';
 import TemplateSelector from '../exec/task/TemplateSelector';
 import { LinkButton, SHEditor } from 'components';
 import http from 'libs/http';
 import store from './store';
 import hostStore from '../host/store';
+import groupStore from '../alarm/group/store';
+import styles from './index.module.css';
 
 @observer
 class ComForm extends React.Component {
@@ -17,6 +19,12 @@ class ComForm extends React.Component {
       extra: {[store.record.type]: store.record.extra},
       addr: {},
       showTmp: false,
+      page: 0,
+      modeOptions: [
+        {label: '微信', 'value': '1'},
+        {label: '短信', 'value': '2'},
+        {label: '钉钉', 'value': '3'},
+        {label: '邮件', 'value': '4'}]
     }
   }
 
@@ -57,6 +65,11 @@ class ComForm extends React.Component {
     wrapperCol: {span: 14}
   };
 
+  itemTailLayout = {
+    labelCol: {span: 6},
+    wrapperCol: {span: 14, offset: 6}
+  };
+
   getStyle = (t) => {
     const type = this.props.form.getFieldValue('type');
     return t.indexOf(type) !== -1 ? {display: 'block'} : {display: 'none'}
@@ -82,10 +95,22 @@ class ComForm extends React.Component {
     </Select>
   );
 
+  verifyButtonStatus = () => {
+    const data = this.props.form.getFieldsValue();
+    const {notify_grp, notify_mode, type, name} = data;
+    let b1 = this.state.addr[type] && name;
+    if (type !== '1') {
+      b1 = b1 && this.state.extra[type]
+    }
+    const b2 = notify_grp && notify_grp.length && notify_mode && notify_mode.length;
+    return [b1, b2];
+  };
+
   render() {
     const info = store.record;
-    const {loading, extra, addr, showTmp} = this.state;
+    const {loading, extra, addr, showTmp, page, modeOptions} = this.state;
     const {getFieldDecorator} = this.props.form;
+    const [b1, b2] = this.verifyButtonStatus();
     return (
       <Modal
         visible
@@ -93,89 +118,121 @@ class ComForm extends React.Component {
         maskClosable={false}
         title={store.record.id ? '编辑任务' : '新建任务'}
         onCancel={() => store.formVisible = false}
-        confirmLoading={loading}
-        onOk={this.handleSubmit}>
+        footer={null}>
+        <Steps current={page} className={styles.steps}>
+          <Steps.Step key={0} title="创建任务"/>
+          <Steps.Step key={1} title="设置规则"/>
+        </Steps>
         <Form>
-          <Form.Item {...this.itemLayout} label="监控类型">
-            {getFieldDecorator('type', {initialValue: info['type'] || '1'})(
-              <Select placeholder="请选择监控类型">
-                <Select.Option value="1">站点检测</Select.Option>
-                <Select.Option value="2">端口检测</Select.Option>
-                <Select.Option value="3">进程检测</Select.Option>
-                <Select.Option value="4">自定义脚本</Select.Option>
+          <div style={{display: page === 0 ? 'block' : 'none'}}>
+            <Form.Item {...this.itemLayout} label="监控类型">
+              {getFieldDecorator('type', {initialValue: info['type'] || '1'})(
+                <Select placeholder="请选择监控类型">
+                  <Select.Option value="1">站点检测</Select.Option>
+                  <Select.Option value="2">端口检测</Select.Option>
+                  <Select.Option value="3">进程检测</Select.Option>
+                  <Select.Option value="4">自定义脚本</Select.Option>
+                </Select>
+              )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="任务名称">
+              {getFieldDecorator('name', {initialValue: info['name']})(
+                <Input placeholder="请输入任务名称"/>
+              )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('1')}>
+              <Input value={addr['1']} addonBefore={this.siteBefore()} placeholder="请输入监控地址"
+                     onChange={e => this.handleAddr('1', e)}/>
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('2')}>
+              <Input value={addr['2']} placeholder="请输入监控地址（IP/域名）" onChange={e => this.handleAddr('2', e)}/>
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="监控主机" style={this.getStyle('34')}>
+              <Select value={addr['3']} placeholder="请选择主机" onChange={v => this.handleAddr('3', v)}>
+                {hostStore.records.map(item => (
+                  <Select.Option value={String(item.id)}
+                                 key={item.id}>{item.name}({item.hostname}:{item.port})</Select.Option>
+                ))}
               </Select>
-            )}
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="任务名称">
-            {getFieldDecorator('name', {initialValue: info['name']})(
-              <Input placeholder="请输入任务名称"/>
-            )}
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('1')}>
-            <Input value={addr['1']} addonBefore={this.siteBefore()} placeholder="请输入监控地址"
-                   onChange={e => this.handleAddr('1', e)}/>
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="监控地址" style={this.getStyle('2')}>
-            <Input value={addr['2']} placeholder="请输入监控地址（IP/域名）" onChange={e => this.handleAddr('2', e)}/>
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="监控主机" style={this.getStyle('34')}>
-            <Select value={addr['3']} placeholder="请选择主机" onChange={v => this.handleAddr('3', v)}>
-              {hostStore.records.map(item => (
-                <Select.Option value={String(item.id)} key={item.id}>{item.name}({item.hostname}:{item.port})</Select.Option>
-              ))}
-            </Select>
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="检测端口" style={this.getStyle('2')}>
-            <Input value={extra['2']} placeholder="请输入端口号" onChange={e => this.handleExtra('2', e)}/>
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="进程名称" style={this.getStyle('3')}>
-            <Input value={extra['3']} placeholder="请输入进程名称" onChange={e => this.handleExtra('3', e)}/>
-          </Form.Item>
-          <Form.Item {...this.itemLayout} required label="脚本内容" style={this.getStyle('4')}
-                     extra={<LinkButton onClick={() => this.setState({showTmp: true})}>从模板添加</LinkButton>}>
-            <SHEditor value={extra['4']} height="200px" onChange={e => this.handleExtra('4', e)}/>
-          </Form.Item>
-          <Form.Item {...this.itemLayout} label="监控频率">
-            {getFieldDecorator('rate', {initialValue: info['rate'] || 5})(
-              <Radio.Group>
-                <Radio value={1}>1分钟</Radio>
-                <Radio value={5}>5分钟</Radio>
-                <Radio value={15}>15分钟</Radio>
-                <Radio value={30}>30分钟</Radio>
-                <Radio value={60}>60分钟</Radio>
-              </Radio.Group>
-            )}
-          </Form.Item>
-          <Form.Item {...this.itemLayout} label="报警阈值" help="连续几次超过阈值后报警">
-            {getFieldDecorator('threshold', {initialValue: info['threshold'] || 3})(
-              <Radio.Group>
-                <Radio value={1}>1次</Radio>
-                <Radio value={2}>2次</Radio>
-                <Radio value={3}>3次</Radio>
-                <Radio value={4}>4次</Radio>
-                <Radio value={5}>5次</Radio>
-              </Radio.Group>
-            )}
-          </Form.Item>
-          <Form.Item {...this.itemLayout} label="通道沉默">
-            {getFieldDecorator('quiet', {initialValue: info['quiet'] || 24 * 60})(
-              <Select placeholder="请选择">
-                <Select.Option value={5}>5分钟</Select.Option>
-                <Select.Option value={10}>10分钟</Select.Option>
-                <Select.Option value={15}>15分钟</Select.Option>
-                <Select.Option value={30}>30分钟</Select.Option>
-                <Select.Option value={60}>60分钟</Select.Option>
-                <Select.Option value={3 * 60}>3小时</Select.Option>
-                <Select.Option value={6 * 60}>6小时</Select.Option>
-                <Select.Option value={12 * 60}>12小时</Select.Option>
-                <Select.Option value={24 * 60}>24小时</Select.Option>
-              </Select>
-            )}
-          </Form.Item>
-          <Form.Item {...this.itemLayout} label="备注信息">
-            {getFieldDecorator('desc', {initialValue: info['desc']})(
-              <Input.TextArea placeholder="请输入备注信息"/>
-            )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="检测端口" style={this.getStyle('2')}>
+              <Input value={extra['2']} placeholder="请输入端口号" onChange={e => this.handleExtra('2', e)}/>
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="进程名称" style={this.getStyle('3')}>
+              <Input value={extra['3']} placeholder="请输入进程名称" onChange={e => this.handleExtra('3', e)}/>
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="脚本内容" style={this.getStyle('4')}
+                       extra={<LinkButton onClick={() => this.setState({showTmp: true})}>从模板添加</LinkButton>}>
+              <SHEditor value={extra['4']} height="200px" onChange={e => this.handleExtra('4', e)}/>
+            </Form.Item>
+            <Form.Item {...this.itemLayout} label="备注信息">
+              {getFieldDecorator('desc', {initialValue: info['desc']})(
+                <Input.TextArea placeholder="请输入备注信息"/>
+              )}
+            </Form.Item>
+          </div>
+          <div style={{display: page === 1 ? 'block' : 'none'}}>
+            <Form.Item {...this.itemLayout} label="监控频率">
+              {getFieldDecorator('rate', {initialValue: info['rate'] || 5})(
+                <Radio.Group>
+                  <Radio value={1}>1分钟</Radio>
+                  <Radio value={5}>5分钟</Radio>
+                  <Radio value={15}>15分钟</Radio>
+                  <Radio value={30}>30分钟</Radio>
+                  <Radio value={60}>60分钟</Radio>
+                </Radio.Group>
+              )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} label="报警阈值">
+              {getFieldDecorator('threshold', {initialValue: info['threshold'] || 3})(
+                <Radio.Group>
+                  <Radio value={1}>1次</Radio>
+                  <Radio value={2}>2次</Radio>
+                  <Radio value={3}>3次</Radio>
+                  <Radio value={4}>4次</Radio>
+                  <Radio value={5}>5次</Radio>
+                </Radio.Group>
+              )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="报警联系人组">
+              {getFieldDecorator('notify_grp', {valuePropName: 'targetKeys', initialValue: info['notify_grp']})(
+                <Transfer
+                  lazy={false}
+                  rowKey={item => item.id}
+                  titles={['已有联系组', '已选联系组']}
+                  listStyle={{width: 199}}
+                  dataSource={groupStore.records}
+                  render={item => item.name}/>
+              )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} required label="报警方式">
+              {getFieldDecorator('notify_mode', {initialValue: info['notify_mode']})(
+                <Checkbox.Group options={modeOptions}/>
+              )}
+            </Form.Item>
+            <Form.Item {...this.itemLayout} label="通道沉默">
+              {getFieldDecorator('quiet', {initialValue: info['quiet'] || 24 * 60})(
+                <Select placeholder="请选择">
+                  <Select.Option value={5}>5分钟</Select.Option>
+                  <Select.Option value={10}>10分钟</Select.Option>
+                  <Select.Option value={15}>15分钟</Select.Option>
+                  <Select.Option value={30}>30分钟</Select.Option>
+                  <Select.Option value={60}>60分钟</Select.Option>
+                  <Select.Option value={3 * 60}>3小时</Select.Option>
+                  <Select.Option value={6 * 60}>6小时</Select.Option>
+                  <Select.Option value={12 * 60}>12小时</Select.Option>
+                  <Select.Option value={24 * 60}>24小时</Select.Option>
+                </Select>
+              )}
+            </Form.Item>
+          </div>
+          <Form.Item {...this.itemTailLayout}>
+            {page === 1 &&
+            <Button disabled={!b2} type="primary" onClick={this.handleSubmit} loading={loading}>提交</Button>}
+            {page === 0 &&
+            <Button disabled={!b1} type="primary" onClick={() => this.setState({page: page + 1})}>下一步</Button>}
+            {page !== 0 &&
+            <Button style={{marginLeft: 20}} onClick={() => this.setState({page: page - 1})}>上一步</Button>}
           </Form.Item>
         </Form>
         {showTmp && <TemplateSelector
diff --git a/spug_web/src/pages/monitor/Table.js b/spug_web/src/pages/monitor/Table.js
index 0995008..df90dbf 100644
--- a/spug_web/src/pages/monitor/Table.js
+++ b/spug_web/src/pages/monitor/Table.js
@@ -8,6 +8,7 @@ import store from './store';
 import hostStore from '../host/store';
 import lds from 'lodash';
 import moment from "moment";
+import groupStore from "pages/alarm/group/store";
 
 @observer
 class ComTable extends React.Component {
@@ -20,6 +21,7 @@ class ComTable extends React.Component {
 
   componentDidMount() {
     store.fetchRecords();
+    if (groupStore.records.length === 0) groupStore.fetchRecords();
     if (hostStore.records.length === 0) {
       hostStore.fetchRecords().then(this._handleHosts)
     } else {
diff --git a/spug_web/src/pages/monitor/index.module.css b/spug_web/src/pages/monitor/index.module.css
new file mode 100644
index 0000000..9c95830
--- /dev/null
+++ b/spug_web/src/pages/monitor/index.module.css
@@ -0,0 +1,4 @@
+.steps {
+    width: 520px;
+    margin: 0 auto 30px;
+}