修改样式

spring-cloud/server-page/src/main/resources/static/testEcharts/test/components/test61/test61.css

@@ -45,7 +45,7 @@
 }
 
 .bg-center-img-two-text {
-    font-size: 12px !important;
+    font-size: 0.15 !important;
     font-weight: 700;
     color: #75e2fa;
 }

spring-cloud/server-page/src/main/resources/static/testEcharts/test/css/coom.css

@@ -1,356 +1,426 @@
 html {
-  user-select: none;
+    user-select: none;
 }
+
 .heaTit {
-  line-height: 1rem;
+    line-height: 1rem;
 }
+
 .heaTit h1 {
-  color: #8caaf5;
-  text-shadow: 1px 1px #ffffff, -1px -1px #2205f5;
-  font-size: 0.45rem;
-  letter-spacing: 0.1rem;
+    color: #8caaf5;
+    text-shadow: 1px 1px #ffffff, -1px -1px #2205f5;
+    font-size: 0.45rem;
+    letter-spacing: 0.1rem;
 }
+
 .box {
-  position: absolute;
-  width: 12rem;
-  height: 3rem;
-  box-sizing: border-box;
-  resize: both;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  max-height: 100%;
-}
+    position: absolute;
+    width: 12rem;
+    height: 3rem;
+    left: 0;
+    top: 0;
+    box-sizing: border-box;
+    resize: both;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
+}
+
 .test-box {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 0.6rem;
-  box-sizing: border-box;
-  overflow: auto;
-}
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding-top: 0.6rem;
+    box-sizing: border-box;
+    overflow: auto;
+}
+
 .test-box::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
+    /*滚动条整体样式*/
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
 }
+
 .test-box::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 0.02rem;
+    /*滚动条里面小方块*/
+    border-radius: 0.02rem;
 }
+
 .test-box::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  border-radius: 0.02rem;
-  background: #ededed00;
+    /*滚动条里面轨道*/
+    border-radius: 0.02rem;
+    background: #ededed00;
 }
+
 .theme .box .bgTitle {
-  height: 100%;
-  background: url(../images/stationGroup/cbiaoti.png) no-repeat;
-  padding-left: 12%;
-  background-position: -7px;
-  background-size: 99%;
-  margin-left: -0.06rem;
-}
+    height: 100%;
+    background: url(../images/stationGroup/cbiaoti.png) no-repeat;
+    padding-left: 12%;
+    background-position: -7px;
+    background-size: 99%;
+    margin-left: -0.06rem;
+}
+
 .theme .box .bgTitle2 {
-  height: 100%;
-  background: url(../images/stationGroup/title.png) no-repeat;
-  padding-left: 12%;
-  background-position: -7px;
-  background-size: 58%;
-  margin-left: -0.06rem;
-}
+    height: 100%;
+    background: url(../images/stationGroup/title.png) no-repeat;
+    padding-left: 12%;
+    background-position: -7px;
+    background-size: 58%;
+    margin-left: -0.06rem;
+}
+
 .content {
-  overflow: auto;
-  height: 100%;
-  box-sizing: border-box;
+    overflow: auto;
+    height: 100%;
+    box-sizing: border-box;
 }
+
 .content::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 0px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 0px;
+    /*滚动条整体样式*/
+    width: 0px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0px;
 }
+
 .content::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 0.2rem;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: rgba(70, 116, 214, 0.452);
+    /*滚动条里面小方块*/
+    border-radius: 0.2rem;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(70, 116, 214, 0.452);
 }
+
 .content::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #ededed;
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed;
 }
+
 .tool {
-  min-height: 0.6rem;
-  padding-right: 6px;
-  padding-left: 6px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  height: 0.4rem;
-}
+    min-height: 0.6rem;
+    padding-right: 6px;
+    padding-left: 6px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 0.4rem;
+}
+
 .toolBox {
-  display: flex;
-  font-size: 15px;
-  transition: all 0.2s;
-  position: absolute;
-  bottom: 0rem;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 99;
-}
+    display: flex;
+    font-size: 15px;
+    transition: all 0.2s;
+    position: absolute;
+    bottom: 0rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 99;
+}
+
 .toolBox:hover {
-  opacity: 1;
+    opacity: 1;
 }
+
 .toolBox span {
-  margin: 5px;
-  color: aquamarine;
-  /* font-size: 60px;  */
-  font-size: 0.4rem;
-  border-radius: 50%;
+    margin: 5px;
+    color: aquamarine;
+    /* font-size: 60px;  */
+    font-size: 0.4rem;
+    border-radius: 50%;
 }
+
 .content {
-  flex: 5;
+    flex: 5;
 }
+
+
 /* 弹框 */
+
 .toolTitle {
-  height: 0.6rem;
-  text-align: center;
-  font-size: 0.4rem;
+    height: 0.6rem;
+    text-align: center;
+    font-size: 0.4rem;
 }
