diff --git a/package.json b/package.json index daf6876f9756bebc41a182d26e39b8dfcfe2a517..0287711fa2df62c7e1001c269ebae25506850966 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 Binary files /dev/null and b/public/img/ring.png differ diff --git a/shim.d.ts b/shim.d.ts index 3e9bfd0f2e6b108a7a460e4081ce9f74ca907b4e..0b94e3f2f8d1f29f2fb75a35317b78499340f3f1 100644 --- a/shim.d.ts +++ b/shim.d.ts @@ -10,4 +10,5 @@ declare module '*.vue' { // 声明文件，定义全局变量。其它 app.config.globalProperties.xxx，使用 getCurrentInstance() 来获取 interface Window { nextLoading: boolean; + BMap: any; } diff --git a/src/App.vue b/src/App.vue index c06763cf696e14c1060ccb038f9a56dfdec5c4dc..bbbed6fdc9d984eef9a42ba2133f74b9577e0afc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@ diff --git a/src/components/crud/index.vue b/src/components/crud/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..d9da8aebb2c4cf9b186c4972fa4695e3a6844010 --- /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 0000000000000000000000000000000000000000..259a4b8d489941cda98c7c89234df0d64a35b70d --- /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 0000000000000000000000000000000000000000..c163e9d2abfc87525a4795761fe01a68adff507e --- /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 3d2b543cde18242ded779e859fd9d70fe2b27c12..2144992f5df7955775be389dd02ff2f2165153de 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 609dee94cc9c347ecad94ee60c8df8b9927229b2..1c65c363cafde18faf895c39aa1218bbf0cada91 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 b7e5263a2cb74163afabaffb7d17a1f150a00b02..2c3584b45f9f3578b77911634af520c7724b5226 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 0000000000000000000000000000000000000000..6a51d45f0a874449c1cca8f7bccda3ae7d67b947 --- /dev/null +++ b/src/layout/navBars/breadcrumb/settings.scss @@ -0,0 +1,137 @@ +.layout-breadcrumb-seting-bar { + height: calc(100vh - 50px); + padding: 0 15px; + :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 5cc49cd697f432aca35c685c890a39c2d137420b..0dc9e4df55daafd64594ffc77f1d658aad216e76 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'; @@ -191,7 +191,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 83f272d171d2790c03310d79eb475c8b96e24418..dd4b22c640926077c9493547e55dce223a4d4a79 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 acd3d24b82d42a503a17ee2ca218f6563279a73b..95c43718fe6b369ece53c42e2e01902300b3e756 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 c2c0add1b4296520b808bcbfa39774bb51c4d449..f0f5d93d5792cd603fd21e8100a41aae0fba0fca 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 0000000000000000000000000000000000000000..a9db6222cd57db6caf58f95cad2a196c9f44e4b6 --- /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: `${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', + }, + }, + ], + }, +]; diff --git a/src/router/frontEnd.ts b/src/router/frontEnd.ts index 67fc3fab4a5dc7072f211af0cbf7eb3ea866824b..ec3588b4d2910d57173913118930c6bc5d514894 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'; // 前端控制路由 @@ -64,7 +64,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 da607b1d4926fe6c26839e3573807f5841b3cc3b..9b5f138f6babeab866cb2ea92fdbf35a799a5b81 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 0000000000000000000000000000000000000000..d1652317d93481d94c5213e10ceb23c5bdeb8d24 --- /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 63d211d18d51872bde5d663b7853addc4cfeb449..e58c9cf6b2b779c83c595805f4981cc9fbd246f6 100644 --- a/src/router/route.ts +++ b/src/router/route.ts @@ -1,5 +1,3 @@ -import { RouteRecordRaw } from 'vue-router'; - /** * 路由meta对象参数说明 * meta: { @@ -14,1182 +12,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: '/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 0000000000000000000000000000000000000000..cd392181cf2ddf17d0c106976644d763c5200f0a --- /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 4c75296b8c5a4945cdcaeba96ca528f53afb8dec..7041432e367c219b3683f46e71e45e018fcad635 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 0000000000000000000000000000000000000000..5ed5e397391bbc8ecd72baab34b7ca7c893e9a0f --- /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 6bb4fbde8394f892db616499789bc1b7554eebde..c8ac987b230c76a4eb4609ec613878cc0b1a9a2e 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 c1cb0907a7b80b0c600d551bd66f293344db5cb0..421674d1529a3b18609b543e01b2e682bb4ddedb 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 a983f80039fe6d293b3ef23d8ed2c26c8a11b9ba..837e086fe6e402e1a318f049952fdc87a34b3303 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 b897ed1956f0f62860d4c457d4edb6b16ecaecd9..1c96e34752996b3f3ecfdc6bc5010bcd4748bdf4 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 db3255e7ad4af58107a7b3f6c2b9f2eca5c878ff..6ae517f73ec18862d0ebecb06e037a1898f2e3f6 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 87ea99ab29c696e7bc7e39aa12a317d277cc44c4..ebd229e717bda1d92e1f7f1d6d3e5d7c8abe3af1 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 16623c7d71c2108c05b03b6dca1df35d11b10593..fbef3aeb0cd935cdbb768dfb0045e68fdfba6379 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 6475fba53b1d59ec92ba04ade32e24104040f54c..bc3c09ca435b8a330344c920cbe7327a2e2fe2eb 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 277a7fe648f8437eab16a611e78c1d01dded5820..c872c243109418de0cfcdfdcbfaa3f14f410cf6f 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 2eb3ed36c04decd0873491f7518a8c343ecf2f81..4786173b59c307af865e5cb6df8d72181789e590 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 36fd3207afebf0fd3d9b17bf2d427198a4c6c50c..0119af9fc4f741099e2abaec228fd477e9c6cda4 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 0000000000000000000000000000000000000000..dc8e2b1ee8b4ecde4ccd9012d79c7788c0da836d --- /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; + } + :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 71dbd99549f65349769934f37082dc93ed4b5137..7d28e096a51bbf29c100626f88f838d8bc8e8374 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 0000000000000000000000000000000000000000..c219bdf00f87ead6e84e0b4c3c268d3598652e0f --- /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 0000000000000000000000000000000000000000..4d1a0ee7d6af6d863a0798af8f6534472bfc893f --- /dev/null +++ b/src/views/visualizing/mock/data2-option2.ts @@ -0,0 +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], + }, + ], +}; diff --git a/src/views/visualizing/mock/data2-option3.ts b/src/views/visualizing/mock/data2-option3.ts new file mode 100644 index 0000000000000000000000000000000000000000..eac525d5a6a747a59fef0294f5c903a901600506 --- /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 0000000000000000000000000000000000000000..fd351a6f84d311f454d09d23e2c660a68f9ddde6 --- /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 0000000000000000000000000000000000000000..231f838722c794c3ff25b38ff5ec4f1eecee84dd --- /dev/null +++ b/src/views/visualizing/mock/data2-option4.ts @@ -0,0 +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], + }, + ], +}; diff --git a/src/views/visualizing/mock/data2-option6.ts b/src/views/visualizing/mock/data2-option6.ts new file mode 100644 index 0000000000000000000000000000000000000000..6b6ccb7a925b2b75b13b3cdb25d183e1b2686d88 --- /dev/null +++ b/src/views/visualizing/mock/data2-option6.ts @@ -0,0 +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], // 圆角（左上、右上、右下、左下） + + 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 60fd944cfca68579b810c6b928c7694c15bfb274..93a3b74b13c931975fdd5d5ace82378ea08cdea3 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: '深圳市人民政府',