答卷白名单前端代码 (#309)

* --story=1059873 --user=T8罗佳明 【ALL】2024年06月日常优化 https://www.tapd.cn/23402991/s/2202857

* feat: 新增分题统计相关功能 (#275)

* feat: 分题统计前端开发 (#276)

* [refactor]: check for the ispc-html class is done using a regular expression to ensure that the class is only added once when the browser window is resized (#301)

* feat: 调整文档内容

* fix: 修复预览兼容

* fix: 修复文档内容

* feat:答卷白名单功能

* fix:修复提示框不重置的问题

* fix:修复lint问题

* fix:修复server的lint问题

---------

Co-authored-by: luch <32321690+luch1994@users.noreply.github.com>
Co-authored-by: hiStephen <30630927+1004801012@users.noreply.github.com>
Co-authored-by: yelang <happyforeveron@gmail.com>
Co-authored-by: sudoooooo <zjbbabybaby@gmail.com>

README.md

@@ -53,11 +53,11 @@ _**(个人和企业用户均可快速构建特定领域的调研类解决方案
 
 # 技术
 
-Web 端：Vue3 + ElementPlus；C 端多端渲染（在建，[申请加入共建](https://xiaojusurvey.didi.cn/docs/next/share/%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E8%B4%A1%E7%8C%AE#%E6%88%90%E4%B8%BA%E5%AE%98%E6%96%B9%E4%B8%93%E9%A1%B9%E5%BB%BA%E8%AE%BE%E8%80%85)）
+Web 端：Vue3 + ElementPlus；C 端多端渲染（规划中）
 
-Server 端：Nestjs + MongoDB；Java（在建，[申请加入共建](https://xiaojusurvey.didi.cn/docs/next/share/%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E8%B4%A1%E7%8C%AE#%E6%88%90%E4%B8%BA%E5%AE%98%E6%96%B9%E4%B8%93%E9%A1%B9%E5%BB%BA%E8%AE%BE%E8%80%85)）
+Server 端：Nestjs + MongoDB；Java（在建，[欢迎加入共建](https://github.com/didi/xiaoju-survey/issues/306)）
 
-智能化基座：（在建）
+智能化基座：（规划中）
 
 # 项目优势
 
@@ -194,18 +194,18 @@ npm run serve
 
 <br /><br />
 
+## 微信交流群（推荐）
+
+官方群会发布项目最新消息、建设计划和社区活动，欢迎你的加入。任何问题和合作可以联系小助手：
+
+<img src="https://img-hxy021.didistatic.com/static/starimg/img/KXKvc7sjHz1700061188156.png"  width="200" />
+
 ## QQ 交流群
 
 官方群会发布项目最新消息、建设计划和社区活动，欢迎你的加入：
 
 [<img src="https://img-hxy021.didistatic.com/static/starimg/img/iJUmLIHKV21700192846057.png"  width="210" />](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P61UJI_q8AzizyBLGOm-bUvzNrUnSQq-&authKey=yZFtL9biGB5yiIME3%2Bi%2Bf6XMOdTNiuf0pCIaviEEAIryySNzVy6LJ4xl7uHdEcrM&noverify=0&group_code=920623419)
 
-## 微信交流群
-
-官方群会发布项目最新消息、建设计划和社区活动，欢迎你的加入。任何问题和合作可以联系小助手：
-
-<img src="https://img-hxy021.didistatic.com/static/starimg/img/KXKvc7sjHz1700061188156.png"  width="200" />
-
 ## Star
 
 开源不易，如果该项目对你有帮助，请 star 一下 ❤️❤️❤️，你的支持是我们最大的动力。

README_EN.md

@@ -47,17 +47,17 @@
 
 > For more comprehensive features, please refer to the official Feature documentation.
 
-<img src="https://github.com/didi/xiaoju-survey/assets/16012672/dd427471-368d-49d9-bc44-13c34d84e3be"  width="700" />
+<img src="https://github.com/didi/xiaoju-survey/assets/16012672/508ce30f-0ae8-4f5f-84a7-e96de8238a7f"  width="700" />
 
 _**(Both individual and enterprise users can quickly build survey solutions specific to their fields.)**_
 
 # Technology
 
-Web: Vue3 + ElementPlus; Multi-end rendering for C-end (under construction, application for co-construction welcome).
+Web: Vue3 + ElementPlus; Multi-end rendering for C-end (planning).
 
-Server: Nestjs + MongoDB; Java (under construction).
+Server: Nestjs + MongoDB; Java ([under construction](https://github.com/didi/xiaoju-survey/issues/306)).
 
-Intelligent Foundation: (under construction).
+Intelligent Foundation: (planning).
 
 # Project Advantages
 
@@ -194,18 +194,18 @@ Create and publish a questionnaire.
 
 <br /><br />
 
-## QQ Group
-
-The official group will release the latest project news, construction plans, and community activities. Welcome to join:
-
-[<img src="https://img-hxy021.didistatic.com/static/starimg/img/iJUmLIHKV21700192846057.png"  width="210" />](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P61UJI_q8AzizyBLGOm-bUvzNrUnSQq-&authKey=yZFtL9biGB5yiIME3%2Bi%2Bf6XMOdTNiuf0pCIaviEEAIryySNzVy6LJ4xl7uHdEcrM&noverify=0&group_code=920623419)
-
 ## WeChat Group
 
 The official group will release the latest project news, construction plans, and community activities. Any questions and cooperation can contact the assistant:
 
 <img src="https://img-hxy021.didistatic.com/static/starimg/img/KXKvc7sjHz1700061188156.png"  width="200" />
 
+## QQ Group
+
+The official group will release the latest project news, construction plans, and community activities. Welcome to join:
+
+[<img src="https://img-hxy021.didistatic.com/static/starimg/img/iJUmLIHKV21700192846057.png"  width="210" />](http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P61UJI_q8AzizyBLGOm-bUvzNrUnSQq-&authKey=yZFtL9biGB5yiIME3%2Bi%2Bf6XMOdTNiuf0pCIaviEEAIryySNzVy6LJ4xl7uHdEcrM&noverify=0&group_code=920623419)
+
 ## Star
 
 Open source is not easy. If this project helps you, please star it ❤️❤️❤️. Your support is our greatest motivation.

server/src/guards/__test/survey.guard.spec.ts

@@ -11,6 +11,7 @@ import { NoPermissionException } from 'src/exceptions/noPermissionException';
 import { SurveyMeta } from 'src/models/surveyMeta.entity';
 import { WorkspaceMember } from 'src/models/workspaceMember.entity';
 import { Collaborator } from 'src/models/collaborator.entity';
+import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
 
 describe('SurveyGuard', () => {
   let guard: SurveyGuard;
@@ -81,7 +82,19 @@ describe('SurveyGuard', () => {
     );
   });
 
-  it('should allow access if user is the owner of the survey', async () => {
+  it('should allow access if user is the owner of the survey by ownerId', async () => {
+    const context = createMockExecutionContext();
+    const surveyMeta = { ownerId: 'testUserId', workspaceId: null };
+    jest.spyOn(reflector, 'get').mockReturnValue('params.surveyId');
+    jest
+      .spyOn(surveyMetaService, 'getSurveyById')
+      .mockResolvedValue(surveyMeta as SurveyMeta);
+
+    const result = await guard.canActivate(context);
+    expect(result).toBe(true);
+  });
+
+  it('should allow access if user is the owner of the survey by username', async () => {
     const context = createMockExecutionContext();
     const surveyMeta = { owner: 'testUser', workspaceId: null };
     jest.spyOn(reflector, 'get').mockReturnValue('params.surveyId');
@@ -108,7 +121,35 @@ describe('SurveyGuard', () => {
     expect(result).toBe(true);
   });
 
-  it('should throw NoPermissionException if user has no permissions', async () => {
+  it('should throw NoPermissionException if user is not a workspace member', async () => {
+    const context = createMockExecutionContext();
+    const surveyMeta = { owner: 'anotherUser', workspaceId: 'workspaceId' };
+    jest.spyOn(reflector, 'get').mockReturnValue('params.surveyId');
+    jest
+      .spyOn(surveyMetaService, 'getSurveyById')
+      .mockResolvedValue(surveyMeta as SurveyMeta);
+    jest.spyOn(workspaceMemberService, 'findOne').mockResolvedValue(null);
+
+    await expect(guard.canActivate(context)).rejects.toThrow(
+      NoPermissionException,
+    );
+  });
+
+  it('should throw NoPermissionException if no permissions are provided', async () => {
+    const context = createMockExecutionContext();
+    const surveyMeta = { owner: 'anotherUser', workspaceId: null };
+    jest.spyOn(reflector, 'get').mockReturnValueOnce('params.surveyId');
+    jest.spyOn(reflector, 'get').mockReturnValueOnce(null);
+    jest
+      .spyOn(surveyMetaService, 'getSurveyById')
+      .mockResolvedValue(surveyMeta as SurveyMeta);
+
+    await expect(guard.canActivate(context)).rejects.toThrow(
+      NoPermissionException,
+    );
+  });
+
+  it('should throw NoPermissionException if user has no matching permissions', async () => {
     const context = createMockExecutionContext();
     const surveyMeta = { owner: 'anotherUser', workspaceId: null };
     jest.spyOn(reflector, 'get').mockReturnValueOnce('params.surveyId');
@@ -125,6 +166,24 @@ describe('SurveyGuard', () => {
     );
   });
 
+  it('should allow access if user has the required permissions', async () => {
+    const context = createMockExecutionContext();
+    const surveyMeta = { owner: 'anotherUser', workspaceId: null };
+    jest.spyOn(reflector, 'get').mockReturnValueOnce('params.surveyId');
+    jest
+      .spyOn(reflector, 'get')
+      .mockReturnValueOnce([SURVEY_PERMISSION.SURVEY_CONF_MANAGE]);
+    jest
+      .spyOn(surveyMetaService, 'getSurveyById')
+      .mockResolvedValue(surveyMeta as SurveyMeta);
+    jest.spyOn(collaboratorService, 'getCollaborator').mockResolvedValue({
+      permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
+    } as Collaborator);
+
+    const result = await guard.canActivate(context);
+    expect(result).toBe(true);
+  });
+
   function createMockExecutionContext(): ExecutionContext {
     return {
       switchToHttp: jest.fn().mockReturnValue({

server/src/modules/auth/__test/user.service.spec.ts

@@ -6,6 +6,7 @@ import { User } from 'src/models/user.entity';
 import { HttpException } from 'src/exceptions/httpException';
 import { hash256 } from 'src/utils/hash256';
 import { RECORD_STATUS } from 'src/enums';
+import { ObjectId } from 'mongodb';
 
 describe('UserService', () => {
   let service: UserService;
@@ -21,6 +22,7 @@ describe('UserService', () => {
             create: jest.fn(),
             save: jest.fn(),
             findOne: jest.fn(),
+            find: jest.fn(),
           },
         },
       ],
@@ -32,6 +34,10 @@ describe('UserService', () => {
     );
   });
 
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+
   it('should create a user', async () => {
     const userInfo = {
       username: 'testUser',
@@ -102,7 +108,7 @@ describe('UserService', () => {
     expect(user).toEqual({ ...userInfo, password: hashedPassword });
   });
 
-  it('should return undefined when user is not found by credentials', async () => {
+  it('should return null when user is not found by credentials', async () => {
     const userInfo = {
       username: 'nonExistingUser',
       password: 'nonExistingPassword',
@@ -129,7 +135,8 @@ describe('UserService', () => {
     const userInfo = {
       username: username,
       password: 'existingPassword',
-    } as User;
+      curStatus: { status: 'ACTIVE' },
+    } as unknown as User;
 
     jest.spyOn(userRepository, 'findOne').mockResolvedValue(userInfo);
 
@@ -137,10 +144,129 @@ describe('UserService', () => {
 
     expect(userRepository.findOne).toHaveBeenCalledWith({
       where: {
-        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
         username: username,
+        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
       },
     });
     expect(user).toEqual(userInfo);
   });
+
+  it('should return null when user is not found by username', async () => {
+    const username = 'nonExistingUser';
+
+    const findOneSpy = jest
+      .spyOn(userRepository, 'findOne')
+      .mockResolvedValue(null);
+
+    const user = await service.getUserByUsername(username);
+
+    expect(findOneSpy).toHaveBeenCalledWith({
+      where: {
+        username: username,
+        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
+      },
+    });
+    expect(user).toBe(null);
+  });
+
+  it('should return a user by id', async () => {
+    const id = '60c72b2f9b1e8a5f4b123456';
+    const userInfo = {
+      _id: new ObjectId(id),
+      username: 'testUser',
+      curStatus: { status: 'ACTIVE' },
+    } as unknown as User;
+
+    jest.spyOn(userRepository, 'findOne').mockResolvedValue(userInfo);
+
+    const user = await service.getUserById(id);
+
+    expect(userRepository.findOne).toHaveBeenCalledWith({
+      where: {
+        _id: new ObjectId(id),
+        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
+      },
+    });
+    expect(user).toEqual(userInfo);
+  });
+
+  it('should return null when user is not found by id', async () => {
+    const id = '60c72b2f9b1e8a5f4b123456';
+
+    const findOneSpy = jest
+      .spyOn(userRepository, 'findOne')
+      .mockResolvedValue(null);
+
+    const user = await service.getUserById(id);
+
+    expect(findOneSpy).toHaveBeenCalledWith({
+      where: {
+        _id: new ObjectId(id),
+        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
+      },
+    });
+    expect(user).toBe(null);
+  });
+
+  it('should return a list of users by username', async () => {
+    const username = 'test';
+    const userList = [
+      { _id: new ObjectId(), username: 'testUser1', createDate: new Date() },
+      { _id: new ObjectId(), username: 'testUser2', createDate: new Date() },
+    ];
+
+    jest
+      .spyOn(userRepository, 'find')
+      .mockResolvedValue(userList as unknown as User[]);
+
+    const result = await service.getUserListByUsername({
+      username,
+      skip: 0,
+      take: 10,
+    });
+
+    expect(userRepository.find).toHaveBeenCalledWith({
+      where: {
+        username: new RegExp(username),
+        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
+      },
+      skip: 0,
+      take: 10,
+      select: ['_id', 'username', 'createDate'],
+    });
+    expect(result).toEqual(userList);
+  });
+
+  it('should return a list of users by ids', async () => {
+    const idList = ['60c72b2f9b1e8a5f4b123456', '60c72b2f9b1e8a5f4b123457'];
+    const userList = [
+      {
+        _id: new ObjectId(idList[0]),
+        username: 'testUser1',
+        createDate: new Date(),
+      },
+      {
+        _id: new ObjectId(idList[1]),
+        username: 'testUser2',
+        createDate: new Date(),
+      },
+    ];
+
+    jest
+      .spyOn(userRepository, 'find')
+      .mockResolvedValue(userList as unknown as User[]);
+
+    const result = await service.getUserListByIds({ idList });
+
+    expect(userRepository.find).toHaveBeenCalledWith({
+      where: {
+        _id: {
+          $in: idList.map((id) => new ObjectId(id)),
+        },
+        'curStatus.status': { $ne: RECORD_STATUS.REMOVED },
+      },
+      select: ['_id', 'username', 'createDate'],
+    });
+    expect(result).toEqual(userList);
+  });
 });

server/src/modules/survey/__test/collaborator.controller.spec.ts

@@ -10,7 +10,13 @@ import { UserService } from 'src/modules/auth/services/user.service';
 import { ObjectId } from 'mongodb';
 import { SurveyMetaService } from '../services/surveyMeta.service';
 import { WorkspaceMemberService } from 'src/modules/workspace/services/workspaceMember.service';
-import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
+import {
+  SURVEY_PERMISSION,
+  SURVEY_PERMISSION_DESCRIPTION,
+} from 'src/enums/surveyPermission';
+import { BatchSaveCollaboratorDto } from '../dto/batchSaveCollaborator.dto';
+import { User } from 'src/models/user.entity';
+import { SurveyMeta } from 'src/models/surveyMeta.entity';
 
 jest.mock('src/guards/authentication.guard');
 jest.mock('src/guards/survey.guard');
@@ -21,6 +27,8 @@ describe('CollaboratorController', () => {
   let collaboratorService: CollaboratorService;
   let logger: Logger;
   let userService: UserService;
+  let surveyMetaService: SurveyMetaService;
+  let workspaceMemberServie: WorkspaceMemberService;
 
   beforeEach(async () => {
     const module: TestingModule = await Test.createTestingModule({
@@ -34,12 +42,18 @@ describe('CollaboratorController', () => {
             changeUserPermission: jest.fn(),
             deleteCollaborator: jest.fn(),
             getCollaborator: jest.fn(),
+            batchDeleteBySurveyId: jest.fn(),
+            batchCreate: jest.fn(),
+            batchDelete: jest.fn(),
+            updateById: jest.fn(),
+            batchSaveCollaborator: jest.fn(),
           },
         },
         {
           provide: Logger,
           useValue: {
             error: jest.fn(),
+            info: jest.fn(),
           },
         },
         {
@@ -72,6 +86,10 @@ describe('CollaboratorController', () => {
     collaboratorService = module.get<CollaboratorService>(CollaboratorService);
     logger = module.get<Logger>(Logger);
     userService = module.get<UserService>(UserService);
+    surveyMetaService = module.get<SurveyMetaService>(SurveyMetaService);
+    workspaceMemberServie = module.get<WorkspaceMemberService>(
+      WorkspaceMemberService,
+    );
   });
 
   it('should be defined', () => {
@@ -115,6 +133,59 @@ describe('CollaboratorController', () => {
         HttpException,
       );
     });
+
+    it('should throw an exception if user does not exist', async () => {
+      const reqBody: CreateCollaboratorDto = {
+        surveyId: 'surveyId',
+        userId: new ObjectId().toString(),
+        permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
+      };
+      const req = {
+        user: { _id: 'userId' },
+        surveyMeta: { ownerId: new ObjectId().toString() },
+      };
+
+      jest.spyOn(userService, 'getUserById').mockResolvedValue(null);
+
+      await expect(controller.addCollaborator(reqBody, req)).rejects.toThrow(
+        HttpException,
+      );
+    });
+
+    it('should throw an exception if user is the survey owner', async () => {
+      const userId = new ObjectId().toString();
+      const reqBody: CreateCollaboratorDto = {
+        surveyId: 'surveyId',
+        userId: userId,
+        permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
+      };
+      const req = { user: { _id: 'userId' }, surveyMeta: { ownerId: userId } };
+
+      await expect(controller.addCollaborator(reqBody, req)).rejects.toThrow(
+        HttpException,
+      );
+    });
+
+    it('should throw an exception if user is already a collaborator', async () => {
+      const userId = new ObjectId().toString();
+      const reqBody: CreateCollaboratorDto = {
+        surveyId: 'surveyId',
+        userId: userId,
+        permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
+      };
+      const req = {
+        user: { _id: 'userId' },
+        surveyMeta: { ownerId: new ObjectId().toString() },
+      };
+
+      jest
+        .spyOn(collaboratorService, 'getCollaborator')
+        .mockResolvedValue({} as unknown as Collaborator);
+
+      await expect(controller.addCollaborator(reqBody, req)).rejects.toThrow(
+        HttpException,
+      );
+    });
   });
 
   describe('getSurveyCollaboratorList', () => {
@@ -217,4 +288,229 @@ describe('CollaboratorController', () => {
       expect(logger.error).toHaveBeenCalledTimes(1);
     });
   });
+
+  // 新增的测试方法
+  describe('getPermissionList', () => {
+    it('should return the permission list', async () => {
+      const result = Object.values(SURVEY_PERMISSION_DESCRIPTION);
+
+      const response = await controller.getPermissionList();
+
+      expect(response).toEqual({
+        code: 200,
+        data: result,
+      });
+    });
+  });
+
+  describe('batchSaveCollaborator', () => {
+    it('should batch save collaborators successfully', async () => {
+      const userId0 = new ObjectId().toString();
+      const userId1 = new ObjectId().toString();
+      const existsCollaboratorId = new ObjectId().toString();
+      const surveyId = new ObjectId().toString();
+      const reqBody: BatchSaveCollaboratorDto = {
+        surveyId: surveyId,
+        collaborators: [
+          {
+            userId: userId0,
+            permissions: [SURVEY_PERMISSION.SURVEY_CONF_MANAGE],
+          },
+          {
+            _id: existsCollaboratorId,
+            userId: userId1,
+            permissions: [SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE],
+          },
+        ],
+      };
+      const req = {
+        user: { _id: 'requestUserId' },
+        surveyMeta: { ownerId: 'ownerId' },
+      };
+
+      const userList = [
+        { _id: new ObjectId(userId0) },
+        { _id: new ObjectId(userId1) },
+      ];
+
+      jest
+        .spyOn(userService, 'getUserListByIds')
+        .mockResolvedValue(userList as unknown as User[]);
+      jest
+        .spyOn(collaboratorService, 'batchDelete')
+        .mockResolvedValue({ deletedCount: 1, acknowledged: true });
+      jest
+        .spyOn(collaboratorService, 'batchCreate')
+        .mockResolvedValue([{}] as any);
+      jest.spyOn(collaboratorService, 'updateById').mockResolvedValue({});
+
+      const response = await controller.batchSaveCollaborator(reqBody, req);
+
+      expect(response).toEqual({
+        code: 200,
+      });
+      expect(userService.getUserListByIds).toHaveBeenCalled();
+      expect(collaboratorService.batchDelete).toHaveBeenCalled();
+      expect(collaboratorService.batchCreate).toHaveBeenCalled();
+      expect(collaboratorService.updateById).toHaveBeenCalled();
+    });
+
+    it('should throw an exception if validation fails', async () => {
+      const reqBody: BatchSaveCollaboratorDto = {
+        surveyId: '',
+        collaborators: [
+          {
+            userId: '',
+            permissions: [SURVEY_PERMISSION.SURVEY_COOPERATION_MANAGE],
+          },
+        ],
+      };
+      const req = { user: { _id: 'userId' } };
+
+      await expect(
+        controller.batchSaveCollaborator(reqBody, req),
+      ).rejects.toThrow(HttpException);
+      expect(logger.error).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('getUserSurveyPermissions', () => {
+    it('should return owner permissions if user is the owner', async () => {
+      const req = {
+        user: { _id: new ObjectId(), username: 'owner' },
+      };
+      const query = { surveyId: 'surveyId' };
+      const surveyMeta = {
+        ownerId: req.user._id.toString(),
+        owner: req.user.username,
+        workspaceId: 'workspaceId',
+      };
+
+      jest
+        .spyOn(surveyMetaService, 'getSurveyById')
+        .mockResolvedValue(surveyMeta as SurveyMeta);
+
+      const response = await controller.getUserSurveyPermissions(req, query);
+
+      expect(response).toEqual({
+        code: 200,
+        data: {
+          isOwner: true,
+          permissions: [
+            SURVEY_PERMISSION.SURVEY_COOPERATION_MANAGE,
+            SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE,
+            SURVEY_PERMISSION.SURVEY_CONF_MANAGE,
+          ],
+        },
+      });
+    });
+
+    it('should return default permissions if user is a workspace member', async () => {
+      const req = {
+        user: { _id: new ObjectId(), username: 'user' },
+      };
+      const query = { surveyId: 'surveyId' };
+      const surveyMeta = {
+        ownerId: 'ownerId',
+        owner: 'owner',
+        workspaceId: 'workspaceId',
+      };
+
+      jest
+        .spyOn(surveyMetaService, 'getSurveyById')
+        .mockResolvedValue(surveyMeta as SurveyMeta);
+      jest.spyOn(workspaceMemberServie, 'findOne').mockResolvedValue({} as any);
+
+      const response = await controller.getUserSurveyPermissions(req, query);
+
+      expect(response).toEqual({
+        code: 200,
+        data: {
+          isOwner: false,
+          permissions: [
+            SURVEY_PERMISSION.SURVEY_COOPERATION_MANAGE,
+            SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE,
+            SURVEY_PERMISSION.SURVEY_CONF_MANAGE,
+          ],
+        },
+      });
+    });
+
+    it('should return collaborator permissions if user is a collaborator', async () => {
+      const req = {
+        user: { _id: new ObjectId(), username: 'user' },
+      };
+      const query = { surveyId: 'surveyId' };
+      const surveyMeta = {
+        ownerId: 'ownerId',
+        owner: 'owner',
+        workspaceId: 'workspaceId',
+      };
+      const collaborator = {
+        permissions: ['read', 'write'],
+      };
+
+      jest
+        .spyOn(surveyMetaService, 'getSurveyById')
+        .mockResolvedValue(surveyMeta as SurveyMeta);
+      jest.spyOn(workspaceMemberServie, 'findOne').mockResolvedValue(null);
+      jest
+        .spyOn(collaboratorService, 'getCollaborator')
+        .mockResolvedValue(collaborator as Collaborator);
+
+      const response = await controller.getUserSurveyPermissions(req, query);
+
+      expect(response).toEqual({
+        code: 200,
+        data: {
+          isOwner: false,
+          permissions: collaborator.permissions,
+        },
+      });
+    });
+
+    it('should return empty permissions if user has no permissions', async () => {
+      const req = {
+        user: { _id: new ObjectId(), username: 'user' },
+      };
+      const query = { surveyId: 'surveyId' };
+      const surveyMeta = {
+        ownerId: 'ownerId',
+        owner: 'owner',
+        workspaceId: 'workspaceId',
+      };
+
+      jest
+        .spyOn(surveyMetaService, 'getSurveyById')
+        .mockResolvedValue(surveyMeta as SurveyMeta);
+      jest.spyOn(workspaceMemberServie, 'findOne').mockResolvedValue(null);
+      jest
+        .spyOn(collaboratorService, 'getCollaborator')
+        .mockResolvedValue(null);
+
+      const response = await controller.getUserSurveyPermissions(req, query);
+
+      expect(response).toEqual({
+        code: 200,
+        data: {
+          isOwner: false,
+          permissions: [],
+        },
+      });
+    });
+
+    it('should throw an exception if survey does not exist', async () => {
+      const req = { user: { _id: 'userId' } };
+      const query = { surveyId: 'nonexistentSurveyId' };
+
+      jest
+        .spyOn(surveyMetaService, 'getSurveyById')
+        .mockResolvedValueOnce(null);
+
+      await expect(
+        controller.getUserSurveyPermissions(req, query),
+      ).rejects.toThrow(HttpException);
+      expect(logger.error).toHaveBeenCalledTimes(1);
+    });
+  });
 });

server/src/modules/survey/__test/dataStatistic.controller.spec.ts

@@ -14,6 +14,7 @@ import { Logger } from 'src/logger';
 import { UserService } from 'src/modules/auth/services/user.service';
 import { ResponseSecurityPlugin } from 'src/securityPlugin/responseSecurityPlugin';
 import { AuthService } from 'src/modules/auth/services/auth.service';
+import { HttpException } from 'src/exceptions/httpException';
 
 jest.mock('../services/dataStatistic.service');
 jest.mock('../services/surveyMeta.service');
@@ -21,11 +22,13 @@ jest.mock('../../surveyResponse/services/responseScheme.service');
 
 jest.mock('src/guards/authentication.guard');
 jest.mock('src/guards/survey.guard');
-jest.mock('src/guards/workspace.guard');
 
 describe('DataStatisticController', () => {
   let controller: DataStatisticController;
   let dataStatisticService: DataStatisticService;
+  let responseSchemaService: ResponseSchemaService;
+  let pluginManager: XiaojuSurveyPluginManager;
+  let logger: Logger;
 
   beforeEach(async () => {
     const module: TestingModule = await Test.createTestingModule({
@@ -64,9 +67,14 @@ describe('DataStatisticController', () => {
     controller = module.get<DataStatisticController>(DataStatisticController);
     dataStatisticService =
       module.get<DataStatisticService>(DataStatisticService);
-    const pluginManager = module.get<XiaojuSurveyPluginManager>(
+    responseSchemaService = module.get<ResponseSchemaService>(
+      ResponseSchemaService,
+    );
+    pluginManager = module.get<XiaojuSurveyPluginManager>(
       XiaojuSurveyPluginManager,
     );
+    logger = module.get<Logger>(Logger);
+
     pluginManager.registerPlugin(
       new ResponseSecurityPlugin('dataAesEncryptSecretKey'),
     );
@@ -82,6 +90,9 @@ describe('DataStatisticController', () => {
       const mockRequest = {
         query: {
           surveyId,
+          isDesensitive: false,
+          page: 1,
+          pageSize: 10,
         },
         user: {
           username: 'testUser',
@@ -105,13 +116,13 @@ describe('DataStatisticController', () => {
       };
 
       jest
-        .spyOn(controller['responseSchemaService'], 'getResponseSchemaByPageId')
+        .spyOn(responseSchemaService, 'getResponseSchemaByPageId')
         .mockResolvedValueOnce({} as any);
       jest
         .spyOn(dataStatisticService, 'getDataTable')
         .mockResolvedValueOnce(mockDataTable);
 
-      const result = await controller.data(mockRequest.query, {});
+      const result = await controller.data(mockRequest.query, mockRequest);
 
       expect(result).toEqual({
         code: 200,
@@ -125,6 +136,8 @@ describe('DataStatisticController', () => {
         query: {
           surveyId,
           isDesensitive: true,
+          page: 1,
+          pageSize: 10,
         },
         user: {
           username: 'testUser',
@@ -146,19 +159,499 @@ describe('DataStatisticController', () => {
           { difTime: '0.5', createDate: '2024-02-11', data123: '13800000000' },
         ],
       };
+
       jest
-        .spyOn(controller['responseSchemaService'], 'getResponseSchemaByPageId')
+        .spyOn(responseSchemaService, 'getResponseSchemaByPageId')
         .mockResolvedValueOnce({} as any);
       jest
         .spyOn(dataStatisticService, 'getDataTable')
         .mockResolvedValueOnce(mockDataTable);
 
-      const result = await controller.data(mockRequest.query, {});
+      const result = await controller.data(mockRequest.query, mockRequest);
 
       expect(result).toEqual({
         code: 200,
         data: mockDataTable,
       });
     });
+
+    it('should throw an exception if validation fails', async () => {
+      const mockRequest = {
+        query: {
+          surveyId: '',
+        },
+        user: {
+          username: 'testUser',
+        },
+      };
+
+      await expect(
+        controller.data(mockRequest.query, mockRequest),
+      ).rejects.toThrow(HttpException);
+      expect(logger.error).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('aggregationStatis', () => {
+    it('should return aggregation statistics', async () => {
+      const mockRequest = {
+        query: {
+          surveyId: new ObjectId().toString(),
+        },
+      };
+
+      const mockResponseSchema = {
+        _id: new ObjectId('6659c3283b1cb279bc2e2b0c'),
+        curStatus: {
+          status: 'published',
+          date: 1717159136024,
+        },
+        statusList: [
+          {
+            status: 'published',
+            date: 1717158851823,
+          },
+        ],
+        createDate: 1717158851823,
+        updateDate: 1717159136025,
+        title: '问卷调研',
+        surveyPath: 'ZdGNzTTR',
+        code: {
+          bannerConf: {
+            titleConfig: {
+              mainTitle:
+                '<h3 style="text-align: center">欢迎填写问卷</h3><p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style="color: rgb(204, 0, 0)">期待您的参与！</span></p>',
+              subTitle: '',
+              applyTitle: '',
+            },
+            bannerConfig: {
+              bgImage: '/imgs/skin/17e06b7604a007e1d3e1453b9ddadc3c.webp',
+              bgImageAllowJump: false,
+              bgImageJumpLink: '',
+              videoLink: '',
+              postImg: '',
+            },
+          },
+          baseConf: {
+            begTime: '2024-05-31 20:31:36',
+            endTime: '2034-05-31 20:31:36',
+            language: 'chinese',
+            showVoteProcess: 'allow',
+            tLimit: 0,
+            answerBegTime: '00:00:00',
+            answerEndTime: '23:59:59',
+            answerLimitTime: 0,
+          },
+          bottomConf: {
+            logoImage: '/imgs/Logo.webp',
+            logoImageWidth: '60%',
+          },
+          skinConf: {
+            backgroundConf: {
+              color: '#fff',
+            },
+            themeConf: {
+              color: '#ffa600',
+            },
+            contentConf: {
+              opacity: 100,
+            },
+            skinColor: '#4a4c5b',
+            inputBgColor: '#ffffff',
+          },
+          submitConf: {
+            submitTitle: '提交',
+            msgContent: {
+              msg_200: '提交成功',
+              msg_9001: '您来晚了，感谢支持问卷~',
+              msg_9002: '请勿多次提交！',
+              msg_9003: '您来晚了，已经满额！',
+              msg_9004: '提交失败！',
+            },
+            confirmAgain: {
+              is_again: true,
+              again_text: '确认要提交吗？',
+            },
+            link: '',
+          },
+          logicConf: {
+            showLogicConf: [],
+          },
+          dataConf: {
+            dataList: [
+              {
+                isRequired: true,
+                showIndex: true,
+                showType: true,
+                showSpliter: true,
+                type: 'radio',
+                placeholderDesc: '',
+                field: 'data515',
+                title: '标题2',
+                placeholder: '',
+                randomSort: false,
+                checked: false,
+                minNum: '',
+                maxNum: '',
+                options: [
+                  {
+                    text: '选项1',
+                    imageUrl: '',
+                    others: false,
+                    mustOthers: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '115019',
+                  },
+                  {
+                    text: '选项2',
+                    imageUrl: '',
+                    others: false,
+                    mustOthers: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '115020',
+                  },
+                ],
+                importKey: 'single',
+                importData: '',
+                cOption: '',
+                cOptions: [],
+                star: 5,
+                exclude: false,
+                textRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '500',
+                    value: 500,
+                  },
+                },
+              },
+              {
+                field: 'data893',
+                showIndex: true,
+                showType: true,
+                showSpliter: true,
+                type: 'checkbox',
+                placeholderDesc: '',
+                sLimit: 0,
+                mhLimit: 0,
+                title: '标题2',
+                placeholder: '',
+                valid: '',
+                isRequired: true,
+                randomSort: false,
+                showLeftNum: true,
+                innerRandom: false,
+                checked: false,
+                selectType: 'radio',
+                sortWay: 'v',
+                noNps: '',
+                minNum: '',
+                maxNum: '',
+                starStyle: 'star',
+                starMin: 1,
+                starMax: 5,
+                min: 0,
+                max: 10,
+                minMsg: '极不满意',
+                maxMsg: '十分满意',
+                rangeConfig: {},
+                options: [
+                  {
+                    text: '选项1',
+                    others: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '466671',
+                  },
+                  {
+                    text: '选项2',
+                    others: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '095415',
+                  },
+                ],
+                star: 5,
+                optionOrigin: '',
+                originType: 'selected',
+                matrixOptionsRely: '',
+                numberRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '1000',
+                    value: 1000,
+                  },
+                },
+                textRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '500',
+                    value: 500,
+                  },
+                },
+              },
+              {
+                field: 'data820',
+                showIndex: true,
+                showType: true,
+                showSpliter: true,
+                type: 'radio-nps',
+                placeholderDesc: '',
+                sLimit: 0,
+                mhLimit: 0,
+                title: '标题3',
+                placeholder: '',
+                valid: '',
+                isRequired: true,
+                randomSort: false,
+                showLeftNum: true,
+                innerRandom: false,
+                checked: false,
+                selectType: 'radio',
+                sortWay: 'v',
+                noNps: '',
+                minNum: '',
+                maxNum: '',
+                starStyle: 'star',
+                starMin: 1,
+                starMax: 5,
+                min: 0,
+                max: 10,
+                minMsg: '极不满意',
+                maxMsg: '十分满意',
+                rangeConfig: {},
+                options: [
+                  {
+                    text: '选项1',
+                    others: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '268884',
+                  },
+                  {
+                    text: '选项2',
+                    others: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '371166',
+                  },
+                ],
+                star: 5,
+                optionOrigin: '',
+                originType: 'selected',
+                matrixOptionsRely: '',
+                numberRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '1000',
+                    value: 1000,
+                  },
+                },
+                textRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '500',
+                    value: 500,
+                  },
+                },
+              },
+              {
+                field: 'data549',
+                showIndex: true,
+                showType: true,
+                showSpliter: true,
+                type: 'radio-star',
+                placeholderDesc: '',
+                sLimit: 0,
+                mhLimit: 0,
+                title: '标题4',
+                placeholder: '',
+                valid: '',
+                isRequired: true,
+                randomSort: false,
+                showLeftNum: true,
+                innerRandom: false,
+                checked: false,
+                selectType: 'radio',
+                sortWay: 'v',
+                noNps: '',
+                minNum: '',
+                maxNum: '',
+                starStyle: 'star',
+                starMin: 1,
+                starMax: 5,
+                min: 0,
+                max: 10,
+                minMsg: '极不满意',
+                maxMsg: '十分满意',
+                rangeConfig: {},
+                options: [
+                  {
+                    text: '选项1',
+                    others: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '274183',
+                  },
+                  {
+                    text: '选项2',
+                    others: false,
+                    othersKey: '',
+                    placeholderDesc: '',
+                    hash: '842967',
+                  },
+                ],
+                star: 5,
+                optionOrigin: '',
+                originType: 'selected',
+                matrixOptionsRely: '',
+                numberRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '1000',
+                    value: 1000,
+                  },
+                },
+                textRange: {
+                  min: {
+                    placeholder: '0',
+                    value: 0,
+                  },
+                  max: {
+                    placeholder: '500',
+                    value: 500,
+                  },
+                },
+              },
+            ],
+          },
+        },
+        pageId: '6659c3283b1cb279bc2e2b0c',
+      };
+
+      const mockAggregationResult = [
+        {
+          field: 'data515',
+          data: {
+            aggregation: [
+              {
+                id: '115019',
+                count: 1,
+              },
+              {
+                id: '115020',
+                count: 1,
+              },
+            ],
+            submitionCount: 2,
+          },
+        },
+        {
+          field: 'data893',
+          data: {
+            aggregation: [
+              {
+                id: '466671',
+                count: 2,
+              },
+              {
+                id: '095415',
+                count: 1,
+              },
+            ],
+            submitionCount: 2,
+          },
+        },
+        {
+          field: 'data820',
+          data: {
+            aggregation: [
+              {
+                id: '8',
+                count: 1,
+              },
+            ],
+            submitionCount: 1,
+          },
+        },
+        {
+          field: 'data549',
+          data: {
+            aggregation: [
+              {
+                id: '5',
+                count: 1,
+              },
+            ],
+            submitionCount: 1,
+          },
+        },
+      ];
+
+      jest
+        .spyOn(responseSchemaService, 'getResponseSchemaByPageId')
+        .mockResolvedValueOnce(mockResponseSchema as any);
+      jest
+        .spyOn(dataStatisticService, 'aggregationStatis')
+        .mockResolvedValueOnce(mockAggregationResult);
+
+      const result = await controller.aggregationStatis(mockRequest.query);
+
+      expect(result).toEqual({
+        code: 200,
+        data: expect.any(Array),
+      });
+    });
+
+    it('should throw an exception if validation fails', async () => {
+      const mockRequest = {
+        query: {
+          surveyId: '',
+        },
+      };
+
+      await expect(
+        controller.aggregationStatis(mockRequest.query),
+      ).rejects.toThrow(HttpException);
+    });
+
+    it('should return empty data if response schema does not exist', async () => {
+      const mockRequest = {
+        query: {
+          surveyId: new ObjectId().toString(),
+        },
+      };
+
+      jest
+        .spyOn(responseSchemaService, 'getResponseSchemaByPageId')
+        .mockResolvedValueOnce(null);
+
+      const result = await controller.aggregationStatis(mockRequest.query);
+
+      expect(result).toEqual({
+        code: 200,
+        data: [],
+      });
+    });
   });
 });

server/src/modules/survey/__test/dataStatistic.service.spec.ts

@@ -197,7 +197,6 @@ describe('DataStatisticService', () => {
             data413_3: expect.any(String),
             data413: expect.any(Number),
             data863: expect.any(String),
-            data413_custom: expect.any(String),
             difTime: expect.any(String),
             createDate: expect.any(String),
           }),
@@ -310,4 +309,161 @@ describe('DataStatisticService', () => {
       );
     });
   });
+
+  describe('aggregationStatis', () => {
+    it('should return correct aggregation data', async () => {
+      const surveyId = '65afc62904d5db18534c0f78';
+      const mockAggregationResult = {
+        data515: [
+          {
+            count: 1,
+            data: {
+              data515: '115019',
+            },
+          },
+          {
+            count: 1,
+            data: {
+              data515: '115020',
+            },
+          },
+        ],
+        data893: [
+          {
+            count: 1,
+            data: {
+              data893: ['466671'],
+            },
+          },
+          {
+            count: 1,
+            data: {
+              data893: ['466671', '095415'],
+            },
+          },
+        ],
+        data820: [
+          {
+            count: 1,
+            data: {
+              data820: 8,
+            },
+          },
+        ],
+        data549: [
+          {
+            count: 1,
+            data: {
+              data549: 5,
+            },
+          },
+        ],
+      };
+
+      const fieldList = Object.keys(mockAggregationResult);
+
+      jest.spyOn(surveyResponseRepository, 'aggregate').mockReturnValue({
+        next: jest.fn().mockResolvedValue(mockAggregationResult),
+      } as any);
+
+      const result = await service.aggregationStatis({
+        surveyId,
+        fieldList,
+      });
+
+      expect(result).toEqual(
+        expect.arrayContaining([
+          {
+            field: 'data515',
+            data: {
+              aggregation: [
+                {
+                  id: '115019',
+                  count: 1,
+                },
+                {
+                  id: '115020',
+                  count: 1,
+                },
+              ],
+              submitionCount: 2,
+            },
+          },
+          {
+            field: 'data893',
+            data: {
+              aggregation: [
+                {
+                  id: '466671',
+                  count: 2,
+                },
+                {
+                  id: '095415',
+                  count: 1,
+                },
+              ],
+              submitionCount: 2,
+            },
+          },
+          {
+            field: 'data820',
+            data: {
+              aggregation: [
+                {
+                  id: '8',
+                  count: 1,
+                },
+              ],
+              submitionCount: 1,
+            },
+          },
+          {
+            field: 'data549',
+            data: {
+              aggregation: [
+                {
+                  id: '5',
+                  count: 1,
+                },
+              ],
+              submitionCount: 1,
+            },
+          },
+        ]),
+      );
+    });
+
+    it('should return empty aggregation data when no responses', async () => {
+      const surveyId = '65afc62904d5db18534c0f78';
+      const fieldList = ['data458', 'data515'];
+
+      jest.spyOn(surveyResponseRepository, 'aggregate').mockReturnValue({
+        next: jest.fn().mockResolvedValue({}),
+      } as any);
+
+      const result = await service.aggregationStatis({
+        surveyId,
+        fieldList,
+      });
+
+      expect(result).toEqual(
+        expect.arrayContaining([
+          {
+            field: 'data458',
+            data: {
+              aggregation: [],
+              submitionCount: 0,
+            },
+          },
+          {
+            field: 'data515',
+            data: {
+              aggregation: [],
+              submitionCount: 0,
+            },
+          },
+        ]),
+      );
+    });
+  });
 });

server/src/modules/survey/controllers/collaborator.controller.ts

@@ -319,6 +319,7 @@ export class CollaboratorController {
     const surveyMeta = await this.surveyMetaService.getSurveyById({ surveyId });
 
     if (!surveyMeta) {
+      this.logger.error(`问卷不存在: ${surveyId}`, { req });
       throw new HttpException('问卷不存在', EXCEPTION_CODE.SURVEY_NOT_FOUND);
     }
 

server/src/modules/survey/controllers/dataStatistic.controller.ts

@@ -20,6 +20,8 @@ import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
 import { Logger } from 'src/logger';
 import { HttpException } from 'src/exceptions/httpException';
 import { EXCEPTION_CODE } from 'src/enums/exceptionCode';
+import { AggregationStatisDto } from '../dto/aggregationStatis.dto';
+import { handleAggretionData } from '../utils';
 
 @ApiTags('survey')
 @ApiBearerAuth()
@@ -80,4 +82,50 @@ export class DataStatisticController {
       },
     };
   }
+
+  @Get('/aggregationStatis')
+  @HttpCode(200)
+  @UseGuards(Authentication)
+  async aggregationStatis(@Query() queryInfo: AggregationStatisDto) {
+    // 聚合统计
+    const { value, error } = AggregationStatisDto.validate(queryInfo);
+    if (error) {
+      throw new HttpException('参数错误', EXCEPTION_CODE.PARAMETER_ERROR);
+    }
+    const responseSchema =
+      await this.responseSchemaService.getResponseSchemaByPageId(
+        value.surveyId,
+      );
+    if (!responseSchema) {
+      return {
+        code: 200,
+        data: [],
+      };
+    }
+    const allowQuestionType = [
+      'radio',
+      'checkbox',
+      'binary-choice',
+      'radio-star',
+      'radio-nps',
+      'vote',
+    ];
+    const fieldList = responseSchema.code.dataConf.dataList
+      .filter((item) => allowQuestionType.includes(item.type))
+      .map((item) => item.field);
+    const dataMap = responseSchema.code.dataConf.dataList.reduce((pre, cur) => {
+      pre[cur.field] = cur;
+      return pre;
+    }, {});
+    const res = await this.dataStatisticService.aggregationStatis({
+      surveyId: value.surveyId,
+      fieldList,
+    });
+    return {
+      code: 200,
+      data: res.map((item) => {
+        return handleAggretionData({ item, dataMap });
+      }),
+    };
+  }
 }

server/src/modules/survey/dto/aggregationStatis.dto.ts

@@ -0,0 +1,13 @@
+import { ApiProperty } from '@nestjs/swagger';
+import Joi from 'joi';
+
+export class AggregationStatisDto {
+  @ApiProperty({ description: '问卷id', required: true })
+  surveyId: string;
+
+  static validate(data) {
+    return Joi.object({
+      surveyId: Joi.string().required(),
+    }).validate(data);
+  }
+}

server/src/modules/survey/dto/batchSaveCollaborator.dto.ts

@@ -3,7 +3,10 @@ import Joi from 'joi';
 import { SURVEY_PERMISSION } from 'src/enums/surveyPermission';
 
 export class CollaboratorDto {
-  @ApiProperty({ description: '用户id', required: false })
+  @ApiProperty({ description: '协作id', required: false })
+  _id?: string;
+
+  @ApiProperty({ description: '用户id', required: true })
   userId: string;
 
   @ApiProperty({
@@ -16,7 +19,7 @@ export class CollaboratorDto {
       SURVEY_PERMISSION.SURVEY_RESPONSE_MANAGE,
     ],
   })
-  permissions: Array<number>;
+  permissions: Array<string>;
 }
 
 export class BatchSaveCollaboratorDto {

server/src/modules/survey/services/dataStatistic.service.ts

@@ -7,7 +7,7 @@ import moment from 'moment';
 import { keyBy } from 'lodash';
 import { DataItem } from 'src/interfaces/survey';
 import { ResponseSchema } from 'src/models/responseSchema.entity';
-import { getListHeadByDataList } from '../utils';
+import { getListHeadByDataList, transformAndMergeArrayFields } from '../utils';
 @Injectable()
 export class DataStatisticService {
   private radioType = ['radio-star', 'radio-nps'];
@@ -101,4 +101,62 @@ export class DataStatisticService {
       listBody,
     };
   }
+
+  async aggregationStatis({ surveyId, fieldList }) {
+    const $facet = fieldList.reduce((pre, cur) => {
+      const $match = { $match: { [`data.${cur}`]: { $nin: [[], '', null] } } };
+      const $group = { $group: { _id: `$data.${cur}`, count: { $sum: 1 } } };
+      const $project = {
+        $project: {
+          _id: 0,
+          count: 1,
+          secretKeys: 1,
+          sensitiveKeys: 1,
+          [`data.${cur}`]: '$_id',
+        },
+      };
+      pre[cur] = [$match, $group, $project];
+      return pre;
+    }, {});
+    const aggregation = this.surveyResponseRepository.aggregate(
+      [
+        {
+          $match: {
+            pageId: surveyId,
+            'curStatus.status': {
+              $ne: 'removed',
+            },
+          },
+        },
+        { $facet },
+      ],
+      { maxTimeMS: 30000, allowDiskUse: true },
+    );
+    const res = await aggregation.next();
+    const submitionCountMap: Record<string, number> = {};
+    for (const field in res) {
+      let count = 0;
+      if (Array.isArray(res[field])) {
+        for (const optionItem of res[field]) {
+          count += optionItem.count;
+        }
+      }
+      submitionCountMap[field] = count;
+    }
+    const transformedData = transformAndMergeArrayFields(res);
+    return fieldList.map((field) => {
+      return {
+        field,
+        data: {
+          aggregation: (transformedData?.[field] || []).map((optionItem) => {
+            return {
+              id: optionItem.data[field],
+              count: optionItem.count,
+            };
+          }),
+          submitionCount: submitionCountMap?.[field] || 0,
+        },
+      };
+    });
+  }
 }

server/src/modules/survey/utils/index.ts

@@ -66,3 +66,177 @@ export function getListHeadByDataList(dataList) {
   });
   return listHead;
 }
+
+export function transformAndMergeArrayFields(data) {
+  const transformedData = {};
+
+  for (const key in data) {
+    const valueMap: Record<string, number> = {};
+
+    for (const entry of data[key]) {
+      const nestedDataKey = Object.keys(entry.data)[0];
+      const nestedDataValue = entry.data[nestedDataKey];
+
+      if (Array.isArray(nestedDataValue)) {
+        for (const value of nestedDataValue) {
+          if (!valueMap[value]) {
+            valueMap[value] = 0;
+          }
+          valueMap[value] += entry.count;
+        }
+      } else {
+        if (!valueMap[nestedDataValue]) {
+          valueMap[nestedDataValue] = 0;
+        }
+        valueMap[nestedDataValue] += entry.count;
+      }
+    }
+
+    transformedData[key] = Object.keys(valueMap).map((value) => ({
+      count: valueMap[value],
+      data: {
+        [key]: value,
+      },
+    }));
+  }
+
+  return transformedData;
+}
+
+export function handleAggretionData({ dataMap, item }) {
+  const type = dataMap[item.field].type;
+  const aggregationMap = item.data.aggregation.reduce((pre, cur) => {
+    pre[cur.id] = cur;
+    return pre;
+  }, {});
+  if (['radio', 'checkbox', 'vote', 'binary-choice'].includes(type)) {
+    return {
+      ...item,
+      title: dataMap[item.field].title,
+      type: dataMap[item.field].type,
+      data: {
+        ...item.data,
+        aggregation: dataMap[item.field].options.map((optionItem) => {
+          return {
+            id: optionItem.hash,
+            text: optionItem.text,
+            count: aggregationMap[optionItem.hash]?.count || 0,
+          };
+        }),
+      },
+    };
+  } else if (['radio-star', 'radio-nps'].includes(type)) {
+    const summary: Record<string, any> = {};
+    const average = getAverage({ aggregation: item.data.aggregation });
+    const median = getMedian({ aggregation: item.data.aggregation });
+    const variance = getVariance({
+      aggregation: item.data.aggregation,
+      average,
+    });
+    summary['average'] = average;
+    summary['median'] = median;
+    summary['variance'] = variance;
+    if (type === 'radio-nps') {
+      summary['nps'] = getNps({ aggregation: item.data.aggregation });
+    }
+    const range = type === 'radio-nps' ? [0, 10] : [1, 5];
+    const arr = [];
+    for (let i = range[0]; i <= range[1]; i++) {
+      arr.push(i);
+    }
+    return {
+      ...item,
+      title: dataMap[item.field].title,
+      type: dataMap[item.field].type,
+      data: {
+        aggregation: arr.map((item) => {
+          const num = item.toString();
+          return {
+            text: num,
+            id: num,
+            count: aggregationMap?.[num]?.count || 0,
+          };
+        }),
+        submitionCount: item.data.submitionCount,
+        summary,
+      },
+    };
+  } else {
+    return {
+      ...item,
+      title: dataMap[item.field].title,
+      type: dataMap[item.field].type,
+    };
+  }
+}
+
+function getAverage({ aggregation }) {
+  const { sum, count } = aggregation.reduce(
+    (pre, cur) => {
+      const num = parseInt(cur.id);
+      pre.sum += num * cur.count;
+      pre.count += cur.count;
+      return pre;
+    },
+    { sum: 0, count: 0 },
+  );
+  if (count === 0) {
+    return 0;
+  }
+  return (sum / count).toFixed(2);
+}
+
+function getMedian({ aggregation }) {
+  const sortedArr = aggregation.sort((a, b) => {
+    return parseInt(a.id) - parseInt(b.id);
+  });
+  const resArr = [];
+  for (const item of sortedArr) {
+    const tmp = new Array(item.count).fill(parseInt(item.id));
+    resArr.push(...tmp);
+  }
+  if (resArr.length === 0) {
+    return 0;
+  }
+  if (resArr.length % 2 === 1) {
+    const midIndex = Math.floor(resArr.length / 2);
+    return resArr[midIndex].toFixed(2);
+  }
+  const rightIndex = resArr.length / 2;
+  const leftIndex = rightIndex - 1;
+  return ((resArr[leftIndex] + resArr[rightIndex]) / 2).toFixed(2);
+}
+
+function getVariance({ aggregation, average }) {
+  const { sum, count } = aggregation.reduce(
+    (pre, cur) => {
+      const sub = Number(cur.id) - average;
+      pre.sum += sub * sub;
+      pre.count += cur.count;
+      return pre;
+    },
+    { sum: 0, count: 0 },
+  );
+  if (count === 0 || count === 1) {
+    return '0.00';
+  }
+  return (sum / (count - 1)).toFixed(2);
+}
+
+function getNps({ aggregation }) {
+  // 净推荐值(NPS)=(推荐者数/总样本数)×100%-(贬损者数/总样本数)×100%
+  // 0～10分举例子：推荐者（9-10分）；被动者（7-8分）；贬损者（0-6分）
+  let recommand = 0,
+    derogatory = 0,
+    total = 0;
+  for (const item of aggregation) {
+    const num = parseInt(item.id);
+    if (num >= 9) {
+      recommand += item.count;
+    } else if (num <= 6) {
+      derogatory += item.count;
+    }
+    total += item.count;
+  }
+  return ((recommand / total - derogatory / total) * 100).toFixed(2) + '%';
+}

server/src/modules/surveyResponse/__test/surveyResponse.controller.spec.ts

@@ -25,7 +25,6 @@ import { WhitelistService } from 'src/modules/auth/services/whitelist.service';
 import { MemberType, WhitelistType } from 'src/interfaces/survey';
 import { ResponseSchema } from 'src/models/responseSchema.entity';
 import { EXCEPTION_CODE } from 'src/enums/exceptionCode';
-import { WhitelistVerify } from 'src/models/whitelistVerify.entity';
 
 const mockDecryptErrorBody = {
   surveyPath: 'EBzdmnSp',

web/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -29,6 +30,7 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSegmented: typeof import('element-plus/es')['ElSegmented']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSlider: typeof import('element-plus/es')['ElSlider']
@@ -40,6 +42,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     IEpBottom: typeof import('~icons/ep/bottom')['default']
     IEpCheck: typeof import('~icons/ep/check')['default']
     IEpCirclePlus: typeof import('~icons/ep/circle-plus')['default']

web/package.json

@@ -21,6 +21,7 @@
     "axios": "^1.4.0",
     "clipboard": "^2.0.11",
     "crypto-js": "^4.2.0",
+    "echarts": "^5.5.0",
     "element-plus": "^2.7.0",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.4",

web/src/management/api/analysis.js

@@ -8,3 +8,11 @@ export const getRecycleList = (data) => {
     }
   })
 }
+
+export const getStatisticList = (data) => {
+  return axios.get('/survey/dataStatistic/aggregationStatis', {
+    params: {
+      ...data
+    }
+  })
+}

web/src/management/config/analysisConfig.js

@@ -0,0 +1,77 @@
+import { menuItems } from './questionMenuConfig'
+
+export const noDataConfig = {
+  title: '暂无数据',
+  desc: '您的问卷当前还没有数据，快去回收问卷吧！',
+  img: '/imgs/icons/analysis-empty.webp'
+}
+
+export const separateItemListHead = [
+  {
+    title: '选项',
+    field: 'text'
+  },
+  {
+    title: '数量',
+    field: 'count'
+  },
+  {
+    title: '占比',
+    field: 'percent'
+  }
+]
+
+// 图表名称需要和./chartConfig.js中保持一致
+export const questionChartsConfig = {
+  [menuItems['checkbox']['type']]: ['bar'],
+  [menuItems['radio-nps']['type']]: ['gauge', 'pie', 'bar'],
+  default: ['pie', 'bar']
+}
+
+export const analysisTypeMap = {
+  dataTable: 'dataTable',
+  separateStatistics: 'separateStatistics'
+}
+
+export const analysisType = [
+  {
+    value: analysisTypeMap.dataTable,
+    label: '数据列表',
+    icon: 'icon-shujuliebiao'
+  },
+  {
+    value: analysisTypeMap.separateStatistics,
+    label: '分题统计',
+    icon: 'icon-fentitongji'
+  }
+]
+
+export const summaryType = {
+  between: 'between'
+}
+
+export const summaryItemConfig = {
+  'radio-nps': [
+    {
+      text: '推荐者',
+      field: 'id',
+      type: summaryType.between,
+      max: 10,
+      min: 9
+    },
+    {
+      text: '中立者',
+      field: 'id',
+      type: summaryType.between,
+      max: 8,
+      min: 7
+    },
+    {
+      text: '贬损者',
+      field: 'id',
+      type: summaryType.between,
+      max: 6,
+      min: 0
+    }
+  ]
+}

web/src/management/config/chartConfig/bar.js

@@ -0,0 +1,57 @@
+/**
+ * @Description: 柱状图配置
+ * @CreateDate: 2024-04-30
+ */
+export default (data) => {
+  const xAxisData = data.map((item) => item.name)
+  return {
+    color: ['#55A8FD'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter: '{a} <br/>{b}: {c}'
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: xAxisData,
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          interval: 0,
+          formatter(value) {
+            return value
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        splitLine: {
+          lineStyle: {
+            type: 'dashed'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        showAllSymbol: true,
+        name: '提交人数',
+        type: 'bar',
+        barMaxWidth: 50,
+        data
+      }
+    ]
+  }
+}

web/src/management/config/chartConfig/gauge.js

@@ -0,0 +1,146 @@
+/**
+ * @Description: gauge(仪表盘)
+ * @CreateDate: 2024-04-30
+ */
+export default (data) => {
+  return {
+    series: [
+      {
+        type: 'gauge',
+        startAngle: 180,
+        endAngle: 0,
+        min: -100,
+        max: 100,
+        radius: '130%',
+        center: ['50%', '80%'],
+        splitNumber: 4,
+        z: 2,
+        axisLabel: {
+          show: false,
+          distance: 0,
+          color: '#AAB1C0',
+          fontSize: 12,
+          fontFamily: 'DaQi-Font'
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            width: 40,
+            color: [[1, '#e3efff']]
+          }
+        }
+      },
+      {
+        type: 'gauge',
+        startAngle: 174,
+        endAngle: 5,
+        min: -100,
+        max: 100,
+        radius: '130%',
+        splitNumber: 4,
+        center: ['50%', '80%'],
+        z: 3,
+        axisLabel: {
+          distance: -5,
+          color: '#666',
+          rotate: 'tangential',
+          fontSize: 12,
+          fontFamily: 'DaQi-Font'
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          lineStyle: {
+            width: 40,
+            color: [[1, '#e3efff']]
+          }
+        }
+      },
+      {
+        type: 'gauge',
+        startAngle: 178,
+        endAngle: 0,
+        min: -100,
+        max: 100,
+        radius: '109%',
+        z: 4,
+        center: ['50%', '80%'],
+        splitNumber: 4,
+        itemStyle: {
+          color: '#58D9F9'
+        },
+        progress: {
+          show: true,
+          roundCap: true,
+          width: 15,
+          itemStyle: {
+            color: '#55A8FD',
+            shadowBlur: 10,
+            shadowColor: '#55A8FD'
+          }
+        },
+        pointer: {
+          icon: 'triangle',
+          length: '10%',
+          width: 8,
+          offsetCenter: [0, '-80%'],
+          itemStyle: {
+            color: '#55A8FD'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            width: 15,
+            color: [[1, '#d3e5fe']]
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        splitLine: {
+          show: false
+        },
+        axisLabel: {
+          show: false
+        },
+        title: {
+          offsetCenter: [0, '-15%'],
+          fontSize: 18,
+          color: '#666'
+        },
+        detail: {
+          fontSize: 46,
+          lineHeight: 40,
+          height: 40,
+          offsetCenter: [0, '-45%'],
+          valueAnimation: true,
+          color: '#55A8FD',
+          formatter: function (value) {
+            if (value) {
+              return value + '%'
+            } else if (value === 0) {
+              return value
+            } else {
+              return '--'
+            }
+          }
+        },
+        data: [
+          {
+            value: data,
+            name: 'NPS'
+          }
+        ]
+      }
+    ]
+  }
+}

web/src/management/config/chartConfig/index.js

@@ -0,0 +1,9 @@
+import pie from './pie'
+import bar from './bar'
+import gauge from './gauge'
+
+export const getOption = {
+  pie,
+  bar,
+  gauge
+}

web/src/management/config/chartConfig/pie.js

@@ -0,0 +1,57 @@
+const color = [
+  '#55A8FD',
+  '#36CBCB',
+  '#FAD337',
+  '#A6D6FF',
+  '#A177DC',
+  '#F46C73',
+  '#FFBA62',
+  '#ACE474',
+  '#BEECD6',
+  '#AFD2FF'
+]
+/*
+ * @Description: 饼图配置
+ * @CreateDate: 2024-04-30
+ */
+export default (data) => {
+  return {
+    color,
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    legend: {
+      orient: 'vertical',
+      right: 12,
+      top: 12,
+      tooltip: {
+        show: true
+      },
+      formatter(name) {
+        return name.length > 17 ? name.substr(0, 17) + '...' : name
+      }
+    },
+    series: [
+      {
+        name: '提交人数',
+        type: 'pie',
+        radius: ['50%', '80%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          formatter({ data }) {
+            const name = data?.name || ''
+            return name.length > 17 ? name.substr(0, 17) + '...' : name
+          }
+        },
+        data
+      }
+    ]
+  }
+}

web/src/management/config/questionMenuConfig.js

@@ -1,4 +1,4 @@
-const menuItems = {
+export const menuItems = {
   text: {
     type: 'text',
     snapshot: '/imgs/question-type-snapshot/iL84te6xxU1657702189333.webp',

web/src/management/hooks/useCharts.js

@@ -0,0 +1,25 @@
+import * as echarts from 'echarts'
+import { getOption } from '@/management/config/chartConfig'
+
+/**
+ * 绘制图表
+ * @param {Object} el
+ * @param {String} type
+ * @param {Array} data
+ */
+export default (el, type, data) => {
+  const chart = echarts.init(el)
+  const option = getOption[type](data)
+
+  chart.setOption(option, true)
+
+  const resize = () => {
+    chart.resize()
+  }
+
+  const changeType = (type, data) => {
+    chart.setOption(getOption[type](data), true)
+  }
+
+  return { chart, resize, changeType }
+}

web/src/management/hooks/useResizeObserver.js

@@ -0,0 +1,20 @@
+// 引入防抖函数
+import _debounce from 'lodash/debounce'
+/**
+ * @description: 监听元素尺寸变化
+ * @param {*} el 元素dom
+ * @param {*} cb resize变化时执行的方法
+ * @param {*} wait 防抖间隔
+ * @return {*}
+ */
+export default (el, cb, wait = 200) => {
+  const resizeObserver = new ResizeObserver(_debounce(cb, wait))
+
+  resizeObserver.observe(el)
+
+  const destroy = () => {
+    resizeObserver.disconnect(el)
+  }
+
+  return { destroy, resizeObserver }
+}

web/src/management/hooks/useStatisticsItemChart.js

@@ -0,0 +1,77 @@
+import { ref, watchEffect } from 'vue'
+import { cleanRichText } from '@/common/xss'
+import { questionChartsConfig } from '../config/analysisConfig'
+
+// 饼图数据处理
+const pie = (data) => {
+  const aggregation = data?.aggregation
+  return (
+    aggregation?.map?.((item) => {
+      const { id, count, text } = item
+      return {
+        id,
+        value: count,
+        name: cleanRichText(text)
+      }
+    }) || []
+  )
+}
+// 柱状图数据处理
+const bar = (data) => {
+  const aggregation = data?.aggregation
+  return (
+    aggregation?.map?.((item) => {
+      const { id, count, text } = item
+      return {
+        id,
+        value: count,
+        name: cleanRichText(text)
+      }
+    }) || []
+  )
+}
+// 仪表盘数据处理
+const gauge = (data) => {
+  return parseFloat(data?.summary?.nps) || 0
+}
+
+const dataFormateConfig = {
+  pie,
+  bar,
+  gauge
+}
+
+/**
+ * @description: 分题统计图表hook
+ * @param {*} chartType
+ * @param {*} data
+ * @return {*} chartRef 图表实例 chartTypeList 图表类型列表 chartType 图表类型 chartData 图表数据
+ */
+export default ({ questionType, data }) => {
+  const chartRef = ref(null)
+  const chartTypeList = ref([])
+  const chartType = ref('')
+  const chartData = ref({})
+
+  watchEffect(() => {
+    if (questionType.value) {
+      // 根据题型获取图表类型列表
+      chartTypeList.value = questionChartsConfig[questionType.value] || questionChartsConfig.default
+      if (!chartType.value) {
+        // 默认选中第一项
+        chartType.value = chartTypeList.value?.[0]
+      }
+      if (chartType.value) {
+        // 根据图表类型获取图表数据
+        chartData.value = dataFormateConfig[chartType.value](data)
+      }
+    }
+  })
+
+  return {
+    chartRef,
+    chartTypeList,
+    chartType,
+    chartData
+  }
+}

web/src/management/pages/analysis/AnalysisPage.vue

@@ -1,139 +1,28 @@
 <template>
   <div class="analysis-page">
     <leftMenu class="left"></leftMenu>
-    <div class="content-wrapper right">
+    <div class="right">
-      <template v-if="tableData.total">
+      <div class="analysis-tabs">
-        <h2 class="data-list">数据列表</h2>
+        <router-link
-        <div class="menus">
+          v-for="item in analysisType"
-          <el-switch
+          class="analysis-tabs__item"
-            :model-value="isShowOriginData"
+          :key="item.value"
-            active-text="是否展示原数据"
+          :to="{ name: item.value }"
-            @input="onIsShowOriginChange"
         >
-          </el-switch>
+          <i class="iconfont" :class="item.icon"></i>
+          <span>{{ item.label }}</span>
+        </router-link>
       </div>
-      </template>
+      <div class="content-wrapper">
-
+        <router-view />
-      <template v-if="tableData.total">
-        <DataTable :main-table-loading="mainTableLoading" :table-data="tableData" />
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          popper-class="analysis-pagination"
-          :total="tableData.total"
-          @current-change="handleCurrentChange"
-        >
-        </el-pagination>
-      </template>
-      <div v-else>
-        <EmptyIndex :data="noDataConfig" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
-import { ElMessage } from 'element-plus'
-import 'element-plus/theme-chalk/src/message.scss'
-
-import EmptyIndex from '@/management/components/EmptyIndex.vue'
 import LeftMenu from '@/management/components/LeftMenu.vue'
-import { getRecycleList } from '@/management/api/analysis'
+import { analysisType } from '@/management/config/analysisConfig'
-
-import DataTable from './components/DataTable.vue'
-
-export default {
-  name: 'AnalysisPage',
-  data() {
-    return {
-      mainTableLoading: false,
-      tableData: {
-        total: 0,
-        listHead: [],
-        listBody: []
-      },
-      noDataConfig: {
-        title: '暂无数据',
-        desc: '您的问卷当前还没有数据，快去回收问卷吧！',
-        img: '/imgs/icons/analysis-empty.webp'
-      },
-      currentPage: 1,
-      isShowOriginData: false,
-      tmpIsShowOriginData: false
-    }
-  },
-  computed: {},
-  created() {
-    this.init()
-  },
-  methods: {
-    async init() {
-      if (!this.$route.params.id) {
-        ElMessage.error('没有传入问卷参数~')
-        return
-      }
-      this.mainTableLoading = true
-      try {
-        const res = await getRecycleList({
-          page: this.currentPage,
-          surveyId: this.$route.params.id,
-          isDesensitive: !this.tmpIsShowOriginData // 发起请求的时候，isShowOriginData还没改变，暂存了一个字段
-        })
-
-        if (res.code === 200) {
-          const listHead = this.formatHead(res.data.listHead)
-          this.tableData = { ...res.data, listHead }
-          this.mainTableLoading = false
-        }
-      } catch (error) {
-        ElMessage.error('查询回收数据失败，请重试')
-      }
-    },
-    handleCurrentChange(current) {
-      if (this.mainTableLoading) {
-        return
-      }
-      this.currentPage = current
-      this.init()
-    },
-    formatHead(listHead = []) {
-      const head = []
-
-      listHead.forEach((headItem) => {
-        head.push({
-          field: headItem.field,
-          title: headItem.title
-        })
-
-        if (headItem.othersCode?.length) {
-          headItem.othersCode.forEach((item) => {
-            head.push({
-              field: item.code,
-              title: `${headItem.title}-${item.option}`
-            })
-          })
-        }
-      })
-
-      return head
-    },
-    async onIsShowOriginChange(data) {
-      if (this.mainTableLoading) {
-        return
-      }
-      // console.log(data)
-      this.tmpIsShowOriginData = data
-      await this.init()
-      this.isShowOriginData = data
-    }
-  },
-
-  components: {
-    DataTable,
-    EmptyIndex,
-    LeftMenu
-  }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -152,29 +41,60 @@ export default {
   .right {
     width: 100%;
     height: 100%;
-    padding-left: 120px;
+    min-width: 1160px;
-  }
-}
-
-.menus {
-  margin-bottom: 20px;
-}
-
-.content-wrapper {
-  padding: 30px 40px 50px 40px;
-  border-radius: 2px;
-  background-color: #f6f7f9;
-  box-sizing: border-box;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-
-  :deep(.el-pagination) {
-    margin-top: 20px;
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: #f6f7f9;
+
+    .analysis-tabs {
+      flex: none;
+      gap: 40px;
+      font-size: 14px;
+      font-weight: normal;
+      width: 100%;
+      height: 56px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      border-bottom: 1px solid #e7e9eb;
+
+      &__item {
+        cursor: pointer;
+        padding: 8px 0;
+        color: #92949d;
+
+        .iconfont {
+          margin-right: 8px;
+        }
       }
 
-  .data-list {
+      .router-link-active {
-    margin-bottom: 20px;
+        color: $font-color-title;
+        position: relative;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &::before {
+          content: '';
+          position: absolute;
+          width: calc(100% + 5px);
+          height: 3px;
+          background-color: $primary-color;
+          bottom: 0;
+          left: 0;
+        }
+      }
+    }
+  }
+
+  .content-wrapper {
+    flex: auto;
+    overflow: hidden;
+    padding: 24px 24px 24px 104px;
   }
 }
 </style>

web/src/management/pages/analysis/components/DataTable.vue

@@ -17,22 +17,23 @@
         minWidth="200"
       >
         <template #header="scope">
-          <div class="table-row-cell">
+          <div
-            <span
+            class="table-row-cell"
             @mouseover="onPopoverRefOver(scope, 'head')"
             :ref="(el) => (popoverRefMap[scope.column.id] = el)"
           >
+            <span>
               {{ scope.column.label.replace(/&nbsp;/g, '') }}
             </span>
           </div>
         </template>
         <template #default="scope">
-          <div>
+          <div
-            <span
             class="table-row-cell"
             @mouseover="onPopoverRefOver(scope, 'content')"
             :ref="(el) => (popoverRefMap[scope.$index + scope.column.property] = el)"
           >
+            <span>
               {{ getContent(scope.row[scope.column.property]) }}
             </span>
           </div>
@@ -44,6 +45,7 @@
       popper-style="text-align: center;"
       :virtual-ref="popoverVirtualRef"
       placement="top"
+      width="400"
       trigger="hover"
       virtual-triggering
       :content="popoverContent"
@@ -62,6 +64,10 @@ const props = defineProps({
   },
   mainTableLoading: {
     type: Boolean
+  },
+  tableMinHeight: {
+    type: String,
+    default: '620px'
   }
 })
 const popoverRefMap = ref({})
@@ -94,15 +100,18 @@ const onPopoverRefOver = (scope, type) => {
   position: relative;
   width: 100%;
   padding-bottom: 20px;
-  min-height: 620px;
+  min-height: v-bind('tableMinHeight');
   background: #fff;
   padding: 10px 20px;
+
   .table-border {
     box-sizing: border-box;
     text-align: center;
   }
+
   :deep(.el-table__header) {
     width: 100%;
+
     .thead-cell .el-table__cell {
       .cell {
         height: 24px;
@@ -111,10 +120,16 @@ const onPopoverRefOver = (scope, type) => {
       }
     }
   }
+
   .table-row-cell {
-    white-space: nowrap; /* 禁止自动换行 */
+    max-width: 100%;
-    overflow: hidden; /* 超出部分隐藏 */
+    display: inline-block;
-    text-overflow: ellipsis; /* 显示省略号 */
+    white-space: nowrap;
+    /* 禁止自动换行 */
+    overflow: hidden;
+    /* 超出部分隐藏 */
+    text-overflow: ellipsis;
+    /* 显示省略号 */
   }
 }
 </style>

web/src/management/pages/analysis/components/StatisticsItem.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="separate-item">
+    <div class="separate-item-title">
+      <el-popover
+        placement="top"
+        width="400"
+        trigger="hover"
+        :disabled="!titlePoppverShow"
+        :content="cleanRichText(StatisticsData.title)"
+      >
+        <template #reference>
+          <p ref="titleRef" class="text" v-html="cleanRichText(StatisticsData.title)"></p>
+        </template>
+      </el-popover>
+      <p v-if="questionTypeDesc" class="type">{{ questionTypeDesc }}</p>
+    </div>
+    <div class="separate-item-content">
+      <div class="chart-wrapper">
+        <div ref="chartRef" class="chart"></div>
+        <div v-if="chartTypeList.length > 1" class="chart-type-list">
+          <el-segmented v-model="chartType" :options="chartTypeList" size="small">
+            <template #default="{ item }">
+              <i class="iconfont" :class="`icon-${item}`"></i>
+            </template>
+          </el-segmented>
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <data-table :table-data :table-min-height />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs, defineProps, computed, watch, onMounted, onUnmounted, ref } from 'vue'
+import _cloneDeep from 'lodash/cloneDeep'
+import {
+  separateItemListHead,
+  summaryType,
+  summaryItemConfig
+} from '@/management/config/analysisConfig'
+import useCharts from '@/management/hooks/useCharts'
+import useStatisticsItemChart from '@/management/hooks/useStatisticsItemChart'
+import { cleanRichText } from '@/common/xss'
+import { menuItems } from '@/management/config/questionMenuConfig'
+import DataTable from './DataTable.vue'
+import useResizeObserver from '@/management/hooks/useResizeObserver'
+
+const props = defineProps({
+  StatisticsData: {
+    type: Object,
+    required: true
+  }
+})
+
+const questionType = computed(() => {
+  return props?.StatisticsData?.type
+})
+
+const questionTypeDesc = computed(() => {
+  return menuItems?.[questionType.value]?.title || ''
+})
+
+// 表格数据
+const separateItemListBody = computed(() => {
+  try {
+    const aggregation = _cloneDeep(props?.StatisticsData?.data?.aggregation)
+    const submitionCount = props?.StatisticsData?.data?.submitionCount
+    const summaryList = summaryItemConfig[questionType.value]
+    // 增加聚合信息
+    if (summaryList?.length) {
+      summaryList.forEach((item, index) => {
+        const { type, text, field, max, min } = item
+        if (text && field && type === summaryType.between) {
+          aggregation.push({
+            id: `summary_${index}`,
+            text,
+            count: aggregation.reduce((n, item) => {
+              if (item[field] >= min && item[field] <= max) {
+                return n + item.count
+              }
+              return n
+            }, 0)
+          })
+        }
+      })
+    }
+
+    return (
+      aggregation?.map((item) => {
+        const { id, count, text } = item
+        const percent = submitionCount ? `${((count / submitionCount) * 100).toFixed(1)}%` : '0%'
+        return {
+          id,
+          count,
+          text,
+          percent
+        }
+      }) || []
+    )
+  } catch (e) {
+    console.log(e)
+    return []
+  }
+})
+
+const separateItemState = reactive({
+  tableData: {
+    total: 0,
+    listHead: separateItemListHead,
+    listBody: separateItemListBody
+  },
+  tableMinHeight: '0px'
+})
+
+const { tableData, tableMinHeight } = toRefs(separateItemState)
+
+const titlePoppverShow = ref(false)
+const titleRef = ref(null)
+
+const titleResize = () => {
+  if (titleRef.value?.scrollWidth > titleRef.value?.offsetWidth) {
+    titlePoppverShow.value = true
+  } else {
+    titlePoppverShow.value = false
+  }
+}
+
+const { chartRef, chartTypeList, chartType, chartData } = useStatisticsItemChart({
+  questionType,
+  data: props?.StatisticsData?.data
+})
+
+onMounted(() => {
+  // 需要获取图表dom，所以得在mounted中执行
+  const { changeType, resize: chartResize } = useCharts(
+    chartRef.value,
+    chartType.value,
+    chartData.value
+  )
+
+  const { destroy } = useResizeObserver(chartRef.value, () => {
+    chartResize()
+    titleResize()
+  })
+
+  // 图型切换
+  watch(chartType, () => {
+    changeType(chartType.value, chartData.value)
+  })
+
+  // 销毁resizeObserver
+  onUnmounted(destroy)
+})
+</script>
+
+<style lang="scss" scoped>
+.separate-item {
+  padding: 32px 12px;
+  border-bottom: 1px solid #efefef;
+
+  &:nth-last-of-type(1) {
+    border-bottom: none;
+  }
+
+  &-title {
+    font-size: 16px;
+    color: #333;
+    font-weight: 600;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+
+    .text {
+      max-width: 50%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .type {
+      font-size: 12px;
+      margin-left: 8px;
+      color: white;
+      background-color: var(--primary-color);
+      border-radius: 7px 3px;
+      padding: 2px 6px;
+    }
+  }
+
+  &-content {
+    display: flex;
+    justify-content: space-between;
+    gap: 50px;
+
+    .chart-wrapper {
+      position: relative;
+      flex: auto;
+      width: 50%;
+      min-width: 300px;
+      height: 320px;
+      max-width: 1000px;
+      box-shadow: 0 2px 8px -2px rgba(136, 136, 157, 0.2);
+      border-radius: 2px;
+      padding: 24px;
+
+      .chart-type-list {
+        position: absolute;
+        left: 0;
+        top: 0;
+
+        .iconfont {
+          font-size: 12px;
+        }
+      }
+
+      .chart {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .table-wrapper {
+      flex: auto;
+      width: 50%;
+      min-width: 300px;
+      max-width: 1000px;
+    }
+  }
+
+  @media screen and (min-width: 1660px) {
+    &-content {
+      gap: 80px;
+
+      .chart-wrapper {
+        height: 400px;
+      }
+    }
+  }
+}
+</style>

web/src/management/pages/analysis/pages/DataTablePage.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="data-table-page">
+    <template v-if="tableData.total">
+      <div class="menus">
+        <el-switch
+          :model-value="isShowOriginData"
+          active-text="是否展示原数据"
+          @input="onIsShowOriginChange"
+        >
+        </el-switch>
+      </div>
+    </template>
+
+    <template v-if="tableData.total">
+      <DataTable :main-table-loading :table-data />
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        popper-class="analysis-pagination"
+        :total="tableData.total"
+        @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </template>
+    <div v-else>
+      <EmptyIndex :data="noDataConfig" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, toRefs } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+import EmptyIndex from '@/management/components/EmptyIndex.vue'
+import { getRecycleList } from '@/management/api/analysis'
+import { noDataConfig } from '@/management/config/analysisConfig'
+import DataTable from '../components/DataTable.vue'
+
+const dataTableState = reactive({
+  mainTableLoading: false,
+  tableData: {
+    total: 0,
+    listHead: [],
+    listBody: []
+  },
+  currentPage: 1,
+  isShowOriginData: false,
+  tmpIsShowOriginData: false
+})
+
+const { mainTableLoading, tableData, isShowOriginData } = toRefs(dataTableState)
+
+const route = useRoute()
+
+const formatHead = (listHead) => {
+  const head = []
+
+  listHead.forEach((headItem) => {
+    head.push({
+      field: headItem.field,
+      title: headItem.title
+    })
+
+    if (headItem.othersCode?.length) {
+      headItem.othersCode.forEach((item) => {
+        head.push({
+          field: item.code,
+          title: `${headItem.title}-${item.option}`
+        })
+      })
+    }
+  })
+
+  return head
+}
+
+const onIsShowOriginChange = async (data) => {
+  if (dataTableState.mainTableLoading) {
+    return
+  }
+  dataTableState.tmpIsShowOriginData = data
+  await init()
+  dataTableState.isShowOriginData = data
+}
+
+const handleCurrentChange = async (page) => {
+  if (dataTableState.mainTableLoading) {
+    return
+  }
+  dataTableState.currentPage = page
+  await init()
+}
+
+const init = async () => {
+  if (!route.params.id) {
+    ElMessage.error('没有传入问卷参数~')
+    return
+  }
+  dataTableState.mainTableLoading = true
+  try {
+    const res = await getRecycleList({
+      page: dataTableState.currentPage,
+      surveyId: route.params.id,
+      isDesensitive: !dataTableState.tmpIsShowOriginData // 发起请求的时候，isShowOriginData还没改变，暂存了一个字段
+    })
+
+    if (res.code === 200) {
+      const listHead = formatHead(res.data.listHead)
+      dataTableState.tableData = { ...res.data, listHead }
+      dataTableState.mainTableLoading = false
+    }
+  } catch (error) {
+    ElMessage.error('查询回收数据失败，请重试')
+  }
+}
+
+init()
+</script>
+
+<style lang="scss" scoped>
+.data-table-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.menus {
+  margin-bottom: 20px;
+}
+
+:deep(.el-pagination) {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.data-list {
+  margin-bottom: 20px;
+}
+</style>

web/src/management/pages/analysis/pages/SeparateStatisticsPage.vue

@@ -0,0 +1,49 @@
+<template>
+  <div v-if="data.length" class="separate-statis-page">
+    <StatisticsItem v-for="StatisticsData in data" :key="StatisticsData.field" :StatisticsData />
+  </div>
+  <div v-else>
+    <EmptyIndex :data="noDataConfig" />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+import { noDataConfig } from '@/management/config/analysisConfig'
+import EmptyIndex from '@/management/components/EmptyIndex.vue'
+import { getStatisticList } from '@/management/api/analysis'
+import StatisticsItem from '../components/StatisticsItem.vue'
+
+const route = useRoute()
+
+const data = ref([])
+
+const initData = async () => {
+  try {
+    const res = await getStatisticList({
+      surveyId: route.params.id
+    })
+    if (res.code === 200) {
+      data.value = res?.data || []
+    } else {
+      ElMessage.error(res?.errmsg)
+    }
+  } catch (error) {
+    ElMessage.error(error?.message || '查询回收数据失败，请重试')
+  }
+}
+
+onMounted(initData)
+</script>
+
+<style lang="scss" scoped>
+.separate-statis-page {
+  height: 100%;
+  background: #fff;
+  padding: 0 24px;
+  overflow-y: auto;
+}
+</style>

web/src/management/pages/edit/modules/settingModule/SettingPanel.vue

@@ -8,26 +8,12 @@
               {{ form.title }}
             </span>
           </div>
-          <el-form
+          <el-form class="question-config-form" label-position="left" label-width="200px" @submit.prevent>
-            class="question-config-form"
-            label-position="left"
-            label-width="200px"
-            @submit.prevent
-          >
             <template v-for="(item, index) in form.formList">
-              <FormItem
+              <FormItem v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])" :key="index"
-                v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])"
+                :form-config="item" :style="item.style">
-                :key="index"
+                <Component v-if="Boolean(registerTypes[item.type])" :is="components[item.type]"
-                :form-config="item"
+                  :module-config="form.dataConfig" :form-config="item" @form-change="handleFormChange" />
-                :style="item.style"
-              >
-                <Component
-                  v-if="Boolean(registerTypes[item.type])"
-                  :is="components[item.type]"
-                  :module-config="form.dataConfig"
-                  :form-config="item"
-                  @form-change="handleFormChange"
-                />
               </FormItem>
             </template>
           </el-form>
@@ -39,7 +25,7 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, shallowRef } from 'vue'
 import { useStore } from 'vuex'
-import { cloneDeep as _cloneDeep, isArray as _isArray, get as _get } from 'lodash-es'
+import { cloneDeep as _cloneDeep, isArray as _isArray, get as _get,isFunction as _isFunction} from 'lodash-es'
 
 import baseConfig from './config/baseConfig'
 import baseFormConfig from './config/baseFormConfig'
@@ -49,6 +35,9 @@ import setterLoader from '@/materials/setters/setterLoader'
 const formConfigList = ref<Array<any>>([])
 const components = shallowRef<any>({})
 const registerTypes = ref<any>({})
+const store = useStore()
+const schemaBaseConf = computed(() => store.state.edit?.schema?.baseConf || {})
+
 const setterList = computed(() => {
   const list = _cloneDeep(formConfigList.value)
 
@@ -71,6 +60,14 @@ const setterList = computed(() => {
       }
       formItem.value = formValue
     }
+    // 动态显隐设置器
+    form.formList = form.formList.filter((item:any) => {
+      if (_isFunction(item.relyFunc)) {
+          return item.relyFunc(schemaBaseConf.value)
+        }
+        return true
+    })
+
 
     form.dataConfig = dataConfig
 
@@ -78,7 +75,6 @@ const setterList = computed(() => {
   })
 })
 
-const store = useStore()
 const handleFormChange = (data: any) => {
   store.dispatch('edit/changeSchema', {
     key: data.key,

web/src/management/pages/edit/modules/settingModule/config/baseConfig.js

@@ -8,5 +8,11 @@ export default [
     title: '提交限制',
     key: 'limitConfig',
     formList: ['limit_tLimit']
+  }, {
+    title: '作答限制',
+    key: 'respondConfig',
+    formList: ['interview_pwd','answer_type','white_placeholder','white_list','team_list']
   }
 ]
+
+

web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js

@@ -21,5 +21,44 @@ export default {
     tip: '问卷仅在指定时间段内可填写',
     type: 'QuestionTimeHour',
     placement: 'top'
+  },
+  interview_pwd: {
+    keys: ['baseConf.passwordSwitch', 'baseConf.password'],
+    label: '访问密码',
+    type: 'SwitchInput',
+    placeholder: '请输入访问密码'
+  },
+  answer_type: {
+    key: 'baseConf.whitelistType',
+    label: '答题名单',
+    type: 'AnswerRadio',
+  },
+  white_placeholder:{
+    key: 'baseConf.whitelistTip',
+    label: '名单登录提示语',
+    placeholder:'请输入名单提示语',
+    type: 'InputWordLimit',
+    maxlength: 40,
+    relyFunc: (data) => {
+      return  ['CUSTOM','MEMBER'].includes(data.whitelistType)
     }
+  },
+  white_list:{
+    keys: ['baseConf.whitelist','baseConf.memberType'],
+    label: '白名单列表',
+    type: 'whiteList',
+    relyFunc: (data) => {
+      return data.whitelistType == 'CUSTOM'
+    }
+  },
+  team_list:{
+    key: 'baseConf.whitelist',
+    label: '团队空间成员选择',
+    type: 'teamMemberList',
+    relyFunc: (data) => {
+      return data.whitelistType == 'MEMBER'
+    }
+  }
+
 }
+

web/src/management/pages/list/components/BaseList.vue

@@ -139,7 +139,7 @@ import {
   noSearchDataConfig,
   selectOptionsDict,
   buttonOptionsDict
-} from '../config'
+} from '@/management/config/listConfig'
 
 const store = useStore()
 const router = useRouter()

web/src/management/pages/list/components/SpaceList.vue

@@ -75,7 +75,7 @@ import { useStore } from 'vuex'
 import { ElMessageBox } from 'element-plus'
 import 'element-plus/theme-chalk/src/message-box.scss'
 import { get, map } from 'lodash-es'
-import { spaceListConfig } from '../config'
+import { spaceListConfig } from '@/management/config/listConfig'
 import SpaceModify from './SpaceModify.vue'
 import { UserRole } from '@/management/utils/types/workSpace'
 

web/src/management/pages/list/components/StateModule.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { statusMaps } from '../config'
+import { statusMaps } from '@/management/config/listConfig'
 export default {
   name: 'StateModule',
   props: {

web/src/management/pages/list/components/TagModule.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { type as surveyType } from '../config'
+import { type as surveyType } from '@/management/config/listConfig'
 export default {
   name: 'TagModule',
   props: {

web/src/management/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, type RouteLocationNormalized, type Navi
 import type { RouteRecordRaw } from 'vue-router'
 import { useStore, type Store } from 'vuex'
 import { SurveyPermissions } from '@/management/utils/types/workSpace'
+import { analysisTypeMap } from '@/management/config/analysisConfig'
 import { ElMessage } from 'element-plus'
 import 'element-plus/theme-chalk/src/message.scss'
 
@@ -92,11 +93,34 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/survey/:id/analysis',
     name: 'analysisPage',
+    redirect: {
+      name: analysisTypeMap.dataTable
+    },
     meta: {
       needLogin: true,
       permissions: [SurveyPermissions.DataManage]
     },
-    component: () => import('../pages/analysis/AnalysisPage.vue')
+    component: () => import('../pages/analysis/AnalysisPage.vue'),
+    children: [
+      {
+        path: analysisTypeMap.dataTable,
+        name: analysisTypeMap.dataTable,
+        meta: {
+          needLogin: true,
+          premissions: [SurveyPermissions.DataManage]
+        },
+        component: () => import('../pages/analysis/pages/DataTablePage.vue')
+      },
+      {
+        path: analysisTypeMap.separateStatistics,
+        name: analysisTypeMap.separateStatistics,
+        meta: {
+          needLogin: true,
+          premissions: [SurveyPermissions.DataManage]
+        },
+        component: () => import('../pages/analysis/pages/SeparateStatisticsPage.vue')
+      }
+    ]
   },
   {
     path: '/survey/:id/publish',

web/src/management/store/edit/state.js

@@ -42,7 +42,13 @@ export default {
       tLimit: 0,
       answerBegTime: '',
       answerEndTime: '',
-      answerLimitTime: 0
+      answerLimitTime: 0,
+      passwordSwitch: false,
+      password:'',
+      whitelistType: 'ALL',
+      whitelistTip:'',
+      whitelist: [],
+      memberType:'MOBILE',
     },
     submitConf: {
       submitTitle: '',

web/src/management/styles/icon.scss

@@ -1,9 +1,10 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 4263849 */
+  font-family: 'iconfont';
+  /* Project id 4263849 */
   src:
-    url('//at.alicdn.com/t/c/font_4263849_xfsn9z31epc.woff2?t=1716556097756') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.woff2?t=1717580126029') format('woff2'),
-    url('//at.alicdn.com/t/c/font_4263849_xfsn9z31epc.woff?t=1716556097756') format('woff'),
+    url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.woff?t=1717580126029') format('woff'),
-    url('//at.alicdn.com/t/c/font_4263849_xfsn9z31epc.ttf?t=1716556097756') format('truetype');
+    url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.ttf?t=1717580126029') format('truetype');
 }
 
 .iconfont {
@@ -125,15 +126,39 @@
 .icon-erweima:before {
   content: '\e6c0';
 }
+
 .icon-yangshishezhi:before {
   content: '\e6e6';
 }
+
 .icon-NPSpingfen::before {
   content: '\e6e7';
 }
+
 .icon-wodekongjian::before {
   content: '\e6ee';
 }
+
 .icon-tuanduikongjian::before {
   content: '\e6ec';
 }
+
+.icon-shujuliebiao:before {
+  content: '\e6f2';
+}
+
+.icon-fentitongji:before {
+  content: '\e6f3';
+}
+
+.icon-bar:before {
+  content: '\e600';
+}
+
+.icon-pie:before {
+  content: '\e606';
+}
+
+.icon-gauge:before {
+  content: '\e6db';
+}

web/src/materials/setters/widgets/AnswerRadio.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="answer-radio-wrap">
+    <el-radio-group v-model="whitelistType"   @change="handleRadioGroupChange">
+      <el-radio value="ALL">所有人</el-radio>
+      <el-radio value="MEMBER">空间成员</el-radio>
+      <el-radio value="CUSTOM">白名单</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+<script setup>
+
+import { ref } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+const props = defineProps({
+  formConfig: Object,
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const whitelistType = ref(props.formConfig?.value || 'ALL')
+
+const handleRadioGroupChange = (value) => {
+  const key = props.formConfig.key
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+  emit(FORM_CHANGE_EVENT_KEY, { key:'baseConf.whitelist', value: [] })
+  emit(FORM_CHANGE_EVENT_KEY, { key: 'baseConf.memberType', value: 'MOBILE' })
+  if (whitelistType.value == 'ALL') { 
+    emit(FORM_CHANGE_EVENT_KEY, { key:'baseConf.whitelistTip', value:'' })
+  }
+}
+
+
+</script>
+<style lang="scss" scoped>
+.switch-input-wrap{
+  width: 100%;
+  .mt16{
+    margin-top: 16px;
+  }
+}
+</style>

web/src/materials/setters/widgets/InputWordLimit.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-input
+      :maxlength="maxlength"
+      v-model="modelValue"
+      :placeholder="placeholder"
+      show-word-limit
+      type="text"
+      @change="handleInputChange"
+  />
+</template>
+<script setup>
+import {  computed,ref } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+const props = defineProps({
+  formConfig: Object,
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const modelValue = ref(props.formConfig.value || '')
+
+const maxlength = computed(() => props.formConfig.maxlength || 10)
+
+const placeholder = computed(() => props.formConfig.placeholder || '')
+
+const handleInputChange = (value) => {
+  const key = props.formConfig.key
+
+  modelValue.value = value
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+}
+
+</script>

web/src/materials/setters/widgets/SwitchInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="switch-input-wrap">
+    <el-switch v-model="passwordSwitch" @change="changeData(props.formConfig.keys[0],passwordSwitch)"  />
+    <el-input
+      v-if="passwordSwitch"
+      class="mt16"
+      maxlength="6"
+      placeholder="请输入6位字符串类型访问密码"
+      show-word-limit
+      v-model="password"
+      type="text"
+      @blur="changeData(props.formConfig.keys[1],password)"
+    />
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+const props = defineProps({
+  formConfig: Object,
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+const passwordSwitch = ref(props.formConfig?.value[0] || false);
+const password = ref(props.formConfig?.value[1] || '');
+
+const changeData = (key,value) => {
+  emit(FORM_CHANGE_EVENT_KEY, {
+    key,
+    value
+  })
+
+}
+
+
+</script>
+<style lang="scss" scoped>
+.switch-input-wrap{
+  width: 100%;
+  .mt16{
+    margin-top: 16px;
+  }
+}
+</style>

web/src/materials/setters/widgets/teamMemberList.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="team-member-wrap">
+    <div class="team-tree-wrap">
+      <el-tree ref="treeRef" :default-expanded-keys="defaultCheckedKeys" :default-checked-keys="defaultCheckedKeys"
+        :data="treeData" empty-text="暂无数据" @check="handleChange" style="height:201px" highlight-current show-checkbox
+        node-key="id" :props="defaultProps" />
+    </div>
+    <div class="member-count">已选择 <span>{{ selectCount }}</span> 人</div>
+  </div>
+</template>
+<script setup>
+import { ref, computed, defineProps, defineEmits, onMounted, nextTick } from 'vue'
+import { useStore } from 'vuex'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+const props = defineProps({
+  formConfig: Object,
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const store = useStore();
+const treeRef = ref(null)
+const treeData = ref([])
+const defaultCheckedKeys = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'label',
+}
+
+const handleChange = () => {
+  const key = props.formConfig.key;
+  const userKeys = treeRef.value?.getCheckedKeys(false);
+  emit(FORM_CHANGE_EVENT_KEY, { key: key, value: userKeys });
+}
+
+const spaceDetail = computed(() => {
+  return store.state.list.spaceDetail
+})
+
+
+
+const selectCount = computed(() => {
+  return treeRef.value?.getCheckedKeys(true).length || 0
+})
+
+const getSpaceMenus = async () => {
+  await store.dispatch('list/getSpaceList')
+  store.state?.list?.spaceMenus.map((v) => {
+    if (v.id == "group") {
+      const promiseList = []
+      v.children?.map((item) => {
+        promiseList.push(store.dispatch('list/getSpaceDetail', item.id).then(() => {
+          treeData.value.push({
+            id: item.id,
+            label: item.name,
+            children: getChildren()
+          })
+        }))
+      })
+      Promise.all(promiseList).then(() => {
+        nextTick(() => {
+          defaultCheckedKeys.value = props.formConfig.value;
+        })
+      })
+    }
+  })
+}
+
+const getChildren = () => {
+  const members = [];
+  if (spaceDetail.value?.members?.length > 0) {
+    spaceDetail.value.members.map(v => {
+      members.push({
+        id: v.userId,
+        label: v.username,
+      })
+    })
+  }
+  return members
+}
+
+
+onMounted(() => {
+  getSpaceMenus();
+})
+
+</script>
+<style lang="scss" scoped>
+.team-member-wrap {
+  width: 508px;
+
+  .team-tree-wrap {
+    background: #FFFFFF;
+    border: 1px solid rgba(227, 228, 232, 1);
+    border-radius: 2px;
+    min-height: 204px;
+    max-height: 204px;
+    overflow-x: auto;
+  }
+
+  .member-count {
+    text-align: right;
+
+    span {
+      color: $primary-color;
+    }
+  }
+}
+</style>

web/src/materials/setters/widgets/whiteList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="white-list-wrap">
+    <el-button class="create-btn" type="primary" @click="whiteVisible=true">
+      添加
+    </el-button>
+    <el-button v-if="whitelist.length>0" class="create-btn" color="#4A4C5B" @click="delAllList">
+      全部删除
+    </el-button>
+    <el-table class="table-wrap" empty-text="暂无数据" :data="whitelist" height="240" style="width: 426px">
+      <el-table-column  label="名单" width="350" >
+        <template #default="scope">
+            <div>{{ whitelist[scope.$index] }}</div>
+          </template>
+        </el-table-column>
+      <el-table-column  label="操作" width="74" >
+        <template #default="scope">
+            <div @click="delRowItem(scope.$index)" class="flex cursor"><i-ep-delete :size="16" /></div>
+          </template>
+        </el-table-column>
+    </el-table>
+    <el-dialog v-model="whiteVisible" title="添加白名单" width="600" @closed="handleClose">
+      <div>
+        <el-form-item  label-position="top" label="类型选择" label-width="auto">
+          <el-radio-group v-model="memberType" >
+            <el-radio value="MOBILE">手机号</el-radio>
+            <el-radio value="EMAIL">邮箱</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label-position="top" class="flex-column" label="名单录入" label-width="auto">
+          <el-input v-model="whiteTextarea" placeholder="多个用逗号(半角)“,”隔开"   rows="7" resize="none" type="textarea" />
+        </el-form-item>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="whiteVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleChange">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+
+import { ref,nextTick } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+const props = defineProps({
+  formConfig: Object,
+})
+const emit = defineEmits([FORM_CHANGE_EVENT_KEY])
+
+const whitelist = ref(props.formConfig.value[0] || [])
+const memberType = ref(props.formConfig.value[1] || 'MOBILE')
+const whiteVisible = ref(false)
+const whiteTextarea = ref(whitelist.value.join(','))
+
+
+
+
+const handleChange = () => {
+  const keys = props.formConfig.keys;
+  const list = whiteTextarea.value ? whiteTextarea.value.split(',') : []
+  emit(FORM_CHANGE_EVENT_KEY, { key:keys[0], value: list });
+  emit(FORM_CHANGE_EVENT_KEY, { key: keys[1], value: memberType.value })
+  whiteVisible.value = false
+}
+
+const handleClose = () => {
+  nextTick(() => {
+    whitelist.value = props.formConfig.value[0] || []
+    whiteTextarea.value = whitelist.value.join(',')
+    memberType.value = props.formConfig.value[1] || 'MOBILE'
+  })
+}
+
+const delRowItem = (index) => {
+  whitelist.value.splice(index, 1); 
+  whiteTextarea.value = whitelist.value.join(',')
+  const keys = props.formConfig.keys;
+  emit(FORM_CHANGE_EVENT_KEY, { key:keys[0], value:  whitelist.value });
+}
+
+const delAllList = () => {
+  whitelist.value = []
+  whiteTextarea.value = ''
+  handleChange();
+}
+
+
+</script>
+<style lang="scss" scoped>
+.white-list-wrap {
+  .flex-column{
+    flex-direction: column;
+  }
+  :deep(th){
+    padding:4px 0;
+    background: #F6F7F9;
+  }
+  :deep(td){
+    padding:6px 0;
+  }
+  .table-wrap{
+    margin-top: 16px;
+    border: 1px solid #ebeef5;
+    border-radius: 2px;
+    overflow-x: hidden;
+  }
+  .cursor{
+    cursor: pointer;
+  }
+  .flex{
+    display: flex;
+  }
+}
+
+</style>

web/src/render/api/survey.js

@@ -32,3 +32,10 @@ export const queryVote = ({ surveyPath, fieldList }) => {
 export const getEncryptInfo = () => {
   return axios.get('/clientEncrypt/getEncryptInfo')
 }
+
+export const validate = ({ surveyPath,password, value }) => {
+  return axios.post(`/responseSchema/${surveyPath}/validate`, {
+    password,
+    value
+  })
+}

web/src/render/components/QuestionWrapper.vue

@@ -58,6 +58,7 @@ const questionConfig = computed(() => {
   }
   if (
     RATES.includes(type) &&
+    rest.rangeConfig &&
     Object.keys(rest.rangeConfig).filter((index) => rest.rangeConfig[index].isShowInput).length > 0
   ) {
     let { rangeConfig, othersValue } = useShowInput(field)

web/src/render/components/VerifyWhiteDialog.vue

@@ -0,0 +1,137 @@
+<template>
+   <el-dialog
+    v-model="whiteVisible"
+    title="验证"
+    :show-close="false"
+    class="verify-white-wrap"
+    width="315"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+    align-center
+   
+  >
+    <template #header>
+      <div class="verify-white-head">
+        <div class="verify-white-title">验证</div>
+        <div v-if="whitelistTip" class="verify-white-tips">{{ whitelistTip }}</div>
+      </div>
+    </template>
+    <div class="verify-white-body">
+      <el-input v-if="isPwd" v-model="state.password" class="wd255"  placeholder="请输入6位字符串类型访问密码"  />
+      <el-input v-if="isValue" v-model="state.value" class="wd255 mt16"  :placeholder="placeholder"  />
+      <div class="submit-btn" @click="handleSubmit">验证并开始答题</div>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+import { ref,reactive,computed,onMounted } from 'vue'
+import { validate } from '../api/survey'
+import { useStore } from 'vuex'
+import { ElMessage } from 'element-plus'
+import 'element-plus/theme-chalk/src/message.scss'
+
+const whiteVisible = ref(false)
+
+
+const store = useStore()
+const state = reactive({
+  password: '',
+  value: '',
+  is_submit:false
+})
+
+const baseConf = computed(() => store.state.baseConf || {})
+const isPwd = computed(() => baseConf.value.passwordSwitch)
+const whitelistType = computed(() => baseConf.value.whitelistType)
+const memberType = computed(() => baseConf.value.memberType)
+const whitelistTip = computed(() => baseConf.value.whitelistTip)
+const surveyPath = computed(() => store.state?.surveyPath || '')
+
+const isValue = computed(() => {
+  if(!whitelistType.value) return false
+ return whitelistType.value!='ALL'
+})
+
+const placeholder = computed(() => {
+  if (whitelistType.value == 'MEMBER') {
+    return '请输入用户名'
+  }
+  if(memberType.value == 'MOBILE'){
+    return '请输入手机号'
+  }
+  if(memberType.value == 'EMAIL'){
+    return '请输入邮箱'
+  }
+  return ''
+})
+
+const handleSubmit = async() => {
+  if (state.is_submit) return;
+  const params = {
+    surveyPath:surveyPath.value
+  }
+  if (isValue.value) {
+    params.value = state.value
+  }
+  if(isPwd.value){
+    params.password = state.password
+  }
+
+  const res = await validate(params)
+  if (res.code != 200) { 
+    ElMessage.error(res.errmsg || '验证失败')
+    return
+  }
+  whiteVisible.value = false
+}
+
+onMounted(() => {
+  if(isValue.value || isPwd.value){
+    whiteVisible.value = true;
+  }
+})
+
+
+</script>
+<style lang="scss" scoped>
+.verify-white-wrap{
+  .verify-white-body{
+    padding:0 14px
+  }
+  .verify-white-head{
+    padding:0 14px;
+    margin-bottom: 8px;
+    margin-top:2px;
+  }
+  .mt16{
+    margin-top:16px;
+  }
+  .verify-white-tips{
+    text-align: center;
+    margin-top:8px;
+    font-size: 14px;
+    color: #92949D;
+  }
+  .verify-white-title{
+    font-size: 16px;
+    color: #292A36;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+  }
+  .submit-btn{
+    background: #FAA600;
+    border-radius: 2px;
+    width:255px;
+    height:32px;
+    color:#fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top:20px;
+    margin-bottom:14px;
+  }
+}
+</style>

web/src/render/index.html

@@ -15,8 +15,10 @@
 
           if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
             width = width < PC_W ? width : PC_W
+            if (!docEl.className.includes('ispc-html')) {
               docEl.className += ' ispc-html'
             }
+          }
 
           var f = Math.min(width / 7.5, 50)
           docEl.style.fontSize = f + 'px'

web/src/render/pages/RenderPage.vue

@@ -14,6 +14,7 @@
           @submit="handleSubmit"
         ></SubmitButton>
         <LogoIcon :logo-conf="logoConf" :readonly="true" />
+        <VerifyWhiteDialog v-if="store.state?.bannerConf" />
       </div>
     </div>
   </div>
@@ -26,6 +27,7 @@ import { useRouter } from 'vue-router'
 import communalLoader from '@materials/communals/communalLoader.js'
 import MainRenderer from '../components/MainRenderer.vue'
 import AlertDialog from '../components/AlertDialog.vue'
+import VerifyWhiteDialog from '../components/VerifyWhiteDialog.vue'
 import ConfirmDialog from '../components/ConfirmDialog.vue'
 import ProgressBar from '../components/ProgressBar.vue'