答卷白名单前端代码 (#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>
This commit is contained in:
chaorenluo 2024-06-27 11:54:43 +08:00 committed by GitHub
parent 667d13962c
commit dab83e4d4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
52 changed files with 3097 additions and 231 deletions

View File

@ -53,11 +53,11 @@ _**(个人和企业用户均可快速构建特定领域的调研类解决方案
# 技术
Web 端Vue3 + ElementPlusC 端多端渲染(在建,[申请加入共建](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 + ElementPlusC 端多端渲染(规划中
Server 端Nestjs + MongoDBJava在建[申请加入共建](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 + MongoDBJava在建[欢迎加入共建](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 一下 ❤️❤️❤️,你的支持是我们最大的动力。

View File

@ -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.

View File

@ -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({

View File

@ -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);
});
});

View File

@ -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);
});
});
});

View File

@ -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: [],
});
});
});
});

View File

@ -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,
},
},
]),
);
});
});
});

View File

@ -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);
}

View File

@ -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 });
}),
};
}
}

View File

@ -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);
}
}

View File

@ -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 {

View File

@ -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,
},
};
});
}
}

View File

@ -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%
// 010分举例子推荐者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) + '%';
}

View File

@ -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',

3
web/components.d.ts vendored
View File

@ -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']

View File

@ -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",

View File

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

View File

@ -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
}
]
}

View File

@ -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
}
]
}
}

View File

@ -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'
}
]
}
]
}
}

View File

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

View File

@ -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
}
]
}
}

View File

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

View File

@ -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 }
}

View File

@ -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 }
}

View File

@ -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
}
}

View File

@ -1,139 +1,28 @@
<template>
<div class="analysis-page">
<leftMenu class="left"></leftMenu>
<div class="content-wrapper right">
<template v-if="tableData.total">
<h2 class="data-list">数据列表</h2>
<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="mainTableLoading" :table-data="tableData" />
<el-pagination
background
layout="prev, pager, next"
popper-class="analysis-pagination"
:total="tableData.total"
@current-change="handleCurrentChange"
<div class="right">
<div class="analysis-tabs">
<router-link
v-for="item in analysisType"
class="analysis-tabs__item"
:key="item.value"
:to="{ name: item.value }"
>
</el-pagination>
</template>
<div v-else>
<EmptyIndex :data="noDataConfig" />
<i class="iconfont" :class="item.icon"></i>
<span>{{ item.label }}</span>
</router-link>
</div>
<div class="content-wrapper">
<router-view />
</div>
</div>
</div>
</template>
<script>
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss'
import EmptyIndex from '@/management/components/EmptyIndex.vue'
<script setup>
import LeftMenu from '@/management/components/LeftMenu.vue'
import { getRecycleList } from '@/management/api/analysis'
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
}
}
import { analysisType } from '@/management/config/analysisConfig'
</script>
<style lang="scss" scoped>
@ -152,29 +41,60 @@ export default {
.right {
width: 100%;
height: 100%;
padding-left: 120px;
}
}
.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;
min-width: 1160px;
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;
}
}
.router-link-active {
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;
}
}
}
}
.data-list {
margin-bottom: 20px;
.content-wrapper {
flex: auto;
overflow: hidden;
padding: 24px 24px 24px 104px;
}
}
</style>

View File

@ -17,22 +17,23 @@
minWidth="200"
>
<template #header="scope">
<div class="table-row-cell">
<span
@mouseover="onPopoverRefOver(scope, 'head')"
:ref="(el) => (popoverRefMap[scope.column.id] = el)"
>
<div
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>
<span
class="table-row-cell"
@mouseover="onPopoverRefOver(scope, 'content')"
:ref="(el) => (popoverRefMap[scope.$index + scope.column.property] = el)"
>
<div
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; /* 禁止自动换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 显示省略号 */
max-width: 100%;
display: inline-block;
white-space: nowrap;
/* 禁止自动换行 */
overflow: hidden;
/* 超出部分隐藏 */
text-overflow: ellipsis;
/* 显示省略号 */
}
}
</style>

View File

@ -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(() => {
// dommounted
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>

View File

@ -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>

View File

@ -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>

View File

@ -8,26 +8,12 @@
{{ form.title }}
</span>
</div>
<el-form
class="question-config-form"
label-position="left"
label-width="200px"
@submit.prevent
>
<el-form class="question-config-form" label-position="left" label-width="200px" @submit.prevent>
<template v-for="(item, index) in form.formList">
<FormItem
v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])"
:key="index"
:form-config="item"
: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 v-if="item.type && !item.hidden && Boolean(registerTypes[item.type])" :key="index"
:form-config="item" :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,
@ -87,7 +83,7 @@ const handleFormChange = (data: any) => {
}
onMounted(async () => {
formConfigList.value = baseConfig.map((item) => ({
formConfigList.value = baseConfig.map((item) => ({
...item,
formList: item.formList.map((key) => (baseFormConfig as any)[key]).filter((config) => !!config)
}))

View File

@ -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']
}
]

View File

@ -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'
}
}
}

View File

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

View File

@ -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'

View File

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

View File

@ -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: {

View File

@ -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',

View File

@ -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: '',

View File

@ -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_xfsn9z31epc.woff?t=1716556097756') 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.woff2?t=1717580126029') format('woff2'),
url('//at.alicdn.com/t/c/font_4263849_tj4thybmhq.woff?t=1717580126029') format('woff'),
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';
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
})
}

View File

@ -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)

View File

@ -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>

View File

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

View File

@ -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'