Compare commits
2 Commits
baf185d69d
...
7b1f0efe92
| Author | SHA1 | Date |
|---|---|---|
 刘妍
|
7b1f0efe92 | |
|
刘妍
|
c58c2bfb48 |
|
|
@ -19,6 +19,9 @@ enum Api {
|
||||||
projectFile = '/api/goview/project/uploadFile',
|
projectFile = '/api/goview/project/uploadFile',
|
||||||
SetMainPage = '/api/goview/project/mainPage/set',
|
SetMainPage = '/api/goview/project/mainPage/set',
|
||||||
GetMainPage = '/api/goview/project/mainPage/get',
|
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) =>
|
export const projectListApi = (params?: ProjectItem) =>
|
||||||
|
|
@ -80,7 +83,6 @@ export function projectUploadFile(
|
||||||
params,
|
params,
|
||||||
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
|
onUploadProgress: (progressEvent: AxiosProgressEvent) => void,
|
||||||
) {
|
) {
|
||||||
console.log(params);
|
|
||||||
return defHttp.uploadFile<UploadApiResult>(
|
return defHttp.uploadFile<UploadApiResult>(
|
||||||
{
|
{
|
||||||
url: uploadFileUrl,
|
url: uploadFileUrl,
|
||||||
|
|
@ -106,7 +108,6 @@ export function projectUploadFile(
|
||||||
|
|
||||||
// 设置系统主页面
|
// 设置系统主页面
|
||||||
export function setMainPage(params) {
|
export function setMainPage(params) {
|
||||||
console.log(params);
|
|
||||||
return defHttp.post({
|
return defHttp.post({
|
||||||
url: Api.SetMainPage,
|
url: Api.SetMainPage,
|
||||||
params,
|
params,
|
||||||
|
|
@ -114,3 +115,22 @@ export function setMainPage(params) {
|
||||||
}
|
}
|
||||||
// 获取系统主页面
|
// 获取系统主页面
|
||||||
export const getMainPage = () => defHttp.get({ url: Api.GetMainPage });
|
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,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,7 @@ import { mainOutRoutes } from './mainOut';
|
||||||
import { PageEnum } from '@/enums/pageEnum';
|
import { PageEnum } from '@/enums/pageEnum';
|
||||||
import { t } from '@/hooks/web/useI18n';
|
import { t } from '@/hooks/web/useI18n';
|
||||||
import { projectRoutes, chartRoutes, previewRoutes, editRoutes } from '@/router/disposition/index';
|
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 { getMainPage } from '@/api/path/project.api';
|
||||||
import { usePermissionStore } from '@/store/modules/permission';
|
|
||||||
import { useUserStore } from '@/store/modules/user';
|
|
||||||
import { previewPath } from '@/utils';
|
import { previewPath } from '@/utils';
|
||||||
|
|
||||||
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
// import.meta.glob() 直接引入所有的模块 Vite 独有的功能
|
||||||
|
|
@ -41,35 +37,6 @@ export const RootRoute: AppRouteRecordRaw = {
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Root',
|
name: 'Root',
|
||||||
// redirect: PageEnum.BASE_HOME,
|
// 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: {
|
meta: {
|
||||||
title: 'Root',
|
title: 'Root',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@ import {
|
||||||
EditCanvasConfigType,
|
EditCanvasConfigType,
|
||||||
} from './chartEditStore.d';
|
} from './chartEditStore.d';
|
||||||
import useClipboard from 'vue-clipboard3';
|
import useClipboard from 'vue-clipboard3';
|
||||||
|
import { customComponentSave } from '@/api/path/project.api';
|
||||||
|
|
||||||
const { toClipboard } = useClipboard();
|
const { toClipboard } = useClipboard();
|
||||||
|
|
||||||
|
|
@ -1041,10 +1042,7 @@ export const useChartEditStore = defineStore({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 保存至分组
|
// 保存至分组
|
||||||
saveToGroup(id?: string | string[]) {
|
saveToGroup() {
|
||||||
console.log('saveToGroup');
|
|
||||||
console.log(id);
|
|
||||||
console.log(this.getTargetChart);
|
|
||||||
if (this.getTargetChart.selectId.length > 1) {
|
if (this.getTargetChart.selectId.length > 1) {
|
||||||
window['$message'].warning('多个组件，请先创建分组后保存');
|
window['$message'].warning('多个组件，请先创建分组后保存');
|
||||||
return;
|
return;
|
||||||
|
|
@ -1054,7 +1052,7 @@ export const useChartEditStore = defineStore({
|
||||||
if (item.id == this.getTargetChart.selectId[0]) {
|
if (item.id == this.getTargetChart.selectId[0]) {
|
||||||
obj = {
|
obj = {
|
||||||
title: item.chartConfig.title,
|
title: item.chartConfig.title,
|
||||||
image: '',
|
image: 'upload.png',
|
||||||
key: 'GroupItem',
|
key: 'GroupItem',
|
||||||
json: {
|
json: {
|
||||||
charts: item,
|
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('保存失败');
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,9 @@
|
||||||
></mac-os-control-btn>
|
></mac-os-control-btn>
|
||||||
<n-text class="list-header-text" depth="3">
|
<n-text class="list-header-text" depth="3">
|
||||||
<n-ellipsis>{{ item.title }}</n-ellipsis>
|
<n-ellipsis>{{ item.title }}</n-ellipsis>
|
||||||
|
<span class="span-icon" @click="deleteComponent(item, index)">
|
||||||
|
<TrashIcon v-if="item.key == 'GroupItem'" />
|
||||||
|
</span>
|
||||||
</n-text>
|
</n-text>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-center go-flex-center go-transition" draggable="true">
|
<div class="list-center go-flex-center go-transition" draggable="true">
|
||||||
|
|
@ -98,6 +101,7 @@
|
||||||
|
|
||||||
import omit from 'lodash/omit';
|
import omit from 'lodash/omit';
|
||||||
import cloneDeep from 'lodash/cloneDeep';
|
import cloneDeep from 'lodash/cloneDeep';
|
||||||
|
import { customComponentSaveDelete } from '@/api/path/project.api';
|
||||||
|
|
||||||
const chartEditStore = useChartEditStore();
|
const chartEditStore = useChartEditStore();
|
||||||
const { TrashIcon } = icon.ionicons5;
|
const { TrashIcon } = icon.ionicons5;
|
||||||
|
|
@ -153,289 +157,7 @@
|
||||||
console.log('分组');
|
console.log('分组');
|
||||||
try {
|
try {
|
||||||
loadingStart();
|
loadingStart();
|
||||||
const recordCharts = {
|
const recordCharts = item.json;
|
||||||
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',
|
|
||||||
};
|
|
||||||
|
|
||||||
if (recordCharts === undefined) {
|
if (recordCharts === undefined) {
|
||||||
loadingFinish();
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
@ -689,4 +423,11 @@
|
||||||
animation: miniAnimation 0.5s;
|
animation: miniAnimation 0.5s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.span-icon {
|
||||||
|
font-size: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import { themeColor, setItem, getCharts } from './useLayout.hook';
|
||||||
import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d';
|
import { PackagesCategoryEnum, PackagesCategoryName, ConfigType } from '@/packages/index.d';
|
||||||
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore';
|
import { usePackagesStore } from '@/store/modules/packagesStore/packagesStore';
|
||||||
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d';
|
||||||
|
|
||||||
// 图标
|
// 图标
|
||||||
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon, GridIcon } = icon.ionicons5;
|
const { AirPlaneOutlineIcon, ImageIcon, BarChartIcon, GridIcon } = icon.ionicons5;
|
||||||
const { TableSplitIcon, RoadmapIcon, ChartPieIcon, SpellCheckIcon, GraphicalDataFlowIcon } =
|
const { TableSplitIcon, RoadmapIcon, ChartPieIcon, SpellCheckIcon, GraphicalDataFlowIcon } =
|
||||||
|
|
@ -66,7 +67,7 @@ export const useAsideHook = () => {
|
||||||
const menuOptions: MenuOptionsType[] = [];
|
const menuOptions: MenuOptionsType[] = [];
|
||||||
|
|
||||||
// 处理列表
|
// 处理列表
|
||||||
const handlePackagesList = () => {
|
const handlePackagesList = async () => {
|
||||||
for (const val in packagesStore.getPackagesList) {
|
for (const val in packagesStore.getPackagesList) {
|
||||||
menuOptions.push({
|
menuOptions.push({
|
||||||
key: val,
|
key: val,
|
||||||
|
|
@ -78,422 +79,8 @@ export const useAsideHook = () => {
|
||||||
list: packagesStore.getPackagesList[val],
|
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();
|
handlePackagesList();
|
||||||
|
|
||||||
// 记录选中值
|
// 记录选中值
|
||||||
let beforeSelect: string = menuOptions[0]['key'];
|
let beforeSelect: string = menuOptions[0]['key'];
|
||||||
const selectValue = ref<string>(menuOptions[0]['key']);
|
const selectValue = ref<string>(menuOptions[0]['key']);
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #top-right>
|
<template #top-right>
|
||||||
<charts-search v-show="getCharts" :menuOptions="menuOptions"></charts-search>
|
<charts-search v-show="getCharts" :menuOptions="menuOptionsList"></charts-search>
|
||||||
</template>
|
</template>
|
||||||
<!-- 图表 -->
|
<!-- 图表 -->
|
||||||
<aside>
|
<aside>
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<n-menu
|
<n-menu
|
||||||
class="menu-width"
|
class="menu-width"
|
||||||
v-model:value="selectValue"
|
v-model:value="selectValue"
|
||||||
:options="menuOptions"
|
:options="menuOptionsList"
|
||||||
:icon-size="16"
|
:icon-size="16"
|
||||||
:indent="18"
|
:indent="18"
|
||||||
@update:value="clickItemHandle"
|
@update:value="clickItemHandle"
|
||||||
|
|
@ -63,7 +63,12 @@
|
||||||
import { useAsideHook } from './hooks/useAside.hook';
|
import { useAsideHook } from './hooks/useAside.hook';
|
||||||
import PhotoModal from './components/PhotoModal/index.vue';
|
import PhotoModal from './components/PhotoModal/index.vue';
|
||||||
import { photoModalStore } from '@/store/modules/photoModal';
|
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 {
|
const {
|
||||||
getCharts,
|
getCharts,
|
||||||
BarChartIcon,
|
BarChartIcon,
|
||||||
|
|
@ -74,6 +79,32 @@
|
||||||
menuOptions,
|
menuOptions,
|
||||||
} = useAsideHook();
|
} = useAsideHook();
|
||||||
const photoModalStateStore = photoModalStore();
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue