syy

src/views/Cockpit.vue

@@ -3,7 +3,7 @@
   <div class="visual-con lifeline-con">
     <!--主体-->
     <div class="visual-body">
-      <div class="life-header">
+      <div class="life-header ">
         <span>四平市城市生命线监管平台</span>
       </div>
       <div class="con_left"></div>
@@ -549,9 +549,14 @@ import Cookies from 'js-cookie'
 import supermap from '@/components/supermap-2.5d' //超图
 import {
   getUserProfile
-} from '@/api/system/user'
+} from "@/api/system/user";
 
-import '../assets/styles/sb_body.css'
+import '../assets/styles/hz_body.css';
+
+import {
+  selectConfigKey
+} from "@/api/system/config";
+let echarts = require('echarts')
 
 
 const cityOptions1_1 = [{ type: '企业', url: '' }, { type: '厂站', url: '' }, { type: '阀门', url: '' }, { type: '次高压管网', url: '' }, { type: '中压管网', url: '' }];
@@ -565,14 +570,30 @@ const cityOptions5 = [{ type: '企业', url: '' }, { type: '一次网', url: ''
 const cityOptions6 = [{ type: '企业', url: '' }, { type: '直供网', url: '' }];
 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 {
@@ -603,6 +624,26 @@ export default {
     }
   },
   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);
+    	});
+    },
     toggleTab(current){
       this.currentTab = current;
       this.currentClass = current;
@@ -689,13 +730,95 @@ export default {
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 @import '@/assets/styles/base.scss';
-
 .lifeline-con {
 
+                         .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;
+                           z-index: 999;
+                           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;
+                           }
+
+                         }
+//左右侧按钮
+.btn {
+  display: flex;
+  justify-content: center;
+  width: 300px;
+  height: 195px;
+  transition: all 0.5s ease-in-out;
+
+  .btn-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+      width: 160px;
+      height: 155px;
+      margin-top: 1.25rem;
+    }
 
+    span {
+      font-weight: 400;
+      font-size: 24px;
+      color: #EFF8FC;
+      line-height: 28px;
+      font-family: pmzd;
+    }
+  }
+
+  .btn-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .btn-right-con {
+      cursor: pointer;
+      width: 131px;
+      height: 37px;
+      text-align: center;
+      background: url('../assets/index_img/name-bg.png') no-repeat center;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 32px;
+      color: #EFF8FC;
+      transition: all .2s ease-in-out;
+    }
+
+    .btn-right-con:hover {
+      filter: hue-rotate(-70deg);
+    }
+  }
+}
+
+.con_right{
+  position: absolute;
+  right: 20px;
+  top:100px;
+  z-index: 999;
+  background: rgba(0, 10, 24, 0.67);
+  width: 360px;
   .con_tckz {
     .con_tckz_div {
-      margin: 0px 0px;
+      margin: 0px 10px;
 
       .tekz_div {
         font-size: 14px;
@@ -804,6 +927,179 @@ export default {
     }
 
   }
+}
+
+
+.btn:hover {
+  filter: brightness(180%);
+}
+
+.btn-r {
+  position: absolute;
+  left: 16%;
+  top: 15%;
+  animation: btnRun 1s , movetop 3.5s 1s infinite;
+}
+
+.btn-rq {
+  position: absolute;
+  right: 12%;
+  top: 12%;
+  animation: btnRun 1s ,movetop 4s 1s infinite;
+}
+
+.btn-ps {
+  position: absolute;
+  left: 5%;
+  top: 38%;
+  animation: btnRun 1s ,movetop2 5s 1s infinite;
+}
+
+.btn-ql {
+  position: absolute;
+  left: 12%;
+  top: 60%;
+  animation: btnRun 1s ,movetop2 3s 1s infinite;
+}
+
+.btn-gl {
+  position: absolute;
+  right: 6%;
+  top: 38%;
+  animation: btnRun 1s ,movetop2 4s 1s infinite;
+}
+
+.btn-gs {
+  position: absolute;
+  right: 16%;
+  top: 59%;
+  animation: btnRun 1s , movetop2 2s 1s infinite;
+}
+
+
+//雷达
+.radar {
+  display: flex;
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -40%);
+  justify-content: center;
+  align-items: center;
+  width: 726px;
+  height: 726px;
+  animation: radarOP 1s ease-in;
+}
+
+.rotating-bg {
+  position: relative;
+  z-index: 100;
+  animation: rotatebg 2s infinite linear;
+}
+
+.rotating-image {
+  position: relative;
+  animation: rotate 5s infinite linear;
+  z-index: 150;
+}
+
+//底部按钮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);
+  }
+  .btn-span.on{
+    filter: brightness(170%) hue-rotate(-20deg);
+    box-shadow: none;
+  }
+}
+.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;
+      display: block;
+      text-align: center;
+    }
+  }
+  .btn-span2:hover{
+    filter: brightness(170%) hue-rotate(-20deg);
+    transform: translateY(-10px);
+  }
+}
+
+
+
+
+
 
 }
 

src/views/homePage.vue

@@ -338,6 +338,7 @@
 			text-align: center;
 			line-height: 80px;
 			animation: headermove 1s ease-out;
+			z-index: 999;
 
 			span {
 				line-height: 22px;