-
-
- )
+import React, { useState, FC, useEffect } from "react";
+import { ConfigProvider, theme } from "antd";
+import Routes from "./router";
+import { Layout } from "@src/components";
+import { useLocation } from "react-router-dom";
+// 由于 antd 组件的默认文案是英文，所以需要修改为中文
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+import "@src/assets/scss/base/normalize.css";
+import zhCN from "antd/locale/zh_CN";
+import { Header, Sidder } from "./components";
+import { connect } from "react-redux";
+import { ALL_STATE } from "./store/actionType";
+import { IThemeName, setTheme, getCurrentPrimaryColor } from "@core/theme";
+import { getGroupById } from "@src/utils";
+import routerDatas, { IRoute } from "./router/routes";
+
+dayjs.locale("zh-cn");
+
+interface IApp {
+ currentTheme: IThemeName;
}
-export default App
+const App: FC
+
+ );
+};
+
+export default Box;
diff --git a/src/components/box/index.scss b/src/components/box/index.scss
new file mode 100644
index 0000000..230d3e0
--- /dev/null
+++ b/src/components/box/index.scss
@@ -0,0 +1,21 @@
+@include b(box) {
+ margin-top: 16px;
+ background: var(--module-background-color);
+ transition: all 0.25s ease 0s;
+ border-radius: 5px;
+ @include e(header) {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 40px;
+ padding: 0 20px;
+ .title {
+ font-size: 16px;
+ font-weight: bold;
+ }
+ }
+ @include e(body) {
+ padding: 0 20px;
+ min-height: 250px;
+ }
+}
diff --git a/src/components/box/index.ts b/src/components/box/index.ts
new file mode 100644
index 0000000..53e9489
--- /dev/null
+++ b/src/components/box/index.ts
@@ -0,0 +1 @@
+export { default as Box } from "./box";
diff --git a/src/components/create-portal/index.tsx b/src/components/create-portal/index.tsx
deleted file mode 100644
index 7dccef2..0000000
--- a/src/components/create-portal/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * @Description: 页面描述
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-09-07 20:16:24
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-06 21:12:19
- * @FilePath: \bigscreen\src\components\create-portal\index.tsx
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import { FC, ReactNode, useEffect, useRef } from 'react'
-import ReactDOM from 'react-dom'
-
-interface CreatePortalProps {
- children: ReactNode
-}
-
-const CreatePortal: FC
+
+ {title}
+
+ {children}
+
+ {!relationFields.length ? (
+
+ {({ getFieldValue }) => {
+ if (
+ relationFields.every((subItem: string) =>
+ item.relationValues.includes(String(getFieldValue(subItem)))
+ )
+ ) {
+ return (
+
+ )}
+
+ );
+ }
+ if (judgeType(item, "[object Array]")) {
+ return (
+
+ {item.map((subItem: any, subIndex: number) => {
+ const relationFields =
+ subItem.relationFields !== undefined
+ ? subItem.relationFields.split(",")
+ : [];
+ return (
+
+ {subItem.relationFields === undefined ? (
+
+
+ ) : (
+
+ {({ getFieldValue }) => {
+ if (
+ relationFields.every((subbItem: string) =>
+ subItem.relationValues.includes(
+ String(getFieldValue(subbItem))
+ )
+ )
+ ) {
+ return (
+
+
+
+
+ );
+ }
+ }}
+
+ )}
+
+ );
+ })}
+
+ );
+ }
+ return null;
+ });
+};
+
+export default DynamicForm;
diff --git a/src/pages/report/big-screen/index.scss b/src/components/dynamicForm/index.scss
similarity index 100%
rename from src/pages/report/big-screen/index.scss
rename to src/components/dynamicForm/index.scss
diff --git a/src/components/dynamicForm/index.ts b/src/components/dynamicForm/index.ts
new file mode 100644
index 0000000..69f81ae
--- /dev/null
+++ b/src/components/dynamicForm/index.ts
@@ -0,0 +1 @@
+export { default as DynamicForm } from "./dynamicForm";
diff --git a/src/components/echarts/echarts.tsx b/src/components/echarts/echarts.tsx
new file mode 100644
index 0000000..7bc4ef1
--- /dev/null
+++ b/src/components/echarts/echarts.tsx
@@ -0,0 +1,125 @@
+import React, { memo, useCallback, useEffect, useRef } from "react";
+import * as echarts from "echarts";
+import { ALL_STATE } from "@src/store/actionType";
+import { init as initChart } from "echarts/core";
+import { connect } from "react-redux";
+import {
+ Option,
+ Theme,
+ InitOptions,
+ UpdateOptions,
+ AutoresizeProp,
+ LoadingOptions,
+ EChartsType,
+} from "./types";
+
+console.log(echarts);
+
+interface IEchartsProps {
+ option: Option;
+ theme?: Theme;
+ initOptions?: InitOptions;
+ updateOptions?: UpdateOptions;
+ group?: string;
+ autoresize?: AutoresizeProp;
+ loading?: boolean;
+ loadingOptions?: LoadingOptions;
+}
+
+const Echarts = memo(
+ (props: IEchartsProps) => {
+ const {
+ theme,
+ group,
+ initOptions,
+ option,
+ updateOptions,
+ loading = false,
+ loadingOptions,
+ autoresize = {},
+ } = props;
+ const dom = useRef
+
+ );
+};
+export default Filter;
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
new file mode 100644
index 0000000..67f6f9d
--- /dev/null
+++ b/src/components/header/header.tsx
@@ -0,0 +1,119 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React, { FC, useEffect, useState } from "react";
+import {
+ MenuFoldOutlined,
+ MenuUnfoldOutlined,
+ LoginOutlined,
+ DownOutlined,
+} from "@ant-design/icons";
+import { Theme } from "@src/components";
+import { Breadcrumb, MenuProps } from "antd";
+import { Dropdown } from "antd";
+import { clearToken } from "@src/store/actions/token";
+import { setUserInfo } from "@src/store/actions/userInfo";
+import "./index.scss";
+import { connect } from "react-redux";
+import { ALL_STATE } from "@src/store/actionType";
+import { IuserInfo } from "@src/service";
+import { useInfo } from "@src/core/hook";
+import { useLocation, Link } from "react-router-dom";
+import { getParentsById } from "@src/utils";
+import routerDatas, { IRoute } from "@src/router/routes";
+
+interface IHeader {
+ clearToken: () => void;
+ collapsed: boolean;
+ setCollapsed: React.Dispatch{label}
+
+ {datas.map((item) => (
+ listSearchHandler(field, item.id, index)}
+ >
+ {item.name}
+
+ ))}
+
+
+
+ ),
+ },
+ ];
+ return (
+
+
+ );
+};
+
+const mapStateToProps = (state: ALL_STATE) => ({
+ userInfo: state.userInfo,
+});
+
+// 将 对应action 插入到组件的 props 中
+const mapDispatchToProps = {
+ clearToken: clearToken,
+ setUserInfo: setUserInfo,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Header);
diff --git a/src/components/header/index.scss b/src/components/header/index.scss
new file mode 100644
index 0000000..bd4cdd5
--- /dev/null
+++ b/src/components/header/index.scss
@@ -0,0 +1,104 @@
+@include b(header) {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ z-index: 100;
+ display: flex;
+ height: 48px;
+ color: var(--white);
+ background-color: var(--change-primary-color);
+ box-shadow: 0 0 10px var(--module-box-shadow-color);
+ transition: all 0.25s ease 0s;
+ @include e(left) {
+ display: flex;
+ align-items: center;
+ width: 200px;
+ padding: 0 15px;
+ box-sizing: border-box;
+ transition: all 0.25s ease 0s;
+ overflow: hidden;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
+ .title {
+ margin: 0;
+ padding: 0;
+ padding-left: 10px;
+ font-size: 22px;
+ white-space: nowrap;
+ overflow: hidden;
+ transition: all 0.25s ease 0s;
+ }
+ .cms-icon {
+ font-size: 22px;
+ transform: all 0.25s ease 0s;
+ }
+ }
+ @include e(right) {
+ display: flex;
+ flex: 1;
+ padding: 0 15px;
+ @include m(left) {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ > span {
+ margin-right: 20px;
+ }
+ .anticon {
+ font-size: 24px;
+ color: var(--white);
+ opacity: 0.8;
+ cursor: pointer;
+ transition: all 0.25s ease 0s;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ @include m(right) {
+ display: flex;
+ align-items: center;
+ .ant-dropdown-trigger {
+ height: 24px;
+ padding-left: 15px;
+ line-height: 24px;
+ margin-left: 15px;
+ border-left: 1px solid var(--white);
+ }
+ .user {
+ display: flex;
+ align-items: center;
+ }
+ .user-name {
+ padding: 0 10px;
+ color: var(--white);
+ }
+ }
+ }
+}
+
+@include b(avatar) {
+ width: 30px;
+ height: 30px;
+ background: var(--module-dark-background-color);
+ border-radius: 50%;
+ overflow: hidden;
+ transition: all 0.25s ease 0s;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+:where(.css-dev-only-do-not-override-190m0jy).ant-breadcrumb
+ .ant-breadcrumb-separator {
+ color: rgba(255, 255, 255, 0.45);
+}
+:where(.css-dev-only-do-not-override-190m0jy).ant-breadcrumb a {
+ color: rgba(255, 255, 255, 0.45);
+}
+:where(.css-dev-only-do-not-override-190m0jy).ant-breadcrumb li:last-child {
+ color: rgba(255, 255, 255, 0.88);
+}
+:where(.css-dev-only-do-not-override-190m0jy).ant-breadcrumb a:hover {
+ color: var(--white);
+}
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
new file mode 100644
index 0000000..5ed4e58
--- /dev/null
+++ b/src/components/header/index.ts
@@ -0,0 +1 @@
+export { default as Header } from "./header";
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..17ba60d
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,10 @@
+export * from "./layout";
+export * from "./lazyLoad";
+export * from "./header";
+export * from "./theme";
+export * from "./sidder";
+export * from "./box";
+export * from "./echarts";
+export * from "./drag";
+export * from "./dynamicForm";
+export * from "./baseForm";
diff --git a/src/components/json-editor/index.scss b/src/components/json-editor/index.scss
deleted file mode 100644
index 4bce54f..0000000
--- a/src/components/json-editor/index.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@include b(json-editor) {
- .jsoneditor {
- border: 1px solid #383838;
- border-radius: 3px;
- overflow: hidden;
- color: #999;
- }
- .jsoneditor-menu {
- display: none;
- }
- .jsoneditor-statusbar {
- background-color: #424242;
- border-top: 1px solid #383838;
- }
- .ace-jsoneditor {
- .ace_marker-layer .ace_active-line {
- background-color: rgba(255, 255, 255, 0.2);
- }
- color: #999;
- .ace_gutter,
- .ace_scroller {
- background-color: #424242;
- }
- .ace_gutter {
- color: #999;
- border-right: 1px solid #383838;
- }
- .ace_gutter-active-line {
- background-color: rgba(255, 255, 255, .2);
- }
- }
- .ace_variable,
- .ace_text-layer {
- color: #999;
- }
-}
\ No newline at end of file
diff --git a/src/components/json-editor/index.tsx b/src/components/json-editor/index.tsx
deleted file mode 100644
index 89d24a4..0000000
--- a/src/components/json-editor/index.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import {
- FC, useCallback, useEffect, useRef
-} from 'react'
-import { IAnyObject } from '@src/types'
-import JSONEditor, { JSONEditorOptions } from 'jsoneditor'
-import 'jsoneditor/dist/jsoneditor.css'
-import './index.scss'
-
-interface IJsonEditorProps {
- value: IAnyObject;
- onChange?: (josn?: any) => void;
- options?: JSONEditorOptions;
-}
-
-const JsonEditor: FC
+
+
+ 大屏管理系统
+
+
+
+ setCollapsed(!collapsed)}>
+ {collapsed ? ({
+ title: item.path ? (
+ {item.name}
+ ) : (
+ item.name
+ ),
+ }))}
+ >
+ ) : null}
+
+
+
+
+
+
+
+
+ 
+
+ 欢迎{userInfo.username}
+
+ {Header}
+
+ );
+};
+
+export default Layout;
diff --git a/src/components/lazyLoad/index.ts b/src/components/lazyLoad/index.ts
new file mode 100644
index 0000000..b5d1ca9
--- /dev/null
+++ b/src/components/lazyLoad/index.ts
@@ -0,0 +1 @@
+export { default as lazyLoad } from "./lazyLoad";
diff --git a/src/components/lazyLoad/lazyLoad.tsx b/src/components/lazyLoad/lazyLoad.tsx
new file mode 100644
index 0000000..c86f032
--- /dev/null
+++ b/src/components/lazyLoad/lazyLoad.tsx
@@ -0,0 +1,13 @@
+import React, { lazy } from "react";
+
+/**
+ * 组件或者路由懒加载
+ * @param path 路径
+ * @returns
+ */
+const lazyLoad = function (path: string) {
+ const Module = lazy(() => import(`@src/pages/${path}` /*home*/));
+ return
+ {Sidder}
+
+ {Footer}
+ {children}
+
+ {children &&
+ );
+};
+
+export default List;
diff --git a/src/components/loading/index.tsx b/src/components/loading/index.tsx
deleted file mode 100644
index 2ae10fd..0000000
--- a/src/components/loading/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * @Description: 页面描述
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-09-04 16:50:14
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-10 22:09:59
- * @FilePath: \bigscreen\src\components\loading\index.tsx
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import { FC, HTMLAttributes } from 'react'
-import { Spin } from 'antd'
-
-interface ILoadingProps extends HTMLAttributes{children}
}
+
+ {loading ? (
+
+
+
+ ))
+ ) : (
+
+ 
+
+ {item.name}
+
+ 类型：{item.level2Type || item.level1Type}
+
+ 使用次数：{item.count}次
+
+ 创建时间：{fmtDate(item.createTime, "yyyy-MM-dd hh:mm:ss")}
+
+
-
-
- )
-}
-
-export default Loaindg
diff --git a/src/components/pop-confirm/index.tsx b/src/components/pop-confirm/index.tsx
deleted file mode 100644
index 8ae1803..0000000
--- a/src/components/pop-confirm/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * @Description: 页面描述
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-09-04 16:50:14
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-11 21:40:17
- * @FilePath: \bigscreen\src\components\pop-confirm\index.tsx
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import { FC, ReactNode } from 'react'
-import { message, Popconfirm } from 'antd'
-import Ajax from '@src/service'
-import { IAnyObject } from '@src/types'
-
-interface IPopConfirmProps {
- // 请求接口，这里查找的@src/service
- requestName: string
- // 文本
- text?: string
- // 刷新表格
- reload?: () => void
- // 其他参数
- params?: IAnyObject
- // 回调方法
- callback?: Function
- children?: ReactNode
-}
-
-const PopConfirm: FC
+
+
+ );
+};
+
+const mapStateToProps = (state: ALL_STATE) => ({
+ currentTheme: state.currentTheme,
+});
+
+// 将 对应action 插入到组件的 props 中
+const mapDispatchToProps = {};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Sidder);
diff --git a/src/components/table/index.scss b/src/components/table/index.scss
new file mode 100644
index 0000000..b0b2c54
--- /dev/null
+++ b/src/components/table/index.scss
@@ -0,0 +1,28 @@
+:where(.css-dev-only-do-not-override-190m0jy).ant-table-wrapper
+ .ant-table-container
+ table
+ > thead
+ > tr:first-child
+ > *:first-child,
+:where(.css-dev-only-do-not-override-lzncpa).ant-table-wrapper
+ .ant-table-container
+ table
+ > thead
+ > tr:first-child
+ > *:first-child {
+ border-start-start-radius: 0;
+}
+:where(.css-dev-only-do-not-override-lzncpa).ant-table-wrapper
+ .ant-table-container
+ table
+ > thead
+ > tr:first-child
+ > *:last-child,
+:where(.css-dev-only-do-not-override-190m0jy).ant-table-wrapper
+ .ant-table-container
+ table
+ > thead
+ > tr:first-child
+ > *:last-child {
+ border-start-end-radius: 0;
+}
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
new file mode 100644
index 0000000..289658a
--- /dev/null
+++ b/src/components/table/index.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { Table } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import "./index.scss";
+
+interface DataType {
+ key: string;
+ name: string;
+ money: string;
+ address: string;
+}
+
+const columns: ColumnsType
+
+ );
+};
+
+const mapStateToProps = (state: ALL_STATE) => ({
+ currentTheme: state.currentTheme,
+});
+
+// 将 对应action 插入到组件的 props 中
+const mapDispatchToProps = {
+ setCurrentTheme,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Theme);
diff --git a/src/components/total/index.scss b/src/components/total/index.scss
new file mode 100644
index 0000000..eac94f5
--- /dev/null
+++ b/src/components/total/index.scss
@@ -0,0 +1,40 @@
+@include b(components) {
+ @include e(card) {
+ position: relative;
+ display: flex;
+ justify-content: space-around;
+ flex-direction: column;
+ height: 60px;
+ padding: 20px;
+ color: var(--html-font-color);
+ background: var(--module-background-color);
+ transition: all 0.25s ease 0s;
+ border-radius: 5px;
+ .name {
+ position: relative;
+ z-index: 1;
+ font-weight: bold;
+ }
+ .total {
+ position: relative;
+ z-index: 1;
+ color: var(--light-font-color);
+ transition: all 0.25s ease 0s;
+ b {
+ padding-right: 5px;
+ color: var(--primary-color);
+ font-size: 30px;
+ transition: all 0.25s ease 0s;
+ }
+ }
+ .bg-font {
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 40px;
+ color: var(--lighter-font-color);
+ transition: all 0.25s ease 0s;
+ }
+ }
+}
diff --git a/src/components/total/index.tsx b/src/components/total/index.tsx
new file mode 100644
index 0000000..1706a5d
--- /dev/null
+++ b/src/components/total/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Col, Skeleton } from "antd";
+import "./index.scss";
+
+interface ITotal {
+ datas: any[];
+ loading: boolean;
+ cardNum?: number;
+}
+
+const Total = React.memo(
+ (props: ITotal) => {
+ const { datas, loading, cardNum = 4 } = props;
+ return (
+ <>
+ {loading
+ ? Array(cardNum)
+ .fill(0)
+ .map((item, index) => (
+
+
+
+
+
+ {themeList
+ .filter((item) => !item.name.includes("_dark"))
+ .map((item) => (
+
+
+ setCurrentTheme(
+ (currentTheme.includes("_dark")
+ ? `${item.name.split("_")[0]}_dark`
+ : `${item.name.split("_")[0]}_light`) as IThemeName
+ )
+ }
+ style={{ background: item.color }}
+ >
+ ))}
+
+
+
+ ))
+ : ""}
+ {datas.map((item, index) => (
+
+
+
+ ))}
+
+ );
+ },
+ (prevProps, nextProps) => {
+ if (JSON.stringify(prevProps) === JSON.stringify(nextProps)) {
+ return true;
+ }
+ return false;
+ }
+);
+
+export default Total;
diff --git a/src/components/treeNode/index.scss b/src/components/treeNode/index.scss
new file mode 100644
index 0000000..29bebc5
--- /dev/null
+++ b/src/components/treeNode/index.scss
@@ -0,0 +1,71 @@
+@include b(widget-main) {
+ $color: rgba(255, 255, 255, 0.5);
+ .no-data {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ &:after,
+ &:before {
+ content: "";
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -7px 0 0 -1px;
+ width: 2px;
+ height: 14px;
+ background: $color;
+ }
+ &:after {
+ transform: rotate(90deg);
+ }
+ }
+ @include e(row) {
+ position: relative;
+ display: flex;
+ justify-content: stretch;
+ flex: 1;
+ > div {
+ flex: 1;
+ }
+ }
+ @include e(col) {
+ position: relative;
+ display: flex;
+ flex-flow: column;
+ justify-content: stretch;
+ flex: 1;
+ > div {
+ flex: 1;
+ }
+ }
+ @include e(auxiliaryline) {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border: 1px $color dashed;
+ box-sizing: border-box;
+ &:after {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1;
+ }
+ @include when(moveTo) {
+ &::after {
+ opacity: 0.3;
+ background-color: var(--primary-color);
+ }
+ }
+ @include when(selected) {
+ border: 2px solid var(--primary-color);
+ &::after {
+ opacity: 0.3;
+ background-color: var(--primary-color);
+ }
+ }
+ }
+}
diff --git a/src/components/treeNode/index.tsx b/src/components/treeNode/index.tsx
new file mode 100644
index 0000000..d75f604
--- /dev/null
+++ b/src/components/treeNode/index.tsx
@@ -0,0 +1,230 @@
+import React, { useCallback } from "react";
+import { IComponentsItem, Idata } from "@src/service";
+import { DIRECTION } from "@src/core/types/constant";
+import DragLine from "@src/components/drag/dragLine";
+import { getStyles } from "@src/utils";
+import components from "@src/elements";
+import "./index.scss";
+
+console.log(components, "components");
+
+function capitalizeFirstLetter(str: string) {
+ return str.replace(/^\w/, (c) => c.toUpperCase());
+}
+
+interface ITreeNode {
+ // 传递的数据
+ datas: Idata[];
+ // 数据类型view：视图，modify：修改
+ type: "view" | "modify";
+ // 选中组件ID
+ selectedId: string;
+ // 鼠标移动结束时
+ onMouseUp: (
+ e: MouseEvent,
+ node: HTMLDivElement,
+ direction: DIRECTION
+ ) => void;
+ // 手动完成
+ onDrop: (e: React.DragEvent{item.name}
+
+ {item.total}
+ {item.unit}
+
+ {item.bgFont}
+
+ {components[capitalizeFirstLetter(element.element)]
+ ? React.createElement(
+ components[capitalizeFirstLetter(element.element)],
+ {
+ options: element.configureValue,
+ }
+ )
+ : null}
+
+ ) : (
+ <>
+ {components[capitalizeFirstLetter(element.element)]
+ ? React.createElement(
+ components[capitalizeFirstLetter(element.element)],
+ {
+ options: element.configureValue,
+ }
+ )
+ : null}
+
+ )}
+
+ ) : (
+ onDrop(e, item)}
+ onDragOver={onDragOver}
+ onDragStart={onDragStart}
+ onDragEnter={onDragEnter}
+ onDragLeave={onDragLeave}
+ >
+
+
+ )}
+
+ );
+ };
+ // 拖拽开始
+ const onDragStart = useCallback((e: React.DragEvent element.id === item.id)
+ ? "element"
+ : item.type
+ }
+ data-id={item.id}
+ data-pid={pid}
+ data-nextid={
+ datas[index + 1]
+ ? datas[index + 1].id
+ : datas.length > 1
+ ? datas[index - 1].id
+ : ""
+ }
+ data-direction={
+ item.type === "row" ||
+ (item.type === "col" && item.children?.length)
+ ? "vertical"
+ : "horizontal"
+ }
+ style={{
+ ...getStyles(item.configuration),
+ }}
+ >
+ {item.children && item.children.length ? (
+
+ ))}
+
+ );
+};
+
+export default TreeNode;
diff --git a/src/components/trendChart/index.scss b/src/components/trendChart/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/trendChart/index.tsx b/src/components/trendChart/index.tsx
new file mode 100644
index 0000000..e31a259
--- /dev/null
+++ b/src/components/trendChart/index.tsx
@@ -0,0 +1,72 @@
+import React, { memo, useEffect, useState } from "react";
+import { Skeleton } from "antd";
+import { Box, Echarts } from "@src/components";
+import { IComponentstrendItem } from "@src/service";
+
+interface ITrendChart {
+ datas: IComponentstrendItem[];
+ loading: boolean;
+}
+
+const TrendChart = memo(
+ (props: ITrendChart) => {
+ const { datas, loading } = props;
+ const [xAxisData, setXAxisData] = useState
+
{loading && (
-
+
+
(false);
+ const navigate = useNavigate();
+ const login = useCallback(
+ (params: any, callback: (data: string) => void) => {
+ setLoginLoading(true);
+ API.loginService
+ .login(params)
+ .then((data) => {
+ setLoginLoading(false);
+ navigate("/home");
+ callback && callback(data.data);
+ })
+ .catch(() => {
+ setLoginLoading(false);
+ });
+ },
+ [navigate]
+ );
+
+ return {
+ loginLoading,
+ login,
+ };
+}
diff --git a/src/core/hook/userInfo.hook.tsx b/src/core/hook/userInfo.hook.tsx
new file mode 100644
index 0000000..e49b6ce
--- /dev/null
+++ b/src/core/hook/userInfo.hook.tsx
@@ -0,0 +1,23 @@
+import { useState, useCallback } from "react";
+import { API } from "@service/index";
+export function useInfo() {
+ // 是否处理loading状态
+ const [userInfoLoading, setUserInfoLoading] = useState(false);
+ const getUserInfo = useCallback((callback: (data: any) => void) => {
+ setUserInfoLoading(true);
+ API.userService
+ .userInfo()
+ .then((res) => {
+ setUserInfoLoading(false);
+ callback && callback(res.data);
+ })
+ .catch(() => {
+ setUserInfoLoading(false);
+ });
+ }, []);
+
+ return {
+ userInfoLoading,
+ getUserInfo,
+ };
+}
diff --git a/src/core/hook/widgets.hook.tsx b/src/core/hook/widgets.hook.tsx
new file mode 100644
index 0000000..71ca9eb
--- /dev/null
+++ b/src/core/hook/widgets.hook.tsx
@@ -0,0 +1,261 @@
+import { useCallback, useState } from "react";
+import {
+ IwidgetsTotalItem,
+ IwidgetstrendItem,
+ IwidgetsTeaderboardItem,
+ IwidgetsTypeItem,
+ IwidgetsItem,
+} from "@src/service";
+import { API } from "@service/index";
+
+const flatten = (arr: IwidgetsTypeItem[]) => {
+ return arr
+ .reduce((result, item) => {
+ return result.concat(
+ item,
+ item.children && Array.isArray(item.children)
+ ? flatten(
+ item.children.map((subItem: any) => ({
+ ...subItem,
+ pid: item.id,
+ }))
+ )
+ : []
+ );
+ }, [])
+ .sort((a: IwidgetsTypeItem, b: IwidgetsTypeItem) => a.level - b.level);
+};
+
+export function useWidgets() {
+ // 统计
+ const [total, setTotal] = useState<{
+ loading: boolean;
+ datas: IwidgetsTotalItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getTotal = useCallback(() => {
+ setTotal((state) => ({
+ ...state,
+ loading: true,
+ }));
+ API.widgetsService
+ .total()
+ .then((res) => {
+ setTimeout(() => {
+ setTotal({
+ loading: false,
+ datas: res.data,
+ });
+ }, 3000);
+ })
+ .catch(() => {
+ setTotal((state) => ({
+ ...state,
+ loading: false,
+ }));
+ });
+ }, []);
+
+ // 新增组件统计图
+ const [trend, setTrend] = useState<{
+ loading: boolean;
+ datas: IwidgetstrendItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getTrend = useCallback(() => {
+ setTrend((state) => ({
+ ...state,
+ loading: true,
+ }));
+ API.widgetsService
+ .trendChart()
+ .then((res) => {
+ setTimeout(() => {
+ setTrend({
+ loading: false,
+ datas: res.data,
+ });
+ }, 2000);
+ })
+ .catch(() => {
+ setTrend((state) => ({
+ ...state,
+ loading: false,
+ }));
+ });
+ }, []);
+
+ // 使用排行榜TOP8
+ const [leaderboard, setLeaderboard] = useState<{
+ loading: boolean;
+ datas: IwidgetsTeaderboardItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getLeaderboard = useCallback(() => {
+ setLeaderboard((state) => ({
+ ...state,
+ loading: true,
+ }));
+ API.widgetsService
+ .leaderboard()
+ .then((res) => {
+ setTimeout(() => {
+ setLeaderboard({
+ loading: false,
+ datas: res.data.sort((a, b) => a.value - b.value),
+ });
+ }, 2000);
+ })
+ .catch(() => {
+ setLeaderboard((state) => ({
+ ...state,
+ loading: false,
+ }));
+ });
+ }, []);
+
+ // 获取组件类型
+ const [types, setTypes] = useState<{
+ loading: boolean;
+ datas: IwidgetsTypeItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getTypes = useCallback(async () => {
+ setTypes((state) => ({
+ ...state,
+ loading: true,
+ }));
+ try {
+ const { data } = await API.widgetsService.types();
+ const datas: IwidgetsTypeItem[] = flatten(data);
+ if (datas.length) {
+ const selects = new Array(datas[datas.length - 1].level).fill("");
+ selects[0] = data[0].id;
+ setTypes({
+ loading: false,
+ datas: datas,
+ });
+ // 设置类型参数个数
+ setList((state) => ({
+ ...state,
+ params: {
+ ...state.params,
+ type: selects,
+ },
+ }));
+ }
+ } catch (e) {
+ setTypes((state) => ({
+ ...state,
+ loading: false,
+ }));
+ }
+ }, []);
+
+ // 获取组件列表
+ const [list, setList] = useState<{
+ loading: boolean;
+ datas: IwidgetsItem[];
+ searchDatas: IwidgetsItem[];
+ params: {
+ type: string[];
+ };
+ }>({
+ loading: false,
+ datas: [],
+ searchDatas: [],
+ params: {
+ type: [],
+ },
+ });
+
+ const listSearchHandler = useCallback(
+ (field: string, value: any, index?: number) => {
+ switch (field) {
+ case "type": {
+ setList((state) => {
+ const arr = [...state.params.type];
+ arr[index as number] = value;
+ if (index === 0) {
+ const item = types.datas.find((item) => item.id === value);
+ if (item && item.children) {
+ arr[(index as number) + 1] = item.children[0].id;
+ } else {
+ arr[(index as number) + 1] = "";
+ }
+ }
+ const selects: string[] = new Array(arr.length).fill("");
+ for (let i = 0; i < arr.length; i++) {
+ const item = types.datas.find((item) => item.id === arr[i]);
+ if (item) {
+ selects[i] = item.value;
+ }
+ }
+ return {
+ ...state,
+ searchDatas: state.datas.filter(
+ (item) =>
+ item.level1Type.includes(selects[0]) &&
+ item.level2Type.includes(selects[1])
+ ),
+ params: {
+ ...state.params,
+ type: arr,
+ },
+ };
+ });
+ }
+ }
+ },
+ [types.datas]
+ );
+
+ const getList = useCallback(async () => {
+ setList((state) => ({
+ ...state,
+ loading: true,
+ }));
+ try {
+ const { data } = await API.widgetsService.list();
+ setTimeout(() => {
+ setList((state) => ({
+ ...state,
+ loading: false,
+ datas: data,
+ searchDatas: data,
+ }));
+ }, 1000);
+ } catch (e) {
+ setList((state) => ({
+ ...state,
+ loading: false,
+ }));
+ }
+ }, []);
+
+ return {
+ total,
+ getTotal,
+ trend,
+ getTrend,
+ leaderboard,
+ getLeaderboard,
+ types,
+ listSearchHandler,
+ getTypes,
+ list,
+ getList,
+ };
+}
diff --git a/src/core/theme/index.ts b/src/core/theme/index.ts
new file mode 100644
index 0000000..0d58c8b
--- /dev/null
+++ b/src/core/theme/index.ts
@@ -0,0 +1,66 @@
+import { themes, IThemeName, themeList } from "./themes";
+// import cssVars from "css-vars-ponyfill";
+export * from "./themes";
+// 判断浏览器是否支持cssVar
+const isSupportCssVar =
+ window.CSS && window.CSS.supports && window.CSS.supports("(--a: 0)");
+/**
+ * cssVar格式话
+ * @param themeJson 换肤JSON
+ * @param isJoin 是否转化成JSON
+ * @returns
+ */
+const formatCssVar = (
+ themeJson: Record = {},
+ isJoin = true
+) => {
+ const cssvar = Object.keys(themeJson)
+ .map((item) => `${item}:${themeJson[item]};\n`)
+ .join("");
+ return isJoin ? `:root{\n${cssvar}}` : cssvar;
+};
+/**
+ *
+ * @param variable 换肤JSON
+ * @param selector 换肤style标签
+ * @returns
+ */
+const cssRootVar = (
+ themeJson: Record = {},
+ selector = "style[data-theme='theme']"
+) => {
+ const root = selector
+ ? document.querySelector(selector) || document.createElement("style")
+ : document.createElement("style");
+ console.log(root, "root");
+ root.innerHTML = formatCssVar(themeJson);
+ if (!root.getAttribute("data-theme")) {
+ root.setAttribute("data-theme", "theme");
+ const header = document.head || document.getElementsByName("head")[0];
+ if (!header) return;
+ header.appendChild(root);
+ }
+};
+/**
+ * 设置换肤
+ * @param theme 换肤名称
+ */
+export function setTheme(theme: IThemeName) {
+ if (isSupportCssVar) {
+ cssRootVar(themes[theme]);
+ } else {
+ document.documentElement.setAttribute("data-theme", theme);
+ import("css-vars-ponyfill").then((cssVars) => {
+ cssVars.default({
+ watch: true,
+ variables: themes[theme],
+ onlyLegacy: false,
+ });
+ });
+ }
+}
+
+// 通过主题获取主color
+export function getCurrentPrimaryColor(theme: IThemeName) {
+ return themeList.find((item) => item.name === theme)?.color;
+}
diff --git a/src/core/theme/theme01_dark.ts b/src/core/theme/theme01_dark.ts
new file mode 100644
index 0000000..12d0893
--- /dev/null
+++ b/src/core/theme/theme01_dark.ts
@@ -0,0 +1,32 @@
+// 主题01
+export const theme01_dark = {
+ /* ------------------切换白天夜间模式不变的变量start------------------ */
+ // 主色
+ "--primary-color": "#1677ff",
+ // 主要用于主色背景上的字体颜色
+ "--white": "#fff",
+ /* ------------------切换白天夜间模式不变的变量end------------------ */
+
+ /* ------------------切换白天夜间模式变化的变量start------------------ */
+ // html背景颜色
+ "--html-background-color": "rgba(0,0,0,.85)",
+ // html字体颜色
+ "--html-font-color": "#fff",
+ // 变色主色
+ "--change-primary-color": "#1677ff",
+ // 浅色字体颜色
+ "--light-font-color": "#999",
+ // 更浅色字体颜色
+ "--lighter-font-color": "rgba(255,255,255,.05)",
+ // 浅色模块背景
+ "--module-background-color": "#141414",
+ // 浅色模块背景
+ "--module-light-background-color": "#222",
+ // 深色模块背景
+ "--module-dark-background-color": "#333",
+ // 模块阴影
+ "--module-box-shadow-color": "rgba(0,0,0,.1)",
+ // 边框颜色
+ "--border-color": "#333",
+ /* ------------------切换白天夜间模式变化的变量end------------------ */
+};
diff --git a/src/core/theme/theme01_light.ts b/src/core/theme/theme01_light.ts
new file mode 100644
index 0000000..3f7c1a3
--- /dev/null
+++ b/src/core/theme/theme01_light.ts
@@ -0,0 +1,32 @@
+// 主题01
+export const theme01_light = {
+ /* ------------------切换白天夜间模式不变的变量start------------------ */
+ // 主色
+ "--primary-color": "#1677ff",
+ // 主要用于主色背景上的字体颜色
+ "--white": "#fff",
+ /* ------------------切换白天夜间模式不变的变量end------------------ */
+
+ /* ------------------切换白天夜间模式变化的变量start------------------ */
+ // html背景颜色
+ "--html-background-color": "#eee",
+ // html字体颜色
+ "--html-font-color": "#262626",
+ // 浅色字体颜色
+ "--light-font-color": "#999",
+ // 更浅色字体颜色
+ "--lighter-font-color": "#eee",
+ // 变色主色
+ "--change-primary-color": "#1677ff",
+ // 模块背景
+ "--module-background-color": "#fff",
+ // 浅色模块背景
+ "--module-light-background-color": "#eee",
+ // 深色模块背景
+ "--module-dark-background-color": "#ccc",
+ // 模块阴影
+ "--module-box-shadow-color": "rgba(0,0,0,.05)",
+ // 边框颜色
+ "--border-color": "#ddd",
+ /* ------------------切换白天夜间模式变化的变量end------------------ */
+};
diff --git a/src/core/theme/themes.ts b/src/core/theme/themes.ts
new file mode 100644
index 0000000..a743f59
--- /dev/null
+++ b/src/core/theme/themes.ts
@@ -0,0 +1,31 @@
+import { theme01_light } from "./theme01_light";
+import { theme01_dark } from "./theme01_dark";
+
+type IThemes = {
+ [propName in IThemeName]: {
+ [propName: string]: any;
+ };
+};
+
+export type IThemeName = "theme01_light" | "theme01_dark";
+
+export interface IThemeItem {
+ name: IThemeName;
+ color: string;
+}
+
+export const themeList: IThemeItem[] = [
+ {
+ name: "theme01_light",
+ color: theme01_light["--primary-color"],
+ },
+ {
+ name: "theme01_dark",
+ color: theme01_dark["--primary-color"],
+ },
+];
+
+export const themes: IThemes = {
+ theme01_light,
+ theme01_dark,
+};
diff --git a/src/core/types/constant.ts b/src/core/types/constant.ts
new file mode 100644
index 0000000..e6288d9
--- /dev/null
+++ b/src/core/types/constant.ts
@@ -0,0 +1,4 @@
+// 方向类型
+export type DIRECTION = "vertical" | "horizontal";
+// 移动的最小值
+export const MIN: number = 20;
diff --git a/src/elements/config/base-configuration/animate.ts b/src/elements/config/base-configuration/animate.ts
new file mode 100644
index 0000000..6409248
--- /dev/null
+++ b/src/elements/config/base-configuration/animate.ts
@@ -0,0 +1,129 @@
+const animate = {
+ configureValue: {
+ styleAnimateInfinite: false,
+ styleAnimationDelay: 0,
+ styleAnimationName: "",
+ styleAnimationDuration: 1,
+ styleAnimationTimingFunction: "linear",
+ },
+ configure: [
+ {
+ name: "动画",
+ list: [
+ {
+ componentName: "Select",
+ label: "动画名称",
+ name: "styleAnimationName",
+ required: false,
+ placeholder: "请选择动画",
+ options: [
+ { code: "bounce", name: "bounce" },
+ { code: "flash", name: "flash" },
+ { code: "pulse", name: "pulse" },
+ { code: "rubberBand", name: "rubberBand" },
+ { code: "shake", name: "shake" },
+ { code: "swing", name: "swing" },
+ { code: "tada", name: "tada" },
+ { code: "wobble", name: "wobble" },
+ { code: "bounceIn", name: "bounceIn" },
+ { code: "bounceInDown", name: "bounceInDown" },
+ { code: "bounceInLeft", name: "bounceInLeft" },
+ { code: "bounceInRight", name: "bounceInRight" },
+ { code: "bounceInUp", name: "bounceInUp" },
+ { code: "bounceOut", name: "bounceOut" },
+ { code: "bounceOutDown", name: "bounceOutDown" },
+ { code: "bounceOutLeft", name: "bounceOutLeft" },
+ { code: "bounceOutRight", name: "bounceOutRight" },
+ { code: "bounceOutUp", name: "bounceOutUp" },
+ { code: "fadeIn", name: "fadeIn" },
+ { code: "fadeInDown", name: "fadeInDown" },
+ { code: "fadeInDownBig", name: "fadeInDownBig" },
+ { code: "fadeInLeft", name: "fadeInLeft" },
+ { code: "fadeInLeftBig", name: "fadeInLeftBig" },
+ { code: "fadeInRight", name: "fadeInRight" },
+ { code: "fadeInRightBig", name: "fadeInRightBig" },
+ { code: "fadeInUp", name: "fadeInUp" },
+ { code: "fadeInUpBig", name: "fadeInUpBig" },
+ { code: "fadeOut", name: "fadeOut" },
+ { code: "fadeOutDown", name: "fadeOutDown" },
+ { code: "fadeOutDownBig", name: "fadeOutDownBig" },
+ { code: "fadeOutLeft", name: "fadeOutLeft" },
+ { code: "fadeOutLeftBig", name: "fadeOutLeftBig" },
+ { code: "fadeOutRight", name: "fadeOutRight" },
+ { code: "fadeOutRightBig", name: "fadeOutRightBig" },
+ { code: "fadeOutUp", name: "fadeOutUp" },
+ { code: "fadeOutUpBig", name: "fadeOutUpBig" },
+ { code: "flip", name: "flip" },
+ { code: "flipInX", name: "flipInX" },
+ { code: "flipInY", name: "flipInY" },
+ { code: "flipOutX", name: "flipOutX" },
+ { code: "flipOutY", name: "flipOutY" },
+ { code: "lightSpeedIn", name: "lightSpeedIn" },
+ { code: "lightSpeedOut", name: "lightSpeedOut" },
+ { code: "rotateIn", name: "rotateIn" },
+ { code: "rotate", name: "rotate" },
+ { code: "rotateInDownLeft", name: "rotateInDownLeft" },
+ { code: "rotateInDownRight", name: "rotateInDownRight" },
+ { code: "rotateInUpLeft", name: "rotateInUpLeft" },
+ { code: "rotateInUpRight", name: "rotateInUpRight" },
+ { code: "rotateOut", name: "rotateOut" },
+ { code: "rotateOutDownLeft", name: "rotateOutDownLeft" },
+ { code: "rotateOutDownRight", name: "rotateOutDownRight" },
+ { code: "rotateOutUpLeft", name: "rotateOutUpLeft" },
+ { code: "rotateOutUpRight", name: "rotateOutUpRight" },
+ { code: "slideInDown", name: "slideInDown" },
+ { code: "slideInLeft", name: "slideInLeft" },
+ { code: "slideInRight", name: "slideInRight" },
+ { code: "slideOutLeft", name: "slideOutLeft" },
+ { code: "slideOutRight", name: "slideOutRight" },
+ { code: "slideOutUp", name: "slideOutUp" },
+ { code: "hinge", name: "hinge" },
+ { code: "rollIn", name: "rollIn" },
+ { code: "rollOut", name: "rollOut" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "动画属性",
+ name: "styleAnimationTimingFunction",
+ required: false,
+ placeholder: "请选择时间",
+ options: [
+ { code: "linear", name: "linear" },
+ { code: "ease", name: "ease" },
+ { code: "ease-in", name: "ease-in" },
+ { code: "ease-out", name: "ease-out" },
+ { code: "ease-in-out", name: "ease-in-out" },
+ ],
+ },
+ {
+ componentName: "InputNumber",
+ label: "时间",
+ name: "styleAnimationDuration",
+ required: false,
+ placeholder: "请选择时间",
+ min: 0,
+ max: 100,
+ },
+ {
+ componentName: "InputNumber",
+ label: "延迟",
+ name: "styleAnimationDelay",
+ required: false,
+ placeholder: "请选择延迟时间",
+ min: 0,
+ max: 100,
+ },
+ {
+ componentName: "Switch",
+ label: "循环播放",
+ name: "styleAnimateInfinite",
+ required: false,
+ placeholder: "请选择是否循环播放",
+ },
+ ],
+ },
+ ],
+};
+
+export default animate;
diff --git a/src/elements/config/base-configuration/box.ts b/src/elements/config/base-configuration/box.ts
new file mode 100644
index 0000000..473e932
--- /dev/null
+++ b/src/elements/config/base-configuration/box.ts
@@ -0,0 +1,130 @@
+const box = {
+ configureValue: {
+ styleBoxInset: false,
+ styleBoxShadowX: 0,
+ styleBoxShadowY: 0,
+ styleBoxShadowF: 0,
+ styleBoxShadowC: "",
+ styleBorderStyle: "none",
+ styleBorderWidth: 0,
+ styleBorderColor: "",
+ styleBorderTopLeftRadius: 0,
+ styleBorderTopRightRadius: 0,
+ styleBorderBottomLeftRadius: 0,
+ styleBorderBottomRightRadius: 0,
+ },
+ configure: [
+ {
+ name: "盒子阴影",
+ list: [
+ {
+ componentName: "Switch",
+ label: "内阴影",
+ name: "styleBoxInset",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "InputNumber",
+ label: "X轴偏移",
+ name: "styleBoxShadowX",
+ required: false,
+ placeholder: "请输入X轴偏移",
+ },
+ {
+ componentName: "InputNumber",
+ label: "Y轴偏移",
+ name: "styleBoxShadowY",
+ required: false,
+ placeholder: "请输入Y轴偏移",
+ },
+ {
+ componentName: "InputNumber",
+ label: "模糊值",
+ name: "styleBoxShadowF",
+ required: false,
+ placeholder: "请输入模糊值",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "颜色",
+ name: "styleBoxShadowC",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ ],
+ },
+ {
+ name: "边框",
+ list: [
+ {
+ componentName: "Select",
+ label: "边框样式",
+ name: "styleBorderStyle",
+ required: false,
+ placeholder: "请选择边框样式",
+ options: [
+ { code: "none", name: "无" },
+ { code: "solid", name: "直线" },
+ { code: "dashed", name: "破折线" },
+ { code: "dotted", name: "点状线" },
+ { code: "double", name: "双划线" },
+ { code: "groove", name: "3D凹槽" },
+ { code: "ridge", name: "3D垄状" },
+ { code: "inset", name: "3D内嵌" },
+ { code: "outset", name: "3D外嵌" },
+ ],
+ },
+ {
+ componentName: "InputNumber",
+ label: "边框尺寸",
+ name: "styleBorderWidth",
+ required: false,
+ placeholder: "请输入尺寸",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "颜色",
+ name: "styleBorderColor",
+ required: false,
+ placeholder: "请选择边框颜色",
+ },
+ ],
+ },
+ {
+ name: "圆角",
+ list: [
+ {
+ componentName: "InputNumber",
+ label: "左上",
+ name: "styleBorderTopLeftRadius",
+ required: false,
+ placeholder: "请输入尺寸",
+ },
+ {
+ componentName: "InputNumber",
+ label: "右上",
+ name: "styleBorderTopRightRadius",
+ required: false,
+ placeholder: "请输入尺寸",
+ },
+ {
+ componentName: "InputNumber",
+ label: "左下",
+ name: "styleBorderBottomLeftRadius",
+ required: false,
+ placeholder: "请输入尺寸",
+ },
+ {
+ componentName: "InputNumber",
+ label: "右下",
+ name: "styleBorderBottomRightRadius",
+ required: false,
+ placeholder: "请输入尺寸",
+ },
+ ],
+ },
+ ],
+};
+
+export default box;
diff --git a/src/elements/config/base-configuration/data.ts b/src/elements/config/base-configuration/data.ts
new file mode 100644
index 0000000..72c86e9
--- /dev/null
+++ b/src/elements/config/base-configuration/data.ts
@@ -0,0 +1,77 @@
+const data = {
+ // 数据项默认值
+ configureValue: {
+ useInterface: false,
+ dataType: "mock",
+ mock: {
+ value: "文本框",
+ },
+ url: "",
+ method: "get",
+ field: "value",
+ },
+ // 数据项配置
+ configure: [
+ {
+ componentName: "Switch",
+ label: "使用组数据",
+ name: "useInterface",
+ required: false,
+ placeholder: "",
+ tooltip: "该组件使用组的接口数据",
+ },
+ {
+ componentName: "Select",
+ label: "请求类型",
+ name: "dataType",
+ required: false,
+ placeholder: "",
+ relationFields: "useInterface",
+ relationValues: "false",
+ options: [
+ { code: "mock", name: "mock数据" },
+ { code: "dynamic", name: "接口数据" },
+ ],
+ },
+ {
+ componentName: "JsonEdit",
+ label: "mock数据",
+ name: "mock",
+ required: false,
+ placeholder: "请输入mock数据",
+ relationFields: "dataType,useInterface",
+ relationValues: "mock,false",
+ },
+ {
+ componentName: "TextArea",
+ label: "接口地址",
+ name: "url",
+ required: false,
+ placeholder: "请输入接口地址",
+ relationFields: "dataType,useInterface",
+ relationValues: "dynamic,false",
+ },
+ {
+ componentName: "Select",
+ label: "请求方式",
+ name: "method",
+ required: false,
+ placeholder: "",
+ relationFields: "dataType,useInterface",
+ relationValues: "dynamic,false",
+ options: [
+ { code: "get", name: "GET" },
+ { code: "post", name: "post" },
+ ],
+ },
+ {
+ componentName: "Input",
+ label: "对应字段",
+ name: "field",
+ required: false,
+ placeholder: "",
+ },
+ ],
+};
+
+export default data;
diff --git a/src/elements/config/base-configuration/echarts.ts b/src/elements/config/base-configuration/echarts.ts
new file mode 100644
index 0000000..b5053c8
--- /dev/null
+++ b/src/elements/config/base-configuration/echarts.ts
@@ -0,0 +1,1314 @@
+const echarts = {
+ // 标题配置项值
+ titleValue: {
+ titleTextShow: false,
+ titleText: "",
+ titleTextFontSize: 14,
+ titleTextLineHeight: 1.2,
+ titleTextFontFamily: "Microsoft YaHei",
+ titleTextFontWeight: "bold",
+ titleTextColor: "#fff",
+ },
+ // 标题配置项
+ title: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "titleTextShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Input",
+ label: "主标题",
+ name: "titleText",
+ required: false,
+ placeholder: "请输入主标题",
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ },
+ {
+ componentName: "InputNumber",
+ label: "字体大小",
+ name: "titleTextFontSize",
+ required: false,
+ min: 12,
+ placeholder: "",
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ },
+ {
+ componentName: "InputNumber",
+ label: "行高",
+ name: "titleTextLineHeight",
+ required: false,
+ placeholder: "",
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ },
+ {
+ componentName: "Select",
+ label: "字体样式",
+ name: "titleTextFontFamily",
+ required: false,
+ placeholder: "",
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ options: [
+ { code: "SimSun", name: "宋体" },
+ { code: "KaiTi", name: "楷体" },
+ { code: "Microsoft YaHei", name: "微软雅黑" },
+ { code: "STHeiti", name: "华文黑体" },
+ { code: "arial", name: "无衬线体" },
+ { code: "serif", name: "有衬线体" },
+ { code: "cursive", name: "草书" },
+ { code: "monospace", name: "等宽字体" },
+ { code: "courier", name: "打印字体" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "文字粗细",
+ name: "titleTextFontWeight",
+ required: false,
+ placeholder: "",
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ options: [
+ { code: "normal", name: "正常" },
+ { code: "bold", name: "粗体" },
+ { code: "bolder", name: "特粗体" },
+ { code: "lighter", name: "细体" },
+ ],
+ },
+ {
+ componentName: "SketchPicker",
+ label: "字体颜色",
+ name: "titleTextColor",
+ required: false,
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ placeholder: "请选择字体颜色",
+ },
+ {
+ componentName: "Select",
+ label: "字体样式",
+ name: "titleTextFontFamily",
+ required: false,
+ placeholder: "",
+ relationFields: "titleTextShow",
+ relationValues: "true",
+ options: [
+ { code: "SimSun", name: "宋体" },
+ { code: "KaiTi", name: "楷体" },
+ { code: "Microsoft YaHei", name: "微软雅黑" },
+ { code: "STHeiti", name: "华文黑体" },
+ { code: "arial", name: "无衬线体" },
+ { code: "serif", name: "有衬线体" },
+ { code: "cursive", name: "草书" },
+ { code: "monospace", name: "等宽字体" },
+ { code: "courier", name: "打印字体" },
+ ],
+ },
+ ],
+ // 图例配置项值
+ legendValue: {
+ legendShow: true,
+ legendType: "plain",
+ legendOrient: "horizontal",
+ legendFontSize: 12,
+ legendIcon: "rect",
+ legendColor: "#fff",
+ legendLeft: "center",
+ legendTop: "top",
+ },
+ // 图例配置项
+ legend: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "legendShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "字体颜色",
+ name: "legendColor",
+ required: false,
+ relationFields: "legendShow",
+ relationValues: "true",
+ placeholder: "请选择字体颜色",
+ },
+ {
+ componentName: "InputNumber",
+ label: "字体大小",
+ name: "legendFontSize",
+ required: false,
+ min: 12,
+ placeholder: "",
+ relationFields: "legendShow",
+ relationValues: "true",
+ },
+ {
+ componentName: "Select",
+ label: "图例类型",
+ name: "legendType",
+ required: false,
+ placeholder: "",
+ relationFields: "legendShow",
+ relationValues: "true",
+ options: [
+ { code: "plain", name: "普通图例" },
+ { code: "scroll", name: "可滚动翻页的图例" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "排列方式",
+ name: "legendOrient",
+ required: false,
+ placeholder: "",
+ relationFields: "legendShow",
+ relationValues: "true",
+ options: [
+ { code: "horizontal", name: "水平" },
+ { code: "vertical", name: "垂直" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "图标样式",
+ name: "legendIcon",
+ required: false,
+ placeholder: "",
+ relationFields: "legendShow",
+ relationValues: "true",
+ options: [
+ { code: "circle", name: "circle" },
+ { code: "rect", name: "rect" },
+ { code: "roundRect", name: "roundRect" },
+ { code: "triangle", name: "triangle" },
+ { code: "diamond", name: "diamond" },
+ { code: "pin", name: "pin" },
+ { code: "arrow", name: "arrow" },
+ { code: "none", name: "none" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "水平位置",
+ name: "legendLeft",
+ required: false,
+ placeholder: "",
+ relationFields: "legendShow",
+ relationValues: "true",
+ options: [
+ { code: "left", name: "居左" },
+ { code: "center", name: "居中" },
+ { code: "right", name: "居右" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "垂直位置",
+ name: "legendTop",
+ required: false,
+ placeholder: "",
+ relationFields: "legendShow",
+ relationValues: "true",
+ options: [
+ { code: "top", name: "居上" },
+ { code: "middle", name: "居中" },
+ { code: "bottom", name: "居下" },
+ ],
+ },
+ ],
+ // 风格配置项值
+ gridValue: {
+ gridShow: false,
+ gridLeft: 50,
+ gridRight: 30,
+ gridTop: 30,
+ gridBottom: 30,
+ gridBorderColor: "#ccc",
+ },
+ // 网格配置
+ grid: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "gridShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "左边距",
+ name: "gridLeft",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "右边距",
+ name: "gridRight",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "上边距",
+ name: "gridTop",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "下边距",
+ name: "gridBottom",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "边框颜色",
+ name: "gridBorderColor",
+ required: false,
+ relationFields: "gridShow",
+ relationValues: "true",
+ placeholder: "请选择边框颜色",
+ },
+ ],
+ // xAxis配置项值
+ xAxisValue: {
+ xAxisShow: true,
+ xAxisType: "category",
+ xAxisName: "",
+ xAxisNameLocation: "end",
+ xAxisNameTextStyleFontSize: 12,
+ xAxisNameTextStyleLineHeight: 12,
+ xAxisNameTextStyleFontFamily: "serif",
+ xAxisNameTextStyleFontWeight: "normal",
+ xAxisBoundaryGap: false,
+ xAxisNameRotate: 0,
+ xAxisLineShow: true,
+ xAxisLabelShow: true,
+ xAxisLabelRotate: 0,
+ xAxisSplitLineShow: true,
+ xAxisSplitAreaShow: false,
+ xAxisSplitAreaOpacity: 10,
+ xAxisPointerShow: true,
+ xAxisTickShow: true,
+ xAxisAlignWithLabel: false,
+ },
+ // xAsix配置
+ xAxis: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "坐标轴类型",
+ name: "xAxisType",
+ required: false,
+ placeholder: "请选择",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ options: [
+ { code: "value", name: "数值轴" },
+ { code: "category", name: "类目轴" },
+ { code: "time", name: "时间轴" },
+ { code: "log", name: "对数轴" },
+ ],
+ },
+ {
+ componentName: "Switch",
+ label: "是否留白",
+ name: "xAxisBoundaryGap",
+ required: false,
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ placeholder: "请输入",
+ },
+ [
+ {
+ name: "坐标轴名称",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Input",
+ label: "名称",
+ name: "xAxisName",
+ required: false,
+ placeholder: "请输入",
+ },
+ {
+ componentName: "Slider",
+ label: "旋转",
+ name: "xAxisNameRotate",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "显示位置",
+ name: "xAxisNameLocation",
+ required: false,
+ placeholder: "请选择",
+ options: [
+ { code: "start", name: "start" },
+ { code: "middle", name: "middle" },
+ { code: "end", name: "end" },
+ ],
+ },
+ {
+ componentName: "InputNumber",
+ label: "字体大小",
+ name: "xAxisNameTextStyleFontSize",
+ required: false,
+ min: 12,
+ placeholder: "",
+ },
+ {
+ componentName: "InputNumber",
+ label: "行高",
+ name: "xAxisNameTextStyleLineHeight",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "字体样式",
+ name: "xAxisNameTextStyleFontFamily",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "SimSun", name: "宋体" },
+ { code: "KaiTi", name: "楷体" },
+ { code: "Microsoft YaHei", name: "微软雅黑" },
+ { code: "STHeiti", name: "华文黑体" },
+ { code: "arial", name: "无衬线体" },
+ { code: "serif", name: "有衬线体" },
+ { code: "cursive", name: "草书" },
+ { code: "monospace", name: "等宽字体" },
+ { code: "courier", name: "打印字体" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "文字粗细",
+ name: "xAxisNameTextStyleFontWeight",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "normal", name: "正常" },
+ { code: "bold", name: "粗体" },
+ { code: "bolder", name: "特粗体" },
+ { code: "lighter", name: "细体" },
+ ],
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴轴线",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisLineShow",
+ required: false,
+ placeholder: "请输入",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴刻度",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisTickShow",
+ required: false,
+ placeholder: "请输入",
+ },
+ {
+ componentName: "Switch",
+ label: "对齐标签",
+ name: "xAxisAlignWithLabel",
+ required: false,
+ relationFields: "xAxisTickShow",
+ relationValues: "true",
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴刻度标签",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisLabelShow",
+ required: false,
+ placeholder: "请输入",
+ },
+ {
+ componentName: "Slider",
+ label: "旋转",
+ name: "xAxisLabelRotate",
+ required: false,
+ relationFields: "xAxisLabelShow",
+ relationValues: "true",
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴分隔线",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisSplitLineShow",
+ required: false,
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴分隔区域",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisSplitAreaShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "透明度",
+ name: "xAxisSplitAreaOpacity",
+ required: false,
+ relationFields: "xAxisSplitAreaShow",
+ relationValues: "true",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴指示器",
+ relationFields: "xAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "xAxisPointerShow",
+ required: false,
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ ],
+ // yAxis配置项值
+ yAxisValue: {
+ yAxisShow: true,
+ yAxisType: "value",
+ yAxisName: "",
+ yAxisNameLocation: "end",
+ yAxisNameTextStyleFontSize: 12,
+ yAxisNameTextStyleLineHeight: 12,
+ yAxisNameTextStyleFontFamily: "serif",
+ yAxisNameTextStyleFontWeight: "normal",
+ yAxisBoundaryGap: false,
+ yAxisNameRotate: 0,
+ yAxisLineShow: true,
+ yAxisLabelShow: true,
+ yAxisLabelRotate: 0,
+ yAxisSplitLineShow: true,
+ yAxisSplitAreaShow: false,
+ yAxisSplitAreaOpacity: 10,
+ yAxisPointerShow: false,
+ yAxisTickShow: true,
+ yAxisAlignWithLabel: false,
+ },
+ // yAxis配置项
+ yAxis: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "坐标轴类型",
+ name: "yAxisType",
+ required: false,
+ placeholder: "请选择",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ options: [
+ { code: "value", name: "数值轴" },
+ { code: "category", name: "类目轴" },
+ { code: "time", name: "时间轴" },
+ { code: "log", name: "对数轴" },
+ ],
+ },
+ {
+ componentName: "Switch",
+ label: "是否留白",
+ name: "yAxisBoundaryGap",
+ required: false,
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ placeholder: "请输入",
+ },
+ [
+ {
+ name: "坐标轴名称",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Input",
+ label: "名称",
+ name: "yAxisName",
+ required: false,
+ placeholder: "请输入",
+ },
+ {
+ componentName: "Slider",
+ label: "旋转",
+ name: "yAxisNameRotate",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "显示位置",
+ name: "yAxisNameLocation",
+ required: false,
+ placeholder: "请选择",
+ options: [
+ { code: "start", name: "start" },
+ { code: "middle", name: "middle" },
+ { code: "end", name: "end" },
+ ],
+ },
+ {
+ componentName: "InputNumber",
+ label: "字体大小",
+ name: "yAxisNameTextStyleFontSize",
+ required: false,
+ min: 12,
+ placeholder: "",
+ },
+ {
+ componentName: "InputNumber",
+ label: "行高",
+ name: "yAxisNameTextStyleLineHeight",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "字体样式",
+ name: "yAxisNameTextStyleFontFamily",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "SimSun", name: "宋体" },
+ { code: "KaiTi", name: "楷体" },
+ { code: "Microsoft YaHei", name: "微软雅黑" },
+ { code: "STHeiti", name: "华文黑体" },
+ { code: "arial", name: "无衬线体" },
+ { code: "serif", name: "有衬线体" },
+ { code: "cursive", name: "草书" },
+ { code: "monospace", name: "等宽字体" },
+ { code: "courier", name: "打印字体" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "文字粗细",
+ name: "yAxisNameTextStyleFontWeight",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "normal", name: "正常" },
+ { code: "bold", name: "粗体" },
+ { code: "bolder", name: "特粗体" },
+ { code: "lighter", name: "细体" },
+ ],
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴轴线",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisLineShow",
+ required: false,
+ placeholder: "请输入",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴刻度",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisTickShow",
+ required: false,
+ placeholder: "请输入",
+ },
+ {
+ componentName: "Switch",
+ label: "对齐标签",
+ name: "yAxisAlignWithLabel",
+ required: false,
+ relationFields: "yAxisTickShow",
+ relationValues: "true",
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴刻度标签",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisLabelShow",
+ required: false,
+ placeholder: "请输入",
+ },
+ {
+ componentName: "Slider",
+ label: "旋转",
+ name: "yAxisLabelRotate",
+ required: false,
+ relationFields: "yAxisLabelShow",
+ relationValues: "true",
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴分隔线",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisSplitLineShow",
+ required: false,
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴分隔区域",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisSplitAreaShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "透明度",
+ name: "yAxisSplitAreaOpacity",
+ required: false,
+ relationFields: "yAxisSplitAreaShow",
+ relationValues: "true",
+ },
+ ],
+ },
+ ],
+ [
+ {
+ name: "坐标轴指示器",
+ relationFields: "yAxisShow",
+ relationValues: "true",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "yAxisPointerShow",
+ required: false,
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ ],
+ // 颜色值
+ echartColorValue: {
+ axisNameColor: "rgba(255,255,255,.2)",
+ axisLineColor: "rgba(255,255,255,.2)",
+ axisLabelColor: "rgba(255,255,255,.8)",
+ splitLineColor: "rgba(255,255,255,.2)",
+ axisPointerColor: "red",
+ themeColor1: "#fc97af",
+ themeColor2: "#87f7cf",
+ themeColor3: "#f7f494",
+ themeColor4: "#72ccff",
+ themeColor5: "#f7c5a0",
+ themeColor6: "#d4a4eb",
+ themeColor7: "#d2f5a6",
+ themeColor8: "#76f2f2",
+ },
+ // 颜色配置
+ echartColor: [
+ {
+ componentName: "SketchPicker",
+ label: "坐标名称颜色",
+ name: "axisNameColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "轴线颜色",
+ name: "axisLineColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "刻度标签颜色",
+ name: "axisLabelColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "分隔线颜色",
+ name: "splitLineColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "指示器颜色",
+ name: "axisPointerColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ [
+ {
+ name: "主题色",
+ list: [
+ {
+ componentName: "SketchPicker",
+ label: "系列一",
+ name: "themeColor1",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列二",
+ name: "themeColor2",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列三",
+ name: "themeColor3",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列四",
+ name: "themeColor4",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列五",
+ name: "themeColor5",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列六",
+ name: "themeColor6",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列七",
+ name: "themeColor7",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "系列八",
+ name: "themeColor8",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ ],
+ },
+ ],
+ ],
+ // 标记配置项值
+ symbolValue: {
+ showSymbol: true,
+ symbol: "circle",
+ symbolSize: 4,
+ },
+ symbol: [
+ {
+ name: "标记",
+ list: [
+ {
+ componentName: "Switch",
+ label: "显示标记",
+ name: "showSymbol",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "标记图标",
+ name: "symbol",
+ required: false,
+ placeholder: "请选择标记图标",
+ relationFields: "showSymbol",
+ relationValues: "true",
+ options: [
+ { code: "circle", name: "circle" },
+ { code: "rect", name: "rect" },
+ { code: "roundRect", name: "roundRect" },
+ { code: "triangle", name: "triangle" },
+ { code: "diamond", name: "diamond" },
+ { code: "pin", name: "pin" },
+ { code: "arrow", name: "arrow" },
+ { code: "none", name: "none" },
+ ],
+ },
+ {
+ componentName: "Slider",
+ label: "标记大小",
+ name: "symbolSize",
+ required: false,
+ relationFields: "showSymbol",
+ relationValues: "true",
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ // 折线配置项值
+ lineValue: {
+ lineWidth: 2,
+ lineSmooth: false,
+ lineAreaStyle: false,
+ lineAreaStyleOpacity: 70,
+ },
+ // 折线配置项
+ line: [
+ {
+ componentName: "Switch",
+ label: "平滑曲线",
+ name: "lineSmooth",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "线条宽度",
+ name: "lineWidth",
+ required: false,
+ placeholder: "",
+ },
+ [
+ {
+ name: "区域面积图",
+ list: [
+ {
+ componentName: "Switch",
+ label: "区域面积图",
+ name: "lineAreaStyle",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "透明度",
+ name: "lineAreaStyleOpacity",
+ required: false,
+ relationFields: "lineAreaStyle",
+ relationValues: "true",
+ placeholder: "",
+ },
+ ],
+ },
+ ],
+ ],
+ // 柱状图配置项值
+ barValue: {
+ barWidth: 40,
+ barShowBackground: false,
+ barBorderRadius: 0,
+ barBackgroundStyleColor: "rgba(255,255,255, 0.1)",
+ barBackgroundStyleBorderColor: "",
+ barBackgroundStyleBorderWidth: 0,
+ barBackgroundStyleBorderType: "solid",
+ },
+ // 柱状图配置项
+ bar: [
+ {
+ componentName: "Slider",
+ label: "柱状宽度",
+ name: "barWidth",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "圆角大小",
+ name: "barBorderRadius",
+ required: false,
+ placeholder: "",
+ },
+ [
+ {
+ name: "柱条背景",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "barShowBackground",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "背景颜色",
+ name: "barBackgroundStyleColor",
+ required: false,
+ placeholder: "请选择颜色",
+ relationFields: "barShowBackground",
+ relationValues: "true",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "边框颜色",
+ name: "barBackgroundStyleBorderColor",
+ required: false,
+ placeholder: "请选择颜色",
+ relationFields: "barShowBackground",
+ relationValues: "true",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "边框大小",
+ name: "barBackgroundStyleBorderWidth",
+ required: false,
+ placeholder: "请选择颜色",
+ relationFields: "barShowBackground",
+ relationValues: "true",
+ },
+ {
+ componentName: "Select",
+ label: "描边类型",
+ name: "barBackgroundStyleBorderType",
+ required: false,
+ placeholder: "请选择标签的位置",
+ relationFields: "barShowBackground",
+ relationValues: "true",
+ options: [
+ { code: "dashed", name: "dashed" },
+ { code: "dotted", name: "dotted" },
+ ],
+ },
+ ],
+ },
+ ],
+ ],
+ // 数据标签配置项值
+ seriesLabelValue: {
+ seriesLabelShow: false,
+ seriesLabelPosition: "top",
+ seriesLabelColor: "#fff",
+ },
+ // 数据标签配置项
+ seriesLabel: [
+ {
+ name: "图形上的文本标签",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "seriesLabelShow",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "标签的位置",
+ name: "seriesLabelPosition",
+ required: false,
+ placeholder: "请选择标签的位置",
+ relationFields: "seriesLabelShow",
+ relationValues: "true",
+ options: [
+ { code: "top", name: "top" },
+ { code: "left", name: "left" },
+ { code: "right", name: "right" },
+ { code: "bottom", name: "bottom" },
+ { code: "inside", name: "inside" },
+ { code: "insideLeft", name: "insideLeft" },
+ { code: "insideRight", name: "insideRight" },
+ { code: "insideTop", name: "insideTop" },
+ { code: "insideBottom", name: "insideBottom" },
+ { code: "insideTopLeft", name: "insideTopLeft" },
+ { code: "insideBottomLeft", name: "insideBottomLeft" },
+ { code: "insideTopRight", name: "insideTopRight" },
+ { code: "insideBottomRight", name: "insideinsideBottomRightTop" },
+ ],
+ },
+ {
+ componentName: "SketchPicker",
+ label: "文字颜色",
+ name: "seriesLabelColor",
+ required: false,
+ relationFields: "seriesLabelShow",
+ relationValues: "true",
+ placeholder: "请选择文字颜色",
+ },
+ ],
+ },
+ ],
+ // 数据堆叠配置项
+ seriesStackValue: {
+ seriesStackValue: "",
+ },
+ seriesStack: [
+ {
+ componentName: "Input",
+ label: "数据堆积名称",
+ name: "seriesStackValue",
+ required: false,
+ placeholder: "请输入数据堆积名称",
+ },
+ ],
+ // 饼图配置项值
+ pieValue: {
+ seriesInsideRadius: 0,
+ seriesAutsideRadius: 80,
+ seriesRoseType: false,
+ },
+ // 饼图配置项
+ pie: [
+ {
+ componentName: "Slider",
+ label: "内半径",
+ name: "seriesInsideRadius",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Slider",
+ label: "外半径",
+ name: "seriesAutsideRadius",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Switch",
+ label: "南丁格尔图",
+ name: "seriesRoseType",
+ required: false,
+ placeholder: "",
+ },
+ ],
+ // 雷达图配置项值
+ radarValue: {
+ radarShape: "polygon",
+ radarRadius: 75,
+ radarAxisLinelColor: "rgba(255,255,255,.8)",
+ radarSplitLineColor: "rgba(255,255,255,.05)",
+ radarSplitAreaOddColor: "rgba(250,250,250,0.3)",
+ radarSplitAreaEvenColor: "rgba(200,200,200,0.3)",
+ },
+ // 雷达图配置项
+ radar: [
+ {
+ componentName: "Select",
+ label: "绘制类型",
+ name: "radarShape",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "polygon", name: "polygon" },
+ { code: "circle", name: "circle" },
+ ],
+ },
+ {
+ componentName: "Slider",
+ label: "半径",
+ name: "radarRadius",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "轴线颜色",
+ name: "radarAxisLinelColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "分隔线颜色",
+ name: "radarSplitLineColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ [
+ {
+ name: "分隔区域颜色",
+ list: [
+ {
+ componentName: "SketchPicker",
+ label: "奇数行",
+ name: "radarSplitAreaOddColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "偶数行",
+ name: "radarSplitAreaEvenColor",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ ],
+ },
+ ],
+ ],
+ // 漏斗图配置项值
+ funnelValue: {
+ funnelOrient: "vertical",
+ funnelSort: "descending",
+ funnelGap: 0,
+ },
+ // 漏斗图配置
+ funnel: [
+ {
+ componentName: "Select",
+ label: "漏斗图朝向",
+ name: "funnelOrient",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "vertical", name: "vertical" },
+ { code: "horizontal", name: "horizontal" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "数据排序",
+ name: "funnelSort",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "ascending", name: "ascending" },
+ { code: "descending", name: "descending" },
+ { code: "none", name: "none" },
+ ],
+ },
+ {
+ componentName: "Slider",
+ label: "图形间距",
+ name: "funnelGap",
+ required: false,
+ placeholder: "",
+ },
+ ],
+ // 散点图配置项值
+ scatterValue: {
+ scatterColorBy: "data",
+ },
+ scatter: [
+ {
+ componentName: "Select",
+ label: "取色的策略",
+ name: "scatterColorBy",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "series", name: "series" },
+ { code: "data", name: "data" },
+ ],
+ },
+ ],
+};
+
+export default echarts;
diff --git a/src/elements/config/base-configuration/font.ts b/src/elements/config/base-configuration/font.ts
new file mode 100644
index 0000000..760e0c6
--- /dev/null
+++ b/src/elements/config/base-configuration/font.ts
@@ -0,0 +1,95 @@
+const font = {
+ configureValue: {
+ styleFontSize: 26,
+ styleLetterSpacing: 0,
+ styleFontWeight: "normal",
+ styleTextAlign: "center",
+ styleBackgroundColor: "",
+ styleFontFamily: "Microsoft YaHei",
+ styleLineHeight: 1,
+ styleColor: "#fff",
+ },
+ configure: [
+ {
+ componentName: "InputNumber",
+ label: "字体大小",
+ name: "styleFontSize",
+ required: false,
+ min: 12,
+ placeholder: "",
+ },
+ {
+ componentName: "InputNumber",
+ label: "字体间距",
+ name: "styleLetterSpacing",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "InputNumber",
+ label: "行高",
+ name: "styleLineHeight",
+ required: false,
+ placeholder: "",
+ },
+ {
+ componentName: "Select",
+ label: "字体样式",
+ name: "styleFontFamily",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "SimSun", name: "宋体" },
+ { code: "KaiTi", name: "楷体" },
+ { code: "Microsoft YaHei", name: "微软雅黑" },
+ { code: "STHeiti", name: "华文黑体" },
+ { code: "arial", name: "无衬线体" },
+ { code: "serif", name: "有衬线体" },
+ { code: "cursive", name: "草书" },
+ { code: "monospace", name: "等宽字体" },
+ { code: "courier", name: "打印字体" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "文字粗细",
+ name: "styleFontWeight",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "normal", name: "正常" },
+ { code: "bold", name: "粗体" },
+ { code: "bolder", name: "特粗体" },
+ { code: "lighter", name: "细体" },
+ ],
+ },
+ {
+ componentName: "Select",
+ label: "对齐方式",
+ name: "styleTextAlign",
+ required: false,
+ placeholder: "",
+ options: [
+ { code: "center", name: "居中" },
+ { code: "left", name: "左对齐" },
+ { code: "right", name: "右对齐" },
+ ],
+ },
+ {
+ componentName: "SketchPicker",
+ label: "字体颜色",
+ name: "styleColor",
+ required: false,
+ placeholder: "请选择字体颜色",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "背景颜色",
+ name: "styleBackgroundColor",
+ required: false,
+ placeholder: "请选择背景颜色",
+ },
+ ],
+};
+
+export default font;
diff --git a/src/elements/config/base-configuration/index.ts b/src/elements/config/base-configuration/index.ts
new file mode 100644
index 0000000..97815f4
--- /dev/null
+++ b/src/elements/config/base-configuration/index.ts
@@ -0,0 +1,26 @@
+// 页面
+import page from "./page";
+// 动画
+import animate from "./animate";
+// 数据
+import data from "./data";
+// 字体
+import font from "./font";
+// 盒子
+import box from "./box";
+// 图表
+import echarts from "./echarts";
+// 图表
+import widget from "./widget";
+
+const baseConfiguration = {
+ page,
+ animate,
+ data,
+ font,
+ echarts,
+ box,
+ widget,
+};
+
+export default baseConfiguration;
diff --git a/src/elements/config/base-configuration/layout.ts b/src/elements/config/base-configuration/layout.ts
new file mode 100644
index 0000000..7b55fbf
--- /dev/null
+++ b/src/elements/config/base-configuration/layout.ts
@@ -0,0 +1,16 @@
+const layout = {
+ configureValue: {
+ styleFlexBasis: "",
+ },
+ configure: [
+ {
+ componentName: "Input",
+ label: "主轴尺寸",
+ name: "styleFlexBasis",
+ required: false,
+ placeholder: "",
+ },
+ ],
+};
+
+export default layout;
diff --git a/src/elements/config/base-configuration/page.ts b/src/elements/config/base-configuration/page.ts
new file mode 100644
index 0000000..b5487e9
--- /dev/null
+++ b/src/elements/config/base-configuration/page.ts
@@ -0,0 +1,109 @@
+const page = {
+ type: "page",
+ label: "页面配置",
+ configure: [
+ {
+ componentName: "Input",
+ label: "项目名称",
+ name: "projectName",
+ required: false,
+ placeholder: "请输入项目名称",
+ },
+ {
+ componentName: "InputNumber",
+ label: "屏幕宽度",
+ name: "width",
+ required: false,
+ placeholder: "请输入屏幕宽度",
+ min: 1366,
+ max: 5000,
+ },
+ {
+ componentName: "InputNumber",
+ label: "屏幕高度",
+ name: "height",
+ required: false,
+ placeholder: "请输入屏幕高度",
+ min: 768,
+ max: 3000,
+ },
+ {
+ componentName: "InputNumber",
+ label: "横几屏",
+ name: "horizontalNumber",
+ required: false,
+ min: 1,
+ max: 6,
+ placeholder: "请输入横几屏",
+ },
+ {
+ componentName: "InputNumber",
+ label: "竖几屏",
+ min: 1,
+ max: 6,
+ name: "verticalNumber",
+ required: false,
+ placeholder: "请输入竖几屏",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "背景颜色",
+ name: "backgroundColor",
+ required: false,
+ placeholder: "请选择背景颜色",
+ },
+ {
+ componentName: "Input",
+ label: "背景图片",
+ name: "backgroundImage",
+ required: false,
+ placeholder: "请输入背景图片地址",
+ },
+ {
+ componentName: "Input",
+ label: "标题",
+ name: "title",
+ require: false,
+ placeholder: "请输入标题",
+ },
+ {
+ componentName: "TextArea",
+ label: "大屏简介",
+ name: "description",
+ required: false,
+ placeholder: "请输入大屏简介",
+ },
+ [
+ {
+ name: "屏幕辅助线",
+ list: [
+ {
+ componentName: "Switch",
+ label: "是否显示",
+ name: "showAuxiliary",
+ required: false,
+ placeholder: "请选择是否显示",
+ },
+ {
+ componentName: "InputNumber",
+ label: "屏幕间隔",
+ min: 0,
+ max: 20,
+ name: "interval",
+ required: false,
+ placeholder: "请输入竖几屏",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "线颜色",
+ name: "auxiliaryBorderColor",
+ required: false,
+ placeholder: "请选择网络线颜色",
+ },
+ ],
+ },
+ ],
+ ],
+};
+
+export default page;
diff --git a/src/elements/config/base-configuration/widget.ts b/src/elements/config/base-configuration/widget.ts
new file mode 100644
index 0000000..ee0b187
--- /dev/null
+++ b/src/elements/config/base-configuration/widget.ts
@@ -0,0 +1,27 @@
+import box from "./box";
+
+const widget = {
+ configureValue: {
+ ...box.configureValue,
+ styleBackgroundColor: "",
+ },
+ configure: [
+ {
+ componentName: "Input",
+ label: "背景图",
+ name: "styleBackgroundUrl",
+ required: false,
+ placeholder: "请输入背景图地址",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "背景颜色",
+ name: "styleBackgroundColor",
+ required: false,
+ placeholder: "",
+ },
+ [...box.configure],
+ ],
+};
+
+export default widget;
diff --git a/src/elements/config/elements-type-configuration/index.ts b/src/elements/config/elements-type-configuration/index.ts
new file mode 100644
index 0000000..2535dc0
--- /dev/null
+++ b/src/elements/config/elements-type-configuration/index.ts
@@ -0,0 +1,8 @@
+// text配置
+import text from "./text";
+
+const elementsConfiguration: any = {
+ ...text,
+};
+
+export default elementsConfiguration;
diff --git a/src/elements/config/elements-type-configuration/text/base-text.ts b/src/elements/config/elements-type-configuration/text/base-text.ts
new file mode 100644
index 0000000..705db8e
--- /dev/null
+++ b/src/elements/config/elements-type-configuration/text/base-text.ts
@@ -0,0 +1,49 @@
+import baseConfiguration from "../../base-configuration";
+const { font, animate, data, box } = baseConfiguration;
+
+const baseText = {
+ // 基础配置项
+ configure: [
+ ...font.configure,
+ [
+ ...animate.configure,
+ {
+ name: "文字阴影",
+ list: [
+ {
+ componentName: "InputNumber",
+ label: "X轴偏移",
+ name: "styleTextShadowX",
+ required: false,
+ placeholder: "请输入X轴偏移",
+ },
+ {
+ componentName: "InputNumber",
+ label: "Y轴偏移",
+ name: "styleTextShadowY",
+ required: false,
+ placeholder: "请输入Y轴偏移",
+ },
+ {
+ componentName: "InputNumber",
+ label: "模糊值",
+ name: "styleTextShadowF",
+ required: false,
+ placeholder: "请输入模糊值",
+ },
+ {
+ componentName: "SketchPicker",
+ label: "颜色",
+ name: "styleTextShadowC",
+ required: false,
+ placeholder: "请选择颜色",
+ },
+ ],
+ },
+ ...box.configure,
+ ],
+ ],
+ data: data.configure,
+};
+
+export default baseText;
diff --git a/src/elements/config/elements-type-configuration/text/index.ts b/src/elements/config/elements-type-configuration/text/index.ts
new file mode 100644
index 0000000..7d092b6
--- /dev/null
+++ b/src/elements/config/elements-type-configuration/text/index.ts
@@ -0,0 +1,8 @@
+// 基础文本
+import baseText from "./base-text";
+
+const text = {
+ baseText,
+};
+
+export default text;
diff --git a/src/elements/config/elements/index.ts b/src/elements/config/elements/index.ts
new file mode 100644
index 0000000..2535dc0
--- /dev/null
+++ b/src/elements/config/elements/index.ts
@@ -0,0 +1,8 @@
+// text配置
+import text from "./text";
+
+const elementsConfiguration: any = {
+ ...text,
+};
+
+export default elementsConfiguration;
diff --git a/src/elements/config/elements/text/base-text.ts b/src/elements/config/elements/text/base-text.ts
new file mode 100644
index 0000000..8e0b433
--- /dev/null
+++ b/src/elements/config/elements/text/base-text.ts
@@ -0,0 +1,24 @@
+import baseConfiguration from "../../base-configuration";
+const { font, animate, data, box } = baseConfiguration;
+
+const baseText = {
+ element: "baseText",
+ level1Type: "text",
+ level2Type: "",
+ name: "基础文本",
+ // 配置项值
+ configureValue: {
+ styleDisplay: "block",
+ styleTextShadowX: 0,
+ styleTextShadowY: 0,
+ styleTextShadowF: 0,
+ styleTextShadowC: "",
+ ...box.configureValue,
+ ...animate.configureValue,
+ ...font.configureValue,
+ },
+ // 数据值
+ dataValue: data.configureValue,
+};
+
+export default baseText;
diff --git a/src/elements/config/elements/text/index.ts b/src/elements/config/elements/text/index.ts
new file mode 100644
index 0000000..7d092b6
--- /dev/null
+++ b/src/elements/config/elements/text/index.ts
@@ -0,0 +1,8 @@
+// 基础文本
+import baseText from "./base-text";
+
+const text = {
+ baseText,
+};
+
+export default text;
diff --git a/src/elements/index.ts b/src/elements/index.ts
new file mode 100644
index 0000000..c8b1415
--- /dev/null
+++ b/src/elements/index.ts
@@ -0,0 +1,7 @@
+import text from "./text";
+
+const elements: any = {
+ ...text,
+};
+
+export default elements;
diff --git a/src/elements/text/base-text/index.tsx b/src/elements/text/base-text/index.tsx
new file mode 100644
index 0000000..70a6fe9
--- /dev/null
+++ b/src/elements/text/base-text/index.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { getStyles } from "@src/utils";
+
+interface IBaseTextProps {
+ // 数据，模拟跟真实数据都走这里
+ data: {
+ [propName: string]: any;
+ };
+ // 字段名
+ field: string;
+ options: any;
+}
+
+const BaseText: FC = ({
+ data = {},
+ field = "value",
+ options,
+}) => {
+ return (
+
-
-
-
-
- ,
- document.getElementById('root')
-)
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c0..0000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..3fd26d0
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { HashRouter } from "react-router-dom";
+import ReactDom from "react-dom/client";
+import { persistStore } from "redux-persist";
+import { PersistGate } from "redux-persist/integration/react";
+import { Provider } from "react-redux";
+import App from "./App";
+import store from "./store/index";
+import "./mock";
+
+const persistor = persistStore(store);
+
+const root = ReactDom.createRoot(
+ document.getElementById("root") as HTMLElement
+);
+root.render(
+
+
+
+
+
+
+);
diff --git a/src/mock/components.mock.ts b/src/mock/components.mock.ts
new file mode 100644
index 0000000..3913cb4
--- /dev/null
+++ b/src/mock/components.mock.ts
@@ -0,0 +1,246 @@
+import Mock from "mockjs";
+// 获取统计数据
+export const componentsTotal = {
+ url: "/components-total",
+ method: "get",
+ data: {
+ result: true,
+ data: Mock.mock([
+ {
+ name: "移动端",
+ "total|1-300": 100,
+ unit: "个",
+ bgFont: "Mobile",
+ },
+ {
+ name: "PC端",
+ "total|1-300": 100,
+ unit: "个",
+ bgFont: "Computer",
+ },
+ {
+ name: "总数",
+ "total|100-1000": 100,
+ unit: "个",
+ bgFont: "Total",
+ },
+ {
+ name: "使用率",
+ "total|1-100": 100,
+ unit: "%",
+ bgFont: "Rate",
+ },
+ ]),
+ message: "请求成功",
+ },
+};
+
+// 新增组件走势图
+export const componentsTrendChart = {
+ url: "/components-trend-chart",
+ method: "get",
+ data: Mock.mock({
+ data: [
+ {
+ name: "01月",
+ "value|1-300": 100,
+ },
+ {
+ name: "02月",
+ "value|1-300": 100,
+ },
+ {
+ name: "03月",
+ "value|1-300": 100,
+ },
+ {
+ name: "04月",
+ "value|1-300": 100,
+ },
+ {
+ name: "05月",
+ "value|1-300": 100,
+ },
+ {
+ name: "06月",
+ "value|1-300": 100,
+ },
+ {
+ name: "07月",
+ "value|1-300": 100,
+ },
+ {
+ name: "08月",
+ "value|1-300": 100,
+ },
+ {
+ name: "09月",
+ "value|1-300": 100,
+ },
+ {
+ name: "10月",
+ "value|1-300": 100,
+ },
+ {
+ name: "11月",
+ "value|1-300": 100,
+ },
+ {
+ name: "12月",
+ "value|1-300": 100,
+ },
+ ],
+ }),
+};
+
+// 使用排行榜TOP8
+export const componentsLeaderboard = {
+ url: "/components-leaderboard",
+ method: "get",
+ data: Mock.mock({
+ data: [
+ {
+ name: "文本",
+ "value|1-100": 100,
+ },
+ {
+ name: "折线图",
+ "value|1-100": 100,
+ },
+ {
+ name: "图片",
+ "value|1-100": 100,
+ },
+ {
+ name: "柱状图",
+ "value|1-100": 100,
+ },
+ {
+ name: "饼图",
+ "value|1-100": 100,
+ },
+ {
+ name: "下拉框",
+ "value|1-100": 100,
+ },
+ {
+ name: "单选框",
+ "value|1-100": 100,
+ },
+ {
+ name: "雷达图",
+ "value|1-100": 100,
+ },
+ ],
+ }),
+};
+
+// 获取组件类型
+export const componentsType = {
+ url: "/components-types",
+ method: "get",
+ data: {
+ data: [
+ {
+ name: "全部",
+ value: "",
+ level: 1,
+ id: 1,
+ },
+ {
+ name: "echarts",
+ value: "echarts",
+ level: 1,
+ id: 2,
+ children: [
+ {
+ name: "全部",
+ value: "",
+ level: 2,
+ id: 21,
+ },
+ {
+ name: "折线图",
+ value: "line",
+ level: 2,
+ id: 22,
+ },
+ {
+ name: "柱状图",
+ value: "bar",
+ level: 2,
+ id: 23,
+ },
+ {
+ name: "饼图",
+ value: "pie",
+ level: 2,
+ id: 24,
+ },
+ ],
+ },
+ {
+ name: "文本",
+ value: "text",
+ level: 1,
+ id: 3,
+ },
+ {
+ name: "图片",
+ value: "image",
+ level: 1,
+ id: 4,
+ },
+ {
+ name: "表格",
+ value: "table",
+ level: 1,
+ id: 5,
+ },
+ {
+ name: "百度地图",
+ value: "bmap",
+ level: 1,
+ id: 6,
+ },
+ {
+ name: "高德地图",
+ value: "bmap",
+ level: 1,
+ id: 7,
+ },
+ ],
+ },
+};
+
+// 获取组件类型
+export const componentsList = {
+ url: "/components-list",
+ method: "get",
+ data: {
+ data: [
+ {
+ id: 1,
+ name: "基础文本",
+ element: "baseText",
+ level1Type: "text",
+ level2Type: "",
+ images:
+ "https://p3-tt.byteimg.com/origin/pgc-image/5017bca3cfee4172abc1a1622f464c09?from=pc",
+ count: 0,
+ createTime: new Date().getTime(),
+ },
+ {
+ id: 2,
+ name: "基础折线图",
+ element: "baseEchartsLine",
+ level1Type: "echarts",
+ level2Type: "line",
+ images:
+ "https://p3-tt.byteimg.com/origin/pgc-image/5017bca3cfee4172abc1a1622f464c09?from=pc",
+ count: 0,
+ createTime: new Date().getTime(),
+ },
+ ],
+ },
+};
diff --git a/src/mock/index.ts b/src/mock/index.ts
index 486f309..ad30b66 100644
--- a/src/mock/index.ts
+++ b/src/mock/index.ts
@@ -1,54 +1,40 @@
-/*
- * @Description: 页面描述
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-10-10 20:59:35
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-12 15:10:03
- * @FilePath: \bigscreen\src\mock\index.ts
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import Mock from 'mockjs'
+import Mock from "mockjs";
// 登录模块
-import * as login from './modules/login'
-// 模拟数据接口
-import * as configuration from './modules/configuration'
-// 简报数据接口
-import * as report from './modules/report'
+import * as login from "./login.mock";
+// 用户模块
+import * as userInfo from "./userInfo.mock";
+// 组件模块
+import * as components from "./components.mock";
+// 微件模块
+import * as widgets from "./widgets.mock";
-create(login)
-create(configuration)
-create(report)
+create(login);
+create(userInfo);
+create(components);
+create(widgets);
/**
* 根据模块创建接口
* @param mod m模块
*/
function create(mod: any) {
for (let key in mod) {
- Mock.mock(RegExp(mod[key].url + '*'), mod[key].method, (options) => {
- const body = JSON.parse(options.body)
- const { url, data } = mod[key]
+ Mock.mock(RegExp(mod[key].url + "*"), mod[key].method, (options) => {
+ const body = JSON.parse(options.body);
+ const { url, data } = mod[key];
// 这里判断登录是username:admin,password:123456,才可以判断
if (
- url === '/login' &&
- (body.username !== 'admin' || body.password !== '123456')
+ url === "/login" &&
+ (body.username !== "admin" || body.password !== "123456")
) {
return {
- ...data,
- code: 400,
+ result: false,
data: null,
- message: '用户名或密码错误'
- }
- }
-
- return {
- ...data,
- data: {
- ...data.data,
- ...body
- }
+ message: "用户名或密码错误",
+ };
}
- })
+ return data;
+ });
}
}
-export default Mock
+export default Mock;
diff --git a/src/mock/login.mock.ts b/src/mock/login.mock.ts
new file mode 100644
index 0000000..753424a
--- /dev/null
+++ b/src/mock/login.mock.ts
@@ -0,0 +1,11 @@
+import Mock from "mockjs";
+
+export const login = {
+ url: "/login",
+ method: "post",
+ data: {
+ result: true,
+ data: Mock.mock("@guid"),
+ message: "登录成功",
+ },
+};
diff --git a/src/mock/modules/configuration.ts b/src/mock/modules/configuration.ts
deleted file mode 100644
index 3b7593a..0000000
--- a/src/mock/modules/configuration.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * @Description: 模拟接口数据
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-10-11 19:49:25
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-12 14:18:53
- * @FilePath: \bigscreen\src\mock\modules\configuration.ts
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import Mock from 'mockjs'
-export const configuration = {
- url: '/configuration',
- method: 'get',
- data: {
- code: 0,
- sucess: true,
- data: Mock.mock({
- value: '@csentence(5)',
- series: [
- {
- seriesName: '@ctitle(3)',
- 'data|6': [
- {
- name: '@region',
- 'value|1-300': 100
- }
- ]
- }
- ],
- 'radio|3': [{ label: '@csentence(2)', value: '@increment' }]
- })
- },
- message: '成功'
-}
diff --git a/src/mock/modules/login.ts b/src/mock/modules/login.ts
deleted file mode 100644
index e0a0e0d..0000000
--- a/src/mock/modules/login.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * @Description: 登录接口配置
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-10-11 08:53:06
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-11 20:47:53
- * @FilePath: \bigscreen\src\mock\modules\login.ts
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-/*eslint-disable*/
-import Mock from 'mockjs'
-
-export const login = {
- url: '/login',
- method: 'post',
- data: {
- code: 0,
- sucess: true,
- data: Mock.mock({
- email: '@email()',
- 'age|20-80': 10,
- name: '@cword(3, 5)',
- describe: '@cparagraph(2)',
- token: '@guid',
- avatar: '@image(200x100)'
- }),
- message: '登录成功'
- }
-}
diff --git a/src/mock/modules/report.ts b/src/mock/modules/report.ts
deleted file mode 100644
index a79f9bf..0000000
--- a/src/mock/modules/report.ts
+++ /dev/null
@@ -1,2569 +0,0 @@
-/*
- * @Description: 大屏列表接口配置
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-10-11 08:53:06
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-13 09:31:38
- * @FilePath: \bigscreen\src\mock\modules\report.ts
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-/*eslint-disable*/
-import Mock from 'mockjs'
-// 列表
-export const reportList = {
- url: '/report-list',
- method: 'get',
- data: {
- code: 0,
- sucess: true,
- data: Mock.mock({
- 'data|8': [
- {
- pages: [
- {
- name: '@cword(5)',
- id: '93b908bb=aebb=4e6b=ac65=575183548b7a',
- widgets: [
- {
- code: 'widgetGroup',
- type: 'group',
- label: '组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 10,
- top: 10
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { a: 2 }
- },
- id: 'c2c48cbd=d833=4d78=8dd9=f8b11589ddb4',
- linkageIds:
- '16046c2f=b05b=4775=8194=7ef191d977b4,6160a544=1a50=4f80=93c4=bdf63cc15842,72cfd138=6fa0=4e33=9c11=ab5da2337e2b,edeeeb69=11cf=4c20=8c01=7e3c6523f37a,b2340442=a94e=4878=ba03=74cb916f4524,c610cdbf=95ba=4798=863e=50c9682950fd,d927f513=f853=4377=87fa=b73c66f07a6a,a5c20d1f=1f9c=4c7a=95ad=6e3203ac8521',
- widgets: [
- {
- id: '5eea6dfc=63a9=4be2=8382=41528e043c53',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'a'
- }
- },
- {
- id: '8621f9bc=57d7=463c=82a1=1d4013fa1427',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: 'c5e2c6fe=3638=4de0=a3a4=8576fd6b71bb',
- linkageIds: '',
- code: 'widgetBaseSmoothLine',
- label: '基础平滑折线图',
- type: 'line',
- configureValue: {
- '0': {
- name: '图形上的文本标签',
- list: [
- {
- componentName: 'Switch',
- label: '是否显示',
- name: 'seriesLabelShow',
- required: false,
- placeholder: ''
- },
- {
- componentName: 'Select',
- label: '标签的位置',
- name: 'seriesLabelPosition',
- required: false,
- placeholder: '请选择标签的位置',
- relationFields: 'seriesLabelShow',
- relationValues: 'true',
- options: [
- { code: 'top', name: 'top' },
- { code: 'left', name: 'left' },
- { code: 'right', name: 'right' },
- { code: 'bottom', name: 'bottom' },
- { code: 'inside', name: 'inside' },
- { code: 'insideLeft', name: 'insideLeft' },
- { code: 'insideRight', name: 'insideRight' },
- { code: 'insideTop', name: 'insideTop' },
- { code: 'insideBottom', name: 'insideBottom' },
- {
- code: 'insideTopLeft',
- name: 'insideTopLeft'
- },
- {
- code: 'insideBottomLeft',
- name: 'insideBottomLeft'
- },
- {
- code: 'insideTopRight',
- name: 'insideTopRight'
- },
- {
- code: 'insideBottomRight',
- name: 'insideinsideBottomRightTop'
- }
- ]
- },
- {
- componentName: 'SketchPicker',
- label: '文字颜色',
- name: 'seriesLabelColor',
- required: false,
- relationFields: 'seriesLabelShow',
- relationValues: 'true',
- placeholder: '请选择文字颜色'
- }
- ]
- },
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- gridShow: false,
- gridLeft: 50,
- gridRight: 30,
- gridTop: 30,
- gridBottom: 30,
- gridBorderColor: '#ccc',
- xAxisShow: true,
- xAxisType: 'category',
- xAxisName: '',
- xAxisNameLocation: 'end',
- xAxisNameTextStyleFontSize: 12,
- xAxisNameTextStyleLineHeight: 12,
- xAxisNameTextStyleFontFamily: 'serif',
- xAxisNameTextStyleFontWeight: 'normal',
- xAxisBoundaryGap: false,
- xAxisNameRotate: 0,
- xAxisLineShow: true,
- xAxisLabelShow: true,
- xAxisLabelRotate: 0,
- xAxisSplitLineShow: true,
- xAxisSplitAreaShow: false,
- xAxisSplitAreaOpacity: 10,
- xAxisPointerShow: true,
- xAxisTickShow: true,
- xAxisAlignWithLabel: false,
- yAxisShow: true,
- yAxisType: 'value',
- yAxisName: '',
- yAxisNameLocation: 'end',
- yAxisNameTextStyleFontSize: 12,
- yAxisNameTextStyleLineHeight: 12,
- yAxisNameTextStyleFontFamily: 'serif',
- yAxisNameTextStyleFontWeight: 'normal',
- yAxisBoundaryGap: false,
- yAxisNameRotate: 0,
- yAxisLineShow: true,
- yAxisLabelShow: true,
- yAxisLabelRotate: 0,
- yAxisSplitLineShow: true,
- yAxisSplitAreaShow: false,
- yAxisSplitAreaOpacity: 10,
- yAxisPointerShow: false,
- yAxisTickShow: true,
- yAxisAlignWithLabel: false,
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: 'rgba(208,12,58,1)',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- lineWidth: 2,
- lineSmooth: true,
- lineAreaStyle: false,
- lineAreaStyleOpacity: 70,
- seriesStackValue: '',
- showSymbol: true,
- symbol: 'circle',
- symbolSize: 4
- },
- coordinateValue: {
- width: 328,
- height: 197,
- left: 0,
- top: 46
- },
- dataValue: {
- useInterface: false,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 11,
- top: 263
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { b: 1 }
- },
- id: '16046c2f=b05b=4775=8194=7ef191d977b4',
- linkageIds: '',
- widgets: [
- {
- id: '471465c5=7ae1=458c=b1a4=2cbdc9369a23',
- linkageIds: '',
- code: 'widgetBaseBar',
- label: '带背景色的柱状图',
- type: 'bar',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- gridShow: false,
- gridLeft: 50,
- gridRight: 30,
- gridTop: 30,
- gridBottom: 30,
- gridBorderColor: '#ccc',
- xAxisShow: true,
- xAxisType: 'category',
- xAxisName: '',
- xAxisNameLocation: 'end',
- xAxisNameTextStyleFontSize: 12,
- xAxisNameTextStyleLineHeight: 12,
- xAxisNameTextStyleFontFamily: 'serif',
- xAxisNameTextStyleFontWeight: 'normal',
- xAxisBoundaryGap: true,
- xAxisNameRotate: 0,
- xAxisLineShow: true,
- xAxisLabelShow: true,
- xAxisLabelRotate: 0,
- xAxisSplitLineShow: true,
- xAxisSplitAreaShow: false,
- xAxisSplitAreaOpacity: 10,
- xAxisPointerShow: true,
- xAxisTickShow: true,
- xAxisAlignWithLabel: false,
- yAxisShow: true,
- yAxisType: 'value',
- yAxisName: '',
- yAxisNameLocation: 'end',
- yAxisNameTextStyleFontSize: 12,
- yAxisNameTextStyleLineHeight: 12,
- yAxisNameTextStyleFontFamily: 'serif',
- yAxisNameTextStyleFontWeight: 'normal',
- yAxisBoundaryGap: true,
- yAxisNameRotate: 0,
- yAxisLineShow: true,
- yAxisLabelShow: true,
- yAxisLabelRotate: 0,
- yAxisSplitLineShow: true,
- yAxisSplitAreaShow: false,
- yAxisSplitAreaOpacity: 10,
- yAxisPointerShow: false,
- yAxisTickShow: true,
- yAxisAlignWithLabel: false,
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- barWidth: 13,
- barShowBackground: false,
- barBorderRadius: 0,
- barBackgroundStyleColor: 'rgba(255,255,255, 0.1)',
- barBackgroundStyleBorderColor: '',
- barBackgroundStyleBorderWidth: 0,
- barBackgroundStyleBorderType: 'solid',
- seriesLabelShow: false,
- seriesLabelPosition: 'top',
- seriesLabelColor: '#fff',
- seriesStackValue: ''
- },
- coordinateValue: {
- width: 328,
- height: 206,
- left: 0,
- top: 37
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- },
- {
- id: 'ea5c0f37=9fe9=4f3e=8c3b=3197cdc4ef59',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'b'
- }
- },
- {
- id: 'ab91a82f=1565=4500=be69=25abae11f604',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 10,
- top: 516
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { c: 1 }
- },
- id: '6160a544=1a50=4f80=93c4=bdf63cc15842',
- linkageIds: '',
- widgets: [
- {
- id: '296c6a19=ec84=49d0=9796=a62c7a4f69c5',
- linkageIds: '',
- code: 'widgetBaseBar',
- label: '带背景色的柱状图',
- type: 'bar',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- gridShow: false,
- gridLeft: 50,
- gridRight: 30,
- gridTop: 30,
- gridBottom: 30,
- gridBorderColor: '#ccc',
- xAxisShow: true,
- xAxisType: 'value',
- xAxisName: '',
- xAxisNameLocation: 'end',
- xAxisNameTextStyleFontSize: 12,
- xAxisNameTextStyleLineHeight: 12,
- xAxisNameTextStyleFontFamily: 'serif',
- xAxisNameTextStyleFontWeight: 'normal',
- xAxisBoundaryGap: true,
- xAxisNameRotate: 0,
- xAxisLineShow: true,
- xAxisLabelShow: true,
- xAxisLabelRotate: 0,
- xAxisSplitLineShow: true,
- xAxisSplitAreaShow: false,
- xAxisSplitAreaOpacity: 10,
- xAxisPointerShow: false,
- xAxisTickShow: true,
- xAxisAlignWithLabel: false,
- yAxisShow: true,
- yAxisType: 'category',
- yAxisName: '',
- yAxisNameLocation: 'end',
- yAxisNameTextStyleFontSize: 12,
- yAxisNameTextStyleLineHeight: 12,
- yAxisNameTextStyleFontFamily: 'serif',
- yAxisNameTextStyleFontWeight: 'normal',
- yAxisBoundaryGap: true,
- yAxisNameRotate: 0,
- yAxisLineShow: true,
- yAxisLabelShow: true,
- yAxisLabelRotate: 0,
- yAxisSplitLineShow: true,
- yAxisSplitAreaShow: false,
- yAxisSplitAreaOpacity: 10,
- yAxisPointerShow: true,
- yAxisTickShow: true,
- yAxisAlignWithLabel: false,
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- barWidth: 13,
- barShowBackground: false,
- barBorderRadius: 0,
- barBackgroundStyleColor: 'rgba(255,255,255, 0.1)',
- barBackgroundStyleBorderColor: '',
- barBackgroundStyleBorderWidth: 0,
- barBackgroundStyleBorderType: 'solid',
- seriesLabelShow: false,
- seriesLabelPosition: 'top',
- seriesLabelColor: '#fff',
- seriesStackValue: ''
- },
- coordinateValue: {
- width: 328,
- height: 206,
- left: 0,
- top: 37
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- },
- {
- id: 'ea9a5111=6bfd=4b7d=8cad=0dfd2f58a51a',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'c'
- }
- },
- {
- id: '845ac9f8=528e=496e=a1b6=defce00af479',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 350,
- top: 514
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { d: 1 }
- },
- id: '72cfd138=6fa0=4e33=9c11=ab5da2337e2b',
- linkageIds: '',
- widgets: [
- {
- id: 'a7ff8370=bad2=4b4d=8738=9263e91d0477',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'd'
- }
- },
- {
- id: '543cd5c0=ba39=4e29=8dcd=6c34d664476e',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: 'b17848ad=4c52=4bca=ad36=a44d345abf2f',
- linkageIds: '',
- code: 'widgetBasePie',
- label: '基础饼图',
- type: 'pie',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- seriesInsideRadius: 0,
- seriesAutsideRadius: 80,
- seriesRoseType: false,
- xAxisShow: false,
- yAxisShow: false,
- seriesLabelShow: true,
- seriesLabelPosition: 'outside',
- seriesLabelColor: '',
- xAxisType: 'category',
- yAxisType: 'value'
- },
- coordinateValue: {
- width: 328,
- height: 205,
- left: 0,
- top: 38
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制][复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 688,
- top: 515
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { e: 1 }
- },
- id: 'edeeeb69=11cf=4c20=8c01=7e3c6523f37a',
- linkageIds: '',
- widgets: [
- {
- id: '5191bcc3=4aec=4f5a=bf0c=28210b9b2c3b',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'e'
- }
- },
- {
- id: 'aeebe200=7c71=4161=8b59=c674bb82608a',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: 'c3920425=19ff=4599=86af=f1b6fef665db',
- linkageIds: '',
- code: 'widgetBaseRadar',
- label: '基础雷达图',
- type: 'radar',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- radarShape: 'polygon',
- radarRadius: 75,
- radarAxisLinelColor: 'rgba(255,255,255,.8)',
- radarSplitLineColor: 'rgba(255,255,255,.05)',
- radarSplitAreaOddColor: 'rgba(250,250,250,0.3)',
- radarSplitAreaEvenColor: 'rgba(200,200,200,0.3)',
- seriesLabelShow: false,
- seriesLabelPosition: 'top',
- seriesLabelColor: '#fff',
- showSymbol: true,
- symbol: 'circle',
- symbolSize: 4,
- xAxisShow: false,
- yAxisShow: false,
- xAxisType: 'category',
- yAxisType: 'value'
- },
- coordinateValue: {
- width: 328,
- height: 205,
- left: 0,
- top: 38
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- },
- {
- seriesName: 'Direct',
- data: [
- { name: 'Mon', value: 220 },
- { name: 'Tue', value: 182 },
- { name: 'Wed', value: 191 },
- { name: 'Thu', value: 234 },
- { name: 'Fri', value: 290 },
- { name: 'Sat', value: 330 },
- { name: 'Sun', value: 310 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制][复制][复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 1028,
- top: 514
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { f: 1 }
- },
- id: 'b2340442=a94e=4878=ba03=74cb916f4524',
- linkageIds: '',
- widgets: [
- {
- id: '1aae0cd7=e8fb=454f=804d=19930327bb95',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'f'
- }
- },
- {
- id: '7bae6a88=6e99=4087=8ee7=550c26c38b92',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: 'ef3a76b1=f245=46c5=800e=ffde3f39f5cd',
- linkageIds: '',
- code: 'widgetBaseFunnel',
- label: '基础漏斗图',
- type: 'funnel',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- funnelOrient: 'horizontal',
- funnelSort: 'descending',
- funnelGap: 0,
- seriesLabelShow: true,
- seriesLabelPosition: 'inside',
- seriesLabelColor: '#fff',
- xAxisShow: false,
- yAxisShow: false,
- xAxisType: 'category',
- yAxisType: 'value'
- },
- coordinateValue: {
- width: 330,
- height: 205,
- left: 0,
- top: 38
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制][复制][复制][复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 1027,
- top: 263
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { g: 3 }
- },
- id: 'c610cdbf=95ba=4798=863e=50c9682950fd',
- linkageIds: '',
- widgets: [
- {
- id: '991dbff9=9629=4b87=8bcf=a7bc1c93baea',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'g'
- }
- },
- {
- id: '4ccd0305=106f=4d7a=bbf4=111cd6da5198',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: '9fe9fdeb=a636=4d9d=81e8=bc455fe1fc87',
- linkageIds: '',
- code: 'widgetBaseWordcloud',
- label: '基础表格',
- type: 'wordcloud',
- configureValue: {
- wordcloudFontFamily: 'Microsoft YaHei',
- wordcloudFontWeight: 'bold',
- wordcloudGridSize: 0,
- wordcloudMaxFontSize: 32
- },
- coordinateValue: {
- width: 328,
- height: 205,
- left: 0,
- top: 38
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: '测试',
- data: [
- { name: '数据可视化', value: 3000 },
- { name: '大数据', value: 2181 },
- { name: '云计算', value: 1386 },
- { name: '物联网', value: 2055 },
- { name: '移动互联网', value: 2467 },
- { name: '人工智能', value: 2244 },
- { name: '深度学习', value: 1898 },
- { name: '机器学习', value: 1484 },
- { name: '区块链', value: 3865 },
- { name: '互联网+', value: 2222 },
- { name: '智能合约', value: 366 },
- { name: '比特币', value: 360 },
- { name: '数据挖掘', value: 273 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制][复制][复制][复制][复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 328,
- height: 244,
- left: 1028,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { h: 3 }
- },
- id: 'd927f513=f853=4377=87fa=b73c66f07a6a',
- linkageIds: '',
- widgets: [
- {
- id: '44adccc9=d272=4a2c=9ad7=5f1cccf0480d',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 143,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'h'
- }
- },
- {
- id: 'e97f2c02=2653=4e49=8231=fd69e0d7fc10',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: '88d8661a=cf00=4635=ac77=32455199c2f2',
- linkageIds: '',
- code: 'widgetBaseAreaLine',
- label: '基础面积图',
- type: 'line',
- configureValue: {
- '0': {
- name: '图形上的文本标签',
- list: [
- {
- componentName: 'Switch',
- label: '是否显示',
- name: 'seriesLabelShow',
- required: false,
- placeholder: ''
- },
- {
- componentName: 'Select',
- label: '标签的位置',
- name: 'seriesLabelPosition',
- required: false,
- placeholder: '请选择标签的位置',
- relationFields: 'seriesLabelShow',
- relationValues: 'true',
- options: [
- { code: 'top', name: 'top' },
- { code: 'left', name: 'left' },
- { code: 'right', name: 'right' },
- { code: 'bottom', name: 'bottom' },
- { code: 'inside', name: 'inside' },
- { code: 'insideLeft', name: 'insideLeft' },
- { code: 'insideRight', name: 'insideRight' },
- { code: 'insideTop', name: 'insideTop' },
- { code: 'insideBottom', name: 'insideBottom' },
- {
- code: 'insideTopLeft',
- name: 'insideTopLeft'
- },
- {
- code: 'insideBottomLeft',
- name: 'insideBottomLeft'
- },
- {
- code: 'insideTopRight',
- name: 'insideTopRight'
- },
- {
- code: 'insideBottomRight',
- name: 'insideinsideBottomRightTop'
- }
- ]
- },
- {
- componentName: 'SketchPicker',
- label: '文字颜色',
- name: 'seriesLabelColor',
- required: false,
- relationFields: 'seriesLabelShow',
- relationValues: 'true',
- placeholder: '请选择文字颜色'
- }
- ]
- },
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- gridShow: false,
- gridLeft: 50,
- gridRight: 30,
- gridTop: 30,
- gridBottom: 30,
- gridBorderColor: '#ccc',
- xAxisShow: true,
- xAxisType: 'category',
- xAxisName: '',
- xAxisNameLocation: 'end',
- xAxisNameTextStyleFontSize: 12,
- xAxisNameTextStyleLineHeight: 12,
- xAxisNameTextStyleFontFamily: 'serif',
- xAxisNameTextStyleFontWeight: 'normal',
- xAxisBoundaryGap: false,
- xAxisNameRotate: 0,
- xAxisLineShow: true,
- xAxisLabelShow: true,
- xAxisLabelRotate: 0,
- xAxisSplitLineShow: true,
- xAxisSplitAreaShow: false,
- xAxisSplitAreaOpacity: 10,
- xAxisPointerShow: true,
- xAxisTickShow: true,
- xAxisAlignWithLabel: false,
- yAxisShow: true,
- yAxisType: 'value',
- yAxisName: '',
- yAxisNameLocation: 'end',
- yAxisNameTextStyleFontSize: 12,
- yAxisNameTextStyleLineHeight: 12,
- yAxisNameTextStyleFontFamily: 'serif',
- yAxisNameTextStyleFontWeight: 'normal',
- yAxisBoundaryGap: false,
- yAxisNameRotate: 0,
- yAxisLineShow: true,
- yAxisLabelShow: true,
- yAxisLabelRotate: 0,
- yAxisSplitLineShow: true,
- yAxisSplitAreaShow: false,
- yAxisSplitAreaOpacity: 10,
- yAxisPointerShow: false,
- yAxisTickShow: true,
- yAxisAlignWithLabel: false,
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- lineWidth: 2,
- lineSmooth: false,
- lineAreaStyle: true,
- lineAreaStyleOpacity: 70,
- seriesStackValue: '',
- showSymbol: true,
- symbol: 'circle',
- symbolSize: 4
- },
- coordinateValue: {
- width: 330,
- height: 208,
- left: 0,
- top: 35
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- },
- {
- code: 'widgetGroup',
- type: 'group',
- label: '[复制][复制][复制][复制][复制][复制][复制][复制]组件',
- configureValue: {
- styleDisplay: 'block',
- backgroundColor: '',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleBoxInset: true,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 10,
- styleBoxShadowC: 'rgba(15,32,212,0.5)',
- styleBorderStyle: 'solid',
- styleBorderWidth: 1,
- styleBorderColor: 'rgba(15,32,212, 1)',
- styleBorderTopLeftRadius: 5,
- styleBorderTopRightRadius: 5,
- styleBorderBottomLeftRadius: 5,
- styleBorderBottomRightRadius: 5
- },
- coordinateValue: {
- width: 667,
- height: 498,
- left: 350,
- top: 9
- },
- dataValue: {
- useInterface: true,
- dataType: 'dynamic',
- mock: {
- value: '我是文本框',
- radio: [
- { label: 'Apple', value: 'Apple' },
- { label: 'Pear', value: 'Pear' },
- { label: 'Orange', value: 'Orange' }
- ]
- },
- url: 'http://localhost:6001/configuration',
- method: 'get',
- params: { i: 1 }
- },
- id: 'a5c20d1f=1f9c=4c7a=95ad=6e3203ac8521',
- linkageIds: '',
- widgets: [
- {
- id: '2a682eaa=b9ea=4164=8b99=b48d2d8d53a4',
- linkageIds: '',
- code: 'widgetFormRadio',
- type: 'form',
- label: '单选',
- configureValue: {
- styleDisplay: 'block',
- radioSize: 'small',
- radioColor: 'rgba(255,255,255, .6)',
- radioBackgroundColor: '#2F2271',
- radioBorderColor: '#36248C',
- radioHighColor: '#fff',
- radioHighBackgroundColor: '#3109EC',
- radioHighBorderColor: '#3109EC'
- },
- coordinateValue: {
- width: 184,
- height: 29,
- left: 473,
- top: 7
- },
- dataValue: {
- useInterface: true,
- field: 'radio',
- paramName: 'i'
- }
- },
- {
- id: '96adb551=de40=4e00=91cd=6f41960fa6ec',
- linkageIds: '',
- code: 'widgetBaseText',
- type: 'text',
- label: '基础文本',
- configureValue: {
- styleDisplay: 'block',
- styleTextShadowX: 0,
- styleTextShadowY: 0,
- styleTextShadowF: 0,
- styleTextShadowC: '',
- styleBoxInset: false,
- styleBoxShadowX: 0,
- styleBoxShadowY: 0,
- styleBoxShadowF: 0,
- styleBoxShadowC: '',
- styleBorderStyle: 'none',
- styleBorderWidth: 0,
- styleBorderColor: '',
- styleBorderTopLeftRadius: 0,
- styleBorderTopRightRadius: 0,
- styleBorderBottomLeftRadius: 0,
- styleBorderBottomRightRadius: 0,
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- styleFontSize: 16,
- styleLetterSpacing: 0,
- styleFontWeight: 'bolder',
- styleTextAlign: 'left',
- styleBackgroundColor: '',
- styleFontFamily: 'Microsoft YaHei',
- styleLineHeight: 1,
- styleColor: '#fff'
- },
- coordinateValue: {
- width: 111,
- height: 23,
- left: 8,
- top: 11
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: { value: '文本框' },
- url: '',
- method: 'get',
- field: 'value'
- }
- },
- {
- id: '36d6e312=6ed2=4a5d=84dd=82380122b45a',
- linkageIds: '',
- code: 'widgetAnnulusPie',
- label: '圆环饼图',
- type: 'pie',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- seriesInsideRadius: 40,
- seriesAutsideRadius: 80,
- seriesRoseType: false,
- xAxisShow: false,
- yAxisShow: false,
- seriesLabelShow: true,
- seriesLabelPosition: 'outside',
- seriesLabelColor: '',
- xAxisType: 'category',
- yAxisType: 'value'
- },
- coordinateValue: {
- width: 330,
- height: 215,
- left: 0,
- top: 34
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- },
- {
- id: '4c655ccf=fdce=45f9=8556=328d5fc9f766',
- linkageIds: '',
- code: 'widgetRadiusBar',
- label: '圆角柱状图',
- type: 'bar',
- configureValue: {
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- gridShow: false,
- gridLeft: 50,
- gridRight: 30,
- gridTop: 30,
- gridBottom: 30,
- gridBorderColor: '#ccc',
- xAxisShow: true,
- xAxisType: 'category',
- xAxisName: '',
- xAxisNameLocation: 'end',
- xAxisNameTextStyleFontSize: 12,
- xAxisNameTextStyleLineHeight: 12,
- xAxisNameTextStyleFontFamily: 'serif',
- xAxisNameTextStyleFontWeight: 'normal',
- xAxisBoundaryGap: true,
- xAxisNameRotate: 0,
- xAxisLineShow: true,
- xAxisLabelShow: true,
- xAxisLabelRotate: 0,
- xAxisSplitLineShow: true,
- xAxisSplitAreaShow: false,
- xAxisSplitAreaOpacity: 10,
- xAxisPointerShow: true,
- xAxisTickShow: true,
- xAxisAlignWithLabel: false,
- yAxisShow: true,
- yAxisType: 'value',
- yAxisName: '',
- yAxisNameLocation: 'end',
- yAxisNameTextStyleFontSize: 12,
- yAxisNameTextStyleLineHeight: 12,
- yAxisNameTextStyleFontFamily: 'serif',
- yAxisNameTextStyleFontWeight: 'normal',
- yAxisBoundaryGap: true,
- yAxisNameRotate: 0,
- yAxisLineShow: true,
- yAxisLabelShow: true,
- yAxisLabelRotate: 0,
- yAxisSplitLineShow: true,
- yAxisSplitAreaShow: false,
- yAxisSplitAreaOpacity: 10,
- yAxisPointerShow: false,
- yAxisTickShow: true,
- yAxisAlignWithLabel: false,
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: '#fc97af',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- barWidth: 20,
- barShowBackground: false,
- barBorderRadius: 20,
- barBackgroundStyleColor: 'rgba(255,255,255, 0.1)',
- barBackgroundStyleBorderColor: '',
- barBackgroundStyleBorderWidth: 0,
- barBackgroundStyleBorderType: 'solid',
- seriesLabelShow: false,
- seriesLabelPosition: 'top',
- seriesLabelColor: '#fff',
- seriesStackValue: ''
- },
- coordinateValue: {
- width: 327,
- height: 208,
- left: 342,
- top: 36
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- },
- {
- id: 'ef999e71=8c3d=46bf=818a=2585d3c5bd23',
- linkageIds: '',
- code: 'widgetBaseSmoothLine',
- label: '基础平滑折线图',
- type: 'line',
- configureValue: {
- '0': {
- name: '图形上的文本标签',
- list: [
- {
- componentName: 'Switch',
- label: '是否显示',
- name: 'seriesLabelShow',
- required: false,
- placeholder: ''
- },
- {
- componentName: 'Select',
- label: '标签的位置',
- name: 'seriesLabelPosition',
- required: false,
- placeholder: '请选择标签的位置',
- relationFields: 'seriesLabelShow',
- relationValues: 'true',
- options: [
- { code: 'top', name: 'top' },
- { code: 'left', name: 'left' },
- { code: 'right', name: 'right' },
- { code: 'bottom', name: 'bottom' },
- { code: 'inside', name: 'inside' },
- { code: 'insideLeft', name: 'insideLeft' },
- { code: 'insideRight', name: 'insideRight' },
- { code: 'insideTop', name: 'insideTop' },
- { code: 'insideBottom', name: 'insideBottom' },
- {
- code: 'insideTopLeft',
- name: 'insideTopLeft'
- },
- {
- code: 'insideBottomLeft',
- name: 'insideBottomLeft'
- },
- {
- code: 'insideTopRight',
- name: 'insideTopRight'
- },
- {
- code: 'insideBottomRight',
- name: 'insideinsideBottomRightTop'
- }
- ]
- },
- {
- componentName: 'SketchPicker',
- label: '文字颜色',
- name: 'seriesLabelColor',
- required: false,
- relationFields: 'seriesLabelShow',
- relationValues: 'true',
- placeholder: '请选择文字颜色'
- }
- ]
- },
- styleDisplay: 'block',
- styleAnimateInfinite: false,
- styleAnimationDelay: 0,
- styleAnimationName: '',
- styleAnimationDuration: 1,
- styleAnimationTimingFunction: 'linear',
- titleTextShow: false,
- titleText: '',
- titleTextFontSize: 14,
- titleTextLineHeight: 1.2,
- titleTextFontFamily: 'Microsoft YaHei',
- titleTextFontWeight: 'bold',
- titleTextColor: '#fff',
- legendShow: true,
- legendType: 'plain',
- legendOrient: 'horizontal',
- legendFontSize: 12,
- legendIcon: 'rect',
- legendColor: '#fff',
- legendLeft: 'center',
- legendTop: 'top',
- gridShow: false,
- gridLeft: 50,
- gridRight: 30,
- gridTop: 30,
- gridBottom: 30,
- gridBorderColor: '#ccc',
- xAxisShow: true,
- xAxisType: 'category',
- xAxisName: '',
- xAxisNameLocation: 'end',
- xAxisNameTextStyleFontSize: 12,
- xAxisNameTextStyleLineHeight: 12,
- xAxisNameTextStyleFontFamily: 'serif',
- xAxisNameTextStyleFontWeight: 'normal',
- xAxisBoundaryGap: false,
- xAxisNameRotate: 0,
- xAxisLineShow: true,
- xAxisLabelShow: true,
- xAxisLabelRotate: 0,
- xAxisSplitLineShow: true,
- xAxisSplitAreaShow: false,
- xAxisSplitAreaOpacity: 10,
- xAxisPointerShow: true,
- xAxisTickShow: true,
- xAxisAlignWithLabel: false,
- yAxisShow: true,
- yAxisType: 'value',
- yAxisName: '',
- yAxisNameLocation: 'end',
- yAxisNameTextStyleFontSize: 12,
- yAxisNameTextStyleLineHeight: 12,
- yAxisNameTextStyleFontFamily: 'serif',
- yAxisNameTextStyleFontWeight: 'normal',
- yAxisBoundaryGap: false,
- yAxisNameRotate: 0,
- yAxisLineShow: true,
- yAxisLabelShow: true,
- yAxisLabelRotate: 0,
- yAxisSplitLineShow: true,
- yAxisSplitAreaShow: false,
- yAxisSplitAreaOpacity: 10,
- yAxisPointerShow: false,
- yAxisTickShow: true,
- yAxisAlignWithLabel: false,
- axisNameColor: 'rgba(255,255,255,.2)',
- axisLineColor: 'rgba(255,255,255,.2)',
- axisLabelColor: 'rgba(255,255,255,.8)',
- splitLineColor: 'rgba(255,255,255,.2)',
- axisPointerColor: 'red',
- themeColor1: 'rgba(212,54,10,1)',
- themeColor2: '#87f7cf',
- themeColor3: '#f7f494',
- themeColor4: '#72ccff',
- themeColor5: '#f7c5a0',
- themeColor6: '#d4a4eb',
- themeColor7: '#d2f5a6',
- themeColor8: '#76f2f2',
- lineWidth: 0,
- lineSmooth: true,
- lineAreaStyle: true,
- lineAreaStyleOpacity: 29,
- seriesStackValue: '',
- showSymbol: true,
- symbol: 'circle',
- symbolSize: 9
- },
- coordinateValue: {
- width: 670,
- height: 240,
- left: -1,
- top: 256
- },
- dataValue: {
- useInterface: true,
- dataType: 'mock',
- mock: {
- series: [
- {
- seriesName: 'Email',
- data: [
- { name: 'Mon', value: 120 },
- { name: 'Tue', value: 132 },
- { name: 'Wed', value: 101 },
- { name: 'Thu', value: 134 },
- { name: 'Fri', value: 90 },
- { name: 'Sat', value: 230 },
- { name: 'Sun', value: 210 }
- ]
- }
- ]
- },
- url: '',
- method: 'get',
- field: 'series'
- }
- }
- ]
- }
- ]
- }
- ],
- id: '@id',
- auxiliaryBorderColor: '#1890ff',
- backgroundColor: '#090548',
- backgroundImage: '',
- description: '@cparagraph',
- height: 768,
- horizontalNumber: 4,
- interval: 10,
- projectName: '',
- showAuxiliary: true,
- title: '@csentence(10)',
- verticalNumber: 3,
- width: 1366,
- createTime: '@datetime(yyyy-MM-dd HH:mm:ss)'
- }
- ],
- total: 8
- }),
- message: '成功'
- }
-}
-
-// 删除
-export const reportDelete = {
- url: '/report-delete',
- method: 'post',
- data: {
- code: 0,
- sucess: true,
- data: null,
- message: '删除成功'
- }
-}
diff --git a/src/mock/userInfo.mock.ts b/src/mock/userInfo.mock.ts
new file mode 100644
index 0000000..289f3ee
--- /dev/null
+++ b/src/mock/userInfo.mock.ts
@@ -0,0 +1,15 @@
+import Mock from "mockjs";
+export const userInfo = {
+ url: "/user-info",
+ method: "get",
+ data: {
+ result: true,
+ data: Mock.mock({
+ email: "@email()",
+ "age|20-80": 10,
+ username: "admin",
+ avatar: "@image(40x40)",
+ }),
+ message: "登录成功",
+ },
+};
diff --git a/src/mock/widgets.mock.ts b/src/mock/widgets.mock.ts
new file mode 100644
index 0000000..a4bc998
--- /dev/null
+++ b/src/mock/widgets.mock.ts
@@ -0,0 +1,242 @@
+import Mock from "mockjs";
+import { guid } from "@src/utils";
+// 获取统计数据
+export const widgetsTotal = {
+ url: "/widgets-total",
+ method: "get",
+ data: {
+ result: true,
+ data: Mock.mock([
+ {
+ name: "移动端",
+ "total|1-300": 100,
+ unit: "个",
+ bgFont: "Mobile",
+ },
+ {
+ name: "PC端",
+ "total|1-300": 100,
+ unit: "个",
+ bgFont: "Computer",
+ },
+ {
+ name: "总数",
+ "total|100-1000": 100,
+ unit: "个",
+ bgFont: "Total",
+ },
+ {
+ name: "使用率",
+ "total|1-100": 100,
+ unit: "%",
+ bgFont: "Rate",
+ },
+ ]),
+ message: "请求成功",
+ },
+};
+
+// 新增组件走势图
+export const widgetsTrendChart = {
+ url: "/widgets-trend-chart",
+ method: "get",
+ data: Mock.mock({
+ data: [
+ {
+ name: "01月",
+ "value|1-300": 100,
+ },
+ {
+ name: "02月",
+ "value|1-300": 100,
+ },
+ {
+ name: "03月",
+ "value|1-300": 100,
+ },
+ {
+ name: "04月",
+ "value|1-300": 100,
+ },
+ {
+ name: "05月",
+ "value|1-300": 100,
+ },
+ {
+ name: "06月",
+ "value|1-300": 100,
+ },
+ {
+ name: "07月",
+ "value|1-300": 100,
+ },
+ {
+ name: "08月",
+ "value|1-300": 100,
+ },
+ {
+ name: "09月",
+ "value|1-300": 100,
+ },
+ {
+ name: "10月",
+ "value|1-300": 100,
+ },
+ {
+ name: "11月",
+ "value|1-300": 100,
+ },
+ {
+ name: "12月",
+ "value|1-300": 100,
+ },
+ ],
+ }),
+};
+
+// 使用排行榜TOP8
+export const widgetsLeaderboard = {
+ url: "/widgets-leaderboard",
+ method: "get",
+ data: Mock.mock({
+ data: [
+ {
+ name: "文本",
+ "value|1-100": 100,
+ },
+ {
+ name: "折线图",
+ "value|1-100": 100,
+ },
+ {
+ name: "图片",
+ "value|1-100": 100,
+ },
+ {
+ name: "柱状图",
+ "value|1-100": 100,
+ },
+ {
+ name: "饼图",
+ "value|1-100": 100,
+ },
+ {
+ name: "下拉框",
+ "value|1-100": 100,
+ },
+ {
+ name: "单选框",
+ "value|1-100": 100,
+ },
+ {
+ name: "雷达图",
+ "value|1-100": 100,
+ },
+ ],
+ }),
+};
+
+// 获取组件类型
+export const widgetsType = {
+ url: "/widgets-types",
+ method: "get",
+ data: {
+ data: [
+ {
+ name: "全部",
+ value: "",
+ level: 1,
+ id: 1,
+ },
+ {
+ name: "echarts",
+ value: "echarts",
+ level: 1,
+ id: 2,
+ children: [
+ {
+ name: "全部",
+ value: "",
+ level: 2,
+ id: 21,
+ },
+ {
+ name: "折线图",
+ value: "line",
+ level: 2,
+ id: 22,
+ },
+ {
+ name: "柱状图",
+ value: "bar",
+ level: 2,
+ id: 23,
+ },
+ {
+ name: "饼图",
+ value: "pie",
+ level: 2,
+ id: 24,
+ },
+ ],
+ },
+ {
+ name: "文本",
+ value: "text",
+ level: 1,
+ id: 3,
+ },
+ {
+ name: "图片",
+ value: "image",
+ level: 1,
+ id: 4,
+ },
+ {
+ name: "表格",
+ value: "table",
+ level: 1,
+ id: 5,
+ },
+ {
+ name: "百度地图",
+ value: "bmap",
+ level: 1,
+ id: 6,
+ },
+ {
+ name: "高德地图",
+ value: "bmap",
+ level: 1,
+ id: 7,
+ },
+ ],
+ },
+};
+
+// 获取组件类型
+export const widgetsList = {
+ url: "/widgets-list",
+ method: "get",
+ data: {
+ data: [
+ {
+ id: guid(),
+ name: "xxxx微件",
+ level1Type: "text",
+ level2Type: "",
+ images:
+ "https://p3-tt.byteimg.com/origin/pgc-image/5017bca3cfee4172abc1a1622f464c09?from=pc",
+ count: 0,
+ createTime: new Date().getTime(),
+ configuration: {
+ show: true,
+ },
+ layout: {
+ header: [],
+ body: [],
+ },
+ },
+ ],
+ },
+};
diff --git a/src/pages/components/index.scss b/src/pages/components/index.scss
new file mode 100644
index 0000000..4494674
--- /dev/null
+++ b/src/pages/components/index.scss
@@ -0,0 +1,2 @@
+@include b(components) {
+}
diff --git a/src/pages/components/index.tsx b/src/pages/components/index.tsx
new file mode 100644
index 0000000..e57f925
--- /dev/null
+++ b/src/pages/components/index.tsx
@@ -0,0 +1,95 @@
+import React, { FC, useEffect } from "react";
+import { Col, Row } from "antd";
+import { useComponents } from "@src/core/hook";
+import Total from "@src/components/total";
+import TrendChart from "@src/components/trendChart";
+import UseLeaderboard from "@src/components/useLeaderboard";
+import List from "@src/components/list";
+import FilterItem from "@src/components/filter";
+import "./index.scss";
+
+const Components: FC = () => {
+ const {
+ total,
+ getTotal,
+ getTrend,
+ trend,
+ leaderboard,
+ getLeaderboard,
+ types,
+ getTypes,
+ list,
+ getList,
+ listSearchHandler,
+ } = useComponents();
+ useEffect(() => {
+ getTotal();
+ getTrend();
+ getLeaderboard();
+ (async function fn() {
+ await getTypes();
+ await getList();
+ })();
+ }, [getTotal, getTrend, getLeaderboard, getTypes, getList]);
+
+ console.log(list.searchDatas, "types");
+ return (
+
- addLargeScreenPage: (data: IPage, callback?: Function) => void
- modifyLargeScreenPage: (id: string, data: IPage, callback?: Function) => void
- details: any
-}
-
-const AddOrEditPage: FC = ({
- setModal,
- addLargeScreenPage,
- modifyLargeScreenPage,
- details
-}) => {
- const [form] = useForm()
- // 编辑时回填表单数据
- useEffect(() => {
- if (details.name) {
- form.setFieldsValue({
- name: details.name
- })
- }
- }, [details.name, form])
-
- // 成功回调函数
- const successHandler = (msg: string) => {
- message.success(msg)
- setModal((state: any) => ({
- ...state,
- visible: false
- }))
- }
- // 保存
- const onFinish = (values: any) => {
- const params = {
- ...values,
- id: details.id || guid(),
- widgets: details.widgets || []
- }
- // 编辑
- if (details.id) {
- modifyLargeScreenPage(details.id, params, () => {
- successHandler('编辑成功')
- })
- } else {
- // 新增
- addLargeScreenPage(params, () => {
- successHandler('新增成功')
- })
- }
- }
-
- return (
-
- )
-}
-
-export default AddOrEditPage
diff --git a/src/pages/configuration/components/center/components/auxiliary.tsx b/src/pages/configuration/components/center/components/auxiliary.tsx
deleted file mode 100644
index f7761e4..0000000
--- a/src/pages/configuration/components/center/components/auxiliary.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {
- FC
-} from 'react'
-
-interface IAuxiliaryProps {
- screen: any;
-}
-
-const Auxiliary: FC = ({
- screen
-}) => {
- const arr = Array.from(new Array(screen.horizontalNumber * screen.verticalNumber).keys())
- return (
- <>
- {
- screen.showAuxiliary ? = ({
- item,
- currentWidgetId,
- cale,
- currentWidget,
- modifyLargeScreenElement,
- children,
- className,
- currentWidgetGroupId
-}) => {
- // 移动时
- const dragStopHandle = (e: any, d: any) => {
- modifyLargeScreenElement(currentWidgetId, currentWidgetGroupId, {
- ...currentWidget,
- coordinateValue: {
- ...currentWidget.coordinateValue,
- left: Number(d.lastX.toFixed(0)),
- top: Number(d.lastY.toFixed(0))
- }
- })
- }
-
- // 改变盒子的比例时
- const resizeHandle = (
- e: any,
- direction: any,
- ref: any,
- delta: any,
- position: any
- ) => {
- modifyLargeScreenElement(currentWidgetId, currentWidgetGroupId, {
- ...currentWidget,
- coordinateValue: {
- width: ref.offsetWidth,
- height: ref.offsetHeight,
- left: Number(position.x.toFixed(0)),
- top: Number(position.y.toFixed(0))
- }
- })
- }
-
- return (
-
- {children}
-
- )
-}
-
-export default Drag
diff --git a/src/pages/configuration/components/center/components/grid.tsx b/src/pages/configuration/components/center/components/grid.tsx
deleted file mode 100644
index 2fd1847..0000000
--- a/src/pages/configuration/components/center/components/grid.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import {
- FC
-} from 'react'
-
-interface IGridPrips {
- screen: any;
-}
-
-const Grid: FC = ({
- screen
-}) => {
- return (
- <>
- {
- screen.gridFlag ?
- : null
- }
-
- )
-}
-
-export default Grid
\ No newline at end of file
diff --git a/src/pages/configuration/components/center/index.tsx b/src/pages/configuration/components/center/index.tsx
deleted file mode 100644
index 3b56968..0000000
--- a/src/pages/configuration/components/center/index.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-import { FC, MouseEvent, useEffect, useRef } from 'react'
-import { IPage, IWidget } from '@store/actionType'
-import { contentMenuHandler } from '@utils/tools'
-// 所有组件地址
-import components from '@src/widget'
-// 接口
-import Request from '@src/components/request'
-// 拖动组件
-import Drag from './components/drag'
-// grid组件
-import Grid from './components/grid'
-// 屏幕辅助线
-import Auxiliary from './components/auxiliary'
-
-interface IDesignBodyCenterProps {
- currentPage: IPage
- currentWidgetId: string
- currentWidget: IWidget
- cale: number
- modifyLargeScreenElement: (id: string, groupId: string, data: IWidget) => void
- changeLargeScreenElement: (id: string, groupId?: string) => void
- screen: any
- currentWidgetGroupId: string
-}
-
-const DesignBodyCenter: FC = ({
- currentPage,
- currentWidgetId,
- modifyLargeScreenElement,
- changeLargeScreenElement,
- currentWidget,
- cale,
- screen,
- currentWidgetGroupId
-}) => {
- // 隐藏菜单
- const hideContentMenu = () => {
- document
- .querySelector('#js-content-menu')
- ?.setAttribute('style', 'display: none')
- }
- // 组组件单击时触发
- const groupWidgetClickHander = (e: MouseEvent, item: IWidget) => {
- e.preventDefault()
- e.stopPropagation()
- hideContentMenu()
- if (item.id !== currentWidgetId) {
- changeLargeScreenElement(item.id, item.id)
- }
- }
- //非组组件单击时触发
- const widgetClickHander = (
- e: MouseEvent,
- item: IWidget,
- groupConfig?: any
- ) => {
- e.preventDefault()
- e.stopPropagation()
- hideContentMenu()
- if (item.id !== currentWidgetId) {
- if (e.ctrlKey && !groupConfig && !currentWidgetGroupId) {
- changeLargeScreenElement(
- currentWidgetId ? `${currentWidgetId},${item.id}` : item.id
- )
- } else {
- changeLargeScreenElement(item.id, groupConfig?.id)
- }
- }
- }
-
- useEffect(() => {
- const clickHander = (e: any) => {
- hideContentMenu()
- }
- const wrap = document.querySelector('#js-elements-body')
- window.addEventListener('click', clickHander)
- window.addEventListener('contextmenu', clickHander)
- wrap?.addEventListener('scroll', clickHander)
- return () => {
- window.removeEventListener('click', clickHander)
- window.removeEventListener('contextmenu', clickHander)
- wrap?.removeEventListener('scroll', clickHander)
- }
- }, [])
- // 渲染组件
- const renderWidgets = (
- widgets: IWidget[],
- groupConfig?: any,
- group?: IWidget
- ) => {
- return (
- <>
- {widgets.map((item: any, index: number) => {
- // 说明有group组件
- if (item.widgets) {
- const Widget = components[item.code] || components[item.type]
- if (Widget) {
- let params = {}
- for (let i = 0; i < currentPage.widgets.length; i++) {
- if (currentPage.widgets[i].linkageIds.includes(item.id)) {
- params = {
- ...params,
- ...currentPage.widgets[i].dataValue.params
- }
- }
- }
- return (
-
-
- )
- }
- } else {
- // 没有group组件
- const Widget = components[item.code] || components[item.type]
- if (Widget) {
- let params = {}
- for (let i = 0; i < currentPage.widgets.length; i++) {
- if (currentPage.widgets[i].linkageIds.includes(item.id)) {
- params = {
- ...params,
- ...currentPage.widgets[i].dataValue.params
- }
- }
- }
- return (
-
-
- )
- }
- }
- })}
-
- )
- }
-
- return (
- <>
- = ({
- addLargeScreenElement,
- currentPageId,
- pastPage,
- futurePage,
- currentWidgetId,
- currentWidget,
- undoLargeScreen,
- redoLargeScreen,
- modifyLargeScreenElement,
- currentWidgetGroupId,
- delLargeScreenElement,
- copyLargeScreenElement,
- group,
- cancelGroup,
- currentPage,
- topLargescreenElement,
- bottomLargescreenElement,
- upLargescreenElement,
- downLargescreenElement
-}) => {
- const history = useHistory()
- // 向页面添加组件
- const addElement = (code: string) => {
- if (!currentPageId) {
- message.error('请先添加页面哦')
- return
- }
- if (widgetConfiguration[code]) {
- addLargeScreenElement({
- id: guid(),
- linkageIds: '',
- ...widgetConfiguration[code]
- })
- } else {
- message.info('该组件正在开发中...')
- }
- }
- // 撤销
- const undoHander = useCallback(() => {
- if (pastPage.length) {
- undoLargeScreen()
- }
- }, [pastPage.length, undoLargeScreen])
- // 恢复
- const redoHandler = useCallback(() => {
- if (futurePage.length) {
- redoLargeScreen()
- }
- }, [futurePage.length, redoLargeScreen])
-
- // 删除
- const delHandler = useCallback(
- (e: MouseEvent) => {
- if (currentWidgetId && !currentWidgetId.includes(',')) {
- delLargeScreenElement()
- message.success('删除成功')
- }
- },
- [currentWidgetId, delLargeScreenElement]
- )
-
- // 复制
- const copyHandler = useCallback(
- (e: MouseEvent) => {
- copyLargeScreenElement()
- message.success('复制成功')
- },
- [copyLargeScreenElement]
- )
-
- // 分组
- const groupHandler = useCallback(
- (e: MouseEvent) => {
- if (currentWidgetId && currentWidgetId.includes(',')) {
- group()
- message.success('分组成功')
- }
- },
- [currentWidgetId, group]
- )
-
- // 取消分组
- const cancelGroupHandler = useCallback(
- (e: MouseEvent) => {
- if (currentWidgetId && currentWidgetGroupId === currentWidgetId) {
- cancelGroup()
- message.success('取消分组成功')
- }
- },
- [currentWidgetId, cancelGroup]
- )
-
- // 移动上移下移左移右移
- const moveHander = useCallback(
- (field: 'top' | 'left' | 'bottom' | 'right') => {
- if (currentWidgetId) {
- const newCurrentWidget = JSON.parse(JSON.stringify(currentWidget))
- switch (field) {
- case 'top':
- newCurrentWidget.coordinateValue.top =
- newCurrentWidget.coordinateValue.top - 1
- break
- case 'left':
- newCurrentWidget.coordinateValue.left =
- newCurrentWidget.coordinateValue.left - 1
- break
- case 'bottom':
- newCurrentWidget.coordinateValue.top =
- newCurrentWidget.coordinateValue.top + 1
- break
- default:
- newCurrentWidget.coordinateValue.left =
- newCurrentWidget.coordinateValue.left + 1
- }
- modifyLargeScreenElement(
- currentWidgetId,
- currentWidgetGroupId,
- newCurrentWidget
- )
- }
- },
- [
- currentWidgetId,
- currentWidget,
- currentWidgetGroupId,
- modifyLargeScreenElement
- ]
- )
-
- // 确认框
- const showConfirm = (message: string, callback: Function) => {
- Modal.confirm({
- title: `您确定要${message}?`,
- icon: >;
- leftFlag: Boolean;
-}
-
-const DesignBodyLeft: FC = ({
- pages,
- addLargeScreenPage,
- delLargeScreenPage,
- modifyLargeScreenPage,
- changeLargeScreenPage,
- currentPageId,
- leftFlag,
- setLeftFlag
-}) => {
-
- // 弹窗参数
- const [modal, setModal] = useState({
- visible: false,
- title: '',
- details: {}
- })
-
- // 编辑
- const editHander = (item: IPage, e: MouseEvent) => {
- e.stopPropagation()
- setModal((state: any) => ({
- visible: true,
- title: '新增页面',
- details: item
- }))
- }
-
- // 删除页面
- const delHandler = (item: IPage, e: MouseEvent) => {
- e.stopPropagation()
- Modal.confirm({
- title: '温馨提示',
- icon: >
- rightFlag: Boolean
- currentWidgetGroupId: string
- showOrHideLargeScreenElement: (id: string, groupId?: string) => void
- changeLargeScreenElement: (id: string, groupId?: string) => void
-}
-
-const DesignBodyRight: FC = ({
- screen,
- modifyScreen,
- currentWidgetId,
- currentWidget,
- modifyLargeScreenElement,
- currentPage,
- setRightFlag,
- rightFlag,
- currentWidgetGroupId,
- showOrHideLargeScreenElement,
- changeLargeScreenElement
-}) => {
- const [key, setKey] = useState('1')
- // 配置from
- const [configureForm] = Form.useForm()
- // 页面from
- const [pageForm] = Form.useForm()
- // 坐标from
- const [dynamicForm] = Form.useForm()
- // 数据
- const [dataForm] = Form.useForm()
- // 联动
- const [linkageForm] = Form.useForm()
-
- useEffect(() => {
- if (currentWidget.configureValue) {
- configureForm.setFieldsValue(currentWidget.configureValue)
- }
- if (currentWidget.coordinateValue) {
- dynamicForm.setFieldsValue(currentWidget.coordinateValue)
- }
- if (currentWidget.dataValue) {
- dataForm.setFieldsValue(currentWidget.dataValue)
- }
- if (currentWidget.linkageIds) {
- linkageForm.setFieldsValue({
- linkageIds: currentWidget.linkageIds.split(',')
- })
- }
- }, [currentWidget])
- // 判断数据是Array 或者 object
- const judgeType = (data: any, type: string) => {
- return Object.prototype.toString.call(data) == type
- }
-
- /**
- *
- * @param callback 返回的方法
- * @param name 表单名
- * @param value 表单值
- * @param field 字段名
- */
- const onChangeHandler = (
- callback: Function,
- name: string,
- value: any,
- field: string
- ) => {
- if (!field) {
- callback &&
- callback({
- [name]: value
- })
- } else {
- const newCurrentWidget = JSON.parse(JSON.stringify(currentWidget))
- newCurrentWidget[field][name] = value
- callback &&
- callback(currentWidgetId, currentWidgetGroupId, newCurrentWidget)
- }
- }
-
- /**
- * 基础表单
- * @param item 单个配置项
- * @param form 表单实例
- * @param callback 返回方法
- * @param field 字段名
- * @param isUpdate 是否change更新
- * @returns
- */
- const baseForm = (
- item: any,
- form: FormInstance,
- callback: Function,
- field: string,
- isUpdate: boolean = true
- ) => {
- return (
- <>
- {item.componentName === 'Input' && (
-
-
- isUpdate &&
- onChangeHandler(callback, item.name, e.target.value, field)
- }
- placeholder={item.placeholder}
- />
-
- )}
- {item.componentName === 'InputNumber' && (
-
-
- isUpdate &&
- onChangeHandler(
- callback,
- item.name,
- e.target.value ? Number(e.target.value) : 0,
- field
- )
- }
- style={{ width: '100%' }}
- placeholder={item.placeholder}
- />
-
- )}
- {item.componentName === 'TextArea' && (
-
-
+ color: "#00000040", + margin: "0", + }} + > 加载失败
+
- )
-}
+ );
+};
-export default Wrapper
+export default Wrapper;
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..f6b547c
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,16 @@
+module.exports = {
+ // 站点名称
+ sitename: "大屏管理系统",
+ // 站点标题
+ title: "大屏的后台管理系统",
+ // 站点描述
+ description: "我是站点描述",
+ // 站点关键词
+ keywords: "我是站点关键词",
+ // 开发环境接口地址
+ developmentApi: "",
+ // 正式环境接口地址
+ productionApi: "",
+ // 主题
+ theme: "theme01",
+};
diff --git a/src/config/index.ts b/src/config/index.ts
deleted file mode 100644
index ca10b07..0000000
--- a/src/config/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IAnyObject } from '@src/types'
-
-interface IConfig {
- [propName: string]: IAnyObject
-}
-
-// 这里是后台接口前缀
-export const config: IConfig = {
- development: {
- default: 'http://192.168.200.7:9900',
- localhost: '/',
- hjcLocalhost: 'http://192.168.200.7:9900',
- wjLocalhost: 'http://192.168.200.7:9900'
- },
- production: {
- default: 'http://yjyj.hkdata.com',
- localhost: '/',
- hjcLocalhost: 'http://yjyj.hkdata.com',
- wjLocalhost: 'http://yjyj.hkdata.com'
- }
-}
diff --git a/src/config/table-config.ts b/src/config/table-config.ts
deleted file mode 100644
index 5a36a89..0000000
--- a/src/config/table-config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-const tableConfig = {
- bordered: true,
- pagination: {
- show: true,
- pageSize: 10,
- current: 1
- },
- showHeader: true,
- hasData: true,
- tableLayout: undefined,
- dateValueType: 'date',
- search: {
- span: 6,
- collapseRender: undefined,
- labelWidth: 100
- },
- options: {
- show: true,
- density: true,
- // fullScreen: true,
- setting: true
- },
- rowKey: 'id'
-};
-
-export default tableConfig;
diff --git a/src/core/hook/components.hook.tsx b/src/core/hook/components.hook.tsx
new file mode 100644
index 0000000..f1314b1
--- /dev/null
+++ b/src/core/hook/components.hook.tsx
@@ -0,0 +1,263 @@
+import { useCallback, useState } from "react";
+import {
+ IComponentsTotalItem,
+ IComponentstrendItem,
+ IComponentsTeaderboardItem,
+ IComponentsTypeItem,
+ IComponentsItem,
+} from "@src/service";
+import { API } from "@service/index";
+
+const flatten = (arr: IComponentsTypeItem[]) => {
+ return arr
+ .reduce((result, item) => {
+ return result.concat(
+ item,
+ item.children && Array.isArray(item.children)
+ ? flatten(
+ item.children.map((subItem: any) => ({
+ ...subItem,
+ pid: item.id,
+ }))
+ )
+ : []
+ );
+ }, [])
+ .sort(
+ (a: IComponentsTypeItem, b: IComponentsTypeItem) => a.level - b.level
+ );
+};
+
+export function useComponents() {
+ // 统计
+ const [total, setTotal] = useState<{
+ loading: boolean;
+ datas: IComponentsTotalItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getTotal = useCallback(() => {
+ setTotal((state) => ({
+ ...state,
+ loading: true,
+ }));
+ API.componentsService
+ .total()
+ .then((res) => {
+ setTimeout(() => {
+ setTotal({
+ loading: false,
+ datas: res.data,
+ });
+ }, 3000);
+ })
+ .catch(() => {
+ setTotal((state) => ({
+ ...state,
+ loading: false,
+ }));
+ });
+ }, []);
+
+ // 新增组件统计图
+ const [trend, setTrend] = useState<{
+ loading: boolean;
+ datas: IComponentstrendItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getTrend = useCallback(() => {
+ setTrend((state) => ({
+ ...state,
+ loading: true,
+ }));
+ API.componentsService
+ .trendChart()
+ .then((res) => {
+ setTimeout(() => {
+ setTrend({
+ loading: false,
+ datas: res.data,
+ });
+ }, 2000);
+ })
+ .catch(() => {
+ setTrend((state) => ({
+ ...state,
+ loading: false,
+ }));
+ });
+ }, []);
+
+ // 使用排行榜TOP8
+ const [leaderboard, setLeaderboard] = useState<{
+ loading: boolean;
+ datas: IComponentsTeaderboardItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getLeaderboard = useCallback(() => {
+ setLeaderboard((state) => ({
+ ...state,
+ loading: true,
+ }));
+ API.componentsService
+ .leaderboard()
+ .then((res) => {
+ setTimeout(() => {
+ setLeaderboard({
+ loading: false,
+ datas: res.data.sort((a, b) => a.value - b.value),
+ });
+ }, 2000);
+ })
+ .catch(() => {
+ setLeaderboard((state) => ({
+ ...state,
+ loading: false,
+ }));
+ });
+ }, []);
+
+ // 获取组件类型
+ const [types, setTypes] = useState<{
+ loading: boolean;
+ datas: IComponentsTypeItem[];
+ }>({
+ loading: false,
+ datas: [],
+ });
+
+ const getTypes = useCallback(async () => {
+ setTypes((state) => ({
+ ...state,
+ loading: true,
+ }));
+ try {
+ const { data } = await API.componentsService.types();
+ const datas: IComponentsTypeItem[] = flatten(data);
+ if (datas.length) {
+ const selects = new Array(datas[datas.length - 1].level).fill("");
+ selects[0] = data[0].id;
+ setTypes({
+ loading: false,
+ datas: datas,
+ });
+ // 设置类型参数个数
+ setList((state) => ({
+ ...state,
+ params: {
+ ...state.params,
+ type: selects,
+ },
+ }));
+ }
+ } catch (e) {
+ setTypes((state) => ({
+ ...state,
+ loading: false,
+ }));
+ }
+ }, []);
+
+ // 获取组件列表
+ const [list, setList] = useState<{
+ loading: boolean;
+ datas: IComponentsItem[];
+ searchDatas: IComponentsItem[];
+ params: {
+ type: string[];
+ };
+ }>({
+ loading: false,
+ datas: [],
+ searchDatas: [],
+ params: {
+ type: [],
+ },
+ });
+
+ const listSearchHandler = useCallback(
+ (field: string, value: any, index?: number) => {
+ switch (field) {
+ case "type": {
+ setList((state) => {
+ const arr = [...state.params.type];
+ arr[index as number] = value;
+ if (index === 0) {
+ const item = types.datas.find((item) => item.id === value);
+ if (item && item.children) {
+ arr[(index as number) + 1] = item.children[0].id;
+ } else {
+ arr[(index as number) + 1] = "";
+ }
+ }
+ const selects: string[] = new Array(arr.length).fill("");
+ for (let i = 0; i < arr.length; i++) {
+ const item = types.datas.find((item) => item.id === arr[i]);
+ if (item) {
+ selects[i] = item.value;
+ }
+ }
+ return {
+ ...state,
+ searchDatas: state.datas.filter(
+ (item) =>
+ item.level1Type.includes(selects[0]) &&
+ item.level2Type.includes(selects[1])
+ ),
+ params: {
+ ...state.params,
+ type: arr,
+ },
+ };
+ });
+ }
+ }
+ },
+ [types.datas]
+ );
+
+ const getList = useCallback(async () => {
+ setList((state) => ({
+ ...state,
+ loading: true,
+ }));
+ try {
+ const { data } = await API.componentsService.list();
+ setTimeout(() => {
+ setList((state) => ({
+ ...state,
+ loading: false,
+ datas: data,
+ searchDatas: data,
+ }));
+ }, 1000);
+ } catch (e) {
+ setList((state) => ({
+ ...state,
+ loading: false,
+ }));
+ }
+ }, []);
+
+ return {
+ total,
+ getTotal,
+ trend,
+ getTrend,
+ leaderboard,
+ getLeaderboard,
+ types,
+ listSearchHandler,
+ getTypes,
+ list,
+ getList,
+ };
+}
diff --git a/src/core/hook/index.ts b/src/core/hook/index.ts
new file mode 100644
index 0000000..7a2e8d9
--- /dev/null
+++ b/src/core/hook/index.ts
@@ -0,0 +1,4 @@
+export * from "./login.hook";
+export * from "./userInfo.hook";
+export * from "./components.hook";
+export * from "./widgets.hook";
diff --git a/src/core/hook/login.hook.tsx b/src/core/hook/login.hook.tsx
new file mode 100644
index 0000000..dd7cb7a
--- /dev/null
+++ b/src/core/hook/login.hook.tsx
@@ -0,0 +1,29 @@
+import { useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { API } from "@service/index";
+export function useLogin() {
+ // 是否处理loading状态
+ const [loginLoading, setLoginLoading] = useState
+ {data && data[field] ? data[field] : "文本框"}
+
+ );
+};
+export default BaseText;
diff --git a/src/elements/text/index.ts b/src/elements/text/index.ts
new file mode 100644
index 0000000..c959f6f
--- /dev/null
+++ b/src/elements/text/index.ts
@@ -0,0 +1,6 @@
+// 基础文本
+import BaseText from "./base-text";
+const text = {
+ BaseText,
+};
+export default text;
diff --git a/src/index.scss b/src/index.scss
deleted file mode 100644
index d345e54..0000000
--- a/src/index.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-/*公用搜索样式*/
-
-@include b(search) {
- margin-bottom: 10px;
- padding: 15px 10px 0 10px;
- background: #fff;
- border-radius: 5px;
- @include e(list) {
- display: flex;
- flex-wrap: wrap;
- }
- @include e(item) {
- width: 300px;
- display: flex;
- align-items: center;
- padding-bottom: 15px;
- overflow: hidden;
- .label {
- width: 100px;
- text-align: right;
- }
- .value {
- flex: 1;
- overflow: hidden;
- }
- }
-}
-
-/*公用表格*/
-
-@include b(table) {
- @include e(operation) {
- position: relative;
- left: -5px;
- display: flex;
- align-items: center;
- .link {
- opacity: 1;
- color: #1890ff;
- cursor: pointer;
- margin: 0 5px;
- transition: all 0.25s ease 0s;
- &:hover {
- opacity: 0.8;
- }
- }
- .num {
- display: inline;
- min-width: 60px;
- color: #333;
- }
- }
-}
-
-.link {
- color: #1890ff;
- transition: all 0.25s ease 0s;
- cursor: pointer;
- &:hover {
- color: #40a9ff;
- }
-}
-
-/* 设置滚动条的样式 */
-
-::-webkit-scrollbar {
- width: 6px;
- height: 6px;
-}
-
-/* 滚动槽 */
-
-::-webkit-scrollbar-track {
- border-radius: 6px;
-}
-
-/* 滚动条滑块 */
-
-::-webkit-scrollbar-thumb {
- border-radius: 6px;
- background: rgba(255, 255, 255, 0.5);
-}
-
-::-webkit-scrollbar-thumb:window-inactive {
- background: rgba(255, 255, 255, 0.5);
-}
-
-.ant-pro-table .ant-pro-table-search {
- margin-bottom: 10px;
-}
-
-.ant-tabs-content-left .ant-tabs-tabpane {
- padding-left: 10px !important;
-}
-
-@keyframes rotate {
- 0% {
- transform: rotate(0);
- }
- 100% {
- transform: rotate(360deg);
- }
-}
-
-// 右击菜单样式
-@include b(content-menu) {
- display: none;
- position: fixed;
- left: 300px;
- top: 200px;
- z-index: 99999;
- width: 200px;
- background-color: #666;
- border: 1px solid rgba(0, 0, 0, 0.8);
- border-radius: 5px;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
- overflow: hidden;
- @include e(item) {
- display: flex;
- padding: 0 10px;
- line-height: 30px;
- cursor: pointer;
- color: rgba(255, 255, 255, 0.8);
- transition: all 0.25s ease 0s;
- &:hover {
- color: #fff;
- background-color: #444;
- }
- .app-icon {
- padding-right: 10px;
- }
- .name {
- flex: 1;
- }
- &:last-child {
- border: none;
- }
- @include when(disabled) {
- cursor: no-drop;
- color: rgba(255, 255, 255, 0.4);
- &:hover {
- color: rgba(255, 255, 255, 0.4);
- background-color: #666;
- }
- }
- @include when(border) {
- border-bottom: 1px solid rgba(0, 0, 0, 0.4);
- }
- }
-}
-
-#js_loading {
- position: fixed;
- left: 50%;
- top: 59%;
- transform: translate(-50%, -100px);
- display: none;
- align-items: center;
- justify-content: center;
- width: 80px;
- height: 80px;
- border-radius: 10px;
- background: rgba(0, 0, 0, 0.85);
- .ant-spin {
- color: #fff;
- }
- .ant-spin-dot-item {
- background: #fff;
- }
-}
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 230da20..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * @Description: 页面描述
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-09-04 16:50:14
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-10-10 21:06:49
- * @FilePath: \bigscreen\src\index.tsx
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import ReactDOM from 'react-dom'
-import { ConfigProvider } from 'antd'
-import moment from 'moment'
-import App from './App'
-import { persistStore } from 'redux-persist'
-import { PersistGate } from 'redux-persist/integration/react'
-import { Provider } from 'react-redux'
-import store from './store/index'
-import '@ant-design/pro-table/dist/table.css'
-// import 'default-passive-events'
-// 国际化
-import zhCN from 'antd/lib/locale/zh_CN'
-import 'moment/locale/zh-cn'
-import 'antd/dist/antd.min.css'
-import './index.scss'
-import './mock'
-moment.locale('zh-cn')
-const persistor = persistStore(store)
-
-ReactDOM.render(
-
+
+
+
+ );
+};
+
+export default Components;
diff --git a/src/pages/configuration/components/add-or-edit-page/index.tsx b/src/pages/configuration/components/add-or-edit-page/index.tsx
deleted file mode 100644
index c4e3203..0000000
--- a/src/pages/configuration/components/add-or-edit-page/index.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * @Description: 页面描述
- * @Author: hejp 378540660@qq.com
- * @Date: 2022-09-04 16:50:14
- * @LastEditors: hejp 378540660@qq.com
- * @LastEditTime: 2022-09-09 20:35:48
- * @FilePath: \bigscreen\src\pages\configuration\components\add-or-edit-page\index.tsx
- * Copyright (c) 2022 by hejp 378540660@qq.com, All Rights Reserved.
- */
-import React, { FC, useEffect } from 'react'
-import { Button, Form, Input, message } from 'antd'
-import { IPage } from '@src/store/actionType'
-import { guid } from '@src/utils/tools'
-import { useForm } from 'antd/lib/form/Form'
-
-interface IAddOrEditPageProps {
- setModal: React.Dispatch-
+ {list.params.type.map((_, index) => {
+ if (index === 0) {
+ return (
+
- {
- arr.map(item => (
-
- ))
- }
-
: null
- }
-
- )
-}
-
-export default Auxiliary
\ No newline at end of file
diff --git a/src/pages/configuration/components/center/components/drag.tsx b/src/pages/configuration/components/center/components/drag.tsx
deleted file mode 100644
index 1f5eaab..0000000
--- a/src/pages/configuration/components/center/components/drag.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import { FC, ReactNode } from 'react'
-import { Rnd } from 'react-rnd'
-import { IWidget } from '@src/store/actionType'
-
-interface IDragProps {
- item: any
- currentWidgetId: string
- currentWidget: IWidget
- cale: number
- modifyLargeScreenElement: (id: string, groupId: string, data: IWidget) => void
- children: ReactNode
- className: string
- currentWidgetGroupId: string
-}
-
-const Drag: FC {
- groupWidgetClickHander(e, item)
- contentMenuHandler(e)
- }}
- onClick={(e: any) => groupWidgetClickHander(e, item)}
- className={`app-widget__item ${
- currentWidgetId.includes(item.id) ? 'is-active' : ''
- }`}>
- {
- return (
- <>
-
- {renderWidgets(
- item.widgets,
- {
- ...item,
- dataValue: {
- ...item.dataValue,
- mock: item.dataValue.useInterface
- ? data
- : item.dataValue.mock
- },
- success,
- parentParams: {
- ...item.dataValue.params,
- ...params
- }
- },
- item
- )}
-
-
- )
- }}>
-
-
- {/* 辅助线 */}
-
-
- {/* 坐标值 */}
-
-
- {item.coordinateValue.left},{item.coordinateValue.top}
-
- {
- contentMenuHandler(e)
- widgetClickHander(e, item, groupConfig)
- }}
- onClick={(e) => widgetClickHander(e, item, groupConfig)}
- className={`app-widget__item ${
- currentWidgetId.includes(item.id) ? 'is-active' : ''
- }`}>
- {
- // 确定数据
- let datas: any = null
- if (
- item.dataValue.useInterface &&
- groupConfig &&
- groupConfig.dataValue
- ) {
- datas = groupConfig.dataValue.mock
- } else {
- datas =
- item.dataValue.dataType === 'mock'
- ? item.dataValue.mock
- : success
- ? data
- : null
- }
-
- return (
-
-
-
- {/* 辅助线 */}
-
-
- {/* 坐标值 */}
-
-
- {item.coordinateValue.left},{item.coordinateValue.top}
-
-
-
-
-
- {/* elements start */}
-
- )
-}
-
-export default DesignHeader
diff --git a/src/pages/configuration/components/left/index.scss b/src/pages/configuration/components/left/index.scss
deleted file mode 100644
index f86f15d..0000000
--- a/src/pages/configuration/components/left/index.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@include b(screen-disign) {
- @include e(body) {
- @include m(left) {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- z-index: 101;
- width: 200px;
- background-color: #535353;
- border-right: 1px solid rgba(0, 0, 0, .8);
- transition: all .25s ease 0s;
- .header {
- height: 30px;
- padding: 0 10px;
- line-height: 30px;
- color: #a0a0a0;
- font-size: 12px;
- background-color: #424242;
- border-bottom: 1px solid #383838;
- border-top: 1px solid #383838;
- }
- .body {
- padding: 10px;
- }
- .page {
- overflow: hidden;
- }
- .page-item {
- display: flex;
- width: calc(100% + 80px);
- position: relative;
- padding: 0 0 0 10px;
- cursor: pointer;
- line-height: 40px;
- color: rgba(255, 255, 255, .6);
- border-bottom: 1px solid #383838;
- border-left: 5px solid transparent;
- transition: all .25s ease 0s;
- box-sizing: border-box;
- &.is-noactive:hover {
- transform: translateX(-80px);
- }
- &:hover {
- color: #fff;
- }
- .name {
- flex: 1;
- @include single();
- }
- @include when(active) {
- font-weight: bold;
- color: #fff;
- border-left-color: #1890ff;
- }
- }
- .page-item__operation {
- display: flex;
- width: 80px;
- >span {
- flex: 1;
- text-align: center;
- border-left: 1px solid #383838;
- transition: all .25s ease 0s;
- &:hover {
- background-color: #1890ff;
- }
- }
- }
- .operation {
- width: 30px;
- height: 30px;
- background: #535353;
- position: absolute;
- top: 50%;
- right: -30px;
- margin-top: -15px;
- padding-left: 5px;
- border: 1px solid rgba(0, 0, 0, 0.8);
- border-left-color: transparent;
- border-top-right-radius: 15px;
- border-bottom-right-radius: 15px;
- box-shadow: 4px 0 7px rgba(0, 0, 0, .3);
- cursor: pointer;
- color: rgba(255, 255, 255, .6);
- line-height: 30px;
- font-size: 16px;
- transition: all .25s ease 0s;
- &:hover {
- color: #fff;
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/src/pages/configuration/components/left/index.tsx b/src/pages/configuration/components/left/index.tsx
deleted file mode 100644
index 39e6373..0000000
--- a/src/pages/configuration/components/left/index.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, {
- FC, MouseEvent, useState
-} from 'react'
-import './index.scss'
-import { Button, message, Modal, Tooltip } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import { IPage } from '@src/store/actionType'
-import { FormOutlined, DeleteOutlined, ExclamationCircleOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
-
-// 新增页面表单
-import AddOrEditPage from '../add-or-edit-page'
-
-interface IDesignBodyLeftProps {
- pages: IPage[];
- addLargeScreenPage: (data: IPage, callback?: Function) => void;
- delLargeScreenPage: (id: string, callback?: Function) => void;
- modifyLargeScreenPage: (id: string, data: IPage, callback?: Function) => void;
- changeLargeScreenPage: (id: string, callback?: Function) => void;
- currentPageId?: string;
- setLeftFlag: React.Dispatch-
- {componentsClassify.map((item: any, index: number) => (
-
- {
- if (!item.datas) {
- addElement(item.widgetName)
- }
- }}
- key={item.type}>
-
-
{item.name}
- {item.datas && item.datas.length ? ( -- {item.datas.map((subItem: any, subIndex: string) => ( -- ) : ( - '' - )} -{ - if (subItem.widgetName) { - if ( - (item.type === 'form' && currentWidgetGroupId) || - item.type !== 'form' - ) { - addElement(subItem.widgetName) - } - } - }} - key={subIndex}> -- ))} -- {subItem.src ? ( --- ) : ( -
- )} - - {subItem.name} --
- ))}
-
-
- -
-
-
-
- - -分组
-
- -
-
- - -拆分
-
-
-
-
-
-
- - -复制
-
- - showConfirm('删除', delHandler)}
- className={`${
- currentWidgetId && !currentWidgetId.includes(',')
- ? ''
- : 'is-disabled'
- }`}>
-
- - -删除
-
-
-
-
-
-
- -- 撤销
-
- -
-
- -- 恢复
-
-
-
-
- moveHander('top')}
- className={`${
- !currentWidgetId || currentWidgetId.includes(',')
- ? 'is-disabled'
- : ''
- }`}>
-
- - -上移
-
- - moveHander('bottom')}
- className={`${
- !currentWidgetId || currentWidgetId.includes(',')
- ? 'is-disabled'
- : ''
- }`}>
-
- - -下移
-
- - moveHander('left')}
- className={`${
- !currentWidgetId || currentWidgetId.includes(',')
- ? 'is-disabled'
- : ''
- }`}>
-
- - -左移
-
- - moveHander('right')}
- className={`${
- !currentWidgetId || currentWidgetId.includes(',')
- ? 'is-disabled'
- : ''
- }`}>
-
- - -右移
-
-
-
-
-
-
- - -保存
-
- - {
- if (currentPageId) {
- history.push(`/frame/preview?pageId=${currentPageId}`)
- }
- }}
- className={`${!currentPageId ? 'is-disabled' : ''}`}>
-
- - -预览
-
-
-
-
- history.goBack()}>
-
-
-
- {/* 新增编辑页面弹窗 */}
- setModal((state: any) => ({
- ...state,
- visible: false
- }))}>
-
-
- )
-}
-export default DesignBodyLeft
\ No newline at end of file
diff --git a/src/pages/configuration/components/right/index.scss b/src/pages/configuration/components/right/index.scss
deleted file mode 100644
index ae8de29..0000000
--- a/src/pages/configuration/components/right/index.scss
+++ /dev/null
@@ -1,200 +0,0 @@
-@include b(screen-disign) {
- @include e(body) {
- @include m(right) {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- z-index: 101;
- width: 400px;
- background-color: #535353;
- border-left: 1px solid rgba(0, 0, 0, 0.8);
- transition: all 0.25s ease 0s;
- .ant-tabs-content {
- height: calc(100vh - 100px);
- overflow: hidden;
- overflow-y: auto;
- }
- textarea::placeholder,
- input::placeholder {
- color: rgba(255, 255, 255, 0.1);
- }
- .custom-tabs {
- .ant-tabs-nav {
- background-color: #424242;
- &:before {
- border-bottom-color: #383838;
- }
- }
- .ant-tabs-tab {
- margin: 0;
- padding: 5px 10px;
- background-color: #424242;
- border-bottom: 1px solid #383838;
- border-right: 1px solid #383838;
- color: #a0a0a0;
- }
- .ant-tabs-tab-active {
- background-color: #535353;
- border-bottom: none;
- .ant-tabs-tab-btn {
- color: #fff;
- }
- }
- .ant-tabs-ink-bar {
- display: none;
- }
- }
- .ant-form-item {
- padding: 0 15px 16px 15px;
- margin-bottom: 0;
- .anticon {
- color: rgba(255, 255, 255, 0.6);
- }
- }
- .ant-form-item-label > label {
- color: rgba(255, 255, 255, 0.6);
- }
- .ant-select-selector,
- .ant-input-affix-wrapper,
- .ant-input,
- .ant-input-number,
- .ant-select-selection-item {
- background-color: #424242 !important;
- border: 1px solid #383838;
- color: rgba(255, 255, 255, 0.4) !important;
- }
- .ant-input-number-handler-wrap {
- background-color: #424242 !important;
- border: none;
- color: rgba(255, 255, 255, 0.4) !important;
- }
- .ant-input-number-handler {
- border: none !important;
- }
- .ant-select-selector {
- border: 1px solid #383838 !important;
- }
- .ant-collapse {
- background: none;
- border: none;
- .ant-collapse {
- padding-left: 8px;
- }
- &-header {
- padding: 8px 10px !important;
- color: rgba(255, 255, 255, 0.6) !important;
- border-top: 1px solid #383838;
- }
- &-item {
- border-radius: 0;
- border: none;
- }
- &-content {
- padding-top: 16px;
- background: none;
- border: none;
- border-top: 1px solid #383838;
- background-color: #494949;
- &-box {
- padding: 0 !important;
- }
- }
- }
- .color-wrapper {
- position: relative;
- width: 100%;
- height: 32px;
- text-align: center;
- line-height: 32px;
- color: #fff;
- cursor: pointer;
- background-color: #424242;
- border: 1px solid #383838;
- border-radius: 3px;
- &:hover .color {
- display: block;
- }
- .color {
- position: absolute;
- right: 0;
- z-index: 100;
- display: none;
- }
- }
- .operation {
- width: 30px;
- height: 30px;
- background: #535353;
- position: absolute;
- top: 50%;
- left: -30px;
- margin-top: -15px;
- padding-left: 10px;
- border: 1px solid rgba(0, 0, 0, 0.8);
- border-right-color: transparent;
- border-top-left-radius: 15px;
- border-bottom-left-radius: 15px;
- box-shadow: -4px 0 7px rgba(0, 0, 0, 0.3);
- cursor: pointer;
- color: rgba(255, 255, 255, 0.6);
- line-height: 30px;
- font-size: 16px;
- transition: all 0.25s ease 0s;
- &:hover {
- color: #fff;
- }
- }
- }
- }
- @include e(layer) {
- text-align: left;
- .app-screen-disign__layer {
- > .header {
- padding-left: 10px;
- }
- .app-screen-disign__layer--item .header {
- padding-left: 34px;
- }
- }
- .header {
- display: flex;
- height: 36px;
- line-height: 36px;
- color: rgba(255, 255, 255, 0.6);
- border-bottom: 1px solid #383838;
- cursor: pointer;
- transition: all 0.25s ease 0s;
- &:hover {
- background-color: rgba(0, 0, 0, 0.1);
- }
- @include when(active) {
- color: #fff;
- background-color: rgba(0, 0, 0, 0.1);
- }
- > span {
- display: block;
- }
- .show {
- &:hover {
- color: #fff;
- transform: rotate(-15deg);
- }
- }
- .show,
- .file {
- width: 24px;
- text-align: center;
- transition: all 0.25s ease 0s;
- }
- .label {
- padding-left: 10px;
- }
- }
- @include m(item) {
- .header {
- padding-left: 10px;
- }
- }
- }
-}
diff --git a/src/pages/configuration/components/right/index.tsx b/src/pages/configuration/components/right/index.tsx
deleted file mode 100644
index 05d4ea3..0000000
--- a/src/pages/configuration/components/right/index.tsx
+++ /dev/null
@@ -1,783 +0,0 @@
-import React, { FC, MouseEvent, useEffect, useMemo, useState } from 'react'
-import './index.scss'
-import {
- Tabs,
- Form,
- Input,
- InputNumber,
- FormInstance,
- Row,
- Col,
- Select,
- Collapse,
- Switch,
- Slider,
- Button
-} from 'antd'
-import { ChromePicker } from 'react-color'
-import { IPage, IScreen, IWidget } from '@src/store/actionType'
-import Wrapper from '@src/components/wrapper'
-import {
- LeftOutlined,
- RightOutlined,
- EyeOutlined,
- EyeInvisibleOutlined,
- FolderOutlined,
- FolderOpenOutlined
-} from '@ant-design/icons'
-import { contentMenuHandler } from '@utils/tools'
-// 配置文件
-import configuration from '@src/widget/tools/main'
-// JSON编辑器
-import JsonEditor from '@src/components/json-editor'
-// 微件配置文件
-const { widgetTypesConfiguration, widgetConfiguration, baseConfiguration } =
- configuration
-
-const { TextArea } = Input
-const { TabPane } = Tabs
-const { Option } = Select
-const { Panel } = Collapse
-
-interface IDesignBodyRightProps {
- screen: IScreen
- modifyScreen: (datas: any) => void
- currentWidgetId: string
- currentWidget: IWidget
- modifyLargeScreenElement: (id: string, groupId: string, data: IWidget) => void
- currentPage: IPage
- setRightFlag: React.Dispatch
-
-
- 页面列表
- -
- {
- pages.map(item => (
-
- {
- if (item.id !== currentPageId) {
- changeLargeScreenPage(item.id as string, () => {
- message.success('页面切换成功')
- })
- }
- }}
- className={`page-item ${item.id === currentPageId ? 'is-active' : 'is-noactive'}`}>
- {item.name}- {/* 当前页面不允许编辑和删除 */} - { - item.id !== currentPageId && --- } -
- editHander(item, e)} - > - -- - - delHandler(item, e)}> - -- -
- ))
- }
-
setLeftFlag(!leftFlag)}
- className="operation">
- {
- leftFlag ?
-