From 08b75f406c7dfce9a19739758b03141ef067c5cf Mon Sep 17 00:00:00 2001 From: "liupo.wu" Date: Thu, 28 Jul 2022 09:23:00 +0800 Subject: [PATCH 1/2] fix: lint, types --- package.json | 2 +- public/img/ring.png | Bin 0 -> 7385 bytes shim.d.ts | 1 + src/App.vue | 16 +- src/api/login/index.ts | 20 +- src/api/menu/index.ts | 20 +- src/assets/logo-mini.png | Bin 0 -> 2260 bytes src/assets/logo-mini.svg | 9 - src/components/crud/edit.vue | 140 ++ src/components/crud/index.vue | 155 +++ src/components/crud/types.ts | 665 +++++++++ src/components/crud/view.vue | 65 + src/layout/logo/index.vue | 2 +- src/layout/navBars/breadcrumb/breadcrumb.vue | 4 +- src/layout/navBars/breadcrumb/setings.vue | 460 +++---- src/layout/navBars/breadcrumb/settings.scss | 137 ++ src/layout/navBars/breadcrumb/user.vue | 4 +- src/layout/navBars/tagsView/tagsView.vue | 9 +- src/main.ts | 8 +- src/router/backEnd.ts | 10 +- src/router/dynamic.ts | 1119 ++++++++++++++++ src/router/frontEnd.ts | 4 +- src/router/index.ts | 2 +- src/router/notfound.ts | 24 + src/router/route.ts | 1191 ----------------- src/router/static.ts | 52 + src/theme/app.scss | 3 +- src/utils/eventbus.ts | 5 + src/utils/other.ts | 41 - src/utils/request.ts | 19 +- src/utils/storage.ts | 4 +- src/utils/wartermark.ts | 4 +- src/views/chart/index.vue | 41 +- src/views/fun/echartsMap/index.vue | 6 +- src/views/fun/echartsMap/mock.ts | 4 +- src/views/home/index.vue | 42 +- src/views/login/component/account.vue | 2 +- src/views/login/index.vue | 2 +- src/views/make/svgDemo/index.vue | 2 +- src/views/pages/formAdapt/index.vue | 10 +- .../formRules/component/formRulesOne.vue | 6 +- .../formRules/component/formRulesTwo.vue | 4 +- src/views/pages/lazyImg/index.vue | 4 +- src/views/pages/steps/index.vue | 2 +- src/views/pages/tree/index.vue | 29 +- .../pages/workflow/component/drawer/node.vue | 13 +- src/views/personal/index.vue | 10 +- src/views/system/dept/component/addDept.vue | 2 +- src/views/system/dept/component/editDept.vue | 2 +- src/views/system/dic/component/addDic.vue | 2 +- src/views/system/dic/component/editDic.vue | 2 +- src/views/system/menu/component/addMenu.vue | 4 +- src/views/system/menu/component/editMenu.vue | 4 +- src/views/system/role/component/addRole.vue | 2 +- src/views/system/role/component/editRole.vue | 2 +- src/views/system/user/component/addUser.vue | 10 +- src/views/system/user/component/editUser.vue | 10 +- src/views/visualizing/demo1.scss | 315 +++++ src/views/visualizing/demo1.vue | 367 +---- src/views/visualizing/demo2.scss | 553 ++++++++ src/views/visualizing/demo2.vue | 1038 +------------- src/views/visualizing/mock/data2-option1.ts | 26 + src/views/visualizing/mock/data2-option2.ts | 127 ++ src/views/visualizing/mock/data2-option3.ts | 73 + src/views/visualizing/mock/data2-option3d.ts | 44 + src/views/visualizing/mock/data2-option4.ts | 82 ++ src/views/visualizing/mock/data2-option6.ts | 81 ++ src/views/visualizing/mock/demo1.ts | 6 +- 68 files changed, 4037 insertions(+), 3087 deletions(-) create mode 100644 public/img/ring.png create mode 100644 src/assets/logo-mini.png delete mode 100644 src/assets/logo-mini.svg create mode 100644 src/components/crud/edit.vue create mode 100644 src/components/crud/index.vue create mode 100644 src/components/crud/types.ts create mode 100644 src/components/crud/view.vue create mode 100644 src/layout/navBars/breadcrumb/settings.scss create mode 100644 src/router/dynamic.ts create mode 100644 src/router/notfound.ts create mode 100644 src/router/static.ts create mode 100644 src/utils/eventbus.ts create mode 100644 src/views/visualizing/demo1.scss create mode 100644 src/views/visualizing/demo2.scss create mode 100644 src/views/visualizing/mock/data2-option1.ts create mode 100644 src/views/visualizing/mock/data2-option2.ts create mode 100644 src/views/visualizing/mock/data2-option3.ts create mode 100644 src/views/visualizing/mock/data2-option3d.ts create mode 100644 src/views/visualizing/mock/data2-option4.ts create mode 100644 src/views/visualizing/mock/data2-option6.ts diff --git a/package.json b/package.json index 0dbbc97..e5fa1b6 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "author": "lyt_20201208", "license": "MIT", "scripts": { - "dev": "vite --force", + "dev": "vite", "build": "vite build", "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/" }, diff --git a/public/img/ring.png b/public/img/ring.png new file mode 100644 index 0000000000000000000000000000000000000000..be6af0478ec5fe44ba3923991491b222f5c16f6e GIT binary patch literal 7385 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 - + @@ -8,12 +8,12 @@ diff --git a/src/components/crud/index.vue b/src/components/crud/index.vue new file mode 100644 index 0000000..d9da8ae --- /dev/null +++ b/src/components/crud/index.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/src/components/crud/types.ts b/src/components/crud/types.ts new file mode 100644 index 0000000..259a4b8 --- /dev/null +++ b/src/components/crud/types.ts @@ -0,0 +1,665 @@ +export type ScopeContext = { + key: string; + value: any; + form: any; + index: number; + mode: string; + getComponentRef: Function; + componentRef: any; +}; + +export type PageQuery = { + page?: any; + form?: any; + sort?: any; +}; + +export type PageRes = { + currentPage?: number; + pageSize?: number; + total?: number; + records?: Array; +}; + +export type EditReq = { + form?: any; + row?: any; +}; + +export type AddReq = { + form?: any; +}; + +export type DelReq = { + row?: any; +}; + +export type InfoReq = { + mode?: string; + row?: any; +}; + +/** + * 请求配置 + */ +export type RequestProp = { + transformQuery?: (query: PageQuery) => object; + transformRes?: ({ res, query }: any) => PageRes; + editRequest?: (req: EditReq) => Promise; + pageRequest?: (query: any) => Promise; + addRequest?: (req: AddReq) => Promise; + delRequest?: (req: DelReq) => Promise; + infoRequest?: (req: InfoReq) => Promise; +}; +/** + * 组件配置 + */ +export type ComponentProps = { + /** + * 组件的名称 + */ + name: string; + /** + * vmodel绑定的目标属性名 + */ + vModel: string; + + /** + * 当原始组件名的参数被以上属性名占用时，可以配置在这里 + * 例如:原始组件有一个叫name的属性，你想要配置它，则可以按如下配置 + * ``` + * component:{ + * name:"组件的名称" + * props:{ + * name:"组件的name属性" <----------- + * } + * } + * ``` + */ + props: object; + + /** + * 组件其他参数 + * 事件：onXxx:(event)=>void 组件原始事件监听 + * on.onXxx:(context)=>void 组件事件监听(对原始事件包装) + * 样式：style、class等 + */ + [key: string]: any; +}; +/** + * 表格配置 + */ +export type TableProps = { + /** + * 列表数据变化事件处理 + */ + onDataChange: Function; + + /** + * [x]-table组件的配置 + */ + [key: string]: any; + + empty: any; +}; +/** + * [x]-col的配置 + */ +export type ColProps = { + span?: number; + [props: string]: any; +}; + +/** + * 表单对话框配置 + */ +export type FormWrapperProps = { + /** + * 对话框使用什么组件，[el-dialog,a-modal,n-modal,el-drawer,a-drawer,n-drawer] + */ + is?: string; + /** + * 对话框打开前事件处理 + * @param opts + */ + onOpen?: (opts: any) => void; + /** + * 对话框打开后事件处理 + * @param opts + */ + onOpened?: (opts: any) => void; + /** + * 对话框关闭后事件处理 + * @param opts + */ + onClosed?: (opts: any) => void; +}; +/** + * 表单分组-组配置 + */ +export type FormGroupItemProps = { + /** + * 分组标题（根据你使用的分组组件和组件库来确定标题） + */ + title?: string; + /** + * 分组标题（根据你使用的分组组件和组件库来确定标题） + */ + label?: string; + /** + * 分组标题（根据你使用的分组组件和组件库来确定标题） + */ + header?: string; + /** + * [a|el|n]-tab-panel的参数 + */ + tab?: any; + /** + * 插槽，可以用来自定义标题 + */ + slots?: { + [key: string]: any; + }; + /** + * 此分组包含哪些字段,keys数组 + */ + columns?: Array; + /** + * 其他配置 + * 支持el-collapse-item，el-tab-pane，a-collapse-panel，a-tab-pane 等组件的配置 + */ + [key: string]: any; +}; + +/** + * 表单分组配置 + */ +export type FormGroupProps = { + type?: string; + groups: { + [key: string]: FormGroupItemProps; + }; +}; +/** + * 表单配置 + */ +export type FormProps = { + /** + * 布局方式 + */ + display?: "flex" | "grid"; + /** + * a-col,el-col，n-col的配置 + * 可以配置跨列 {span:24}表示此字段占满一行 + */ + col?: ColProps; + /** + * 字段组件之前render + * @param scope + */ + prefixRender?: (scope: any) => any; + /** + * 字段组件之后render + * @param scope + */ + suffixRender?: (scope: any) => any; + /** + * 表单对话框/抽屉配置 + */ + wrapper?: FormWrapperProps; + /** + * 提交表单的方法（默认已经配置好，将会调用addRequest或者updateRequest） + */ + doSubmit?: () => Promise; + /** + * 提交前做一些操作 + */ + beforeSubmit: (context: any) => Promise; + /** + * 提交后做一些操作 + * @param context + */ + afterSubmit: (context: any) => Promise; + /** + * 表单重置时的操作 + */ + doReset?: () => Promise; + /** + * 表单分组配置 + */ + group?: FormGroupProps; + /** + * 其他表单配置 [x]-form的配置 + */ + [key: string]: any; +}; + +/** + * 表单字段帮助说明配置 + */ +export type FormItemHelperProps = { + /** + * 自定义渲染帮助说明 + * @param scope + */ + render?: (scope: any) => any; + /** + * 帮助文本 + */ + text?: string; + /** + * 帮助说明所在的位置，[ undefined | label] + */ + position?: string; + /** + * [a|el|n]-tooltip配置 + */ + tooltip?: object; +}; +/** + * 表单字段配置 + */ +export type FormItemProps = { + /** + * 表单字段组件配置 + */ + component?: ComponentProps; + /** + * 表单字段 [a|el|n]-col的配置 + * 一般用来配置跨列：{span:24} 占满一行 + */ + col?: ColProps; + /** + * 默认值 + */ + value?: any; + /** + * 帮助提示配置 + */ + helper?: string | FormItemHelperProps; + order?: number; +}; + +/** + * crud外部容器配置 + */ +export type ContainerProps = { + [key: string]: any; +}; + +/** + * 工具条配置 + */ +export type ToolbarProps = { + /** + * 按钮配置 + */ + buttons: { + /** + * 按钮key: 按钮配置 + */ + [key: string]: ButtonProps; + }; +}; + +/** + * 按钮配置 + */ +export type ButtonProps = { + /** + * 按钮文本 + */ + text?: string; + /** + * 图标 + * [图标的使用](/guide/start/icon.html) + */ + icon?: string; + /** + * 文本右侧图标 + */ + iconRight?: string; + /** + * 是否圆形按钮 + */ + circle?: boolean; + /** + * 序号 + */ + order?: number; + + /** + * 是否折叠此按钮，仅当rowHandle时有效 + * 当配置为true，将会收起到dropdown中 + */ + dropdown?: boolean; + + /** + * 点击事件 + */ + click: () => void; + + /** + * 其他按钮配置 [a|el|n]-button的配置，请查看对应ui组件的文档 + */ + [key: string]: any; +}; + +export type ActionbarProps = { + buttons: { + [key: string]: ButtonProps; + }; +}; + +/** + * 查询框配置 + */ +export type SearchProps = { + /** + * 是否显示查询框 + */ + show?: boolean; + /** + * 查询框的按钮配置（查询和重置按钮，你还可以添加自定义按钮） + */ + buttons?: { + [key: string]: ButtonProps; + }; + /** + * 按钮的位置 【default , bottom】 + */ + buttonsPosition?: string; + /** + * 布局方式：【single-line单行, multi-line多行】 + */ + layout?: string; + /** + * 查询表单参数 ,[a|el|n]-form的参数 + */ + options?: any; + /** + * 其他配置 + */ + [key: string]: any; +}; + +/** + * 搜索框字段配置 + */ +export type SearchItemProps = { + /** + * 组件配置 + */ + component?: ComponentProps; + /** + * 值解析器 + * @param context + */ + valueResolve?: (context: any) => void; + /** + * 字段排序号 + */ + order?: number; + /** + * [a|el|n]-col的配置 + */ + col?: ColProps; + /** + * 其他[a|el|n]-form-item的配置 + */ + [key: string]: any; +}; + +/** + * 单元格配置 + */ +export type ColumnProps = { + /** + * 单元格组件配置 + */ + component?: ComponentProps; + /** + * 在列设置中是否禁用勾选 + */ + columnSetDisabled?: Boolean; + /** + * 在列设置中是否显示此字段 + */ + columnSetShow?: Boolean; + /** + * 此列是否显示 + */ + show?: Boolean; + /** + * 列排序号 + */ + order?: number; + /** + * 格式化方法，比如格式化一下时间 + * @param scope + */ + formatter?: (scope: any) => string; + /** + * 自定义render方法 + * @param scope + */ + cellRender?: (scope: any) => any; + /** + * 其他x-table-column配置 + */ + [key: string]: any; +}; + +/** + * 列综合配置 + */ +export type ColumnCompositionProps = { + /** + * 列标题 + */ + title?: string; + /** + * 表格列配置（单元格） + */ + column?: ColumnProps; + /** + * 表单字段配置 + */ + form?: FormItemProps; + /** + * 添加表单字段配置（与form合并） + */ + addForm?: FormItemProps; + /** + * 编辑表单字段配置（与form合并） + */ + editForm?: FormItemProps; + /** + * 查看表单字段配置（与form合并） + */ + viewForm?: FormItemProps; + /** + * 查询框字段配置 + */ + search?: SearchItemProps; + /** + * 值构建器，pageRequest之后执行 + * 从pageRequest获取到的字段数据值可能并不是组件能够识别的值，所以需要将其做一层转化 + * 即row[key]=字段组件能够识别的值 + * @param value + * @param key + * @param row + * @param form + * @param index + * @param mode + */ + valueBuilder: ({ value, key, row, form, index, mode }: any) => void; + /** + * 值解析器，表单提交前执行 + * 表单输出的值可能不是后台所需要的值，所以需要在提交前做一层转化 + * 即：row[key]=后台能所需要的值 + * @param context + */ + valueResolve: (context: any) => void; + /** + * 其他配置 + */ + [key: string]: any; +}; + +/** + * 底部翻页条配置 + */ +export type PaginationProps = { + /** + * 是否显示pagination + */ + show?: boolean; + /** + * [x]-pagination组件的其他配置 + */ + [key: string]: any; +}; + +/** + * 操作列配置 + */ +export type RowHandleProps = { + /** + * 是否显示操作列 + */ + show?: boolean; + /** + * 操作列按钮配置 + */ + buttons?: { + [key: string]: ButtonProps; + }; + + dropdown?: { + /** + * 更多按钮 + */ + more?: ButtonProps; + + [key: string]: any; + }; + + /** + * 额外的按钮组 + * 激活时就显示，没激活的不显示 + * 同一时间只能激活一组 + */ + group?: { + /** + * 按钮组组key + */ + [groupKey: string]: { + /** + * 按钮 + */ + [buttonKey: string]: ButtonProps; + }; + }; + + /** + * 当前激活是哪个分组 + * 默认为default，激活的buttons里面配置的按钮组 + */ + active?: string; + + /** + * 其他配置 + */ + [key: string]: any; +}; + +/** + * crud配置 + */ +export type CrudOptions = { + /** + * 模式 + */ + mode?: { + /** + * 模式名称: local,remote + */ + name: string; + /** + * 更新时是否将表单值merge到行数据中 + */ + isMergeWhenUpdate: boolean; + /** + * 添加时是否在列表最后插入 + */ + isAppendWhenAdd: boolean; + [key: string]: any; + }; + /** + * 表格配置 + */ + table?: TableProps; + /** + * 列配置 + */ + columns?: { + /** + * 字段key:对应的列综合配置 + */ + [prop: string]: ColumnCompositionProps; + }; + /** + * 列表数据，一般会从pageRequest之后更新 + */ + data?: []; + /** + * 操作列配置 + */ + rowHandle?: RowHandleProps; + /** + * 查询框配置 + */ + search?: SearchProps; + /** + * 右上角工具条配置 + */ + toolbar?: ToolbarProps; + /** + * 左上角动作条（默认添加按钮） + */ + actionbar?: ActionbarProps; + /** + * 表单配置 + */ + form?: FormProps; + /** + * 添加表单的独立配置（与form配置合并） + */ + addForm?: FormProps; + /** + * 编辑表单的独立配置（与form配置合并） + */ + editForm?: FormProps; + /** + * 查看表单的独立配置（与form配置合并） + */ + viewForm?: FormProps; + /** + * 底部翻页组件配置 + */ + pagination?: PaginationProps; + /** + * http请求配置 + */ + request?: RequestProp; + + /** + * crud外部容器配置 + */ + container?: ContainerProps; + /** + * 其他配置 + */ + [key: string]: any; +}; diff --git a/src/components/crud/view.vue b/src/components/crud/view.vue new file mode 100644 index 0000000..c163e9d --- /dev/null +++ b/src/components/crud/view.vue @@ -0,0 +1,65 @@ + + + diff --git a/src/layout/logo/index.vue b/src/layout/logo/index.vue index 3d2b543..2144992 100644 --- a/src/layout/logo/index.vue +++ b/src/layout/logo/index.vue @@ -13,7 +13,7 @@ import { computed, defineComponent } from 'vue'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; -import logoMini from '/@/assets/logo-mini.svg'; +import logoMini from '/@/assets/logo-mini.png'; export default defineComponent({ name: 'layoutLogo', diff --git a/src/layout/navBars/breadcrumb/breadcrumb.vue b/src/layout/navBars/breadcrumb/breadcrumb.vue index 541a841..f474e31 100644 --- a/src/layout/navBars/breadcrumb/breadcrumb.vue +++ b/src/layout/navBars/breadcrumb/breadcrumb.vue @@ -27,7 +27,7 @@ import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue'; import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'; import { Local } from '/@/utils/storage'; -import other from '/@/utils/other'; +import { setTagsViewNameI18n } from '/@/utils/other'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; import { useRoutesList } from '/@/stores/routesList'; @@ -101,7 +101,7 @@ export default defineComponent({ state.routeSplitIndex = 1; getBreadcrumbList(routesList.value); if (route.name === 'home' || (route.name === 'notFound' && state.breadcrumbList.length > 1)) state.breadcrumbList.shift(); - if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = other.setTagsViewNameI18n(route); + if (state.breadcrumbList.length > 0) state.breadcrumbList[state.breadcrumbList.length - 1].meta.tagsViewName = setTagsViewNameI18n(route); }; // 页面加载时 onMounted(() => { diff --git a/src/layout/navBars/breadcrumb/setings.vue b/src/layout/navBars/breadcrumb/setings.vue index 856f260..2c3584b 100644 --- a/src/layout/navBars/breadcrumb/setings.vue +++ b/src/layout/navBars/breadcrumb/setings.vue @@ -9,6 +9,75 @@ @close="onDrawerClose" > + + {{ $t('message.layout.sixTitle') }} +
+ +
+
+ +
+
+
+
+
+
+
+

{{ $t('message.layout.sixDefaults') }}

+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+

{{ $t('message.layout.sixClassic') }}

+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+

{{ $t('message.layout.sixTransverse') }}

+
+
+
+ +
+
+ + +
+
+
+
+
+
+
+

{{ $t('message.layout.sixColumns') }}

+
+
+
+
+ {{ $t('message.layout.oneTitle') }}
@@ -20,7 +89,7 @@
{{ $t('message.layout.fourIsDark') }}
- +
@@ -41,7 +110,7 @@
{{ $t('message.layout.twoIsTopBarColorGradual') }}
- +
@@ -62,49 +131,51 @@
{{ $t('message.layout.twoIsMenuBarColorGradual') }}
- +
- - {{ - $t('message.layout.twoColumnsTitle') - }} -
-
{{ $t('message.layout.twoColumnsMenuBar') }}
-
- - + {{ $t('message.layout.threeTitle') }} @@ -116,7 +187,7 @@ :disabled="getThemeConfig.layout === 'transverse'" size="small" @change="onThemeConfigChange" - > + />
@@ -127,13 +198,13 @@ :disabled="getThemeConfig.layout === 'transverse'" size="small" @change="setLocalThemeConfig" - > + />
{{ $t('message.layout.threeIsFixedHeader') }}
- +
@@ -151,7 +222,7 @@
{{ $t('message.layout.threeIsLockScreen') }}
- +
@@ -165,8 +236,7 @@ @change="setLocalThemeConfig" size="default" style="width: 90px" - > - + />
@@ -175,7 +245,7 @@
{{ $t('message.layout.fourIsShowLogo') }}
- +
+ />
{{ $t('message.layout.fourIsBreadcrumbIcon') }}
- +
{{ $t('message.layout.fourIsTagsview') }}
- +
-
-
{{ $t('message.layout.fourIsTagsviewIcon') }}
-
- +
{{ $t('message.layout.fourIsFooter') }}
- +
{{ $t('message.layout.fourIsGrayscale') }}
- +
{{ $t('message.layout.fourIsInvert') }}
- +
{{ $t('message.layout.fourIsWartermark') }}
- +
@@ -270,9 +342,9 @@
{{ $t('message.layout.fiveTagsStyle') }}
- - - + + +
@@ -280,9 +352,9 @@
{{ $t('message.layout.fiveAnimation') }}
- - - + + +
@@ -297,8 +369,8 @@ :disabled="getThemeConfig.layout !== 'columns' ? true : false" @change="setLocalThemeConfig" > - - + +
@@ -313,80 +385,12 @@ :disabled="getThemeConfig.layout !== 'columns' ? true : false" @change="setLocalThemeConfig" > - - + + - - {{ $t('message.layout.sixTitle') }} -
- -
-
- -
-
-
-
-
-
-
-

{{ $t('message.layout.sixDefaults') }}

-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-

{{ $t('message.layout.sixClassic') }}

-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-

{{ $t('message.layout.sixTransverse') }}

-
-
-
- -
-
- - -
-
-
-
-
-
-
-

{{ $t('message.layout.sixColumns') }}

-
-
-
-
@@ -417,7 +421,7 @@ import { verifyAndSpace } from '/@/utils/toolsValidate'; import { Local } from '/@/utils/storage'; import Watermark from '/@/utils/wartermark'; import commonFunction from '/@/utils/commonFunction'; -import other from '/@/utils/other'; +import { isMobile } from '/@/utils/other'; export default defineComponent({ name: 'layoutBreadcrumbSeting', @@ -622,7 +626,7 @@ export default defineComponent({ getThemeConfig.value.layout = res.layout; getThemeConfig.value.isDrawer = false; initLayoutChangeFun(); - state.isMobile = other.isMobile(); + state.isMobile = isMobile(); }); setTimeout(() => { // 默认样式 @@ -675,142 +679,4 @@ export default defineComponent({ }); - + diff --git a/src/layout/navBars/breadcrumb/settings.scss b/src/layout/navBars/breadcrumb/settings.scss new file mode 100644 index 0000000..fceae25 --- /dev/null +++ b/src/layout/navBars/breadcrumb/settings.scss @@ -0,0 +1,137 @@ +.layout-breadcrumb-seting-bar { + height: calc(100vh - 50px); + padding: 0 15px; + ::v-deep(.el-scrollbar__view) { + overflow-x: hidden !important; + } + .layout-breadcrumb-seting-bar-flex { + display: flex; + align-items: center; + margin-bottom: 5px; + &-label { + flex: 1; + color: var(--el-text-color-primary); + } + } + .layout-drawer-content-flex { + overflow: hidden; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + margin: 0 -5px; + .layout-drawer-content-item { + width: 50%; + height: 70px; + cursor: pointer; + border: 1px solid transparent; + position: relative; + padding: 5px; + .el-container { + height: 100%; + .el-aside-dark { + background-color: var(--next-color-seting-header); + } + .el-aside { + background-color: var(--next-color-seting-aside); + } + .el-header { + background-color: var(--next-color-seting-header); + } + .el-main { + background-color: var(--next-color-seting-main); + } + } + .el-circular { + border-radius: 2px; + overflow: hidden; + border: 1px solid transparent; + transition: all 0.3s ease-in-out; + } + .drawer-layout-active { + border: 1px solid; + border-color: var(--el-color-primary); + } + .layout-tips-warp, + .layout-tips-warp-active { + transition: all 0.3s ease-in-out; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border: 1px solid; + border-color: var(--el-color-primary-light-5); + border-radius: 100%; + padding: 4px; + .layout-tips-box { + transition: inherit; + width: 30px; + height: 30px; + z-index: 9; + border: 1px solid; + border-color: var(--el-color-primary-light-5); + border-radius: 100%; + .layout-tips-txt { + transition: inherit; + position: relative; + top: 5px; + font-size: 12px; + line-height: 1; + letter-spacing: 2px; + white-space: nowrap; + color: var(--el-color-primary-light-5); + text-align: center; + transform: rotate(30deg); + left: -1px; + background-color: var(--next-color-seting-main); + width: 32px; + height: 17px; + line-height: 17px; + } + } + } + .layout-tips-warp-active { + border: 1px solid; + border-color: var(--el-color-primary); + .layout-tips-box { + border: 1px solid; + border-color: var(--el-color-primary); + .layout-tips-txt { + color: var(--el-color-primary) !important; + background-color: var(--next-color-seting-main) !important; + } + } + } + &:hover { + .el-circular { + transition: all 0.3s ease-in-out; + border: 1px solid; + border-color: var(--el-color-primary); + } + .layout-tips-warp { + transition: all 0.3s ease-in-out; + border-color: var(--el-color-primary); + .layout-tips-box { + transition: inherit; + border-color: var(--el-color-primary); + .layout-tips-txt { + transition: inherit; + color: var(--el-color-primary) !important; + background-color: var(--next-color-seting-main) !important; + } + } + } + } + } + } + .copy-config { + margin: 10px 0; + .copy-config-btn { + width: 100%; + margin-top: 15px; + } + .copy-config-btn-reset { + width: 100%; + margin: 10px 0 0; + } + } +} diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue index 6782651..bce8383 100644 --- a/src/layout/navBars/breadcrumb/user.vue +++ b/src/layout/navBars/breadcrumb/user.vue @@ -85,7 +85,7 @@ import { useI18n } from 'vue-i18n'; import { storeToRefs } from 'pinia'; import { useUserInfo } from '/@/stores/userInfo'; import { useThemeConfig } from '/@/stores/themeConfig'; -import other from '/@/utils/other'; +import { useTitle } from '/@/utils/other'; import { Session, Local } from '/@/utils/storage'; import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue'; import Search from '/@/layout/navBars/breadcrumb/search.vue'; @@ -190,7 +190,7 @@ export default defineComponent({ Local.set('themeConfig', themeConfig.value); proxy.$i18n.locale = lang; initI18n(); - other.useTitle(); + useTitle(); }; // 设置 element plus 组件的国际化 const setI18nConfig = (locale: string) => { diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue index 67e1b57..fba0cae 100644 --- a/src/layout/navBars/tagsView/tagsView.vue +++ b/src/layout/navBars/tagsView/tagsView.vue @@ -70,7 +70,7 @@ import { useThemeConfig } from '/@/stores/themeConfig'; import { useKeepALiveNames } from '/@/stores/keepAliveNames'; import { Session } from '/@/utils/storage'; import { isObjectValueEqual } from '/@/utils/arrayOperation'; -import other from '/@/utils/other'; +import { setTagsViewNameI18n, isMobile } from '/@/utils/other'; import Contextmenu from '/@/layout/navBars/tagsView/contextmenu.vue'; // 定义接口来定义对象的类型 @@ -137,11 +137,6 @@ export default defineComponent({ return themeConfig.value; }); // 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化 - const setTagsViewNameI18n = computed(() => { - return (v: any) => { - return other.setTagsViewNameI18n(v); - }; - }); // 设置 tagsView 高亮 const isActive = (v: RouteParams) => { if (getThemeConfig.value.isShareTagsView) { @@ -511,7 +506,7 @@ export default defineComponent({ // 拖动问题，https://gitee.com/lyt-top/vue-next-admin/issues/I3ZRRI const onSortableResize = async () => { await initSortable(); - if (other.isMobile()) state.sortable.el && state.sortable.destroy(); + if (isMobile()) state.sortable.el && state.sortable.destroy(); }; // 页面加载前 onBeforeMount(() => { diff --git a/src/main.ts b/src/main.ts index acd3d24..95c4371 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,19 +4,19 @@ import App from './App.vue'; import router from './router'; import { directive } from '/@/utils/directive'; import { i18n } from '/@/i18n/index'; -import other from '/@/utils/other'; +import { elSvg } from '/@/utils/other'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import '/@/theme/index.scss'; -import mitt from 'mitt'; import VueGridLayout from 'vue-grid-layout'; +import eventbus from '/@/utils/eventbus'; const app = createApp(App); directive(app); -other.elSvg(app); +elSvg(app); app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).mount('#app'); -app.config.globalProperties.mittBus = mitt(); +app.config.globalProperties.mittBus = eventbus; diff --git a/src/router/backEnd.ts b/src/router/backEnd.ts index e7509c8..d3fe6da 100644 --- a/src/router/backEnd.ts +++ b/src/router/backEnd.ts @@ -5,13 +5,11 @@ import { useUserInfo } from '/@/stores/userInfo'; import { useRequestOldRoutes } from '/@/stores/requestOldRoutes'; import { Session } from '/@/utils/storage'; import { NextLoading } from '/@/utils/loading'; -import { dynamicRoutes, notFoundAndNoPower } from '/@/router/route'; import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index'; import { useRoutesList } from '/@/stores/routesList'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; import { useMenuApi } from '/@/api/menu/index'; - -const menuApi = useMenuApi(); +import { dynamicRoutes } from './dynamic'; const layouModules: any = import.meta.glob('../layout/routerView/*.{vue,tsx}'); const viewsModules: any = import.meta.glob('../views/**/*.{vue,tsx}'); @@ -80,7 +78,7 @@ export function setCacheTagsViewRoutes() { */ export function setFilterRouteEnd() { let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)); - filterRouteEnd[0].children = [...filterRouteEnd[0].children, ...notFoundAndNoPower]; + filterRouteEnd[0].children = filterRouteEnd[0].children; return filterRouteEnd; } @@ -107,9 +105,9 @@ export function getBackEndControlRoutes() { const { userInfos } = storeToRefs(stores); const auth = userInfos.value.roles[0]; // 管理员 admin - if (auth === 'admin') return menuApi.getMenuAdmin(); + if (auth === 'admin') return useMenuApi.getMenuAdmin(); // 其它用户 test - else return menuApi.getMenuTest(); + else return useMenuApi.getMenuTest(); } /** diff --git a/src/router/dynamic.ts b/src/router/dynamic.ts new file mode 100644 index 0000000..3a175fa --- /dev/null +++ b/src/router/dynamic.ts @@ -0,0 +1,1119 @@ +import { RouteRecordRaw } from 'vue-router'; + +/** + * 定义动态路由 + * 前端添加路由，请在顶级节点的 `children 数组` 里添加 + * @description 未开启 isRequestRoutes 为 true 时使用（前端控制路由），开启时第一个顶级 children 的路由将被替换成接口请求回来的路由数据 + * @description 各字段请查看 `/@/views/system/menu/component/addMenu.vue 下的 ruleForm` + * @returns 返回路由菜单数据 + */ +export const dynamicRoutes: Array = [ + { + path: '/', + name: '/', + component: () => import('/@/layout/index.vue'), + redirect: '/home', + meta: { + isKeepAlive: true, + }, + children: [ + { + path: '/home', + name: 'home', + component: () => import('/@/views/home/index.vue'), + meta: { + title: 'message.router.home', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: true, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-shouye', + }, + }, + { + path: '/system', + name: 'system', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/system/menu', + meta: { + title: 'message.router.system', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-xitongshezhi', + }, + children: [ + { + path: '/system/menu', + name: 'systemMenu', + component: () => import('/@/views/system/menu/index.vue'), + meta: { + title: 'message.router.systemMenu', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-caidan', + }, + }, + { + path: '/system/role', + name: 'systemRole', + component: () => import('/@/views/system/role/index.vue'), + meta: { + title: 'message.router.systemRole', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-ColdDrink', + }, + }, + { + path: '/system/user', + name: 'systemUser', + component: () => import('/@/views/system/user/index.vue'), + meta: { + title: 'message.router.systemUser', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-icon-', + }, + }, + { + path: '/system/dept', + name: 'systemDept', + component: () => import('/@/views/system/dept/index.vue'), + meta: { + title: 'message.router.systemDept', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-OfficeBuilding', + }, + }, + { + path: '/system/dic', + name: 'systemDic', + component: () => import('/@/views/system/dic/index.vue'), + meta: { + title: 'message.router.systemDic', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-SetUp', + }, + }, + ], + }, + { + path: '/limits', + name: 'limits', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/limits/frontEnd', + meta: { + title: 'message.router.limits', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-quanxian', + }, + children: [ + { + path: '/limits/frontEnd', + name: 'limitsFrontEnd', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/limits/frontEnd/page', + meta: { + title: 'message.router.limitsFrontEnd', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: '', + }, + children: [ + { + path: '/limits/frontEnd/page', + name: 'limitsFrontEndPage', + component: () => import('/@/views/limits/frontEnd/page/index.vue'), + meta: { + title: 'message.router.limitsFrontEndPage', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: '', + }, + }, + { + path: '/limits/frontEnd/btn', + name: 'limitsFrontEndBtn', + component: () => import('/@/views/limits/frontEnd/btn/index.vue'), + meta: { + title: 'message.router.limitsFrontEndBtn', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: '', + }, + }, + ], + }, + { + path: '/limits/backEnd', + name: 'limitsBackEnd', + component: () => import('/@/layout/routerView/parent.vue'), + meta: { + title: 'message.router.limitsBackEnd', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: '', + }, + children: [ + { + path: '/limits/backEnd/page', + name: 'limitsBackEndEndPage', + component: () => import('/@/views/limits/backEnd/page/index.vue'), + meta: { + title: 'message.router.limitsBackEndEndPage', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: '', + }, + }, + ], + }, + ], + }, + { + path: '/menu', + name: 'menu', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/menu/menu1', + meta: { + title: 'message.router.menu', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + children: [ + { + path: '/menu/menu1', + name: 'menu1', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/menu/menu1/menu11', + meta: { + title: 'message.router.menu1', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + children: [ + { + path: '/menu/menu1/menu11', + name: 'menu11', + component: () => import('/@/views/menu/menu1/menu11/index.vue'), + meta: { + title: 'message.router.menu11', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + }, + { + path: '/menu/menu1/menu12', + name: 'menu12', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/menu/menu1/menu12/menu121', + meta: { + title: 'message.router.menu12', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + children: [ + { + path: '/menu/menu1/menu12/menu121', + name: 'menu121', + component: () => import('/@/views/menu/menu1/menu12/menu121/index.vue'), + meta: { + title: 'message.router.menu121', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + }, + { + path: '/menu/menu1/menu12/menu122', + name: 'menu122', + component: () => import('/@/views/menu/menu1/menu12/menu122/index.vue'), + meta: { + title: 'message.router.menu122', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + }, + ], + }, + { + path: '/menu/menu1/menu13', + name: 'menu13', + component: () => import('/@/views/menu/menu1/menu13/index.vue'), + meta: { + title: 'message.router.menu13', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + }, + ], + }, + { + path: '/menu/menu2', + name: 'menu2', + component: () => import('/@/views/menu/menu2/index.vue'), + meta: { + title: 'message.router.menu2', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caidan', + }, + }, + ], + }, + { + path: '/fun', + name: 'funIndex', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/fun/tagsView', + meta: { + title: 'message.router.funIndex', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-crew_feature', + }, + children: [ + { + path: '/fun/tagsView', + name: 'funTagsView', + component: () => import('/@/views/fun/tagsView/index.vue'), + meta: { + title: 'message.router.funTagsView', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Pointer', + }, + }, + { + path: '/fun/countup', + name: 'funCountup', + component: () => import('/@/views/fun/countup/index.vue'), + meta: { + title: 'message.router.funCountup', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Odometer', + }, + }, + { + path: '/fun/wangEditor', + name: 'funWangEditor', + component: () => import('/@/views/fun/wangEditor/index.vue'), + meta: { + title: 'message.router.funWangEditor', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-fuwenbenkuang', + }, + }, + { + path: '/fun/cropper', + name: 'funCropper', + component: () => import('/@/views/fun/cropper/index.vue'), + meta: { + title: 'message.router.funCropper', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-caijian', + }, + }, + { + path: '/fun/qrcode', + name: 'funQrcode', + component: () => import('/@/views/fun/qrcode/index.vue'), + meta: { + title: 'message.router.funQrcode', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-ico', + }, + }, + { + path: '/fun/echartsMap', + name: 'funEchartsMap', + component: () => import('/@/views/fun/echartsMap/index.vue'), + meta: { + title: 'message.router.funEchartsMap', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-ditu', + }, + }, + { + path: '/fun/printJs', + name: 'funPrintJs', + component: () => import('/@/views/fun/printJs/index.vue'), + meta: { + title: 'message.router.funPrintJs', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Printer', + }, + }, + { + path: '/fun/clipboard', + name: 'funClipboard', + component: () => import('/@/views/fun/clipboard/index.vue'), + meta: { + title: 'message.router.funClipboard', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-DocumentCopy', + }, + }, + { + path: '/fun/gridLayout', + name: 'funGridLayout', + component: () => import('/@/views/fun/gridLayout/index.vue'), + meta: { + title: 'message.router.funGridLayout', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-tuodong', + }, + }, + { + path: '/fun/splitpanes', + name: 'funSplitpanes', + component: () => import('/@/views/fun/splitpanes/index.vue'), + meta: { + title: 'message.router.funSplitpanes', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon--chaifenlie', + }, + }, + ], + }, + { + path: '/pages', + name: 'pagesIndex', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/pages/filtering', + meta: { + title: 'message.router.pagesIndex', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-fuzhiyemian', + }, + children: [ + { + path: '/pages/filtering', + name: 'pagesFiltering', + component: () => import('/@/views/pages/filtering/index.vue'), + meta: { + title: 'message.router.pagesFiltering', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Sell', + }, + /** + * 注意此处详情写法： + * 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情 + * 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情 + * 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails + */ + children: [ + { + path: '/pages/filtering/details', + name: 'pagesFilteringDetails', + component: () => import('/@/views/pages/filtering/details.vue'), + meta: { + title: 'message.router.pagesFilteringDetails', + isLink: '', + isHide: true, + isKeepAlive: false, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Sunny', + }, + }, + ], + }, + { + path: '/pages/filtering/details1', + name: 'pagesFilteringDetails1', + component: () => import('/@/views/pages/filtering/details1.vue'), + meta: { + title: 'message.router.pagesFilteringDetails1', + isLink: '', + isHide: true, + isKeepAlive: false, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Sunny', + }, + }, + { + path: '/pages/iocnfont', + name: 'pagesIocnfont', + component: () => import('/@/views/pages/iocnfont/index.vue'), + meta: { + title: 'message.router.pagesIocnfont', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Present', + }, + }, + { + path: '/pages/element', + name: 'pagesElement', + component: () => import('/@/views/pages/element/index.vue'), + meta: { + title: 'message.router.pagesElement', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Eleme', + }, + }, + { + path: '/pages/awesome', + name: 'pagesAwesome', + component: () => import('/@/views/pages/awesome/index.vue'), + meta: { + title: 'message.router.pagesAwesome', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-SetUp', + }, + }, + { + path: '/pages/formAdapt', + name: 'pagesFormAdapt', + component: () => import('/@/views/pages/formAdapt/index.vue'), + meta: { + title: 'message.router.pagesFormAdapt', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-biaodan', + }, + }, + { + path: '/pages/tableRules', + name: 'pagesTableRules', + component: () => import('/@/views/pages/tableRules/index.vue'), + meta: { + title: 'message.router.pagesTableRules', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-jiliandongxuanzeqi', + }, + }, + { + path: '/pages/formI18n', + name: 'pagesFormI18n', + component: () => import('/@/views/pages/formI18n/index.vue'), + meta: { + title: 'message.router.pagesFormI18n', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-diqiu', + }, + }, + { + path: '/pages/formRules', + name: 'pagesFormRules', + component: () => import('/@/views/pages/formRules/index.vue'), + meta: { + title: 'message.router.pagesFormRules', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-shuxing', + }, + }, + { + path: '/pages/listAdapt', + name: 'pagesListAdapt', + component: () => import('/@/views/pages/listAdapt/index.vue'), + meta: { + title: 'message.router.pagesListAdapt', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-chazhaobiaodanliebiao', + }, + }, + { + path: '/pages/waterfall', + name: 'pagesWaterfall', + component: () => import('/@/views/pages/waterfall/index.vue'), + meta: { + title: 'message.router.pagesWaterfall', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-zidingyibuju', + }, + }, + { + path: '/pages/steps', + name: 'pagesSteps', + component: () => import('/@/views/pages/steps/index.vue'), + meta: { + title: 'message.router.pagesSteps', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-step', + }, + }, + { + path: '/pages/preview', + name: 'pagesPreview', + component: () => import('/@/views/pages/preview/index.vue'), + meta: { + title: 'message.router.pagesPreview', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-15tupianyulan', + }, + }, + { + path: '/pages/waves', + name: 'pagesWaves', + component: () => import('/@/views/pages/waves/index.vue'), + meta: { + title: 'message.router.pagesWaves', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-bolangneng', + }, + }, + { + path: '/pages/tree', + name: 'pagesTree', + component: () => import('/@/views/pages/tree/index.vue'), + meta: { + title: 'message.router.pagesTree', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-shuxingtu', + }, + }, + { + path: '/pages/drag', + name: 'pagesDrag', + component: () => import('/@/views/pages/drag/index.vue'), + meta: { + title: 'message.router.pagesDrag', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Pointer', + }, + }, + { + path: '/pages/lazyImg', + name: 'pagesLazyImg', + component: () => import('/@/views/pages/lazyImg/index.vue'), + meta: { + title: 'message.router.pagesLazyImg', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-PictureFilled', + }, + }, + { + path: '/pages/dynamicForm', + name: 'pagesDynamicForm', + component: () => import('/@/views/pages/dynamicForm/index.vue'), + meta: { + title: 'message.router.pagesDynamicForm', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-diannao', + }, + }, + { + path: '/pages/workflow', + name: 'pagesWorkflow', + component: () => import('/@/views/pages/workflow/index.vue'), + meta: { + title: 'message.router.pagesWorkflow', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-Connection', + }, + }, + ], + }, + { + path: '/make', + name: 'makeIndex', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/make/selector', + meta: { + title: 'message.router.makeIndex', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-siweidaotu', + }, + children: [ + { + path: '/make/selector', + name: 'makeSelector', + component: () => import('/@/views/make/selector/index.vue'), + meta: { + title: 'message.router.makeSelector', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-xuanzeqi', + }, + }, + { + path: '/make/noticeBar', + name: 'makeNoticeBar', + component: () => import('/@/views/make/noticeBar/index.vue'), + meta: { + title: 'message.router.makeNoticeBar', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'ele-Bell', + }, + }, + { + path: '/make/svgDemo', + name: 'makeSvgDemo', + component: () => import('/@/views/make/svgDemo/index.vue'), + meta: { + title: 'message.router.makeSvgDemo', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'fa fa-thumbs-o-up', + }, + }, + ], + }, + { + path: '/params', + name: 'paramsIndex', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/params/common', + meta: { + title: 'message.router.paramsIndex', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-zhongduancanshu', + }, + children: [ + { + path: '/params/common', + name: 'paramsCommon', + component: () => import('/@/views/params/common/index.vue'), + meta: { + title: 'message.router.paramsCommon', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-putong', + }, + }, + { + path: '/params/common/details', + name: 'paramsCommonDetails', + component: () => import('/@/views/params/common/details.vue'), + meta: { + title: 'message.router.paramsCommonDetails', + isLink: '', + isHide: true, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-Comment', + }, + }, + { + path: '/params/dynamic', + name: 'paramsDynamic', + component: () => import('/@/views/params/dynamic/index.vue'), + meta: { + title: 'message.router.paramsDynamic', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-dongtai', + }, + }, + /** + * tagsViewName 为要设置不同的 "tagsView 名称" 字段 + * 如若需设置不同 "tagsView 名称"，tagsViewName 字段必须要有 + */ + { + path: '/params/dynamic/details/:t/:id/:tagsViewName', + name: 'paramsDynamicDetails', + component: () => import('/@/views/params/dynamic/details.vue'), + meta: { + title: 'message.router.paramsDynamicDetails', + isLink: '', + isHide: true, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-Lightning', + }, + }, + ], + }, + { + path: '/visualizing', + name: 'visualizingIndex', + component: () => import('/@/layout/routerView/parent.vue'), + redirect: '/visualizing/visualizingLinkDemo1', + meta: { + title: 'message.router.visualizingIndex', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'ele-ChatLineRound', + }, + children: [ + { + path: '/visualizing/visualizingLinkDemo1', + name: 'visualizingLinkDemo1', + component: () => import('/@/layout/routerView/link.vue'), + meta: { + title: 'message.router.visualizingLinkDemo1', + isLink: '#/visualizingDemo1', + isHide: false, + isKeepAlive: false, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-caozuo-wailian', + }, + }, + { + path: '/visualizing/visualizingLinkDemo2', + name: 'visualizingLinkDemo2', + component: () => import('/@/layout/routerView/link.vue'), + meta: { + title: 'message.router.visualizingLinkDemo2', + isLink: '#/visualizingDemo2', + isHide: false, + isKeepAlive: false, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-caozuo-wailian', + }, + }, + ], + }, + { + path: '/chart', + name: 'chartIndex', + component: () => import('/@/views/chart/index.vue'), + meta: { + title: 'message.router.chartIndex', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-ico_shuju', + }, + }, + { + path: '/personal', + name: 'personal', + component: () => import('/@/views/personal/index.vue'), + meta: { + title: 'message.router.personal', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-gerenzhongxin', + }, + }, + { + path: '/tools', + name: 'tools', + component: () => import('/@/views/tools/index.vue'), + meta: { + title: 'message.router.tools', + isLink: '', + isHide: false, + isKeepAlive: true, + isAffix: false, + isIframe: false, + roles: ['admin', 'common'], + icon: 'iconfont icon-gongju', + }, + }, + { + path: '/link', + name: 'layoutLinkView', + component: () => import('/@/layout/routerView/link.vue'), + meta: { + title: 'message.router.layoutLinkView', + isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation', + isHide: false, + isKeepAlive: false, + isAffix: false, + isIframe: false, + roles: ['admin'], + icon: 'iconfont icon-caozuo-wailian', + }, + }, + { + path: '/iframes', + name: 'layoutIfameView', + component: () => import('/@/layout/routerView/iframes.vue'), + meta: { + title: 'message.router.layoutIfameView', + isLink: 'https://nodejs.org/zh-cn/', + isHide: false, + isKeepAlive: false, + isAffix: true, + isIframe: true, + roles: ['admin'], + icon: 'iconfont icon-neiqianshujuchucun', + }, + }, + ], + }, +]; diff --git a/src/router/frontEnd.ts b/src/router/frontEnd.ts index 8877514..1d133cb 100644 --- a/src/router/frontEnd.ts +++ b/src/router/frontEnd.ts @@ -1,13 +1,13 @@ import { RouteRecordRaw } from 'vue-router'; import { storeToRefs } from 'pinia'; import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/index'; -import { dynamicRoutes, notFoundAndNoPower } from '/@/router/route'; import pinia from '/@/stores/index'; import { Session } from '/@/utils/storage'; import { useUserInfo } from '/@/stores/userInfo'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; import { useRoutesList } from '/@/stores/routesList'; import { NextLoading } from '/@/utils/loading'; +import { dynamicRoutes } from './dynamic'; // 前端控制路由 @@ -63,7 +63,7 @@ export async function frontEndsResetRoute() { */ export function setFilterRouteEnd() { let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)); - filterRouteEnd[0].children = [...setFilterRoute(filterRouteEnd[0].children), ...notFoundAndNoPower]; + filterRouteEnd[0].children = setFilterRoute(filterRouteEnd[0].children); return filterRouteEnd; } diff --git a/src/router/index.ts b/src/router/index.ts index 4a51bb6..f619409 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -7,9 +7,9 @@ import { useKeepALiveNames } from '/@/stores/keepAliveNames'; import { useRoutesList } from '/@/stores/routesList'; import { useThemeConfig } from '/@/stores/themeConfig'; import { Session } from '/@/utils/storage'; -import { staticRoutes } from '/@/router/route'; import { initFrontEndControlRoutes } from '/@/router/frontEnd'; import { initBackEndControlRoutes } from '/@/router/backEnd'; +import { staticRoutes } from './static'; /** * 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。 diff --git a/src/router/notfound.ts b/src/router/notfound.ts new file mode 100644 index 0000000..d165231 --- /dev/null +++ b/src/router/notfound.ts @@ -0,0 +1,24 @@ +/** + * 定义404、401界面 + * @link 参考：https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#netlify + */ +export const notFoundAndNoPower = [ + { + path: '/:path(.*)*', + name: 'notFound', + component: () => import('/@/views/error/404.vue'), + meta: { + title: 'message.staticRoutes.notFound', + isHide: true, + }, + }, + { + path: '/401', + name: 'noPower', + component: () => import('/@/views/error/401.vue'), + meta: { + title: 'message.staticRoutes.noPower', + isHide: true, + }, + }, +]; diff --git a/src/router/route.ts b/src/router/route.ts index df24ad6..77d3909 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -14,1194 +14,3 @@ import { RouteRecordRaw } from 'vue-router'; * } */ -/** - * 定义动态路由 - * 前端添加路由，请在顶级节点的 `children 数组` 里添加 - * @description 未开启 isRequestRoutes 为 true 时使用（前端控制路由），开启时第一个顶级 children 的路由将被替换成接口请求回来的路由数据 - * @description 各字段请查看 `/@/views/system/menu/component/addMenu.vue 下的 ruleForm` - * @returns 返回路由菜单数据 - */ -export const dynamicRoutes: Array = [ - { - path: '/', - name: '/', - component: () => import('/@/layout/index.vue'), - redirect: '/home', - meta: { - isKeepAlive: true, - }, - children: [ - { - path: '/home', - name: 'home', - component: () => import('/@/views/home/index.vue'), - meta: { - title: 'message.router.home', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: true, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-shouye', - }, - }, - { - path: '/system', - name: 'system', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/system/menu', - meta: { - title: 'message.router.system', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-xitongshezhi', - }, - children: [ - { - path: '/system/menu', - name: 'systemMenu', - component: () => import('/@/views/system/menu/index.vue'), - meta: { - title: 'message.router.systemMenu', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-caidan', - }, - }, - { - path: '/system/role', - name: 'systemRole', - component: () => import('/@/views/system/role/index.vue'), - meta: { - title: 'message.router.systemRole', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-ColdDrink', - }, - }, - { - path: '/system/user', - name: 'systemUser', - component: () => import('/@/views/system/user/index.vue'), - meta: { - title: 'message.router.systemUser', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-icon-', - }, - }, - { - path: '/system/dept', - name: 'systemDept', - component: () => import('/@/views/system/dept/index.vue'), - meta: { - title: 'message.router.systemDept', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-OfficeBuilding', - }, - }, - { - path: '/system/dic', - name: 'systemDic', - component: () => import('/@/views/system/dic/index.vue'), - meta: { - title: 'message.router.systemDic', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-SetUp', - }, - }, - ], - }, - { - path: '/limits', - name: 'limits', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/limits/frontEnd', - meta: { - title: 'message.router.limits', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-quanxian', - }, - children: [ - { - path: '/limits/frontEnd', - name: 'limitsFrontEnd', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/limits/frontEnd/page', - meta: { - title: 'message.router.limitsFrontEnd', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: '', - }, - children: [ - { - path: '/limits/frontEnd/page', - name: 'limitsFrontEndPage', - component: () => import('/@/views/limits/frontEnd/page/index.vue'), - meta: { - title: 'message.router.limitsFrontEndPage', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: '', - }, - }, - { - path: '/limits/frontEnd/btn', - name: 'limitsFrontEndBtn', - component: () => import('/@/views/limits/frontEnd/btn/index.vue'), - meta: { - title: 'message.router.limitsFrontEndBtn', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: '', - }, - }, - ], - }, - { - path: '/limits/backEnd', - name: 'limitsBackEnd', - component: () => import('/@/layout/routerView/parent.vue'), - meta: { - title: 'message.router.limitsBackEnd', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: '', - }, - children: [ - { - path: '/limits/backEnd/page', - name: 'limitsBackEndEndPage', - component: () => import('/@/views/limits/backEnd/page/index.vue'), - meta: { - title: 'message.router.limitsBackEndEndPage', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: '', - }, - }, - ], - }, - ], - }, - { - path: '/menu', - name: 'menu', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/menu/menu1', - meta: { - title: 'message.router.menu', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - children: [ - { - path: '/menu/menu1', - name: 'menu1', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/menu/menu1/menu11', - meta: { - title: 'message.router.menu1', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - children: [ - { - path: '/menu/menu1/menu11', - name: 'menu11', - component: () => import('/@/views/menu/menu1/menu11/index.vue'), - meta: { - title: 'message.router.menu11', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - }, - { - path: '/menu/menu1/menu12', - name: 'menu12', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/menu/menu1/menu12/menu121', - meta: { - title: 'message.router.menu12', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - children: [ - { - path: '/menu/menu1/menu12/menu121', - name: 'menu121', - component: () => import('/@/views/menu/menu1/menu12/menu121/index.vue'), - meta: { - title: 'message.router.menu121', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - }, - { - path: '/menu/menu1/menu12/menu122', - name: 'menu122', - component: () => import('/@/views/menu/menu1/menu12/menu122/index.vue'), - meta: { - title: 'message.router.menu122', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - }, - ], - }, - { - path: '/menu/menu1/menu13', - name: 'menu13', - component: () => import('/@/views/menu/menu1/menu13/index.vue'), - meta: { - title: 'message.router.menu13', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - }, - ], - }, - { - path: '/menu/menu2', - name: 'menu2', - component: () => import('/@/views/menu/menu2/index.vue'), - meta: { - title: 'message.router.menu2', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caidan', - }, - }, - ], - }, - { - path: '/fun', - name: 'funIndex', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/fun/tagsView', - meta: { - title: 'message.router.funIndex', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-crew_feature', - }, - children: [ - { - path: '/fun/tagsView', - name: 'funTagsView', - component: () => import('/@/views/fun/tagsView/index.vue'), - meta: { - title: 'message.router.funTagsView', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Pointer', - }, - }, - { - path: '/fun/countup', - name: 'funCountup', - component: () => import('/@/views/fun/countup/index.vue'), - meta: { - title: 'message.router.funCountup', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Odometer', - }, - }, - { - path: '/fun/wangEditor', - name: 'funWangEditor', - component: () => import('/@/views/fun/wangEditor/index.vue'), - meta: { - title: 'message.router.funWangEditor', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-fuwenbenkuang', - }, - }, - { - path: '/fun/cropper', - name: 'funCropper', - component: () => import('/@/views/fun/cropper/index.vue'), - meta: { - title: 'message.router.funCropper', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-caijian', - }, - }, - { - path: '/fun/qrcode', - name: 'funQrcode', - component: () => import('/@/views/fun/qrcode/index.vue'), - meta: { - title: 'message.router.funQrcode', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-ico', - }, - }, - { - path: '/fun/echartsMap', - name: 'funEchartsMap', - component: () => import('/@/views/fun/echartsMap/index.vue'), - meta: { - title: 'message.router.funEchartsMap', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-ditu', - }, - }, - { - path: '/fun/printJs', - name: 'funPrintJs', - component: () => import('/@/views/fun/printJs/index.vue'), - meta: { - title: 'message.router.funPrintJs', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Printer', - }, - }, - { - path: '/fun/clipboard', - name: 'funClipboard', - component: () => import('/@/views/fun/clipboard/index.vue'), - meta: { - title: 'message.router.funClipboard', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-DocumentCopy', - }, - }, - { - path: '/fun/gridLayout', - name: 'funGridLayout', - component: () => import('/@/views/fun/gridLayout/index.vue'), - meta: { - title: 'message.router.funGridLayout', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-tuodong', - }, - }, - { - path: '/fun/splitpanes', - name: 'funSplitpanes', - component: () => import('/@/views/fun/splitpanes/index.vue'), - meta: { - title: 'message.router.funSplitpanes', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon--chaifenlie', - }, - }, - ], - }, - { - path: '/pages', - name: 'pagesIndex', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/pages/filtering', - meta: { - title: 'message.router.pagesIndex', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-fuzhiyemian', - }, - children: [ - { - path: '/pages/filtering', - name: 'pagesFiltering', - component: () => import('/@/views/pages/filtering/index.vue'), - meta: { - title: 'message.router.pagesFiltering', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Sell', - }, - /** - * 注意此处详情写法： - * 1、嵌套进父级里时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情 - * 2、不嵌套进父级时，面包屑显示为：首页/页面/过滤筛选组件/过滤筛选组件详情 - * 3、想要父级不高亮，面包屑显示为：首页/页面/过滤筛选组件详情，设置路径为：/pages/filteringDetails - */ - children: [ - { - path: '/pages/filtering/details', - name: 'pagesFilteringDetails', - component: () => import('/@/views/pages/filtering/details.vue'), - meta: { - title: 'message.router.pagesFilteringDetails', - isLink: '', - isHide: true, - isKeepAlive: false, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Sunny', - }, - }, - ], - }, - { - path: '/pages/filtering/details1', - name: 'pagesFilteringDetails1', - component: () => import('/@/views/pages/filtering/details1.vue'), - meta: { - title: 'message.router.pagesFilteringDetails1', - isLink: '', - isHide: true, - isKeepAlive: false, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Sunny', - }, - }, - { - path: '/pages/iocnfont', - name: 'pagesIocnfont', - component: () => import('/@/views/pages/iocnfont/index.vue'), - meta: { - title: 'message.router.pagesIocnfont', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Present', - }, - }, - { - path: '/pages/element', - name: 'pagesElement', - component: () => import('/@/views/pages/element/index.vue'), - meta: { - title: 'message.router.pagesElement', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Eleme', - }, - }, - { - path: '/pages/awesome', - name: 'pagesAwesome', - component: () => import('/@/views/pages/awesome/index.vue'), - meta: { - title: 'message.router.pagesAwesome', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-SetUp', - }, - }, - { - path: '/pages/formAdapt', - name: 'pagesFormAdapt', - component: () => import('/@/views/pages/formAdapt/index.vue'), - meta: { - title: 'message.router.pagesFormAdapt', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-biaodan', - }, - }, - { - path: '/pages/tableRules', - name: 'pagesTableRules', - component: () => import('/@/views/pages/tableRules/index.vue'), - meta: { - title: 'message.router.pagesTableRules', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-jiliandongxuanzeqi', - }, - }, - { - path: '/pages/formI18n', - name: 'pagesFormI18n', - component: () => import('/@/views/pages/formI18n/index.vue'), - meta: { - title: 'message.router.pagesFormI18n', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-diqiu', - }, - }, - { - path: '/pages/formRules', - name: 'pagesFormRules', - component: () => import('/@/views/pages/formRules/index.vue'), - meta: { - title: 'message.router.pagesFormRules', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-shuxing', - }, - }, - { - path: '/pages/listAdapt', - name: 'pagesListAdapt', - component: () => import('/@/views/pages/listAdapt/index.vue'), - meta: { - title: 'message.router.pagesListAdapt', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-chazhaobiaodanliebiao', - }, - }, - { - path: '/pages/waterfall', - name: 'pagesWaterfall', - component: () => import('/@/views/pages/waterfall/index.vue'), - meta: { - title: 'message.router.pagesWaterfall', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-zidingyibuju', - }, - }, - { - path: '/pages/steps', - name: 'pagesSteps', - component: () => import('/@/views/pages/steps/index.vue'), - meta: { - title: 'message.router.pagesSteps', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-step', - }, - }, - { - path: '/pages/preview', - name: 'pagesPreview', - component: () => import('/@/views/pages/preview/index.vue'), - meta: { - title: 'message.router.pagesPreview', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-15tupianyulan', - }, - }, - { - path: '/pages/waves', - name: 'pagesWaves', - component: () => import('/@/views/pages/waves/index.vue'), - meta: { - title: 'message.router.pagesWaves', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-bolangneng', - }, - }, - { - path: '/pages/tree', - name: 'pagesTree', - component: () => import('/@/views/pages/tree/index.vue'), - meta: { - title: 'message.router.pagesTree', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-shuxingtu', - }, - }, - { - path: '/pages/drag', - name: 'pagesDrag', - component: () => import('/@/views/pages/drag/index.vue'), - meta: { - title: 'message.router.pagesDrag', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Pointer', - }, - }, - { - path: '/pages/lazyImg', - name: 'pagesLazyImg', - component: () => import('/@/views/pages/lazyImg/index.vue'), - meta: { - title: 'message.router.pagesLazyImg', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-PictureFilled', - }, - }, - { - path: '/pages/dynamicForm', - name: 'pagesDynamicForm', - component: () => import('/@/views/pages/dynamicForm/index.vue'), - meta: { - title: 'message.router.pagesDynamicForm', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-diannao', - }, - }, - { - path: '/pages/workflow', - name: 'pagesWorkflow', - component: () => import('/@/views/pages/workflow/index.vue'), - meta: { - title: 'message.router.pagesWorkflow', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-Connection', - }, - }, - ], - }, - { - path: '/make', - name: 'makeIndex', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/make/selector', - meta: { - title: 'message.router.makeIndex', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-siweidaotu', - }, - children: [ - { - path: '/make/selector', - name: 'makeSelector', - component: () => import('/@/views/make/selector/index.vue'), - meta: { - title: 'message.router.makeSelector', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-xuanzeqi', - }, - }, - { - path: '/make/noticeBar', - name: 'makeNoticeBar', - component: () => import('/@/views/make/noticeBar/index.vue'), - meta: { - title: 'message.router.makeNoticeBar', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'ele-Bell', - }, - }, - { - path: '/make/svgDemo', - name: 'makeSvgDemo', - component: () => import('/@/views/make/svgDemo/index.vue'), - meta: { - title: 'message.router.makeSvgDemo', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'fa fa-thumbs-o-up', - }, - }, - ], - }, - { - path: '/params', - name: 'paramsIndex', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/params/common', - meta: { - title: 'message.router.paramsIndex', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-zhongduancanshu', - }, - children: [ - { - path: '/params/common', - name: 'paramsCommon', - component: () => import('/@/views/params/common/index.vue'), - meta: { - title: 'message.router.paramsCommon', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-putong', - }, - }, - { - path: '/params/common/details', - name: 'paramsCommonDetails', - component: () => import('/@/views/params/common/details.vue'), - meta: { - title: 'message.router.paramsCommonDetails', - isLink: '', - isHide: true, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-Comment', - }, - }, - { - path: '/params/dynamic', - name: 'paramsDynamic', - component: () => import('/@/views/params/dynamic/index.vue'), - meta: { - title: 'message.router.paramsDynamic', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-dongtai', - }, - }, - /** - * tagsViewName 为要设置不同的 "tagsView 名称" 字段 - * 如若需设置不同 "tagsView 名称"，tagsViewName 字段必须要有 - */ - { - path: '/params/dynamic/details/:t/:id/:tagsViewName', - name: 'paramsDynamicDetails', - component: () => import('/@/views/params/dynamic/details.vue'), - meta: { - title: 'message.router.paramsDynamicDetails', - isLink: '', - isHide: true, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-Lightning', - }, - }, - ], - }, - { - path: '/visualizing', - name: 'visualizingIndex', - component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/visualizing/visualizingLinkDemo1', - meta: { - title: 'message.router.visualizingIndex', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'ele-ChatLineRound', - }, - children: [ - { - path: '/visualizing/visualizingLinkDemo1', - name: 'visualizingLinkDemo1', - component: () => import('/@/layout/routerView/link.vue'), - meta: { - title: 'message.router.visualizingLinkDemo1', - isLink: `${import.meta.env.VITE_API_URL}#/visualizingDemo1`, - isHide: false, - isKeepAlive: false, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-caozuo-wailian', - }, - }, - { - path: '/visualizing/visualizingLinkDemo2', - name: 'visualizingLinkDemo2', - component: () => import('/@/layout/routerView/link.vue'), - meta: { - title: 'message.router.visualizingLinkDemo2', - isLink: `${import.meta.env.VITE_API_URL}#/visualizingDemo2`, - isHide: false, - isKeepAlive: false, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-caozuo-wailian', - }, - }, - ], - }, - { - path: '/chart', - name: 'chartIndex', - component: () => import('/@/views/chart/index.vue'), - meta: { - title: 'message.router.chartIndex', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-ico_shuju', - }, - }, - { - path: '/personal', - name: 'personal', - component: () => import('/@/views/personal/index.vue'), - meta: { - title: 'message.router.personal', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-gerenzhongxin', - }, - }, - { - path: '/tools', - name: 'tools', - component: () => import('/@/views/tools/index.vue'), - meta: { - title: 'message.router.tools', - isLink: '', - isHide: false, - isKeepAlive: true, - isAffix: false, - isIframe: false, - roles: ['admin', 'common'], - icon: 'iconfont icon-gongju', - }, - }, - { - path: '/link', - name: 'layoutLinkView', - component: () => import('/@/layout/routerView/link.vue'), - meta: { - title: 'message.router.layoutLinkView', - isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation', - isHide: false, - isKeepAlive: false, - isAffix: false, - isIframe: false, - roles: ['admin'], - icon: 'iconfont icon-caozuo-wailian', - }, - }, - { - path: '/iframes', - name: 'layoutIfameView', - component: () => import('/@/layout/routerView/iframes.vue'), - meta: { - title: 'message.router.layoutIfameView', - isLink: 'https://nodejs.org/zh-cn/', - isHide: false, - isKeepAlive: false, - isAffix: true, - isIframe: true, - roles: ['admin'], - icon: 'iconfont icon-neiqianshujuchucun', - }, - }, - ], - }, -]; - -/** - * 定义404、401界面 - * @link 参考：https://next.router.vuejs.org/zh/guide/essentials/history-mode.html#netlify - */ -export const notFoundAndNoPower = [ - { - path: '/:path(.*)*', - name: 'notFound', - component: () => import('/@/views/error/404.vue'), - meta: { - title: 'message.staticRoutes.notFound', - isHide: true, - }, - }, - { - path: '/401', - name: 'noPower', - component: () => import('/@/views/error/401.vue'), - meta: { - title: 'message.staticRoutes.noPower', - isHide: true, - }, - }, -]; - -/** - * 定义静态路由（默认路由） - * 此路由不要动，前端添加路由的话，请在 `dynamicRoutes 数组` 中添加 - * @description 前端控制直接改 dynamicRoutes 中的路由，后端控制不需要修改，请求接口路由数据时，会覆盖 dynamicRoutes 第一个顶级 children 的内容（全屏，不包含 layout 中的路由出口） - * @returns 返回路由菜单数据 - */ -export const staticRoutes: Array = [ - { - path: '/', - name: '/', - component: () => import('/@/layout/index.vue'), - meta: { - title: '布局界面', - }, - children: [ - // 请不要往这里 `children` 中添加内容，此内容为了防止 No match found for location with path "xxx" 问题 - ...notFoundAndNoPower, - ], - }, - { - path: '/login', - name: 'login', - component: () => import('/@/views/login/index.vue'), - meta: { - title: '登录', - }, - }, - /** - * 提示：写在这里的为全屏界面，不建议写在这里 - * 请写在 `dynamicRoutes` 路由数组中 - */ - { - path: '/visualizingDemo1', - name: 'visualizingDemo1', - component: () => import('/@/views/visualizing/demo1.vue'), - meta: { - title: 'message.router.visualizingLinkDemo1', - }, - }, - { - path: '/visualizingDemo2', - name: 'visualizingDemo2', - component: () => import('/@/views/visualizing/demo2.vue'), - meta: { - title: 'message.router.visualizingLinkDemo2', - }, - }, -]; diff --git a/src/router/static.ts b/src/router/static.ts new file mode 100644 index 0000000..cd39218 --- /dev/null +++ b/src/router/static.ts @@ -0,0 +1,52 @@ +import { RouteRecordRaw } from 'vue-router'; +import { notFoundAndNoPower } from './notfound'; + +/** + * 定义静态路由（默认路由） + * 此路由不要动，前端添加路由的话，请在 `dynamicRoutes 数组` 中添加 + * @description 前端控制直接改 dynamicRoutes 中的路由，后端控制不需要修改，请求接口路由数据时，会覆盖 dynamicRoutes 第一个顶级 children 的内容（全屏，不包含 layout 中的路由出口） + * @returns 返回路由菜单数据 + */ +export const staticRoutes: Array = [ + { + path: '/', + name: '/', + component: () => import('/@/layout/index.vue'), + meta: { + title: '布局界面', + }, + children: [ + // 请不要往这里 `children` 中添加内容，此内容为了防止 No match found for location with path "xxx" 问题 + ...notFoundAndNoPower, + ], + }, + { + path: '/login', + name: 'login', + component: () => import('/@/views/login/index.vue'), + meta: { + title: '登录', + }, + }, + /** + * 提示：写在这里的为全屏界面，不建议写在这里 + * 请写在 `dynamicRoutes` 路由数组中 + */ + { + path: '/visualizingDemo1', + name: 'visualizingDemo1', + component: () => import('/@/views/visualizing/demo1.vue'), + meta: { + title: 'message.router.visualizingLinkDemo1', + }, + }, + { + path: '/visualizingDemo2', + name: 'visualizingDemo2', + component: () => import('/@/views/visualizing/demo2.vue'), + meta: { + title: 'message.router.visualizingLinkDemo2', + }, + }, + ...notFoundAndNoPower, +]; diff --git a/src/theme/app.scss b/src/theme/app.scss index 4c75296..7041432 100644 --- a/src/theme/app.scss +++ b/src/theme/app.scss @@ -17,7 +17,7 @@ --next-color-warning-lighter: #fdf6ec; --next-color-danger-lighter: #fef0f0; --next-color-dark-hover: #0000001a; - --next-color-menu-hover: rgba(0, 0, 0, 0.2); + --next-color-menu-hover: rgba(0, 0, 0, 0.04); --next-color-user-hover: rgba(0, 0, 0, 0.04); --next-color-seting-main: #e9eef3; --next-color-seting-aside: #d3dce6; @@ -76,6 +76,7 @@ body, background: var(--el-color-white); width: 100%; height: 100%; + min-height: 650px; border-radius: 4px; border: 1px solid var(--el-border-color-light, #ebeef5); } diff --git a/src/utils/eventbus.ts b/src/utils/eventbus.ts new file mode 100644 index 0000000..5ed5e39 --- /dev/null +++ b/src/utils/eventbus.ts @@ -0,0 +1,5 @@ +import mitt from 'mitt'; + +const eventbus = mitt(); + +export default eventbus; diff --git a/src/utils/other.ts b/src/utils/other.ts index a042ccd..4f0bf3b 100644 --- a/src/utils/other.ts +++ b/src/utils/other.ts @@ -157,44 +157,3 @@ export function handleEmpty(list: any) { } return arr; } - -/** - * 统一批量导出 - * @method elSvg 导出全局注册 element plus svg 图标 - * @method useTitle 设置浏览器标题国际化 - * @method setTagsViewNameI18n 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化 - * @method lazyImg 图片懒加载 - * @method globalComponentSize() element plus 全局组件大小 - * @method deepClone 对象深克隆 - * @method isMobile 判断是否是移动端 - * @method handleEmpty 判断数组对象中所有属性是否为空，为空则删除当前行对象 - */ -const other = { - elSvg: (app: App) => { - elSvg(app); - }, - useTitle: () => { - useTitle(); - }, - setTagsViewNameI18n(route: any) { - return setTagsViewNameI18n(route); - }, - lazyImg: (el: any, arr: any) => { - lazyImg(el, arr); - }, - globalComponentSize: () => { - return globalComponentSize(); - }, - deepClone: (obj: any) => { - return deepClone(obj); - }, - isMobile: () => { - return isMobile(); - }, - handleEmpty: (list: any) => { - return handleEmpty(list); - }, -}; - -// 统一批量导出 -export default other; diff --git a/src/utils/request.ts b/src/utils/request.ts index c1cb090..421674d 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,5 +1,6 @@ import axios from 'axios'; import { ElMessage, ElMessageBox } from 'element-plus'; +import router from '../router'; import { Session } from '/@/utils/storage'; // 配置新建一个 axios 实例 @@ -14,7 +15,7 @@ service.interceptors.request.use( (config) => { // 在发送请求之前做些什么 token if (Session.get('token')) { - (config.headers).common['Authorization'] = `${Session.get('token')}`; + config.headers!['Authorization'] = Session.get('token') as string; } return config; }, @@ -28,20 +29,18 @@ service.interceptors.request.use( service.interceptors.response.use( (response) => { // 对响应数据做点什么 - const res = response.data; - if (res.code && res.code !== 0) { + const { code } = response.data || {}; + if (+code !== 0) { // `token` 过期或者账号已在别处登录 - if (res.code === 401 || res.code === 4001) { + if (code === 401 || code === 4001) { Session.clear(); // 清除浏览器全部临时缓存 - window.location.href = '/'; // 去登录页 - ElMessageBox.alert('你已被登出，请重新登录', '提示', {}) - .then(() => {}) - .catch(() => {}); + // window.location.href = '/'; // 去登录页 + router.replace({ name: 'login', query: { redirect: router.currentRoute.value.fullPath } }); + ElMessageBox.alert('你已被登出，请重新登录', '提示', {}).catch(() => {}); } return Promise.reject(service.interceptors.response); - } else { - return response.data; } + return response.data; }, (error) => { // 对响应错误做点什么 diff --git a/src/utils/storage.ts b/src/utils/storage.ts index a983f80..837e086 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -43,8 +43,8 @@ export const Session = { // 获取临时缓存 get(key: string) { if (key === 'token') return Cookies.get(key); - let json: any = window.sessionStorage.getItem(key); - return JSON.parse(json); + let json = window.sessionStorage.getItem(key); + return json ? JSON.parse(json) : null; }, // 移除临时缓存 remove(key: string) { diff --git a/src/utils/wartermark.ts b/src/utils/wartermark.ts index b897ed1..1c96e34 100644 --- a/src/utils/wartermark.ts +++ b/src/utils/wartermark.ts @@ -1,6 +1,7 @@ +const id = '1.23452384164.123412416'; + // 页面添加水印效果 const setWatermark = (str: string) => { - const id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id)); const can = document.createElement('canvas'); can.width = 200; @@ -38,7 +39,6 @@ const watermark = { }, // 删除水印 del: () => { - let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id)); }, }; diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue index db3255e..6ae517f 100644 --- a/src/views/chart/index.vue +++ b/src/views/chart/index.vue @@ -1,5 +1,5 @@ - + diff --git a/src/views/fun/echartsMap/index.vue b/src/views/fun/echartsMap/index.vue index 87ea99a..ebd229e 100644 --- a/src/views/fun/echartsMap/index.vue +++ b/src/views/fun/echartsMap/index.vue @@ -22,8 +22,8 @@ export default defineComponent({ const storesTagsViewRoutes = useTagsViewRoutes(); const { themeConfig } = storeToRefs(storesThemeConfig); const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes); - const state: any = reactive({ - echartsMap: null, + const state = reactive({ + echartsMap: null as HTMLDivElement | null, echartsMapList, echartsMapData, }); @@ -53,7 +53,7 @@ export default defineComponent({ }; // 初始化 echartsMap const initEchartsMap = () => { - const myChart = echarts.init(state.echartsMap); + const myChart = echarts.init(state.echartsMap!, undefined, { renderer: 'svg' }); const option = { tooltip: { trigger: 'item', diff --git a/src/views/fun/echartsMap/mock.ts b/src/views/fun/echartsMap/mock.ts index 16623c7..fbef3ae 100644 --- a/src/views/fun/echartsMap/mock.ts +++ b/src/views/fun/echartsMap/mock.ts @@ -1,5 +1,5 @@ // 地图模拟数据 -export const echartsMapList = [ +export const echartsMapList: { name: string, value: number }[] = [ { name: '海门', value: 9 }, { name: '鄂尔多斯', value: 12 }, { name: '招远', value: 12 }, @@ -193,7 +193,7 @@ export const echartsMapList = [ ]; // 地图经纬度数据 -export const echartsMapData = { +export const echartsMapData: Record = { 海门: [121.15, 31.89], 鄂尔多斯: [109.781327, 39.608266], 招远: [120.38, 37.35], diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 6475fba..bc3c09c 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -72,10 +72,10 @@ import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; -let global: any = { - homeChartOne: null, - homeChartTwo: null, - homeCharThree: null, +let global = { + homeChartOne: null as echarts.ECharts | null, + homeChartTwo: null as echarts.ECharts | null, + homeCharThree: null as echarts.ECharts | null, dispose: [null, '', undefined], }; @@ -184,7 +184,7 @@ export default defineComponent({ iconColor: '#FBD4A0', }, ], - myCharts: [], + myCharts: [] as echarts.ECharts[], charts: { theme: '', bgColor: '', @@ -193,8 +193,8 @@ export default defineComponent({ }); // 折线图 const initLineChart = () => { - if (!global.dispose.some((b: any) => b === global.homeChartOne)) global.homeChartOne.dispose(); - global.homeChartOne = echarts.init(homeLineRef.value, state.charts.theme); + if (!global.dispose.some(b => b === global.homeChartOne)) global.homeChartOne!.dispose(); + global.homeChartOne = echarts.init(homeLineRef.value, state.charts.theme, { renderer: 'svg' }); const option = { backgroundColor: state.charts.bgColor, title: { @@ -270,13 +270,13 @@ export default defineComponent({ }, ], }; - (global.homeChartOne).setOption(option); - (state.myCharts).push(global.homeChartOne); + global.homeChartOne.setOption(option); + state.myCharts.push(global.homeChartOne); }; // 饼图 const initPieChart = () => { - if (!global.dispose.some((b: any) => b === global.homeChartTwo)) global.homeChartTwo.dispose(); - global.homeChartTwo = echarts.init(homePieRef.value, state.charts.theme); + if (!global.dispose.some(b => b === global.homeChartTwo)) global.homeChartTwo!.dispose(); + global.homeChartTwo = echarts.init(homePieRef.value, state.charts.theme, { renderer: 'svg' }); var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案']; var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05]; var data = []; @@ -300,7 +300,7 @@ export default defineComponent({ style: { image: themeConfig.value.isIsDark ? '' - : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK0AAACtCAYAAADCr/9DAAAcoElEQVR4Xu19e7wcRZn28/ZM90xXzzknOYEkIAEiBAUUFyFc4wKCCAt8gHhBUEDFG8K3Iri6+3ETL0hQ9FthvYC4gAb0cwFRQcUlKiIIbpRbEBGUREJIyHWmq2e6Z+r9fjU5iQnJOWcuPV195nT/l5yq93nep57p6amueouQXV0rwMzW6tWrS4XCsFvPVQWIyAphKweR3ShUGw2EAwMIAfhE1OgacJIHoEme/7jpM3O+UgnnWFZuDpF6pQJ2JtDOBJ4JwgxmmgbwEABr3GAAM1Ah8CqAVgC8nEBLFWgJQz1Liv7sefZTRBS0EGvSNslMu9nQL1u2TEyZsv3rARygwK8nxuvIwh7McBJ0iL4T/xXgR8DW75nxcL2ef2jKFFqTIIdUQ01q02qTDg5v/wZLqSMZ9I8AtGHtFI6YAmExFO4jsu6N3Ny9Q0SrU8gzEUqTzrSrV8ud7aJ1okW54wg4jJmLiSgdL4i+Gz8Moh9xQ91ZKhUeizd8uqNNCtNKya9QqnYqWdbbAcwF0Fd5M/AnZv5/UFgwMFBYnG7Ldc+urwZvczmY2Q6CxolMfDaYjwKQ616uCRHhd2BcX63at0ybRusnBOM2SfadaYOAd2Wun8PgMwFMb1OPvmlORBUGfw8K13qes6hvEuunr0nfD/dn4gsJdAqAfD8NUpe5MBF+wWR9QRRydxMRdxnPePcJf6etBNGRFvNFDBxuXM20EyA8QWx9xnVz3yMilXa6o/GbsKYNgugNivlzAOZNVPGN8SY8rpgvK7nObRPxzjvhTFsu1/ay8rgKTP9kbND7BZixyLLoQte1F06klCaMadetWzecz7uXg/DB7Jk1bovRD3JW42PFYvHZuCP3Il7qTcvMJKvRe8D0eYC374UIWcymAlUwf14I5/NEVEuzJqk27bp11Tm2bV3HwGFpFrGfuDHwlKLG+wdd97605pVK0+q7axBE/8zAZwGItIrXx7wUA9esWfXiJ2fNmpW6FWepM63v8w6M6EYivKmPTTExUiM8wQ2cXio5j6SJcKpMu96vnZQj6zqAt0uTSJOcS41B/+a5+S+lZXosFaZduJDzcw+MPk/Ax/rpLV1/mZ1+FLn5M6aQ+XW9xk1bLvN0ykXfpeyN1kTw+F9Y4WTTjwtGTavXC4DodoB3mggjlnFsrun0AT5LiML3TelhzLRS1t7KoBuz2QFTQ98VrgLzJZ5X0LM7iV9GTCtl+FEGvtjiZsDERckAW1SAcN1DD9rnHHEE1VvsEUuzxE1bkbX5BPp4LOyzIOYVYP6hEM7biaiaFJnETKtrA8hq9DUw3p9UchlOMgro9bpu0T5BLzxPAjER0zJzTlajG8A4I4mkMozkFSDggWq1cuzw8PC6XqP33LT6DhtUo/9kxrt7nUwW37gCD/iVtUdPnz69p3fcnpvW98PrQXifcTkzAokoQET3rnpp+fG9XLPQU9NKGX2RwfotV3ZNIgWY+S5POCcRUdSLtHtm2oqMLiTwVb0gncVMvwIM3Oq59mm9WK/QE9NKWX8HQy2YZPOwzIz1ROQDqqbvMrp4HYAiQLqKjS5SN1lqLzQ/VQSeL0ThE3F/xGI3rZTRwQzWe44KcZM1Ha9ZS4D5CRAeJcZitqxnuK6WAOGLnue9RDT6JLv+QVoul4cLhYHpzPVZjQbvRkSvAngfxdiHCMOm8+sBPoNwtuc6N8QZO1bTrpJyVhH2wwDPiJOkqVjMWG0R7mELv2LLvt+z8Vivtl5Xq9XdmfOHKqh5YD4GoL5Yj0GEEExHCmH/Oq5xjM20upCbDCK9RWP/uMiZiEOEv0DXxYJ1h+vmHzJVBLlcq72GFE4gJl1/7B9MaBEj5ouE+v5CiL/FETM20/p+eJ3+KoiDVNIxGCgT4RZifEsI58Gk8cfDq1Z5j7oK30OwzgR4h/Hap/TvDwjXPiyOGYVYTFsJwncT46aUijUqLQKeZsaXhLBvTuoVZDca6R92QdA4iaEuAHBQN7FM9CXQ1ULYmntXV9emXVetzrHZ+h9mDHTFJMHOzHiEiS8vuc4dvXpG7XU6UkaHKlaXENHRvcaKMT6DreM9L39XNzG7Mq3+5Mugfj/AB3RDIqm+uo6rBesi1819vxfzh0nlsTmOlNE8Bl8xccpD0YvCzb+WiFZ2qldXpvWD6FIwX9YpeFL9mLHWIvq06+avISJ9ykzfXXpuHFBXMrBL2pMj0B1C2Cd3yrNj01Yq4T+QhYdSekbBZnrwf4Hr53me90KnIk2UfsuXL/dKg8OXE/DPaX+RwcTvKrmF73SibUembS41DCJtWH2wRiovZqxQxB8aFIXbU0mwh6R8358L2P8Jwl49hOkyNL2kGvm9Bgbaf0zoyLRSRh9jsN4uk86L+W6lnLMGBvRZXZPz0vPmQRB9gYFz0rotnwg3C9dpe41126aVUu7EyD8JoJRCOzT0M7YQzmf75YdWtxo3N5ASfROMwW5j9aA/W0RHtltqtAPThrcwcGoPEugyJK1hhXeWSvZPuwzUd911Td9cnu5gxpzUJUd4/KEH7X3b2RzZlmmljA5hsH6H3Fa/3gvFf1UNHDcZjiPqVEtmHg6C6HYG9CF/6boYH/E85z9aJdWy+Zp1YoPoAQAHtho8iXbM/Aewc0ypRC8mgTeRMZi5IGW4AERvSVkeK4Vr707U2hFSLZtWytopDDJWVWQUkR8Urn0sEa1N2SCkls7IJlP9jKuPrErPxfwZzytc3Aqhlkw7sv37cTD2bCVoQm30AoyjJ8KagYT0aBlmZDyvB+M9LXfqfcOKatR2GxgYGHfGpyXTVoLaacTU0URwj3JdFNb8I6dOnZrdYTsUWBvXD6LvUIp+VOvtWUIU/mW8lMY1bTM5GT5ORCm5y/KzquEc1Mmk9HhiTLa/66NYfRn9OC0FrPW3Zj0KZg8ODr401liMa9r1snZyDnRbOgaUXmpYjUMHi8U/pYPPxGfBzEO+jO4nwt6pyIb5cs8rXNqVaaUMf8PAwSlIqG4RHeW69i9TwKWvKAQB76K4/rt0VGCnVcLN70xEcjSRx7zTShkexICe5jJ+sVIXlErFq40T6VMClWp0FCn+SRoW2ijGOQOe89VOTbuAgXeaHye+zRMFfVBzdvVQAd+vXQyiy3sI0VJoZiwuec6ojyuj3mnL5fL0XL6whNn0VnD6Wz3Kv25oiFa3lHHWqGMF9ByuH0QLCXhDx0Fi6qiIDh8Y5VFwVNNWZPXjBGt+TBw6DaMXVLzJde3/7jRA1q89BfTzbYOjxwhmt08RsEAI5/RtsR/VtH4QLjb+MoFwvec6WT3b9nzXdWvfDz8CwjVdB+ouQBDW7B2nTt36bec2TeuH4f6o4+HuMLvszbw8FM6eU7NXtF0K2X735huzDTUsDmm/d4w9GB/0POcbL4+4TdNWZO0qAl0YI3zboSyyznLdvD5IJLsMKDCynep3JmcTGPhlSTiHj2va5rm01egvzAY3yDEeFsI+MFvIbcCtm0H6fvh1ED5gkIWSHM3a3vOWbc5hqzvtSAG53xgkCovo8OwlgskR2IDt+/4OIPvPRo/NYpzrec61Y5u2Gs1nxeZOn2H83POc7DBn855tMpCydhWbfFQk3OO5zhYFSba60/p++BgIrzGlGYEOFcI2eqc3lXsacZl5uyCI/sqAZ4hfrbzenjZzpq77u+HawrRSylmM/HMGt9Pc7wlnniFxMthRFPD98BoQPmJMIMs6wSvmf7RN0/p++H4QtppiSIwsWyd7Xv6OxPAyoJYUqFZ5t4aKnjI4k/AfnnA2fWi2uNNWZKhPA9f1UA1cvES4zuyJWhDOgGCJQvoy+gHA/ytR0I2PA4Q/Cdd51bbvtDL6G8CvMEFM1yvwvMKnjGBnoOMq4PvV40HWD8dt2JsGrBr2zI3FVzbdadcGwWybc8/2BnPcqKpWrc8eHhZLxm2ZNTCiQHNDpAyXgshIUWcCv0WMlLjaZNogqJ+uWH3bhCIE/EII5wgT2Blm6wpIGV3N4PNb7xFfSwJ9QQi7ORW7ybS+rF8DKDO/ENss1hCfFFmkdhQw+eKJQPcLYTdnljYzbajnRk1sq2GCPUsIer4dAbO2ySuwoWBL/XlD5z74wrUH9Q/1pmlHVvWsh5kJ5Ec94bwu+SHIEDtRwPfDb4Lw3k76dtsnZ6lXF4vFp5qmXVutvtJW1jPdBu2kP4Pnl3pwql8nXLI+4ytQlrVTLdAt47eMvwWBTxGicFvTtL5fPx6kjExnsEXHlIpZpcP4h7g3ESuVykyyHL3qatzyA7EzILrYc+3PNIErsno+wTKx07UhXHsqEZVjTzAL2DMFpAyfZmD3ngGMFphxk+c5Z47cacNrQc2K0YlezHii5DnGFuckmmwfgckgvJkZ7zKQUnNtygbTyuiHAB+fNAkiLBDutjevJc0lw2tdASnD8xlI/JuZQH8Twp614fHADx8hwj6t046nJYE+KYR9ZTzRsihJKVCpRG8ii3+WFN5mOPpxsrjxTrsC4O0TJ8HqRM8r3pk4bgbYlQJS8ixGZOSVO8HeiRYu5PwBB0Y1AFZXmXTQmRXvUyoVHuuga9bFoAIj8/oBACdxGoz9SFeSsXIFI6XfhWsPZEWREx/2WAB9WXsaoMRnEFipN1O1Wt2joSy9wDfZi7HW85ypyYJmaHEpUJGhLp+01fbuuOKPFofA7yDfD/cHJV+YQx+uXBJ/X9jb62Sz+PEqYGzDAOMDVC4Hh1m53C/iTamlaL/1hHNQSy2zRqlTwA/Cr4HxwaSJ6XN/qVKpHkOWdbcB8IVCOG9MGjfDi0cBKcOrGUh8ba2eJiXfrx4HsjbtdIwnpRaiEP3Ec+1jW2iZNUmhAhVZu0IbKHFqRBeR79dOBJGBHbB8pycKJyaedAYYiwK+X7sMRGOejRAL0MuDEF1m7k7L/GPPKyT+6rgnQk7CoL5f+xSILkk8deZLTZr2p55XOCbxpDPAWBSoyNqVBBr3zK9YwDYLwuB/pSCIjlDM98YdvIV4v/aEY7xMegs8sybbUEDK8N8ZOC9pcQh0AZk6wYYZj5U8J/FFOkmL3K94MghvYsa7E8/PwoepVqu9pt4gA+//6QVP2DsmnnQGGIsCfhDdBebEZ3+Y+F0kJe/EiJbGkkl7QerNZWZEjfa6Za3ToIAvw0UA9k2aCyt1LC1btkwMTdluUxnFJElUg/rO06YJEx+YJNPsS6yKH75EhGmJJ8eYO7KeNtR7tEpJExjrrKikuWR4rSuwevXqoUKxZOQEeIvs2U3TyiB8mtnARjULH/SKW59e0rp8WUsTCvh+OBeEh0xgN5ezamBTy8wAXOsJ51wTyWeYnStQCcKziPGtziN02pPWeMIeHtkjVruRiM7oNFSn/Ri4ryScf+y0f9bPjAIVGf5fAv63AfRmNaINz7RBdAmYE68NS4SKW2zWPagbECCD7FABX4b6ZHoDy0rpdk/Yb2maNgjqpylW3+kwh+66Mfb3POd/uguS9U5KAWZ2ZRDpH2GJ7w8ji64SRftfNtxpw3A/1KFP50v8YqjzS6L45cSBM8COFAiC6DDFbGLTgC7E9D7PdW7YWDVRyCDSVRNzHWXSRSdmvrvkFf6pixBZ1wQVKPu1T1tEFyUIuQmKgIOFcB7cVERMBuEfmbHpMIYESQXCtYeJqJogZgbVoQK+DPVB3/t32L2bbg2/Yk+ZPp0qfzetDG9h4NRuonbcl9UJnldMfvdEx4QnZ0cp5U4j58wlXyMD/FRJFF6tld9k2oqMLiTwVUaGg3CT5zpnGsHOQFtWwFQNL02Qwd8uiUJzVdkm066Xcl4O+ftaziDGhsxYv3LF8zNmz56dPSLEqGvcoXwZPgjgwLjjthKPoM4TonjNFqZl5uLIVEahlSBxt2HFp5VKBSMVpuPOpR/jlcu1Pa0cPWGkmLIWNI/Xe47z+y1Mq/9RkeGvCDCym4CBhaVsS3lq/S5l9EUGf8wMQVor3Py0jad5blGC3A+iT4E5+c1qG5TgRl3tOThYTL5Ek5mRmDCoS5cudYenzVwC8HZmSNOdnrA37dx+2Snk0TwGG3mu1WJYhK+7rvMhM8JkqKMpYPqgbwLOE8JpPs9u9XjAzHlfRiuJMMXQEAaqUdt1YGBghSH8DPZlCuiynn4QLSYYmcNvsqlHao+hoeLT2zSt/k8pw1sZeIep0dPTbkIUEt+abCrftONWgtppxGRmXcqGX31PCeE052fHMG3tnQxaYFBMySrcrVQqLTfIIYPecChiLqhGi5mxhylBNi6SGdO0zFwKqvUXmVmYIgpY13oiny0ONzcATWTfD84G5a4zSYPyOEg4zm/HNO0GsrXvg+gUg2TrqsH7DgwUHjfIYVJDr1y5ckB4g08BtIMpIYjwnFu0ZxMRj2taKetvY6jvmSLbxCX6uefabzLKYRKDSxnNZ3DzqHpTF4GuFMLeqjLjNo+K1NvKB4e2e4EIg6YIa1yLcIbrOjeb5DAZsf0w3Bf15sbFvMn8VYNfu61v21HPNy374TcswvtNkmbGKk/YexLRSpM8JhO2nvaUQaSfIV9vNG/Gw57nHLAtDqOaVsrwAAa2eAA2kgTznZ6X1bFNSvuyX/uUZaKE58sTHKO8wJgnSfsy1Hu3zH7idDKMD3ue87WkBm6y4qyX8tA88r9gw48FAK3zK2t2mj59eqWtO61uHAThexTjhhQMomSFQ0sl5w8p4NKXFJh5uyCIfsfALilI8CuecEbdoj7mnZaZCzKoPwfwjBQk8qxw7f2JaE0KuPQVBf0SQVbrPwHzUSlIrFGP1KuHhop/Ho3LmKbVnfwguhjMl6cgGT0Ndo8o5o8joigVfPqEhJTRlxj80XSkw7d7ovCWsbiMa9p163g4b0fPmShQt03ijBs8z3lfOgSe+CykDM9l4CtpyYSAA4VwxqwTNq5pdTIVWZtPIKMTzVuIyvxpzyuYWveblvHtmoeUtVMY9F0TpQO2RZ4Z95Q85+jxEmvJtCOHPj8LwBsvYFJ/14dUCGGb2YiZVJI9xPH96rEg63YARrZXbXtWgOYJYd8/Xtotmbb5bOvXPgeifx0vYIJ/Z333F8L+YoKYfQGlDUtW7r90iaPUJMR8t9di0ZaWTbuGeYoTRM8AGE5NopoI0WWeaydePC9VGrRBpixrp1horo9NzR0WgGKF/Vqd0mzZtBuebcOPEvClNjRKpinjq0LY52XnN4wtd9kPP2xR80dX4uWvxmTGuNHznLNaNUtbpn3iCXZ2mR0+TqA5rQIk1o75LimdU7ffnnQp/uzaTAE9D+sH0XwCDO2mHXM4fIL9KiHo+VYHrS3T6qDVanRMQ3Hip5a3lBDjSaX4lIGBwpMttZ8EjZh5WFbDBWB6cxrTZaJ/K7n2Fe1wa9u0OriU0W0MPrkdoKTaMlC2wB8QonBrUphpxZEyOoShFgCUhlezW8nE4Kc819mHiMJ2NOzQtHInhbzeoTnQDliSbQm42XXtc4lIlzCdVNfChZw/4KD6RWD+P6bXxI4hPCuiNw64dtu1bjsyrSbi++E5IFybcjcsgWWd4xXzP045z9joVSo1fef6JshIOc7W8yBc77lOR+u1OzYtM+vDoO9l4PDWmZppyeDvWmhcIIRo+WHfDNPOUVes4JIohZcQSK8hsDuPlEjPpbVq5bXDw8PrOkHr2LQabE0Q7Gqr3COmt+W0kjgRlRnqqvK6NVfPnDnTyAmVrfBst82GFVrRmVD8GZC5TYht8FYW0dGua/93G322aNqVaXWkShCeQYwbOyWQfD9eTqDPua593USuPq4rv1SC8K0W0aVg7JW8jp0hMvDlknDO76z3hl5dm7ZpXBl+m4DTuyGSdF9mvEjgaxqN2lcHBwdXJY3fKZ4uyVqR0Rk5C+czY4vKK53GTLDfomXPP3fInDlzat1gxmJavUfeKw09NAFFBBH5DL6FGNcLsWVRiG6Ejbvvump195yiswnWewHePu74vY7HjHWNnJo7VPx7Ta5OMWMxrQav1Wp7N5T1oK5Q0ykZ0/0Y/Eci61ZVV99LwwsKn3lHDqK3EfB2AAfH9c1oQGdW4LcOiMJtcWDHZlpNRsra20bWZ8YaN45E247BeJKI7lIW7vEK+d/oH3Jtx2izw9NPP12Y8YpXzM1x7kgiOpaBubr8Q5th0tec+bOeV4jtGKfYzeX7tU/D0DlTPRytBoBHwc0t9Y8Q0aNRJP84NDS0ulPMFStWlDxvyhzLsvZpsNrHAh3AYH3UUbHTmOnsR3cKN3/yxirecXCM3bQj87e6XKj+Suv3S88z/oWZl1sWrVSMVcRcgYUqM+o5siwFFJnZI8I0KF1Jm2YwsCsRJtxzaQeD+YfyenvezJkU6xRj7KbViW0odz7j5wAO6SDRrEtfKMBLwPWDPc9bFnc6PTGtJrmWeWpehvcR0d5xk87ipV6Bl/I5PqxQKCzuBdOemVaT9X1/R7Ls+5jxyl6Qz2KmUoG1YBzpec6iXrHrqWmbd9y1wWzbsX4J0KxeJZHFTYcCRFQB481C2L/pJaOem1aTX7euunvepnsz4/ZyKM3G1i9pGnWcMDBgL+w1k0RMq5MIAp6tONTG3bXXSWXxk1VAz2ETcLzr2r9KAjkx0+pk9CnWinM/I6I9k0guw0hCAVpVBx83lOAr8ERNqyVk5mkyiH4E4KAkJM0weqkAL1ENHDsw0JtZgtGYJ27aEeO6MqgvAPikXkqaxe6pAr8H28d7HsU+DzseayOmHTGuFQThlQy6YAIvBBlP3z79O93pV9acPlrR414nbcy0GxPTi8gt0NdSVaKn16pP3PgM5iuEcC6Ocy1Bu3IYN60m7PvhfiD+fjaz0O7wJdder4dl4vfGtbywG+apMK1OQL/2tYPwWwBtOiK9m8SyvrEqsChn2e8oFmnU6tyxoo0TLDWm3cizLMNzLWA+gPRU9EtyRNKFpRj4d8+1P9FuQY1eppE60+pky+XaXlaObgKwXy+Tz2KPqcBSVvTeUsnWq/VSdaXStCOzC3k/qF9A4Euzu26inlEgfF0U7U+mtTpPak27cZiq1erudWV9g4AjEh26yQjGeLJB9Q8MCvHrNKefetOO3HXJ98PTybKuAHinNAs6EbkxYz2YP/fCC0u+3O327iTynxCm3SgEMwtZrX8C3DwdO/uh1r1DGmgWWoku8jzvhe7DJRNhQpl2oyRS8iwmfb4ZdPXotNetSmYk20NhgH/Mii5utWR8e+F723pCmvbvz7v8ykYjuoQIp5s/z7W3AxVbdKKfEvMl453VFRteDwJNaNNuZt7dGxx9HIwz+m8LdiyjrgC6k8BXCuE8GEtEg0H6wrQb9SuXebqVr38IjA8BvINBXVMBrauiE3Bjo66+MjhY/FMqSMVAoq9Mu9kPNrsShCdZZJ0N5iNTd5pLDAM3TohFYFwnpf2dfjw4pS9Nu/mASilnKcq9i0CngfGa3vvFGMJSBt+KHL5dKhQeNcYiAeC+N+3mGpZrtb0shVNY0UlE2Heir+Mlwp9B9AMo3Oa6+QeIiBPwjHGISWXazdX2fd4RiI4lwlEMvBHAdOOjMQ4B/YwK5vssop/V6/zTwcHCH9POuRf8Jq1pXy5muVzb08rTPCg+CBbNBUNvvsz3QvQWYzIB+hDthxXUb4mt+4WwF2WnUsZUCbzFQZhQzZr1yGbM2Jsb2Nti3pMZc0C0GzN2IcKUGJPxwVgComcY/Azp9/+NxuJ6PXi004M0YuSWylDZnbaDYdGFo2u12g5K5WbUWW1nWTTFYgwo6OqIVgEKNpPKE6MGywqJEQJcY4ZPZK1pEK9GXa1Qylk+NEQdlwvtgHpfdPn/ixNifr4QLGYAAAAASUVORK5CYII=', + : '/img/ring.png', width: 230, height: 230, }, @@ -355,13 +355,13 @@ export default defineComponent({ }, ], }; - (global.homeChartTwo).setOption(option); - (state.myCharts).push(global.homeChartTwo); + global.homeChartTwo.setOption(option); + state.myCharts.push(global.homeChartTwo); }; // 柱状图 const initBarChart = () => { - if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose(); - global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme); + if (!global.dispose.some(b => b === global.homeCharThree)) global.homeCharThree!.dispose(); + global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme, { renderer: 'svg' }); const option = { backgroundColor: state.charts.bgColor, title: { @@ -486,17 +486,17 @@ export default defineComponent({ }, ], }; - (global.homeCharThree).setOption(option); - (state.myCharts).push(global.homeCharThree); + global.homeCharThree.setOption(option); + state.myCharts.push(global.homeCharThree); }; // 批量设置 echarts resize const initEchartsResizeFun = () => { nextTick(() => { - for (let i = 0; i < state.myCharts.length; i++) { + state.myCharts.forEach((item, i) => { setTimeout(() => { - (state.myCharts[i]).resize(); + state.myCharts[i].resize(); }, i * 1000); - } + }); }); }; // 批量设置 echarts resize diff --git a/src/views/login/component/account.vue b/src/views/login/component/account.vue index 277a7fe..c872c24 100644 --- a/src/views/login/component/account.vue +++ b/src/views/login/component/account.vue @@ -95,7 +95,7 @@ export default defineComponent({ // 登录 const onSignIn = async () => { state.loading.signIn = true; - // 存储 token 到浏览器缓存 + // TODO token 来自后端接口，存储 token 到浏览器缓存 Session.set('token', Math.random().toString(36).substr(0)); // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据） Cookies.set('userName', state.ruleForm.userName); diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 2eb3ed3..4786173 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -34,7 +34,7 @@ import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; -import logoMini from '/@/assets/logo-mini.svg'; +import logoMini from '/@/assets/logo-mini.png'; import loginIconTwo from '/@/assets/login-icon-two.svg'; import { NextLoading } from '/@/utils/loading'; import Account from '/@/views/login/component/account.vue'; diff --git a/src/views/make/svgDemo/index.vue b/src/views/make/svgDemo/index.vue index 36fd320..0119af9 100644 --- a/src/views/make/svgDemo/index.vue +++ b/src/views/make/svgDemo/index.vue @@ -20,7 +20,7 @@ - + diff --git a/src/views/visualizing/demo2.scss b/src/views/visualizing/demo2.scss new file mode 100644 index 0000000..3857b36 --- /dev/null +++ b/src/views/visualizing/demo2.scss @@ -0,0 +1,553 @@ +.visualizing-demo2 { + height: 100%; + width: 100%; + overflow: hidden; + background: url(https://img-blog.csdnimg.cn/6267533849444025811bf0840f9366e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_20,color_FFFFFF,t_70,g_se,x_16); + background-size: 100% 100%; + display: flex; + flex-direction: column; + font-size: 13px; + .big-data-up { + height: 70px; + width: 100%; + display: flex; + align-items: center; + padding: 0 15px; + color: #43bdf0; + overflow: hidden; + .up-left { + width: 30%; + font-style: italic; + } + .up-center { + width: 40%; + display: flex; + justify-content: center; + font-size: 20px; + letter-spacing: 5px; + background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0); + -webkit-text-fill-color: transparent; + background-clip: text; + -webkit-background-clip: text; + background-size: 200% 100%; + animation: masked-animation 4s infinite linear; + -webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1))); + @keyframes masked-animation { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } + } + position: relative; + &::after { + content: ''; + width: 50%; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + border: 1px transparent solid; + border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10; + } + span { + cursor: pointer; + } + } + .up-right { + width: 30%; + justify-content: flex-end; + display: flex; + align-items: center; + .ml15:hover { + cursor: pointer; + } + ::v-deep(.el-dropdown) { + font-size: 13px !important; + color: #43bdf0; + cursor: pointer; + } + } + } + .big-data-down { + flex: 1; + overflow: hidden; + display: flex; + .big-data-down-left, + .big-data-down-right { + width: 30%; + display: flex; + flex-direction: column; + .flex-warp-item { + padding: 0 7.5px 15px 15px; + width: 100%; + height: 33.33%; + .flex-warp-item-box { + width: 100%; + height: 100%; + background: rgba(22, 34, 58, 0.4); + display: flex; + flex-direction: column; + padding: 15px; + .flex-title { + margin-bottom: 15px; + color: #c0d1f2; + display: flex; + justify-content: space-between; + .flex-title-small { + font-size: 12px; + } + } + .flex-content { + flex: 1; + font-size: 12px; + } + .flex-content-overflow { + overflow: hidden; + } + } + } + } + .big-data-down-left { + color: #c0d1f2; + .sky { + display: flex; + align-items: center; + .sky-left { + font-size: 30px; + } + .sky-center { + flex: 1; + overflow: hidden; + padding: 0 10px; + .font { + margin-right: 15px; + background: unset !important; + border-radius: unset !important; + padding: unset !important; + } + span { + background: #22bc76; + border-radius: 2px; + padding: 0 5px; + } + .sky-tip { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + .sky-right { + span { + font-size: 30px; + } + font { + font-size: 20px; + } + } + } + .sky-dd { + .sky-dl { + display: flex; + align-items: center; + height: 28px; + overflow: hidden; + div { + flex: 1; + overflow: hidden; + i { + font-size: 14px; + } + } + .tip { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + &:hover { + background: rgba(0, 0, 0, 0.05); + cursor: default; + border-radius: 4px; + } + &:first-child:hover { + background: unset; + } + } + .sky-dl-first { + color: #43bdf0; + } + } + .d-states { + display: flex; + .d-states-item { + flex: 1; + display: flex; + align-items: center; + overflow: hidden; + i { + font-size: 20px; + height: 33px; + width: 33px; + line-height: 33px; + text-align: center; + border-radius: 100%; + flex-shrink: 1; + display: flex; + align-items: center; + justify-content: center; + } + .i-bg1 { + background: #22bc76; + } + .i-bg2 { + background: #e2356d; + } + .i-bg3 { + background: #43bbef; + } + .d-states-flex { + overflow: hidden; + padding: 0 10px 0; + .d-states-item-label { + color: #43bdf0; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .d-states-item-value { + font-size: 20px; + text-align: center; + } + } + } + } + .d-btn { + margin-top: 15px; + .d-btn-item { + border: 1px solid #c0d1f2; + display: flex; + width: 100%; + height: 35px; + border-radius: 35px; + align-items: center; + padding: 0 4px; + margin-top: 15px; + cursor: pointer; + transition: all ease 0.3s; + .d-btn-item-left { + font-size: 20px; + border: 1px solid #c0d1f2; + width: 25px; + height: 25px; + line-height: 25px; + border-radius: 100%; + text-align: center; + font-size: 14px; + } + .d-btn-item-center { + padding: 0 10px; + flex: 1; + } + .d-btn-item-eight { + text-align: right; + padding-right: 10px; + } + } + .d-btn-active { + transition: all ease 0.3s; + border: 1px solid #43bdf0; + color: #43bdf0; + .d-btn-item-left { + border: 1px solid #43bdf0; + } + } + } + } + .big-data-down-center { + width: 40%; + display: flex; + flex-direction: column; + .big-data-down-center-one { + height: 66.67%; + padding: 0 7.5px 15px; + .big-data-down-center-one-content { + height: 100%; + position: relative; + .fixed-top, + .fixed-right, + .fixed-bottom, + .fixed-left { + position: absolute; + width: 100px; + height: 100px; + display: flex; + cursor: pointer; + .circle { + position: absolute; + border-radius: 50%; + background: rgba(0, 0, 0, 0.01); + z-index: 10; + } + .text-box { + position: relative; + z-index: 11; + color: #c0d1f2; + margin: auto; + text-align: center; + font-size: 12px; + i { + font-size: 28px; + margin-bottom: 10px; + } + } + } + .fixed-top { + left: 20px; + top: 20px; + } + .fixed-right { + right: 20px; + top: 20px; + } + .fixed-bottom { + right: 20px; + bottom: 20px; + } + .fixed-left { + left: 20px; + bottom: 20px; + } + .circle:nth-of-type(1) { + width: 100px; + height: 95px; + animation: turnAround 6s infinite linear; + box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4; + } + .circle:nth-of-type(2) { + width: 95px; + height: 100px; + animation: turnAround 10s infinite linear; + box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2; + } + .circle:nth-of-type(3) { + width: 110px; + height: 100px; + animation: turnAround 5s infinite linear; + box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc; + } + .circle:nth-of-type(4) { + width: 100px; + height: 110px; + animation: turnAround 15s infinite linear; + box-shadow: 0 0 1px 0 #09f, inset 0 0 10px 0 #09f; + } + @keyframes turnAround { + 100% { + transform: rotate(360deg); + } + } + } + } + .big-data-down-center-two { + padding: 0 7.5px 15px; + height: 33.33%; + .flex-warp-item-box { + width: 100%; + height: 100%; + background: rgba(22, 34, 58, 0.4); + display: flex; + flex-direction: column; + padding: 15px; + .flex-title { + margin-bottom: 15px; + color: #c0d1f2; + display: flex; + justify-content: space-between; + .flex-title-small { + font-size: 12px; + } + } + .flex-content { + flex: 1; + font-size: 12px; + display: flex; + height: calc(100% - 30px); + .flex-content-left { + display: flex; + flex-wrap: wrap; + width: 120px; + height: 100%; + .monitor-item { + width: 50%; + display: flex; + align-items: center; + .monitor-wave { + cursor: pointer; + width: 40px; + height: 40px; + position: relative; + background-color: #43bdf0; + border-radius: 50%; + overflow: hidden; + text-align: center; + &::before, + &::after { + content: ''; + position: absolute; + left: 50%; + width: 40px; + height: 40px; + background: #f4f4f4; + animation: roateOne 10s linear infinite; + transform: translateX(-50%); + z-index: 1; + } + &::before { + bottom: 10px; + border-radius: 60%; + } + &::after { + bottom: 8px; + opacity: 0.7; + border-radius: 37%; + } + .monitor-z-index { + position: relative; + z-index: 2; + color: #4eb8ff; + display: flex; + align-items: center; + height: 100%; + justify-content: center; + font-weight: bold; + } + } + @keyframes roateOne { + 0% { + transform: translate(-50%, 0) rotateZ(0deg); + } + 50% { + transform: translate(-50%, -2%) rotateZ(180deg); + } + 100% { + transform: translate(-50%, 0%) rotateZ(360deg); + } + } + .monitor-active { + background-color: #22bc76; + .monitor-z-index { + color: #22bc76; + } + } + } + } + .flex-content-right { + flex: 1; + } + } + } + } + } + .big-data-down-right { + .flex-warp-item { + padding: 0 15px 15px 7.5px; + .flex-content { + display: flex; + flex-direction: column; + .task { + display: flex; + height: 45px; + .task-item { + flex: 1; + color: #c0d1f2; + display: flex; + justify-content: center; + .task-item-box { + position: relative; + width: 45px; + height: 45px; + overflow: hidden; + border-radius: 100%; + z-index: 0; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3); + &::before { + content: ''; + position: absolute; + z-index: -2; + left: -50%; + top: -50%; + width: 200%; + height: 200%; + background-repeat: no-repeat; + background-size: 50% 50%, 50% 50%; + background-position: 0 0, 100% 0, 100% 100%, 0 100%; + background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86), + linear-gradient(#ffb980, #ffb980); + animation: rotate 2s linear infinite; + } + &::after { + content: ''; + position: absolute; + z-index: -1; + left: 1px; + top: 1px; + width: calc(100% - 2px); + height: calc(100% - 2px); + border-radius: 100%; + } + .task-item-value { + text-align: center; + font-size: 14px; + font-weight: bold; + } + .task-item-label { + text-align: center; + } + } + .task1 { + &::after { + background: #5492be; + } + } + .task2 { + &::after { + background: #43a177; + } + } + .task3 { + &::after { + background: #a76077; + } + } + .task4 { + &::after { + background: #b4825a; + } + } + .task5 { + &::after { + background: #74568f; + } + } + } + .task-first-item { + flex-direction: column; + text-align: center; + .task-first { + font-size: 20px; + } + } + } + } + } + .progress { + flex: 1; + } + } + } +} diff --git a/src/views/visualizing/demo2.vue b/src/views/visualizing/demo2.vue index 2e973fc..7d28e09 100644 --- a/src/views/visualizing/demo2.vue +++ b/src/views/visualizing/demo2.vue @@ -229,19 +229,22 @@ - + diff --git a/src/views/visualizing/mock/data2-option1.ts b/src/views/visualizing/mock/data2-option1.ts new file mode 100644 index 0000000..c219bdf --- /dev/null +++ b/src/views/visualizing/mock/data2-option1.ts @@ -0,0 +1,26 @@ +export const option1 = { + tooltip: { + trigger: 'item', + }, + series: [ + { + name: '面积模式', + type: 'pie', + radius: [10, 60], + center: ['50%', '50%'], + roseType: 'area', + itemStyle: { + borderRadius: 5, + }, + data: [ + { name: '天气预警', value: 100 }, + { name: '病虫害预警', value: 50 }, + { name: '任务预警', value: 130 }, + { name: '监测设备预警', value: 62 }, + ], + label: { + color: '#c0d1f2', + }, + }, + ], +}; diff --git a/src/views/visualizing/mock/data2-option2.ts b/src/views/visualizing/mock/data2-option2.ts new file mode 100644 index 0000000..e681672 --- /dev/null +++ b/src/views/visualizing/mock/data2-option2.ts @@ -0,0 +1,127 @@ +export const option2 = { + grid: { + top: 10, + right: 0, + bottom: 20, + left: 30, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }, + xAxis: { + data: ['1月', '2月', '3月', '4月', '5月', '6月'], + axisLine: { + lineStyle: { + color: 'rgba(22, 207, 208, 0.5)', + width: 1, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: '#c0d1f2', + }, + }, + yAxis: [ + { + type: 'value', + axisLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.1)', + }, + }, + axisLabel: { + color: '#c0d1f2', + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.3)', + }, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + { + type: 'value', + position: 'right', + axisLine: { + show: false, + }, + axisLabel: { + show: true, + formatter: '{value}%', + textStyle: { + color: '#16cfd0', + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + ], + series: [ + { + name: '销售水量', + type: 'line', + yAxisIndex: 1, + smooth: true, + showAllSymbol: true, + symbol: 'circle', + itemStyle: { + color: '#058cff', + }, + lineStyle: { + color: '#058cff', + }, + areaStyle: { + color: 'rgba(5,140,255, 0.2)', + }, + data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8], + }, + { + name: '主营业务', + type: 'bar', + barWidth: 15, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#00FFE3', + }, + { + offset: 1, + color: '#4693EC', + }, + ]), + }, + }, + data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8], + }, + ], +}; diff --git a/src/views/visualizing/mock/data2-option3.ts b/src/views/visualizing/mock/data2-option3.ts new file mode 100644 index 0000000..eac525d --- /dev/null +++ b/src/views/visualizing/mock/data2-option3.ts @@ -0,0 +1,73 @@ +export const option3 = { + grid: { + top: 10, + right: 0, + bottom: 20, + left: 30, + }, + tooltip: { + trigger: 'axis', + }, + xAxis: { + data: ['1月', '2月', '3月', '4月', '5月', '6月'], + axisLine: { + lineStyle: { + color: 'rgba(22, 207, 208, 0.1)', + width: 1, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: '#c0d1f2', + }, + }, + yAxis: [ + { + type: 'value', + axisLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.1)', + }, + }, + axisLabel: { + color: '#c0d1f2', + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.3)', + }, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + ], + series: [ + { + name: '预购队列', + type: 'line', + data: [200, 85, 112, 275, 305, 415], + itemStyle: { + color: '#16cfd0', + }, + }, + { + name: '最新成交价', + type: 'line', + data: [50, 85, 22, 155, 170, 25], + itemStyle: { + color: '#febb50', + }, + }, + ], +}; diff --git a/src/views/visualizing/mock/data2-option3d.ts b/src/views/visualizing/mock/data2-option3d.ts new file mode 100644 index 0000000..fd351a6 --- /dev/null +++ b/src/views/visualizing/mock/data2-option3d.ts @@ -0,0 +1,44 @@ +import worldImg from '../images/world.jpg'; +import bathymetryImg from '../images/bathymetry.jpg'; + +export interface IPoint { + coords: [number, number][]; + value: string; +} + +export const option3d = { + globe: { + baseTexture: worldImg, + heightTexture: bathymetryImg, + shading: 'realistic', + light: { + ambient: { + intensity: 0.4, + }, + main: { + intensity: 0.4, + }, + }, + viewControl: { + autoRotate: true, + }, + postEffect: { + enable: true, + bloom: { + enable: true, + }, + }, + globeRadius: 0, + }, + series: { + type: 'lines3D', + coordinateSystem: 'globe', + blendMode: 'lighter', + lineStyle: { + width: 1, + color: 'rgb(50, 50, 150)', + opacity: 0.1, + }, + data: [] as IPoint[], + }, +}; diff --git a/src/views/visualizing/mock/data2-option4.ts b/src/views/visualizing/mock/data2-option4.ts new file mode 100644 index 0000000..0e0bea6 --- /dev/null +++ b/src/views/visualizing/mock/data2-option4.ts @@ -0,0 +1,82 @@ +export const option4 = { + grid: { + top: 10, + right: 10, + bottom: 20, + left: 30, + }, + tooltip: { + trigger: 'axis', + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['1月', '2月', '3月', '4月', '5月', '6月'], + axisLine: { + lineStyle: { + color: 'rgba(22, 207, 208, 0.1)', + width: 1, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: '#c0d1f2', + textStyle: { + fontSize: 10, + }, + }, + }, + yAxis: [ + { + type: 'value', + axisLabel: { + color: '#c0d1f2', + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.3)', + }, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + ], + series: [ + { + name: '温度', + type: 'line', + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(128, 255, 165)', + }, + { + offset: 1, + color: 'rgba(1, 191, 236)', + }, + ]), + }, + emphasis: { + focus: 'series', + }, + data: [140, 232, 101, 264, 90, 70], + }, + ], +}; diff --git a/src/views/visualizing/mock/data2-option6.ts b/src/views/visualizing/mock/data2-option6.ts new file mode 100644 index 0000000..b5bb9d9 --- /dev/null +++ b/src/views/visualizing/mock/data2-option6.ts @@ -0,0 +1,81 @@ +export const option6 = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }, + grid: { + top: 20, + right: 50, + bottom: 0, + left: 80, + }, + xAxis: [ + { + splitLine: { + show: false, + }, + type: 'value', + show: false, + }, + ], + yAxis: [ + { + splitLine: { + show: false, + }, + axisLine: { + //y轴 + show: false, + }, + type: 'category', + axisTick: { + show: false, + }, + inverse: true, + data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'], + axisLabel: { + color: '#A7D6F4', + fontSize: 12, + }, + }, + ], + series: [ + { + name: '标准化', + type: 'bar', + barWidth: 10, // 柱子宽度 + label: { + show: true, + position: 'right', // 位置 + color: '#A7D6F4', + fontSize: 12, + distance: 15, // 距离 + formatter: '{c}%', // 这里是数据展示的时候显示的数据 + }, // 柱子上方的数值 + itemStyle: { + barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） + + color: new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 0, + [ + { + offset: 0, + color: '#51C5FD', + }, + { + offset: 1, + color: '#005BB1', + }, + ], + false + ), // 渐变 + }, + data: [75, 100, 60], + }, + ], +}; diff --git a/src/views/visualizing/mock/demo1.ts b/src/views/visualizing/mock/demo1.ts index 60fd944..93a3b74 100644 --- a/src/views/visualizing/mock/demo1.ts +++ b/src/views/visualizing/mock/demo1.ts @@ -1,5 +1,5 @@ // 地图模拟数据 -export const echartsMapList: Array = [ +export const echartsMapList: { name: string, value: string }[] = [ { name: '深圳市人民政府', value: '100' }, { name: '莲花山公园', value: '100' }, { name: '世界之窗', value: '100' }, @@ -8,7 +8,7 @@ export const echartsMapList: Array = [ ]; // 地图经纬度数据 -export const echartsMapData: object = { +export const echartsMapData: Record = { 深圳市人民政府: [114.064524, 22.549225], 莲花山公园: [114.0658, 22.560072], 世界之窗: [113.979419, 22.540579], @@ -17,7 +17,7 @@ export const echartsMapData: object = { }; // 地图图片显示 -export const echartsMapImgs: Array = [ +export const echartsMapImgs: { name: string, url: string, add: string, dec: string }[] = [ { url: 'https://img1.baidu.com/it/u=4244861097,3561366422&fm=11&fmt=auto&gp=0.jpg', name: '深圳市人民政府', -- Gitee From 1d59393c8a3946ddd70500b9fd7faadafe86eeaa Mon Sep 17 00:00:00 2001 From: "liupo.wu" Date: Thu, 28 Jul 2022 09:38:29 +0800 Subject: [PATCH 2/2] fix: echarts --- src/views/visualizing/mock/data2-option2.ts | 252 ++++++++++---------- src/views/visualizing/mock/data2-option4.ts | 162 ++++++------- src/views/visualizing/mock/data2-option6.ts | 158 ++++++------ 3 files changed, 289 insertions(+), 283 deletions(-) diff --git a/src/views/visualizing/mock/data2-option2.ts b/src/views/visualizing/mock/data2-option2.ts index e681672..4d1a0ee 100644 --- a/src/views/visualizing/mock/data2-option2.ts +++ b/src/views/visualizing/mock/data2-option2.ts @@ -1,127 +1,129 @@ +import * as echarts from 'echarts'; + export const option2 = { - grid: { - top: 10, - right: 0, - bottom: 20, - left: 30, - }, - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, - xAxis: { - data: ['1月', '2月', '3月', '4月', '5月', '6月'], - axisLine: { - lineStyle: { - color: 'rgba(22, 207, 208, 0.5)', - width: 1, - }, - }, - axisTick: { - show: false, - }, - axisLabel: { - color: '#c0d1f2', - }, - }, - yAxis: [ - { - type: 'value', - axisLine: { - show: true, - lineStyle: { - color: 'rgba(22, 207, 208, 0.1)', - }, - }, - axisLabel: { - color: '#c0d1f2', - }, - splitLine: { - show: true, - lineStyle: { - color: 'rgba(22, 207, 208, 0.3)', - }, - }, - splitArea: { - show: true, - areaStyle: { - color: 'rgba(22, 207, 208, 0.02)', - }, - }, - nameTextStyle: { - color: '#16cfd0', - }, - }, - { - type: 'value', - position: 'right', - axisLine: { - show: false, - }, - axisLabel: { - show: true, - formatter: '{value}%', - textStyle: { - color: '#16cfd0', - }, - }, - splitLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitArea: { - show: true, - areaStyle: { - color: 'rgba(22, 207, 208, 0.02)', - }, - }, - nameTextStyle: { - color: '#16cfd0', - }, - }, - ], - series: [ - { - name: '销售水量', - type: 'line', - yAxisIndex: 1, - smooth: true, - showAllSymbol: true, - symbol: 'circle', - itemStyle: { - color: '#058cff', - }, - lineStyle: { - color: '#058cff', - }, - areaStyle: { - color: 'rgba(5,140,255, 0.2)', - }, - data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8], - }, - { - name: '主营业务', - type: 'bar', - barWidth: 15, - itemStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: '#00FFE3', - }, - { - offset: 1, - color: '#4693EC', - }, - ]), - }, - }, - data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8], - }, - ], + grid: { + top: 10, + right: 0, + bottom: 20, + left: 30, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }, + xAxis: { + data: ['1月', '2月', '3月', '4月', '5月', '6月'], + axisLine: { + lineStyle: { + color: 'rgba(22, 207, 208, 0.5)', + width: 1, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: '#c0d1f2', + }, + }, + yAxis: [ + { + type: 'value', + axisLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.1)', + }, + }, + axisLabel: { + color: '#c0d1f2', + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.3)', + }, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + { + type: 'value', + position: 'right', + axisLine: { + show: false, + }, + axisLabel: { + show: true, + formatter: '{value}%', + textStyle: { + color: '#16cfd0', + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + ], + series: [ + { + name: '销售水量', + type: 'line', + yAxisIndex: 1, + smooth: true, + showAllSymbol: true, + symbol: 'circle', + itemStyle: { + color: '#058cff', + }, + lineStyle: { + color: '#058cff', + }, + areaStyle: { + color: 'rgba(5,140,255, 0.2)', + }, + data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8], + }, + { + name: '主营业务', + type: 'bar', + barWidth: 15, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: '#00FFE3', + }, + { + offset: 1, + color: '#4693EC', + }, + ]), + }, + }, + data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8], + }, + ], }; diff --git a/src/views/visualizing/mock/data2-option4.ts b/src/views/visualizing/mock/data2-option4.ts index 0e0bea6..231f838 100644 --- a/src/views/visualizing/mock/data2-option4.ts +++ b/src/views/visualizing/mock/data2-option4.ts @@ -1,82 +1,84 @@ +import * as echarts from 'echarts'; + export const option4 = { - grid: { - top: 10, - right: 10, - bottom: 20, - left: 30, - }, - tooltip: { - trigger: 'axis', - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: ['1月', '2月', '3月', '4月', '5月', '6月'], - axisLine: { - lineStyle: { - color: 'rgba(22, 207, 208, 0.1)', - width: 1, - }, - }, - axisTick: { - show: false, - }, - axisLabel: { - interval: 0, - color: '#c0d1f2', - textStyle: { - fontSize: 10, - }, - }, - }, - yAxis: [ - { - type: 'value', - axisLabel: { - color: '#c0d1f2', - }, - splitLine: { - show: true, - lineStyle: { - color: 'rgba(22, 207, 208, 0.3)', - }, - }, - splitArea: { - show: true, - areaStyle: { - color: 'rgba(22, 207, 208, 0.02)', - }, - }, - nameTextStyle: { - color: '#16cfd0', - }, - }, - ], - series: [ - { - name: '温度', - type: 'line', - smooth: true, - lineStyle: { - width: 0, - }, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { - offset: 0, - color: 'rgba(128, 255, 165)', - }, - { - offset: 1, - color: 'rgba(1, 191, 236)', - }, - ]), - }, - emphasis: { - focus: 'series', - }, - data: [140, 232, 101, 264, 90, 70], - }, - ], + grid: { + top: 10, + right: 10, + bottom: 20, + left: 30, + }, + tooltip: { + trigger: 'axis', + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: ['1月', '2月', '3月', '4月', '5月', '6月'], + axisLine: { + lineStyle: { + color: 'rgba(22, 207, 208, 0.1)', + width: 1, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: '#c0d1f2', + textStyle: { + fontSize: 10, + }, + }, + }, + yAxis: [ + { + type: 'value', + axisLabel: { + color: '#c0d1f2', + }, + splitLine: { + show: true, + lineStyle: { + color: 'rgba(22, 207, 208, 0.3)', + }, + }, + splitArea: { + show: true, + areaStyle: { + color: 'rgba(22, 207, 208, 0.02)', + }, + }, + nameTextStyle: { + color: '#16cfd0', + }, + }, + ], + series: [ + { + name: '温度', + type: 'line', + smooth: true, + lineStyle: { + width: 0, + }, + areaStyle: { + opacity: 0.8, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: 'rgba(128, 255, 165)', + }, + { + offset: 1, + color: 'rgba(1, 191, 236)', + }, + ]), + }, + emphasis: { + focus: 'series', + }, + data: [140, 232, 101, 264, 90, 70], + }, + ], }; diff --git a/src/views/visualizing/mock/data2-option6.ts b/src/views/visualizing/mock/data2-option6.ts index b5bb9d9..6b6ccb7 100644 --- a/src/views/visualizing/mock/data2-option6.ts +++ b/src/views/visualizing/mock/data2-option6.ts @@ -1,81 +1,83 @@ +import * as echarts from 'echarts'; + export const option6 = { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'shadow', - }, - }, - grid: { - top: 20, - right: 50, - bottom: 0, - left: 80, - }, - xAxis: [ - { - splitLine: { - show: false, - }, - type: 'value', - show: false, - }, - ], - yAxis: [ - { - splitLine: { - show: false, - }, - axisLine: { - //y轴 - show: false, - }, - type: 'category', - axisTick: { - show: false, - }, - inverse: true, - data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'], - axisLabel: { - color: '#A7D6F4', - fontSize: 12, - }, - }, - ], - series: [ - { - name: '标准化', - type: 'bar', - barWidth: 10, // 柱子宽度 - label: { - show: true, - position: 'right', // 位置 - color: '#A7D6F4', - fontSize: 12, - distance: 15, // 距离 - formatter: '{c}%', // 这里是数据展示的时候显示的数据 - }, // 柱子上方的数值 - itemStyle: { - barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + }, + grid: { + top: 20, + right: 50, + bottom: 0, + left: 80, + }, + xAxis: [ + { + splitLine: { + show: false, + }, + type: 'value', + show: false, + }, + ], + yAxis: [ + { + splitLine: { + show: false, + }, + axisLine: { + //y轴 + show: false, + }, + type: 'category', + axisTick: { + show: false, + }, + inverse: true, + data: ['施肥任务完成率', '施药任务完成率', '农事任务完成率'], + axisLabel: { + color: '#A7D6F4', + fontSize: 12, + }, + }, + ], + series: [ + { + name: '标准化', + type: 'bar', + barWidth: 10, // 柱子宽度 + label: { + show: true, + position: 'right', // 位置 + color: '#A7D6F4', + fontSize: 12, + distance: 15, // 距离 + formatter: '{c}%', // 这里是数据展示的时候显示的数据 + }, // 柱子上方的数值 + itemStyle: { + barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下） - color: new echarts.graphic.LinearGradient( - 1, - 0, - 0, - 0, - [ - { - offset: 0, - color: '#51C5FD', - }, - { - offset: 1, - color: '#005BB1', - }, - ], - false - ), // 渐变 - }, - data: [75, 100, 60], - }, - ], + color: new echarts.graphic.LinearGradient( + 1, + 0, + 0, + 0, + [ + { + offset: 0, + color: '#51C5FD', + }, + { + offset: 1, + color: '#005BB1', + }, + ], + false + ), // 渐变 + }, + data: [75, 100, 60], + }, + ], }; -- Gitee