gitY
/
LinYeFangHuo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: gitY:baf185d69da91b29f2ead6a9c7c82d75b5b6dc8b
Branches Tags
gitY:main
gitY:zhufu
...
compare: gitY:7b1f0efe92f7224a14ccd4d80002e8ad26ac135f
Branches Tags
gitY:main
gitY:zhufu

2 Commits
baf185d69d ... 7b1f0efe92

Author SHA1 Message Date
刘妍 7b1f0efe92 Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo 2025-02-24 15:00:16 +08:00
刘妍 c58c2bfb48 多组件组合保存成新组件，增删查 2025-02-24 15:00:11 +08:00
6 changed files with 93 additions and 741 deletions
Show Stats Expand all files Collapse all files

24
src/api/path/project.api.ts
View File

@ -19,6 +19,9 @@ enum Api {
projectFile = '/api/goview/project/uploadFile',
SetMainPage = '/api/goview/project/mainPage/set',
GetMainPage = '/api/goview/project/mainPage/get',
CustomComponentSave = '/api/goview/project/customComponent/save',
CustomComponentSaveList = '/api/goview/project/customComponent/list',
CustomComponentSaveDelete = '/api/goview/project/customComponent/delete',
}
// * 项目列表
export const projectListApi = (params?: ProjectItem) =>
@ -80,7 +83,6 @@ export function projectUploadFile(
params,
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
) {
console.log(params);
return defHttp.uploadFile<UploadApiResult>(
{
url: uploadFileUrl,
@ -106,7 +108,6 @@ export function projectUploadFile(
// 设置系统主页面
export function setMainPage(params) {
console.log(params);
return defHttp.post({
url: Api.SetMainPage,
params,
@ -114,3 +115,22 @@ export function setMainPage(params) {
}
// 获取系统主页面
export const getMainPage = () => defHttp.get({ url: Api.GetMainPage });
// 保存组件
export function customComponentSave(params) {
return defHttp.post({
url: Api.CustomComponentSave,
params,
});
}
// 获取组件列表
export const customComponentList = (params: any) =>
defHttp.get({ url: Api.CustomComponentSaveList, params });
// 删除组件
export function customComponentSaveDelete(params) {
return defHttp.post({
url: Api.CustomComponentSaveDelete + '?ids=' + params.ids,
params,
});
}

33
src/router/routes/index.ts
View File

@ -7,11 +7,7 @@ import { mainOutRoutes } from './mainOut';
import { PageEnum } from '@/enums/pageEnum';
import { t } from '@/hooks/web/useI18n';
import { projectRoutes, chartRoutes, previewRoutes, editRoutes } from '@/router/disposition/index';
import { router } from '@/router';
import { usePermissionStore } from '@/store/modules/permission';
import { getMainPage } from '@/api/path/project.api';
import { usePermissionStore } from '@/store/modules/permission';
import { useUserStore } from '@/store/modules/user';
import { previewPath } from '@/utils';
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
@ -41,35 +37,6 @@ export const RootRoute: AppRouteRecordRaw = {
path: '/',
name: 'Root',
// redirect: PageEnum.BASE_HOME,
// redirect: (to) => {
// const permissionStore = usePermissionStore();
// console.log(permissionStore.homePage);
// const userStore = useUserStore();
// console.log(userStore.userInfo);
// // const page = getMainPage().then((res) => {
// // console.log(res);
// // if (res) {
// // return res.split('#')[1];
// // } else {
// // return PageEnum.BASE_HOME;
// // }
// // });
// // console.log(page);
// // return page;
// return '/chart/preview/f0adeb4b-8f11-4cbb-84e3-7e03de472a7b';
// // const permissionStore = usePermissionStore();
// // console.log(permissionStore.getHomePage);
// // const mainPage = getMainPage();
// // console.log(mainPage);
// // console.log(mainPage.split('#'));
// // if (mainPage) {
// // return mainPage.split('#')[1];
// // return '/chart/preview/f0adeb4b-8f11-4cbb-84e3-7e03de472a7b';
// // } else {
// // return PageEnum.BASE_HOME;
// // }
// },
meta: {
title: 'Root',
},

18
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -30,6 +30,7 @@ import {
EditCanvasConfigType,
} from './chartEditStore.d';
import useClipboard from 'vue-clipboard3';
import { customComponentSave } from '@/api/path/project.api';
const { toClipboard } = useClipboard();
@ -1041,10 +1042,7 @@ export const useChartEditStore = defineStore({
}
},
// 保存至分组
saveToGroup(id?: string | string[]) {
console.log('saveToGroup');
console.log(id);
console.log(this.getTargetChart);
saveToGroup() {
if (this.getTargetChart.selectId.length > 1) {
window['$message'].warning('多个组件，请先创建分组后保存');
return;
@ -1054,7 +1052,7 @@ export const useChartEditStore = defineStore({
if (item.id == this.getTargetChart.selectId[0]) {
obj = {
title: item.chartConfig.title,
image: '',
image: 'upload.png',
key: 'GroupItem',
json: {
charts: item,
@ -1063,7 +1061,15 @@ export const useChartEditStore = defineStore({
};
}
});
console.log(obj);
customComponentSave({
content: JSON.stringify(obj),
}).then((res) => {
if (res) {
window['$message'].success('保存成功');
} else {
window['$message'].error('保存失败');
}
});
},
},
});

307
src/views/chart/ContentCharts/components/ChartsItemBox/index.vue
View File

@ -24,6 +24,9 @@
></mac-os-control-btn>
<n-text class="list-header-text" depth="3">
<n-ellipsis>{{ item.title }}</n-ellipsis>
<span class="span-icon" @click="deleteComponent(item, index)">
<TrashIcon v-if="item.key == 'GroupItem'" />
</span>
</n-text>
</div>
<div class="list-center go-flex-center go-transition" draggable="true">
@ -98,6 +101,7 @@
import omit from 'lodash/omit';
import cloneDeep from 'lodash/cloneDeep';
import { customComponentSaveDelete } from '@/api/path/project.api';
const chartEditStore = useChartEditStore();
const { TrashIcon } = icon.ionicons5;
@ -153,289 +157,7 @@
console.log('分组');
try {
loadingStart();
const recordCharts = {
charts: {
id: 'id_iahzwdbq0b400',
isGroup: true,
attr: { w: 456, h: 190, x: 179, y: 187, offsetX: 0, offsetY: 0, zIndex: -1 },
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: ['fadeInLeft'],
},
preview: { overFlowHidden: false },
status: { lock: false, hide: false },
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: { sql: 'select * from where' },
requestParams: {
Body: { 'form-data': {}, 'x-www-form-urlencoded': {}, json: '', xml: '' },
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: { click: null, dblclick: null, mouseenter: null, mouseleave: null },
advancedEvents: { vnodeMounted: null, vnodeBeforeMount: null },
interactEvents: [],
interactConfigEvents: [
{
type: 'click',
movementList: [
{
movement: 'newaddress',
elementId: '',
url: 'http://192.168.48.1:5174/#/chart/preview/1af87e56-127a-448c-b156-2b5540290536',
},
],
},
],
},
chartConfig: {
key: 'group',
chartKey: 'group',
conKey: 'group',
category: 'group',
categoryName: 'group',
package: 'group',
chartFrame: 'common',
title: '分组',
image: '',
},
groupList: [
{
id: 'id_23zrrbtdpv8g00',
isGroup: false,
attr: { x: 0, y: 0, w: 456, h: 190, offsetX: 0, offsetY: 0, zIndex: 1 },
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: { overFlowHidden: false },
status: { lock: false, hide: false },
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: { sql: 'select * from where' },
requestParams: {
Body: { 'form-data': {}, 'x-www-form-urlencoded': {}, json: '', xml: '' },
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: { click: null, dblclick: null, mouseenter: null, mouseleave: null },
advancedEvents: { vnodeMounted: null, vnodeBeforeMount: null },
interactEvents: [],
interactConfigEvents: [],
},
key: 'Titles02',
chartConfig: {
key: 'Titles02',
chartKey: 'VTitles02',
conKey: 'VCTitles02',
title: '标题-02',
category: 'Titles',
categoryName: '标题',
package: 'Decorates',
chartFrame: 'static',
image: 'title02.png',
},
option: {
boxId: 'linearGradientColorLeft',
colors: [
'#2ADDB3FF',
'#0F9F73',
'#054E3C',
'#02261C',
'#098965',
'#052C31',
'#031F1A',
'#073128',
'#1F926B',
'#FEFEFE',
],
},
},
{
id: 'id_727ikh9skuk00',
isGroup: false,
attr: { x: 32, y: 36, w: 125, h: 141, offsetX: 0, offsetY: 0, zIndex: 1 },
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: { overFlowHidden: false },
status: { lock: false, hide: false },
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: { sql: 'select * from where' },
requestParams: {
Body: { 'form-data': {}, 'x-www-form-urlencoded': {}, json: '', xml: '' },
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: { click: null, dblclick: null, mouseenter: null, mouseleave: null },
advancedEvents: { vnodeMounted: null, vnodeBeforeMount: null },
interactEvents: [],
interactConfigEvents: [],
},
key: 'Titles04',
chartConfig: {
key: 'Titles04',
chartKey: 'VTitles04',
conKey: 'VCTitles04',
title: '图标-01',
category: 'Titles',
categoryName: '标题',
package: 'Decorates',
chartFrame: 'static',
image: 'dzsp.png',
},
option: {
dur: 0.5,
borderTitle: '图标',
borderTitleWidth: 125,
borderTitleHeight: 141,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2'],
backgroundColor: '#00000000',
},
},
{
id: 'id_3iqy16byvvg000',
isGroup: false,
attr: { x: 168, y: 65, w: 238, h: 71, offsetX: 0, offsetY: 0, zIndex: -1 },
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: { overFlowHidden: false },
status: { lock: false, hide: false },
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: { sql: 'select * from where' },
requestParams: {
Body: { 'form-data': {}, 'x-www-form-urlencoded': {}, json: '', xml: '' },
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: { click: null, dblclick: null, mouseenter: null, mouseleave: null },
advancedEvents: { vnodeMounted: null, vnodeBeforeMount: null },
interactEvents: [],
interactConfigEvents: [],
},
key: 'TextCommon',
chartConfig: {
key: 'TextCommon',
chartKey: 'VTextCommon',
conKey: 'VCTextCommon',
title: '文字',
category: 'Texts',
categoryName: '文本',
package: 'Informations',
chartFrame: 'common',
image: 'text_static.png',
},
option: {
link: '',
linkHead: 'http://',
dataset: '电子沙盘',
fontSize: 28,
fontColor: '#ffffff',
paddingX: 10,
paddingY: 10,
textAlign: 'center',
fontWeight: 'bold',
borderWidth: 0,
borderColor: '#ffffff',
borderRadius: 5,
letterSpacing: 5,
writingMode: 'horizontal-tb',
backgroundColor: '#00000000',
},
},
],
key: 'group',
option: {},
},
type: 'copy',
};
const recordCharts = item.json;
if (recordCharts === undefined) {
loadingFinish();
@ -542,6 +264,18 @@
}
},
);
const deleteComponent = (item: ConfigType, index: number) => {
props.menuOptions.splice(index, 1);
customComponentSaveDelete({
ids: item.id,
}).then((res) => {
if (res) {
window['$message'].success(`删除成功`);
} else {
window['$message'].success(`删除失败`);
}
});
};
</script>
<style lang="scss" scoped>
@ -689,4 +423,11 @@
animation: miniAnimation 0.5s;
}
}
.span-icon {
font-size: 16px;
display: inline-block;
width: 20px;
height: 20px;
margin-left: 5px;
}
</style>

417
src/views/chart/ContentCharts/hooks/useAside.hook.ts
View File

@ -5,6 +5,7 @@ import { themeColor, setItem, getCharts } from './useLayout.hook';
import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d';
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore';
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
// 图标
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon, GridIcon } = icon.ionicons5;
const { TableSplitIcon, RoadmapIcon, ChartPieIcon, SpellCheckIcon, GraphicalDataFlowIcon } =
@ -66,7 +67,7 @@ export const useAsideHook = () => {
const menuOptions: MenuOptionsType[] = [];
// 处理列表
const handlePackagesList = () => {
const handlePackagesList = async () => {
for (const val in packagesStore.getPackagesList) {
menuOptions.push({
key: val,
@ -78,422 +79,8 @@ export const useAsideHook = () => {
list: packagesStore.getPackagesList[val],
});
}
console.log(menuOptions);
menuOptions.push({
key: 'Group',
label: '分组',
icon: renderIcon(GridIcon),
list: [
{
title: '分组一',
image: 'upload.png',
key: 'GroupItem',
},
{
title: '分组',
image: '',
key: 'GroupItem',
json: {
charts: {
id: 'id_3tdclzaqc7s000',
isGroup: true,
attr: {
w: 456,
h: 190,
x: 0,
y: 0,
offsetX: 0,
offsetY: 0,
zIndex: -1,
},
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: {
overFlowHidden: false,
},
status: {
lock: false,
hide: false,
},
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: {
sql: 'select * from where',
},
requestParams: {
Body: {
'form-data': {},
'x-www-form-urlencoded': {},
json: '',
xml: '',
},
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: {
click: null,
dblclick: null,
mouseenter: null,
mouseleave: null,
},
advancedEvents: {
vnodeMounted: null,
vnodeBeforeMount: null,
},
interactEvents: [],
interactConfigEvents: [
{
type: 'click',
movementList: [
{
movement: 'newaddress',
elementId: '',
url: 'http://192.168.48.1:5174/#/dashboard/analysis',
},
],
},
],
},
chartConfig: {
key: 'group',
chartKey: 'group',
conKey: 'group',
category: 'group',
categoryName: 'group',
package: 'group',
chartFrame: 'common',
title: '分组',
image: '',
},
groupList: [
{
id: 'id_3kr9g4z8nni000',
isGroup: false,
attr: {
x: 0,
y: 0,
w: 456,
h: 190,
offsetX: 0,
offsetY: 0,
zIndex: 1,
},
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: {
overFlowHidden: false,
},
status: {
lock: false,
hide: false,
},
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: {
sql: 'select * from where',
},
requestParams: {
Body: {
'form-data': {},
'x-www-form-urlencoded': {},
json: '',
xml: '',
},
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: {
click: null,
dblclick: null,
mouseenter: null,
mouseleave: null,
},
advancedEvents: {
vnodeMounted: null,
vnodeBeforeMount: null,
},
interactEvents: [],
interactConfigEvents: [],
},
key: 'Titles03',
chartConfig: {
key: 'Titles03',
chartKey: 'VTitles03',
conKey: 'VCTitles03',
title: '标题-03',
category: 'Titles',
categoryName: '标题',
package: 'Decorates',
chartFrame: 'static',
image: 'title03.png',
},
option: {
boxId: 'linearGradientColorRight',
colors: [
'#0E8A6D',
'#0F9F73',
'#054E3C',
'#02261C',
'#098965',
'#052C31',
'#031F1A',
'#073128',
'#1F926B',
'#FEFEFE',
],
},
},
{
id: 'id_18kfcrja7ts000',
isGroup: false,
attr: {
x: 302,
y: 39,
w: 124,
h: 140,
offsetX: 0,
offsetY: 0,
zIndex: 1,
},
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: {
overFlowHidden: false,
},
status: {
lock: false,
hide: false,
},
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: {
sql: 'select * from where',
},
requestParams: {
Body: {
'form-data': {},
'x-www-form-urlencoded': {},
json: '',
xml: '',
},
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: {
click: null,
dblclick: null,
mouseenter: null,
mouseleave: null,
},
advancedEvents: {
vnodeMounted: null,
vnodeBeforeMount: null,
},
interactEvents: [],
interactConfigEvents: [],
},
key: 'Titles08',
chartConfig: {
key: 'Titles08',
chartKey: 'VTitles08',
conKey: 'VCTitles08',
title: '图标-05',
category: 'Titles',
categoryName: '标题',
package: 'Decorates',
chartFrame: 'static',
image: 'wlpt.png',
},
option: {
dur: 0.5,
borderTitle: '图标',
borderTitleWidth: 124,
borderTitleHeight: 140,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2'],
backgroundColor: '#00000000',
},
},
{
id: 'id_3ddbf9eb1xu000',
isGroup: false,
attr: {
x: 50,
y: 69,
w: 238,
h: 71,
offsetX: 0,
offsetY: 0,
zIndex: -1,
},
styles: {
filterShow: false,
hueRotate: 0,
saturate: 1,
contrast: 1,
brightness: 1,
opacity: 1,
rotateZ: 0,
rotateX: 0,
rotateY: 0,
skewX: 0,
skewY: 0,
blendMode: 'normal',
animations: [],
},
preview: {
overFlowHidden: false,
},
status: {
lock: false,
hide: false,
},
request: {
requestDataType: 0,
requestHttpType: 'get',
requestUrl: '',
requestInterval: null,
requestIntervalUnit: 'second',
requestContentType: 0,
requestParamsBodyType: 'none',
requestSQLContent: {
sql: 'select * from where',
},
requestParams: {
Body: {
'form-data': {},
'x-www-form-urlencoded': {},
json: '',
xml: '',
},
Header: {},
Params: {},
},
},
filter: null,
events: {
baseEvent: {
click: null,
dblclick: null,
mouseenter: null,
mouseleave: null,
},
advancedEvents: {
vnodeMounted: null,
vnodeBeforeMount: null,
},
interactEvents: [],
interactConfigEvents: [],
},
key: 'TextCommon',
chartConfig: {
key: 'TextCommon',
chartKey: 'VTextCommon',
conKey: 'VCTextCommon',
title: '文字',
category: 'Texts',
categoryName: '文本',
package: 'Informations',
chartFrame: 'common',
image: 'text_static.png',
},
option: {
link: '',
linkHead: 'http://',
dataset: '管理后台',
fontSize: 28,
fontColor: '#ffffff',
paddingX: 10,
paddingY: 10,
textAlign: 'center',
fontWeight: 'bold',
borderWidth: 0,
borderColor: '#ffffff',
borderRadius: 5,
letterSpacing: 5,
writingMode: 'horizontal-tb',
backgroundColor: '#00000000',
},
},
],
key: 'group',
option: {},
},
type: 'copy',
},
},
],
});
};
handlePackagesList();
// 记录选中值
let beforeSelect: string = menuOptions[0]['key'];
const selectValue = ref<string>(menuOptions[0]['key']);

35
src/views/chart/ContentCharts/index.vue
View File

@ -14,7 +14,7 @@
</template>
<template #top-right>
<charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
<charts-search v-show="getCharts" :menuOptions="menuOptionsList"></charts-search>
</template>
<!-- 图表 -->
<aside>
@ -22,7 +22,7 @@
<n-menu
class="menu-width"
v-model:value="selectValue"
:options="menuOptions"
:options="menuOptionsList"
:icon-size="16"
:indent="18"
@update:value="clickItemHandle"
@ -63,7 +63,12 @@
import { useAsideHook } from './hooks/useAside.hook';
import PhotoModal from './components/PhotoModal/index.vue';
import { photoModalStore } from '@/store/modules/photoModal';
import { onMounted, ref } from 'vue';
import { customComponentList } from '@/api/path/project.api';
import { icon } from '@/plugins';
import { renderIcon } from '@/utils';
const { GridIcon } = icon.ionicons5;
const {
getCharts,
BarChartIcon,
@ -74,6 +79,32 @@
menuOptions,
} = useAsideHook();
const photoModalStateStore = photoModalStore();
const menuOptionsList = ref(menuOptions);
const getCustomComponentList = async () => {
const data = await customComponentList({
page: 1,
limit: 999,
});
let list = [];
data.items.forEach((item) => {
let obj = JSON.parse(item.content);
list.push({
...obj,
id: item.id,
});
});
return list;
};
onMounted(async () => {
getCustomComponentList().then((res) => {
menuOptionsList.value.push({
key: 'Group',
label: '分组',
icon: renderIcon(GridIcon),
list: res,
});
});
});
</script>
<style lang="scss" scoped>