+
 .containerTool {
-  color: #fff;
-  position: absolute;
-  text-align: center;
-  padding: 0.2rem;
-  /* width: 300px; */
-  display: none;
-  z-index: 110;
-  left: 50%;
-  top: 50%;
-  background-color: rgba(22, 123, 210, 0.8);
-}
+    color: #fff;
+    position: absolute;
+    text-align: center;
+    padding: 0.2rem;
+    /* width: 300px; */
+    display: none;
+    z-index: 110;
+    left: 50%;
+    top: 50%;
+    background-color: rgba(22, 123, 210, 0.8);
+}
+
 .containerTool ul {
-  margin: 15px 0;
+    margin: 15px 0;
 }
+
 .containerTool ul li {
-  margin: 7px 0;
+    margin: 7px 0;
 }
+
 .containerTool ul li input {
-  border-radius: 10px;
-  color: #fff;
-  background-color: transparent;
+    border-radius: 10px;
+    color: #fff;
+    background-color: transparent;
 }
+
 .toolBtn {
-  background: transparent;
-  opacity: 0.8;
-  padding: 4px;
-  border-radius: 10px;
-  cursor: pointer;
-  color: #fff;
-  /* text-shadow: 1px 1px rgb(108 247 27), -1px -1px #f0f;
+    background: transparent;
+    opacity: 0.8;
+    padding: 4px;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #fff;
+    /* text-shadow: 1px 1px rgb(108 247 27), -1px -1px #f0f;
     box-shadow: 3px 0px 10px #fff, -3px 0px 10px rgb(255 106 106), 0px 3px 10px rgb(117 235 88), 0px -3px 10px rgb(87 84 221); */
 }
+
 .toolBtn i {
-  font-size: 0.56rem;
+    font-size: 0.56rem;
 }
+
 .toolBtn:hover {
-  opacity: 1;
+    opacity: 1;
 }
+
 .header .title {
-  font-size: 0.6rem;
-  text-align: center;
-  box-sizing: border-box;
+    font-size: 0.6rem;
+    text-align: center;
+    box-sizing: border-box;
 }
+
+
 /* 弹框 */
+
 .holdToos,
 .addThemeToos,
 .holdToosLose,
 .cancelToos {
-  font-size: 0.6rem;
-  color: #e3e3e3;
-  position: absolute;
-  top: 18%;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba(105, 36, 250, 0.5);
-  padding: 0.1rem;
-  box-sizing: border-box;
-  border-radius: 5px;
-  font-weight: bold;
-  transition: all 0.5s;
-  display: none;
-  z-index: 99999;
-}
+    font-size: 0.6rem;
+    color: #e3e3e3;
+    position: absolute;
+    top: 18%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(105, 36, 250, 0.5);
+    padding: 0.1rem;
+    box-sizing: border-box;
+    border-radius: 5px;
+    font-weight: bold;
+    transition: all 0.5s;
+    display: none;
+    z-index: 99999;
+}
+
 .holdToos .succ {
-  color: #0f0;
+    color: #0f0;
 }
+
 .holdToos .lose {
-  color: #f00;
-  display: none;
+    color: #f00;
+    display: none;
 }
+
 .holdToos.loseActive .succ {
-  display: none;
+    display: none;
 }
+
 .cancelToos {
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  display: none;
-  /* opacity: 0; */
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    display: none;
+    /* opacity: 0; */
 }
+
 .cancelToos p {
-  font-size: 20px;
-  margin: 0.16rem;
-  color: red;
-  letter-spacing: 0.16rem;
+    font-size: 20px;
+    margin: 0.16rem;
+    color: red;
+    letter-spacing: 0.16rem;
 }
+
 .cancelToos .btns {
-  display: flex;
+    display: flex;
 }
+
 .cancelToos .btns button {
-  margin-right: 0.68rem;
-  margin-left: 2px;
-  padding: 0 8px;
-  cursor: pointer;
+    margin-right: 0.68rem;
+    margin-left: 2px;
+    padding: 0 8px;
+    cursor: pointer;
 }
+
 .cancelToos .btns button.succBtn {
-  background-color: #0f0;
+    background-color: #0f0;
 }
+
 .cancelToos .btns button.loseBtn {
-  margin-right: 0;
-  background-color: rgba(238, 83, 83, 0.938);
+    margin-right: 0;
+    background-color: rgba(238, 83, 83, 0.938);
 }
+
 .box {
-  background: url(../images/line.png) rgba(255, 255, 255, 0.03);
+    background: url(../images/line.png) rgba(255, 255, 255, 0.03);
 }
+
 .box::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
-}
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+}
+
 .box::before {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
-}
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+}
+
 .panel-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
 }
