diff --git a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/NotifyTab.vue b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/NotifyTab.vue
index 910239bcd92..7ed62d2d880 100644
--- a/src/frontend/devops-pipeline/src/components/PipelineEditTabs/NotifyTab.vue
+++ b/src/frontend/devops-pipeline/src/components/PipelineEditTabs/NotifyTab.vue
@@ -105,6 +105,7 @@
             >
                 <notify-setting
                     ref="notifySettingTab"
+                    :project-group-and-users="projectGroupAndUsers"
                     :subscription="sliderEditItem"
                     :update-subscription="updateEditItem"
                 />
@@ -131,6 +132,7 @@
 </template>
 
 <script>
+    import { mapActions } from 'vuex'
     import { deepCopy } from '@/utils/util'
     import NotifySetting from '@/components/pipelineSetting/NotifySetting'
 
@@ -177,6 +179,7 @@
                 editType: '', // 当前编辑通知类型，成功或失败
                 editIndex: -1, // 当前编辑哪一项通知， -1表示新增
                 icons: ['icon-right-shape', 'icon-down-shape'],
+                projectGroupAndUsers: [],
                 notifyList: [
                     {
                         type: 'successSubscriptionList',
@@ -223,7 +226,13 @@
                 return actionType + ' - ' + targetType
             }
         },
+        async created () {
+            this.projectGroupAndUsers = await this.requestProjectGroupAndUsers(this.$route.params)
+        },
         methods: {
+            ...mapActions('pipelines', [
+                'requestProjectGroupAndUsers'
+            ]),
             getRenderInfo (type) {
                 return this[type]
             },
diff --git a/src/frontend/devops-pipeline/src/components/pipelineSetting/NotifySetting.vue b/src/frontend/devops-pipeline/src/components/pipelineSetting/NotifySetting.vue
index 9c18fbdee8f..6564abef87d 100644
--- a/src/frontend/devops-pipeline/src/components/pipelineSetting/NotifySetting.vue
+++ b/src/frontend/devops-pipeline/src/components/pipelineSetting/NotifySetting.vue
@@ -28,6 +28,30 @@
                     </bk-checkbox>
                 </bk-checkbox-group>
             </bk-form-item>
+            <bk-form-item :label="$t('settings.noticeGroup')">
+                <bk-checkbox-group
+                    :value="subscription.groups"
+                    @change="value => updateSubscription('groups', value)"
+                >
+                    <bk-checkbox
+                        v-for="item in projectGroupAndUsers"
+                        :key="item.groupId"
+                        :value="item.groupId"
+                        class="groups-users-checkbox"
+                    >
+                        {{ item.groupName }}
+                        <bk-popover placement="top">
+                            <span class="info-notice-length">({{ item.users.length }})</span>
+                            <div
+                                slot="content"
+                                style="max-width: 300px;word-wrap:break-word; word-break: normal"
+                            >
+                                {{ item.users.length ? item.users.join(';') : $t('settings.emptyNoticeGroup') }}
+                            </div>
+                        </bk-popover>
+                    </bk-checkbox>
+                </bk-checkbox-group>
+            </bk-form-item>
             <bk-form-item :label="$t('settings.additionUser')">
                 <user-input
                     name="additionUser"
@@ -103,7 +127,8 @@
         },
         props: {
             subscription: Object,
-            updateSubscription: Function
+            updateSubscription: Function,
+            projectGroupAndUsers: Array
         },
         data () {
             return {
@@ -163,6 +188,17 @@
             width: auto;
             margin-right: 24px;
         }
+        .groups-users-checkbox {
+            width: 150px;
+            margin-bottom: 4px;
+            margin-right: 8px;
+            .bk-checkbox-text {
+                max-width: 126px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
         .notify-setting-no-data {
             vertical-align: top;
             font-size: 12px;
diff --git a/src/frontend/devops-pipeline/src/store/modules/pipelines/pipelines.js b/src/frontend/devops-pipeline/src/store/modules/pipelines/pipelines.js
index 56a95088bfa..e84bc21b472 100755
--- a/src/frontend/devops-pipeline/src/store/modules/pipelines/pipelines.js
+++ b/src/frontend/devops-pipeline/src/store/modules/pipelines/pipelines.js
@@ -120,6 +120,16 @@ const actions = {
     requestStoreImageList ({ commit }, { projectCode, agentType, recommendFlag, page, pageSize }) {
         return ajax.get(`/${STORE_API_URL_PREFIX}/user/market/image/jobMarketImages?projectCode=${projectCode}&agentType=${agentType}&recommendFlag=${recommendFlag}&page=${page}&pageSize=${pageSize}`)
     },
+    requestProjectGroupAndUsers: async ({ commit }, { projectId }) => {
+        try {
+            const response = await ajax.get(`/experience/api/user/groups/${projectId}/projectGroupAndUsers`)
+            return response.data
+        } catch (e) {
+            if (e.code === 403) {
+                e.message = ''
+            }
+        }
+    },
     requestTemplateSetting: async ({ commit }, { projectId, templateId }) => {
         try {
             const response = await ajax.get(`/${PROCESS_API_URL_PREFIX}/user/templates/projects/${projectId}/templates/${templateId}/settings`)