syy

src/views/sixZ.vue

@@ -0,0 +1,231 @@
+<!--可视化公共模板 林业-->
+<template>
+	<div class="visual-con lifeline-con">
+		<!--主体-->
+		<div class="visual-body">
+			<div class="life-header">
+				<span>四平市城市生命线监管平台</span>
+			</div>
+
+
+			<!-- 地图 -->
+			<supermap ref="supermap" style="width: 100%;height: 100vh;">
+			</supermap>
+
+
+			<!-- 底部按钮 -->
+			<div class="life-btm-btn">
+				<div class="btn-span">
+					<span>驾驶舱</span>
+				</div>
+				<div class="btn-span">
+					<span>监测系统</span>
+				</div>
+				<div class="btn-span">
+					<span>风险清单</span>
+				</div>
+				<div class="btn-span">
+					<span>数据库</span>
+				</div>
+				<div class="btn-span">
+					<span>监管平台</span>
+				</div>
+				<div class="btn-span">
+					<span>运营体系</span>
+				</div>
+			</div>
+
+		</div>
+	</div>
+</template>
+
+<script>
+	import Cookies from 'js-cookie'
+	import supermap from '@/components/supermap-2.5d' //超图
+	import {
+		getUserProfile
+	} from "@/api/system/user";
+
+	import '../assets/styles/hz_body.css';
+
+	import {
+		selectConfigKey
+	} from "@/api/system/config";
+	let echarts = require('echarts')
+	export default {
+		components: {
+			supermap,
+		},
+		metaInfo() {
+			return {
+				title: '全域视联态势感知平台',
+				meta: [{
+						charset: "utf-8"
+					},
+					{
+						name: "viewport",
+						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+					}
+				]
+			}
+		},
+		created() {
+
+		},
+		mounted() {
+			// 初始化地图数据
+			this.getSuperMapUrl();
+			setTimeout(() => {
+				this.title = '全域视联态势感知平台'
+			}, 1000)
+		},
+		data() {
+			return {
+				input: ''
+			}
+		},
+		methods: {
+			getSuperMapUrl() {
+				getUserProfile().then(response => {
+					let mapDeptId = response.mapDeptId
+					let num = 0;
+					if (mapDeptId == "365") {
+						num = 0;
+					} else if (mapDeptId == "369") {
+						num = 1;
+					} else if (mapDeptId == "371") {
+						num = 2;
+					} else if (mapDeptId == "373") {
+						num = 3;
+					} else if (mapDeptId == "372") {
+						num = 4;
+					} else if (mapDeptId == "370") {
+						num = 5;
+					}
+					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+				});
+			},
+		},
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	@import '@/assets/styles/base.scss';
+
+	.lifeline-con {
+		/*background: url('../assets/index_img/b-bg.jpg') no-repeat;*/
+
+		.life-header {
+			width: 100%;
+			height: 109px;
+			background: url('../assets/index_img/header-img.png') no-repeat center;
+			position: fixed;
+			top: 0;
+			font-family: pmzd;
+			font-size: 42px;
+			text-align: center;
+			line-height: 80px;
+			animation: headermove 1s ease-out;
+
+			span {
+				line-height: 22px;
+				font-weight: 400;
+				color: #EFF8FC;
+				background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
+				opacity: 1;
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+
+		}
+
+		//底部按钮5个
+	    .life-btm-btn{
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+		    justify-content: center;
+			align-items: center;
+
+			.btn-span:nth-child(1){
+				animation: btnmove 1s ;
+			}
+			.btn-span:nth-child(2){
+				animation: btnmove 1.2s ;
+			}
+			.btn-span:nth-child(3){
+				animation: btnmove 1.4s ;
+			}
+			.btn-span:nth-child(4){
+				animation: btnmove 1.6s ;
+			}
+			.btn-span:nth-child(5){
+				animation: btnmove 1.8s ;
+			}
+			.btn-span{
+				width: 166px;
+				height: 50px;
+				background:url('../assets/index_img/btm-btn.png') no-repeat center;
+				text-align: center;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin: 10px 5px;
+				transition: all 0.3s ease-in-out ;
+				cursor: pointer;
+				span{
+					font-size: 20px;
+					color: #EFF2FF;
+					font-family: ysbth;
+					line-height: 40px;
+					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+				}
+			}
+			.btn-span:hover{
+				filter: brightness(170%) hue-rotate(-20deg);
+				transform: translateY(-10px);
+			}
+		}
+		.btm-btn2{
+			position: absolute;
+			bottom: 80px;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+			animation: btmmove2 1s ease-out;
+			.btn-span2{
+				margin: 0 10px;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				transition: all 0.3s;
+
+				img{
+					width: 150px;
+					height: 100px;
+				}
+				span{
+					font-size: 20px;
+					color: #EFF2FF;
+					font-family: ysbth;
+					line-height: 40px;
+					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+					-webkit-background-clip: text;
+					-webkit-text-fill-color: transparent;
+					margin-top: -10px;
+				}
+			}
+			.btn-span2:hover{
+				filter: brightness(170%) hue-rotate(-20deg);
+				transform: translateY(-10px);
+			}
+		}
+
+
+	}
+</style>