+
 .panel-footer::before {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
-}
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+}
+
 .panel-footer::after {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 0.5rem;
-  height: 0.5rem;
-  content: "";
-}
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    content: "";
+}
+
 .title {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
+
 .title img {
-  width: 0.6rem;
-  height: 0.6rem;
-  margin-right: 0.2rem;
-  border-radius: 50%;
+    width: 0.6rem;
+    height: 0.6rem;
+    margin-right: 0.2rem;
+    border-radius: 50%;
 }
+
 .noData {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  color: #fff;
-  font-size: 20px;
-}
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 20px;
+}
+
 .setNav {
-  height: 80%;
-  overflow: auto;
+    height: 80%;
+    overflow: auto;
 }
+
 .setNav::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 0px;
-  /*高宽分别对应横竖滚动条的尺寸*/
-  height: 0px;
+    /*滚动条整体样式*/
+    width: 0px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 0px;
 }
+
 .setNav::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 0.2rem;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  background: rgba(70, 116, 214, 0.452);
+    /*滚动条里面小方块*/
+    border-radius: 0.2rem;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(70, 116, 214, 0.452);
 }
+
 .setNav::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-  border-radius: 10px;
-  background: #ededed;
+    /*滚动条里面轨道*/
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #ededed;
 }
+
 #stuTable td,
 #stuTable th {
-  font-size: 0.2rem;
+    font-size: 0.2rem;
 }
+
 #stuTable tr {
-  height: 0.3rem;
+    height: 0.3rem;
 }
+
 h3 {
-  font-size: 0.18rem;
+    font-size: 0.18rem;
 }
+
 p {
-  font-size: 0.15rem;
+    font-size: 0.15rem;
 }
+
 .proDesc {
-  top: -0.25rem !important;
+    top: -0.25rem !important;
 }
+
 .toop {
-  width: 9rem;
+    width: 9rem;
 }
+
 .right img,
 .left img {
-  width: 45%;
+    width: 45%;
 }
+
 .right span,
 .left span {
-  font-size: 0.35rem;
-  margin: 0 0.1rem;
+    font-size: 0.35rem;
+    margin: 0 0.1rem;
 }
+
 .left span,
 .one span,
 .tow span {
-  font-size: 0.5rem;
+    font-size: 0.5rem;
 }
+
 .test31 li {
-  font-size: 0.2rem;
+    font-size: 0.2rem;
 }
+
 .test38 .content .desc {
-  margin-left: 35%;
+    margin-left: 35%;
 }
+
 span {
-  font-size: 0.25rem;
+    font-size: 0.25rem;
 }
+
 .title h2 {
-  top: -0.04rem !important;
+    top: -0.04rem !important;
 }
+
 p,
 span,
 div,
@@ -358,8 +428,9 @@ h2,
 h3,
 td,
 th {
-  font-size: 0.15rem !important;
+    font-size: 0.15rem !important;
 }
+
 .progress span span {
-  opacity: 0;
-}
+    opacity: 0;
+}

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/main.js

@@ -49,6 +49,7 @@ modus();
 
 // 按下
 document.onkeydown = function(e) {
+    console.log(e.keyCode);
     if (78 == e.keyCode && e.altKey) {
         if (url.indexOf('type=-1') === -1) { // 没找到
             window.location.href += '&type=-1'
@@ -214,8 +215,48 @@ $(`.sf5`).load('./springFrame5.html', _ => {
     })
 })
 
+let box42L, box42T, box61L, box61T;
 
-// 网络安全态势地图的切换
-$('.left-tabBar').click(function() {
+// 网络安全态势地图的切换 
+// .box42：地图
+// .box61：控制中心（态势总览）
+$('.left-tabBar').click(function() { // 切换到态势总览
 
+    box61L = $('.box61').position().left;
+    box61T = $('.box61').position().top;
+
+    if (!box42T) {
+        box42T = $(".box42").position().top;
+    }
+    if (!box42L) {
+        box42L = $(".box42").position().left;
+    }
+    $(".box42").css({
+        'opacity': 1,
+        'left': box42L,
+        'top': box42T
+    });
+    $(".box61").css({
+        'opacity': 0,
+        'left': -$(".box61").width(),
+        'top': -$(".box61").height()
+    });
+
+})
+
+$('.right-tabBar').click(function() { // 切换到地图
+    box42L = $('.box42').position().left;
+    box42T = $('.box42').position().top;
+    if (!box61T) {
+        box61T = $(".box61").position().top;
+    }
+    if (!box61L) {
+        box61L = $(".box61").position().left;
+    }
+    $(".box42").css({
+        'opacity': 0,
+        'left': -$(".box42").width(),
+        'top': -$(".box42").height()
+    });
+    $(".box61").css({ 'opacity': 1, 'left': box61L, 'top': box61T });
 })

spring-cloud/server-page/src/main/resources/static/testEcharts/test/main/js/setTheme.js

@@ -17,7 +17,7 @@ function setTheme(id) {
             $('.heaTit h1').attr('data-name', result.id);
             themeId = result.id;
             themeStore = result.moduleInfo || [];
-            if (themeId === 11) {
+            if (themeId === 5) {
                 $('.tabBar').fadeIn()
             } else {
                 $('.tabBar').fadeOut()