diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec74804c..c3bcfe4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.13
+
+`2021.07.25`
+
+- 🌟 更新 依赖更新最新版本
+- 🎉 新增 数据可视化演示界面（/visualizingDemo1、/visualizingDemo2）
+- 🎉 新增 登录页扫码登录
+
 ## 1.0.12
 
 `2021.07.16`
diff --git a/package.json b/package.json
index 0e3ddeb2..29f401d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-next-admin",
-	"version": "1.0.12",
+	"version": "1.0.13",
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
@@ -11,8 +11,9 @@
 		"countup.js": "^2.0.7",
 		"cropperjs": "^1.5.12",
 		"echarts": "^5.1.2",
+		"echarts-gl": "^2.0.6",
 		"echarts-wordcloud": "^2.0.0",
-		"element-plus": "^1.0.2-beta.55",
+		"element-plus": "^1.0.2-beta.57",
 		"mitt": "^3.0.0",
 		"nprogress": "^0.2.0",
 		"print-js": "^1.6.0",
@@ -32,22 +33,22 @@
 	"devDependencies": {
 		"@types/axios": "^0.14.0",
 		"@types/clipboard": "^2.0.1",
-		"@types/node": "^16.3.2",
+		"@types/node": "^16.4.1",
 		"@types/nprogress": "^0.2.0",
 		"@types/sortablejs": "^1.10.7",
-		"@typescript-eslint/eslint-plugin": "^4.28.3",
-		"@typescript-eslint/parser": "^4.28.3",
+		"@typescript-eslint/eslint-plugin": "^4.28.4",
+		"@typescript-eslint/parser": "^4.28.4",
 		"@vitejs/plugin-vue": "^1.2.5",
-		"@vue/compiler-sfc": "^3.1.4",
+		"@vue/compiler-sfc": "^3.1.5",
 		"dotenv": "^10.0.0",
-		"eslint": "^7.30.0",
-		"eslint-plugin-vue": "^7.13.0",
+		"eslint": "^7.31.0",
+		"eslint-plugin-vue": "^7.14.0",
 		"prettier": "^2.3.2",
-		"sass": "^1.35.2",
+		"sass": "^1.36.0",
 		"sass-loader": "^12.1.0",
 		"typescript": "^4.3.5",
-		"vite": "^2.4.2",
-		"vue-eslint-parser": "^7.8.0"
+		"vite": "^2.4.3",
+		"vue-eslint-parser": "^7.9.0"
 	},
 	"browserslist": [
 		"> 1%",
diff --git a/src/router/route.ts b/src/router/route.ts
index 41b0a256..a95fda38 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -917,7 +917,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 						component: () => import('/@/layout/routerView/link.vue'),
 						meta: {
 							title: 'message.router.visualizingLinkDemo1',
-							isLink: `${import.meta.env.VITE_API_URL}/#/visualizingDemo1`,
+							isLink: `${import.meta.env.VITE_API_URL}#/visualizingDemo1`,
 							isHide: false,
 							isKeepAlive: false,
 							isAffix: false,
@@ -932,7 +932,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 						component: () => import('/@/layout/routerView/link.vue'),
 						meta: {
 							title: 'message.router.visualizingLinkDemo2',
-							isLink: `${import.meta.env.VITE_API_URL}/#/visualizingDemo2`,
+							isLink: `${import.meta.env.VITE_API_URL}#/visualizingDemo2`,
 							isHide: false,
 							isKeepAlive: false,
 							isAffix: false,
diff --git a/src/utils/setIconfont.ts b/src/utils/setIconfont.ts
index 6b090ebb..a6acf68b 100644
--- a/src/utils/setIconfont.ts
+++ b/src/utils/setIconfont.ts
@@ -1,6 +1,6 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
-	'//at.alicdn.com/t/font_2298093_h8g6cpatww5.css',
+	'//at.alicdn.com/t/font_2298093_y6u00apwst.css',
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url
diff --git a/src/views/login/component/scan.vue b/src/views/login/component/scan.vue
new file mode 100644
index 00000000..b50038cd
--- /dev/null
+++ b/src/views/login/component/scan.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="login-scan-container">
+		<div class="login-scan-qrcode" ref="qrcodeRef"></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, defineComponent, onMounted, getCurrentInstance } from 'vue';
+import QRCode from 'qrcodejs2-fixes';
+export default defineComponent({
+	name: 'login11',
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const state = reactive({});
+		// 初始化生成二维码
+		const initQrcode = () => {
+			proxy.$refs.qrcodeRef.innerHTML = '';
+			new QRCode(proxy.$refs.qrcodeRef, {
+				text: `https://qm.qq.com/cgi-bin/qm/qr?k=RdUY97Vx0T0vZ_1OOu-X1yFNkWgDwbjC&jump_from=webapi`,
+				width: 260,
+				height: 260,
+				colorDark: '#000000',
+				colorLight: '#ffffff',
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initQrcode();
+		});
+		return {
+			...toRefs(state),
+		};
+	},
+});
+</script>
+
+<style scoped lang="scss">
+.login-scan-container {
+	.login-scan-qrcode {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -40%);
+	}
+}
+</style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 458b7521..58a2c802 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -6,21 +6,27 @@
 		<div class="login-content" :class="{ 'login-content-mobile': tabsActiveName === 'mobile' }">
 			<div class="login-content-main">
 				<h4 class="login-content-title">{{ getThemeConfig.globalTitle }}后台模板</h4>
-				<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
-					<el-tab-pane :label="$t('message.label.one1')" name="account" :disabled="tabsActiveName === 'account'">
-						<transition name="el-zoom-in-center">
-							<Account v-show="isTabPaneShow" />
-						</transition>
-					</el-tab-pane>
-					<el-tab-pane :label="$t('message.label.two2')" name="mobile" :disabled="tabsActiveName === 'mobile'">
-						<transition name="el-zoom-in-center">
-							<Mobile v-show="!isTabPaneShow" />
-						</transition>
-					</el-tab-pane>
-				</el-tabs>
-				<div class="mt10">
-					<el-button type="text" size="small">{{ $t('message.link.one3') }}</el-button>
-					<el-button type="text" size="small">{{ $t('message.link.two4') }}</el-button>
+				<div v-if="!isScan">
+					<el-tabs v-model="tabsActiveName" @tab-click="onTabsClick">
+						<el-tab-pane :label="$t('message.label.one1')" name="account" :disabled="tabsActiveName === 'account'">
+							<transition name="el-zoom-in-center">
+								<Account v-show="isTabPaneShow" />
+							</transition>
+						</el-tab-pane>
+						<el-tab-pane :label="$t('message.label.two2')" name="mobile" :disabled="tabsActiveName === 'mobile'">
+							<transition name="el-zoom-in-center">
+								<Mobile v-show="!isTabPaneShow" />
+							</transition>
+						</el-tab-pane>
+					</el-tabs>
+					<div class="mt10">
+						<el-button type="text" size="small">{{ $t('message.link.one3') }}</el-button>
+						<el-button type="text" size="small">{{ $t('message.link.two4') }}</el-button>
+					</div>
+				</div>
+				<Scan v-else />
+				<div class="login-content-main-sacn" @click="isScan = !isScan">
+					<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
 				</div>
 			</div>
 		</div>
@@ -35,15 +41,17 @@
 import { toRefs, reactive, computed } from 'vue';
 import Account from '/@/views/login/component/account.vue';
 import Mobile from '/@/views/login/component/mobile.vue';
+import Scan from '/@/views/login/component/scan.vue';
 import { useStore } from '/@/store/index';
 export default {
 	name: 'login',
-	components: { Account, Mobile },
+	components: { Account, Mobile, Scan },
 	setup() {
 		const store = useStore();
 		const state = reactive({
 			tabsActiveName: 'account',
 			isTabPaneShow: true,
+			isScan: false,
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
@@ -108,6 +116,40 @@ export default {
 				white-space: nowrap;
 			}
 		}
+		.login-content-main-sacn {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 51px;
+			height: 50px;
+			overflow: hidden;
+			cursor: pointer;
+			opacity: 0.7;
+			transition: all ease 0.3s;
+			&::before {
+				content: '';
+				position: absolute;
+				width: 0;
+				height: 0;
+				border-bottom: 50px solid #ffffff;
+				border-right: 50px solid transparent;
+				z-index: 2;
+			}
+			&:hover {
+				opacity: 1;
+				transition: all ease 0.3s;
+			}
+			i {
+				content: '';
+				width: 50px;
+				height: 50px;
+				position: absolute;
+				top: -2px;
+				right: 0px;
+				font-size: 50px;
+				z-index: 1;
+			}
+		}
 	}
 	.login-content-mobile {
 		height: 418px;
diff --git a/src/views/visualizing/demo1.vue b/src/views/visualizing/demo1.vue
index 2ed7cc80..443a4461 100644
--- a/src/views/visualizing/demo1.vue
+++ b/src/views/visualizing/demo1.vue
@@ -1,3 +1,1268 @@
 <template>
-	<div>数据可视化演示1</div>
+	<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';
+export default defineComponent({
+	name: 'visualizingLinkDemo1',
+	setup() {
+		const { proxy } = getCurrentInstance() as any;
+		const state = reactive({
+			echartsMapList,
+			echartsMapData,
+			echartsMapImgs,
+			time: {
+				txt: '',
+				fun: 0,
+			},
+		});
+		// 初始化时间
+		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) => {
+			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(document.getElementById('visualizingDemo1'));
+			const option = {
+				tooltip: {
+					trigger: 'item',
+					formatter(params) {
+						// 自定义鼠标放入样式
+						let item = state.echartsMapImgs.find((v) => 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) {
+							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, b) {
+									return b.value - a.value;
+								})
+								.slice(0, 6)
+						),
+						symbolSize: function (val) {
+							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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+
+			// 地图
+			const map = 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) {
+				// 行政区域的点有多少个
+				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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 游客过夜情况
+		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) {
+									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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 游客驻留时长
+		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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 当日游客趋势分析
+		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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 当月游客趋势分析
+		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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTime();
+			initEchartsMap();
+			initVisualizingContentLeftTop();
+			initVisualizingContentLeftBottom();
+			initVisualizingContentCenterTop();
+			initVisualizingContentCenterBottom();
+			initVisualizingContentRightTop();
+			initVisualizingContentRightBottom();
+		});
+		// 页面卸载时
+		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: #fff;
+			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>
diff --git a/src/views/visualizing/demo2.vue b/src/views/visualizing/demo2.vue
index 0c21ff0d..3d971b4f 100644
--- a/src/views/visualizing/demo2.vue
+++ b/src/views/visualizing/demo2.vue
@@ -1,3 +1,1343 @@
 <template>
-	<div>数据可视化演示2</div>
+	<div class="visualizing-demo2">
+		<!-- 顶部 -->
+		<div class="big-data-up">
+			<div class="up-left">
+				<i class="el-icon-time mr5"></i>
+				<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 }}
+						<i class="el-icon-arrow-down el-icon--right"></i>
+					</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">
+					<i class="el-icon-bell mr5"></i>
+					<span>消息</span>
+				</div>
+				<div class="ml15">
+					<i class="el-icon-user mr5"></i>
+					<span>个人</span>
+				</div>
+				<div class="ml15">
+					<i class="el-icon-switch-button mr5"></i>
+					<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">
+								<i class="sky-left el-icon-cloudy-and-sunny"></i>
+								<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>
+										<i :class="v.v2"></i>
+									</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">
+									<i class="el-icon-odometer i-bg1"></i>
+									<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">
+									<i class="el-icon-first-aid-kit i-bg2"></i>
+									<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">
+									<i class="el-icon-video-play i-bg3"></i>
+									<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 }">
+									<i class="d-btn-item-left el-icon-money"></i>
+									<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">
+								<i :class="v.icon"></i>
+								<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,
+		});
+		// 初始化时间
+		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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 当前设备监测
+		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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 近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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 当前任务统计
+		const initRightChartData6 = () => {
+			const myChart = echarts.init(proxy.$refs.rightChartData6);
+			const option = {
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow',
+					},
+				},
+				grid: {
+					top: 20,
+					right: 42,
+					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: 10,
+						},
+					},
+				],
+				series: [
+					{
+						name: '标准化',
+						type: 'bar',
+						barWidth: 12, // 柱子宽度
+						label: {
+							show: true,
+							position: 'right', // 位置
+							color: '#A7D6F4',
+							fontSize: 10,
+							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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 近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);
+			window.addEventListener('resize', () => {
+				myChart.resize();
+			});
+		};
+		// 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 initAddEventListener3DEarthFun = () => {
+			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);
+		};
+		// 监听地球大小变化
+		const initAddEventListener3DEarth = () => {
+			initAddEventListener3DEarthFun();
+			window.addEventListener('resize', () => {
+				initAddEventListener3DEarthFun();
+			});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initAddEventListener3DEarth();
+			initTime();
+			initRightChartData1();
+			initRightChartData4();
+			initRightChartData3();
+			initRightChartData2();
+			initRightChartData6();
+		});
+		// 页面卸载时
+		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, #000718, #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;
+					}
+					.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>
diff --git a/src/views/visualizing/images/bathymetry.jpg b/src/views/visualizing/images/bathymetry.jpg
new file mode 100644
index 00000000..5f9eebe3
Binary files /dev/null and b/src/views/visualizing/images/bathymetry.jpg differ
diff --git a/src/views/visualizing/images/world.jpg b/src/views/visualizing/images/world.jpg
new file mode 100644
index 00000000..22c75661
Binary files /dev/null and b/src/views/visualizing/images/world.jpg differ
diff --git a/src/views/visualizing/mock/demo1.ts b/src/views/visualizing/mock/demo1.ts
new file mode 100644
index 00000000..60fd944c
--- /dev/null
+++ b/src/views/visualizing/mock/demo1.ts
@@ -0,0 +1,51 @@
+// 地图模拟数据
+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: '西乡街道，隶属于广东省深圳市宝安区，位于宝安区西南部，东接石岩街道，南接新安街道，西至珠江口岸边，北接航城街道。',
+	},
+];
diff --git a/src/views/visualizing/mock/demo2.ts b/src/views/visualizing/mock/demo2.ts
new file mode 100644
index 00000000..08bddb2d
--- /dev/null
+++ b/src/views/visualizing/mock/demo2.ts
@@ -0,0 +1,131 @@
+// 顶部下来菜单
+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: 'el-icon-cloudy-and-sunny',
+		v3: '20°/26°',
+		v4: '80%',
+		v5: '50%',
+		v6: '东南风',
+		v7: '13m/s',
+	},
+	{
+		v1: '明天',
+		v2: 'el-icon-lightning',
+		v3: '20°/26°',
+		v4: '80%',
+		v5: '50%',
+		v6: '东南风',
+		v7: '13m/s',
+	},
+	{
+		v1: '后天',
+		v2: 'el-icon-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: 'el-icon-s-marketing',
+		label: '环境监测',
+		type: 0,
+	},
+	{
+		topLevelClass: 'fixed-right',
+		icon: 'el-icon-s-cooperation',
+		label: '精准管理',
+		type: 1,
+	},
+	{
+		topLevelClass: 'fixed-bottom',
+		icon: 'el-icon-s-order',
+		label: '数据报表',
+		type: 2,
+	},
+	{
+		topLevelClass: 'fixed-left',
+		icon: 'el-icon-s-claim',
+		label: '产品追溯',
+		type: 3,
+	},
+];