更新代码

package-lock.json

@@ -597,6 +597,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "npm:@sxzz/popperjs-es@2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+    },
     "@types/d3-timer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-2.0.1.tgz",
@@ -894,7 +899,7 @@
     },
     "adler-32": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.2.0.tgz",
       "integrity": "sha512-/vUqU/UY4MVeFsg+SsK6c+/05RZXIHZMGJA+PX5JyWI0ZRcBpupnRuPLU/NXXoFwMYCPCoxIfElM2eS+DUXCqQ==",
       "requires": {
         "exit-on-epipe": "~1.0.1",
@@ -1082,7 +1087,7 @@
     },
     "cfb": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
       "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
       "requires": {
         "adler-32": "~1.3.0",
@@ -1091,7 +1096,7 @@
       "dependencies": {
         "adler-32": {
           "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+          "resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
           "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
         }
       }
@@ -1154,7 +1159,7 @@
     },
     "codepage": {
       "version": "1.14.0",
-      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.14.0.tgz",
       "integrity": "sha512-iz3zJLhlrg37/gYRWgEPkaFTtzmnEv1h+r7NgZum2lFElYQPi0/5bnmuDfODHxfp0INEfnRqyfyeIJDbb7ahRw==",
       "requires": {
         "commander": "~2.14.1",
@@ -1163,7 +1168,7 @@
       "dependencies": {
         "commander": {
           "version": "2.14.1",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-2.14.1.tgz",
           "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
         }
       }
@@ -1185,7 +1190,7 @@
     },
     "commander": {
       "version": "2.17.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.17.1.tgz",
       "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
     },
     "concat-map": {
@@ -1215,7 +1220,7 @@
     },
     "crc-32": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "resolved": "https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz",
       "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
     },
     "cropperjs": {
@@ -1374,7 +1379,7 @@
     },
     "downloadjs": {
       "version": "1.4.7",
-      "resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
+      "resolved": "https://registry.npmmirror.com/downloadjs/-/downloadjs-1.4.7.tgz",
       "integrity": "sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q=="
     },
     "echarts": {
@@ -1427,13 +1432,6 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
-      },
-      "dependencies": {
-        "@popperjs/core": {
-          "version": "npm:@sxzz/popperjs-es@2.11.7",
-          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-        }
       }
     },
     "element-resize-detector": {
@@ -1855,7 +1853,7 @@
     },
     "exit-on-epipe": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "resolved": "https://registry.npmmirror.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
       "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
     },
     "fast-deep-equal": {
@@ -1905,7 +1903,7 @@
     },
     "fflate": {
       "version": "0.3.11",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.3.11.tgz",
+      "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.3.11.tgz",
       "integrity": "sha512-Rr5QlUeGN1mbOHlaqcSYMKVpPbgLy0AWT/W0EHxA6NGI12yO1jpoui2zBBvU2G824ltM6Ut8BFgfHSBGfkmS0A=="
     },
     "file-entry-cache": {
@@ -2031,7 +2029,7 @@
     },
     "frac": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
       "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
     },
     "fs.realpath": {
@@ -2779,7 +2777,7 @@
     },
     "printj": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "resolved": "https://registry.npmmirror.com/printj/-/printj-1.1.2.tgz",
       "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
     },
     "punycode": {
@@ -3040,7 +3038,7 @@
     },
     "ssf": {
       "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
       "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
       "requires": {
         "frac": "~1.1.2"
@@ -3514,12 +3512,12 @@
     },
     "wmf": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
       "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
     },
     "word": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
       "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
     },
     "word-wrap": {
@@ -3540,7 +3538,7 @@
     },
     "xlsx-with-styles": {
       "version": "0.17.2",
-      "resolved": "https://registry.npmjs.org/xlsx-with-styles/-/xlsx-with-styles-0.17.2.tgz",
+      "resolved": "https://registry.npmmirror.com/xlsx-with-styles/-/xlsx-with-styles-0.17.2.tgz",
       "integrity": "sha512-7lrfG6DmIuZI1yjebQFIQzKrR/ZBXEYiQVAuEl/wqB45X8Izr0epynfOMi/Oo5Z8TSM5VoO2bCtOGy4wRnii3A==",
       "requires": {
         "adler-32": "~1.2.0",
@@ -3594,4 +3592,4 @@
       }
     }
   }
-}
+}

package.json

@@ -29,7 +29,7 @@
     "echarts": "^5.3.3",
     "echarts-gl": "^2.0.9",
     "echarts-wordcloud": "^2.0.0",
-    "element-plus": "^2.2.13",
+    "element-plus": "^2.2.28",
     "event-source-polyfill": "^1.0.31",
     "jsplumb": "^2.15.6",
     "mitt": "^3.0.0",

src/api/alarm/index.ts

@@ -5,6 +5,7 @@ export default {
     levelall: (id: number) => get('/alarm/level/all', { id }),
     trigger_type: (productKey: number) => get('/alarm/rule/trigger_type', { productKey }),
     trigger_param: (productKey: number) => get('/alarm/rule/trigger_param', { productKey }),
+    trigger_params: (params: object) => get('/alarm/rule/trigger_param', params),
     operator: (productKey: number) => get('/alarm/rule/operator', { productKey }),
     getList: (params: object) => get('/alarm/rule/list', params),
     add: (data: object) => post('/alarm/rule/add', data),

src/api/datahub/index.ts

@@ -75,7 +75,7 @@ export default {
       getStatisticsOverview: (params: object) => get('/statistics/overview', params),
    },
    iotManage:{
-      getOverviewData: () => get('/statistics/thing/overview'),
+      getOverviewData: () => get('/thing/overview'),
       getAlarmList: (params: object) => get('/alarm/log/list', params),
       getAlarmDetail: (id: number) => get('/alarm/log/detail', { id }),
       getAlarmHandle: (data: object) => post('/alarm/log/handle', data),

src/api/energyAnalysis/index.ts

@@ -14,4 +14,5 @@ export default {
   getEnergyTop: (params?: object) => get('/energy/top', params), // 能耗排行榜
   loopdataExport: (params: object) => file('/energy/loopdata/export', params), // 导出：环路分析
   lossWaterExport: (params: object) => file('/energy/water/loss/export', params), // 导出：环路分析
+  performanceExport: (params: object) => file('/energy/performanceExport', params), // 导出：绩效考核数据导出
 }

src/api/model/system/menu.ts

@@ -23,6 +23,7 @@ export interface ApiRow {
   parentId?: number; // parentId
   menuIds: number[]; // 名称
   types: 1 | 2; // 1 分类 2接口
+  method: string; // 请求方式
   name: string; // 名称
   address: string; // 接口地址
   remark: string; // 备注

src/api/notice/index.ts

@@ -18,4 +18,8 @@ export default {
     detail: (id: number) => get("/notice/template/get", { id }),
     configIddetail: (configId: number) => get("/notice/template/getbyconfig", { configId }),
   },
+  log:{
+    getList: (params: object) => get("/notice/log/search", params),
+    delete: (ids: number) => del("/notice/log/del", { ids }),
+  }
 };

src/layout/main/defaults.vue

@@ -33,7 +33,7 @@ export default defineComponent({
 		watch(
 			() => route.path,
 			() => {
-				proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0;
+				proxy.$refs.layoutDefaultsScrollbarRef.wrap$ && (proxy.$refs.layoutDefaultsScrollbarRef.wrap$.scrollTop = 0)
 			}
 		);
 		return {

src/layout/navBars/breadcrumb/user.vue

@@ -159,11 +159,11 @@ export default defineComponent({
           },
         })
           .then(async () => {
-            Session.clear(); // 清除缓存/token等
+            api.login.logout();
             await resetRoute(); // 删除/重置路由
             ElMessage.success(t('message.user.logOutSuccess'));
-            api.login.logout();
             setTimeout(() => {
+              Session.clear(); // 清除缓存/token等
               window.location.href = ''; // 去登录页
             }, 500);
           })

src/layout/navBars/tagsView/tagsView.vue

@@ -390,6 +390,9 @@ export default defineComponent({
 				let liLast: any = tagsRefs.value[tagsRefs.value.length - 1];
 				// 当前滚动条的值
 				let scrollRefs = proxy.$refs.scrollbarRef.$refs.wrap$;
+
+				if (!scrollRefs) return
+				
 				// 当前滚动条滚动宽度
 				let scrollS = scrollRefs.scrollWidth;
 				// 当前滚动条偏移宽度

src/router/backEnd.ts

@@ -2,7 +2,7 @@ import { store } from '/@/store/index.ts';
 import { Session } from '/@/utils/storage';
 import { NextLoading } from '/@/utils/loading';
 import { setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '/@/router/index';
-import { demoRoutes, dynamicRoutes } from '/@/router/route';
+import { dynamicRoutes } from '/@/router/route';
 import api from '/@/api/system';
 
 
@@ -43,7 +43,7 @@ export async function initBackEndControlRoutes() {
 	// 存储接口原始路由（未处理component），根据需求选择使用
 	store.dispatch('requestOldRoutes/setBackEndControlRoutes', JSON.parse(JSON.stringify(menuRoute)));
 	// 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
-	dynamicRoutes[0].children?.push(...await backEndComponent(menuRoute), ...demoRoutes);
+	dynamicRoutes[0].children?.push(...await backEndComponent(menuRoute));
 	// 添加动态路由
 	await setAddRoute();
 	// 设置递归过滤有权限的路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
@@ -92,7 +92,9 @@ export function backEndComponent(routes: any) {
 			isLink: item.isLink,
 			linkUrl: item.linkUrl,
 			title: item.title,
-			buttons: (item.button || []).map((item: any) => item.types),
+			// buttons 可能是树形结构，把这个结构展平
+			// buttons: (item.button || []).map((item: any) => item.types),
+			buttons: treeToArr(item.button).map((item: any) => item.types),
 			columns: (item.column || []).map((item: any) => item.code),
 		}
 		return item;
@@ -119,3 +121,17 @@ export function dynamicImport(dynamicViewsModules: Record<string, Function>, com
 		return false;
 	}
 }
+
+
+// buttons 可能是树形结构，把这个结构展平
+function treeToArr(tree: any) {
+	if (!tree) return []
+	let arr: any = [];
+	tree.forEach((item: any) => {
+		arr.push(item);
+		if (item.children) {
+			arr = arr.concat(treeToArr(item.children));
+		}
+	});
+	return arr;
+}

src/router/route.ts

@@ -90,899 +90,6 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 	},
 ];
 
-export const demoRoutes: Array<RouteRecordRaw> = [
-	{
-		path: '/demo',
-		name: 'demo',
-		component: () => import('/@/layout/routerView/parent.vue'),
-		redirect: '/demo/system/menu',
-		meta: {
-			title: '案例演示',
-			isLink: '',
-			isHide: true,
-			isKeepAlive: true,
-			isAffix: false,
-			isIframe: false,
-			roles: ['admin'],
-			icon: 'iconfont icon-diannao',
-		},
-		children: [
-			{
-				path: '/demo/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: '/demo/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: '/demo/menu/menu1/menu11',
-								name: 'menu11',
-								component: () => import('/@/views/demo/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: '/demo/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: '/demo/menu/menu1/menu12/menu121',
-										name: 'menu121',
-										component: () => import('/@/views/demo/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: '/demo/menu/menu1/menu12/menu122',
-										name: 'menu122',
-										component: () => import('/@/views/demo/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: '/demo/menu/menu1/menu13',
-								name: 'menu13',
-								component: () => import('/@/views/demo/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: '/demo/menu/menu2',
-						name: 'menu2',
-						component: () => import('/@/views/demo/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: '/demo/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: '/demo/fun/tagsView',
-						name: 'funTagsView',
-						component: () => import('/@/views/demo/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: '/demo/fun/countup',
-						name: 'funCountup',
-						component: () => import('/@/views/demo/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: '/demo/fun/wangEditor',
-						name: 'funWangEditor',
-						component: () => import('/@/views/demo/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: '/demo/fun/cropper',
-						name: 'funCropper',
-						component: () => import('/@/views/demo/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: '/demo/fun/qrcode',
-						name: 'funQrcode',
-						component: () => import('/@/views/demo/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: '/demo/fun/echartsMap',
-						name: 'funEchartsMap',
-						component: () => import('/@/views/demo/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: '/demo/fun/printJs',
-						name: 'funPrintJs',
-						component: () => import('/@/views/demo/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: '/demo/fun/clipboard',
-						name: 'funClipboard',
-						component: () => import('/@/views/demo/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: '/demo/fun/gridLayout',
-						name: 'funGridLayout',
-						component: () => import('/@/views/demo/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: '/demo/fun/splitpanes',
-						name: 'funSplitpanes',
-						component: () => import('/@/views/demo/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: '/demo/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: '/demo/pages/filtering',
-						name: 'pagesFiltering',
-						component: () => import('/@/views/demo/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: '/demo/pages/filtering/details',
-								name: 'pagesFilteringDetails',
-								component: () => import('/@/views/demo/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: '/demo/pages/filtering/details1',
-						name: 'pagesFilteringDetails1',
-						component: () => import('/@/views/demo/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: '/demo/pages/iocnfont',
-						name: 'pagesIocnfont',
-						component: () => import('/@/views/demo/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: '/demo/pages/element',
-						name: 'pagesElement',
-						component: () => import('/@/views/demo/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: '/demo/pages/awesome',
-						name: 'pagesAwesome',
-						component: () => import('/@/views/demo/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: '/demo/pages/formAdapt',
-						name: 'pagesFormAdapt',
-						component: () => import('/@/views/demo/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: '/demo/pages/tableRules',
-						name: 'pagesTableRules',
-						component: () => import('/@/views/demo/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: '/demo/pages/formI18n',
-						name: 'pagesFormI18n',
-						component: () => import('/@/views/demo/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: '/demo/pages/formRules',
-						name: 'pagesFormRules',
-						component: () => import('/@/views/demo/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: '/demo/pages/listAdapt',
-						name: 'pagesListAdapt',
-						component: () => import('/@/views/demo/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: '/demo/pages/waterfall',
-						name: 'pagesWaterfall',
-						component: () => import('/@/views/demo/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: '/demo/pages/steps',
-						name: 'pagesSteps',
-						component: () => import('/@/views/demo/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: '/demo/pages/preview',
-						name: 'pagesPreview',
-						component: () => import('/@/views/demo/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: '/demo/pages/waves',
-						name: 'pagesWaves',
-						component: () => import('/@/views/demo/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: '/demo/pages/tree',
-						name: 'pagesTree',
-						component: () => import('/@/views/demo/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: '/demo/pages/drag',
-						name: 'pagesDrag',
-						component: () => import('/@/views/demo/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: '/demo/pages/lazyImg',
-						name: 'pagesLazyImg',
-						component: () => import('/@/views/demo/pages/lazyImg/index.vue'),
-						meta: {
-							title: 'message.router.pagesLazyImg',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'ele-PictureFilled',
-						},
-					},
-					{
-						path: '/demo/pages/dynamicForm',
-						name: 'pagesDynamicForm',
-						component: () => import('/@/views/demo/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: '/demo/pages/workflow',
-						name: 'pagesWorkflow',
-						component: () => import('/@/views/demo/pages/workflow/index.vue'),
-						meta: {
-							title: 'message.router.pagesWorkflow',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'ele-Connection',
-						},
-					},
-				],
-			},
-			{
-				path: '/demo/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: '/demo/make/selector',
-						name: 'makeSelector',
-						component: () => import('/@/views/demo/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: '/demo/make/noticeBar',
-						name: 'makeNoticeBar',
-						component: () => import('/@/views/demo/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: '/demo/make/svgDemo',
-						name: 'makeSvgDemo',
-						component: () => import('/@/views/demo/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: '/demo/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: '/demo/params/common',
-						name: 'paramsCommon',
-						component: () => import('/@/views/demo/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: '/demo/params/common/details',
-						name: 'paramsCommonDetails',
-						component: () => import('/@/views/demo/params/common/details.vue'),
-						meta: {
-							title: 'message.router.paramsCommonDetails',
-							isLink: '',
-							isHide: true,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'ele-Comment',
-						},
-					},
-					{
-						path: '/demo/params/dynamic',
-						name: 'paramsDynamic',
-						component: () => import('/@/views/demo/params/dynamic/index.vue'),
-						meta: {
-							title: 'message.router.paramsDynamic',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'iconfont icon-dongtai',
-						},
-					},
-					{
-						path: '/demo/params/dynamic/details/:t/:id',
-						name: 'paramsDynamicDetails',
-						component: () => import('/@/views/demo/params/dynamic/details.vue'),
-						meta: {
-							title: 'message.router.paramsDynamicDetails',
-							isLink: '',
-							isHide: true,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'ele-Lightning',
-						},
-					},
-				],
-			},
-			{
-				path: '/demo/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: '/demo/visualizing/visualizingLinkDemo1',
-						name: 'visualizingLinkDemo1',
-						component: () => import('/@/layout/routerView/link.vue'),
-						meta: {
-							title: 'message.router.visualizingLinkDemo1',
-							isLink: `./#/visualizingDemo1`,
-							isHide: false,
-							isKeepAlive: false,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'iconfont icon-caozuo-wailian',
-						},
-					},
-					{
-						path: '/demo/visualizing/visualizingLinkDemo2',
-						name: 'visualizingLinkDemo2',
-						component: () => import('/@/layout/routerView/link.vue'),
-						meta: {
-							title: 'message.router.visualizingLinkDemo2',
-							isLink: `./#/visualizingDemo2`,
-							isHide: false,
-							isKeepAlive: false,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin'],
-							icon: 'iconfont icon-caozuo-wailian',
-						},
-					},
-				],
-			},
-			{
-				path: '/demo/chart',
-				name: 'chartIndex',
-				component: () => import('/@/views/demo/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: '/demo/tools',
-				name: 'tools',
-				component: () => import('/@/views/demo/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: '/demo/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: '/demo/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: false,
-					isIframe: true,
-					roles: ['admin'],
-					icon: 'iconfont icon-neiqianshujuchucun',
-				},
-			},
-		],
-	},
-]
-
 /**
  * 定义静态路由
  * @description 前端控制直接改 dynamicRoutes 中的路由，后端控制不需要修改，请求接口路由数据时，会覆盖 dynamicRoutes 第一个顶级 children 的内容（全屏，不包含 layout 中的路由出口）
@@ -996,33 +103,9 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 		meta: {
 			title: '登录',
 		},
-	},
+	}
 	/**
 	 * 提示：写在这里的为全屏界面，不建议写在这里
 	 * 请写在 `dynamicRoutes` 路由数组中
 	 */
-	{
-		path: '/visualizingDemo1',
-		name: 'visualizingDemo1',
-		component: () => import('/@/views/demo/visualizing/demo1.vue'),
-		meta: {
-			title: 'message.router.visualizingLinkDemo1',
-		},
-	},
-	{
-		path: '/visualizingDemo2',
-		name: 'visualizingDemo2',
-		component: () => import('/@/views/demo/visualizing/demo2.vue'),
-		meta: {
-			title: 'message.router.visualizingLinkDemo2',
-		},
-	},
-	{
-		path: '/dbInit',
-		name: 'dbInit',
-		component: () => import('/@/views/dbInit/index.vue'),
-		meta: {
-			title: '系统初始化',
-		},
-	},
 ];

src/theme/index.scss

@@ -9,3 +9,8 @@
 @import './fast.scss';
 
 
+// 自定义指令 v-auth 增加 v-disabled 的类
+.v-disabled{
+  pointer-events: none;
+  opacity: 0.7;
+}

src/utils/authDirective.ts

@@ -15,7 +15,10 @@ export function authDirective(app: App) {
 		mounted(el, binding) {
 			const buttons = <string[]>router.currentRoute.value.meta.buttons
 			if (buttons.includes(allPermissions)) return
-			if (!buttons.includes(binding.value)) el.parentNode.removeChild(el)
+			// 不显示该dom
+			// if (!buttons.includes(binding.value)) el.parentNode.removeChild(el)
+			// 设置为disabled
+			if (!buttons.includes(binding.value)) el.classList.add('v-disabled')
 		},
 	});
 	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
@@ -29,7 +32,8 @@ export function authDirective(app: App) {
 					if (val === v) flag = true;
 				});
 			});
-			if (!flag) el.parentNode.removeChild(el);
+			// if (!flag) el.parentNode.removeChild(el);
+			if (!flag) el.classList.add('v-disabled')
 		},
 	});
 	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
@@ -37,7 +41,8 @@ export function authDirective(app: App) {
 		mounted(el, binding) {
 			const buttons = <string[]>router.currentRoute.value.meta.buttons
 			if (buttons.includes(allPermissions)) return
-			!smallInBig(buttons, binding.value) && el.parentNode.removeChild(el)
+			// !smallInBig(buttons, binding.value) && el.parentNode.removeChild(el)
+			!smallInBig(buttons, binding.value) && el.classList.add('v-disabled')
 		},
 	});
 }

src/views/dbInit/component/checkEnv.vue

@@ -1,97 +0,0 @@
-<template>
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
-        <span>安装向导</span>
-      </div>
-    </template>
-    <Step :number="1"></Step>
-
-    <div class="content">
-      <el-row :gutter="20">
-        <el-col :span="6"><strong>环境检测</strong></el-col>
-        <el-col :span="6"><strong>推荐配置</strong></el-col>
-        <el-col :span="6"><strong>当前状态</strong></el-col>
-        <el-col :span="6"><strong>最低要求</strong></el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">操作系统</el-col>
-        <el-col :span="6">类UNIX</el-col>
-        <el-col :span="6">{{sysInfo.sysOsName}}</el-col>
-        <el-col :span="6">不限制</el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="6">GO版本</el-col>
-        <el-col :span="6"> >1.15 </el-col>
-        <el-col :span="6">{{sysInfo.goVersion}}</el-col>
-        <el-col :span="6">1.15</el-col>
-      </el-row>
-    </div>
-
-    <div class="foot">
-      <el-button @click="again">重新检测</el-button>
-      <el-button type="primary" @click="next">下一步</el-button>
-    </div>
-  </el-card>
-</template>
-
-<script lang="ts">
-import Step from './step.vue'
-import {getEnvInfo as fetchEnvInfo} from '/@/api/system/dbInit'
-import {ref,  onMounted, defineComponent, inject} from "vue";
-export default defineComponent({
-  name: "checkEnv",
-  setup(){
-    let sysInfo: any = ref({})
-    const jump: any = inject('jump')
-    const getEnvInfo = async () => {
-      fetchEnvInfo().then((res:any) => {
-        const {code, data} = res
-        if (code === 0) {
-          sysInfo.value = data
-        }
-      })
-    }
-
-    onMounted(getEnvInfo)
-
-    return {
-      getEnvInfo,
-      sysInfo,
-      jump
-    }
-
-  },
-  components:{
-    Step
-  },
-  methods:{
-    next() {
-      this.jump('Init')
-    },
-    again() {
-      this.getEnvInfo()
-    }
-  }
-})
-</script>
-
-<style scoped  lang="scss">
-.box-card{
-  margin:100px auto;
-  width:500px;
-  min-height:550px;
-  .content {
-    height:370px;
-    margin-bottom:10px;
-    padding:10px;
-    overflow: auto;
-    .el-row {
-      margin-bottom: 10px;
-    }
-  }
-  .foot {
-    text-align:center;
-  }
-}
-</style>

src/views/dbInit/component/finish.vue

@@ -1,44 +0,0 @@
-<template>
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
-        <span>安装向导</span>
-      </div>
-    </template>
-    <div class="content">
-      <h1>恭喜您, 安装完成！</h1>
-      <p>..........................................</p>
-    </div>
-    <div class="foot"><el-button type="primary" @click="accept">进入后台</el-button></div>
-  </el-card>
-</template>
-
-<script>
-export default {
-  name: "finish",
-  methods:{
-    accept() {
-      this.$router.push({path:"/"})
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.box-card{
-  margin:100px auto;
-  width:500px;
-  height:520px;
-  .content {
-    height:370px;
-    border: 1px #E4E7ED solid;
-    margin-bottom:10px;
-    padding:10px;
-    background-color:#F2F6FC;
-    overflow: auto;
-  }
-  .foot {
-    text-align:center;
-  }
-}
-</style>

src/views/dbInit/component/init.vue

@@ -1,194 +0,0 @@
-<template>
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
-        <span>安装向导</span>
-      </div>
-    </template>
-    <Step :number="2"></Step>
-
-    <div class="content">
-      <el-form
-          ref="ruleFormRef"
-          status-icon
-          label-width="120px"
-          :model="ruleForm"
-          :rules="rules"
-      >
-        <el-divider> 数据库配置 </el-divider>
-        <el-form-item label="数据库地址" prop="dbHost">
-          <el-input v-model="ruleForm.dbHost" placeholder="例如:127.0.0.1"/>
-        </el-form-item>
-
-        <el-form-item label="数据库端口" prop="dbPort">
-          <el-input v-model.number="ruleForm.dbPort" placeholder="例如:3306"/>
-        </el-form-item>
-
-        <el-form-item label="数据库用户名" prop="dbUser">
-          <el-input v-model="ruleForm.dbUser" placeholder="请输入数据库用户名"/>
-        </el-form-item>
-
-        <el-form-item label="数据库密码" prop="dbPass">
-          <el-input  v-model="ruleForm.dbPass" placeholder="请输入数据库密码"/>
-        </el-form-item>
-
-        <el-form-item label="数据库名称" prop="dbName">
-          <el-input v-model="ruleForm.dbName" placeholder="请输入数据库名称"/>
-        </el-form-item>
-
-        <el-form-item label="数据库编码" prop="dbCharset">
-          <el-autocomplete  :fetch-suggestions="querySearch" v-model="ruleForm.dbCharset" placeholder="请输入数据库编码"/>
-
-        </el-form-item>
-
-        <el-divider> Redis配置 </el-divider>
-
-        <el-form-item label="Redis地址" prop="redisAddress">
-          <el-input  v-model="ruleForm.redisAddress" placeholder="例如:127.0.0.1"/>
-        </el-form-item>
-
-        <el-form-item label="Redis端口" prop="redisPort">
-          <el-input  v-model.number="ruleForm.redisPort" placeholder="例如:6379"/>
-        </el-form-item>
-
-        <el-form-item label="Redis索引" prop="redisDb">
-          <el-input v-model.number="ruleForm.redisDb" placeholder="请输入Redis索引"/>
-        </el-form-item>
-
-        <el-form-item label="Redis密码" prop="redisPass">
-          <el-input v-model="ruleForm.redisPass" placeholder="请输入Redis密码"/>
-        </el-form-item>
-
-      </el-form>
-    </div>
-
-    <div class="foot">
-      <el-button type="primary" @click="jump('CheckEnv')">上一步</el-button>
-      <el-button type="primary" @click="next(ruleFormRef)">创建数据</el-button>
-    </div>
-  </el-card>
-</template>
-
-
-<script lang="ts" setup>
-import {createDb} from "/@/api/system/dbInit/index"
-
-import { reactive, ref, inject } from 'vue'
-
-const jump:any = inject('jump')
-
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage, ElLoading } from 'element-plus'
-const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive({
-  dbHost: '127.0.0.1',
-  dbPort: 3306,
-  dbUser: 'root',
-  dbPass:'root',
-  dbName:'',
-  dbCharset:'utf8mb4',
-  redisAddress:'127.0.0.1',
-  redisPort:6379,
-  redisDb:1,
-  redisPass:'',
-})
-const rules = reactive<FormRules>({
-  dbHost: [{ required: true, message: '请输入数据库地址', trigger: 'blur' }],
-  dbPort: [{ required: true, message: '请输入数据库端口', trigger: 'blur' },{ type: 'number', message: '数据库端口必须是一个数值' }],
-  dbUser: [{ required: true, message: '请输入数据库用户名', trigger: 'blur' }],
-  dbName: [{ required: true, message: '请输入数据库名称', trigger: 'blur' }],
-  dbCharset: [{ required: true, message: '请输入数据库编码' }],
-  redisAddress: [{ required: true, message: '请输入Redis地址', trigger: 'blur' }],
-  redisPort: [{ required: true, message: '请输入Redis端口', trigger: 'blur' },{ type: 'number', message: 'Redis端口必须是一个数值' }],
-  redisDb: [{ required: true, message: '请输入Redis索引', trigger: 'blur' },{ type: 'number', message: 'Redis索引必须是一个数值' }],
-})
-
-interface DbCharsetItem {
-  value: string
-}
-
-const dbCharsetList = ref<DbCharsetItem[]>([
-  {value:'utf8mb4'},
-  {value:'utf8'},
-  {value:'gbk'},
-  {value:'gb2312'}
-])
-
-const querySearch = (query: string, cb: any) => {
-  const results = query ? dbCharsetList.value.filter((item:DbCharsetItem) => item.value.indexOf(query) >= 0) : dbCharsetList.value
-  cb(results)
-}
-
-const next = async (formEl: FormInstance | undefined) => {
-
-  if (!formEl) return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const loading = ElLoading.service({
-        lock: true,
-        text: 'Loading',
-        background: 'rgba(0, 0, 0, 0.7)',
-      })
-      let res:any = await createDb(ruleForm)
-      loading.close()
-      const {code, message, data} = res
-      if (code === 0 && data === true) {
-        ElMessage({
-          showClose: true,
-          message: '初始化成功',
-          type: 'success',
-        })
-        jump('Finish')
-      } else {
-        ElMessage({
-          showClose: true,
-          message: message || '初始化操作失败!',
-          type: 'error',
-        })
-      }
-
-
-    }
-  })
-
-}
-
-
-</script>
-
-<script lang="ts">
-import Step from './step.vue'
-import { defineComponent} from "vue";
-
-export default defineComponent({
-  name: "init",
-  components:{
-    Step
-  },
-
-
-  methods:{
-
-  }
-})
-</script>
-
-<style scoped  lang="scss">
-.box-card{
-  margin:100px auto;
-  width:600px;
-  min-height:550px;
-  .content {
-    height:370px;
-    margin-bottom:10px;
-    padding:10px;
-    overflow: auto;
-    .el-row {
-      margin-bottom: 10px;
-    }
-  }
-  .foot {
-    text-align:center;
-  }
-}
-</style>

src/views/dbInit/component/protocol.vue

@@ -1,54 +0,0 @@
-<template>
-  <el-card class="box-card">
-    <template #header>
-      <div class="card-header">
-        <span>安装向导</span>
-      </div>
-    </template>
-    <div class="content">
-      <p>软件使用协议</p>
-      <h3>免责声明：</h3>
-
-    </div>
-    <div class="foot"><el-button type="primary" @click="accept">接 受</el-button></div>
-  </el-card>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import { inject } from 'vue'
-export default defineComponent({
-  name: "protocol",
-  setup(){
-    const jump:any = inject('jump')
-    return {
-      jump
-    }
-  },
-  methods:{
-    accept() {
-      this.jump('CheckEnv')
-    }
-  }
-})
-</script>
-
-<style scoped lang="scss">
-.box-card{
-  margin:100px auto;
-  width:500px;
-  height:520px;
-  .content {
-    height:370px;
-    border: 1px #E4E7ED solid;
-    margin-bottom:10px;
-    padding:10px;
-    background-color:#F2F6FC;
-    overflow: auto;
-  }
-  .foot {
-    text-align:center;
-  }
-}
-
-</style>

src/views/dbInit/component/step.vue

@@ -1,54 +0,0 @@
-<template>
-  <ul class="step">
-    <li :class="['number', {'active':  number >= 1}]"><span>1</span><em>检测环境</em></li>
-    <li :class="['number', {'active':  number >= 2}]"><span>2</span><em>创建数据</em></li>
-    <li :class="['number', {'active':  number >= 3}]"><span>3</span><em>完成安装</em></li>
-  </ul>
-</template>
-
-<script lang="ts">
-export default {
-  name: "step",
-  props:{
-    number:{
-      type:Number,
-      default: 1,
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.step {
-  list-style-type:none;
-  display: flex;
-  justify-content:space-around;
-  .active {
-    span{
-      background-color:#409EFF !important;
-    }
-    em{
-      font-weight: bold;
-    }
-  }
-  .number {
-    height:40px;
-    line-height:40px;
-    span {
-      margin-right:10px;
-      display:inline-block;
-      width:20px;
-      height:20px;
-      line-height: 20px;
-      text-align: center;
-      background-color:#E4E7ED;
-      color:#fff;
-      border-radius: 50%;
-    }
-    em{
-
-    }
-
-  }
-}
-</style>

src/views/dbInit/index.vue

@@ -1,45 +0,0 @@
-<template>
-  <div class="db-init">
-    <component :is="currentComponent" />
-  </div>
-</template>
-
-<script lang="ts">
-import Protocol from "./component/protocol.vue";
-import CheckEnv from "./component/checkEnv.vue";
-import Init from "./component/init.vue"
-import Finish from "./component/finish.vue"
-import {defineComponent} from "vue";
-export default defineComponent({
-  name: "dbInit",
-  components:{
-    Protocol,
-    CheckEnv,
-    Init,
-    Finish
-  },
-  provide() {
-    return {
-      jump: (v:string) => {
-        this.currentComponent = v
-      }
-    }
-  },
-
-  setup() {
-
-  },
-  data() {
-    return {
-      currentComponent: 'Protocol'
-    }
-  }
-
-})
-</script>
-
-<style scoped lang="scss">
-  .db-init {
-
-  }
-</style>

src/views/demo/chart/chart.scss

@@ -1,434 +0,0 @@
-.chart-scrollbar {
-	.chart-warp {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		.chart-warp-bottom {
-			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: var(--el-color-white);
-						border: 1px solid var(--el-border-color-lighter);
-						border-radius: 4px;
-						display: flex;
-						flex-direction: column;
-						padding: 15px;
-						transition: all ease 0.3s;
-						&:hover {
-							box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-							transition: all ease 0.3s;
-						}
-						.flex-title {
-							margin-bottom: 15px;
-							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: var(--el-text-color-primary);
-				.sky {
-					display: flex;
-					align-items: center;
-					.sky-left {
-						font-size: 30px;
-					}
-					.sky-center {
-						flex: 1;
-						overflow: hidden;
-						padding: 0 10px;
-						font {
-							margin-right: 15px;
-						}
-						.span {
-							background: #22bc76;
-							border-radius: 2px;
-							padding: 0 5px;
-							color: var(--el-color-white);
-						}
-					}
-					.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;
-						}
-					}
-					.sky-dl-first {
-						color: var(--el-color-primary);
-					}
-				}
-				.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;
-							color: var(--el-color-white);
-							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: var(--el-color-primary);
-								overflow: hidden;
-								white-space: nowrap;
-								text-overflow: ellipsis;
-							}
-							.d-states-item-value {
-								font-size: 14px;
-								text-align: center;
-								margin-top: 3px;
-								color: var(--el-color-primary);
-							}
-						}
-					}
-				}
-				.d-btn {
-					margin-top: 5px;
-					.d-btn-item {
-						border: 1px solid var(--el-color-primary);
-						display: flex;
-						width: 100%;
-						border-radius: 35px;
-						align-items: center;
-						padding: 5px;
-						margin-top: 15px;
-						cursor: pointer;
-						transition: all ease 0.3s;
-						color: var(--el-color-primary);
-						.d-btn-item-left {
-							font-size: 20px;
-							border: 1px solid var(--el-color-primary);
-							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;
-						}
-					}
-				}
-			}
-			.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%;
-						background: var(--el-color-white);
-						padding: 15px;
-						border: 1px solid var(--el-border-color-lighter);
-						border-radius: 4px;
-						transition: all ease 0.3s;
-						&:hover {
-							box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-							transition: all ease 0.3s;
-						}
-					}
-				}
-				.big-data-down-center-two {
-					padding: 0 7.5px 15px;
-					height: 33.33%;
-					.flex-warp-item-box {
-						width: 100%;
-						height: 100%;
-						background: var(--el-color-white);
-						display: flex;
-						flex-direction: column;
-						padding: 15px;
-						border: 1px solid var(--el-border-color-lighter);
-						border-radius: 4px;
-						transition: all ease 0.3s;
-						&:hover {
-							box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-							transition: all ease 0.3s;
-						}
-						.flex-title {
-							margin-bottom: 15px;
-							color: var(--el-text-color-primary);
-							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: var(--el-color-primary);
-										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: var(--el-color-primary);
-											display: flex;
-											align-items: center;
-											height: 100%;
-											justify-content: center;
-										}
-									}
-									@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-title {
-						color: var(--el-text-color-primary);
-					}
-					.flex-content {
-						display: flex;
-						flex-direction: column;
-						.task {
-							display: flex;
-							height: 45px;
-							.task-item {
-								flex: 1;
-								color: var(--el-color-white);
-								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;
-									}
-								}
-							}
-							.task-first-item {
-								flex-direction: column;
-								text-align: center;
-								color: var(--el-color-primary);
-								.task-first {
-									font-size: 20px;
-								}
-							}
-						}
-						.progress {
-							color: var(--el-text-color-primary);
-							display: flex;
-							flex-direction: column;
-							flex: 1;
-							justify-content: space-between;
-							margin-top: 15px;
-							.progress-item {
-								height: 33.33%;
-								display: flex;
-								align-items: center;
-								.progress-box {
-									flex: 1;
-									width: 100%;
-									margin-left: 10px;
-									::v-deep(.el-progress__text) {
-										color: var(--el-text-color-primary);
-										font-size: 12px !important;
-										text-align: right;
-									}
-									::v-deep(.el-progress-bar__outer) {
-										background-color: rgba(0, 0, 0, 0.1) !important;
-									}
-									::v-deep(.el-progress-bar) {
-										margin-right: -22px !important;
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}

src/views/demo/chart/chart.ts

@@ -1,59 +0,0 @@
-/**
- * sky 天气
- * @returns 返回模拟数据
- */
-export const skyList = [
-	{
-		v1: '时间',
-		v2: '天气',
-		v3: '温度',
-		v5: '降水',
-		v7: '风力',
-		type: 'title',
-	},
-	{
-		v1: '今天',
-		v2: 'ele-Sunny',
-		v3: '20°/26°',
-		v5: '50%',
-		v7: '13m/s',
-	},
-	{
-		v1: '明天',
-		v2: 'ele-Lightning',
-		v3: '20°/26°',
-		v5: '50%',
-		v7: '13m/s',
-	},
-];
-
-/**
- * 当前设置状态
- * @returns 返回模拟数据
- */
-export const dBtnList = [
-	{
-		v2: '阳光玫瑰种植',
-		v3: '126天',
-		v4: '设备在线',
-	},
-];
-
-/**
- * 当前设备监测
- * @returns 返回模拟数据
- */
-export const chartData4List = [
-	{
-		label: '温度',
-	},
-	{
-		label: '光照',
-	},
-	{
-		label: '湿度',
-	},
-	{
-		label: '风力',
-	},
-];

src/views/demo/chart/head.vue

@@ -1,106 +0,0 @@
-<template>
-	<div class="big-data-up mb15">
-		<div class="up-left">
-			<i class="el-icon-time mr5"></i>
-			<span>{{ time.txt }}</span>
-		</div>
-		<div class="up-center">
-			<span>智慧农业系统平台</span>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onBeforeMount, onUnmounted, defineComponent } from 'vue';
-import { formatDate } from '/@/utils/formatTime';
-export default defineComponent({
-	name: 'chartHead',
-	setup() {
-		const state = reactive({
-			time: {
-				txt: '',
-				fun: 0,
-			},
-		});
-		// 初始化时间
-		const initTime = () => {
-			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
-			state.time.fun = window.setInterval(() => {
-				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
-			}, 1000);
-		};
-		// 页面加载前
-		onBeforeMount(() => {
-			initTime();
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			window.clearInterval(state.time.fun);
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.big-data-up {
-	height: 55px;
-	width: 100%;
-	display: flex;
-	align-items: center;
-	padding: 0 15px;
-	color: var(--el-color-primary);
-	overflow: hidden;
-	position: relative;
-	.up-left {
-		position: absolute;
-	}
-	.up-center {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		font-size: 18px;
-		letter-spacing: 5px;
-		background-image: -webkit-linear-gradient(
-			left,
-			var(--el-color-primary),
-			var(--el-color-primary-light-1) 25%,
-			var(--el-color-primary) 50%,
-			var(--el-color-primary-light-1) 75%,
-			var(--el-color-primary)
-		);
-		-webkit-text-fill-color: transparent;
-		-webkit-background-clip: text;
-		background-clip: text;
-		background-size: 200% 100%;
-		-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
-		animation: masked-animation-data-v-b02d8052 4s linear infinite;
-		-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
-		position: relative;
-		@keyframes masked-animation {
-			0% {
-				background-position: 0 0;
-			}
-			100% {
-				background-position: -100% 0;
-			}
-		}
-		position: relative;
-		&::after {
-			content: '';
-			width: 250px;
-			position: absolute;
-			bottom: -15px;
-			left: 50%;
-			transform: translateX(-50%);
-			border: 1px transparent solid;
-			border-image: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
-		}
-		span {
-			cursor: pointer;
-		}
-	}
-}
-</style>

src/views/demo/chart/index.vue

@@ -1,487 +0,0 @@
-<template>
-	<div class="chart-scrollbar layout-view-bg-white" :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="chart-warp">
-			<div class="chart-warp-top">
-				<ChartHead />
-			</div>
-			<div class="chart-warp-bottom">
-				<!-- 左边 -->
-				<div class="big-data-down-left">
-					<div class="flex-warp-item">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">天气预报</div>
-							<div class="flex-content">
-								<div class="sky">
-									<SvgIcon name="ele-Sunny" class="sky-left" />
-									<div class="sky-center">
-										<div class="mb2">
-											<span>多云转晴</span>
-											<span>东南风</span>
-											<span class="span ml5">良</span>
-										</div>
-									</div>
-									<div class="sky-right">
-										<span>25</span>
-										<span>°C</span>
-									</div>
-								</div>
-								<div class="sky-dd">
-									<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
-										<div>{{ v.v1 }}</div>
-										<div v-if="v.type === 'title'">{{ v.v2 }}</div>
-										<div v-else>
-											<SvgIcon :name="v.v2" />
-										</div>
-										<div>{{ v.v3 }}</div>
-										<div class="tip">{{ v.v5 }}</div>
-										<div>{{ v.v7 }}</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="flex-warp-item">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">当前设备状态</div>
-							<div class="flex-content flex-content-overflow">
-								<div class="d-states">
-									<div class="d-states-item">
-										<SvgIcon name="ele-Odometer" class="i-bg1" />
-										<div class="d-states-flex">
-											<div class="d-states-item-label">园区设备数</div>
-											<div class="d-states-item-value">99</div>
-										</div>
-									</div>
-									<div class="d-states-item">
-										<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
-										<div class="d-states-flex">
-											<div class="d-states-item-label">预警设备数</div>
-											<div class="d-states-item-value">10</div>
-										</div>
-									</div>
-									<div class="d-states-item">
-										<SvgIcon name="ele-VideoPlay" class="i-bg3" />
-										<div class="d-states-flex">
-											<div class="d-states-item-label">运行设备数</div>
-											<div class="d-states-item-value">20</div>
-										</div>
-									</div>
-								</div>
-								<div class="d-btn">
-									<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k">
-										<i class="d-btn-item-left el-icon-money"></i>
-										<div class="d-btn-item-center">
-											<div>{{ v.v2 }}|{{ v.v3 }}</div>
-										</div>
-										<div class="d-btn-item-eight">{{ v.v4 }}</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="flex-warp-item">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">近30天预警总数</div>
-							<div class="flex-content">
-								<div style="height: 100%" ref="chartsWarningRef"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- 中间 -->
-				<div class="big-data-down-center">
-					<div class="big-data-down-center-one">
-						<div class="big-data-down-center-one-content">
-							<div style="height: 100%" ref="chartsCenterOneRef"></div>
-						</div>
-					</div>
-					<div class="big-data-down-center-two">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">
-								<span>当前设备监测</span>
-								<span class="flex-title-small">单位：次</span>
-							</div>
-							<div class="flex-content">
-								<div class="flex-content-left">
-									<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
-										<div class="monitor-wave">
-											<div class="monitor-z-index">
-												<div class="monitor-item-label">{{ v.label }}</div>
-											</div>
-										</div>
-									</div>
-								</div>
-								<div class="flex-content-right">
-									<div style="height: 100%" ref="chartsMonitorRef"></div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<!-- 右边 -->
-				<div class="big-data-down-right">
-					<div class="flex-warp-item">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">
-								<span>近7天产品追溯扫码统计</span>
-								<span class="flex-title-small">单位：次</span>
-							</div>
-							<div class="flex-content">
-								<div style="height: 100%" ref="chartsSevenDaysRef"></div>
-							</div>
-						</div>
-					</div>
-					<div class="flex-warp-item">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">当前任务统计</div>
-							<div class="flex-content">
-								<div class="task">
-									<div class="task-item task-first-item">
-										<div class="task-item-value task-first">25</div>
-										<div class="task-item-label">待办任务</div>
-									</div>
-									<div class="task-item">
-										<div class="task-item-box task1">
-											<div class="task-item-value">12</div>
-											<div class="task-item-label">施肥</div>
-										</div>
-									</div>
-									<div class="task-item">
-										<div class="task-item-box task2">
-											<div class="task-item-value">3</div>
-											<div class="task-item-label">施药</div>
-										</div>
-									</div>
-									<div class="task-item">
-										<div class="task-item-box task3">
-											<div class="task-item-value">5</div>
-											<div class="task-item-label">农事</div>
-										</div>
-									</div>
-								</div>
-								<div class="progress">
-									<div class="progress-item">
-										<span>施肥率</span>
-										<div class="progress-box">
-											<el-progress :percentage="70" color="#43bdf0"></el-progress>
-										</div>
-									</div>
-									<div class="progress-item">
-										<span>施药率</span>
-										<div class="progress-box">
-											<el-progress :percentage="36" color="#43bdf0"></el-progress>
-										</div>
-									</div>
-									<div class="progress-item">
-										<span>农事率</span>
-										<div class="progress-box">
-											<el-progress :percentage="91" color="#43bdf0"></el-progress>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="flex-warp-item">
-						<div class="flex-warp-item-box">
-							<div class="flex-title">
-								<span>近7天投入品记录</span>
-								<span class="flex-title-small">单位：件</span>
-							</div>
-							<div class="flex-content">
-								<div style="height: 100%" ref="chartsInvestmentRef"></div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, computed, onMounted, getCurrentInstance, watch, nextTick, onActivated, defineComponent } from 'vue';
-import { useStore } from '/@/store/index';
-import ChartHead from './head.vue';
-import * as echarts from 'echarts';
-import 'echarts-wordcloud';
-import { skyList, dBtnList, chartData4List } from './chart';
-export default defineComponent({
-	name: 'chartIndex',
-	components: { ChartHead },
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const store = useStore();
-		const state = reactive({
-			skyList,
-			dBtnList,
-			chartData4List,
-			myCharts: [],
-		});
-		// 设置主内容的高度
-		const initTagViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// 初始化中间图表1
-		const initChartsCenterOne = () => {
-			const myChart = echarts.init(proxy.$refs.chartsCenterOneRef);
-			const option = {
-				grid: {
-					top: 15,
-					right: 15,
-					bottom: 20,
-					left: 30,
-				},
-				tooltip: {},
-				series: [
-					{
-						type: 'wordCloud',
-						sizeRange: [12, 40],
-						rotationRange: [0, 0],
-						rotationStep: 45,
-						gridSize: Math.random() * 20 + 5,
-						shape: 'circle',
-						width: '100%',
-						height: '100%',
-						textStyle: {
-							fontFamily: 'sans-serif',
-							fontWeight: 'bold',
-							color: function () {
-								return `rgb(${[Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',')})`;
-							},
-						},
-						data: [
-							{ name: 'vue-next-admin', value: 520 },
-							{ name: 'lyt', value: 520 },
-							{ name: 'next-admin', value: 500 },
-							{ name: '更名', value: 420 },
-							{ name: '智慧农业', value: 520 },
-							{ name: '男神', value: 2.64 },
-							{ name: '好身材', value: 4.03 },
-							{ name: '校草', value: 24.95 },
-							{ name: '酷', value: 4.04 },
-							{ name: '时尚', value: 5.27 },
-							{ name: '阳光活力', value: 5.8 },
-							{ name: '初恋', value: 3.09 },
-							{ name: '英俊潇洒', value: 24.71 },
-							{ name: '霸气', value: 6.33 },
-							{ name: '腼腆', value: 2.55 },
-							{ name: '蠢萌', value: 3.88 },
-							{ name: '青春', value: 8.04 },
-							{ name: '网红', value: 5.87 },
-							{ name: '萌', value: 6.97 },
-							{ name: '认真', value: 2.53 },
-							{ name: '古典', value: 2.49 },
-							{ name: '温柔', value: 3.91 },
-							{ name: '有个性', value: 3.25 },
-							{ name: '可爱', value: 9.93 },
-							{ name: '幽默诙谐', value: 3.65 },
-						],
-					},
-				],
-			};
-			myChart.setOption(option);
-			(<any>state.myCharts).push(myChart);
-		};
-		// 初始化近7天产品追溯扫码统计
-		const initChartsSevenDays = () => {
-			const myChart = echarts.init(proxy.$refs.chartsSevenDaysRef);
-			const option = {
-				grid: {
-					top: 15,
-					right: 15,
-					bottom: 20,
-					left: 30,
-				},
-				tooltip: {
-					trigger: 'axis',
-				},
-				xAxis: {
-					type: 'category',
-					boundaryGap: false,
-					data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
-				},
-				yAxis: {
-					type: 'value',
-				},
-				series: [
-					{
-						name: '邮件营销',
-						type: 'line',
-						stack: '总量',
-						data: [12, 32, 11, 34, 90, 23, 21],
-					},
-					{
-						name: '联盟广告',
-						type: 'line',
-						stack: '总量',
-						data: [22, 82, 91, 24, 90, 30, 30],
-					},
-					{
-						name: '视频广告',
-						type: 'line',
-						stack: '总量',
-						data: [50, 32, 18, 14, 90, 30, 50],
-					},
-				],
-			};
-			myChart.setOption(option);
-			(<any>state.myCharts).push(myChart);
-		};
-		// 初始化近30天预警总数
-		const initChartsWarning = () => {
-			const myChart = echarts.init(proxy.$refs.chartsWarningRef);
-			const option = {
-				grid: {
-					top: 50,
-					right: 20,
-					bottom: 30,
-					left: 30,
-				},
-				tooltip: {
-					trigger: 'item',
-				},
-				series: [
-					{
-						name: '面积模式',
-						type: 'pie',
-						radius: [20, 50],
-						center: ['50%', '50%'],
-						roseType: 'area',
-						itemStyle: {
-							borderRadius: 8,
-						},
-						data: [
-							{ value: 40, name: '监测设备预警' },
-							{ value: 38, name: '天气预警' },
-							{ value: 32, name: '任务预警' },
-							{ value: 30, name: '病虫害预警' },
-						],
-					},
-				],
-			};
-			myChart.setOption(option);
-			(<any>state.myCharts).push(myChart);
-		};
-		// 初始化当前设备监测
-		const initChartsMonitor = () => {
-			const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
-			const option = {
-				grid: {
-					top: 15,
-					right: 15,
-					bottom: 20,
-					left: 30,
-				},
-				tooltip: {
-					trigger: 'axis',
-				},
-				xAxis: {
-					type: 'category',
-					boundaryGap: false,
-					data: ['02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00'],
-				},
-				yAxis: {
-					type: 'value',
-				},
-				series: [
-					{
-						itemStyle: {
-							color: '#289df5',
-							borderColor: '#289df5',
-							areaStyle: {
-								type: 'default',
-								opacity: 0.1,
-							},
-						},
-						data: [20, 32, 31, 34, 12, 13, 20],
-						type: 'line',
-						areaStyle: {},
-					},
-				],
-			};
-			myChart.setOption(option);
-			(<any>state.myCharts).push(myChart);
-		};
-		// 初始化近7天投入品记录
-		const initChartsInvestment = () => {
-			const myChart = echarts.init(proxy.$refs.chartsInvestmentRef);
-			const option = {
-				grid: {
-					top: 15,
-					right: 15,
-					bottom: 20,
-					left: 30,
-				},
-				tooltip: {
-					trigger: 'axis',
-				},
-				xAxis: {
-					type: 'category',
-					data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
-				},
-				yAxis: {
-					type: 'value',
-				},
-				series: [
-					{
-						data: [10, 20, 15, 80, 70, 11, 30],
-						type: 'bar',
-					},
-				],
-			};
-			myChart.setOption(option);
-			(<any>state.myCharts).push(myChart);
-		};
-		// 批量设置 echarts resize
-		const initEchartsResizeFun = () => {
-			nextTick(() => {
-				for (let i = 0; i < state.myCharts.length; i++) {
-					(<any>state.myCharts[i]).resize();
-				}
-			});
-		};
-		// 批量设置 echarts resize
-		const initEchartsResize = () => {
-			window.addEventListener('resize', initEchartsResizeFun);
-		};
-		// 页面加载时
-		onMounted(() => {
-			initChartsCenterOne();
-			initChartsSevenDays();
-			initChartsWarning();
-			initChartsMonitor();
-			initChartsInvestment();
-			initEchartsResize();
-		});
-		// 由于页面缓存原因，keep-alive
-		onActivated(() => {
-			initEchartsResizeFun();
-		});
-		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
-		watch(
-			() => store.state.tagsViewRoutes.isTagsViewCurrenFull,
-			() => {
-				initEchartsResizeFun();
-			}
-		);
-		return {
-			initTagViewHeight,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-@import './chart.scss';
-</style>

src/views/demo/fun/clipboard/index.vue

@@ -1,39 +0,0 @@
-<template>
-	<div id="printRref">
-		<el-card shadow="hover" header="复制剪切演示">
-			<el-alert
-				title="感谢优秀的 `vue-clipboard3`，项目地址：https://github.com/JamieCurnow/vue-clipboard3`"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<el-input placeholder="请输入内容" v-model="copyVal">
-				<template #append>
-					<el-button @click="copyText(copyVal)">复制链接</el-button>
-				</template>
-			</el-input>
-			<el-input placeholder="先点击上方 `复制链接` 按钮，然后 `Ctrl + V` 进行粘贴！ " v-model="shearVal" class="mt15"> </el-input>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, defineComponent } from 'vue';
-import commonFunction from '/@/utils/commonFunction';
-export default defineComponent({
-	name: 'funClipboard',
-	setup() {
-		const { copyText } = commonFunction();
-		const state = reactive({
-			copyVal: 'https://gitee.com/lyt-top/vue-next-admin',
-			shearVal: '',
-		});
-		// 页面加载时
-		onMounted(() => {});
-		return {
-			copyText,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/fun/countup/index.vue

@@ -1,161 +0,0 @@
-<template>
-	<div>
-		<el-card shadow="hover" header="数字滚动演示">
-			<el-alert
-				title="感谢优秀的 `countup.js`，项目地址：https://github.com/inorganik/countUp.js"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<el-row :gutter="20">
-				<el-col :sm="6" class="mb15" v-for="(v, k) in topCardItemList" :key="k">
-					<div class="countup-card-item countup-card-item-box" :style="{ background: `var(${v.color})` }">
-						<div class="countup-card-item-flex">
-							<div class="countup-card-item-title pb3">{{ v.title }}</div>
-							<div class="countup-card-item-title-num pb6" :id="`titleNum${k + 1}`"></div>
-							<div class="countup-card-item-tip pb3">{{ v.tip }}</div>
-							<div class="countup-card-item-tip-num" :id="`tipNum${k + 1}`"></div>
-						</div>
-						<i :class="v.icon" :style="{ color: v.iconColor }"></i>
-					</div>
-				</el-col>
-			</el-row>
-			<div class="flex-warp">
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="primary" size="default" @click="refreshCurrent">
-							<el-icon>
-								<ele-RefreshRight />
-							</el-icon>
-							重置/刷新数值
-						</el-button>
-					</div>
-				</div>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, onMounted, nextTick, defineComponent } from 'vue';
-import { CountUp } from 'countup.js';
-export default defineComponent({
-	name: 'funCountup',
-	setup() {
-		const state = reactive({
-			topCardItemList: [
-				{
-					title: '今日访问人数',
-					titleNum: '123',
-					tip: '在场人数',
-					tipNum: '911',
-					color: '--el-color-primary',
-					iconColor: '#ffcb47',
-					icon: 'iconfont icon-jinridaiban',
-				},
-				{
-					title: '实验室总数',
-					titleNum: '123',
-					tip: '使用中',
-					tipNum: '611',
-					color: '--el-color-success',
-					iconColor: '#70cf41',
-					icon: 'iconfont icon-AIshiyanshi',
-				},
-				{
-					title: '申请人数（月）',
-					titleNum: '123',
-					tip: '通过人数',
-					tipNum: '911',
-					color: '--el-color-warning',
-					iconColor: '#dfae64',
-					icon: 'iconfont icon-shenqingkaiban',
-				},
-				{
-					title: '销售情况',
-					titleNum: '123',
-					tip: '销售数',
-					tipNum: '911',
-					color: '--el-color-danger',
-					iconColor: '#e56565',
-					icon: 'iconfont icon-ditu',
-				},
-			],
-		});
-		// 初始化数字滚动
-		const initNumCountUp = () => {
-			nextTick(() => {
-				new CountUp('titleNum1', Math.random() * 10000).start();
-				new CountUp('titleNum2', Math.random() * 10000).start();
-				new CountUp('titleNum3', Math.random() * 10000).start();
-				new CountUp('titleNum4', Math.random() * 10000).start();
-				new CountUp('tipNum1', Math.random() * 1000).start();
-				new CountUp('tipNum2', Math.random() * 1000).start();
-				new CountUp('tipNum3', Math.random() * 1000).start();
-				new CountUp('tipNum4', Math.random() * 1000).start();
-			});
-		};
-		// 重置/刷新数值
-		const refreshCurrent = () => {
-			initNumCountUp();
-		};
-		// 页面加载时
-		onMounted(() => {
-			initNumCountUp();
-		});
-		return {
-			refreshCurrent,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.countup-card-item {
-	width: 100%;
-	height: 103px;
-	background: var(--el-text-color-secondary);
-	border-radius: 4px;
-	transition: all ease 0.3s;
-	&:hover {
-		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-		transition: all ease 0.3s;
-	}
-}
-.countup-card-item-box {
-	display: flex;
-	align-items: center;
-	position: relative;
-	overflow: hidden;
-	&:hover {
-		i {
-			right: 0px !important;
-			bottom: 0px !important;
-			transition: all ease 0.3s;
-		}
-	}
-	i {
-		position: absolute;
-		right: -10px;
-		bottom: -10px;
-		font-size: 70px;
-		transform: rotate(-30deg);
-		transition: all ease 0.3s;
-	}
-	.countup-card-item-flex {
-		padding: 0 20px;
-		color: var(--el-color-white);
-		.countup-card-item-title,
-		.countup-card-item-tip {
-			font-size: 13px;
-		}
-		.countup-card-item-title-num {
-			font-size: 18px;
-		}
-		.countup-card-item-tip-num {
-			font-size: 13px;
-		}
-	}
-}
-</style>

src/views/demo/fun/cropper/index.vue

@@ -1,62 +0,0 @@
-<template>
-	<div class="croppers-container">
-		<el-card shadow="hover" header="cropper 图片裁剪">
-			<el-alert
-				title="感谢优秀的 `cropperjs`，项目地址：https://github.com/fengyuanchen/cropperjs"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<div class="cropper-img-warp">
-				<div class="mb15 mt15">
-					<img class="cropper-img" :src="cropperImg" />
-				</div>
-				<el-button type="primary" size="default" @click="onCropperDialogOpen">
-					<el-icon>
-						<ele-Crop />
-					</el-icon>
-					更换头像
-				</el-button>
-			</div>
-		</el-card>
-		<CropperDialog ref="cropperDialogRef" />
-	</div>
-</template>
-
-<script lang="ts">
-import { ref, toRefs, reactive, defineComponent } from 'vue';
-import CropperDialog from '/@/components/cropper/index.vue';
-export default defineComponent({
-	name: 'funCropper',
-	components: { CropperDialog },
-	setup() {
-		const cropperDialogRef = ref();
-		const state = reactive({
-			cropperImg: 'https://img1.baidu.com/it/u=2813520958,2218166536&fm=26&fmt=auto&gp=0.jpg',
-		});
-		// 打开裁剪弹窗
-		const onCropperDialogOpen = () => {
-			cropperDialogRef.value.openDialog(state.cropperImg);
-		};
-		return {
-			cropperDialogRef,
-			onCropperDialogOpen,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.croppers-container {
-	.cropper-img-warp {
-		text-align: center;
-		.cropper-img {
-			margin: auto;
-			width: 150px;
-			height: 150px;
-			border-radius: 100%;
-		}
-	}
-}
-</style>

src/views/demo/fun/echartsMap/index.vue

@@ -1,135 +0,0 @@
-<template>
-	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="layout-view-bg-white">
-			<div id="echartsMap" style="height: 100%"></div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, computed, onMounted, defineComponent } from 'vue';
-import * as echarts from 'echarts';
-import 'echarts/extension/bmap/bmap';
-import { useStore } from '/@/store/index';
-import { echartsMapList, echartsMapData } from './mock';
-export default defineComponent({
-	name: 'funEchartsMap',
-	setup() {
-		const store = useStore();
-		const state: any = reactive({
-			echartsMapList,
-			echartsMapData,
-		});
-		// 设置主内容的高度
-		const initTagViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// echartsMap 将坐标信息和对应物理量的值合在一起
-		const convertData = (data: any) => {
-			let res = [];
-			for (let i = 0; i < data.length; i++) {
-				let geoCoord = state.echartsMapData[data[i].name];
-				if (geoCoord) {
-					res.push({
-						name: data[i].name,
-						value: geoCoord.concat(data[i].value),
-					});
-				}
-			}
-			return res;
-		};
-		// 初始化 echartsMap
-		const initEchartsMap = () => {
-			const myChart = echarts.init(<HTMLElement>document.getElementById('echartsMap'));
-			const option = {
-				tooltip: {
-					trigger: 'item',
-				},
-				color: ['#9a60b4', '#ea7ccc'],
-				bmap: {
-					center: [104.114129, 37.550339],
-					zoom: 5,
-					roam: true,
-					mapStyle: {},
-				},
-				series: [
-					{
-						name: 'pm2.5',
-						type: 'scatter',
-						coordinateSystem: 'bmap',
-						data: convertData(state.echartsMapList),
-						symbolSize: function (val: any) {
-							return val[2] / 10;
-						},
-						encode: {
-							value: 2,
-						},
-						label: {
-							formatter: '{b}',
-							position: 'right',
-							show: false,
-						},
-						emphasis: {
-							label: {
-								show: true,
-							},
-						},
-					},
-					{
-						name: 'Top 5',
-						type: 'effectScatter',
-						coordinateSystem: 'bmap',
-						data: convertData(
-							state.echartsMapList
-								.sort(function (a: any, b: any) {
-									return b.value - a.value;
-								})
-								.slice(0, 6)
-						),
-						symbolSize: function (val: any) {
-							return val[2] / 10;
-						},
-						encode: {
-							value: 2,
-						},
-						showEffectOn: 'render',
-						rippleEffect: {
-							brushType: 'stroke',
-						},
-						hoverAnimation: true,
-						label: {
-							formatter: '{b}',
-							position: 'right',
-							show: true,
-						},
-						itemStyle: {
-							shadowBlur: 10,
-							shadowColor: '#333',
-						},
-						zlevel: 1,
-					},
-				],
-			};
-			myChart.setOption(option);
-			window.addEventListener('resize', () => {
-				myChart.resize();
-			});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initEchartsMap();
-		});
-		return {
-			initTagViewHeight,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/fun/echartsMap/mock.ts

@@ -1,387 +0,0 @@
-// 地图模拟数据
-export const echartsMapList = [
-	{ name: '海门', value: 9 },
-	{ name: '鄂尔多斯', value: 12 },
-	{ name: '招远', value: 12 },
-	{ name: '舟山', value: 12 },
-	{ name: '齐齐哈尔', value: 14 },
-	{ name: '盐城', value: 15 },
-	{ name: '赤峰', value: 16 },
-	{ name: '青岛', value: 18 },
-	{ name: '乳山', value: 18 },
-	{ name: '金昌', value: 19 },
-	{ name: '泉州', value: 21 },
-	{ name: '莱西', value: 21 },
-	{ name: '日照', value: 21 },
-	{ name: '胶南', value: 22 },
-	{ name: '南通', value: 23 },
-	{ name: '拉萨', value: 24 },
-	{ name: '云浮', value: 24 },
-	{ name: '梅州', value: 25 },
-	{ name: '文登', value: 25 },
-	{ name: '上海', value: 25 },
-	{ name: '攀枝花', value: 25 },
-	{ name: '威海', value: 25 },
-	{ name: '承德', value: 25 },
-	{ name: '厦门', value: 26 },
-	{ name: '汕尾', value: 26 },
-	{ name: '潮州', value: 26 },
-	{ name: '丹东', value: 27 },
-	{ name: '太仓', value: 27 },
-	{ name: '曲靖', value: 27 },
-	{ name: '烟台', value: 28 },
-	{ name: '福州', value: 29 },
-	{ name: '瓦房店', value: 30 },
-	{ name: '即墨', value: 30 },
-	{ name: '抚顺', value: 31 },
-	{ name: '玉溪', value: 31 },
-	{ name: '张家口', value: 31 },
-	{ name: '阳泉', value: 31 },
-	{ name: '莱州', value: 32 },
-	{ name: '湖州', value: 32 },
-	{ name: '汕头', value: 32 },
-	{ name: '昆山', value: 33 },
-	{ name: '宁波', value: 33 },
-	{ name: '湛江', value: 33 },
-	{ name: '揭阳', value: 34 },
-	{ name: '荣成', value: 34 },
-	{ name: '连云港', value: 35 },
-	{ name: '葫芦岛', value: 35 },
-	{ name: '常熟', value: 36 },
-	{ name: '东莞', value: 36 },
-	{ name: '河源', value: 36 },
-	{ name: '淮安', value: 36 },
-	{ name: '泰州', value: 36 },
-	{ name: '南宁', value: 37 },
-	{ name: '营口', value: 37 },
-	{ name: '惠州', value: 37 },
-	{ name: '江阴', value: 37 },
-	{ name: '蓬莱', value: 37 },
-	{ name: '韶关', value: 38 },
-	{ name: '嘉峪关', value: 38 },
-	{ name: '广州', value: 38 },
-	{ name: '延安', value: 38 },
-	{ name: '太原', value: 39 },
-	{ name: '清远', value: 39 },
-	{ name: '中山', value: 39 },
-	{ name: '昆明', value: 39 },
-	{ name: '寿光', value: 40 },
-	{ name: '盘锦', value: 40 },
-	{ name: '长治', value: 41 },
-	{ name: '深圳', value: 360 },
-	{ name: '珠海', value: 42 },
-	{ name: '宿迁', value: 43 },
-	{ name: '咸阳', value: 43 },
-	{ name: '铜川', value: 44 },
-	{ name: '平度', value: 44 },
-	{ name: '佛山', value: 44 },
-	{ name: '海口', value: 44 },
-	{ name: '江门', value: 45 },
-	{ name: '章丘', value: 45 },
-	{ name: '肇庆', value: 46 },
-	{ name: '大连', value: 47 },
-	{ name: '临汾', value: 47 },
-	{ name: '吴江', value: 47 },
-	{ name: '石嘴山', value: 49 },
-	{ name: '沈阳', value: 50 },
-	{ name: '苏州', value: 50 },
-	{ name: '茂名', value: 50 },
-	{ name: '嘉兴', value: 51 },
-	{ name: '长春', value: 51 },
-	{ name: '胶州', value: 52 },
-	{ name: '银川', value: 52 },
-	{ name: '张家港', value: 52 },
-	{ name: '三门峡', value: 53 },
-	{ name: '锦州', value: 54 },
-	{ name: '南昌', value: 54 },
-	{ name: '柳州', value: 54 },
-	{ name: '三亚', value: 54 },
-	{ name: '自贡', value: 56 },
-	{ name: '吉林', value: 56 },
-	{ name: '阳江', value: 57 },
-	{ name: '泸州', value: 57 },
-	{ name: '西宁', value: 57 },
-	{ name: '宜宾', value: 58 },
-	{ name: '呼和浩特', value: 58 },
-	{ name: '成都', value: 58 },
-	{ name: '大同', value: 58 },
-	{ name: '镇江', value: 59 },
-	{ name: '桂林', value: 59 },
-	{ name: '张家界', value: 59 },
-	{ name: '宜兴', value: 59 },
-	{ name: '北海', value: 60 },
-	{ name: '西安', value: 61 },
-	{ name: '金坛', value: 62 },
-	{ name: '东营', value: 62 },
-	{ name: '牡丹江', value: 63 },
-	{ name: '遵义', value: 63 },
-	{ name: '绍兴', value: 63 },
-	{ name: '扬州', value: 64 },
-	{ name: '常州', value: 64 },
-	{ name: '潍坊', value: 65 },
-	{ name: '重庆', value: 66 },
-	{ name: '台州', value: 67 },
-	{ name: '南京', value: 67 },
-	{ name: '滨州', value: 70 },
-	{ name: '贵阳', value: 71 },
-	{ name: '无锡', value: 71 },
-	{ name: '本溪', value: 71 },
-	{ name: '克拉玛依', value: 72 },
-	{ name: '渭南', value: 72 },
-	{ name: '马鞍山', value: 72 },
-	{ name: '宝鸡', value: 72 },
-	{ name: '焦作', value: 75 },
-	{ name: '句容', value: 75 },
-	{ name: '北京', value: 79 },
-	{ name: '徐州', value: 79 },
-	{ name: '衡水', value: 80 },
-	{ name: '包头', value: 80 },
-	{ name: '绵阳', value: 80 },
-	{ name: '乌鲁木齐', value: 84 },
-	{ name: '枣庄', value: 84 },
-	{ name: '杭州', value: 84 },
-	{ name: '淄博', value: 85 },
-	{ name: '鞍山', value: 86 },
-	{ name: '溧阳', value: 86 },
-	{ name: '库尔勒', value: 86 },
-	{ name: '安阳', value: 90 },
-	{ name: '开封', value: 90 },
-	{ name: '济南', value: 92 },
-	{ name: '德阳', value: 93 },
-	{ name: '温州', value: 95 },
-	{ name: '九江', value: 96 },
-	{ name: '邯郸', value: 98 },
-	{ name: '临安', value: 99 },
-	{ name: '兰州', value: 99 },
-	{ name: '沧州', value: 100 },
-	{ name: '临沂', value: 103 },
-	{ name: '南充', value: 104 },
-	{ name: '天津', value: 105 },
-	{ name: '富阳', value: 106 },
-	{ name: '泰安', value: 112 },
-	{ name: '诸暨', value: 112 },
-	{ name: '郑州', value: 113 },
-	{ name: '哈尔滨', value: 114 },
-	{ name: '聊城', value: 116 },
-	{ name: '芜湖', value: 117 },
-	{ name: '唐山', value: 119 },
-	{ name: '平顶山', value: 119 },
-	{ name: '邢台', value: 119 },
-	{ name: '德州', value: 120 },
-	{ name: '济宁', value: 120 },
-	{ name: '荆州', value: 127 },
-	{ name: '宜昌', value: 130 },
-	{ name: '义乌', value: 132 },
-	{ name: '丽水', value: 133 },
-	{ name: '洛阳', value: 134 },
-	{ name: '秦皇岛', value: 136 },
-	{ name: '株洲', value: 143 },
-	{ name: '石家庄', value: 147 },
-	{ name: '莱芜', value: 148 },
-	{ name: '常德', value: 152 },
-	{ name: '保定', value: 153 },
-	{ name: '湘潭', value: 154 },
-	{ name: '金华', value: 157 },
-	{ name: '岳阳', value: 169 },
-	{ name: '长沙', value: 175 },
-	{ name: '衢州', value: 177 },
-	{ name: '廊坊', value: 93 },
-	{ name: '菏泽', value: 194 },
-	{ name: '合肥', value: 229 },
-	{ name: '武汉', value: 273 },
-	{ name: '大庆', value: 279 },
-];
-
-// 地图经纬度数据
-export const echartsMapData = {
-	海门: [121.15, 31.89],
-	鄂尔多斯: [109.781327, 39.608266],
-	招远: [120.38, 37.35],
-	舟山: [122.207216, 29.985295],
-	齐齐哈尔: [123.97, 47.33],
-	盐城: [120.13, 33.38],
-	赤峰: [118.87, 42.28],
-	青岛: [120.33, 36.07],
-	乳山: [121.52, 36.89],
-	金昌: [102.188043, 38.520089],
-	泉州: [118.58, 24.93],
-	莱西: [120.53, 36.86],
-	日照: [119.46, 35.42],
-	胶南: [119.97, 35.88],
-	南通: [121.05, 32.08],
-	拉萨: [91.11, 29.97],
-	云浮: [112.02, 22.93],
-	梅州: [116.1, 24.55],
-	文登: [122.05, 37.2],
-	上海: [121.48, 31.22],
-	攀枝花: [101.718637, 26.582347],
-	威海: [122.1, 37.5],
-	承德: [117.93, 40.97],
-	厦门: [118.1, 24.46],
-	汕尾: [115.375279, 22.786211],
-	潮州: [116.63, 23.68],
-	丹东: [124.37, 40.13],
-	太仓: [121.1, 31.45],
-	曲靖: [103.79, 25.51],
-	烟台: [121.39, 37.52],
-	福州: [119.3, 26.08],
-	瓦房店: [121.979603, 39.627114],
-	即墨: [120.45, 36.38],
-	抚顺: [123.97, 41.97],
-	玉溪: [102.52, 24.35],
-	张家口: [114.87, 40.82],
-	阳泉: [113.57, 37.85],
-	莱州: [119.942327, 37.177017],
-	湖州: [120.1, 30.86],
-	汕头: [116.69, 23.39],
-	昆山: [120.95, 31.39],
-	宁波: [121.56, 29.86],
-	湛江: [110.359377, 21.270708],
-	揭阳: [116.35, 23.55],
-	荣成: [122.41, 37.16],
-	连云港: [119.16, 34.59],
-	葫芦岛: [120.836932, 40.711052],
-	常熟: [120.74, 31.64],
-	东莞: [113.75, 23.04],
-	河源: [114.68, 23.73],
-	淮安: [119.15, 33.5],
-	泰州: [119.9, 32.49],
-	南宁: [108.33, 22.84],
-	营口: [122.18, 40.65],
-	惠州: [114.4, 23.09],
-	江阴: [120.26, 31.91],
-	蓬莱: [120.75, 37.8],
-	韶关: [113.62, 24.84],
-	嘉峪关: [98.289152, 39.77313],
-	广州: [113.23, 23.16],
-	延安: [109.47, 36.6],
-	太原: [112.53, 37.87],
-	清远: [113.01, 23.7],
-	中山: [113.38, 22.52],
-	昆明: [102.73, 25.04],
-	寿光: [118.73, 36.86],
-	盘锦: [122.070714, 41.119997],
-	长治: [113.08, 36.18],
-	深圳: [114.07, 22.62],
-	珠海: [113.52, 22.3],
-	宿迁: [118.3, 33.96],
-	咸阳: [108.72, 34.36],
-	铜川: [109.11, 35.09],
-	平度: [119.97, 36.77],
-	佛山: [113.11, 23.05],
-	海口: [110.35, 20.02],
-	江门: [113.06, 22.61],
-	章丘: [117.53, 36.72],
-	肇庆: [112.44, 23.05],
-	大连: [121.62, 38.92],
-	临汾: [111.5, 36.08],
-	吴江: [120.63, 31.16],
-	石嘴山: [106.39, 39.04],
-	沈阳: [123.38, 41.8],
-	苏州: [120.62, 31.32],
-	茂名: [110.88, 21.68],
-	嘉兴: [120.76, 30.77],
-	长春: [125.35, 43.88],
-	胶州: [120.03336, 36.264622],
-	银川: [106.27, 38.47],
-	张家港: [120.555821, 31.875428],
-	三门峡: [111.19, 34.76],
-	锦州: [121.15, 41.13],
-	南昌: [115.89, 28.68],
-	柳州: [109.4, 24.33],
-	三亚: [109.511909, 18.252847],
-	自贡: [104.778442, 29.33903],
-	吉林: [126.57, 43.87],
-	阳江: [111.95, 21.85],
-	泸州: [105.39, 28.91],
-	西宁: [101.74, 36.56],
-	宜宾: [104.56, 29.77],
-	呼和浩特: [111.65, 40.82],
-	成都: [104.06, 30.67],
-	大同: [113.3, 40.12],
-	镇江: [119.44, 32.2],
-	桂林: [110.28, 25.29],
-	张家界: [110.479191, 29.117096],
-	宜兴: [119.82, 31.36],
-	北海: [109.12, 21.49],
-	西安: [108.95, 34.27],
-	金坛: [119.56, 31.74],
-	东营: [118.49, 37.46],
-	牡丹江: [129.58, 44.6],
-	遵义: [106.9, 27.7],
-	绍兴: [120.58, 30.01],
-	扬州: [119.42, 32.39],
-	常州: [119.95, 31.79],
-	潍坊: [119.1, 36.62],
-	重庆: [106.54, 29.59],
-	台州: [121.420757, 28.656386],
-	南京: [118.78, 32.04],
-	滨州: [118.03, 37.36],
-	贵阳: [106.71, 26.57],
-	无锡: [120.29, 31.59],
-	本溪: [123.73, 41.3],
-	克拉玛依: [84.77, 45.59],
-	渭南: [109.5, 34.52],
-	马鞍山: [118.48, 31.56],
-	宝鸡: [107.15, 34.38],
-	焦作: [113.21, 35.24],
-	句容: [119.16, 31.95],
-	北京: [116.46, 39.92],
-	徐州: [117.2, 34.26],
-	衡水: [115.72, 37.72],
-	包头: [110, 40.58],
-	绵阳: [104.73, 31.48],
-	乌鲁木齐: [87.68, 43.77],
-	枣庄: [117.57, 34.86],
-	杭州: [120.19, 30.26],
-	淄博: [118.05, 36.78],
-	鞍山: [122.85, 41.12],
-	溧阳: [119.48, 31.43],
-	库尔勒: [86.06, 41.68],
-	安阳: [114.35, 36.1],
-	开封: [114.35, 34.79],
-	济南: [117, 36.65],
-	德阳: [104.37, 31.13],
-	温州: [120.65, 28.01],
-	九江: [115.97, 29.71],
-	邯郸: [114.47, 36.6],
-	临安: [119.72, 30.23],
-	兰州: [103.73, 36.03],
-	沧州: [116.83, 38.33],
-	临沂: [118.35, 35.05],
-	南充: [106.110698, 30.837793],
-	天津: [117.2, 39.13],
-	富阳: [119.95, 30.07],
-	泰安: [117.13, 36.18],
-	诸暨: [120.23, 29.71],
-	郑州: [113.65, 34.76],
-	哈尔滨: [126.63, 45.75],
-	聊城: [115.97, 36.45],
-	芜湖: [118.38, 31.33],
-	唐山: [118.02, 39.63],
-	平顶山: [113.29, 33.75],
-	邢台: [114.48, 37.05],
-	德州: [116.29, 37.45],
-	济宁: [116.59, 35.38],
-	荆州: [112.239741, 30.335165],
-	宜昌: [111.3, 30.7],
-	义乌: [120.06, 29.32],
-	丽水: [119.92, 28.45],
-	洛阳: [112.44, 34.7],
-	秦皇岛: [119.57, 39.95],
-	株洲: [113.16, 27.83],
-	石家庄: [114.48, 38.03],
-	莱芜: [117.67, 36.19],
-	常德: [111.69, 29.05],
-	保定: [115.48, 38.85],
-	湘潭: [112.91, 27.87],
-	金华: [119.64, 29.12],
-	岳阳: [113.09, 29.37],
-	长沙: [113, 28.21],
-	衢州: [118.88, 28.97],
-	廊坊: [116.7, 39.53],
-	菏泽: [115.480656, 35.23375],
-	合肥: [117.27, 31.86],
-	武汉: [114.31, 30.52],
-	大庆: [125.03, 46.58],
-};

src/views/demo/fun/gridLayout/index.vue

@@ -1,61 +0,0 @@
-<template>
-	<div class="grid-layout-container">
-		<el-card shadow="hover" header="vue-grid-layout 拖拽布局演示">
-			<el-alert
-				title="感谢优秀的 `vue-grid-layout`，项目地址：https://github.com/jbaysolutions/vue-grid-layout"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<grid-layout
-				v-model:layout="layouts"
-				:col-num="12"
-				:row-height="30"
-				:is-draggable="true"
-				:is-resizable="true"
-				:is-mirrored="false"
-				:vertical-compact="true"
-				:margin="[10, 10]"
-				:use-css-transforms="true"
-			>
-				<grid-item v-for="item in layouts" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
-					<div class="w100 h100 flex">
-						<span class="flex-margin font14">{{ item.i }}</span>
-					</div>
-				</grid-item>
-			</grid-layout>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'FunGridLayout',
-	setup() {
-		const state = reactive({
-			layouts: [
-				{ x: 0, y: 0, w: 2, h: 2, i: '0' },
-				{ x: 2, y: 0, w: 2, h: 4, i: '1' },
-				{ x: 4, y: 0, w: 2, h: 5, i: '2' },
-				{ x: 6, y: 0, w: 2, h: 3, i: '3' },
-				{ x: 8, y: 0, w: 2, h: 3, i: '4' },
-				{ x: 10, y: 0, w: 2, h: 3, i: '5' },
-				{ x: 0, y: 5, w: 2, h: 5, i: '6' },
-			],
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.grid-layout-container {
-	.vue-grid-item {
-		background: var(--el-color-primary);
-		color: var(--el-color-white);
-	}
-}
-</style>

src/views/demo/fun/printJs/index.vue

@@ -1,41 +0,0 @@
-<template>
-	<div id="printRef">
-		<el-card shadow="hover" header="打印演示">
-			<el-alert
-				title="感谢优秀的 `print-js`，项目地址：https://github.com/crabbly/Print.js。请在打印弹窗 `更多设置` 中开启 `背景图形。`"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<el-button @click="onPrintJs" size="default" type="primary">
-				<SvgIcon name="iconfont icon-dayin" />
-				点击打印演示
-			</el-button>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-import printJs from 'print-js';
-export default defineComponent({
-	name: 'funPrintJs',
-	setup() {
-		const state = reactive({});
-		// 打印点击
-		const onPrintJs = () => {
-			printJs({
-				printable: 'printRef',
-				type: 'html',
-				css: ['//at.alicdn.com/t/font_2298093_o73r8wjdhlg.css', '//unpkg.com/element-plus/dist/index.css'],
-				scanStyles: false,
-				style: `@media print{.mb15{margin-bottom:15px;}.el-button--small i.iconfont{font-size: 12px !important;margin-right: 5px;}}`,
-			});
-		};
-		return {
-			onPrintJs,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/fun/qrcode/index.vue

@@ -1,78 +0,0 @@
-<template>
-	<div class="qrcode-container">
-		<el-card shadow="hover" header="qrcodejs2 二维码生成">
-			<el-alert
-				title="感谢优秀的 `qrcodejs2`，项目地址：https://github.com/davidshimjs/qrcodejs"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<div class="qrcode-img-warp">
-				<div class="mb30 mt30 qrcode-img">
-					<div class="qrcode" ref="qrcodeRef"></div>
-				</div>
-				<el-button type="primary" size="default" @click="onInitQrcode">
-					<el-icon>
-						<ele-Refresh />
-					</el-icon>
-					重新生成
-				</el-button>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
-import QRCode from 'qrcodejs2-fixes';
-export default defineComponent({
-	name: 'funQrcode',
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const state = reactive({
-			qrcode: '',
-		});
-		// 初始化生成二维码
-		const initQrcode = () => {
-			new QRCode(proxy.$refs.qrcodeRef, {
-				text: `https://lyt-top.gitee.io/vue-next-admin-preview/#/login?t=${new Date().getTime()}`,
-				width: 125,
-				height: 125,
-				colorDark: '#000000',
-				colorLight: '#ffffff',
-			});
-		};
-		// 重新生成
-		const onInitQrcode = () => {
-			proxy.$refs.qrcodeRef.innerHTML = '';
-			initQrcode();
-		};
-		// 页面加载时
-		onMounted(() => {
-			initQrcode();
-		});
-		return {
-			onInitQrcode,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.qrcode-container {
-	.qrcode-img-warp {
-		text-align: center;
-		.qrcode-img {
-			display: flex;
-			width: 100%;
-			height: 125px;
-			.qrcode {
-				margin: auto;
-				width: 125px;
-				height: 125px;
-			}
-		}
-	}
-}
-</style>

src/views/demo/fun/splitpanes/index.vue

@@ -1,53 +0,0 @@
-<template>
-	<div class="splitpanes-container">
-		<el-card shadow="hover" header="splitpanes 窗格拆分器">
-			<el-alert
-				title="感谢优秀的 `splitpanes`，项目地址：https://github.com/antoniandre/splitpanes"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<splitpanes class="default-theme" @resize="paneSize = $event[0].size" style="height: 500px">
-				<pane :size="32"> 1 </pane>
-				<pane :size="36">
-					<splitpanes class="default-theme" :horizontal="true">
-						<pane :size="100"> 2 </pane>
-						<pane :size="100"> 3 </pane>
-					</splitpanes>
-				</pane>
-				<pane :size="32"> 4 </pane>
-			</splitpanes>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-import { Splitpanes, Pane } from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css';
-export default defineComponent({
-	name: 'funSplitpanes',
-	components: { Splitpanes, Pane },
-	setup() {
-		const state = reactive({
-			paneSize: 50,
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.splitpanes__pane {
-	justify-content: center;
-	align-items: center;
-	display: flex;
-	position: relative;
-	font-size: 70px;
-	color: var(--el-color-primary-light-5);
-	border: 1px solid var(--el-border-color-lighter);
-	background-color: var(--el-color-primary) !important;
-}
-</style>

src/views/demo/fun/tagsView/index.vue

@@ -1,117 +0,0 @@
-<template>
-	<div class="fun-tagsview">
-		<NoticeBar
-			text="已删除非当前页 tagsView 演示，后续有时间可以再加回来！，tagsview 支持多标签（参数不同）、单标签共用（参数不同）"
-			background="#ecf5ff"
-			color="#409eff"
-		/>
-		<el-card shadow="hover" header="tagsView 当前页演示" class="mt15">
-			<div class="flex-warp">
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="primary" size="default" @click="refreshCurrentTagsView">
-							<el-icon>
-								<ele-RefreshRight />
-							</el-icon>
-							刷新当前页
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="info" size="default" @click="closeCurrentTagsView">
-							<el-icon>
-								<ele-Close />
-							</el-icon>
-							关闭当前页
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="warning" size="default" @click="closeOtherTagsView">
-							<el-icon>
-								<ele-CircleClose />
-							</el-icon>
-							关闭其它
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="danger" size="default" @click="closeAllTagsView">
-							<el-icon>
-								<ele-FolderDelete />
-							</el-icon>
-							全部关闭
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="success" size="default" @click="openCurrenFullscreen">
-							<el-icon>
-								<ele-FullScreen />
-							</el-icon>
-							当前页全屏
-						</el-button>
-					</div>
-				</div>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { getCurrentInstance, reactive, toRefs, defineComponent } from 'vue';
-import NoticeBar from '/@/components/noticeBar/index.vue';
-import { useRoute } from 'vue-router';
-export default defineComponent({
-	name: 'funTagsView',
-	components: { NoticeBar },
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const route = useRoute();
-		const state = reactive({});
-		// 0 刷新当前，1 关闭当前，2 关闭其它，3 关闭全部 4 当前页全屏
-		// 1、刷新当前 tagsView
-		const refreshCurrentTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 0, ...route }));
-		};
-		// 2、关闭当前 tagsView
-		const closeCurrentTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
-		};
-		// 3、关闭其它 tagsView
-		const closeOtherTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 2, ...route }));
-		};
-		// 4、关闭全部 tagsView
-		const closeAllTagsView = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 3, ...route }));
-		};
-		// 5、开启当前页面全屏
-		const openCurrenFullscreen = () => {
-			proxy.mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 4, ...route }));
-		};
-		return {
-			refreshCurrentTagsView,
-			closeCurrentTagsView,
-			closeOtherTagsView,
-			closeAllTagsView,
-			openCurrenFullscreen,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.fun-tagsview {
-	.fun-tagsview-from-item {
-		::v-deep(.el-form-item__content) {
-			margin-left: 0 !important;
-		}
-	}
-}
-</style>

src/views/demo/fun/wangEditor/index.vue

@@ -1,32 +0,0 @@
-<template>
-	<div class="editor-container">
-		<el-card shadow="hover" header="wangeditor富文本编辑器">
-			<el-alert
-				title="感谢优秀的 `wangeditor`，项目地址：https://github.com/wangeditor-team/wangEditor"
-				type="success"
-				:closable="false"
-				class="mb15"
-			></el-alert>
-			<Editor :is-disable="false" v-model="editorVal" />
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-import Editor from '/@/components/editor/index.vue';
-export default defineComponent({
-	name: 'funWangEditor',
-	components: { Editor },
-	setup() {
-		const state = reactive({
-			editorVal: '',
-		});
-		// 页面加载时
-		onMounted(() => {});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/make/noticeBar/index.vue

@@ -1,163 +0,0 @@
-<template>
-	<div class="notice-bar-container">
-		<el-card shadow="hover" header="滚动通知栏：默认">
-			<NoticeBar
-				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
-				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
-			/>
-		</el-card>
-
-		<el-card shadow="hover" header="滚动通知栏：设置样式" class="mt15">
-			<NoticeBar
-				text="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc
-				的后台开源免费模板库（vue2.x请切换vue-prev-admin分支），仓库地址：https://gitee.com/lyt-top/vue-next-admin"
-				leftIcon="iconfont icon-tongzhi2"
-				rightIcon="ele-ArrowRight"
-				background="#ecf5ff"
-				color="#409eff"
-			/>
-		</el-card>
-
-		<el-card shadow="hover" header="滚动通知栏：搭配 NoticeBar 和 Carousel 走马灯 组件可以实现垂直滚动的效果" class="mt15">
-			<NoticeBar :scrollable="true">
-				<el-carousel height="40px" direction="vertical" :autoplay="true" indicator-position="none" :interval="3000">
-					<el-carousel-item v-for="v in noticeList" :key="v">{{ v }} </el-carousel-item>
-				</el-carousel>
-			</NoticeBar>
-		</el-card>
-
-		<el-card shadow="hover" header="滚动通知栏：参数" class="mt15">
-			<el-table :data="tableData" style="width: 100%">
-				<el-table-column prop="a1" label="参数"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="可选值"> </el-table-column>
-				<el-table-column prop="a5" label="默认值"> </el-table-column>
-			</el-table>
-		</el-card>
-
-		<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
-			<el-table :data="tableData1" style="width: 100%">
-				<el-table-column prop="a1" label="事件名称"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="回调参数"> </el-table-column>
-			</el-table>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-import NoticeBar from '/@/components/noticeBar/index.vue';
-export default defineComponent({
-	name: 'makeNoticeBar',
-	components: { NoticeBar },
-	setup() {
-		const state = reactive({
-			noticeList: [
-				'🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等',
-				'适配手机、平板、pc的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）',
-				'仓库地址：https://gitee.com/lyt-top/vue-next-admin',
-				'演示地址：https://lyt-top.gitee.io/vue-next-admin-preview/#/login',
-			],
-			tableData: [
-				{
-					a1: 'mode',
-					a2: '通知栏模式，用于右侧 icon 图标点击',
-					a3: 'string',
-					a4: 'closeable / link',
-					a5: '',
-				},
-				{
-					a1: 'text',
-					a2: '通知文本内容，scrollable 为 false 时生效',
-					a3: 'string',
-					a4: '',
-					a5: '',
-				},
-				{
-					a1: 'color',
-					a2: '通知文本颜色',
-					a3: 'string',
-					a4: '',
-					a5: '#e6a23c',
-				},
-				{
-					a1: 'background',
-					a2: '通知背景色',
-					a3: 'string',
-					a4: '',
-					a5: '#fdf6ec',
-				},
-				{
-					a1: 'size',
-					a2: '字体大小，单位px',
-					a3: 'number / string',
-					a4: '',
-					a5: '14',
-				},
-				{
-					a1: 'height',
-					a2: '通知栏高度，单位px',
-					a3: 'number / string',
-					a4: '',
-					a5: '40',
-				},
-				{
-					a1: 'delay',
-					a2: '动画延迟时间 (s)',
-					a3: 'number / string',
-					a4: '',
-					a5: '1',
-				},
-				{
-					a1: 'speed',
-					a2: '滚动速率 (px/s)',
-					a3: 'number / string',
-					a4: '',
-					a5: '100',
-				},
-				{
-					a1: 'scrollable',
-					a2: '是否开启垂直滚动',
-					a3: 'boolean',
-					a4: 'true',
-					a5: 'false',
-				},
-				{
-					a1: 'leftIcon',
-					a2: '自定义左侧图标',
-					a3: 'string',
-					a4: '',
-					a5: '',
-				},
-				{
-					a1: 'rightIcon',
-					a2: '自定义右侧图标',
-					a3: 'string',
-					a4: '',
-					a5: '',
-				},
-			],
-			tableData1: [
-				{
-					a1: 'close',
-					a2: '通知栏模式（mode）closeable 时回调事件',
-					a3: 'function',
-					a4: '',
-				},
-				{
-					a1: 'link',
-					a2: '通知栏模式（mode）link 时回调事件',
-					a3: 'function',
-					a4: '',
-				},
-			],
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/make/selector/index.vue

@@ -1,125 +0,0 @@
-<template>
-	<div class="selector-container">
-		<el-card shadow="hover" header="图标选择器(宽度自动)：">
-			<IconSelector @get="onGetIcon" @clear="onClearIcon" v-model="modelIcon" />
-		</el-card>
-
-		<el-card shadow="hover" header="图标选择器(宽度自动)：参数" class="mt15">
-			<el-table :data="tableData" style="width: 100%">
-				<el-table-column prop="a1" label="参数"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="可选值"> </el-table-column>
-				<el-table-column prop="a5" label="默认值"> </el-table-column>
-			</el-table>
-		</el-card>
-
-		<el-card shadow="hover" header="图标选择器(宽度自动)：事件" class="mt15">
-			<el-table :data="tableData1" style="width: 100%">
-				<el-table-column prop="a1" label="事件名称"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="回调参数"> </el-table-column>
-			</el-table>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-import IconSelector from '/@/components/iconSelector/index.vue';
-export default defineComponent({
-	name: 'makeSelector',
-	components: { IconSelector },
-	setup() {
-		const state = reactive({
-			modelIcon: '',
-			tableData: [
-				{
-					a1: 'prepend',
-					a2: '输入框前置内容，只能字体图标',
-					a3: 'string',
-					a4: '',
-					a5: 'ele-Pointer',
-				},
-				{
-					a1: 'placeholder',
-					a2: '输入框占位文本',
-					a3: 'string',
-					a4: '',
-					a5: '请输入内容搜索图标或者选择图标',
-				},
-				{
-					a1: 'size',
-					a2: '尺寸',
-					a3: 'string',
-					a4: 'large / default / small',
-					a5: 'default',
-				},
-				{
-					a1: 'title',
-					a2: '弹窗标题',
-					a3: 'string',
-					a4: '',
-					a5: '请选择图标',
-				},
-				{
-					a1: 'type',
-					a2: 'icon 图标类型',
-					a3: 'string',
-					a4: 'ali / ele / awe / all',
-					a5: 'ele',
-				},
-				{
-					a1: 'disabled',
-					a2: '禁用',
-					a3: 'boolean',
-					a4: 'true',
-					a5: 'false',
-				},
-				{
-					a1: 'clearable',
-					a2: '是否可清空',
-					a3: 'boolean',
-					a4: 'false',
-					a5: 'true',
-				},
-				{
-					a1: 'emptyDescription',
-					a2: '自定义空状态描述文字',
-					a3: 'String',
-					a4: '',
-					a5: '无相关图标',
-				},
-			],
-			tableData1: [
-				{
-					a1: 'get',
-					a2: '获取当前点击的 icon 图标',
-					a3: 'function',
-					a4: '(icon: string)',
-				},
-				{
-					a1: 'clear',
-					a2: '清空当前点击的 icon 图标',
-					a3: 'function',
-					a4: '(icon: string)',
-				},
-			],
-		});
-		// 获取当前点击的 icon 图标
-		const onGetIcon = (icon: string) => {
-			console.log(icon);
-		};
-		// 清空当前点击的 icon 图标
-		const onClearIcon = (icon: string) => {
-			console.log(icon);
-		};
-		return {
-			onGetIcon,
-			onClearIcon,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/make/svgDemo/index.vue

@@ -1,60 +0,0 @@
-<template>
-	<div class="svg-demo-container">
-		<el-card shadow="hover" header="svgIcon：演示（支持本地svg）">
-			<SvgIcon name="iconfont icon-shuju1" color="red" :size="30" />
-			<SvgIcon name="ele-Trophy" color="var(--el-color-primary)" :size="30" />
-			<SvgIcon name="fa fa-flag-checkered" color="#09f" :size="30" />
-			<SvgIcon :name="logoMini" color="#09f" :size="30" />
-		</el-card>
-		<el-card shadow="hover" header="svgIcon：参数" class="mt15">
-			<el-table :data="tableData" style="width: 100%">
-				<el-table-column prop="a1" label="参数"> </el-table-column>
-				<el-table-column prop="a2" label="说明"> </el-table-column>
-				<el-table-column prop="a3" label="类型"> </el-table-column>
-				<el-table-column prop="a4" label="可选值"> </el-table-column>
-				<el-table-column prop="a5" label="默认值"> </el-table-column>
-			</el-table>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-
-import logoMini from '/@/assets/logo-mini.svg';
-
-export default defineComponent({
-	name: 'makeSvgDemo',
-	setup() {
-		const state = reactive({
-			tableData: [
-				{
-					a1: 'name',
-					a2: 'svg 图标组件名字 / svg 路径 url',
-					a3: 'string',
-					a4: '',
-					a5: '',
-				},
-				{
-					a1: 'size',
-					a2: 'svg 大小',
-					a3: 'number',
-					a4: '',
-					a5: 14,
-				},
-				{
-					a1: 'color',
-					a2: 'svg 颜色',
-					a3: 'string',
-					a4: '',
-					a5: '',
-				},
-			],
-		});
-		return {
-			logoMini,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/menu/menu1/menu11/index.vue

@@ -1,20 +0,0 @@
-<template>
-	<div>
-		<el-input v-model="val" placeholder="menu11：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'menu11',
-	setup() {
-		const state = reactive({
-			val: '',
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/menu/menu1/menu12/menu121/index.vue

@@ -1,20 +0,0 @@
-<template>
-	<div>
-		<el-input v-model="val" placeholder="menu121：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'menu121',
-	setup() {
-		const state = reactive({
-			val: '',
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/menu/menu1/menu12/menu122/index.vue

@@ -1,20 +0,0 @@
-<template>
-	<div>
-		<el-input v-model="val" placeholder="menu122：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'menu122',
-	setup() {
-		const state = reactive({
-			val: '',
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/menu/menu1/menu13/index.vue

@@ -1,26 +0,0 @@
-<template>
-	<div>
-		<el-input v-model="val" placeholder="menu13：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onActivated, onMounted, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'menu13',
-	setup() {
-		const state = reactive({
-			val: '',
-		});
-		onMounted(() => {
-			console.log(2222);
-		});
-		onActivated(() => {
-			console.log(1111);
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/menu/menu2/index.vue

@@ -1,20 +0,0 @@
-<template>
-	<div>
-		<el-input v-model="val" placeholder="menu2：请输入内容测试路由缓存"></el-input>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'menu2',
-	setup() {
-		const state = reactive({
-			val: '',
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/awesome/index.vue

@@ -1,86 +0,0 @@
-<template>
-	<div class="awesome-container">
-		<el-card shadow="hover" :header="`fontawesome 字体图标(自动载入)：${sheetsIconList.length - 24}个`">
-			<el-row class="iconfont-row">
-				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
-					<div class="iconfont-warp">
-						<div class="flex-margin">
-							<div class="iconfont-warp-value">
-								<i :class="v" class="fa"></i>
-							</div>
-							<div class="iconfont-warp-label mt10">{{ v }}</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
-export default defineComponent({
-	name: 'pagesAwesome',
-	setup() {
-		const state = reactive({
-			sheetsIconList: [],
-		});
-		// 初始化获取 css 样式，这里使用fontawesome的图标(记得加上前缀 `fa`)，其它第三方请自行做判断
-		const initGetStyleSheets = () => {
-			initIconfont.awe().then((res: any) => (state.sheetsIconList = res));
-		};
-		// 页面加载时
-		onMounted(() => {
-			initGetStyleSheets();
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.awesome-container {
-	.iconfont-row {
-		border-top: 1px solid var(--next-border-color-light);
-		border-left: 1px solid var(--next-border-color-light);
-		.iconfont-warp {
-			text-align: center;
-			border-right: 1px solid var(--next-border-color-light);
-			border-bottom: 1px solid var(--next-border-color-light);
-			height: 120px;
-			overflow: hidden;
-			display: flex;
-			transition: all 0.3s ease;
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				cursor: pointer;
-				transition: all 0.3s ease;
-				.iconfont-warp-value {
-					i {
-						color: var(--el-color-primary);
-						transition: all 0.3s ease;
-					}
-				}
-				.iconfont-warp-label {
-					color: var(--el-color-primary);
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-value {
-				i {
-					color: #606266;
-					font-size: 32px;
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-label {
-				color: #99a9bf;
-				transition: all 0.3s ease;
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/drag/index.vue

@@ -1,65 +0,0 @@
-<template>
-	<div class="drag-container">
-		<el-card shadow="hover" header="拖动指令效果（v-drag）作用于 Dialog 对话框">
-			<el-button type="primary" @click="dialogVisible = true" size="default">
-				<el-icon>
-					<ele-Pointer />
-				</el-icon>
-				点击打开 Dialog
-			</el-button>
-		</el-card>
-
-		<el-card shadow="hover" header="自定义div" class="mt15">
-			<div class="drag-dom">
-				<div class="drag-header">
-					<el-button type="success" size="default" v-drag="['.drag-container .drag-dom', '.drag-container .drag-header']">
-						<el-icon>
-							<ele-Pointer />
-						</el-icon>
-						按住进行拖动测试
-					</el-button>
-				</div>
-			</div>
-		</el-card>
-
-		<el-dialog v-model="dialogVisible" width="769px">
-			<template #title>
-				<div v-drag="['.drag-container .el-dialog', '.drag-container .el-dialog__header']">拖动指令效果（v-drag）</div>
-			</template>
-			<p>鼠标放标题头进行 Dialog 对话框拖动</p>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="dialogVisible = false" size="default">取 消</el-button>
-					<el-button type="primary" @click="dialogVisible = false" size="default">确 定</el-button>
-				</span>
-			</template>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesDrag',
-	setup() {
-		const state = reactive({
-			dialogVisible: false,
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.drag-container {
-	.drag-dom {
-		position: relative;
-		display: inline-block;
-		.drag-header {
-			display: inline-block;
-		}
-	}
-}
-</style>

src/views/demo/pages/dynamicForm/index.vue

@@ -1,204 +0,0 @@
-<template>
-	<div class="dynamic-form-container">
-		<el-card shadow="hover" header="动态复杂表单">
-			<el-form :model="form" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
-				<el-row :gutter="35">
-					<el-col
-						:xs="val.xs"
-						:sm="val.sm"
-						:md="val.md"
-						:lg="val.md"
-						:xl="val.xl"
-						class="mb20"
-						v-show="val.isShow"
-						v-for="(val, key) in formData"
-						:key="key"
-					>
-						<template v-if="val.type !== ''">
-							<el-form-item
-								:label="val.label"
-								:prop="val.prop"
-								:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
-								v-if="val.type !== ''"
-							>
-								<el-input
-									v-model="form[val.prop]"
-									:placeholder="val.placeholder"
-									clearable
-									v-if="val.type === 'input'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								></el-input>
-								<el-date-picker
-									v-model="form[val.prop]"
-									type="date"
-									:placeholder="val.placeholder"
-									v-else-if="val.type === 'date'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								>
-								</el-date-picker>
-								<el-select
-									v-model="form[val.prop]"
-									:placeholder="val.placeholder"
-									v-else-if="val.type === 'select'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								>
-									<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-								</el-select>
-								<el-input
-									type="textarea"
-									v-model="form[val.prop]"
-									:placeholder="val.placeholder"
-									clearable
-									v-if="val.type === 'textarea'"
-									style="width: 100%"
-									:disabled="val.disabled"
-								></el-input>
-							</el-form-item>
-						</template>
-						<template v-else>
-							<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
-								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-									<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
-										<template #label>
-											<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
-												<el-icon>
-													<ele-Plus />
-												</el-icon>
-											</el-button>
-											<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
-												<el-icon>
-													<ele-Delete />
-												</el-icon>
-											</el-button>
-											<span class="ml10">年度</span>
-										</template>
-										<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-									<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
-										<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
-									</el-form-item>
-								</el-col>
-								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
-									<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
-										<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
-									</el-form-item>
-								</el-col>
-							</el-row>
-						</template>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
-		<el-row class="flex mt15">
-			<div class="flex-margin">
-				<el-button size="default" @click="onResetForm">
-					<el-icon>
-						<ele-RefreshRight />
-					</el-icon>
-					重置表单
-				</el-button>
-				<el-button size="default" type="primary" @click="onSubmitForm">
-					<SvgIcon name="iconfont icon-shuxing" />
-					验证表单
-				</el-button>
-			</div>
-		</el-row>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, getCurrentInstance, defineComponent } from 'vue';
-import { formData } from './mock';
-
-// 定义接口来定义对象的类型
-interface FormDataOptions {
-	label: string;
-	value: string;
-}
-interface FormDataState {
-	label: string;
-	prop: string;
-	placeholder: string;
-	clearable: boolean;
-	disabled: boolean;
-	required: boolean;
-	type: string;
-	i18n: boolean;
-	i18nText: string;
-	isShow: boolean;
-	xs: number;
-	sm: number;
-	md: number;
-	lg: number;
-	xl: number;
-	options?: FormDataOptions[];
-}
-interface DynamicFormState {
-	formData: FormDataState[];
-	form: any;
-}
-
-export default defineComponent({
-	name: 'pagesDynamicForm',
-	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const state = reactive<DynamicFormState>({
-			formData,
-			form: {
-				name: '',
-				email: '',
-				autograph: '',
-				occupation: '',
-				list: [
-					{
-						year: '',
-						month: '',
-						day: '',
-					},
-				],
-				remarks: '',
-			},
-		});
-		// 新增行
-		const onAddRow = () => {
-			state.form.list.push({
-				year: '',
-				month: '',
-				day: '',
-			});
-		};
-		// 删除行
-		const onDelRow = (k: number) => {
-			state.form.list.splice(k, 1);
-		};
-		// 表单验证
-		const onSubmitForm = () => {
-			proxy.$refs.formRulesOneRef.validate((valid: boolean) => {
-				if (valid) {
-					proxy.$message.success('验证成功');
-				} else {
-					return false;
-				}
-			});
-		};
-		// 重置表单
-		const onResetForm = () => {
-			proxy.$refs.formRulesOneRef.resetFields();
-		};
-		// 页面加载时
-		onMounted(() => {});
-		return {
-			onAddRow,
-			onDelRow,
-			onSubmitForm,
-			onResetForm,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/dynamicForm/mock.ts

@@ -1,119 +0,0 @@
-// 表单数据选项(自行扩展)
-export const formData = [
-	{
-		label: '姓名',
-		prop: 'name',
-		placeholder: '请输入姓名',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'input',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '邮箱',
-		prop: 'email',
-		placeholder: '请输入用户邮箱',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'input',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '登陆时间',
-		prop: 'autograph',
-		placeholder: '选择时间',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'date',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '职务',
-		prop: 'occupation',
-		placeholder: '请选择职务',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'select',
-		i18n: false,
-		i18nText: '',
-		options: [
-			{
-				label: '计算机 / 互联网 / 通信',
-				value: '1',
-			},
-			{
-				label: '生产 / 工艺 / 制造',
-				value: '2',
-			},
-			{
-				label: '医疗 / 护理 / 制药',
-				value: '3',
-			},
-		],
-		isShow: true,
-		xs: 24,
-		sm: 12,
-		md: 8,
-		lg: 6,
-		xl: 4,
-	},
-	{
-		label: '',
-		prop: '',
-		placeholder: '',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: '',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 24,
-		md: 24,
-		lg: 24,
-		xl: 24,
-	},
-	{
-		label: '备注',
-		prop: 'remarks',
-		placeholder: '请输入',
-		clearable: true,
-		disabled: false,
-		required: true,
-		type: 'textarea',
-		i18n: false,
-		i18nText: '',
-		isShow: true,
-		xs: 24,
-		sm: 24,
-		md: 24,
-		lg: 24,
-		xl: 24,
-	},
-];

src/views/demo/pages/element/index.vue

@@ -1,88 +0,0 @@
-<template>
-	<div class="element-container">
-		<el-card shadow="hover" :header="`element plus 字体图标(自动载入，增加了 ele- 前缀，使用时：ele-Aim)：${sheetsIconList.length}个`">
-			<el-row class="iconfont-row">
-				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
-					<div class="iconfont-warp">
-						<div class="flex-margin">
-							<div class="iconfont-warp-value">
-								<SvgIcon :name="v" :size="30" />
-							</div>
-							<div class="iconfont-warp-label mt10">{{ v }}</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
-export default defineComponent({
-	name: 'pagesElement',
-	setup() {
-		const state = reactive({
-			sheetsIconList: [],
-		});
-		// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
-		const initGetStyleSheets = () => {
-			initIconfont.ele().then((res: any) => {
-				state.sheetsIconList = res;
-			});
-		};
-		// 页面加载时
-		onMounted(() => {
-			initGetStyleSheets();
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.element-container {
-	.iconfont-row {
-		border-top: 1px solid var(--next-border-color-light);
-		border-left: 1px solid var(--next-border-color-light);
-		.iconfont-warp {
-			text-align: center;
-			border-right: 1px solid var(--next-border-color-light);
-			border-bottom: 1px solid var(--next-border-color-light);
-			height: 120px;
-			overflow: hidden;
-			display: flex;
-			transition: all 0.3s ease;
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				cursor: pointer;
-				transition: all 0.3s ease;
-				.iconfont-warp-value {
-					i {
-						color: var(--el-color-primary);
-						transition: all 0.3s ease;
-					}
-				}
-				.iconfont-warp-label {
-					color: var(--el-color-primary);
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-value {
-				i {
-					color: #606266;
-					font-size: 32px;
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-label {
-				color: #99a9bf;
-				transition: all 0.3s ease;
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/filtering/details.vue

@@ -1,34 +0,0 @@
-<template>
-	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="layout-view-bg-white">
-			<div class="w100 h100 flex">
-				<div class="flex-margin color-primary">filtering-details 测试界面</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { useStore } from '/@/store/index';
-export default defineComponent({
-	name: 'pagesFilteringDetails',
-	setup() {
-		const store = useStore();
-		// 设置主内容的高度
-		const initTagViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		return {
-			initTagViewHeight,
-		};
-	},
-});
-</script>

src/views/demo/pages/filtering/details1.vue

@@ -1,34 +0,0 @@
-<template>
-	<div :style="{ height: `calc(100vh - ${initTagViewHeight}` }">
-		<div class="layout-view-bg-white">
-			<div class="w100 h100 flex">
-				<div class="flex-margin color-primary">测试界面</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import { useStore } from '/@/store/index';
-export default defineComponent({
-	name: 'pagesFilteringDetails1',
-	setup() {
-		const store = useStore();
-		// 设置主内容的高度
-		const initTagViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		return {
-			initTagViewHeight,
-		};
-	},
-});
-</script>

src/views/demo/pages/filtering/index.vue

@@ -1,354 +0,0 @@
-<template>
-	<div class="filtering">
-		<el-card
-			shadow="hover"
-			class="filtering-list br-top-no"
-			v-loading="tableData.loading"
-			element-loading-text="加载中..."
-			element-loading-background="rgba(255, 255, 255, 0.1)"
-			:class="{ 'min-h-360': tableData.data.length <= 0 }"
-		>
-			<div
-				v-for="(val, key) in filtering"
-				:key="key"
-				:ref="
-					(el) => {
-						if (el) dlRefs[key] = el;
-					}
-				"
-				class="filtering-list-flex"
-			>
-				<div class="filtering-list-title">{{ val.title }}</div>
-				<div class="filtering-list-item" :style="{ height: val.isMore ? 'auto' : '50px' }">
-					<span class="span" :class="v.active ? 'dd-active' : ''" v-for="(v, k) in val.children" :key="k" @click="onSelItem(val, v)">{{
-						v.label
-					}}</span>
-					<div class="dd-more" v-if="val.isShowMore" @click="val.isMore = !val.isMore">
-						<span>{{ val.isMore ? '收起' : '展开' }}</span>
-						<i :class="val.isMore ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
-					</div>
-				</div>
-			</div>
-			<div class="flex-warp mt15 mb15" v-if="tableData.data.length > 0">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
-						<div class="flex-warp-item">
-							<div class="flex-warp-item-box">
-								<div class="item-img">
-									<img :src="v.img" />
-								</div>
-								<div class="item-txt">
-									<div class="item-txt-title">{{ v.title }}</div>
-									<div class="item-txt-other">
-										<div style="width: 100%">
-											<div class="item-txt-msg mb10">
-												<span>评价 {{ v.evaluate }}</span>
-												<span class="ml10">收藏 {{ v.collection }}</span>
-											</div>
-											<div class="item-txt-msg item-txt-price">
-												<span class="font-price">
-													<span>￥</span>
-													<span class="font">{{ v.price }}</span>
-												</span>
-												<span>月销{{ v.monSales }}笔</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<div v-else class="filtering-no-data">
-				<div class="no-data-box">
-					<i class="el-icon-search"></i>
-					<div class="no-txt">暂无数据</div>
-				</div>
-			</div>
-			<template v-if="tableData.data.length > 0">
-				<el-pagination
-					style="text-align: right"
-					background
-					@size-change="onHandleSizeChange"
-					@current-change="onHandleCurrentChange"
-					:page-sizes="[10, 20, 30]"
-					:current-page="tableData.param.pageNum"
-					:page-size="tableData.param.pageSize"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="tableData.total"
-				>
-				</el-pagination>
-			</template>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-import { filtering, filterList } from './mock';
-export default defineComponent({
-	name: 'pagesFiltering',
-	setup() {
-		const dlRefs: any = ref([]);
-		const router = useRouter();
-		const state = reactive({
-			filtering,
-			tableData: {
-				data: filterList,
-				total: 99,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-				},
-			},
-		});
-		// 页面加载时
-		onMounted(() => {
-			initBtnToggle();
-			window.onresize = () => {
-				initBtnToggle();
-			};
-		});
-		// 初始化 `收起、展开` 按钮
-		const initBtnToggle = () => {
-			nextTick(() => {
-				const els = dlRefs.value;
-				els.map((v: any, k: number) => {
-					v.scrollHeight < v.lastChild.scrollHeight ? (state.filtering[k].isShowMore = true) : (state.filtering[k].isShowMore = false);
-				});
-			});
-		};
-		// 过滤当前选中的数据
-		const onSelItem = (val: any, v: any) => {
-			val.children.map((v: any) => (v.active = false));
-			v.active = true;
-			let arr = [];
-			state.filtering.map((item: any) => {
-				item.children.map((chil: any) => {
-					if (chil.active) {
-						arr.push({
-							...item,
-							children: [{ ...chil }],
-						});
-					}
-				});
-			});
-			state.tableData.loading = true;
-			setTimeout(() => {
-				state.tableData.loading = false;
-			}, 500);
-		};
-		// 当前列表项点击
-		const onTableItemClick = (v: any) => {
-			if (v.id === 1) {
-				router.push({
-					path: '/pages/filtering/details',
-					query: { id: v.id },
-				});
-			} else {
-				router.push({
-					path: '/pages/filtering/details1',
-					query: { id: v.id },
-				});
-			}
-		};
-		// 分页点击
-		const onHandleSizeChange = (val: number) => {
-			state.tableData.param.pageSize = val;
-		};
-		// 分页点击
-		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.pageNum = val;
-		};
-		return {
-			dlRefs,
-			onSelItem,
-			onTableItemClick,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.filtering {
-	.filtering-list {
-		overflow: hidden;
-		border-bottom: none !important;
-		.filtering-list-flex {
-			&:last-of-type {
-				.filtering-list-item {
-					border-bottom: none !important;
-				}
-			}
-			.filtering-list-title {
-				float: left;
-				width: 64px;
-				font-weight: 700;
-				position: relative;
-				color: #909399;
-				margin: 15px 0;
-				&:after {
-					content: '';
-					position: absolute;
-					border: 1px solid #909399;
-					border-width: 0 1px 1px 0;
-					width: 4px;
-					height: 4px;
-					transform: rotate(-45deg) translateY(-50%);
-					right: 10px;
-					top: 50%;
-				}
-			}
-			.filtering-list-item {
-				border-bottom: 1px dotted var(--next-border-color-light);
-				margin-left: 64px;
-				overflow: hidden;
-				position: relative;
-				.span {
-					color: #8d8d91;
-					font-size: 14px;
-					float: left;
-					padding: 0 15px;
-					margin: 15px 0;
-					&:hover {
-						color: var(--el-color-primary);
-						cursor: pointer;
-					}
-				}
-				.dd-active {
-					color: var(--el-color-primary);
-				}
-				.dd-more {
-					font-size: 12px;
-					position: absolute;
-					right: 0;
-					top: 16px;
-					color: #a5a5a5;
-					&:hover {
-						cursor: pointer;
-						color: #8d8d91;
-					}
-				}
-			}
-		}
-	}
-	.br-top-no {
-		border-top: none;
-		.flex-warp {
-			display: flex;
-			flex-wrap: wrap;
-			align-content: flex-start;
-			margin: 0 -5px;
-			.flex-warp-item {
-				padding: 5px;
-				width: 100%;
-				height: 360px;
-				.flex-warp-item-box {
-					border: 1px solid var(--next-border-color-light);
-					width: 100%;
-					height: 100%;
-					border-radius: 2px;
-					display: flex;
-					flex-direction: column;
-					transition: all 0.3s ease;
-					&:hover {
-						cursor: pointer;
-						border: 1px solid var(--el-color-primary);
-						transition: all 0.3s ease;
-						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-						.item-txt-title {
-							color: var(--el-color-primary) !important;
-							transition: all 0.3s ease;
-						}
-						.item-img {
-							img {
-								transition: all 0.3s ease;
-								transform: translateZ(0) scale(1.05);
-							}
-						}
-					}
-					.item-img {
-						width: 100%;
-						height: 215px;
-						overflow: hidden;
-						img {
-							transition: all 0.3s ease;
-							width: 100%;
-							height: 100%;
-						}
-					}
-					.item-txt {
-						flex: 1;
-						padding: 15px;
-						display: flex;
-						flex-direction: column;
-						overflow: hidden;
-						.item-txt-title {
-							text-overflow: ellipsis;
-							overflow: hidden;
-							-webkit-line-clamp: 2;
-							-webkit-box-orient: vertical;
-							display: -webkit-box;
-							color: #666666;
-							transition: all 0.3s ease;
-							&:hover {
-								color: var(--el-color-primary);
-								text-decoration: underline;
-								transition: all 0.3s ease;
-							}
-						}
-						.item-txt-other {
-							flex: 1;
-							align-items: flex-end;
-							display: flex;
-							.item-txt-msg {
-								font-size: 12px;
-								color: #8d8d91;
-							}
-							.item-txt-price {
-								display: flex;
-								justify-content: space-between;
-								align-items: center;
-								.font-price {
-									color: #ff5000;
-									.font {
-										font-size: 22px;
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-		::v-deep(.el-card__body) {
-			height: 100%;
-			.filtering-no-data {
-				display: flex;
-				height: 100%;
-				.no-data-box {
-					color: #cccccc;
-					margin: auto;
-					i {
-						font-size: 70px;
-					}
-					.no-txt {
-						font-size: 14px;
-						text-align: center;
-						margin-top: 15px;
-					}
-				}
-			}
-		}
-	}
-	.min-h-360 {
-		height: 360px;
-	}
-}
-</style>

src/views/demo/pages/filtering/mock.ts

@@ -1,201 +0,0 @@
-// 导航数据
-export const filtering = [
-	{
-		title: '权限',
-		isMore: false,
-		isShowMore: false,
-		id: 0,
-		children: [
-			{
-				id: '01',
-				label: '全部',
-				active: true,
-			},
-			{
-				id: '02',
-				label: '普通用户',
-				active: false,
-			},
-			{
-				id: '03',
-				label: '管理员',
-				active: false,
-			},
-		],
-	},
-	{
-		title: '布局',
-		isMore: false,
-		isShowMore: false,
-		id: 1,
-		children: [
-			{
-				id: 11,
-				label: '全部',
-				active: true,
-			},
-			{
-				id: 12,
-				label: '默认',
-				active: false,
-			},
-			{
-				id: 13,
-				label: '经典',
-				active: false,
-			},
-			{
-				id: 14,
-				label: '横向',
-				active: false,
-			},
-			{
-				id: 15,
-				label: '分栏',
-				active: false,
-			},
-		],
-	},
-	{
-		title: '配置',
-		isMore: false,
-		isShowMore: false,
-		id: 2,
-		children: [
-			{
-				id: 21,
-				label: '全部',
-				active: true,
-			},
-			{
-				id: 22,
-				label: '开启 Breadcrumb',
-				active: false,
-			},
-			{
-				id: 23,
-				label: '开启 Tags-View',
-				active: false,
-			},
-			{
-				id: 24,
-				label: '固定 Header',
-				active: false,
-			},
-			{
-				id: 25,
-				label: '侧边栏 Logo',
-				active: false,
-			},
-			{
-				id: 26,
-				label: '开启折叠 NavMenu',
-				active: false,
-			},
-			{
-				id: 27,
-				label: '开启一个 NavMenu 展开',
-				active: false,
-			},
-			{
-				id: 28,
-				label: '登录用户头像',
-				active: false,
-			},
-		],
-	},
-];
-
-// 列表数据
-export const filterList = [
-	{
-		img: 'http://news.sznews.com/pic/2020-08/14/9d9c9a60-f0af-41aa-b617-683b07c87642.jpg',
-		title: '嘉陵江2020年第1号洪水”在嘉陵江支流涪江形成',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-	},
-	{
-		img: 'http://www.sznews.com/news/pic/2020-08/13/0ea47d3c-feb9-4bd7-8597-a8a373aa6340c6ec12c7-3b33-4528-91a6-85ec8ca1df67_watermark.png',
-		title: '让《民法典》走近群众 盐田街道开展人民调解宣传活动',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/12/a08d6eb0-1d53-4f76-a313-ad3e5d701f98.jpg',
-		title: '记者手记：可可西里，“挪”向“藏羚羊大产房”的14个半小时',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/11/43cc0e14-9bca-45b9-9a8b-342e09d6a4c7.jpg',
-		title: '以优异成绩庆祝深圳经济特区建立40周年',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/11/a4dc322b-68ec-40e6-8906-3124142c3e49.jpg',
-		title: '草原上的“太阳姑娘”',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-	},
-	{
-		img: 'http://www.sznews.com/zhuanti/pic/2020-08/07/57f087b4-4812-46cc-adb9-ead73621284e.png',
-		title: '奇观天下|带你走进非洲野生动物观光第一目的地',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2020-09/02/t2_(101X54X600X335)7cd39301-d9cf-45f1-91c3-9575b1e5ce0e.jpg.2',
-		title: '五角大楼发布“中国军力报告” 华春莹： 罔顾事实，充满偏见',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2020-09/02/b8b41d9c-0508-4498-8d37-6e597493769f.jpg',
-		title: '最新地铁消息汇总：4号线北延、2号线三期、8号线一期等今年通车',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-	},
-	{
-		img: 'http://www.sznews.com/photo/pic/2020-08/10/1635374c-f4d6-475c-ac47-1334176f365d.png',
-		title: '9月1日深圳新增5例无症状感染者！钟南山这段话冲上热搜！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-	},
-	{
-		img: 'http://www.sznews.com/news/pic/2020-08/13/646e5458-92b7-4636-9940-9b0799babfe1.png',
-		title: '全能“小福宝” 为文明社区建设添砖加瓦',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-	},
-];

src/views/demo/pages/formAdapt/index.vue

@@ -1,113 +0,0 @@
-<template>
-	<div class="form-adapt-container">
-		<el-card shadow="hover" header="表单自适应演示(改变窗口查看效果)">
-			<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="姓名">
-							<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="用户归属部门">
-							<el-input v-model="form.email" placeholder="请输入用户归属部门" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="登陆账户名">
-							<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="职务">
-							<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
-								<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
-								<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
-								<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="手机">
-							<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="性别">
-							<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
-								<el-option label="男" value="1"></el-option>
-								<el-option label="女" value="2"></el-option>
-							</el-select>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="登录密码">
-							<el-input v-model="form.phone1" placeholder="请输入登录密码" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="权限角色">
-							<el-input v-model="form.phone2" placeholder="请输入权限角色" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="创建用户">
-							<el-input v-model="form.phone3" placeholder="请输入创建用户" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="修改用户">
-							<el-input v-model="form.phone4" placeholder="请输入修改用户" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="所属用户">
-							<el-input v-model="form.phone5" placeholder="请输入所属用户" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-						<el-form-item label="所属部门">
-							<el-input v-model="form.phone6" placeholder="请输入所属部门" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-						<el-form-item>
-							<el-button type="primary">
-								<SvgIcon name="iconfont icon-biaodan" />
-								更新个人信息
-							</el-button>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesFormAdapt',
-	setup() {
-		const state = reactive({
-			form: {
-				name: '',
-				email: '',
-				autograph: '',
-				occupation: '',
-				phone: '',
-				sex: '',
-				phone1: '',
-				phone2: '',
-				phone3: '',
-				phone4: '',
-				phone5: '',
-				phone6: '',
-			},
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/formI18n/index.vue

@@ -1,58 +0,0 @@
-<template>
-	<div class="form-i18n-container">
-		<el-card shadow="hover" header="表单国际化演示(不适用于动态项 form-item)">
-			<div style="text-align: center; margin-top: 15px">
-				<el-radio-group v-model="radio" size="default" @change="onRadioChange">
-					<el-radio-button label="zh-cn">中文简体</el-radio-button>
-					<el-radio-button label="en">英文</el-radio-button>
-					<el-radio-button label="zh-tw">中文繁体</el-radio-button>
-				</el-radio-group>
-			</div>
-			<el-form :model="form" size="default" label-width="100px" class="mt35 mb35">
-				<el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
-						<el-form-item :label="$t('message.formI18nLabel.name')">
-							<el-input v-model="form.name" :placeholder="$t('message.formI18nPlaceholder.name')" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
-						<el-form-item :label="$t('message.formI18nLabel.email')">
-							<el-input v-model="form.email" :placeholder="$t('message.formI18nPlaceholder.email')" clearable></el-input>
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
-						<el-form-item :label="$t('message.formI18nLabel.autograph')">
-							<el-input v-model="form.autograph" :placeholder="$t('message.formI18nPlaceholder.autograph')" clearable></el-input>
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
-export default defineComponent({
-	name: 'pagesFormI18n',
-	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const state = reactive({
-			radio: 'zh-cn',
-			form: {
-				name: '',
-				email: '',
-				autograph: '',
-			},
-		});
-		// 单选框改变时
-		const onRadioChange = () => {
-			proxy.$i18n.locale = state.radio;
-		};
-		return {
-			onRadioChange,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/formRules/component/formRulesOne.vue

@@ -1,67 +0,0 @@
-<template>
-	<div class="form-rules-one-container">
-		<el-form :model="form" :rules="rules" ref="formRulesOneRef" size="default" label-width="100px" class="mt35">
-			<el-row :gutter="35">
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="姓名" prop="name">
-						<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="邮箱" prop="email">
-						<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="登陆账户名" prop="autograph">
-						<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="职务" prop="occupation">
-						<el-select v-model="form.occupation" placeholder="请选择职务" clearable class="w100">
-							<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
-							<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
-							<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
-						</el-select>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesFormRulesOne',
-	props: {
-		data: {
-			type: Object,
-			default: () => {},
-		},
-	},
-	setup(props) {
-		const state = reactive({
-			form: { name: '', email: '', autograph: '', occupation: '' },
-			rules: {
-				name: { required: true, message: '请输入姓名', trigger: 'blur' },
-				email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
-				autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
-				occupation: { required: true, message: '请选择职务', trigger: 'change' },
-			},
-		});
-		// 赋值回显
-		const initForm = () => {
-			state.form = <any>props.data;
-		};
-		// 页面加载时
-		onMounted(() => {
-			initForm();
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/formRules/component/formRulesThree.vue

@@ -1,49 +0,0 @@
-<template>
-	<div class="form-rules-three-container">
-		<el-form :model="form" :rules="rules" ref="formRulesThreeRef" size="default" label-width="100px" class="mt35">
-			<el-row :gutter="35">
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="创建用户" prop="createUser">
-						<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="修改用户" prop="editUser">
-						<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="所属用户" prop="user">
-						<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="所属部门" prop="department">
-						<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesFormRulesThree',
-	setup() {
-		const state = reactive({
-			form: { createUser: '', editUser: '', user: '', department: '' },
-			rules: {
-				createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
-				editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
-				user: { required: true, message: '请输入所属用户', trigger: 'blur' },
-				department: { required: true, message: '请输入所属部门', trigger: 'blur' },
-			},
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/formRules/component/formRulesTwo.vue

@@ -1,51 +0,0 @@
-<template>
-	<div class="form-rules-two-container">
-		<el-form :model="form" :rules="rules" ref="formRulesTwoRef" size="default" label-width="100px" class="mt35">
-			<el-row :gutter="35">
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="手机" prop="phone">
-						<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="性别">
-						<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
-							<el-option label="男" value="1"></el-option>
-							<el-option label="女" value="2"></el-option>
-						</el-select>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="登录密码" prop="password">
-						<el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
-					<el-form-item label="权限角色" prop="auth">
-						<el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesFormRulesTwo',
-	setup() {
-		const state = reactive({
-			form: { phone: '', sex: '', password: '', auth: '' },
-			rules: {
-				phone: { required: true, message: '请输入手机', trigger: 'blur' },
-				password: { required: true, message: '请输入登录密码', trigger: 'blur' },
-				auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
-			},
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/formRules/index.vue

@@ -1,85 +0,0 @@
-<template>
-	<div class="form-rules-container">
-		<el-card shadow="hover" header="表单组件1">
-			<FormRulesOne :data="formRulesOneData" ref="pagesFormRulesOneRef" />
-		</el-card>
-		<el-card shadow="hover" header="表单组件2" class="mt15">
-			<FormRulesTwo ref="pagesFormRulesTwoRef" />
-		</el-card>
-		<el-card shadow="hover" header="表单组件3" class="mt15">
-			<FormRulesThree ref="pagesFormRulesThreeRef" />
-		</el-card>
-		<el-row class="flex mt15">
-			<div class="flex-margin">
-				<el-button size="default" @click="onResetForm">
-					<SvgIcon name="ele-RefreshRight" />
-					重置表单
-				</el-button>
-				<el-button size="default" type="primary" @click="onSubmitForm">
-					<SvgIcon name="iconfont icon-shuxing" />
-					验证表单
-				</el-button>
-			</div>
-		</el-row>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
-import { ElMessage } from 'element-plus';
-import FormRulesOne from './component/formRulesOne.vue';
-import FormRulesTwo from './component/formRulesTwo.vue';
-import FormRulesThree from './component/formRulesThree.vue';
-export default defineComponent({
-	name: 'pagesFormRules',
-	components: {
-		FormRulesOne,
-		FormRulesTwo,
-		FormRulesThree,
-	},
-	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const state = reactive({
-			formRulesOneData: {
-				name: 'lyt',
-				email: 'lyt123@.com',
-				autograph: 'lyt123456',
-				occupation: '1',
-			},
-		});
-		// 表单组件验证
-		const formRulesValidate = (pageRef: string, sonRef: string) => {
-			return new Promise((resolve) => {
-				proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
-					if (valid) resolve(valid);
-				});
-			});
-		};
-		// 表单组件重置
-		const formRulesResetFields = () => {
-			proxy.$refs.pagesFormRulesOneRef.$refs.formRulesOneRef.resetFields();
-			proxy.$refs.pagesFormRulesTwoRef.$refs.formRulesTwoRef.resetFields();
-			proxy.$refs.pagesFormRulesThreeRef.$refs.formRulesThreeRef.resetFields();
-		};
-		// 验证表单
-		const onSubmitForm = () => {
-			Promise.all([
-				formRulesValidate('pagesFormRulesOneRef', 'formRulesOneRef'),
-				formRulesValidate('pagesFormRulesTwoRef', 'formRulesTwoRef'),
-				formRulesValidate('pagesFormRulesThreeRef', 'formRulesThreeRef'),
-			]).then(() => {
-				ElMessage.success('表单全部验证成功');
-			});
-		};
-		// 重置表单
-		const onResetForm = () => {
-			formRulesResetFields();
-		};
-		return {
-			onSubmitForm,
-			onResetForm,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/iocnfont/index.vue

@@ -1,86 +0,0 @@
-<template>
-	<div class="iconfont-container">
-		<el-card shadow="hover" :header="`iconfont 字体图标(自动载入)：${sheetsIconList.length}个`">
-			<el-row class="iconfont-row">
-				<el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
-					<div class="iconfont-warp">
-						<div class="flex-margin">
-							<div class="iconfont-warp-value">
-								<i :class="v" class="iconfont"></i>
-							</div>
-							<div class="iconfont-warp-label mt10">{{ v }}</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-import initIconfont from '/@/utils/getStyleSheets';
-export default defineComponent({
-	name: 'pagesIocnfont',
-	setup() {
-		const state = reactive({
-			sheetsIconList: [],
-		});
-		// 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
-		const initGetStyleSheets = () => {
-			initIconfont.ali().then((res: any) => (state.sheetsIconList = res));
-		};
-		// 页面加载时
-		onMounted(() => {
-			initGetStyleSheets();
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.iconfont-container {
-	.iconfont-row {
-		border-top: 1px solid var(--next-border-color-light);
-		border-left: 1px solid var(--next-border-color-light);
-		.iconfont-warp {
-			text-align: center;
-			border-right: 1px solid var(--next-border-color-light);
-			border-bottom: 1px solid var(--next-border-color-light);
-			height: 120px;
-			overflow: hidden;
-			display: flex;
-			transition: all 0.3s ease;
-			&:hover {
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
-				cursor: pointer;
-				transition: all 0.3s ease;
-				.iconfont-warp-value {
-					i {
-						color: var(--el-color-primary);
-						transition: all 0.3s ease;
-					}
-				}
-				.iconfont-warp-label {
-					color: var(--el-color-primary);
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-value {
-				i {
-					color: #606266;
-					font-size: 32px;
-					transition: all 0.3s ease;
-				}
-			}
-			.iconfont-warp-label {
-				color: #99a9bf;
-				transition: all 0.3s ease;
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/lazyImg/index.vue

@@ -1,193 +0,0 @@
-<template>
-	<div class="lazy-img-container">
-		<el-card shadow="hover" header="图片懒加载演示（F12 切换到 Network Img下进行图片加载查看）">
-			<div class="flex-warp" v-if="tableData.data.length > 0">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
-						<div class="flex-warp-item">
-							<div class="flex-warp-item-box">
-								<div class="item-img" v-loading="v.loading">
-									<img :data-img="v.img" :data-key="k" :data-lazy-img-list="k" />
-								</div>
-								<div class="item-txt">
-									<div class="item-txt-title">{{ v.title }}</div>
-									<div class="item-txt-other">
-										<div style="width: 100%">
-											<div class="item-txt-msg mb10">
-												<span>评价 {{ v.evaluate }}</span>
-												<span class="ml10">收藏 {{ v.collection }}</span>
-											</div>
-											<div class="item-txt-msg item-txt-price">
-												<span class="font-price">
-													<span>￥</span>
-													<span class="font">{{ v.price }}</span>
-												</span>
-												<span>月销{{ v.monSales }}笔</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<el-empty v-else description="暂无数据"></el-empty>
-			<template v-if="tableData.data.length > 0">
-				<el-pagination
-					style="text-align: right"
-					background
-					@size-change="onHandleSizeChange"
-					@current-change="onHandleCurrentChange"
-					:page-sizes="[10, 20, 30]"
-					:current-page="tableData.param.pageNum"
-					:page-size="tableData.param.pageSize"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="tableData.total"
-				>
-				</el-pagination>
-			</template>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-import other from '/@/utils/other';
-import { filterList } from './mock';
-export default defineComponent({
-	name: 'pagesListAdapt',
-	setup() {
-		const router = useRouter();
-		const state = reactive({
-			tableData: {
-				data: filterList,
-				total: 99,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-				},
-			},
-		});
-		// 当前列表项点击
-		const onTableItemClick = (v: any) => {
-			router.push({
-				path: '/pages/filteringDetails',
-				query: { id: v.id },
-			});
-		};
-		// 分页点击
-		const onHandleSizeChange = (val: number) => {
-			state.tableData.param.pageSize = val;
-		};
-		// 分页点击
-		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.pageNum = val;
-		};
-		// 页面加载时
-		onMounted(() => {
-			other.lazyImg('[data-lazy-img-list]', state.tableData.data);
-		});
-		return {
-			onTableItemClick,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.lazy-img-container {
-	.flex-warp {
-		display: flex;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		margin: 0 -5px;
-		.flex-warp-item {
-			padding: 5px;
-			width: 100%;
-			height: 360px;
-			.flex-warp-item-box {
-				border: 1px solid var(--next-border-color-light);
-				width: 100%;
-				height: 100%;
-				border-radius: 2px;
-				display: flex;
-				flex-direction: column;
-				transition: all 0.3s ease;
-				&:hover {
-					cursor: pointer;
-					border: 1px solid var(--el-color-primary);
-					transition: all 0.3s ease;
-					box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-					.item-txt-title {
-						color: var(--el-color-primary) !important;
-						transition: all 0.3s ease;
-					}
-					.item-img {
-						img {
-							transition: all 0.3s ease;
-							transform: translateZ(0) scale(1.05);
-						}
-					}
-				}
-				.item-img {
-					width: 100%;
-					height: 215px;
-					overflow: hidden;
-					img {
-						transition: all 0.3s ease;
-						width: 100%;
-						height: 100%;
-					}
-				}
-				.item-txt {
-					flex: 1;
-					padding: 15px;
-					display: flex;
-					flex-direction: column;
-					overflow: hidden;
-					.item-txt-title {
-						text-overflow: ellipsis;
-						overflow: hidden;
-						-webkit-line-clamp: 2;
-						-webkit-box-orient: vertical;
-						display: -webkit-box;
-						color: #666666;
-						transition: all 0.3s ease;
-						&:hover {
-							color: var(--el-color-primary);
-							text-decoration: underline;
-							transition: all 0.3s ease;
-						}
-					}
-					.item-txt-other {
-						flex: 1;
-						align-items: flex-end;
-						display: flex;
-						.item-txt-msg {
-							font-size: 12px;
-							color: #8d8d91;
-						}
-						.item-txt-price {
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							.font-price {
-								color: #ff5000;
-								.font {
-									font-size: 22px;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/lazyImg/mock.ts

@@ -1,313 +0,0 @@
-// 列表数据
-export const filterList = [
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
-		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-		loading: true,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-		loading: true,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
-		title: '深圳湾公园一女子落水，三名男子接力及时施救',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/653/w930h523/20210704/d5d2-krwipas6444058.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/766/w930h636/20210704/b1ae-krwipas6332914.jpg',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/2886-krwipas6264821.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/750/w930h620/20210704/767c-krwipas6387862.jpg',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/111/w1024h687/20210704/1f65-krwipas5871436.jpg',
-		title: '盛夏的那考河湿地公园！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210704/657/w930h527/20210704/7eae-krwipas5866609.jpg',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/760/w930h630/20210703/124e-krwipas5596390.jpg',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/27/w930h697/20210703/9630-krwipas5514972.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/2fe3-krwipas5388050.jpg',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/724/w930h594/20210703/98b6-krwipas5234060.jpg',
-		title: '深圳湾公园一女子落水，三名男子接力及时施救',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210703/750/w930h620/20210703/f765-krwipas5194727.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5dde-krwipas4724976.jpg',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f45e-krwipas4566804.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/5579-krwipas4551382.jpg',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/7c75-krwipas4543661.jpg',
-		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/653/w930h523/20210702/ece2-krwipas4411140.jpg',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210702/750/w930h620/20210702/f5c2-krwipas4215211.jpg',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/720/w930h590/20210701/eabc-krwipas3509204.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/797/w930h667/20210701/4667-krwipas3365057.jpg',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210701/750/w930h620/20210701/baea-krwipas2976622.jpg',
-		title: '民众前往中共一大纪念馆参观',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-	{
-		img: 'http://z0.sinaimg.cn/auto/resize?size=235_156&img=http://n.sinaimg.cn/spider20210630/617/w850h567/20210630/5c96-krwipas1819108.jpg',
-		title: '延吉灯光秀美轮美奂 市民徜徉璀璨夜景',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-		loading: true,
-	},
-];

src/views/demo/pages/listAdapt/index.vue

@@ -1,209 +0,0 @@
-<template>
-	<div class="list-adapt-container">
-		<el-card shadow="hover" header="列表自适应演示(改变窗口查看效果)">
-			<div class="flex-warp" v-if="tableData.data.length > 0">
-				<el-row :gutter="15">
-					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15" v-for="(v, k) in tableData.data" :key="k" @click="onTableItemClick(v)">
-						<div class="flex-warp-item">
-							<div class="flex-warp-item-box">
-								<div class="item-img">
-									<img :src="v.img" />
-								</div>
-								<div class="item-txt">
-									<div class="item-txt-title">{{ v.title }}</div>
-									<div class="item-txt-other">
-										<div style="width: 100%">
-											<div class="item-txt-msg mb10">
-												<span>评价 {{ v.evaluate }}</span>
-												<span class="ml10">收藏 {{ v.collection }}</span>
-											</div>
-											<div class="item-txt-msg item-txt-price">
-												<span class="font-price">
-													<span>￥</span>
-													<span class="font">{{ v.price }}</span>
-												</span>
-												<span>月销{{ v.monSales }}笔</span>
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</el-col>
-				</el-row>
-			</div>
-			<el-empty v-else description="暂无数据"></el-empty>
-			<template v-if="tableData.data.length > 0">
-				<el-pagination
-					style="text-align: right"
-					background
-					@size-change="onHandleSizeChange"
-					@current-change="onHandleCurrentChange"
-					:page-sizes="[10, 20, 30]"
-					:current-page="tableData.param.pageNum"
-					:page-size="tableData.param.pageSize"
-					layout="total, sizes, prev, pager, next, jumper"
-					:total="tableData.total"
-				>
-				</el-pagination>
-			</template>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-import { filterList } from './mock';
-
-// 定义接口来定义对象的类型
-interface ListAdaptRow {
-	img: string;
-	title: string;
-	evaluate: string;
-	collection: string;
-	price: string;
-	monSales: string;
-	id: number;
-}
-interface TableDataState {
-	tableData: {
-		data: Array<ListAdaptRow>;
-		total: number;
-		loading: boolean;
-		param: {
-			pageNum: number;
-			pageSize: number;
-		};
-	};
-}
-
-export default defineComponent({
-	name: 'pagesListAdapt',
-	setup() {
-		const router = useRouter();
-		const state = reactive<TableDataState>({
-			tableData: {
-				data: filterList,
-				total: 99,
-				loading: false,
-				param: {
-					pageNum: 1,
-					pageSize: 10,
-				},
-			},
-		});
-		// 当前列表项点击
-		const onTableItemClick = (v: ListAdaptRow) => {
-			router.push({
-				path: '/pages/filteringDetails',
-				query: { id: v.id },
-			});
-		};
-		// 分页点击
-		const onHandleSizeChange = (val: number) => {
-			state.tableData.param.pageSize = val;
-		};
-		// 分页点击
-		const onHandleCurrentChange = (val: number) => {
-			state.tableData.param.pageNum = val;
-		};
-		return {
-			onTableItemClick,
-			onHandleSizeChange,
-			onHandleCurrentChange,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.flex-warp {
-	display: flex;
-	flex-wrap: wrap;
-	align-content: flex-start;
-	margin: 0 -5px;
-	.flex-warp-item {
-		padding: 5px;
-		width: 100%;
-		height: 360px;
-		.flex-warp-item-box {
-			border: 1px solid var(--next-border-color-light);
-			width: 100%;
-			height: 100%;
-			border-radius: 2px;
-			display: flex;
-			flex-direction: column;
-			transition: all 0.3s ease;
-			&:hover {
-				cursor: pointer;
-				border: 1px solid var(--el-color-primary);
-				transition: all 0.3s ease;
-				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
-				.item-txt-title {
-					color: var(--el-color-primary) !important;
-					transition: all 0.3s ease;
-				}
-				.item-img {
-					img {
-						transition: all 0.3s ease;
-						transform: translateZ(0) scale(1.05);
-					}
-				}
-			}
-			.item-img {
-				width: 100%;
-				height: 215px;
-				overflow: hidden;
-				img {
-					transition: all 0.3s ease;
-					width: 100%;
-					height: 100%;
-				}
-			}
-			.item-txt {
-				flex: 1;
-				padding: 15px;
-				display: flex;
-				flex-direction: column;
-				overflow: hidden;
-				.item-txt-title {
-					text-overflow: ellipsis;
-					overflow: hidden;
-					-webkit-line-clamp: 2;
-					-webkit-box-orient: vertical;
-					display: -webkit-box;
-					color: #666666;
-					transition: all 0.3s ease;
-					&:hover {
-						color: var(--el-color-primary);
-						text-decoration: underline;
-						transition: all 0.3s ease;
-					}
-				}
-				.item-txt-other {
-					flex: 1;
-					align-items: flex-end;
-					display: flex;
-					.item-txt-msg {
-						font-size: 12px;
-						color: #8d8d91;
-					}
-					.item-txt-price {
-						display: flex;
-						justify-content: space-between;
-						align-items: center;
-						.font-price {
-							color: #ff5000;
-							.font {
-								font-size: 22px;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/listAdapt/mock.ts

@@ -1,93 +0,0 @@
-// 列表数据
-export const filterList = [
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/e37326cc-4583-48f3-aa00-ecc2392d319d.jpg',
-		title: '36分钟，深圳平均通勤时间出炉！GDP10强城市中仅输杭州',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 1,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/78cf72b6-e2d9-459d-a368-470414a027f4679cf4ea-26fa-48c8-9fee-c2d092a91400.png',
-		title: '为爱而动，“红色鹊桥”三八妇女节交友联谊活动助力深圳女孩脱单',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 2,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/09/1faf3c6e-1250-4e6b-b072-4a331553e027.jpg',
-		title: '粤桂协作“背水一战” 解决广西大化县3.7万人饮水难题',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 3,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/9fcf6dd4-1e80-4497-bdc9-83dc7246d170.jpg.2',
-		title: '城镇就业女性平均薪酬6847元 女性职场渗透率提升',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 4,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/09/1bd78227-4126-4a43-bdf6-48ead6edd1bf.jpg.2',
-		title: '深圳：实现“从0到1”源头创新，推进大湾区综合性国家科学中心建设！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 5,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/9ea943a3-3ae8-4f49-8296-711ec36ef8c6_watermark.png',
-		title: '煖声音第126期|愿你有诗酒趁年华的洒脱，也有岁月沉淀后的坚定从容',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 6,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/a95ba232-1422-4f7e-b85f-c61d486c8659.jpg.2',
-		title: '姐妹们一起来吐槽，最不能接受男人的缺点！',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 7,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/08/76816bf0-3899-4c7e-bc6e-079b5ba8725e.jpg',
-		title: '民生小事 | 手机遗落出租车 热心民警帮找回',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 8,
-	},
-	{
-		img: 'https://news.sznews.com/pic/2021-03/08/28ed70d4-71f5-4abb-bf7b-0294bece9e43.jpg.2',
-		title: '“十三五”：深圳交上靓丽答卷 发展动力加快转换',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 9,
-	},
-	{
-		img: 'http://news.sznews.com/pic/2021-03/05/d13ae31f-fd45-431a-b48e-c5895bbc193e.png',
-		title: '深圳湾公园一女子落水，三名男子接力及时施救',
-		evaluate: (Math.random() * 10).toFixed(2),
-		collection: (Math.random() * 100).toFixed(2),
-		price: (Math.random() * 10).toFixed(2),
-		monSales: (Math.random() * 20).toFixed(2),
-		id: 10,
-	},
-];

src/views/demo/pages/preview/index.vue

@@ -1,27 +0,0 @@
-<template>
-	<div class="preview-container">
-		<el-card shadow="hover" header="element-plus 大图预览">
-			<el-image style="width: 100px; height: 100px; border-radius: 5px" :src="url" :preview-src-list="srcList" title="点击查看大图预览"> </el-image>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesPreview',
-	setup() {
-		const state = reactive({
-			url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
-			srcList: [
-				'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
-				'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
-				'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
-			],
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/steps/index.vue

@@ -1,50 +0,0 @@
-<template>
-	<div class="steps-container">
-		<el-card shadow="hover" header="element-plus 步骤条">
-			<el-steps :active="stepsActive">
-				<el-step title="第一步">
-					<template #icon>
-						<SvgIcon name="iconfont icon-0_round_solid" :size="20" />
-					</template>
-				</el-step>
-				<el-step title="第二步">
-					<template #icon>
-						<SvgIcon name="iconfont icon-2_round_solid" :size="20" />
-					</template>
-				</el-step>
-				<el-step title="第三步">
-					<template #icon>
-						<SvgIcon name="iconfont icon-3_round_solid" :size="20" />
-					</template>
-				</el-step>
-			</el-steps>
-			<el-result icon="success" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
-			<el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
-			<el-result icon="error" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
-			<el-button @click="onNextSteps" size="default" class="mt15" type="primary">
-				<SvgIcon name="iconfont icon-step" />
-				下一步
-			</el-button>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesSteps',
-	setup() {
-		const state = reactive({
-			stepsActive: 1,
-		});
-		// 下一步点击
-		const onNextSteps = () => {
-			if (state.stepsActive++ > 2) state.stepsActive = 1;
-		};
-		return {
-			onNextSteps,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/tableRules/index.vue

@@ -1,129 +0,0 @@
-<template>
-	<el-card shadow="hover" header="表单表格验证">
-		<el-form ref="tableRulesRef" :model="tableData" size="default">
-			<el-table :data="tableData.data" border class="module-table-uncollected">
-				<el-table-column
-					v-for="(item, index) in tableData.header"
-					:key="index"
-					show-overflow-tooltip
-					:prop="item.prop"
-					:width="item.width"
-					:label="item.label"
-				>
-					<template v-slot:header>
-						<span v-if="item.isRequired" class="color-danger">*</span>
-						<span class="pl5">{{ item.label }}</span>
-						<el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
-							<i class="iconfont icon-quanxian" />
-						</el-tooltip>
-					</template>
-					<template v-slot="scope">
-						<el-form-item
-							:prop="`data.${scope.$index}.${item.prop}`"
-							:rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
-						>
-							<el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
-								<el-option v-for="sel in tableData.option" :key="sel.id" :label="sel.label" :value="sel.value" />
-							</el-select>
-							<el-date-picker
-								v-else-if="item.type === 'date'"
-								v-model="scope.row[item.prop]"
-								type="date"
-								placeholder="选择日期"
-								style="width: 100%"
-							/>
-							<el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
-							<el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
-								<template v-slot:suffix>
-									<i class="iconfont icon-shouye_dongtaihui" />
-								</template>
-							</el-input>
-						</el-form-item>
-					</template>
-				</el-table-column>
-			</el-table>
-		</el-form>
-		<el-row class="flex mt15">
-			<div class="flex-margin">
-				<el-button size="default" type="success" @click="onValidate">表格验证</el-button>
-				<el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
-			</div>
-		</el-row>
-	</el-card>
-</template>
-
-<script lang="ts">
-import { defineComponent, toRefs, reactive, ref } from 'vue';
-import { ElMessage } from 'element-plus';
-
-// 定义接口来定义对象的类型
-interface TableHeader {
-	prop: string;
-	width: string | number;
-	label: string;
-	isRequired?: boolean;
-	isTooltip?: boolean;
-	type: string;
-}
-interface TableRulesState {
-	tableData: {
-		data: any[];
-		header: TableHeader[];
-		option: any[];
-	};
-}
-
-export default defineComponent({
-	name: 'pagesTableRules',
-	setup() {
-		const tableRulesRef = ref();
-		const state = reactive<TableRulesState>({
-			tableData: {
-				data: [],
-				header: [
-					{ prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
-					{ prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
-					{ prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
-					{ prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
-					{ prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
-					{ prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
-					{ prop: 'a7', width: '', label: '演示级分类', type: 'input' },
-					{ prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
-				],
-				option: [
-					{ value: '选项1', label: '黄金糕' },
-					{ value: '选项2', label: '双皮奶' },
-					{ value: '选项3', label: '蚵仔煎' },
-				],
-			},
-		});
-		// 表格验证
-		const onValidate = () => {
-			if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
-			tableRulesRef.value.validate((valid: any) => {
-				if (!valid) return ElMessage.warning('表格项必填未填');
-				ElMessage.success('全部验证通过');
-			});
-		};
-		// 新增一行
-		const onAddRow = () => {
-			state.tableData.data.push({
-				a1: '',
-				a2: '',
-				a3: '',
-				a4: '',
-				a5: '',
-				a6: '',
-				a7: '',
-				a8: '',
-			});
-		};
-		return {
-			onValidate,
-			onAddRow,
-			tableRulesRef,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/tree/index.vue

@@ -1,258 +0,0 @@
-<template>
-	<div class="tree-container">
-		<el-card shadow="hover" header="element plus Tree 树形控件改成表格">
-			<div v-loading="treeLoading">
-				<div class="tree-head">
-					<div class="tree-head-check"><el-checkbox v-model="treeCheckAll" @change="onCheckAllChange"></el-checkbox></div>
-					<div class="tree-head-one">商品 ID</div>
-					<div style="flex: 1; display: flex">
-						<div class="tree-head-two">商品名称</div>
-						<div class="tree-head-three">描述</div>
-					</div>
-				</div>
-				<el-tree :data="treeTableData" show-checkbox node-key="id" ref="treeTable" :props="treeDefaultProps" @check="onCheckTree">
-					<template #default="{ node, data }">
-						<span class="tree-custom-node">
-							<span style="flex: 1">{{ node.label }}</span>
-							<span v-if="data.isShow" style="flex: 1; display: flex">
-								<span type="text" size="default" style="flex: 1">{{ data.label1 }}</span>
-								<span type="text" size="default" style="flex: 1">{{ data.label2 }}</span>
-							</span>
-						</span>
-					</template>
-				</el-tree>
-			</div>
-			<el-button @click="onSelect" class="mt15" size="default" type="primary">
-				<SvgIcon name="iconfont icon-shuxingtu" />
-				选择元素
-			</el-button>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onBeforeMount, getCurrentInstance, defineComponent } from 'vue';
-import { ElMessage } from 'element-plus';
-
-// 定义接口来定义对象的类型
-interface TreeDataState {
-	id: number;
-	label: string;
-	label1: string;
-	label2: string;
-	isShow: boolean;
-	children?: TreeDataState[];
-}
-interface TreeSate {
-	treeCheckAll: boolean;
-	treeLoading: boolean;
-	treeTableData: TreeDataState[];
-	treeDefaultProps: {
-		children: string;
-		label: string;
-	};
-	treeSelArr: TreeDataState[];
-	treeLength: number;
-}
-
-export default defineComponent({
-	name: 'pagesTree',
-	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const state = reactive<TreeSate>({
-			treeCheckAll: false,
-			treeLoading: false,
-			treeTableData: [],
-			treeDefaultProps: {
-				children: 'children',
-				label: 'label',
-			},
-			treeSelArr: [],
-			treeLength: 0,
-		});
-		// 初始化树的长度
-		const initTreeLengh = (arr: TreeDataState[]) => {
-			let count = 0;
-			arr.map((item) => {
-				if (item.children) {
-					count += item.children.length;
-				}
-			});
-			state.treeLength = count + arr.length;
-		};
-		// 全选改变时
-		const onCheckAllChange = () => {
-			if (state.treeCheckAll) {
-				proxy.$refs.treeTable.setCheckedNodes(state.treeTableData);
-			} else {
-				proxy.$refs.treeTable.setCheckedKeys([]);
-			}
-		};
-		// 节点选中状态发生变化时的回调
-		const onCheckTree = () => {
-			state.treeSelArr = [];
-			state.treeSelArr = proxy.$refs.treeTable.getCheckedNodes();
-			state.treeSelArr.length == state.treeLength ? (state.treeCheckAll = true) : (state.treeCheckAll = false);
-		};
-		// 选择元素按钮
-		const onSelect = () => {
-			let treeArr = proxy.$refs.treeTable.getCheckedNodes();
-			if (treeArr.length <= 0) {
-				ElMessage.warning('请选择元素');
-				return;
-			} else {
-				// console.log(proxy.$refs.treeTable.getCheckedNodes());
-			}
-		};
-		// 初始化树模拟数据
-		const getTreeData = () => {
-			state.treeTableData = [
-				{
-					id: 1,
-					label: '12987121',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: true,
-					children: [
-						{
-							id: 11,
-							label: '一级 1-1',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-						{
-							id: 12,
-							label: '一级 1-2',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-					],
-				},
-				{
-					id: 2,
-					label: '12987122',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: true,
-					children: [
-						{
-							id: 21,
-							label: '二级 2-1',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-						{
-							id: 22,
-							label: '二级 2-2',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-					],
-				},
-				{
-					id: 3,
-					label: '12987123',
-					label1: '好滋好味鸡蛋仔',
-					label2: '荷兰优质淡奶，奶香浓而不腻',
-					isShow: true,
-					children: [
-						{
-							id: 31,
-							label: '二级 3-1',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-						{
-							id: 32,
-							label: '二级 3-2',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-						{
-							id: 33,
-							label: '二级 3-3',
-							label1: '好滋好味鸡蛋仔',
-							label2: '荷兰优质淡奶，奶香浓而不腻',
-							isShow: false,
-						},
-					],
-				},
-			];
-			initTreeLengh(state.treeTableData);
-		};
-		// 页面加载前
-		onBeforeMount(() => {
-			getTreeData();
-		});
-		return {
-			getTreeData,
-			onCheckAllChange,
-			onCheckTree,
-			onSelect,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.tree-container {
-	.tree-head {
-		height: 48px;
-		line-height: 48px;
-		border: 1px solid var(--next-border-color-light);
-		border-bottom: none;
-		display: flex;
-		padding-right: 8px;
-		font-weight: bold;
-		color: #909399;
-		.tree-head-check {
-			width: 38px;
-			text-align: right;
-		}
-		.tree-head-one,
-		.tree-head-two,
-		.tree-head-three {
-			flex: 1;
-		}
-		.tree-head-one {
-			padding-left: 8px;
-		}
-	}
-	.el-tree {
-		overflow: hidden;
-		border-bottom: 1px solid var(--next-border-color-light);
-		.tree-custom-node {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			padding-right: 8px;
-			width: 100%;
-		}
-		&::v-deep(.el-tree-node) {
-			border: 1px solid var(--next-border-color-light);
-			border-bottom: none;
-			color: #606266;
-			.el-tree-node__content {
-				line-height: 57px !important;
-				height: 57px !important;
-			}
-			.el-tree-node__children {
-				.el-tree-node {
-					border: none;
-				}
-				.el-tree-node__content {
-					border-top: 1px solid var(--next-border-color-light);
-				}
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/waterfall/index.vue

@@ -1,173 +0,0 @@
-<template>
-	<div class="waterfall-container">
-		<el-card shadow="hover" header="瀑布屏（布局一）" class="mb15">
-			<div class="waterfall-first">
-				<div class="waterfall-first-item" v-for="v in 30" :key="v" v-waves>
-					<div class="w100 h100 flex">
-						<span class="flex-margin">{{ v }}</span>
-					</div>
-				</div>
-			</div>
-		</el-card>
-		<el-card shadow="hover" header="瀑布屏（布局二）">
-			<div class="waterfall-last">
-				<div class="waterfall-last-item" v-for="v in 30" :key="v" v-waves="'light'">
-					<div class="w100 h100 flex">
-						<span class="flex-margin">{{ v }}</span>
-					</div>
-				</div>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesWaterfall',
-	setup() {
-		const state = reactive({});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.waterfall-container {
-	.waterfall-first {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
-		grid-gap: 0.25em;
-		grid-auto-flow: row dense;
-		grid-auto-rows: 20px;
-		.waterfall-first-item {
-			width: 100%;
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			transition: all 0.3s ease;
-			border-radius: 3px;
-			&:nth-of-type(3n + 1) {
-				grid-row: auto / span 5;
-			}
-			&:nth-of-type(3n + 2) {
-				grid-row: auto / span 6;
-			}
-			&:nth-of-type(3n + 3) {
-				grid-row: auto / span 8;
-			}
-			&:hover {
-				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-				transition: all 0.3s ease;
-				cursor: pointer;
-			}
-		}
-	}
-	.waterfall-last {
-		display: grid;
-		grid-gap: 0.25em;
-		grid-auto-flow: row dense;
-		grid-auto-rows: minmax(188px, 20vmin);
-		grid-template-columns: 1fr;
-		.waterfall-last-item {
-			height: 100%;
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			transition: all 0.3s ease;
-			border-radius: 3px;
-			&:hover {
-				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-				transition: all 0.3s ease;
-				cursor: pointer;
-			}
-		}
-	}
-	@media (min-width: 576px) {
-		.waterfall-last {
-			grid-template-columns: repeat(7, 1fr);
-			.waterfall-last-item {
-				&:nth-of-type(9n + 9) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 8) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 7) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(9n + 6) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 5) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(9n + 4) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 3) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(9n + 2) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(9n + 1) {
-					grid-column: auto / span 2;
-				}
-			}
-		}
-	}
-	@media (min-width: 576px) and (min-width: 1024px) {
-		.waterfall-last {
-			grid-template-columns: repeat(14, 1fr);
-			.waterfall-last-item {
-				&:nth-of-type(15n + 15) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 14) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 13) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(15n + 12) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 11) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 10) {
-					grid-column: auto / span 2;
-				}
-				&:nth-of-type(15n + 9) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 8) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 7) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 6) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 5) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 4) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 3) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 2) {
-					grid-column: auto / span 3;
-				}
-				&:nth-of-type(15n + 1) {
-					grid-column: auto / span 2;
-				}
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/waves/index.vue

@@ -1,133 +0,0 @@
-<template>
-	<div class="preview-container">
-		<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 btn">
-			<el-row class="mb10" style="color: #808080">可选参数 v-waves=" |light|red|orange|purple|green|teal"</el-row>
-			<div class="flex-warp">
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button size="default" v-waves>
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							默认效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="primary" size="default" v-waves="'light'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							light 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="success" size="default" v-waves="'red'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							red 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="info" size="default" v-waves="'orange'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							orange 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="warning" size="default" v-waves="'purple'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							purple 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="danger" size="default" v-waves="'green'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							green 效果
-						</el-button>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<el-button type="primary" size="default" v-waves="'teal'">
-							<SvgIcon name="iconfont icon-bolangnengshiyanchang" />
-							teal 效果
-						</el-button>
-					</div>
-				</div>
-			</div>
-		</el-card>
-		<el-card shadow="hover" header="波浪指令效果（v-waves）作用于 div" class="mt15">
-			<div class="waterfall-first">
-				<div class="waterfall-first-item" v-for="v in 12" :key="v" v-waves>
-					<div class="w100 h100 flex">
-						<span class="flex-margin">{{ v }}</span>
-					</div>
-				</div>
-			</div>
-		</el-card>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, defineComponent } from 'vue';
-export default defineComponent({
-	name: 'pagesWaves',
-	setup() {
-		const state = reactive({});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.preview-container {
-	.flex-warp {
-		display: flex;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		margin: 0 -5px;
-		.flex-warp-item {
-			padding: 5px;
-			.flex-warp-item-box {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-	.waterfall-first {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
-		grid-gap: 0.25em;
-		grid-auto-flow: row dense;
-		grid-auto-rows: 20px;
-		.waterfall-first-item {
-			width: 100%;
-			background: var(--el-color-primary);
-			color: var(--el-color-white);
-			transition: all 0.3s ease;
-			border-radius: 3px;
-			&:nth-of-type(3n + 1) {
-				grid-row: auto / span 5;
-			}
-			&:nth-of-type(3n + 2) {
-				grid-row: auto / span 6;
-			}
-			&:nth-of-type(3n + 3) {
-				grid-row: auto / span 8;
-			}
-			&:hover {
-				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
-				transition: all 0.3s ease;
-				cursor: pointer;
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/workflow/component/contextmenu/index.vue

@@ -1,106 +0,0 @@
-<template>
-	<transition name="el-zoom-in-center">
-		<div
-			aria-hidden="true"
-			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
-			role="tooltip"
-			data-popper-placement="bottom"
-			:style="`top: ${dropdowns.y + 5}px;left: ${dropdowns.x}px;`"
-			:key="Math.random()"
-			v-show="isShow"
-		>
-			<ul class="el-dropdown-menu">
-				<li
-					v-for="(v, k) in dropdownList"
-					class="el-dropdown-menu__item"
-					aria-disabled="false"
-					tabindex="-1"
-					:key="k"
-					@click="onCurrentClick(v.contextMenuClickId)"
-				>
-					<SvgIcon :name="v.icon" />
-					<span>{{ v.txt }}{{ item.type === 'line' ? '线' : '节点' }}</span>
-				</li>
-			</ul>
-			<div class="el-popper__arrow" style="left: 10px"></div>
-		</div>
-	</transition>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted } from 'vue';
-export default defineComponent({
-	name: 'pagesWorkflowContextmenu',
-	props: {
-		dropdown: {
-			type: Object,
-		},
-	},
-	setup(props, { emit }) {
-		const state = reactive({
-			isShow: false,
-			dropdownList: [
-				{ contextMenuClickId: 0, txt: '删除', icon: 'ele-Delete' },
-				{ contextMenuClickId: 1, txt: '编辑', icon: 'ele-Edit' },
-			],
-			item: {
-				type: 'node',
-			},
-			conn: {},
-		});
-		// 父级传过来的坐标 x,y 值
-		const dropdowns = computed(() => {
-			return <any>props.dropdown;
-		});
-		// 当前项菜单点击
-		const onCurrentClick = (contextMenuClickId: number) => {
-			emit('current', Object.assign({}, { contextMenuClickId }, state.item), state.conn);
-		};
-		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
-		const openContextmenu = (item: any, conn = {}) => {
-			state.item = item;
-			state.conn = conn;
-			closeContextmenu();
-			setTimeout(() => {
-				state.isShow = true;
-			}, 10);
-		};
-		// 关闭右键菜单
-		const closeContextmenu = () => {
-			state.isShow = false;
-		};
-		// 监听页面监听进行右键菜单的关闭
-		onMounted(() => {
-			document.body.addEventListener('click', closeContextmenu);
-			document.body.addEventListener('contextmenu', closeContextmenu);
-		});
-		// 页面卸载时，移除右键菜单监听事件
-		onUnmounted(() => {
-			document.body.removeEventListener('click', closeContextmenu);
-			document.body.removeEventListener('contextmenu', closeContextmenu);
-		});
-		return {
-			dropdowns,
-			openContextmenu,
-			closeContextmenu,
-			onCurrentClick,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.custom-contextmenu {
-	transform-origin: center top;
-	z-index: 2190;
-	position: fixed;
-	.el-dropdown-menu__item {
-		font-size: 12px !important;
-		white-space: nowrap;
-		i {
-			font-size: 12px !important;
-		}
-	}
-}
-</style>

src/views/demo/pages/workflow/component/drawer/index.vue

@@ -1,73 +0,0 @@
-<template>
-	<div>
-		<el-drawer :title="`${nodeData.type === 'line' ? '线' : '节点'}操作`" v-model="isOpen" size="320px">
-			<el-scrollbar>
-				<Line v-if="nodeData.type === 'line'" @change="onLineChange" @close="close" ref="lineRef" />
-				<Node v-else @submit="onNodeSubmit" @close="close" ref="nodeRef" />
-			</el-scrollbar>
-		</el-drawer>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs, ref, nextTick } from 'vue';
-import Line from './line.vue';
-import Node from './node.vue';
-
-// 定义接口来定义对象的类型
-interface WorkflowDrawerState {
-	isOpen: boolean;
-	nodeData: {
-		type: string;
-	};
-	jsplumbConn: any;
-}
-
-export default defineComponent({
-	name: 'pagesWorkflowDrawer',
-	components: { Line, Node },
-	setup(props, { emit }) {
-		const lineRef = ref();
-		const nodeRef = ref();
-		const state = reactive<WorkflowDrawerState>({
-			isOpen: false,
-			nodeData: {
-				type: 'node',
-			},
-			jsplumbConn: {},
-		});
-		// 打开抽屉
-		const open = (item: any, conn: any) => {
-			state.isOpen = true;
-			state.jsplumbConn = conn;
-			state.nodeData = item;
-			nextTick(() => {
-				if (item.type === 'line') lineRef.value.getParentData(item);
-				else nodeRef.value.getParentData(item);
-			});
-		};
-		// 关闭
-		const close = () => {
-			state.isOpen = false;
-		};
-		// 线 label 内容改变时
-		const onLineChange = (label: any) => {
-			state.jsplumbConn.label = label;
-			emit('label', state.jsplumbConn);
-		};
-		// 节点内容改变时
-		const onNodeSubmit = (data: object) => {
-			emit('node', data);
-		};
-		return {
-			lineRef,
-			nodeRef,
-			open,
-			close,
-			onLineChange,
-			onNodeSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/workflow/component/drawer/line.vue

@@ -1,62 +0,0 @@
-<template>
-	<div class="pt15 pr15 pb15 pl15">
-		<el-form :model="line" size="default" label-width="50px">
-			<el-form-item label="来往">
-				<el-input v-model="line.contact" placeholder="来往" clearable disabled></el-input>
-			</el-form-item>
-			<el-form-item label="类型">
-				<el-input v-model="line.type" placeholder="类型" clearable disabled></el-input>
-			</el-form-item>
-			<el-form-item label="label">
-				<el-input v-model="line.label" placeholder="请输入label内容" clearable></el-input>
-			</el-form-item>
-			<el-form-item>
-				<el-button @click="onLineTextReset">
-					<SvgIcon name="ele-RefreshRight" />
-					重置
-				</el-button>
-				<el-button @click="onLineTextChange" type="primary">
-					<SvgIcon name="ele-Check" />
-					保存
-				</el-button>
-			</el-form-item>
-		</el-form>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
-
-// 定义接口来定义对象的类型
-interface WorkflowDrawerLineState {
-	line: any;
-}
-
-export default defineComponent({
-	name: 'pagesWorkflowDrawerLine',
-	setup(props, { emit }) {
-		const state = reactive<WorkflowDrawerLineState>({
-			line: {},
-		});
-		// 获取父组件数据
-		const getParentData = (data: object) => {
-			state.line = data;
-		};
-		// 重置
-		const onLineTextReset = () => {
-			state.line.label = '';
-		};
-		// 保存
-		const onLineTextChange = () => {
-			emit('change', state.line.label);
-			emit('close');
-		};
-		return {
-			getParentData,
-			onLineTextReset,
-			onLineTextChange,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/workflow/component/drawer/node.vue

@@ -1,272 +0,0 @@
-<template>
-	<div class="workflow-drawer-node">
-		<el-tabs type="border-card" v-model="tabsActive">
-			<!-- 节点编辑 -->
-			<el-tab-pane label="节点编辑" name="1">
-				<el-scrollbar>
-					<el-form :model="node" :rules="nodeRules" ref="nodeFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
-						<el-form-item label="数据id" prop="id">
-							<el-input v-model="node.id" placeholder="请输入数据id" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="节点id" prop="nodeId">
-							<el-input v-model="node.nodeId" placeholder="请输入节点id" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="类型" prop="type">
-							<el-input v-model="node.type" placeholder="请输入类型" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="left坐标" prop="left">
-							<el-input v-model="node.left" placeholder="请输入left坐标" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="top坐标" prop="top">
-							<el-input v-model="node.top" placeholder="请输入top坐标" clearable disabled></el-input>
-						</el-form-item>
-						<el-form-item label="icon图标" prop="icon">
-							<el-input v-model="node.icon" placeholder="请输入icon图标" clearable></el-input>
-						</el-form-item>
-						<el-form-item label="名称" prop="name">
-							<el-input v-model="node.name" placeholder="请输入名称" clearable></el-input>
-						</el-form-item>
-						<el-form-item>
-							<el-button class="mb15" @click="onNodeRefresh">
-								<SvgIcon name="ele-RefreshRight" />
-								重置
-							</el-button>
-							<el-button type="primary" class="mb15" @click="onNodeSubmit">
-								<SvgIcon name="ele-Check" />
-								保存
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</el-scrollbar>
-			</el-tab-pane>
-
-			<!-- 扩展表单 -->
-			<el-tab-pane label="扩展表单" name="2">
-				<el-scrollbar>
-					<el-form :model="form" ref="extendFormRef" size="default" label-width="80px" class="pt15 pr15 pb15 pl15">
-						<el-form-item
-							:label="val.label"
-							:prop="val.prop"
-							v-for="(val, key) in node.from"
-							:key="key"
-							:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: 'blur' }]"
-						>
-							<el-input
-								v-model="form[val.prop]"
-								:placeholder="val.placeholder"
-								clearable
-								v-if="val.type === 'input'"
-								:disabled="val.disabled"
-							></el-input>
-							<el-select v-model="form[val.prop]" placeholder="请选择" v-if="val.type === 'select'" clearable :disabled="val.disabled">
-								<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
-							</el-select>
-							<el-checkbox-group v-model="form[val.prop]" v-if="val.type === 'checkbox'" :disabled="val.disabled">
-								<el-checkbox label="美食推荐" name="type"></el-checkbox>
-								<el-checkbox label="统计分析" name="type"></el-checkbox>
-							</el-checkbox-group>
-						</el-form-item>
-						<el-form-item>
-							<el-button class="mb15" @click="onExtendRefresh">
-								<SvgIcon name="ele-RefreshRight" />
-								重置
-							</el-button>
-							<el-button type="primary" class="mb15" @click="onExtendSubmit" :loading="loading.extend">
-								<SvgIcon name="ele-Check" />
-								保存
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</el-scrollbar>
-			</el-tab-pane>
-
-			<!-- 图表可视化 -->
-			<el-tab-pane label="图表可视化" name="3">
-				<el-scrollbar>
-					<div class="flex-content-right">
-						<div style="height: 200px; width: 320px" ref="chartsMonitorRef"></div>
-					</div>
-				</el-scrollbar>
-			</el-tab-pane>
-		</el-tabs>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs, ref, nextTick, getCurrentInstance } from 'vue';
-import { ElMessage } from 'element-plus';
-import * as echarts from 'echarts';
-
-// 定义接口来定义对象的类型
-interface WorkflowDrawerNodeState {
-	node: { [key: string]: any };
-	nodeRules: any;
-	form: any;
-	tabsActive: string;
-	loading: {
-		extend: boolean;
-	};
-}
-
-export default defineComponent({
-	name: 'pagesWorkflowDrawerNode',
-	setup(props, { emit }) {
-		const { proxy } = <any>getCurrentInstance();
-		const nodeFormRef = ref();
-		const extendFormRef = ref();
-		const chartsMonitorRef = ref();
-		const state = reactive<WorkflowDrawerNodeState>({
-			node: {},
-			nodeRules: {
-				id: [{ required: true, message: '请输入数据id', trigger: 'blur' }],
-				nodeId: [{ required: true, message: '请输入节点id', trigger: 'blur' }],
-				type: [{ required: true, message: '请输入类型', trigger: 'blur' }],
-				left: [{ required: true, message: '请输入left坐标', trigger: 'blur' }],
-				top: [{ required: true, message: '请输入top坐标', trigger: 'blur' }],
-				icon: [{ required: true, message: '请输入icon图标', trigger: 'blur' }],
-				name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-			},
-			form: {
-				module: [],
-			},
-			tabsActive: '1',
-			loading: {
-				extend: false,
-			},
-		});
-		// 获取父组件数据
-		const getParentData = (data: object) => {
-			state.tabsActive = '1';
-			state.node = data;
-			initChartsMonitor();
-		};
-		// 节点编辑-重置
-		const onNodeRefresh = () => {
-			state.node.icon = '';
-			state.node.name = '';
-		};
-		// 节点编辑-保存
-		const onNodeSubmit = () => {
-			nodeFormRef.value.validate((valid: boolean) => {
-				if (valid) {
-					emit('submit', state.node);
-					emit('close');
-				} else {
-					return false;
-				}
-			});
-		};
-		// 扩展表单-重置
-		const onExtendRefresh = () => {
-			extendFormRef.value.resetFields();
-		};
-		// 扩展表单-保存
-		const onExtendSubmit = () => {
-			extendFormRef.value.validate((valid: boolean) => {
-				if (valid) {
-					state.loading.extend = true;
-					setTimeout(() => {
-						state.loading.extend = false;
-						ElMessage.success('保存成功');
-						emit('close');
-					}, 1000);
-				} else {
-					return false;
-				}
-			});
-		};
-		// 图表可视化-初始化
-		const initChartsMonitor = () => {
-			const myChart = echarts.init(proxy.$refs.chartsMonitorRef);
-			const numsOne = [];
-			const numsTwo = [];
-			for (let i = 0; i < 7; i++) {
-				numsOne.push(`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(Math.random() * 52 + 1)}`);
-				numsTwo.push(Math.floor(Math.random() * 52 + 1));
-			}
-			const option = {
-				grid: {
-					top: 50,
-					right: 30,
-					bottom: 30,
-					left: 50,
-				},
-				tooltip: {
-					trigger: 'axis',
-				},
-				xAxis: {
-					type: 'category',
-					boundaryGap: false,
-					data: numsOne,
-				},
-				yAxis: {
-					type: 'value',
-				},
-				series: [
-					{
-						itemStyle: {
-							color: '#289df5',
-							borderColor: '#289df5',
-							areaStyle: {
-								type: 'default',
-								opacity: 0.1,
-							},
-						},
-						data: numsTwo,
-						type: 'line',
-						areaStyle: {},
-					},
-				],
-			};
-			myChart.setOption(option);
-			nextTick(() => {
-				myChart.resize();
-			});
-		};
-		return {
-			nodeFormRef,
-			extendFormRef,
-			chartsMonitorRef,
-			getParentData,
-			onNodeRefresh,
-			onNodeSubmit,
-			onExtendRefresh,
-			onExtendSubmit,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.workflow-drawer-node {
-	::v-deep {
-		.el-tabs {
-			box-shadow: unset;
-			border: unset;
-			.el-tabs__nav {
-				display: flex;
-				width: 100%;
-				.el-tabs__item {
-					flex: 1;
-					padding: unset;
-					text-align: center;
-					&:first-of-type.is-active {
-						border-left-color: transparent;
-					}
-					&:last-of-type.is-active {
-						border-right-color: transparent;
-					}
-				}
-			}
-			.el-tabs__content {
-				padding: 0;
-				height: calc(100vh - 90px);
-				.el-tab-pane {
-					height: 100%;
-				}
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/workflow/component/tool/help.vue

@@ -1,39 +0,0 @@
-<template>
-	<div class="workflow-tool-help">
-		<el-dialog v-model="isShow" width="769px">
-			<template #title>
-				<div v-drag="['.workflow-tool-help .el-dialog', '.workflow-tool-help .el-dialog__header']">使用帮助</div>
-			</template>
-			<div>1、拖入：鼠标移入左侧导航中，鼠标形状改变时拖动到右侧网格状的视图中。</div>
-			<div class="mt10">2、移动：鼠标移入到视图中的某个节点元素，鼠标形状改变时拖动改变位置。</div>
-			<div class="mt10">3、连线：鼠标移入到视图中的某个节点元素的icon(图标)，鼠标形状改变（变成"+"），按下鼠标左键进行拖线连接。</div>
-			<div class="mt10">4、节点：鼠标移入到视图中的某个节点元素，点击鼠标右键可进行删除、编辑节点。</div>
-			<div class="mt10 mb10">5、线条：鼠标移入到视图中的某个线条，线条颜色改变时，点击鼠标右键可进行删除、编辑线条。</div>
-		</el-dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue';
-export default defineComponent({
-	name: 'pagesWorkflowToolHelp',
-	setup() {
-		const state = reactive({
-			isShow: false,
-		});
-		// 打开弹窗
-		const open = () => {
-			state.isShow = true;
-		};
-		// 关闭弹窗
-		const close = () => {
-			state.isShow = false;
-		};
-		return {
-			open,
-			close,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/pages/workflow/component/tool/index.vue

@@ -1,76 +0,0 @@
-<template>
-	<div class="workflow-tool">
-		<div class="pl15">{{ setToolTitle }}</div>
-		<div class="workflow-tool-right">
-			<div class="workflow-tool-icon" v-for="(v, k) in toolList" :key="k" :title="v.title" @click="onToolClick(v.fnName)">
-				<SvgIcon :name="v.icon" />
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, reactive, toRefs } from 'vue';
-import { useStore } from '/@/store/index';
-export default defineComponent({
-	name: 'pagesWorkflowTool',
-	setup(props, { emit }) {
-		const store = useStore();
-		const state = reactive({
-			toolList: [
-				{ icon: 'ele-Help', title: '帮助', fnName: 'help' },
-				{ icon: 'ele-Download', title: '下载', fnName: 'download' },
-				{ icon: 'ele-Check', title: '提交', fnName: 'submit' },
-				{ icon: 'ele-DocumentCopy', title: '复制', fnName: 'copy' },
-				{ icon: 'ele-Delete', title: '删除', fnName: 'del' },
-				{ icon: 'ele-FullScreen', title: '全屏', fnName: 'fullscreen' },
-			],
-		});
-		// 设置 tool 标题
-		const setToolTitle = computed(() => {
-			let { globalTitle } = store.state.themeConfig.themeConfig;
-			return `${globalTitle}工作流`;
-		});
-		// 顶部工具栏
-		const onToolClick = (fnName: string) => {
-			emit('tool', fnName);
-		};
-		return {
-			setToolTitle,
-			onToolClick,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.workflow-tool {
-	height: 35px;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
-	color: var(--el-text-color-primary);
-	.workflow-tool-right {
-		flex: 1;
-		display: flex;
-		justify-content: flex-end;
-	}
-	&-icon {
-		padding: 0 10px;
-		cursor: pointer;
-		color: var(--next-bg-topBarColor);
-		height: 35px;
-		line-height: 35px;
-		display: flex;
-		align-items: center;
-		&:hover {
-			background: rgba(0, 0, 0, 0.04);
-			i {
-				display: inline-block;
-				animation: logoAnimation 0.3s ease-in-out;
-			}
-		}
-	}
-}
-</style>

src/views/demo/pages/workflow/index.vue

@@ -1,684 +0,0 @@
-<template>
-	<div class="workflow-container">
-		<div class="workflow-mask" v-if="isShow"></div>
-		<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
-			<div class="workflow">
-				<!-- 顶部工具栏 -->
-				<Tool @tool="onToolClick" />
-
-				<!-- 左侧导航区 -->
-				<div class="workflow-content">
-					<div id="workflow-left">
-						<el-scrollbar>
-							<div
-								:id="`left${key}`"
-								v-for="(val, key) in leftNavList"
-								:key="val.id"
-								:style="{ height: val.isOpen ? 'auto' : '50px', overflow: 'hidden' }"
-								class="workflow-left-id"
-							>
-								<div class="workflow-left-title" @click="onTitleClick(val)">
-									<span>{{ val.title }}</span>
-									<SvgIcon :name="val.isOpen ? 'ele-ArrowDown' : 'ele-ArrowRight'" />
-								</div>
-								<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k" :data-name="v.name" :data-icon="v.icon" :data-id="v.id">
-									<div class="workflow-left-item-icon">
-										<SvgIcon :name="v.icon" class="workflow-icon-drag" />
-										<div class="font10 pl5 name">{{ v.name }}</div>
-									</div>
-								</div>
-							</div>
-						</el-scrollbar>
-					</div>
-
-					<!-- 右侧绘画区 -->
-					<div id="workflow-right">
-						<div
-							v-for="(v, k) in jsplumbData.nodeList"
-							:key="v.nodeId"
-							:id="v.nodeId"
-							:class="v.class"
-							:style="{ left: v.left, top: v.top }"
-							@click="onItemCloneClick(k)"
-							@contextmenu.prevent="onContextmenu(v, k, $event)"
-						>
-							<div class="workflow-right-box" :class="{ 'workflow-right-active': jsPlumbNodeIndex === k }">
-								<div class="workflow-left-item-icon">
-									<SvgIcon :name="v.icon" class="workflow-icon-drag" />
-									<div class="font10 pl5 name">{{ v.name }}</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- 节点右键菜单 -->
-		<Contextmenu :dropdown="dropdownNode" ref="contextmenuNodeRef" @current="onCurrentNodeClick" />
-		<!-- 线右键菜单 -->
-		<Contextmenu :dropdown="dropdownLine" ref="contextmenuLineRef" @current="onCurrentLineClick" />
-		<!-- 抽屉表单、线 -->
-		<Drawer ref="drawerRef" @label="setLineLabel" @node="setNodeContent" />
-
-		<!-- 顶部工具栏-帮助弹窗 -->
-		<Help ref="helpRef" />
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, toRefs, reactive, computed, onMounted, onUnmounted, nextTick, ref } from 'vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import { jsPlumb } from 'jsplumb';
-import Sortable from 'sortablejs';
-import { useStore } from '/@/store/index';
-import Tool from './component/tool/index.vue';
-import Help from './component/tool/help.vue';
-import Contextmenu from './component/contextmenu/index.vue';
-import Drawer from './component/drawer/index.vue';
-import commonFunction from '/@/utils/commonFunction';
-import { leftNavList } from './js/mock';
-import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './js/config';
-
-// 定义接口来定义对象的类型
-interface NodeListState {
-	id: string | number;
-	nodeId: string | undefined;
-	class: HTMLElement | string;
-	left: number | string;
-	top: number | string;
-	icon: string;
-	name: string;
-}
-interface LineListState {
-	sourceId: string;
-	targetId: string;
-	label: string;
-}
-interface XyState {
-	x: string | number;
-	y: string | number;
-}
-interface WorkflowState {
-	leftNavList: any[];
-	dropdownNode: XyState;
-	dropdownLine: XyState;
-	isShow: boolean;
-	jsPlumb: any;
-	jsPlumbNodeIndex: null | number;
-	jsplumbDefaults: any;
-	jsplumbMakeSource: any;
-	jsplumbMakeTarget: any;
-	jsplumbConnect: any;
-	jsplumbData: {
-		nodeList: Array<NodeListState>;
-		lineList: Array<LineListState>;
-	};
-}
-
-export default defineComponent({
-	name: 'pagesWorkflow',
-	components: { Tool, Contextmenu, Drawer, Help },
-	setup() {
-		const contextmenuNodeRef = ref();
-		const contextmenuLineRef = ref();
-		const drawerRef = ref();
-		const helpRef = ref();
-		const store = useStore();
-		const { copyText } = commonFunction();
-		const state = reactive<WorkflowState>({
-			leftNavList: [],
-			dropdownNode: { x: '', y: '' },
-			dropdownLine: { x: '', y: '' },
-			isShow: false,
-			jsPlumb: null,
-			jsPlumbNodeIndex: null,
-			jsplumbDefaults,
-			jsplumbMakeSource,
-			jsplumbMakeTarget,
-			jsplumbConnect,
-			jsplumbData: {
-				nodeList: [],
-				lineList: [],
-			},
-		});
-		// 设置 view 的高度
-		const setViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// 设置 宽度小于 768，不支持操
-		const setClientWidth = () => {
-			const clientWidth = document.body.clientWidth;
-			clientWidth < 768 ? (state.isShow = true) : (state.isShow = false);
-		};
-		// 左侧导航-数据初始化
-		const initLeftNavList = () => {
-			state.leftNavList = leftNavList;
-			state.jsplumbData = {
-				nodeList: [
-					{ nodeId: 'huej738hbji', left: '148px', top: '93px', class: 'workflow-right-clone', icon: 'iconfont icon-gongju', name: '引擎', id: '11' },
-					{
-						nodeId: '52kcszzyxrd',
-						left: '458px',
-						top: '203px',
-						class: 'workflow-right-clone',
-						icon: 'iconfont icon-shouye_dongtaihui',
-						name: '模版',
-						id: '12',
-					},
-					{
-						nodeId: 'nltskl6k4me',
-						left: '164px',
-						top: '350px',
-						class: 'workflow-right-clone',
-						icon: 'iconfont icon-zhongduancanshuchaxun',
-						name: '名称',
-						id: '13',
-					},
-				],
-				lineList: [
-					{ sourceId: 'huej738hbji', targetId: '52kcszzyxrd', label: '传送' },
-					{ sourceId: 'huej738hbji', targetId: 'nltskl6k4me', label: '' },
-				],
-			};
-		};
-		// 左侧导航-初始化拖动
-		const initSortable = () => {
-			state.leftNavList.forEach((v, k) => {
-				Sortable.create(document.getElementById(`left${k}`) as HTMLElement, {
-					group: {
-						name: 'vue-next-admin-1',
-						pull: 'clone',
-						put: false,
-					},
-					animation: 0,
-					sort: false,
-					draggable: '.workflow-left-item',
-					forceFallback: true,
-					onEnd: function (evt: any) {
-						const { name, icon, id } = evt.clone.dataset;
-						const { layerX, layerY, clientX, clientY } = evt.originalEvent;
-						const el = document.querySelector('#workflow-right') as HTMLElement;
-						const { x, y, width, height } = el.getBoundingClientRect();
-						if (clientX < x || clientX > width + x || clientY < y || y > y + height) {
-							ElMessage.warning('请把节点拖入到画布中');
-						} else {
-							// 节点id（唯一）
-							const nodeId = Math.random().toString(36).substr(2, 12);
-							// 处理节点数据
-							const node = {
-								nodeId,
-								left: `${layerX - 40}px`,
-								top: `${layerY - 15}px`,
-								class: 'workflow-right-clone',
-								name,
-								icon,
-								id,
-							};
-							// 右侧视图内容数组
-							state.jsplumbData.nodeList.push(node);
-							// 元素加载完毕时
-							nextTick(() => {
-								// 整个节点作为source或者target
-								state.jsPlumb.makeSource(nodeId, state.jsplumbMakeSource);
-								// // 整个节点作为source或者target
-								state.jsPlumb.makeTarget(nodeId, state.jsplumbMakeTarget, jsplumbConnect);
-								// 设置节点可以拖拽（此处为id值，非class）
-								state.jsPlumb.draggable(nodeId, {
-									containment: 'parent',
-									stop: (el: any) => {
-										state.jsplumbData.nodeList.forEach((v) => {
-											if (v.nodeId === el.el.id) {
-												// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
-												v.left = `${el.pos[0]}px`;
-												v.top = `${el.pos[1]}px`;
-											}
-										});
-									},
-								});
-							});
-						}
-					},
-				});
-			});
-		};
-		// 初始化 jsPlumb
-		const initJsPlumb = () => {
-			(<any>jsPlumb).ready(() => {
-				state.jsPlumb = (<any>jsPlumb).getInstance({
-					detachable: false,
-					Container: 'workflow-right',
-				});
-				state.jsPlumb.fire('jsPlumbDemoLoaded', state.jsPlumb);
-				// 导入默认配置
-				state.jsPlumb.importDefaults(state.jsplumbDefaults);
-				// 会使整个jsPlumb立即重绘。
-				state.jsPlumb.setSuspendDrawing(false, true);
-				// 初始化节点、线的链接
-				initJsPlumbConnection();
-				// 点击线弹出右键菜单
-				state.jsPlumb.bind('contextmenu', (conn: any, originalEvent: MouseEvent) => {
-					originalEvent.preventDefault();
-					const { sourceId, targetId } = conn;
-					const { clientX, clientY } = originalEvent;
-					state.dropdownLine.x = clientX;
-					state.dropdownLine.y = clientY;
-					const v: any = state.jsplumbData.nodeList.find((v) => v.nodeId === targetId);
-					const line: any = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
-					v.type = 'line';
-					v.label = line.label;
-					contextmenuLineRef.value.openContextmenu(v, conn);
-				});
-				// 连线之前
-				state.jsPlumb.bind('beforeDrop', (conn: any) => {
-					const { sourceId, targetId } = conn;
-					const item = state.jsplumbData.lineList.find((v) => v.sourceId === sourceId && v.targetId === targetId);
-					if (item) {
-						ElMessage.warning('关系已存在，不可重复连接');
-						return false;
-					} else {
-						return true;
-					}
-				});
-				// 连线时
-				state.jsPlumb.bind('connection', (conn: any) => {
-					const { sourceId, targetId } = conn;
-					state.jsplumbData.lineList.push({
-						sourceId,
-						targetId,
-						label: '',
-					});
-				});
-				// 删除连线时回调函数
-				state.jsPlumb.bind('connectionDetached', (conn: any) => {
-					const { sourceId, targetId } = conn;
-					state.jsplumbData.lineList = state.jsplumbData.lineList.filter((line) => {
-						if (line.sourceId == sourceId && line.targetId == targetId) {
-							return false;
-						}
-						return true;
-					});
-				});
-			});
-		};
-		// 初始化节点、线的链接
-		const initJsPlumbConnection = () => {
-			// 节点
-			state.jsplumbData.nodeList.forEach((v) => {
-				// 整个节点作为source或者target
-				state.jsPlumb.makeSource(v.nodeId, state.jsplumbMakeSource);
-				// 整个节点作为source或者target
-				state.jsPlumb.makeTarget(v.nodeId, state.jsplumbMakeTarget, jsplumbConnect);
-				// 设置节点可以拖拽（此处为id值，非class）
-				state.jsPlumb.draggable(v.nodeId, {
-					containment: 'parent',
-					stop: (el: any) => {
-						state.jsplumbData.nodeList.forEach((v) => {
-							if (v.nodeId === el.el.id) {
-								// 节点x, y重新赋值，防止再次从左侧导航中拖拽节点时，x, y恢复默认
-								v.left = `${el.pos[0]}px`;
-								v.top = `${el.pos[1]}px`;
-							}
-						});
-					},
-				});
-			});
-			// 线
-			state.jsplumbData.lineList.forEach((v) => {
-				state.jsPlumb.connect(
-					{
-						source: v.sourceId,
-						target: v.targetId,
-						label: v.label,
-					},
-					state.jsplumbConnect
-				);
-			});
-		};
-		// 左侧导航-菜单标题点击
-		const onTitleClick = (val: any) => {
-			val.isOpen = !val.isOpen;
-		};
-		// 右侧内容区-当前项点击
-		const onItemCloneClick = (k: number) => {
-			state.jsPlumbNodeIndex = k;
-		};
-		// 右侧内容区-当前项右键菜单点击
-		const onContextmenu = (v: any, k: number, e: MouseEvent) => {
-			state.jsPlumbNodeIndex = k;
-			const { clientX, clientY } = e;
-			state.dropdownNode.x = clientX;
-			state.dropdownNode.y = clientY;
-			v.type = 'node';
-			v.label = '';
-			let item: any = {};
-			state.leftNavList.forEach((l) => {
-				if (l.children) if (l.children.find((c: any) => c.id === v.id)) item = l.children.find((c: any) => c.id === v.id);
-			});
-			v.from = item.form;
-			contextmenuNodeRef.value.openContextmenu(v);
-		};
-		// 右侧内容区-当前项右键菜单点击回调(节点)
-		const onCurrentNodeClick = (item: any) => {
-			const { contextMenuClickId, nodeId } = item;
-			if (contextMenuClickId === 0) {
-				const nodeIndex = state.jsplumbData.nodeList.findIndex((item) => item.nodeId === nodeId);
-				state.jsplumbData.nodeList.splice(nodeIndex, 1);
-				state.jsPlumb.removeAllEndpoints(nodeId);
-				state.jsPlumbNodeIndex = null;
-			} else if (contextMenuClickId === 1) {
-				drawerRef.value.open(item);
-			}
-		};
-		// 右侧内容区-当前项右键菜单点击回调(线)
-		const onCurrentLineClick = (item: any, conn: any) => {
-			const { contextMenuClickId } = item;
-			const { endpoints } = conn;
-			const intercourse: any = [];
-			endpoints.forEach((v: any) => {
-				intercourse.push({
-					id: v.element.id,
-					innerText: v.element.innerText,
-				});
-			});
-			item.contact = `${intercourse[0].innerText}(${intercourse[0].id}) => ${intercourse[1].innerText}(${intercourse[1].id})`;
-			if (contextMenuClickId === 0) state.jsPlumb.deleteConnection(conn);
-			else if (contextMenuClickId === 1) drawerRef.value.open(item, conn);
-		};
-		// 设置线的 label
-		const setLineLabel = (obj: any) => {
-			const { sourceId, targetId, label } = obj;
-			const conn = state.jsPlumb.getConnections({
-				source: sourceId,
-				target: targetId,
-			})[0];
-			conn.setLabel(label);
-			if (!label || label === '') {
-				conn.addClass('workflow-right-empty-label');
-			} else {
-				conn.removeClass('workflow-right-empty-label');
-				conn.addClass('workflow-right-label');
-			}
-			state.jsplumbData.lineList.forEach((v) => {
-				if (v.sourceId === sourceId && v.targetId === targetId) v.label = label;
-			});
-		};
-		// 设置节点内容
-		const setNodeContent = (obj: any) => {
-			const { nodeId, name, icon } = obj;
-			// 设置节点 name 与 icon
-			state.jsplumbData.nodeList.forEach((v) => {
-				if (v.nodeId === nodeId) {
-					v.name = name;
-					v.icon = icon;
-				}
-			});
-			// 重绘
-			nextTick(() => {
-				state.jsPlumb.setSuspendDrawing(false, true);
-			});
-		};
-		// 顶部工具栏-当前项点击
-		const onToolClick = (fnName: String) => {
-			switch (fnName) {
-				case 'help':
-					onToolHelp();
-					break;
-				case 'download':
-					onToolDownload();
-					break;
-				case 'submit':
-					onToolSubmit();
-					break;
-				case 'copy':
-					onToolCopy();
-					break;
-				case 'del':
-					onToolDel();
-					break;
-				case 'fullscreen':
-					onToolFullscreen();
-					break;
-			}
-		};
-		// 顶部工具栏-帮助
-		const onToolHelp = () => {
-			nextTick(() => {
-				helpRef.value.open();
-			});
-		};
-		// 顶部工具栏-下载
-		const onToolDownload = () => {
-			const { globalTitle } = store.state.themeConfig.themeConfig;
-			const href = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(state.jsplumbData, null, '\t'));
-			const aLink = document.createElement('a');
-			aLink.setAttribute('href', href);
-			aLink.setAttribute('download', `${globalTitle}工作流.json`);
-			aLink.click();
-			aLink.remove();
-			ElMessage.success('下载成功');
-		};
-		// 顶部工具栏-提交
-		const onToolSubmit = () => {
-			// console.log(state.jsplumbData);
-			ElMessage.success('数据提交成功');
-		};
-		// 顶部工具栏-复制
-		const onToolCopy = () => {
-			copyText(JSON.stringify(state.jsplumbData));
-		};
-		// 顶部工具栏-删除
-		const onToolDel = () => {
-			ElMessageBox.confirm('此操作将清空画布，是否继续？', '提示', {
-				confirmButtonText: '清空',
-				cancelButtonText: '取消',
-			})
-				.then(() => {
-					state.jsplumbData.nodeList.forEach((v) => {
-						state.jsPlumb.removeAllEndpoints(v.nodeId);
-					});
-					nextTick(() => {
-						state.jsplumbData = {
-							nodeList: [],
-							lineList: [],
-						};
-						ElMessage.success('清空画布成功');
-					});
-				})
-				.catch(() => {});
-		};
-		// 顶部工具栏-全屏
-		const onToolFullscreen = () => {
-			store.dispatch('tagsViewRoutes/setCurrenFullscreen', true);
-		};
-		// 页面加载时
-		onMounted(async () => {
-			await initLeftNavList();
-			initSortable();
-			initJsPlumb();
-			setClientWidth();
-			window.addEventListener('resize', setClientWidth);
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			window.removeEventListener('resize', setClientWidth);
-		});
-		return {
-			setViewHeight,
-			setClientWidth,
-			setLineLabel,
-			setNodeContent,
-			onTitleClick,
-			onItemCloneClick,
-			onContextmenu,
-			onCurrentNodeClick,
-			onCurrentLineClick,
-			contextmenuNodeRef,
-			contextmenuLineRef,
-			drawerRef,
-			helpRef,
-			onToolClick,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.workflow-container {
-	position: relative;
-	.workflow {
-		display: flex;
-		height: 100%;
-		width: 100%;
-		flex-direction: column;
-		.workflow-content {
-			display: flex;
-			height: calc(100% - 35px);
-			#workflow-left {
-				width: 220px;
-				height: 100%;
-				border-right: 1px solid var(--el-border-color-light, #ebeef5);
-				::v-deep(.el-collapse-item__content) {
-					padding-bottom: 0;
-				}
-				.workflow-left-title {
-					height: 50px;
-					display: flex;
-					align-items: center;
-					padding: 0 10px;
-					border-top: 1px solid var(--el-border-color-light, #ebeef5);
-					color: var(--el-text-color-primary);
-					cursor: default;
-					span {
-						flex: 1;
-					}
-				}
-				.workflow-left-item {
-					display: inline-block;
-					width: calc(50% - 15px);
-					position: relative;
-					cursor: move;
-					margin: 0 0 10px 10px;
-					.workflow-left-item-icon {
-						height: 35px;
-						display: flex;
-						align-items: center;
-						transition: all 0.3s ease;
-						padding: 5px 10px;
-						border: 1px dashed transparent;
-						background: var(--next-bg-color);
-						border-radius: 3px;
-						i,
-						.name {
-							color: var(--el-text-color-secondary);
-							transition: all 0.3s ease;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							overflow: hidden;
-						}
-						&:hover {
-							transition: all 0.3s ease;
-							border: 1px dashed var(--el-color-primary);
-							background: var(--el-color-primary-light-9);
-							border-radius: 5px;
-							i,
-							.name {
-								transition: all 0.3s ease;
-								color: var(--el-color-primary);
-							}
-						}
-					}
-				}
-				& .workflow-left-id:first-of-type {
-					.workflow-left-title {
-						border-top: none;
-					}
-				}
-			}
-			#workflow-right {
-				flex: 1;
-				position: relative;
-				overflow: hidden;
-				height: 100%;
-				background-image: linear-gradient(90deg, rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%),
-					linear-gradient(rgb(156 214 255 / 15%) 10%, rgba(0, 0, 0, 0) 10%);
-				background-size: 10px 10px;
-				.workflow-right-clone {
-					position: absolute;
-					.workflow-right-box {
-						height: 35px;
-						align-items: center;
-						color: var(--el-text-color-secondary);
-						padding: 0 10px;
-						border-radius: 3px;
-						cursor: move;
-						transition: all 0.3s ease;
-						min-width: 94.5px;
-						background: var(--el-color-white);
-						border: 1px solid var(--el-border-color-light, #ebeef5);
-						.workflow-left-item-icon {
-							display: flex;
-							align-items: center;
-							height: 35px;
-						}
-						&:hover {
-							border: 1px dashed var(--el-color-primary);
-							background: var(--el-color-primary-light-9);
-							transition: all 0.3s ease;
-							color: var(--el-color-primary);
-							i {
-								cursor: Crosshair;
-							}
-						}
-					}
-					.workflow-right-active {
-						border: 1px dashed var(--el-color-primary);
-						background: var(--el-color-primary-light-9);
-						color: var(--el-color-primary);
-					}
-				}
-				::v-deep(.jtk-overlay):not(.aLabel) {
-					padding: 4px 10px;
-					border: 1px solid var(--el-border-color-light, #ebeef5) !important;
-					color: var(--el-text-color-secondary) !important;
-					background: var(--el-color-white) !important;
-					border-radius: 3px;
-					font-size: 10px;
-				}
-				::v-deep(.jtk-overlay.workflow-right-empty-label) {
-					display: none;
-				}
-			}
-		}
-	}
-	.workflow-mask {
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		&::after {
-			content: '手机版不支持 jsPlumb 操作';
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			z-index: 1;
-			background: rgba(255, 255, 255, 0.9);
-			color: #666666;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-	}
-}
-</style>

src/views/demo/pages/workflow/js/config.ts

@@ -1,99 +0,0 @@
-// jsplumb 默认配置
-export const jsplumbDefaults = {
-	// 多个锚点 [源锚点，目标锚点]
-	Anchors: [
-		'Top',
-		'TopCenter',
-		'TopRight',
-		'TopLeft',
-		'Right',
-		'RightMiddle',
-		'Bottom',
-		'BottomCenter',
-		'BottomRight',
-		'BottomLeft',
-		'Left',
-		'LeftMiddle',
-	],
-	// 连线的容器id
-	Container: 'workflow-right',
-	// 设置链接线的形状，如直线或者曲线之类的。anchor可以去设置锚点的位置。可选值"<Bezier|Flowchart|StateMachine|Straight>"
-	Connector: ['Bezier', { curviness: 100 }],
-	// 节点是否可以用鼠标拖动使其断开，默认为true。即用鼠标链接上的连线，也可以使用鼠标拖动让其断开。设置成false，可以让其拖动也不会自动断开
-	ConnectionsDetachable: false,
-	// 删除线的时候节点不删除
-	DeleteEndpointsOnDetach: false,
-	//  每当添加或以其他方式创建 Endpoint 并且 jsPlumb 尚未给出任何明确的 Endpoint 定义时将使用
-	Endpoint: ['Blank', { Overlays: '' }],
-	// 连接中源和目标端点的默认外观
-	EndpointStyle: { fill: '#1879ffa1', outlineWidth: 1 },
-	// jsPlumb 的内部日志记录是否打开
-	LogEnabled: true,
-	// 连接器的默认外观
-	PaintStyle: {
-		stroke: '#E0E3E7',
-		strokeWidth: 1,
-		outlineStroke: 'transparent',
-		outlineWidth: 10,
-	},
-	// 用于配置任何可拖动元素的默认选项jsPlumb.draggable
-	DragOptions: { cursor: 'pointer', zIndex: 2000 },
-	// 添加到连接器和端点的默认叠加层。已弃用：从 4.x 开始，将不支持此功能。并非所有叠加层都可以连接到连接器和端点。
-	Overlays: [
-		[
-			'Arrow',
-			{
-				width: 10, // 箭头尾部的宽度
-				length: 8, // 从箭头的尾部到头部的距离
-				location: 1, // 位置，建议使用0～1之间
-				direction: 1, // 方向，默认值为1（表示向前），可选-1（表示向后）
-				foldback: 0.623, // 折回，也就是尾翼的角度，默认0.623，当为1时，为正三角
-			},
-		],
-		[
-			'Label',
-			{
-				label: '',
-				location: 0.5,
-				cssClass: 'aLabel',
-			},
-		],
-	],
-	// 默认渲染模式 svg、canvas
-	RenderMode: 'svg',
-	// 悬停状态下连接的默认外观
-	HoverPaintStyle: { stroke: '#b0b2b5', strokeWidth: 1 },
-	// 悬停状态下端点的默认外观
-	EndpointHoverStyle: { fill: 'red' },
-	// 端点和连接的默认范围。范围提供了对哪些端点可以连接到哪些其他端点的基本控制
-	Scope: 'jsPlumb_DefaultScope',
-};
-
-// 整个节点作为source或者target
-export const jsplumbMakeSource = {
-	// 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
-	filter: '.workflow-icon-drag',
-	filterExclude: false,
-	anchor: 'Continuous',
-	// 是否允许自己连接自己
-	allowLoopback: true,
-	maxConnections: -1,
-};
-
-// 整个节点作为source或者target
-export const jsplumbMakeTarget = {
-	filter: '.workflow-icon-drag',
-	filterExclude: false,
-	// 是否允许自己连接自己
-	anchor: 'Continuous',
-	allowLoopback: true,
-	dropOptions: { hoverClass: 'ef-drop-hover' },
-};
-
-// 连线参数
-export const jsplumbConnect = {
-	isSource: true,
-	isTarget: true,
-	// 动态锚点、提供了4个方向 Continuous、AutoDefault
-	anchor: 'Continuous',
-};

src/views/demo/pages/workflow/js/mock.ts

@@ -1,262 +0,0 @@
-// 左侧菜单导航数据
-export const leftNavList = [
-	{
-		title: '工作流',
-		icon: 'iconfont icon-shouye',
-		isOpen: true,
-		id: '1',
-		children: [
-			{
-				icon: 'iconfont icon-gongju',
-				name: '引擎',
-				id: '11',
-				form: [
-					{
-						type: 'input',
-						label: '客户姓名',
-						prop: 'name',
-						placeholder: '请输入客户姓名',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'select',
-						label: '性别',
-						prop: 'sex',
-						placeholder: '请选择性别',
-						required: true,
-						disabled: false,
-						options: [
-							{
-								value: '0',
-								label: '女',
-							},
-							{
-								value: '1',
-								label: '男',
-							},
-						],
-					},
-					{
-						type: 'input',
-						label: '员工编号',
-						prop: 'number',
-						placeholder: '请输入员工编号',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'input',
-						label: '办公电话',
-						prop: 'mobile',
-						placeholder: '请输入办公电话',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'select',
-						label: '权限分配',
-						prop: 'role',
-						placeholder: '请选择性别',
-						required: true,
-						disabled: false,
-						options: [
-							{
-								value: '0',
-								label: '编辑权限',
-							},
-							{
-								value: '1',
-								label: '删除权限',
-							},
-						],
-					},
-					{
-						type: 'checkbox',
-						label: '模块选择',
-						prop: 'module',
-						placeholder: '请选择模块',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-shouye_dongtaihui',
-				name: '模版',
-				id: '12',
-				form: [
-					{
-						type: 'input',
-						label: '等级',
-						prop: 'grade',
-						placeholder: '请输入等级',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'input',
-						label: '登记密码',
-						prop: 'password',
-						placeholder: '请输入登记密码',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-zhongduancanshuchaxun',
-				name: '名称',
-				id: '13',
-				form: [
-					{
-						type: 'input',
-						label: '数据表',
-						prop: 'dataSheet',
-						placeholder: '请输入数据表',
-						required: true,
-						disabled: false,
-					},
-					{
-						type: 'input',
-						label: '字段配置',
-						prop: 'field',
-						placeholder: '请输入字段配置',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-zhongduancanshu',
-				name: '版本',
-				id: '14',
-				form: [
-					{
-						type: 'input',
-						label: '发布模板',
-						prop: 'publish',
-						placeholder: '请输入发布模板',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-bolangnengshiyanchang',
-				name: '建模',
-				id: '15',
-				form: [
-					{
-						type: 'input',
-						label: '内容模板',
-						prop: 'content',
-						placeholder: '请输入内容模板',
-						required: true,
-						disabled: false,
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-xingqiu',
-				name: '节点',
-				id: '16',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称6',
-						prop: 'name16',
-					},
-				],
-			},
-		],
-	},
-	{
-		title: '流程',
-		isOpen: true,
-		icon: 'iconfont icon-caijian',
-		id: '2',
-		children: [
-			{
-				icon: 'iconfont icon-fuwenben',
-				name: '实例',
-				id: '21',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称7',
-						prop: 'name21',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-fuwenbenkuang',
-				name: '轨迹',
-				id: '22',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称8',
-						prop: 'name22',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-shangchuan',
-				name: '数据',
-				id: '23',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称9',
-						prop: 'name23',
-					},
-				],
-			},
-		],
-	},
-	{
-		title: '任务',
-		isOpen: true,
-		icon: 'iconfont icon-shuju',
-		id: '3',
-		children: [
-			{
-				icon: 'iconfont icon-icon-',
-				name: '参与人',
-				id: '31',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称1',
-						prop: 'name31',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-gerenzhongxin',
-				name: '执行人',
-				id: '32',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称2',
-						prop: 'name32',
-					},
-				],
-			},
-			{
-				icon: 'iconfont icon-fangkuang',
-				name: '工单',
-				id: '33',
-				form: [
-					{
-						type: 'input',
-						label: '活动名称3',
-						prop: 'name33',
-					},
-				],
-			},
-		],
-	},
-];

src/views/demo/params/common/details.vue

@@ -1,47 +0,0 @@
-<template>
-	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
-		<div class="flex-margin color-primary">
-			<div>paramsCommonDetails</div>
-			<div class="mt10 mb10">路径：path: {{ params.path }}</div>
-			<div>参数：query: {{ params.query }}</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useStore } from '/@/store/index';
-export default defineComponent({
-	name: 'paramsCommonDetails',
-	setup() {
-		const route = useRoute();
-		const store = useStore();
-		const state = reactive({
-			params: {
-				path: '',
-				query: '',
-			},
-		});
-		// 设置 view 的高度
-		const setViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// 页面加载时
-		onMounted(() => {
-			state.params = <any>route;
-		});
-		return {
-			setViewHeight,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/params/common/index.vue

@@ -1,55 +0,0 @@
-<template>
-	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
-		<div class="flex-margin">
-			<el-result icon="success" title="普通路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
-				<template #extra>
-					<el-input v-model="value" placeholder="请输入路由参数id值" clearable></el-input>
-					<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
-						<SvgIcon name="iconfont icon-putong" />
-						普通路由传参
-					</el-button>
-				</template>
-			</el-result>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, computed, defineComponent } from 'vue';
-import { useStore } from '/@/store/index';
-import { useRouter } from 'vue-router';
-export default defineComponent({
-	name: 'paramsCommon',
-	setup() {
-		const store = useStore();
-		const state = reactive({
-			value: '',
-		});
-		const router = useRouter();
-		// 设置 view 的高度
-		const setViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// 跳转到详情
-		const onGoDetailsClick = () => {
-			router.push({
-				path: '/params/common/details',
-				query: { id: state.value, name: 'vue-next-admin' },
-			});
-			state.value = '';
-		};
-		return {
-			setViewHeight,
-			onGoDetailsClick,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/params/dynamic/details.vue

@@ -1,47 +0,0 @@
-<template>
-	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
-		<div class="flex-margin color-primary">
-			<div>paramsDynamicDetails</div>
-			<div class="mt10 mb10">路径：path: {{ params.path }}</div>
-			<div>参数：params: {{ params.params }}</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { useStore } from '/@/store/index';
-export default defineComponent({
-	name: 'paramsDynamicDetails',
-	setup() {
-		const route = useRoute();
-		const store = useStore();
-		const state = reactive({
-			params: {
-				path: '',
-				params: '',
-			},
-		});
-		// 设置 view 的高度
-		const setViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// 页面加载时
-		onMounted(() => {
-			state.params = <any>route;
-		});
-		return {
-			setViewHeight,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/params/dynamic/index.vue

@@ -1,59 +0,0 @@
-<template>
-	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
-		<div class="flex-margin">
-			<el-result icon="warning" title="动态路由" subTitle="可 `开启 TagsView 共用` 进行单标签测试">
-				<template #extra>
-					<el-input v-model="value" placeholder="请输入路由参数id值" clearable></el-input>
-					<el-button type="primary" size="default" class="mt15" @click="onGoDetailsClick">
-						<SvgIcon name="iconfont icon-dongtai" />
-						动态路由传参
-					</el-button>
-				</template>
-			</el-result>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, toRefs, reactive, computed } from 'vue';
-import { useStore } from '/@/store/index';
-import { useRouter } from 'vue-router';
-export default defineComponent({
-	name: 'paramsDynamic',
-	setup() {
-		const store = useStore();
-		const state = reactive({
-			value: '',
-		});
-		const router = useRouter();
-		// 设置 view 的高度
-		const setViewHeight = computed(() => {
-			let { isTagsview } = store.state.themeConfig.themeConfig;
-			let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
-			if (isTagsViewCurrenFull) {
-				return `30px`;
-			} else {
-				if (isTagsview) return `114px`;
-				else return `80px`;
-			}
-		});
-		// 跳转到详情
-		const onGoDetailsClick = () => {
-			// name 值为路由中的 name
-			router.push({
-				name: 'paramsDynamicDetails',
-				params: {
-					t: 'vue-next-admin',
-					id: state.value,
-				},
-			});
-			state.value = '';
-		};
-		return {
-			setViewHeight,
-			onGoDetailsClick,
-			...toRefs(state),
-		};
-	},
-});
-</script>

src/views/demo/tools/index.vue

@@ -1,498 +0,0 @@
-<template>
-	<el-card shadow="hover" header="正则验证（一些项目中常用的正则）">
-		<el-form :model="ruleForm" :rules="rules" class="tools-warp-form" size="default" label-position="top">
-			<el-form-item label="验证百分比（不可以小数）:" prop="a22">
-				<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
-				<div>
-					<el-input v-model="ruleForm.a22" @input="onVerifyNumberPercentage($event)" placeholder="请输入数字进行测试">
-						<template #append> % </template>
-					</el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="验证百分比（可以小数）:" prop="a23" class="mt20">
-				<div class="tools-warp-form-msg">验证可以输入大于0小于100的数字</div>
-				<div>
-					<el-input v-model="ruleForm.a23" @input="onVerifyNumberPercentageFloat($event)" placeholder="请输入数字进行测试">
-						<template #append> % </template>
-					</el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="小数或整数:" prop="a1" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证可以输入小数或整数，0 开始， . 只能出现一次，保留小数点后保留2位小数。(负数时，模拟拼接负号给后台)。
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a1" @input="onVerifyNumberIntegerAndFloat($event)" placeholder="请输入小数或整数进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="正整数:" prop="a2" class="mt20">
-				<div class="tools-warp-form-msg">验证只可以输入正整数，0 开始后面将不可以输入。</div>
-				<div>
-					<el-input v-model="ruleForm.a2" @input="onVerifiyNumberInteger($event)" placeholder="请输入整数进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="去掉中文及空格:" prop="a3" class="mt20">
-				<div class="tools-warp-form-msg">验证不可以输入空格与中文。</div>
-				<div>
-					<el-input v-model="ruleForm.a3" @input="onVerifyCnAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="去掉英文及空格:" prop="a4" class="mt20">
-				<div class="tools-warp-form-msg">验证不可以输入空格与英文。</div>
-				<div>
-					<el-input v-model="ruleForm.a4" @input="onVerifyEnAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="禁止输入空格:" prop="a5" class="mt20">
-				<div class="tools-warp-form-msg">验证不可以输入空格。</div>
-				<div>
-					<el-input v-model="ruleForm.a5" @input="onVerifyAndSpace($event)" placeholder="请输入内容进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="金额用 `,` 区分开:" prop="a6" class="mt20">
-				<div class="tools-warp-form-msg">金额添加 `,` 进行区分，便于阅读。{{ ruleForm.a6 }}</div>
-				<div>
-					<el-input v-model="ruleForm.a6" @input="onVerifyNumberComma($event)" placeholder="请输入金额进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="匹配文字变色（搜索时）:" prop="a7" class="mt20">
-				<div class="tools-warp-form-msg">示例：<span v-html="text"></span></div>
-				<div>
-					<el-input v-model="ruleForm.a7" @input="onVerifyTextColor($event)" placeholder="请输入示例中的部分文字"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="数字转中文大写:" prop="a8" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证数字转成中文的大写。<span class="tools-warp-form-msg-red">{{ cnText }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a8" @input="onVerifyNumberCnUppercase($event)" placeholder="请输入金额进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="手机号码:" prop="a9" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证手机号码 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ phone }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a9" @input="onVerifyPhone($event)" placeholder="请输入手机号进行测试" maxlength="11"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="国内电话号码:" prop="a10" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证国内电话号码 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ telePhone }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a10" @input="onVerifyTelPhone($event)" placeholder="请输入国内电话号码进行测试" maxlength="12"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="登录账号:" prop="a11" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证登录账号是否正确。字母开头，允许5-16字节，允许字母数字下划线 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{
-						account
-					}}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a11" @input="onVerifyAccount($event)" placeholder="请输入账号进行测试" maxlength="16"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="密码:" prop="a12" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证密码是否正确。以字母开头，长度在6~16之间，只能包含字母、数字和下划线 (true: 正确，false: 不正确)。<span
-						class="tools-warp-form-msg-red"
-						>{{ password }}</span
-					>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a12" @input="onVerifyPassword($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="强密码:" prop="a13" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证强密码是否正确。字母+数字+特殊字符，长度在6-16之间 (true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{
-						passwordPowerful
-					}}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a13" @input="onVerifyPasswordPowerful($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="密码强度:" prop="a14" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证密码强度。返回 强、中、弱。(弱：纯数字，纯字母，纯特殊字符，中：字母+数字，字母+特殊字符，数字+特殊字符，强：字母+数字+特殊字符)<span
-						class="tools-warp-form-msg-red"
-						>{{ passwordStrength }}</span
-					>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a14" @input="onVerifyPasswordStrength($event)" placeholder="请输入密码进行测试" maxlength="16"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="IP地址:" prop="a15" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证IP地址是否正确。(true: 正确，false: 不正确)。<span class="tools-warp-form-msg-red">{{ iPAddress }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a15" @input="onVerifyIPAddress($event)" placeholder="请输入IP地址进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="邮箱:" prop="a16" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证邮箱是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ email }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a16" @input="onVerifyEmail($event)" placeholder="请输入邮箱进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="身份证:" prop="a17" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证身份证是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ idCard }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a17" @input="onVerifyIDCard($event)" placeholder="请输入身份证进行测试" maxlength="18"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="姓名:" prop="a18" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证姓名是否正确，包括少数民族名字。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ fullName }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a18" @input="onVerifyFullName($event)" placeholder="请输入姓名进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="邮政编码:" prop="a19" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证邮政编码是否正确，不能以 0 开始。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ postalCode }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a19" @input="onVerifyPostalCode($event)" placeholder="请输入邮政编码进行测试" maxlength="6"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="url:" prop="a20" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证url是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ url }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a20" @input="onVerifyUrl($event)" placeholder="请输入内容进行测试"> </el-input>
-				</div>
-			</el-form-item>
-			<el-form-item label="车牌号:" prop="a21" class="mt20">
-				<div class="tools-warp-form-msg">
-					验证车牌号是否正确。(true: 正确，false:不正确)。<span class="tools-warp-form-msg-red">{{ carNum }}</span>
-				</div>
-				<div>
-					<el-input v-model="ruleForm.a21" @input="onVerifyCarNum($event)" placeholder="请输入车牌号进行测试"> </el-input>
-				</div>
-			</el-form-item>
-		</el-form>
-	</el-card>
-</template>
-
-<script lang="ts">
-import { reactive, toRefs, defineComponent } from 'vue';
-import {
-	verifyNumberPercentage,
-	verifyNumberPercentageFloat,
-	verifyNumberIntegerAndFloat,
-	verifiyNumberInteger,
-	verifyCnAndSpace,
-	verifyEnAndSpace,
-	verifyAndSpace,
-	verifyNumberComma,
-	verifyTextColor,
-	verifyNumberCnUppercase,
-	verifyPhone,
-	verifyTelPhone,
-	verifyAccount,
-	verifyPassword,
-	verifyPasswordPowerful,
-	verifyPasswordStrength,
-	verifyIPAddress,
-	verifyEmail,
-	verifyIdCard,
-	verifyFullName,
-	verifyPostalCode,
-	verifyUrl,
-	verifyCarNum,
-} from '/@/utils/toolsValidate';
-export default defineComponent({
-	name: 'tools',
-	setup() {
-		const state = reactive({
-			text: '世间美好，与你环环相扣，祝你开心每一天！',
-			phone: false,
-			cnText: '',
-			telePhone: false,
-			account: false,
-			password: false,
-			passwordPowerful: false,
-			passwordStrength: '',
-			iPAddress: false,
-			email: false,
-			idCard: false,
-			fullName: false,
-			postalCode: false,
-			url: false,
-			carNum: false,
-			/**
-			 * 变量名为了方便，随便取了，
-			 * 实际中，按正常程序进行命名
-			 */
-			ruleForm: {
-				a1: '',
-				a2: '',
-				a3: '',
-				a4: '',
-				a5: '',
-				a6: '',
-				a7: '',
-				a8: '',
-				a9: '',
-				a10: '',
-				a11: '',
-				a12: '',
-				a13: '',
-				a14: '',
-				a15: '',
-				a16: '',
-				a17: '',
-				a18: '',
-				a19: '',
-				a20: '',
-				a21: '',
-				a22: '',
-				a23: '',
-			},
-			rules: {
-				a1: [
-					{
-						required: true,
-						message: '请输入小数或整数进行测试',
-						trigger: 'change',
-					},
-				],
-				a2: [
-					{
-						required: true,
-						message: '请输入正整数进行测试',
-						trigger: 'change',
-					},
-				],
-				a3: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
-				a4: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
-				a5: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
-				a6: [
-					{
-						required: true,
-						message: '请输入小数或整数进行测试',
-						trigger: 'change',
-					},
-				],
-				a7: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
-				a8: [{ required: true, message: '请输入金额进行测试', trigger: 'change' }],
-				a9: [
-					{
-						required: true,
-						message: '请输入手机号进行测试',
-						trigger: 'change',
-					},
-				],
-				a10: [
-					{
-						required: true,
-						message: '请输入国内电话号码进行测试',
-						trigger: 'change',
-					},
-				],
-				a11: [{ required: true, message: '请输入账号进行测试', trigger: 'change' }],
-				a12: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
-				a13: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
-				a14: [{ required: true, message: '请输入密码进行测试', trigger: 'change' }],
-				a15: [
-					{
-						required: true,
-						message: '请输入IP地址进行测试',
-						trigger: 'change',
-					},
-				],
-				a16: [{ required: true, message: '请输入邮箱进行测试', trigger: 'change' }],
-				a17: [
-					{
-						required: true,
-						message: '请输入身份证进行测试',
-						trigger: 'change',
-					},
-				],
-				a18: [{ required: true, message: '请输入姓名进行测试', trigger: 'change' }],
-				a19: [
-					{
-						required: true,
-						message: '请输入邮政编码进行测试',
-						trigger: 'change',
-					},
-				],
-				a20: [{ required: true, message: '请输入内容进行测试', trigger: 'change' }],
-				a21: [
-					{
-						required: true,
-						message: '请输入车牌号进行测试',
-						trigger: 'change',
-					},
-				],
-				a22: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
-				a23: [{ required: true, message: '请输入数字进行测试', trigger: 'change' }],
-			},
-		});
-		// 验证百分比（不可以小数）
-		const onVerifyNumberPercentage = (val: string) => {
-			state.ruleForm.a22 = verifyNumberPercentage(val);
-		};
-		// 验证百分比（可以小数）
-		const onVerifyNumberPercentageFloat = (val: string) => {
-			state.ruleForm.a23 = verifyNumberPercentageFloat(val);
-		};
-		// 小数或整数
-		const onVerifyNumberIntegerAndFloat = (val: string) => {
-			state.ruleForm.a1 = verifyNumberIntegerAndFloat(val);
-		};
-		// 正整数
-		const onVerifiyNumberInteger = (val: string) => {
-			state.ruleForm.a2 = verifiyNumberInteger(val);
-		};
-		// 去掉中文及空格
-		const onVerifyCnAndSpace = (val: string) => {
-			state.ruleForm.a3 = verifyCnAndSpace(val);
-		};
-		// 去掉英文及空格
-		const onVerifyEnAndSpace = (val: string) => {
-			state.ruleForm.a4 = verifyEnAndSpace(val);
-		};
-		// 禁止输入空格
-		const onVerifyAndSpace = (val: string) => {
-			state.ruleForm.a5 = verifyAndSpace(val);
-		};
-		// 金额用 `,` 区分开
-		const onVerifyNumberComma = (val: string) => {
-			state.ruleForm.a6 = verifyNumberComma(val);
-		};
-		// 匹配文字变色（搜索时）
-		const onVerifyTextColor = (val: string) => {
-			state.ruleForm.a7 = verifyAndSpace(val);
-			if (state.ruleForm.a7 === '') state.text = `世间美好，与你环环相扣，祝你开心每一天！`;
-			else state.text = verifyTextColor(state.ruleForm.a7, state.text);
-		};
-		// 数字转中文大写
-		const onVerifyNumberCnUppercase = (val: string) => {
-			state.ruleForm.a8 = verifyNumberIntegerAndFloat(val);
-			if (state.ruleForm.a8 === '') state.cnText = '';
-			else state.cnText = verifyNumberCnUppercase(state.ruleForm.a8);
-		};
-		// 手机号码
-		const onVerifyPhone = (val: string) => {
-			state.phone = verifyPhone(val);
-		};
-		// 国内电话号码
-		const onVerifyTelPhone = (val: string) => {
-			state.telePhone = verifyTelPhone(val);
-		};
-		// 登录账号
-		const onVerifyAccount = (val: string) => {
-			state.ruleForm.a11 = verifyCnAndSpace(val);
-			state.account = verifyAccount(state.ruleForm.a11);
-		};
-		// 密码
-		const onVerifyPassword = (val: string) => {
-			state.ruleForm.a12 = verifyCnAndSpace(val);
-			state.password = verifyPassword(state.ruleForm.a12);
-		};
-		// 强密码
-		const onVerifyPasswordPowerful = (val: string) => {
-			state.ruleForm.a13 = verifyCnAndSpace(val);
-			state.passwordPowerful = verifyPasswordPowerful(state.ruleForm.a13);
-		};
-		// 密码强度
-		const onVerifyPasswordStrength = (val: string) => {
-			state.ruleForm.a14 = verifyCnAndSpace(val);
-			state.passwordStrength = verifyPasswordStrength(state.ruleForm.a14);
-		};
-		// IP地址
-		const onVerifyIPAddress = (val: string) => {
-			state.iPAddress = verifyIPAddress(val);
-		};
-		// 邮箱
-		const onVerifyEmail = (val: string) => {
-			state.ruleForm.a16 = verifyCnAndSpace(val);
-			state.email = verifyEmail(state.ruleForm.a16);
-		};
-		// 身份证
-		const onVerifyIDCard = (val: string) => {
-			state.ruleForm.a17 = verifyCnAndSpace(val);
-			state.idCard = verifyIdCard(state.ruleForm.a17);
-		};
-		// 姓名
-		const onVerifyFullName = (val: string) => {
-			state.ruleForm.a18 = verifyAndSpace(val);
-			state.fullName = verifyFullName(state.ruleForm.a18);
-		};
-		// 邮政编码
-		const onVerifyPostalCode = (val: string) => {
-			state.ruleForm.a19 = verifiyNumberInteger(val);
-			state.postalCode = verifyPostalCode(state.ruleForm.a19);
-		};
-		// url
-		const onVerifyUrl = (val: string) => {
-			state.ruleForm.a20 = verifyAndSpace(val);
-			state.url = verifyUrl(state.ruleForm.a20);
-		};
-		// 车牌号
-		const onVerifyCarNum = (val: string) => {
-			state.ruleForm.a21 = verifyAndSpace(val);
-			state.carNum = verifyCarNum(state.ruleForm.a21);
-		};
-		return {
-			onVerifyNumberPercentage,
-			onVerifyNumberPercentageFloat,
-			onVerifyNumberIntegerAndFloat,
-			onVerifiyNumberInteger,
-			onVerifyCnAndSpace,
-			onVerifyEnAndSpace,
-			onVerifyAndSpace,
-			onVerifyNumberComma,
-			onVerifyTextColor,
-			onVerifyNumberCnUppercase,
-			onVerifyPhone,
-			onVerifyTelPhone,
-			onVerifyAccount,
-			onVerifyPassword,
-			onVerifyPasswordPowerful,
-			onVerifyPasswordStrength,
-			onVerifyIPAddress,
-			onVerifyEmail,
-			onVerifyIDCard,
-			onVerifyFullName,
-			onVerifyPostalCode,
-			onVerifyUrl,
-			onVerifyCarNum,
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.tools-warp-form {
-	::v-deep(.el-form-item--small.el-form-item) {
-		margin-bottom: 0 !important;
-	}
-	.tools-warp-form-msg {
-		color: #666666;
-		font-size: 14px;
-		width: 100%;
-		.tools-warp-form-msg-red {
-			color: red;
-		}
-	}
-	.tools-warp-form-msg + div {
-		width: 100%;
-	}
-}
-</style>

src/views/demo/visualizing/demo1.vue

@@ -1,1274 +0,0 @@
-<template>
-	<div class="visualizing-demo1">
-		<!-- 地图 -->
-		<div id="visualizingDemo1" style="height: 100%"></div>
-		<div class="visualizing-container">
-			<!-- 头部 -->
-			<div class="visualizing-container-head">
-				<div class="visualizing-container-head-left">
-					<div class="visualizing-container-head-left-text">
-						<div class="visualizing-container-head-left-text-box">{{ time.txt }}</div>
-					</div>
-				</div>
-				<div class="visualizing-container-head-center">
-					<div class="visualizing-container-head-center-box">
-						<div class="visualizing-container-head-center-maintitle">深圳市xxx软件科技有限公司</div>
-						<div class="visualizing-container-head-center-subtitle">旅游经济</div>
-					</div>
-				</div>
-				<div class="visualizing-container-head-right">
-					<div class="visualizing-container-head-right-text">
-						<div class="visualizing-container-head-right-text-box">🌤 多云转晴东南风 26~30℃</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- 图表左侧 -->
-			<div class="visualizing-container-content-left">
-				<div class="visualizing-container-content-left-flex">
-					<div class="visualizing-container-title">
-						<i class="el-icon-s-shop"></i>
-						<span>产业概况</span>
-					</div>
-					<hr class="visualizing-container-title-colorful" />
-					<div ref="visualizingContentLeftTop" style="height: 100%"></div>
-				</div>
-				<div class="visualizing-container-content-left-flex">
-					<div class="visualizing-container-title">
-						<i class="el-icon-s-promotion"></i>
-						<span>A级风景区对比</span>
-					</div>
-					<hr class="visualizing-container-title-colorful" />
-					<div ref="visualizingContentLeftBottom" style="height: 100%"></div>
-				</div>
-			</div>
-
-			<!-- 图表中间 -->
-			<div class="visualizing-container-content-center">
-				<div class="visualizing-container-content-center-bottom">
-					<div class="visualizing-container-content-center-bottom-flex">
-						<div class="visualizing-container-title">
-							<i class="el-icon-s-custom"></i>
-							<span>游客过夜情况</span>
-						</div>
-						<hr class="visualizing-container-title-colorful" />
-						<div ref="visualizingContentCenterTop" style="height: 100%"></div>
-					</div>
-					<div class="visualizing-container-content-center-bottom-flex">
-						<div class="visualizing-container-title">
-							<i class="el-icon-s-flag"></i>
-							<span>游客驻留时长</span>
-						</div>
-						<hr class="visualizing-container-title-colorful" />
-						<div ref="visualizingContentCenterBottom" style="height: 100%"></div>
-					</div>
-				</div>
-			</div>
-
-			<!-- 图表右侧 -->
-			<div class="visualizing-container-content-right">
-				<div class="visualizing-container-content-right-flex">
-					<div class="visualizing-container-title">
-						<i class="el-icon-s-marketing"></i>
-						<span>当日游客趋势分析</span>
-					</div>
-					<hr class="visualizing-container-title-colorful" />
-					<div ref="visualizingContentRightTop" style="height: 100%"></div>
-				</div>
-				<div class="visualizing-container-content-right-flex">
-					<div class="visualizing-container-title">
-						<i class="el-icon-s-data"></i>
-						<span>当月游客趋势分析</span>
-					</div>
-					<hr class="visualizing-container-title-colorful" />
-					<div ref="visualizingContentRightBottom" style="height: 100%"></div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
-import * as echarts from 'echarts';
-import 'echarts/extension/bmap/bmap';
-import { formatDate } from '/@/utils/formatTime';
-import { echartsMapList, echartsMapData, echartsMapImgs } from './mock/demo1';
-
-// 定义接口来定义对象的类型
-interface Demo1State {
-	echartsMapList: any;
-	echartsMapData: any;
-	echartsMapImgs: any;
-	time: any;
-	myCharts: any[];
-}
-
-export default defineComponent({
-	name: 'visualizingLinkDemo1',
-	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const state = reactive<Demo1State>({
-			echartsMapList,
-			echartsMapData,
-			echartsMapImgs,
-			time: {
-				txt: '',
-				fun: 0,
-			},
-			myCharts: [],
-		});
-		// 初始化时间
-		const initTime = () => {
-			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
-			state.time.fun = window.setInterval(() => {
-				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
-			}, 1000);
-		};
-		// echartsMap 将坐标信息和对应物理量的值合在一起
-		const convertData = (data: any) => {
-			let res = [];
-			for (let i = 0; i < data.length; i++) {
-				let geoCoord = state.echartsMapData[data[i].name];
-				if (geoCoord) {
-					res.push({
-						name: data[i].name,
-						value: geoCoord.concat(data[i].value),
-					});
-				}
-			}
-			return res;
-		};
-		// 初始化 echartsMap（地图上的点）
-		const initEchartsMap = () => {
-			const myChart = echarts.init(<HTMLElement>document.getElementById('visualizingDemo1'));
-			const option = {
-				tooltip: {
-					trigger: 'item',
-					formatter(params: any) {
-						// 自定义鼠标放入样式
-						let item = state.echartsMapImgs.find((v: any) => v.name === params.name);
-						let html = `<div style="width: 240px">
-							<div style="display: flex; align-items: center">
-								<img src="${item?.url}" style="width: 50px; height: 50px; border-radius: 100%; position: relative; border: 4px solid #ffffff; margin-left: -4px" />
-								<div
-									style="
-										background: #51c1ff;
-										width: 100%;
-										height: 32px;
-										margin-left: -14px;
-										display: flex;
-										align-items: center;
-										padding-left: 20px;
-										color: #fff;
-									"
-								>
-									${item?.name}
-								</div>
-							</div>
-							<div style="margin-top: 10px; font-size: 12px">
-								<div style="width: 61px"><i class="el-icon-location-information" style="margin-right: 5px"></i>地址：</div>
-								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.add}</div>
-							</div>
-							<div style="margin-top: 10px; font-size: 12px">
-								<div style="width: 61px"><i class="el-icon-chat-dot-round" style="margin-right: 5px"></i>概括：</div>
-								<div style="flex: 1; white-space: pre-wrap; word-break: break-all; margin-top: 5px; color: #333">${item?.dec}</div>
-							</div>
-						</div>`;
-						return html;
-					},
-				},
-				color: ['#ea7ccc'],
-				bmap: {
-					center: [114.064524, 22.549225],
-					zoom: 11,
-					roam: true,
-					mapStyle: {},
-				},
-				series: [
-					{
-						name: '门票收入',
-						type: 'scatter',
-						coordinateSystem: 'bmap',
-						data: convertData(state.echartsMapList),
-						symbolSize: function (val: any) {
-							return val[2] / 10;
-						},
-						encode: {
-							value: 2,
-						},
-						label: {
-							formatter: '{b}',
-							position: 'right',
-							show: false,
-						},
-						emphasis: {
-							label: {
-								show: true,
-							},
-						},
-					},
-					{
-						name: '门票收入',
-						type: 'effectScatter',
-						coordinateSystem: 'bmap',
-						data: convertData(
-							state.echartsMapList
-								.sort(function (a: any, b: any) {
-									return b.value - a.value;
-								})
-								.slice(0, 6)
-						),
-						symbolSize: function (val: any) {
-							return val[2] / 10;
-						},
-						encode: {
-							value: 2,
-						},
-						showEffectOn: 'render',
-						rippleEffect: {
-							brushType: 'stroke',
-						},
-						hoverAnimation: true,
-						label: {
-							formatter: '{b}',
-							position: 'right',
-							show: true,
-						},
-						itemStyle: {
-							shadowBlur: 100,
-							shadowColor: '#333',
-						},
-						zlevel: 1,
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-
-			// 地图
-			const map = (<any>myChart).getModel().getComponent('bmap').getBMap();
-			// BMAP_NORMAL_MAP ：此地图类型展示普通街道视图
-			// BMAP_PERSPECTIVE_MAP ：此地图类型展示透视图像视图。（这个还不会用）
-			// BMAP_SATELLITE_MAP：卫星地图 （没有坐标， 绿绿的一片的卫星地图）
-			// BMAP_HYBRID_MAP：混合地图 （既有坐标，也是绿绿的一片的卫星地图）
-			// eslint-disable-next-line no-undef
-			map.setMapType(BMAP_SATELLITE_MAP);
-			// eslint-disable-next-line no-undef
-			let bdary = new BMap.Boundary();
-			// 获取行政区域
-			bdary.get('深圳', function (rs: any) {
-				// 行政区域的点有多少个
-				let count = rs.boundaries.length;
-				for (let i = 0; i < count; i++) {
-					// eslint-disable-next-line no-undef
-					let ply = new BMap.Polygon(rs.boundaries[i], {
-						// 设置多边形边线线粗
-						strokeWeight: 4,
-						// 设置多边形边线透明度0-1
-						strokeOpacity: 1,
-						// 设置多边形边线样式为实线或虚线，取值 solid 或 dashed
-						StrokeStyle: 'dashed',
-						// 设置多边形边线颜色
-						strokeColor: '#febb50',
-						// 设置多边形填充颜色
-						fillColor: '',
-					});
-					// 建立多边形覆盖物
-					// 添加覆盖物
-					map.addOverlay(ply);
-					// 调整视野
-					map.setViewport(ply.getPath());
-				}
-				// 初始化地图，设置中心点坐标和地图级别
-				// new BMap.Point('深圳市', 11)
-				// eslint-disable-next-line no-undef
-				map.centerAndZoom(new BMap.Point(114.064524, 22.549225), 11);
-			});
-		};
-		// 产业概况
-		const initVisualizingContentLeftTop = () => {
-			const myChart = echarts.init(proxy.$refs.visualizingContentLeftTop);
-			const option = {
-				grid: {
-					top: 50,
-					right: 0,
-					bottom: 50,
-					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: '#16cfd0',
-					},
-				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '价格',
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(22, 207, 208, 0.1)',
-							},
-						},
-						axisLabel: {
-							color: '#16cfd0',
-						},
-						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',
-						},
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// A级风景区对比
-		const initVisualizingContentLeftBottom = () => {
-			const myChart = echarts.init(proxy.$refs.visualizingContentLeftBottom);
-			const option = {
-				grid: {
-					top: 50,
-					right: 10,
-					bottom: 40,
-					left: 30,
-				},
-				tooltip: {
-					trigger: 'axis',
-				},
-				xAxis: {
-					type: 'category',
-					boundaryGap: false,
-					data: ['1月', '2月', '3月', '4月', '5月'],
-					axisLine: {
-						lineStyle: {
-							color: 'rgba(22, 207, 208, 0.1)',
-							width: 1,
-						},
-					},
-					axisTick: {
-						show: false,
-					},
-					axisLabel: {
-						interval: 0,
-						color: '#16cfd0',
-						textStyle: {
-							fontSize: 10,
-						},
-					},
-				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '销量',
-						axisLabel: {
-							color: '#16cfd0',
-						},
-						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',
-						stack: '总量',
-						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],
-					},
-					{
-						name: '天数',
-						type: 'line',
-						stack: '总量',
-						smooth: true,
-						lineStyle: {
-							width: 0,
-						},
-						areaStyle: {
-							opacity: 0.8,
-							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-								{
-									offset: 0,
-									color: 'rgba(0, 221, 255)',
-								},
-								{
-									offset: 1,
-									color: 'rgba(77, 119, 255)',
-								},
-							]),
-						},
-						emphasis: {
-							focus: 'series',
-						},
-						data: [120, 282, 111, 234, 220],
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 游客过夜情况
-		const initVisualizingContentCenterTop = () => {
-			const myChart = echarts.init(proxy.$refs.visualizingContentCenterTop);
-			const min = 100;
-			const max = 1000;
-			const option = {
-				grid: {
-					top: 50,
-					right: 10,
-					bottom: 66,
-					left: 38,
-				},
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'shadow',
-					},
-				},
-				xAxis: [
-					{
-						type: 'category',
-						data: ['地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区', '地区'],
-						axisLabel: {
-							color: '#16cfd0',
-							textStyle: {
-								fontSize: 9,
-							},
-							interval: 0,
-							rotate: -45,
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgba(22, 207, 208, 0.1)',
-								width: 1,
-							},
-						},
-						axisTick: {
-							show: false,
-						},
-					},
-				],
-				yAxis: [
-					{
-						type: 'value',
-						name: '天数',
-						nameGap: 25,
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(22, 207, 208, 0.1)',
-							},
-						},
-						axisLabel: {
-							color: '#16cfd0',
-						},
-						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: [
-					{
-						type: 'bar',
-						barWidth: 15,
-						itemStyle: {
-							normal: {
-								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-									{
-										offset: 0,
-										color: '#de682e',
-									},
-									{
-										offset: 1,
-										color: '#ecc232',
-									},
-								]),
-							},
-						},
-						label: {
-							normal: {
-								show: true,
-								position: 'top',
-								formatter: function (param: any) {
-									if (param.value == max || param.value == min) {
-										return '';
-									}
-									return param.value;
-								},
-								textStyle: {
-									color: 'rgba(22, 207, 208, 0.8)',
-									fontSize: 10,
-								},
-							},
-						},
-						markPoint: {
-							symbolSize: 30,
-							label: {
-								normal: {
-									textStyle: {
-										color: '#ffffff',
-										fontSize: 10,
-									},
-								},
-							},
-							data: [
-								{ name: '年最低', value: min, xAxis: 0, yAxis: 100 },
-								{ name: '年最高', value: max, xAxis: 9, yAxis: 1000 },
-							],
-						},
-						data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 游客驻留时长
-		const initVisualizingContentCenterBottom = () => {
-			const myChart = echarts.init(proxy.$refs.visualizingContentCenterBottom);
-			const option = {
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'shadow',
-					},
-				},
-				grid: {
-					top: 26,
-					right: 10,
-					bottom: 66,
-					left: 45,
-				},
-				xAxis: {
-					type: 'value',
-					axisLabel: {
-						color: '#16cfd0',
-					},
-					splitLine: {
-						show: true,
-						lineStyle: {
-							color: 'rgba(22, 207, 208, 0.3)',
-						},
-					},
-				},
-				yAxis: {
-					type: 'category',
-					axisLabel: {
-						color: '#16cfd0',
-					},
-				},
-				series: [
-					{
-						name: '已完成',
-						type: 'bar',
-						stack: 'total',
-						label: {
-							show: true,
-						},
-						emphasis: {
-							focus: 'series',
-						},
-						barWidth: 12,
-						itemStyle: {
-							label: {
-								show: true,
-							},
-							labelLine: {
-								show: false,
-							},
-							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-								{ offset: 0, color: 'rgba(7,165,255,0.2)' },
-								{ offset: 1, color: 'rgba(7,165,255,1)' },
-							]),
-						},
-					},
-					{
-						name: '进行中',
-						type: 'bar',
-						stack: 'total',
-						label: {
-							show: true,
-						},
-						emphasis: {
-							focus: 'series',
-						},
-						barWidth: 12,
-						itemStyle: {
-							label: {
-								show: true,
-							},
-							labelLine: {
-								show: false,
-							},
-							color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-								{ offset: 0, color: 'rgba(41,244,236,0)' },
-								{ offset: 1, color: 'rgba(41,244,236,1)' },
-							]),
-						},
-					},
-				],
-				dataset: {
-					source: [
-						{ status: '已签收', value1: 33, value2: 93 },
-						{ status: '配送中', value1: 53, value2: 32 },
-						{ status: '已出库', value1: 78, value2: 65 },
-						{ status: '采购中', value1: 12, value2: 35 },
-						{ status: '接单中', value1: 90, value2: 52 },
-					],
-				},
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 当日游客趋势分析
-		const initVisualizingContentRightTop = () => {
-			const myChart = echarts.init(proxy.$refs.visualizingContentRightTop);
-			const option = {
-				grid: {
-					top: 50,
-					right: 30,
-					bottom: 50,
-					left: 20,
-				},
-				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: '#16cfd0',
-					},
-				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '亿元',
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(22, 207, 208, 0.1)',
-							},
-						},
-						axisLabel: {
-							color: '#16cfd0',
-						},
-						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',
-						name: '同比',
-						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],
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 当月游客趋势分析
-		const initVisualizingContentRightBottom = () => {
-			const myChart = echarts.init(proxy.$refs.visualizingContentRightBottom);
-			const option = {
-				grid: {
-					top: 50,
-					right: 10,
-					bottom: 40,
-					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: '#16cfd0',
-					},
-				},
-				yAxis: [
-					{
-						type: 'value',
-						name: '人数(万)',
-						axisLine: {
-							show: true,
-							lineStyle: {
-								color: 'rgba(22, 207, 208, 0.1)',
-							},
-						},
-						axisLabel: {
-							color: '#16cfd0',
-						},
-						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: [20, 15, 40, 55, 65, 85],
-						smooth: true,
-						itemStyle: {
-							color: '#EA7CCC',
-						},
-					},
-					{
-						name: '最新成交价',
-						type: 'line',
-						data: [30, 45, 65, 85, 60, 105],
-						smooth: true,
-						itemStyle: {
-							color: '#FAC958',
-						},
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 批量设置 echarts resize
-		const initEchartsResize = () => {
-			window.addEventListener('resize', () => {
-				for (let i = 0; i < state.myCharts.length; i++) {
-					state.myCharts[i].resize();
-				}
-			});
-		};
-		// 页面加载时
-		onMounted(async () => {
-			initTime();
-			await initEchartsMap();
-			await initVisualizingContentLeftTop();
-			await initVisualizingContentLeftBottom();
-			await initVisualizingContentCenterTop();
-			await initVisualizingContentCenterBottom();
-			await initVisualizingContentRightTop();
-			await initVisualizingContentRightBottom();
-			await initEchartsResize();
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			window.clearInterval(state.time.fun);
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-// 左右两侧图表宽度
-$lrWidth: 288px;
-// 中部图表高度
-$cheight: 240px;
-// 标题宽度
-$titleWidth: 240px;
-.visualizing-demo1 {
-	height: 100%;
-	width: 100%;
-	position: relative;
-	::v-deep(.BMap_cpyCtrl) {
-		display: none;
-	}
-	::v-deep(.anchorBL) {
-		display: none;
-	}
-	.visualizing-container {
-		.visualizing-container-head {
-			height: 60px;
-			width: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: flex;
-			align-items: center;
-			color: #ffffff;
-			background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
-			z-index: 3;
-			.visualizing-container-head-left {
-				flex: 1;
-				position: relative;
-				height: 60px;
-				.visualizing-container-head-left-text {
-					position: relative;
-					z-index: 1;
-					font-size: 12px;
-					opacity: 0.6;
-					width: 93%;
-					padding-left: 15px;
-					top: 50%;
-					transform: translateY(-100%);
-					.visualizing-container-head-left-text-box {
-						width: 100%;
-						position: relative;
-						padding-left: 15px;
-						&::after {
-							content: '';
-							height: 20px;
-							width: 100%;
-							position: absolute;
-							background: linear-gradient(to right, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
-							top: -1px;
-							left: 0;
-							transform: skew(30deg);
-						}
-					}
-				}
-				&::before,
-				&::after {
-					content: '';
-					height: 3px;
-					background: linear-gradient(-90deg, #16cfd0, transparent);
-					position: absolute;
-					width: 100%;
-				}
-				&::before {
-					top: 1px;
-					right: 33px;
-					opacity: 0.8;
-				}
-				&::after {
-					top: 41px;
-					right: -2px;
-				}
-			}
-			.visualizing-container-head-center {
-				height: 60px;
-				font-size: 18px;
-				text-align: center;
-				display: flex;
-				flex-direction: column;
-				position: relative;
-				padding: 0 60px;
-				background: radial-gradient(rgba(0, 0, 0, 0.7) 5%, rgba(0, 0, 0, 0.5) 15%, rgba(0, 0, 0, 0.02) 70%);
-				.visualizing-container-head-center-box {
-					margin: auto;
-					position: relative;
-					z-index: 1;
-					.visualizing-container-head-center-maintitle {
-						position: relative;
-						&::before,
-						&::after {
-							content: '';
-							position: absolute;
-							min-width: 21%;
-							height: 29px;
-							top: 2px;
-							opacity: 0.3;
-							border-top: 1px solid #16cfd0;
-						}
-						&::before {
-							left: -70px;
-							border-right: 2px solid #16cfd0;
-							transform: skew(50deg);
-						}
-						&::after {
-							right: -70px;
-							border-left: 2px solid #16cfd0;
-							transform: skew(-50deg);
-						}
-					}
-					.visualizing-container-head-center-subtitle {
-						font-size: 14px;
-						opacity: 0.8;
-						position: relative;
-						&::before,
-						&::after {
-							content: '';
-							position: absolute;
-							min-width: 35%;
-							height: 23px;
-							bottom: 8px;
-							border-bottom: 2px solid #16cfd0;
-						}
-						&::before {
-							transform: skew(50deg);
-							left: -33px;
-							border-left: 3px solid #16cfd0;
-							border-image: linear-gradient(to right, #16cfd0, rgba(22, 207, 208, 0.02)) 1 10;
-						}
-						&::after {
-							transform: skew(-50deg);
-							right: -33px;
-							border-right: 3px solid #16cfd0;
-							border-image: linear-gradient(to left, rgba(22, 207, 208, 1), rgba(22, 207, 208, 0.02)) 1 10;
-						}
-					}
-					&::before,
-					&::after {
-						content: '';
-						position: absolute;
-						width: 36px;
-						height: 17px;
-						top: -8px;
-						border-bottom: 2px solid rgba(22, 207, 208, 0.7);
-					}
-					&::before {
-						transform: skew(32deg);
-						left: -89px;
-						border-left: 3px solid rgba(22, 207, 208, 0.7);
-					}
-					&::after {
-						transform: skew(-32deg);
-						right: -89px;
-						border-right: 3px solid rgba(22, 207, 208, 0.7);
-					}
-				}
-				&::before,
-				&::after {
-					content: '';
-					position: absolute;
-					min-width: 50%;
-					height: 15px;
-					bottom: 0px;
-					border-bottom: 4px solid #16cfd0;
-				}
-				&::before {
-					transform: skew(60deg);
-					left: 13px;
-					border-left: 5px solid #16cfd0;
-				}
-				&::after {
-					transform: skew(-60deg);
-					right: 13px;
-					border-right: 5px solid #16cfd0;
-				}
-			}
-			.visualizing-container-head-right {
-				flex: 1;
-				position: relative;
-				height: 60px;
-				.visualizing-container-head-right-text {
-					position: relative;
-					z-index: 1;
-					font-size: 12px;
-					opacity: 0.6;
-					width: 93%;
-					float: right;
-					text-align: right;
-					padding-right: 15px;
-					top: 50%;
-					transform: translateY(-100%);
-					.visualizing-container-head-right-text-box {
-						width: 100%;
-						position: relative;
-						padding-right: 15px;
-						&::after {
-							content: '';
-							height: 20px;
-							width: 100%;
-							position: absolute;
-							background: linear-gradient(to left, rgba(22, 207, 208, 0.1), rgba(22, 207, 208, 0.3));
-							top: -1px;
-							right: 0;
-							transform: skew(-30deg);
-						}
-					}
-				}
-				&::before,
-				&::after {
-					content: '';
-					height: 3px;
-					background: linear-gradient(90deg, #16cfd0, transparent);
-					position: absolute;
-					width: 100%;
-				}
-				&::before {
-					top: 1px;
-					left: 33px;
-					opacity: 0.8;
-				}
-				&::after {
-					top: 41px;
-					left: -2px;
-				}
-			}
-		}
-		.visualizing-container-title {
-			max-width: $titleWidth;
-			font-size: 14px;
-			color: #ffffff;
-			opacity: 0.8;
-			padding: 0 5px;
-			border-bottom: 1px solid #ffffff;
-			border-image: linear-gradient(to right, #ffffff, rgba(22, 207, 208, 0.02)) 1 10;
-			position: relative;
-			i {
-				padding-right: 5px;
-				color: orange;
-			}
-			&::after {
-				content: '';
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				width: 1px;
-				height: 10px;
-				background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.5));
-			}
-		}
-		.visualizing-container-title-colorful {
-			max-width: $titleWidth;
-			border: 0;
-			padding: 1px;
-			background: linear-gradient(135deg, red, orange, green, #16cfd0, purple);
-			--mask-image: repeating-linear-gradient(135deg, #000 0px, #000 1px, transparent 1px, transparent 4px);
-			-webkit-mask-image: var(--mask-image);
-			mask-image: var(--mask-image);
-		}
-		.visualizing-container-content-left {
-			width: $lrWidth;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
-			padding-top: 60px;
-			z-index: 2;
-			.visualizing-container-content-left-flex {
-				height: 50%;
-				display: flex;
-				flex-direction: column;
-				padding-left: 15px;
-			}
-		}
-		.visualizing-container-content-center {
-			width: 100%;
-			height: $cheight;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
-			z-index: 1;
-			.visualizing-container-content-center-bottom {
-				width: calc(100% - #{$lrWidth * 2});
-				height: $cheight;
-				left: $lrWidth;
-				bottom: 0;
-				position: absolute;
-				display: flex;
-				padding: 0 15px;
-				.visualizing-container-content-center-bottom-flex {
-					width: 50%;
-					padding: 0 15px;
-				}
-			}
-		}
-		.visualizing-container-content-right {
-			width: $lrWidth;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			right: 0;
-			padding-top: 60px;
-			background: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.01));
-			z-index: 2;
-			.visualizing-container-content-right-flex {
-				height: 50%;
-				display: flex;
-				flex-direction: column;
-				padding-right: 15px;
-			}
-		}
-	}
-}
-</style>

src/views/demo/visualizing/demo2.vue

@@ -1,1340 +0,0 @@
-<template>
-	<div class="visualizing-demo2">
-		<!-- 顶部 -->
-		<div class="big-data-up">
-			<div class="up-left">
-				<SvgIcon name="ele-Timer" class="mr5" />
-				<span>{{ time.txt }}</span>
-			</div>
-			<div class="up-center">
-				<span>智慧农业系统平台</span>
-			</div>
-			<div class="up-right">
-				<el-dropdown size="small">
-					<span class="el-dropdown-link">
-						{{ dropdownActive }}
-						<SvgIcon name="ele-ArrowDown" class="el-icon--right" />
-					</span>
-					<template #dropdown>
-						<el-dropdown-menu>
-							<el-dropdown-item v-for="(v, k) in dropdownList" :key="k">{{ v.label }} </el-dropdown-item>
-						</el-dropdown-menu>
-					</template>
-				</el-dropdown>
-				<div class="ml15">
-					<SvgIcon name="ele-Bell" class="mr5" />
-					<span>消息</span>
-				</div>
-				<div class="ml15">
-					<SvgIcon name="ele-User" class="mr5" />
-					<span>个人</span>
-				</div>
-				<div class="ml15">
-					<SvgIcon name="ele-SwitchButton" class="mr5" />
-					<span>返回</span>
-				</div>
-			</div>
-		</div>
-
-		<div class="big-data-down">
-			<!-- 左边 -->
-			<div class="big-data-down-left">
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">天气预报</div>
-						<div class="flex-content flex-content-overflow">
-							<div class="sky">
-								<SvgIcon name="ele-Sunny" class="sky-left" />
-								<div class="sky-center">
-									<div class="mb2">
-										<span class="font">多云转晴</span>
-										<span class="font">东南风</span>
-										<span>良</span>
-									</div>
-									<div class="sky-tip">温馨提示：多云转晴，南风转北风风力3级</div>
-								</div>
-								<div class="sky-right">
-									<span>25</span>
-									<span class="font">°C</span>
-								</div>
-							</div>
-							<div class="sky-dd">
-								<div class="sky-dl" v-for="(v, k) in skyList" :key="k" :class="{ 'sky-dl-first': k === 1 }">
-									<div>{{ v.v1 }}</div>
-									<div v-if="v.type === 'title'">{{ v.v2 }}</div>
-									<div v-else>
-										<SvgIcon :name="v.v2" />
-									</div>
-									<div>{{ v.v3 }}</div>
-									<div>{{ v.v4 }}</div>
-									<div class="tip">{{ v.v5 }}</div>
-									<div>{{ v.v6 }}</div>
-									<div>{{ v.v7 }}</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">当前设备状态</div>
-						<div class="flex-content flex-content-overflow">
-							<div class="d-states">
-								<div class="d-states-item">
-									<SvgIcon name="ele-Odometer" class="i-bg1" />
-									<div class="d-states-flex">
-										<div class="d-states-item-label">园区设备数</div>
-										<div class="d-states-item-value">99</div>
-									</div>
-								</div>
-								<div class="d-states-item">
-									<SvgIcon name="ele-FirstAidKit" class="i-bg2" />
-									<div class="d-states-flex">
-										<div class="d-states-item-label">预警设备数</div>
-										<div class="d-states-item-value">10</div>
-									</div>
-								</div>
-								<div class="d-states-item">
-									<SvgIcon name="ele-VideoPlay" class="i-bg3" />
-									<div class="d-states-flex">
-										<div class="d-states-item-label">运行设备数</div>
-										<div class="d-states-item-value">20</div>
-									</div>
-								</div>
-							</div>
-							<div class="d-btn">
-								<div class="d-btn-item" v-for="(v, k) in dBtnList" :key="k" :class="{ 'd-btn-active': dBtnActive === k }">
-									<SvgIcon name="ele-Money" class="d-btn-item-left" />
-									<div class="d-btn-item-center">
-										<div>{{ v.v1 }}</div>
-										<div>{{ v.v2 }}|{{ v.v3 }}</div>
-									</div>
-									<div class="d-btn-item-eight">{{ v.v4 }}</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">近30天预警总数</div>
-						<div class="flex-content" ref="rightChartData1"></div>
-					</div>
-				</div>
-			</div>
-
-			<!-- 中间 -->
-			<div class="big-data-down-center">
-				<div class="big-data-down-center-one">
-					<div class="big-data-down-center-one-content" ref="rightChartData5">
-						<div id="3DEarth"></div>
-						<div :class="v.topLevelClass" v-for="(v, k) in earth3DBtnList" :key="k">
-							<div class="circle" v-for="i in 4" :key="i"></div>
-							<div class="text-box">
-								<SvgIcon :name="v.icon" />
-								<div class="text">{{ v.label }}</div>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="big-data-down-center-two">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">
-							<span>当前设备监测</span>
-							<span class="flex-title-small">单位：次</span>
-						</div>
-						<div class="flex-content">
-							<div class="flex-content-left">
-								<div class="monitor-item" v-for="(v, k) in chartData4List" :key="k">
-									<div class="monitor-wave" :class="{ 'monitor-active': k === chartData4Index }">
-										<div class="monitor-z-index">
-											<div class="monitor-item-label">{{ v.label }}</div>
-										</div>
-									</div>
-								</div>
-							</div>
-							<div class="flex-content-right" ref="rightChartData4"></div>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- 右边 -->
-			<div class="big-data-down-right">
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">
-							<span>近7天产品追溯扫码统计</span>
-							<span class="flex-title-small">单位：次</span>
-						</div>
-						<div class="flex-content" ref="rightChartData3"></div>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">当前任务统计</div>
-						<div class="flex-content">
-							<div class="task">
-								<div class="task-item task-first-item">
-									<div class="task-item-value task-first">25</div>
-									<div class="task-item-label">待办任务</div>
-								</div>
-								<div class="task-item">
-									<div class="task-item-box task1">
-										<div class="task-item-value">12</div>
-										<div class="task-item-label">施肥</div>
-									</div>
-								</div>
-								<div class="task-item">
-									<div class="task-item-box task2">
-										<div class="task-item-value">3</div>
-										<div class="task-item-label">施药</div>
-									</div>
-								</div>
-								<div class="task-item">
-									<div class="task-item-box task3">
-										<div class="task-item-value">5</div>
-										<div class="task-item-label">农事</div>
-									</div>
-								</div>
-								<div class="task-item">
-									<div class="task-item-box task4">
-										<div class="task-item-value">3</div>
-										<div class="task-item-label">巡园</div>
-									</div>
-								</div>
-								<div class="task-item">
-									<div class="task-item-box task5">
-										<div class="task-item-value">2</div>
-										<div class="task-item-label">采集</div>
-									</div>
-								</div>
-							</div>
-							<div ref="rightChartData6" class="progress"></div>
-						</div>
-					</div>
-				</div>
-				<div class="flex-warp-item">
-					<div class="flex-warp-item-box">
-						<div class="flex-title">
-							<span>近7天投入品记录</span>
-							<span class="flex-title-small">单位：件</span>
-						</div>
-						<div class="flex-content" ref="rightChartData2"></div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { toRefs, reactive, onMounted, onUnmounted, getCurrentInstance, defineComponent } from 'vue';
-import * as echarts from 'echarts';
-import 'echarts-gl';
-import { formatDate } from '/@/utils/formatTime';
-import { dropdownList, skyList, dBtnList, earth3DBtnList, chartData4List } from './mock/demo2';
-import worldImg from './images/world.jpg';
-import bathymetryImg from './images/bathymetry.jpg';
-export default defineComponent({
-	name: 'visualizingLinkDemo2',
-	setup() {
-		const { proxy } = getCurrentInstance() as any;
-		const state = reactive({
-			time: {
-				txt: '',
-				fun: 0,
-			},
-			dropdownList,
-			dropdownActive: '请选择',
-			skyList,
-			dBtnList,
-			chartData4Index: 0,
-			dBtnActive: 0,
-			earth3DBtnList,
-			chartData4List,
-			myCharts: [],
-		});
-		// 初始化时间
-		const initTime = () => {
-			state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
-			state.time.fun = window.setInterval(() => {
-				state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ');
-			}, 1000);
-		};
-		// 近30天预警总数
-		const initRightChartData1 = () => {
-			const myChart = echarts.init(proxy.$refs.rightChartData1);
-			const option = {
-				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',
-						},
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 当前设备监测
-		const initRightChartData4 = () => {
-			const myChart = echarts.init(proxy.$refs.rightChartData4);
-			const option = {
-				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],
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 近7天产品追溯扫码统计
-		const initRightChartData3 = () => {
-			const myChart = echarts.init(proxy.$refs.rightChartData3);
-			const option = {
-				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',
-						},
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 当前任务统计
-		const initRightChartData6 = () => {
-			const myChart = echarts.init(proxy.$refs.rightChartData6);
-			const option = {
-				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],
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 近7天投入品记录
-		const initRightChartData2 = () => {
-			const myChart = echarts.init(proxy.$refs.rightChartData2);
-			const option = {
-				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],
-					},
-				],
-			};
-			myChart.setOption(option);
-			state.myCharts.push(myChart);
-		};
-		// 3DEarth 地图
-		const init3DEarth = (globeRadius) => {
-			let el = document.getElementById('3DEarth');
-			el.style.height = `${proxy.$refs.rightChartData5.offsetHeight}px`;
-			const myChart = echarts.init(el);
-			const option = {
-				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,
-				},
-				series: {
-					type: 'lines3D',
-					coordinateSystem: 'globe',
-					blendMode: 'lighter',
-					lineStyle: {
-						width: 1,
-						color: 'rgb(50, 50, 150)',
-						opacity: 0.1,
-					},
-					data: [],
-				},
-			};
-			// 随机模拟攻击线
-			let rodamData = function () {
-				let longitude = 105.18;
-				let longitude2 = Math.random() * 360 - 180;
-				let latitude = 37.51;
-				let latitude2 = Math.random() * 180 - 90;
-				return {
-					coords: [
-						[longitude2, latitude2],
-						[longitude, latitude],
-					],
-					value: (Math.random() * 3000).toFixed(2),
-				};
-			};
-			for (let i = 0; i < 150; i++) {
-				option.series.data = option.series.data.concat(rodamData());
-			}
-			myChart.setOption(option);
-		};
-		// 监听地球大小变化
-		const initAddEventListener3DEarth = () => {
-			let w = document.body.clientWidth;
-			let globeRadius = 0;
-			if (w >= 1920) globeRadius = 100;
-			else if (w > 1200 && w < 1920) globeRadius = 70;
-			else if (w > 992 && w < 1200) globeRadius = 60;
-			else if (w > 768 && w < 992) globeRadius = 40;
-			else if (w < 768) globeRadius = 20;
-			init3DEarth(globeRadius);
-		};
-		// 批量设置 echarts resize
-		const initEchartsResize = () => {
-			initAddEventListener3DEarth();
-			window.addEventListener('resize', () => {
-				for (let i = 0; i < state.myCharts.length; i++) {
-					state.myCharts[i].resize();
-				}
-				initAddEventListener3DEarth();
-			});
-		};
-		// 页面加载时
-		onMounted(async () => {
-			initTime();
-			await initRightChartData1();
-			await initRightChartData4();
-			await initRightChartData3();
-			await initRightChartData2();
-			await initRightChartData6();
-			await initEchartsResize();
-		});
-		// 页面卸载时
-		onUnmounted(() => {
-			window.clearInterval(state.time.fun);
-		});
-		return {
-			...toRefs(state),
-		};
-	},
-});
-</script>
-
-<style scoped lang="scss">
-.visualizing-demo2 {
-	height: 100%;
-	width: 100%;
-	overflow: hidden;
-	background: url(https://gitee.com/lyt-top/vue-next-admin-images/raw/master/visualizing/demo2.jpg);
-	background-size: 100% 100%;
-	display: flex;
-	flex-direction: column;
-	font-size: 13px;
-	.big-data-up {
-		height: 70px;
-		width: 100%;
-		display: flex;
-		align-items: center;
-		padding: 0 15px;
-		color: #43bdf0;
-		overflow: hidden;
-		.up-left {
-			width: 30%;
-			font-style: italic;
-		}
-		.up-center {
-			width: 40%;
-			display: flex;
-			justify-content: center;
-			font-size: 20px;
-			letter-spacing: 5px;
-			background-image: -webkit-linear-gradient(left, #43bdf0, #c0d1f2 25%, #43bdf0 50%, #c0d1f2 75%, #43bdf0);
-			-webkit-text-fill-color: transparent;
-			background-clip: text;
-			-webkit-background-clip: text;
-			background-size: 200% 100%;
-			animation: masked-animation 4s infinite linear;
-			-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.1)));
-			@keyframes masked-animation {
-				0% {
-					background-position: 0 0;
-				}
-				100% {
-					background-position: -100% 0;
-				}
-			}
-			position: relative;
-			&::after {
-				content: '';
-				width: 50%;
-				position: absolute;
-				bottom: -15px;
-				left: 50%;
-				transform: translateX(-50%);
-				border: 1px transparent solid;
-				border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), #43bdf0) 1 10;
-			}
-			span {
-				cursor: pointer;
-			}
-		}
-		.up-right {
-			width: 30%;
-			justify-content: flex-end;
-			display: flex;
-			align-items: center;
-			.ml15:hover {
-				cursor: pointer;
-			}
-			::v-deep(.el-dropdown) {
-				font-size: 13px !important;
-				color: #43bdf0;
-				cursor: pointer;
-			}
-		}
-	}
-	.big-data-down {
-		flex: 1;
-		overflow: hidden;
-		display: flex;
-		.big-data-down-left,
-		.big-data-down-right {
-			width: 30%;
-			display: flex;
-			flex-direction: column;
-			.flex-warp-item {
-				padding: 0 7.5px 15px 15px;
-				width: 100%;
-				height: 33.33%;
-				.flex-warp-item-box {
-					width: 100%;
-					height: 100%;
-					background: rgba(22, 34, 58, 0.4);
-					display: flex;
-					flex-direction: column;
-					padding: 15px;
-					.flex-title {
-						margin-bottom: 15px;
-						color: #c0d1f2;
-						display: flex;
-						justify-content: space-between;
-						.flex-title-small {
-							font-size: 12px;
-						}
-					}
-					.flex-content {
-						flex: 1;
-						font-size: 12px;
-					}
-					.flex-content-overflow {
-						overflow: hidden;
-					}
-				}
-			}
-		}
-		.big-data-down-left {
-			color: #c0d1f2;
-			.sky {
-				display: flex;
-				align-items: center;
-				.sky-left {
-					font-size: 30px;
-				}
-				.sky-center {
-					flex: 1;
-					overflow: hidden;
-					padding: 0 10px;
-					.font {
-						margin-right: 15px;
-						background: unset !important;
-						border-radius: unset !important;
-						padding: unset !important;
-					}
-					span {
-						background: #22bc76;
-						border-radius: 2px;
-						padding: 0 5px;
-					}
-					.sky-tip {
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-				}
-				.sky-right {
-					span {
-						font-size: 30px;
-					}
-					font {
-						font-size: 20px;
-					}
-				}
-			}
-			.sky-dd {
-				.sky-dl {
-					display: flex;
-					align-items: center;
-					height: 28px;
-					overflow: hidden;
-					div {
-						flex: 1;
-						overflow: hidden;
-						i {
-							font-size: 14px;
-						}
-					}
-					.tip {
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-					&:hover {
-						background: rgba(0, 0, 0, 0.05);
-						cursor: default;
-						border-radius: 4px;
-					}
-					&:first-child:hover {
-						background: unset;
-					}
-				}
-				.sky-dl-first {
-					color: #43bdf0;
-				}
-			}
-			.d-states {
-				display: flex;
-				.d-states-item {
-					flex: 1;
-					display: flex;
-					align-items: center;
-					overflow: hidden;
-					i {
-						font-size: 20px;
-						height: 33px;
-						width: 33px;
-						line-height: 33px;
-						text-align: center;
-						border-radius: 100%;
-						flex-shrink: 1;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-					}
-					.i-bg1 {
-						background: #22bc76;
-					}
-					.i-bg2 {
-						background: #e2356d;
-					}
-					.i-bg3 {
-						background: #43bbef;
-					}
-					.d-states-flex {
-						overflow: hidden;
-						padding: 0 10px 0;
-						.d-states-item-label {
-							color: #43bdf0;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-						}
-						.d-states-item-value {
-							font-size: 20px;
-							text-align: center;
-						}
-					}
-				}
-			}
-			.d-btn {
-				margin-top: 15px;
-				.d-btn-item {
-					border: 1px solid #c0d1f2;
-					display: flex;
-					width: 100%;
-					height: 35px;
-					border-radius: 35px;
-					align-items: center;
-					padding: 0 4px;
-					margin-top: 15px;
-					cursor: pointer;
-					transition: all ease 0.3s;
-					.d-btn-item-left {
-						font-size: 20px;
-						border: 1px solid #c0d1f2;
-						width: 25px;
-						height: 25px;
-						line-height: 25px;
-						border-radius: 100%;
-						text-align: center;
-						font-size: 14px;
-					}
-					.d-btn-item-center {
-						padding: 0 10px;
-						flex: 1;
-					}
-					.d-btn-item-eight {
-						text-align: right;
-						padding-right: 10px;
-					}
-				}
-				.d-btn-active {
-					transition: all ease 0.3s;
-					border: 1px solid #43bdf0;
-					color: #43bdf0;
-					.d-btn-item-left {
-						border: 1px solid #43bdf0;
-					}
-				}
-			}
-		}
-		.big-data-down-center {
-			width: 40%;
-			display: flex;
-			flex-direction: column;
-			.big-data-down-center-one {
-				height: 66.67%;
-				padding: 0 7.5px 15px;
-				.big-data-down-center-one-content {
-					height: 100%;
-					position: relative;
-					.fixed-top,
-					.fixed-right,
-					.fixed-bottom,
-					.fixed-left {
-						position: absolute;
-						width: 100px;
-						height: 100px;
-						display: flex;
-						cursor: pointer;
-						.circle {
-							position: absolute;
-							border-radius: 50%;
-							background: rgba(0, 0, 0, 0.01);
-							z-index: 10;
-						}
-						.text-box {
-							position: relative;
-							z-index: 11;
-							color: #c0d1f2;
-							margin: auto;
-							text-align: center;
-							font-size: 12px;
-							i {
-								font-size: 28px;
-								margin-bottom: 10px;
-							}
-						}
-					}
-					.fixed-top {
-						left: 20px;
-						top: 20px;
-					}
-					.fixed-right {
-						right: 20px;
-						top: 20px;
-					}
-					.fixed-bottom {
-						right: 20px;
-						bottom: 20px;
-					}
-					.fixed-left {
-						left: 20px;
-						bottom: 20px;
-					}
-					.circle:nth-of-type(1) {
-						width: 100px;
-						height: 95px;
-						animation: turnAround 6s infinite linear;
-						box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
-					}
-					.circle:nth-of-type(2) {
-						width: 95px;
-						height: 100px;
-						animation: turnAround 10s infinite linear;
-						box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
-					}
-					.circle:nth-of-type(3) {
-						width: 110px;
-						height: 100px;
-						animation: turnAround 5s infinite linear;
-						box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
-					}
-					.circle:nth-of-type(4) {
-						width: 100px;
-						height: 110px;
-						animation: turnAround 15s infinite linear;
-						box-shadow: 0 0 1px 0 #09f, inset 0 0 10px 0 #09f;
-					}
-					@keyframes turnAround {
-						100% {
-							transform: rotate(360deg);
-						}
-					}
-				}
-			}
-			.big-data-down-center-two {
-				padding: 0 7.5px 15px;
-				height: 33.33%;
-				.flex-warp-item-box {
-					width: 100%;
-					height: 100%;
-					background: rgba(22, 34, 58, 0.4);
-					display: flex;
-					flex-direction: column;
-					padding: 15px;
-					.flex-title {
-						margin-bottom: 15px;
-						color: #c0d1f2;
-						display: flex;
-						justify-content: space-between;
-						.flex-title-small {
-							font-size: 12px;
-						}
-					}
-					.flex-content {
-						flex: 1;
-						font-size: 12px;
-						display: flex;
-						height: calc(100% - 30px);
-						.flex-content-left {
-							display: flex;
-							flex-wrap: wrap;
-							width: 120px;
-							height: 100%;
-							.monitor-item {
-								width: 50%;
-								display: flex;
-								align-items: center;
-								.monitor-wave {
-									cursor: pointer;
-									width: 40px;
-									height: 40px;
-									position: relative;
-									background-color: #43bdf0;
-									border-radius: 50%;
-									overflow: hidden;
-									text-align: center;
-									&::before,
-									&::after {
-										content: '';
-										position: absolute;
-										left: 50%;
-										width: 40px;
-										height: 40px;
-										background: #f4f4f4;
-										animation: roateOne 10s linear infinite;
-										transform: translateX(-50%);
-										z-index: 1;
-									}
-									&::before {
-										bottom: 10px;
-										border-radius: 60%;
-									}
-									&::after {
-										bottom: 8px;
-										opacity: 0.7;
-										border-radius: 37%;
-									}
-									.monitor-z-index {
-										position: relative;
-										z-index: 2;
-										color: #4eb8ff;
-										display: flex;
-										align-items: center;
-										height: 100%;
-										justify-content: center;
-										font-weight: bold;
-									}
-								}
-								@keyframes roateOne {
-									0% {
-										transform: translate(-50%, 0) rotateZ(0deg);
-									}
-									50% {
-										transform: translate(-50%, -2%) rotateZ(180deg);
-									}
-									100% {
-										transform: translate(-50%, 0%) rotateZ(360deg);
-									}
-								}
-								.monitor-active {
-									background-color: #22bc76;
-									.monitor-z-index {
-										color: #22bc76;
-									}
-								}
-							}
-						}
-						.flex-content-right {
-							flex: 1;
-						}
-					}
-				}
-			}
-		}
-		.big-data-down-right {
-			.flex-warp-item {
-				padding: 0 15px 15px 7.5px;
-				.flex-content {
-					display: flex;
-					flex-direction: column;
-					.task {
-						display: flex;
-						height: 45px;
-						.task-item {
-							flex: 1;
-							color: #c0d1f2;
-							display: flex;
-							justify-content: center;
-							.task-item-box {
-								position: relative;
-								width: 45px;
-								height: 45px;
-								overflow: hidden;
-								border-radius: 100%;
-								z-index: 0;
-								display: flex;
-								align-items: center;
-								flex-direction: column;
-								justify-content: center;
-								box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.3);
-								&::before {
-									content: '';
-									position: absolute;
-									z-index: -2;
-									left: -50%;
-									top: -50%;
-									width: 200%;
-									height: 200%;
-									background-repeat: no-repeat;
-									background-size: 50% 50%, 50% 50%;
-									background-position: 0 0, 100% 0, 100% 100%, 0 100%;
-									background-image: linear-gradient(#19d4ae, #19d4ae), linear-gradient(#5ab1ef, #5ab1ef), linear-gradient(#fa6e86, #fa6e86),
-										linear-gradient(#ffb980, #ffb980);
-									animation: rotate 2s linear infinite;
-								}
-								&::after {
-									content: '';
-									position: absolute;
-									z-index: -1;
-									left: 1px;
-									top: 1px;
-									width: calc(100% - 2px);
-									height: calc(100% - 2px);
-									border-radius: 100%;
-								}
-								.task-item-value {
-									text-align: center;
-									font-size: 14px;
-									font-weight: bold;
-								}
-								.task-item-label {
-									text-align: center;
-								}
-							}
-							.task1 {
-								&::after {
-									background: #5492be;
-								}
-							}
-							.task2 {
-								&::after {
-									background: #43a177;
-								}
-							}
-							.task3 {
-								&::after {
-									background: #a76077;
-								}
-							}
-							.task4 {
-								&::after {
-									background: #b4825a;
-								}
-							}
-							.task5 {
-								&::after {
-									background: #74568f;
-								}
-							}
-						}
-						.task-first-item {
-							flex-direction: column;
-							text-align: center;
-							.task-first {
-								font-size: 20px;
-							}
-						}
-					}
-				}
-			}
-			.progress {
-				flex: 1;
-			}
-		}
-	}
-}
-</style>

src/views/demo/visualizing/mock/demo1.ts

@@ -1,51 +0,0 @@
-// 地图模拟数据
-export const echartsMapList: Array<object> = [
-	{ name: '深圳市人民政府', value: '100' },
-	{ name: '莲花山公园', value: '100' },
-	{ name: '世界之窗', value: '100' },
-	{ name: '华侨城欢乐谷', value: '100' },
-	{ name: '宝安区西乡', value: '100' },
-];
-
-// 地图经纬度数据
-export const echartsMapData: object = {
-	深圳市人民政府: [114.064524, 22.549225],
-	莲花山公园: [114.0658, 22.560072],
-	世界之窗: [113.979419, 22.540579],
-	华侨城欢乐谷: [113.986066, 22.548056],
-	宝安区西乡: [113.869053, 22.581714],
-};
-
-// 地图图片显示
-export const echartsMapImgs: Array<object> = [
-	{
-		url: 'https://img1.baidu.com/it/u=4244861097,3561366422&fm=11&fmt=auto&gp=0.jpg',
-		name: '深圳市人民政府',
-		add: '深圳市福田区福中三路市民中心C区',
-		dec: '深圳市人民政府是根据《中华人民共和国地方各级人民代表大会和地方各级人民政府组织法》设立的，是深圳市人民代表大会的执行机关，是深圳市的国家行政机关。',
-	},
-	{
-		url: 'https://img1.baidu.com/it/u=3793608028,4006842751&fm=26&fmt=auto&gp=0.jpg',
-		name: '莲花山公园',
-		add: '广东省深圳市福田区莲花街道莲花北社区红荔路6030号',
-		dec: '莲花山公园筹建于1992年10月10日 ，1997年6月23日正式对外局部开放。',
-	},
-	{
-		url: 'https://img0.baidu.com/it/u=1406340112,1927292660&fm=26&fmt=auto&gp=0.jpg',
-		name: '世界之窗',
-		add: '深圳市南山区深南大道9037号',
-		dec: '这里，世界首座实景拍摄悬空式球幕影院“飞跃美利坚””，为游客提供集休闲放松于一体的都市时尚生活空间。',
-	},
-	{
-		url: 'https://img0.baidu.com/it/u=3042342330,902556630&fm=26&fmt=auto&gp=0.jpg',
-		name: '华侨城欢乐谷',
-		add: '广东省深圳市南山区沙河街道星河街社区侨城西街1号',
-		dec: '深圳欢乐谷注重满足人们参与、体验的新型诱游需求，营造出自然、清新、活泼、惊奇、热烈、刺激的休闲旅游氛围。',
-	},
-	{
-		url: 'https://img2.baidu.com/it/u=1075072079,1229283519&fm=11&fmt=auto&gp=0.jpg',
-		name: '宝安区西乡',
-		add: '西乡街道下辖25个社区',
-		dec: '西乡街道，隶属于广东省深圳市宝安区，位于宝安区西南部，东接石岩街道，南接新安街道，西至珠江口岸边，北接航城街道。',
-	},
-];

src/views/demo/visualizing/mock/demo2.ts

@@ -1,131 +0,0 @@
-// 顶部下来菜单
-export const dropdownList: Array<object> = [
-	{
-		label: '广东省农业农村厅',
-	},
-	{
-		label: '广西省农业农村厅',
-	},
-	{
-		label: '四川省农业农村厅',
-	},
-	{
-		label: '湖北省农业农村厅',
-	},
-	{
-		label: '福建省农业农村厅',
-	},
-	{
-		label: '山东省农业农村厅',
-	},
-	{
-		label: '江西省农业农村厅',
-	},
-];
-
-// sky 天气
-export const skyList: Array<object> = [
-	{
-		v1: '时间',
-		v2: '天气',
-		v3: '温度',
-		v4: '湿度',
-		v5: '降水概率',
-		v6: '风向',
-		v7: '风力',
-		type: 'title',
-	},
-	{
-		v1: '今天',
-		v2: 'ele-Sunny',
-		v3: '20°/26°',
-		v4: '80%',
-		v5: '50%',
-		v6: '东南风',
-		v7: '13m/s',
-	},
-	{
-		v1: '明天',
-		v2: 'ele-Lightning',
-		v3: '20°/26°',
-		v4: '80%',
-		v5: '50%',
-		v6: '东南风',
-		v7: '13m/s',
-	},
-	{
-		v1: '后天',
-		v2: 'ele-Sunny',
-		v3: '20°/26°',
-		v4: '80%',
-		v5: '50%',
-		v6: '东南风',
-		v7: '13m/s',
-	},
-];
-
-// 当前设置状态
-export const dBtnList: Array<object> = [
-	{
-		v1: '地块A-灌溉',
-		v2: '阳光玫瑰种植',
-		v3: '126天',
-		v4: '设备在线',
-	},
-	{
-		v1: '地块B-收割',
-		v2: '阳光玫瑰种植',
-		v3: '360天',
-		v4: '设备预警',
-	},
-];
-
-// 当前设备监测
-export const chartData4List: Array<object> = [
-	{
-		label: '温度',
-	},
-	{
-		label: '光照',
-	},
-	{
-		label: '湿度',
-	},
-	{
-		label: '风力',
-	},
-	{
-		label: '张力',
-	},
-	{
-		label: '气压',
-	},
-];
-
-// 3DEarth 地图周围按钮组
-export const earth3DBtnList: Array<object> = [
-	{
-		topLevelClass: 'fixed-top',
-		icon: 'ele-MagicStick',
-		label: '环境监测',
-		type: 0,
-	},
-	{
-		topLevelClass: 'fixed-right',
-		icon: 'ele-MoonNight',
-		label: '精准管理',
-		type: 1,
-	},
-	{
-		topLevelClass: 'fixed-bottom',
-		icon: 'ele-TrendCharts',
-		label: '数据报表',
-		type: 2,
-	},
-	{
-		topLevelClass: 'fixed-left',
-		icon: 'ele-Van',
-		label: '产品追溯',
-		type: 3,
-	},
-];

src/views/heating/energyAnalysis/loopEnergyCostPerformanceAppraisal/index.vue

@@ -1,21 +1,23 @@
 <template>
-  <div class="system-dic-container">
-    <el-card shadow="hover">
-      <div class="system-user-search mb15">
-        <el-form :model="state.tableData.param" ref="queryRef" :inline="true" label-width="90px">
+	<div class="system-dic-container">
+		<el-card shadow="hover">
+			<div class="system-user-search mb15">
+				<el-form :model="state.tableData.param" ref="queryRef" :inline="true" label-width="90px">
 					<el-form-item label="时间范围" prop="dateRange">
-						<el-date-picker v-model="state.tableData.param.dateRange"
+						<el-date-picker
+							v-model="state.tableData.param.dateRange"
 							size="default"
 							style="width: 240px"
 							value-format="YYYY-MM-DD"
 							type="daterange"
 							range-separator="-"
 							start-placeholder="开始日期"
-							end-placeholder="结束日期">
+							end-placeholder="结束日期"
+						>
 						</el-date-picker>
 					</el-form-item>
-          <el-form-item label="排序" prop="sort">
-            <el-select v-model="state.tableData.param.sort" placeholder="按照选择进行排名" filterable clearable size="default">
+					<el-form-item label="排序" prop="sort">
+						<el-select v-model="state.tableData.param.sort" placeholder="按照选择进行排名" filterable clearable size="default">
 							<el-option label="总耗热" :value="1" />
 							<el-option label="热单耗" :value="2" />
 							<el-option label="总耗电" :value="3" />
@@ -23,62 +25,67 @@
 							<el-option label="总耗水" :value="5" />
 							<el-option label="水单耗" :value="6" />
 						</el-select>
-          </el-form-item>
-          <el-form-item label="排序方式" prop="isdesc">
-            <el-select v-model="state.tableData.param.isdesc" placeholder="按照选择进行排名" filterable clearable size="default">
+					</el-form-item>
+					<el-form-item label="排序方式" prop="isdesc">
+						<el-select v-model="state.tableData.param.isdesc" placeholder="按照选择进行排名" filterable clearable size="default">
 							<el-option label="正序" :value="2" />
 							<el-option label="倒序" :value="1" />
 						</el-select>
-          </el-form-item>
-          <el-form-item label="换热站名称" prop="stationName">
-            <el-input v-model="state.tableData.param.stationName" placeholder="输入" clearable size="default">
-						</el-input>
-          </el-form-item>
-          <el-form-item label="环路名称" prop="loopName">
-            <el-input v-model="state.tableData.param.loopName" placeholder="输入" clearable size="default">
-						</el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button size="default" type="primary" v-auth="'query'" class="ml10" @click="queryList">
-              <el-icon>
-                <ele-Search />
-              </el-icon>
-              查询
-            </el-button>
-            <el-button size="default" v-auth="'reset'" @click="resetQuery(queryRef)">
-              <el-icon>
-                <ele-Refresh />
-              </el-icon>
-              重置
-            </el-button>
-            <!-- <el-button size="default" type="success" class="ml10" @click="onOpenDialog()">
+					</el-form-item>
+					<el-form-item label="换热站名称" prop="stationName">
+						<el-input v-model="state.tableData.param.stationName" placeholder="输入" clearable size="default"> </el-input>
+					</el-form-item>
+					<el-form-item label="环路名称" prop="loopName">
+						<el-input v-model="state.tableData.param.loopName" placeholder="输入" clearable size="default"> </el-input>
+					</el-form-item>
+					<el-form-item>
+						<el-button size="default" type="primary" v-auth="'query'" class="ml10" @click="queryList">
+							<el-icon>
+								<ele-Search />
+							</el-icon>
+							查询
+						</el-button>
+						<el-button size="default" v-auth="'reset'" @click="resetQuery(queryRef)">
+							<el-icon>
+								<ele-Refresh />
+							</el-icon>
+							重置
+						</el-button>
+						<el-button size="default" v-auth="'reset'" @click="exportData()">
+							<el-icon>
+								<ele-Download />
+							</el-icon>
+							导出
+						</el-button>
+						<!-- <el-button size="default" type="success" class="ml10" @click="onOpenDialog()">
               <el-icon>
                 <ele-FolderAdd />
               </el-icon>
               导入
             </el-button> -->
-          </el-form-item>
-        </el-form>
-      </div>
+					</el-form-item>
+				</el-form>
+			</div>
 			<div class="title">环路数据统计</div>
-      <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" >
-        <el-table-column type="index" label="序号" align="center" width="60" />
-	    	<el-table-column label="环路名称" prop="huanLuName" />
-	    	<el-table-column label="所属换热站" prop="stationName" />
-	    	<el-table-column label="总热耗" prop="unitConsumptionTotal" />
-	    	<el-table-column label="热单耗" prop="unitConsumption" />
-	    	<el-table-column label="总耗电" prop="elctricConsumptionTotal" />
-	    	<el-table-column label="电单耗" prop="elctricConsumption" />
-	    	<el-table-column label="总耗水" prop="flowLossTotal" />
-	    	<el-table-column label="水单耗" prop="flowLoss" />
-      </el-table>
-			
-      <pagination
-				v-show="state.tableData.total>0"
+			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+				<el-table-column type="index" label="序号" align="center" width="60" />
+				<el-table-column label="环路名称" prop="huanLuName" />
+				<el-table-column label="所属换热站" prop="stationName" />
+				<el-table-column label="总热耗" prop="unitConsumptionTotal" />
+				<el-table-column label="热单耗" prop="unitConsumption" />
+				<el-table-column label="总耗电" prop="elctricConsumptionTotal" />
+				<el-table-column label="电单耗" prop="elctricConsumption" />
+				<el-table-column label="总耗水" prop="flowLossTotal" />
+				<el-table-column label="水单耗" prop="flowLoss" />
+			</el-table>
+
+			<pagination
+				v-show="state.tableData.total > 0"
 				:total="state.tableData.total"
 				v-model:page="state.tableData.param.pageNum"
 				v-model:limit="state.tableData.param.pageSize"
-				@pagination="queryList" />
+				@pagination="queryList"
+			/>
 			<!-- <div class="title mt20">能耗红榜</div>
 			<div class="chart-grid">
 				<div style="height: 250px" ref="redChartOneRef"></div>
@@ -91,8 +98,8 @@
 				<div style="height: 250px" ref="blackChartTwoRef"></div>
 				<div style="height: 250px" ref="blackChartThreeRef"></div>
 			</div> -->
-    </el-card>
-  </div>
+		</el-card>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -102,6 +109,7 @@ import * as echarts from 'echarts';
 import { useStore } from '/@/store/index';
 import energyApi from '/@/api/energyAnalysis';
 import heatApi from '/@/api/heatStation';
+import downloadFile from '/@/utils/download';
 
 let global: any = {
 	redChartOneRef: null,
@@ -141,34 +149,41 @@ const state = reactive({
 			loopName: '',
 			dateRange: [],
 			pageNum: 1,
-			pageSize: 10
-		}
-	}
+			pageSize: 10,
+		},
+	},
 });
 
 const queryTree = () => {
-	heatApi.heatStation.getList({
+	heatApi.heatStation
+		.getList({
 			name: '',
 			code: '',
-			status: -1
+			status: -1,
 		})
 		.then((res: any) => {
 			state.heatList = res || [];
 		});
 };
+
+const exportData = () => {
+	energyApi.performanceExport(state.tableData.param).then((res: any) => {
+    downloadFile(res, '绩效考核数据.xlsx')
+  })
+};
+
 const queryList = () => {
-	state.tableData.loading = true
-	energyApi.getEnergyPerformance(state.tableData.param)
-		.then(res => {
-			state.tableData.data = res.list || []
-			state.tableData.total = res.Total
-			state.tableData.loading = false
-		})
-}
+	state.tableData.loading = true;
+	energyApi.getEnergyPerformance(state.tableData.param).then((res) => {
+		state.tableData.data = res.list || [];
+		state.tableData.total = res.Total;
+		state.tableData.loading = false;
+	});
+};
 // 页面加载时
 onMounted(() => {
 	// queryTree()
-	queryList()
+	queryList();
 });
 /** 重置按钮操作 */
 const resetQuery = (formEl: FormInstance | undefined) => {
@@ -183,14 +198,14 @@ let chartArr = [
 	{ globalKey: 'redChartThreeRef', refKey: redChartThreeRef },
 	{ globalKey: 'blackChartOneRef', refKey: blackChartOneRef },
 	{ globalKey: 'blackChartTwoRef', refKey: blackChartTwoRef },
-	{ globalKey: 'blackChartThreeRef', refKey: blackChartThreeRef }
-]
+	{ globalKey: 'blackChartThreeRef', refKey: blackChartThreeRef },
+];
 
 const initChart = () => {
 	chartArr.forEach((item) => {
-		initBarChart(item.globalKey, item.refKey)
-	})
-}
+		initBarChart(item.globalKey, item.refKey);
+	});
+};
 
 // 初始化图表
 const initBarChart = (gk: string, refKey: any) => {
@@ -200,41 +215,41 @@ const initBarChart = (gk: string, refKey: any) => {
 		tooltip: {
 			trigger: 'axis',
 			axisPointer: {
-				type: 'shadow'
-			}
+				type: 'shadow',
+			},
 		},
 		legend: {},
 		grid: {
 			left: '3%',
 			right: '4%',
 			bottom: '3%',
-			containLabel: true
+			containLabel: true,
 		},
 		xAxis: [
 			{
 				type: 'category',
-				data: ['换热站1', '换热站2', '换热站3', '换热站4', '换热站5', '换热站6', '换热站7']
-			}
+				data: ['换热站1', '换热站2', '换热站3', '换热站4', '换热站5', '换热站6', '换热站7'],
+			},
 		],
 		yAxis: [
 			{
-				type: 'value'
-			}
+				type: 'value',
+			},
 		],
 		series: [
 			{
 				name: '供水流量',
 				type: 'bar',
 				emphasis: {
-					focus: 'series'
+					focus: 'series',
 				},
-				data: [320, 332, 301, 334, 390, 330, 320]
-			}
-		]
+				data: [320, 332, 301, 334, 390, 330, 320],
+			},
+		],
 	};
 	(<any>global[gk]).setOption(option);
 	(<any>state.myCharts).push(global[gk]);
-}
+};
 
 // 批量设置 echarts resize
 const initEchartsResizeFun = () => {
@@ -265,7 +280,7 @@ watch(
 			state.charts.color = isIsDark ? '#dadada' : '#303133';
 			setTimeout(() => {
 				// initChart();
-			}, 500)
+			}, 500);
 		});
 	},
 	{
@@ -275,7 +290,6 @@ watch(
 );
 </script>
 
-
 <style lang="scss" scoped>
 .title {
 	font-size: 16px;
@@ -289,4 +303,4 @@ watch(
 .mt20 {
 	margin-top: 20px;
 }
-</style>
+</style>

src/views/heating/monitor/loopSupervision/heatStationDetail.vue

@@ -10,11 +10,11 @@
           <div class="item-content w100" :class="` home-one-animation${k}`">
             <p>
               <span>{{ v.contentTitle1 }}</span>
-              <span>{{ v.val1 + v.unit1 }}</span>
+              <span>{{ v.val1 }} {{ unitMap[v.contentTitle1]}}</span>
             </p>
             <p>
               <span>{{ v.contentTitle2 }}</span>
-              <span>{{ v.val2 + v.unit2 }}</span>
+              <span>{{ v.val2 }} {{unitMap[v.title + '：' + v.contentTitle2]? unitMap[v.title + '：' + v.contentTitle2]: unitMap[v.contentTitle2]}}</span>
             </p>
           </div>
         </div>
@@ -59,6 +59,7 @@ import water from '/@/assets/img/water.svg';
 import water1 from '/@/assets/img/water1.svg';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from '/@/store/index';
+import apiDatahub from '/@/api/datahub';
 
 let global: any = {
   homeCharThree: null,
@@ -75,6 +76,14 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const store = useStore()
+    const unitMap = ref<any>({});
+
+    // 统计信息的单位的字典
+    apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
+      res.values.forEach((v: any) => {
+        unitMap.value[v.value] = v.key;
+      });
+    });
     const state = reactive({
       dataOne: [
         {
@@ -147,12 +156,12 @@ export default defineComponent({
         let data = res
         state.dataOne[0].val1 = data.heatingArea //供暖面积
         state.dataOne[0].val2 = data.forRealArea //实供面积
-        state.dataOne[1].val1 = data.unitConsumption //总热耗
-        state.dataOne[1].val2 = data.unitConsumptionSingle //热单耗
-        state.dataOne[2].val1 = data.elctricConsumption //总电量
-        state.dataOne[2].val2 = data.elctricConsumptionSingle //电单耗
-        state.dataOne[3].val1 = data.flowLoss //总水量
-        state.dataOne[3].val2 = data.flowLossSingle //水量单耗
+        state.dataOne[1].val1 = data.unitConsumptionTotal //总热耗
+        state.dataOne[1].val2 = data.unitConsumption //热单耗
+        state.dataOne[2].val1 = data.elctricConsumptionTotal //总电量
+        state.dataOne[2].val2 = data.elctricConsumption //电单耗
+        state.dataOne[3].val1 = data.flowLossTotal //总水量
+        state.dataOne[3].val2 = data.flowLoss //水量单耗
       })
     }
 
@@ -282,6 +291,7 @@ export default defineComponent({
     };
 
     return {
+      unitMap,
       addDicRef,
       editDicRef,
       queryRef,

src/views/heating/monitor/loopSupervision/index.vue

@@ -23,6 +23,9 @@
               <el-option label="未发布" :value="0" />
             </el-select> -->
           </el-form-item>
+          <el-form-item label="换热站名称" prop="stationName" label-width="90">
+            <el-input v-model="tableData.param.stationName" placeholder="换热站名称" size="default"></el-input>
+          </el-form-item>
           <el-form-item>
             <el-button size="default" type="primary" class="ml10" v-auth="'query'" @click="typeList">
               <el-icon>
@@ -54,6 +57,8 @@
             {{ row.code }}
           </template>
         </el-table-column>
+        <el-table-column label="换热站" v-col="'stationName'" prop="stationName" :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column label="换热站编号" min-width="100" v-col="'stationCode'" prop="stationCode" :show-overflow-tooltip="true"></el-table-column>
         <el-table-column label="一网供水压力" prop="inPressure1" min-width="120" :show-overflow-tooltip="true" />
         <el-table-column label="二网供水压力" prop="inPressure2" min-width="120" :show-overflow-tooltip="true" />
         <el-table-column label="一网供水温度" prop="inTemperature1" min-width="120" :show-overflow-tooltip="true" />
@@ -101,6 +106,7 @@ export default defineComponent({
           pageNum: 1,
           pageSize: 10,
           types: 'loop', // 类型 station 换热站 loop环路
+          stationName: '',
           name: '',
           code: '',
         },

src/views/heating/monitor/loopSupervision/loopDetail.vue

@@ -10,11 +10,11 @@
           <div class="item-content w100" :class="` home-one-animation${k}`">
             <p>
               <span>{{ v.contentTitle1 }}</span>
-              <span>{{ v.val1 + v.unit1 }}</span>
+              <span>{{ v.val1 }} {{ unitMap[v.contentTitle1]}}</span>
             </p>
             <p>
               <span>{{ v.contentTitle2 }}</span>
-              <span>{{ v.val2 + v.unit2 }}</span>
+              <span>{{ v.val2 }} {{unitMap[v.title + '：' + v.contentTitle2]? unitMap[v.title + '：' + v.contentTitle2]: unitMap[v.contentTitle2]}}</span>
             </p>
           </div>
         </div>
@@ -26,7 +26,6 @@
     <el-row :gutter="15" class="home-card-one mt15" v-if="$route.query.code">
       <el-col :span="24">
         <div class="home-card-item p20">
-
           <el-tabs>
             <el-tab-pane label="环路监测">
               <div class="flex-row">
@@ -39,7 +38,7 @@
               </div>
               <div style="height: 300px" ref="homeLineRef"></div>
             </el-tab-pane>
-            <el-tab-pane label="流程图">
+            <el-tab-pane label="流程图" lazy>
               <div class="iframe-wrapper">
                 <iframe :src="'/plugin/topo/?bgColor=000#/name/'+ $route.query.code" height="400" width="100%" frameborder="0" class="mt15"></iframe>
                 <div class="jump" @click="jump('/plugin/topo/?bgColor=000#/name/'+ $route.query.code)">
@@ -59,6 +58,7 @@ import { toRefs, reactive, onMounted, ref, defineComponent, nextTick, watch } fr
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import * as echarts from 'echarts';
 import api from '/@/api/loopSupervision';
+import apiDatahub from '/@/api/datahub';
 
 import ele from '/@/assets/img/ele.svg';
 import ele1 from '/@/assets/img/ele1.svg';
@@ -87,6 +87,15 @@ export default defineComponent({
     const route = useRoute()
     const store = useStore()
     const tabName = ref(0)
+    const unitMap = ref<any>({});
+
+    // 统计信息的单位的字典
+    apiDatahub.template.getDictData({ DictType: 'overview_unit' }).then((res: any) => {
+      res.values.forEach((v: any) => {
+        unitMap.value[v.value] = v.key;
+      });
+    });
+
     const state = reactive({
       dataOne: [
         {
@@ -168,12 +177,12 @@ export default defineComponent({
         let data = res
         state.dataOne[0].val1 = data.heatingArea //供暖面积
         state.dataOne[0].val2 = data.forRealArea //实供面积
-        state.dataOne[1].val1 = data.unitConsumption //总热耗
-        state.dataOne[1].val2 = data.unitConsumptionSingle //热单耗
-        state.dataOne[2].val1 = data.elctricConsumption //总电量
-        state.dataOne[2].val2 = data.elctricConsumptionSingle //电单耗
-        state.dataOne[3].val1 = data.flowLoss //总水量
-        state.dataOne[3].val2 = data.flowLossSingle //水量单耗
+        state.dataOne[1].val1 = data.unitConsumptionTotal //总热耗
+        state.dataOne[1].val2 = data.unitConsumption //热单耗
+        state.dataOne[2].val1 = data.elctricConsumptionTotal //总电量
+        state.dataOne[2].val2 = data.elctricConsumption //电单耗
+        state.dataOne[3].val1 = data.flowLossTotal //总水量
+        state.dataOne[3].val2 = data.flowLoss //水量单耗
       })
     }
 
@@ -318,6 +327,7 @@ export default defineComponent({
     };
 
     return {
+      unitMap,
       jump,
       initLineChart,
       tabName,

src/views/heating/monitor/map.vue

@@ -1,80 +1,96 @@
 <template>
-  <div class="page page-full">
-    <div style="position: relative; flex: 1;">
-      <div class="map" ref="mapRef" style="height: 100%"></div>
-      <div class="search-hover">
-        <!-- <el-input v-model="searchText" @keydown.enter.native="searchPoint" placeholder="地址搜索" style="width:250px">
+	<div class="page page-full">
+		<div style="position: relative; flex: 1">
+			<div class="map" ref="mapRef" style="height: 100%"></div>
+			<div class="search-hover">
+				<!-- <el-input v-model="searchText" @keydown.enter.native="searchPoint" placeholder="地址搜索" style="width:250px">
           <template #append>
             <el-button :icon="Search" @click="searchPoint"></el-button>
           </template>
         </el-input> -->
 
-        <el-select v-model="searchText" filterable allow-create default-first-option :reserve-keyword="false" placeholder="地址搜索" style="width:250px" @change="searchPoint">
-          <el-option v-for="item in heatList" :key="item.id" :label="item.name" :value="item.id" />
-        </el-select>
-      </div>
-      <!-- 显示弹层区域 -->
-      <div class="view map-hover-station">
-        <div class="view-div" v-for="(item, index) in viewList" :key="index">
-          <div class="view-div-head">
-            <div class="title">{{ item.name }}环路</div>
-            <div class="info">
-              <div class="">
-                环路编号：{{ item.code }}
-              </div>
-              <div class="ml-4">
-                所属换热站：{{ item.stationInfo.name }}
-              </div>
-            </div>
-          </div>
-          <div class="view-div-content">
-            <div>路线信息</div>
-            <div class="mt-1 pl-4">
-              <p v-for="(point, index) in item.loopViaPointInfo" :key="index">
-                {{ point.position }}
-              </p>
-            </div>
-            <div class="mt-1">实时温度</div>
-            <el-table :data="[{
-							outTemperature1: item.outTemperature1,
-							inTemperature1: item.inTemperature1,
-							outTemperature2: item.outTemperature2,
-							inTemperature2: item.inTemperature2
-						}]" :border="true" class="mt-1">
-              <el-table-column label="一网供水温度" prop="outTemperature1" :show-overflow-tooltip="true" />
-              <el-table-column label="一网回水温度" prop="inTemperature1" :show-overflow-tooltip="true" />
-              <el-table-column label="二网供水温度" prop="outTemperature2" :show-overflow-tooltip="true" />
-              <el-table-column label="二网回水温度" prop="inTemperature2" :show-overflow-tooltip="true" />
-            </el-table>
-            <div class="mt-1">实时压力(MPa)</div>
-            <el-table :data="[{
-							outPressure1: item.outPressure1,
-							inPressure1: item.inPressure1,
-							outPressure2: item.outPressure2,
-							inPressure2: item.inPressure2,
-						}]" :border="true" class="mt-1">
-              <el-table-column label="一网供水压力" prop="outPressure1" :show-overflow-tooltip="true" />
-              <el-table-column label="一网回水压力" prop="inPressure1" :show-overflow-tooltip="true" />
-              <el-table-column label="二网供水压力" prop="outPressure2" :show-overflow-tooltip="true" />
-              <el-table-column label="二网回水压力" prop="inPressure2" :show-overflow-tooltip="true" />
-            </el-table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+				<el-select
+					v-model="searchText"
+					filterable
+					allow-create
+					default-first-option
+					:reserve-keyword="false"
+					placeholder="地址搜索"
+					style="width: 250px"
+					@change="searchPoint"
+				>
+					<el-option v-for="item in heatList" :key="item.id" :label="item.name" :value="item.id" />
+				</el-select>
+			</div>
+			<!-- 显示弹层区域 -->
+			<div class="view map-hover-station">
+				<div class="view-div" v-for="(item, index) in viewList" :key="index">
+					<div class="view-div-head">
+						<div class="title">{{ item.name }}环路</div>
+						<div class="info">
+							<div class="">环路编号：{{ item.code }}</div>
+							<div class="ml-4">所属换热站：{{ item.stationInfo.name }}</div>
+						</div>
+					</div>
+					<div class="view-div-content">
+						<div>路线信息</div>
+						<div class="mt-1 pl-4">
+							<p v-for="(point, index) in item.loopViaPointInfo" :key="index">
+								{{ point.position }}
+							</p>
+						</div>
+						<div class="mt-1">实时温度</div>
+						<el-table
+							:data="[
+								{
+									outTemperature1: item.outTemperature1,
+									inTemperature1: item.inTemperature1,
+									outTemperature2: item.outTemperature2,
+									inTemperature2: item.inTemperature2,
+								},
+							]"
+							:border="true"
+							class="mt-1"
+						>
+							<el-table-column label="一网供水温度" prop="outTemperature1" :show-overflow-tooltip="true" />
+							<el-table-column label="一网回水温度" prop="inTemperature1" :show-overflow-tooltip="true" />
+							<el-table-column label="二网供水温度" prop="outTemperature2" :show-overflow-tooltip="true" />
+							<el-table-column label="二网回水温度" prop="inTemperature2" :show-overflow-tooltip="true" />
+						</el-table>
+						<div class="mt-1">实时压力(MPa)</div>
+						<el-table
+							:data="[
+								{
+									outPressure1: item.outPressure1,
+									inPressure1: item.inPressure1,
+									outPressure2: item.outPressure2,
+									inPressure2: item.inPressure2,
+								},
+							]"
+							:border="true"
+							class="mt-1"
+						>
+							<el-table-column label="一网供水压力" prop="outPressure1" :show-overflow-tooltip="true" />
+							<el-table-column label="一网回水压力" prop="inPressure1" :show-overflow-tooltip="true" />
+							<el-table-column label="二网供水压力" prop="outPressure2" :show-overflow-tooltip="true" />
+							<el-table-column label="二网回水压力" prop="inPressure2" :show-overflow-tooltip="true" />
+						</el-table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
-
 <script lang="ts" setup>
 import { onMounted, ref, watch, nextTick } from 'vue';
-import { Search } from '@element-plus/icons-vue'
+import { Search } from '@element-plus/icons-vue';
 import { useRouter } from 'vue-router';
 import api from '/@/api/heatStation';
 import { setMarker, setLine } from '/@/utils/map';
 import { useStore } from '/@/store/index';
 
-const router = useRouter()
+const router = useRouter();
 
 const mapRef = ref();
 const searchText = ref('');
@@ -84,131 +100,145 @@ const viewList = ref<any[]>([]);
 
 let BMapGL = (window as any).BMapGL;
 let map: any = null;
-let local: any = null
-let getThemeConfig: any = null
-let points: any = []
-let loops: any = []
+let local: any = null;
+let getThemeConfig: any = null;
+let points: any = [];
+let loops: any = [];
 
 // 地图弹窗点击去环路详情，进行跳转
 window.mapToDetail = (code: string) => {
-  router.push('/heating-monitor/loopSupervision/loopDetail?code=' + code)
-}
+	router.push('/heating-monitor/loopSupervision/loopDetail?code=' + code);
+};
 
 function searchPoint(val: number | string) {
-  if (typeof val === 'number') {
-    map.setZoom(15);
-    const { lat, lnt: lng } = heatList.value.find((item: any) => item.id === val) as any
+	if (typeof val === 'number') {
+		map.setZoom(15);
+		const { lat, lnt: lng } = heatList.value.find((item: any) => item.id === val) as any;
 
-    setTimeout(() => {
-      map.centerAndZoom({ lat, lng }, 20);
-    }, 500)
+		setTimeout(() => {
+			map.centerAndZoom({ lat, lng }, 20);
+		}, 500);
 
-    local && local.search('');
+		local && local.search('');
 
-    // 选择的换热站
-  } else {
-    // 自定义的地址搜索
-    if (local) {
-      local.search(searchText.value);
-    } else {
-      local = new BMapGL.LocalSearch(map, {
-        renderOptions: { map }
-      });
-      local.search(searchText.value);
-    }
-  }
-  console.log(val)
+		// 选择的换热站
+	} else {
+		// 自定义的地址搜索
+		if (local) {
+			local.search(searchText.value);
+		} else {
+			local = new BMapGL.LocalSearch(map, {
+				renderOptions: { map },
+			});
+			local.search(searchText.value);
+		}
+	}
+	console.log(val);
 }
 
 onMounted(() => {
+	// 获取布局配置信息
+	getThemeConfig = store.state.themeConfig.themeConfig;
+	map = new BMapGL.Map(mapRef.value, {});
 
-  // 获取布局配置信息
-  getThemeConfig = store.state.themeConfig.themeConfig;
-  map = new BMapGL.Map(mapRef.value, {
-  });
+	map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
+	map.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
 
-  map.addControl(new BMapGL.ScaleControl()); // 添加比例尺控件
-  map.addControl(new BMapGL.ZoomControl()); // 添加缩放控件
+	const testPt = new BMapGL.Point(124.383044, 40.124296);
+	map.centerAndZoom(testPt, 5);
+	map.enableScrollWheelZoom();
+	if (getThemeConfig.isIsDark) {
+		map.setMapStyleV2({
+			styleId: 'b8d841ee37fd5bd41e742049b6fcd0f5',
+		});
+	}
 
-  const testPt = new BMapGL.Point(124.383044, 40.124296);
-  map.centerAndZoom(testPt, 5);
-  map.enableScrollWheelZoom();
-  if (getThemeConfig.isIsDark) {
-    map.setMapStyleV2({
-      styleId: 'b8d841ee37fd5bd41e742049b6fcd0f5'
+	// 获取环路列表
+	api.heatStation.getAll().then((res: any) => {
+		loops = res;
+		const list = res.filter((item: any) => item.loopViaPointInfo?.length > 1);
+		// console.log(list)
+		setLine(list, map);
+	});
+	// 获取换热站列表
+	api.heatStation
+		.getAllList({
+			status: 1,
+		})
+		.then((res: any) => {
+			heatList.value = res;
+			renderStation(res);
     });
-  }
-
-  // 获取环路列表
-  api.heatStation.getAll().then((res: any) => {
-    loops = res
-    const list = res.filter((item: any) => item.loopViaPointInfo?.length > 1)
-    // console.log(list)
-    setLine(list, map);
-  });
-  // 获取换热站列表
-  api.heatStation.getAllList({
-    status: 1
-  }).then((res: any) => {
-    heatList.value = res
-    renderStation(res);
-  });
-  // 地图缩放事件	
+    
+	// 地图缩放事件
   map.addEventListener('zoomend', (e: any) => {
-    // console.log('zoomend', e)
-    // console.log('zoomend', map.getZoom())
-    let zoom = map.getZoom()
-    if (zoom > 20.5 && points.length) {
-      let arr: any = []
-      let viewArrCache: any = []
-
-      points.forEach((point: any) => {
-        if (map.getBounds().containsPoint(point)) {
-          arr.push(point)
-        }
-      })
-      arr.forEach((point: any) => {
-        // 查询环路列表中属于该站点的环路列表，进行显示
-        const theLoops = loops.filter((item: any) => item.stationInfo.id === point.data.id)
-        viewArrCache = viewArrCache.concat(theLoops)
-      })
-      viewList.value = viewArrCache
-    } else {
-      viewList.value = []
-    }
-  })
-  // 获取当前视图内的点
-  // map.getBounds().containsPoint({
-  //   "lng": 124.41798,
-  //   "lat": 40.149303
-  // })
+		// console.log('zoomend', map.getZoom())
+		let zoom = map.getZoom();
+		if (zoom > 18.4 && points.length) {
+			resetAreaPoints()
+		} else {
+			viewList.value = [];
+		}
+  });
+  
+	// 地图拖拽事件
+	map.addEventListener('dragend', (e: any) => {
+		let zoom = map.getZoom();
+		if (zoom > 18.4 && points.length) {
+			resetAreaPoints()
+		} else {
+			viewList.value = [];
+		}
+	});
+	// 获取当前视图内的点
+	// map.getBounds().containsPoint({
+	//   "lng": 124.41798,
+	//   "lat": 40.149303
+	// })
 
-  // window._map = map
+	// window._map = map
 });
+
+function resetAreaPoints() {
+	let arr: any = [];
+	let viewArrCache: any = [];
+
+	points.forEach((point: any) => {
+		if (map.getBounds().containsPoint(point)) {
+			arr.push(point);
+		}
+	});
+	arr.forEach((point: any) => {
+		// 查询环路列表中属于该站点的环路列表，进行显示
+		const theLoops = loops.filter((item: any) => item.stationInfo.id === point.data.id);
+		viewArrCache = viewArrCache.concat(theLoops);
+	});
+	viewList.value = viewArrCache;
+}
+
 // 监听 vuex 中是否开启深色主题
 watch(
-  () => store.state.themeConfig.themeConfig.isIsDark,
-  (isIsDark) => {
-    nextTick(() => {
-      setTimeout(() => {
-        map.setMapStyleV2({
-          styleId: isIsDark ? 'b8d841ee37fd5bd41e742049b6fcd0f5' : '48b5759a53d0d6f607c049543d4c92e4'
-        });
-
-      }, 500);
-    });
-  },
-  {
-    deep: true,
-    immediate: true,
-  }
+	() => store.state.themeConfig.themeConfig.isIsDark,
+	(isIsDark) => {
+		nextTick(() => {
+			setTimeout(() => {
+				map.setMapStyleV2({
+					styleId: isIsDark ? 'b8d841ee37fd5bd41e742049b6fcd0f5' : '48b5759a53d0d6f607c049543d4c92e4',
+				});
+			}, 500);
+		});
+	},
+	{
+		deep: true,
+		immediate: true,
+	}
 );
 const renderStation = (list: any[]) => {
-  points = setMarker(list, map);
-  // 控制标点显示在最佳视野内
-  if (points && points.length) {
-    map.setViewport(points)
-  }
+	points = setMarker(list, map);
+	// 控制标点显示在最佳视野内
+	if (points && points.length) {
+		map.setViewport(points);
+	}
 };
 </script>
 
@@ -361,4 +391,4 @@ const renderStation = (list: any[]) => {
 	height: 30px;
 	padding: 0 10px;
 }
-</style>
+</style>

src/views/iot/alarm/log/component/edit.vue

@@ -77,7 +77,7 @@ export default defineComponent({
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
 					api.log.handle(state.ruleForm).then(() => {
-						ElMessage.success('告警出来成功');
+						ElMessage.success('告警处理成功');
 						closeDialog(); // 关闭弹窗
 						emit('dataList');
 					});

src/views/iot/alarm/setting/component/edit.vue

@@ -31,7 +31,7 @@
 				</el-form-item>
 
 				<el-form-item label="触发方式" prop="triggerType" v-if="ruleForm.productKey">
-					<el-radio-group v-model="ruleForm.triggerType">
+					<el-radio-group v-model="ruleForm.triggerType" @change="getRadio()">
 						<el-radio :label="item.type" v-for="item in typeData">{{ item.title }}</el-radio>
 					</el-radio-group>
 				</el-form-item>
@@ -291,9 +291,11 @@ export default defineComponent({
 							state.sendGatewayData[index] = res.Data;
 						});
 
-						notice.template.configIddetail(value.noticeConfig).then((res: any) => {
-							state.noticeConfigData[index] = [res];
-						});
+						if(value.noticeConfig){
+							notice.template.configIddetail(value.noticeConfig).then((res: any) => {
+								state.noticeConfigData[index] = [res];
+							});
+						}
 					});
 
 					state.action = res.data.performAction.action;
@@ -424,7 +426,6 @@ export default defineComponent({
 		};
 
 		const AddPhone = (index) => {
-			console.log();
 			state.action[index].addressee.push({
 				phone: '',
 			});
@@ -495,11 +496,18 @@ export default defineComponent({
 			alarm.common.trigger_type(state.ruleForm.productKey).then((res: any) => {
 				state.typeData = res.list || [];
 			});
+			gettriData();
+		
+		};
 
-			alarm.common.trigger_param(state.ruleForm.productKey).then((res: any) => {
+		const getRadio=()=>{
+			gettriData();
+		}
+		const gettriData=()=>{
+			alarm.common.trigger_params({productKey:state.ruleForm.productKey,triggerType:state.ruleForm.triggerType}).then((res: any) => {
 				state.triData = res.list || [];
 			});
-		};
+		}
 
 		const getNode = (event, index) => {
 			state.action[index].noticeConfig = '';
@@ -516,6 +524,8 @@ export default defineComponent({
 		};
 
 		return {
+			getRadio,
+			gettriData,
 			getTem,
 			getNode,
 			delAction,

src/views/iot/iotmanager/dashboard.vue

@@ -79,7 +79,7 @@
 				</div>
 			</el-col>
 		</el-row>
-		
+
 		<EditDic ref="editDicRef" @dataList="getAlarmList" />
 		<DetailDic ref="detailRef" @dataList="getAlarmList" />
 	</div>
@@ -211,7 +211,7 @@ export default defineComponent({
 						}
         			},
 					},
-			
+
 
 
 				],
@@ -374,7 +374,6 @@ export default defineComponent({
 		};
 		const getOverviewData = () => {
 			api.iotManage.getOverviewData().then((res:any) => {
-				console.log(res)
 				const { overview, device, alarmLevel } = res;
 				// overview
 					// "deviceTotal": 8, //设备总量
@@ -419,7 +418,6 @@ export default defineComponent({
 		};
 		const getAlarmList = () => {
 			api.iotManage.getAlarmList(state.tableData.param).then((res: any) => {
-				console.log(res)
 				state.tableData.data = res.list;
 				state.tableData.total = res.Total;
 			})
@@ -551,14 +549,14 @@ $homeNavLengh: 8;
 	.home-card-two,
 	.home-card-three {
     .home-card-item{
-      height: 500px;
+      height: 300px;
     }
     .home-card-top{
       height: 250px;
       .box-card{
-        padding: 15px 20px 20px 20px;
+        padding: 15px 20px 20px 10px;
         p{margin-bottom: 10px;}
-        &-item{margin-bottom: 20px;}
+        &-item{margin-bottom: 10px;}
       }
     }
 		.home-card-item, .home-card-top{

src/views/iot/network/server/component/list.vue

@@ -230,7 +230,7 @@ export default defineComponent({
         PageSize: state.param.pageSize
       }
       api.server.getList(params).then((res: any) => {
-        console.log(res);
+        // console.log(res);
         const { list, total, page } = res
         state.data = list
         state.total = total