可视化调整

src/layouts/navbar/index.vue

@@ -93,12 +93,16 @@ export default {
           this.menus = this.defaultMenus
         }
       } else {
+        if (Setting.dynamicRoute) {
           // 如果是在前台,则判断有没有数据列表的权限
           if (this.routes.find(e => e.name === '/data/list')) {
             this.menus = this.dataMenu
           } else {
             this.menus = this.dataMenu[0]
           }
+        } else {
+          this.menus = this.dataMenu
+        }
       }
     },
     jump(item) {
@@ -122,7 +126,7 @@ export default {
         let routes = res.permissionMenu[0].children
         // 如果权限里没有后台的3个菜单，则隐藏进入后台的图标。/data/list是前台数据列表，仅在前台展示
         routes.length && !routes.find(e => e.path !== '/data/list') && this.$emit('hideSetting')
-        Setting.dynamicRoute && addRoutes(routes)
+        addRoutes(routes)
         this.initMenu()
       }).catch(err => {
         // 被捕获了则显示默认菜单

src/pages/screen/list/index.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="wrap">
+    <!-- 全屏 -->
+    <img class="full" src="@/assets/img/screen/full.png" alt="" @click="fullScreen">
     <!--header-->
     <div class="header">
         <div class="bg_header">
@@ -40,7 +42,7 @@
                         <img src="@/assets/img/screen/t_1.png" alt="">
                       中国宏观杠杆率
                     </div>
-                    <div id="chart1" class="chart" style="width:100%;height: 280px;"></div>
+                    <div id="chart1" class="chart" style="height: 280px;"></div>
                 </div>
                 <div class="left_2" style="cursor: pointer;">
                     <div class="t_line_box">
@@ -63,7 +65,7 @@
                         <img src="@/assets/img/screen/t_2.png" alt="">
                         国际旅游外汇收入构成
                     </div>
-                    <div id="chart2" class="chart t_btn9" style="width:100%;height: 280px;"></div>
+                    <div id="chart2" class="chart t_btn9" style="height: 280px;"></div>
                 </div>
             </div>
             <div class="main_center fl">
@@ -88,7 +90,7 @@
                         <i class="r_b_line"></i> 
                         <i class="b_r_line"></i> 
                     </div> 
-                    <div class="main_title" style="left: 48%">
+                    <div class="main_title">
                         <img src="@/assets/img/screen/t_3.png" alt="">
                         加密货币行情
                     </div>
@@ -135,7 +137,7 @@
                         <i class="r_b_line"></i> 
                         <i class="b_r_line"></i> 
                     </div> 
-                    <div class="main_title" style="left: 48%">
+                    <div class="main_title">
                         <img src="@/assets/img/screen/t_3.png" alt="">
                         全国用电及客运情况
                     </div>
@@ -168,11 +170,11 @@
                         <i class="r_b_line"></i> 
                         <i class="b_r_line"></i> 
                     </div> 
-                    <div class="main_title" style="left: 50%">
+                    <div class="main_title">
                         <img src="@/assets/img/screen/t_4.png" alt="">
                         全国税收收入
                     </div>
-                    <div id="chart3" class="echart t_btn7" style="width:100%;height: 280px;"></div>
+                    <div id="chart3" class="echart t_btn7" style="height: 280px;"></div>
                 </div>
                 <div class="right_2">
                     <!--左上边框-->
@@ -199,12 +201,12 @@
                         <img src="@/assets/img/screen/t_5.png" alt="">
                         央行货币当局资产负债
                     </div>
-                    <div id="chart4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div>
+                    <div id="chart4" style="height: 280px;"></div>
                 </div>
             </div>
         </div>
         <div class="data_bottom">
-            <div class="bottom_1 fl t_btn5" style="cursor: pointer;">
+            <div class="bottom_1 fl t_btn5">
                 <div class="t_line_box">
                     <i class="t_l_line"></i> 
                     <i class="l_t_line"></i> 
@@ -260,11 +262,11 @@
                         <i class="r_b_line"></i> 
                         <i class="b_r_line"></i> 
                     </div>
-                    <div class="main_title" style="left:50%;">
+                    <div class="main_title">
                         <img src="@/assets/img/screen/t_7.png" alt="">
                         新增信贷数据
                     </div>
-                    <div id="chart5" class="chart" style="width:100%;height: 310px;"></div>
+                    <div id="chart5" class="chart" style="height: 310px;"></div>
                 </div>
             </div>
             <div class="bottom_4 fr">
@@ -288,7 +290,7 @@
                     <img src="@/assets/img/screen/t_7.png" alt="">
                     以美元计算进口年率
                 </div>
-                <div id="chart6" class="chart" style="width:100%;height: 310px;"></div>
+                <div id="chart6" class="chart" style="height: 310px;"></div>
             </div>
         </div>
     </div>
@@ -355,7 +357,6 @@ export default {
               list[coin] = quo
             }
             this.cryptoList = list
-            console.log("🚀 ~ file: index.vue ~ line 328 ~ subscribeMarket ~ list", list)
             this.$forceUpdate()
           }
         );
@@ -363,6 +364,27 @@ export default {
       disconnect() {
         this.stompClient && this.stompClient.disconnect()
       },
+      // 全屏
+      fullScreen() {
+        // 检测是否全屏
+        if (document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.msFullScreenElement ||
+        document.webkitFullscreenElement) {
+          const fn = document.exitFullScreen ||
+          document.mozCancelFullScreen ||
+          document.webkitExitFullscreen ||
+          document.msExitFullscreen
+          fn.call(document)
+        } else {
+          const el = document.body
+          const fn = el.requestFullscreen ||
+          el.mozRequestFullScreen ||
+          el.webkitRequestFullscreen ||
+          el.msRequestFullscreen
+          fn.call(el)
+        }
+      },
       // 获取图标数据并渲染
       renderChart() {
         // 中国宏观杠杆率
@@ -1076,250 +1098,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import url(../../../styles/page/screen.scss);
+@import "../../../styles/page/screen.scss";
-::-webkit-scrollbar-thumb {
-  background: #7d65f9;
-}
-.wrap {
-    width: 100%;
-    height: auto;
-    color:#333;
-    background: url('../../../assets/img/screen/screen1.jpg') no-repeat;
-    background-size: 100% 100%;
-}
-
-.main_table {
-  width: 100%;
-  margin-top: 25px;
-  table {
-    width: 100%;
-  }
-  tr{
-    height: 42px;
-  }
-  th{
-    font-size: 12px;
-    font-weight: 600;
-    color:#61d2f7;
-    text-align: center;
-  }
-  td{
-    color:#fff;
-    font-size: 10px;
-    text-align: center;
-  }
-  tbody tr:nth-child(odd) {
-    background-color: #072951;
-    box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset;
-  }
-  .percent {
-    width: 64px;
-    margin: 0 auto;
-    line-height: 24px;
-    color: #fff;
-    text-align: center;
-    background-color: #0faf7d;
-    border-radius: 2px;
-    &.fall {
-      background-color: #db4154;
-    }
-  }
-}
-.charts {
-  display: flex;
-  .chart {
-    width: 50%;
-    height: 220px;
-  }
-}
-/*header开始*/
-.header{
-    width: 100%;
-    height: 80px;
-    padding:0 20px;
-    min-width: 1366px;
-}
-.bg_header{
-    width: 100%;
-    height: 80px;
-    background: url(../../../assets/img/screen/screen2.png) no-repeat;
-    background-size: 100% 100%;
-}
-.header>.header_logo{
-    padding:18px 10px 10px 0px;
-}
-.header>.header_logo>a{
-    display: block;
-}
-.header>.header_logo>a>img{
-    width:260px;
-}
-
-.header>.header_nav{
-    margin-left: 20px;
-}
-.header>.header_nav>ul>li{
-    float: left;
-    margin-right: 6px;
-    position: relative;
-}
-.header>.header_nav>ul>li>a{
-    display: block;
-    height: 80px;
-    padding:0 10px 0 30px;
-    line-height: 80px;
-    color:#fff;
-}
-.header>.header_nav>ul>li>a:hover{
-    border-bottom: 4px solid #4b8df8;
-}
-.header>.header_nav>ul>li>img{
-    float: left;
-    position: absolute;
-    top: 33px;
-    left:10px;
-}
-.header>.header_nav>ul>li>a.nav_current{
-    border-bottom: 4px solid #4b8df8;
-}
-
-.header>.header_myself{
-    width: 90px;
-    text-align: center;
-}
-.header>.header_myself>p{
-    color:#fff;
-    font-size: 13px;
-    margin-top: 15px;
-}
-.header>.header_myself>a{
-    color:#fff;
-    font-size: 13px;
-}
-
-/*content 开始*/
-
-.content{
-    margin: 20px;
-    width: calc(100% - 40px);
-    min-width: 1366px;
-}
-.content>.content_title{
-    width: 100%;
-    height: 35px;
-    line-height: 35px;
-    background-color: #4b8df8;
-    box-sizing: border-box;
-    margin-bottom: 20px;
-}
-.content>.content_title>p{
-    color:#fff;
-    font-size: 16px;
-    font-weight: 600;
-}
-.content>.content_title>img{
-    margin: 10px 10px 0px 10px;
-}
-.content>.content_main{
-    min-width: 1366px;
-}
-.content>.content_main>.content_search>div{
-    margin-right: 25px;
-}
-.content>.content_main>.content_search>div>label{
-    width: 80px;
-    text-align: right;
-}
-.content>.content_main>.content_search>div>select,
-.content>.content_main>.content_search>div>input
-{
-    width: 200px;
-}
-.content>.content_main>.content_table{
-    margin-top: 30px;
-}
-.content>.content_main>.content_table>table{
-    margin-top: 15px;
-}
-.content>.content_main>.content_table>table th:nth-child(1),
-.content>.content_main>.content_table>table td:nth-child(1){
-    width: 50px;
-    text-align: center;
-}
-
-.content>.content_main>.content_page>span {
-    font-size: 12.8px;
-    margin-top: 7px;
-}
-.content>.content_main>.content_page>select{
-    width: 70px;
-    margin-right: 10px;
-}
-/*content 结束*/
-
-.t_title{
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    font-size: 2.5em;
-    line-height: 80px;
-    color: #fff;
-}
-#chart_map{
-    cursor: pointer;
-}
-.t_show{
-    position: absolute;
-    top: 0;
-    right: 0;
-    border-radius: 2px;
-    background: #2C58A6;
-    padding: 2px 5px;
-    color: #fff;
-    cursor: pointer;
-}
-.linshi_zdy{
-    position: absolute;
-    right: 0px;
-    top: 450px;
-}
-.linshi_zdy li{
-    width: 150px;
-    font-size: 16px;
-    padding: 3px 8px;
-    cursor: pointer;
-}
-.linshi_zdy span{
-    display: block;
-    width: 14px;
-    height: 14px;
-    float: left;
-    border-radius: 50%;
-    margin-top: 3px;
-    margin-right: 5px;
-}
-.linshi_zdy li:first-child{
-    color: #ff0000;
-}
-.linshi_zdy li:first-child span{
-    background: #ff0000;
-}
-.linshi_zdy li:nth-child(2){
-    color: #9cff00;
-}
-.linshi_zdy li:nth-child(2) span{
-    background: #9cff00;
-}
-.linshi_zdy li:nth-child(3){
-    color: #fff;
-}
-.linshi_zdy li:nth-child(3) span{
-    background: #fff;
-}
-.linshi_zdy li:nth-child(4){
-    color: #f4a100;
-}
-.linshi_zdy li:nth-child(4) span{
-    background: #f4a100;
-}
 </style>

src/router/permission.js

@@ -2,7 +2,7 @@ import router from './index'
 import Setting from '@/setting'
 import util from '@/libs/util'
 import store from '@/store'
-const managerPath = ['/stat/list', '/stat/screen', '/user/list', '/role/list'] // 管理员才能访问的页面路径
+const managerPath = ['/stat/list', '/screen', '/user/list', '/role/list'] // 管理员才能访问的页面路径
 
 router.beforeEach((to, from, next) => {
     document.title = Setting.titleSuffix

src/setting.js

@@ -25,7 +25,7 @@ const Setting = {
      * 正式：http://www.dataforward.cn:9000
      * */
     // apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000',
-    apiBaseURL: env === 'development' ? 'http://www.dataforward.cn:9000' : `${location.origin}:9000`,
+    apiBaseURL: env === 'development' ? 'http://39.108.250.202:9000' : `${location.origin}:9000`,
     // 加密货币接口地址
     cryptoBaseURL: `http://159.138.53.111/`,
     // 接口请求返回错误时，弹窗的持续时间，单位：秒

src/styles/page/screen.scss

@@ -1,5 +1,258 @@
+::-webkit-scrollbar-thumb {
+  background: #7d65f9;
+}
+.wrap {
+  width: 100%;
+  height: auto;
+  color:#333;
+  background: url('../../../assets/img/screen/screen1.jpg') no-repeat;
+  background-size: 100% 100%;
+  .full {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    cursor: pointer;
+    transition: .5s;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+.main_table {
+  width: 100%;
+  margin-top: 25px;
+  table {
+    width: 100%;
+  }
+  tr{
+    height: 42px;
+  }
+  th{
+    font-size: 12px;
+    font-weight: 600;
+    color:#61d2f7;
+    text-align: center;
+  }
+  td{
+    color:#fff;
+    font-size: 10px;
+    text-align: center;
+  }
+  tbody tr:nth-child(odd) {
+    background-color: #072951;
+    box-shadow:-10px 0px 15px #2C58A6 inset, 10px 0px 15px #2C58A6 inset;
+  }
+  .percent {
+    width: 64px;
+    margin: 0 auto;
+    line-height: 24px;
+    color: #fff;
+    text-align: center;
+    background-color: #0faf7d;
+    border-radius: 2px;
+    &.fall {
+      background-color: #db4154;
+    }
+  }
+}
+.charts {
+  display: flex;
+  .chart {
+    width: 50%;
+    height: 220px;
+  }
+}
+/*header开始*/
+.header{
+    width: 100%;
+    height: 80px;
+    padding:0 20px;
+    min-width: 1366px;
+}
+.bg_header{
+    width: 100%;
+    height: 80px;
+    background: url(../../../assets/img/screen/screen2.png) no-repeat;
+    background-size: 100% 100%;
+}
+.header>.header_logo{
+    padding:18px 10px 10px 0px;
+}
+.header>.header_logo>a{
+    display: block;
+}
+.header>.header_logo>a>img{
+    width:260px;
+}
+
+.header>.header_nav{
+    margin-left: 20px;
+}
+.header>.header_nav>ul>li{
+    float: left;
+    margin-right: 6px;
+    position: relative;
+}
+.header>.header_nav>ul>li>a{
+    display: block;
+    height: 80px;
+    padding:0 10px 0 30px;
+    line-height: 80px;
+    color:#fff;
+}
+.header>.header_nav>ul>li>a:hover{
+    border-bottom: 4px solid #4b8df8;
+}
+.header>.header_nav>ul>li>img{
+    float: left;
+    position: absolute;
+    top: 33px;
+    left:10px;
+}
+.header>.header_nav>ul>li>a.nav_current{
+    border-bottom: 4px solid #4b8df8;
+}
+
+.header>.header_myself{
+    width: 90px;
+    text-align: center;
+}
+.header>.header_myself>p{
+    color:#fff;
+    font-size: 13px;
+    margin-top: 15px;
+}
+.header>.header_myself>a{
+    color:#fff;
+    font-size: 13px;
+}
+
+/*content 开始*/
+
+.content{
+    margin: 20px;
+    width: calc(100% - 40px);
+    min-width: 1366px;
+}
+.content>.content_title{
+    width: 100%;
+    height: 35px;
+    line-height: 35px;
+    background-color: #4b8df8;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+}
+.content>.content_title>p{
+    color:#fff;
+    font-size: 16px;
+    font-weight: 600;
+}
+.content>.content_title>img{
+    margin: 10px 10px 0px 10px;
+}
+.content>.content_main{
+    min-width: 1366px;
+}
+.content>.content_main>.content_search>div{
+    margin-right: 25px;
+}
+.content>.content_main>.content_search>div>label{
+    width: 80px;
+    text-align: right;
+}
+.content>.content_main>.content_search>div>select,
+.content>.content_main>.content_search>div>input
+{
+    width: 200px;
+}
+.content>.content_main>.content_table{
+    margin-top: 30px;
+}
+.content>.content_main>.content_table>table{
+    margin-top: 15px;
+}
+.content>.content_main>.content_table>table th:nth-child(1),
+.content>.content_main>.content_table>table td:nth-child(1){
+    width: 50px;
+    text-align: center;
+}
+
+.content>.content_main>.content_page>span {
+    font-size: 12.8px;
+    margin-top: 7px;
+}
+.content>.content_main>.content_page>select{
+    width: 70px;
+    margin-right: 10px;
+}
+/*content 结束*/
+
+.t_title{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    font-size: 2.5em;
+    line-height: 80px;
+    color: #fff;
+}
+#chart_map{
+    cursor: pointer;
+}
+.t_show{
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-radius: 2px;
+    background: #2C58A6;
+    padding: 2px 5px;
+    color: #fff;
+    cursor: pointer;
+}
+.linshi_zdy{
+    position: absolute;
+    right: 0px;
+    top: 450px;
+}
+.linshi_zdy li{
+    width: 150px;
+    font-size: 16px;
+    padding: 3px 8px;
+    cursor: pointer;
+}
+.linshi_zdy span{
+    display: block;
+    width: 14px;
+    height: 14px;
+    float: left;
+    border-radius: 50%;
+    margin-top: 3px;
+    margin-right: 5px;
+}
+.linshi_zdy li:first-child{
+    color: #ff0000;
+}
+.linshi_zdy li:first-child span{
+    background: #ff0000;
+}
+.linshi_zdy li:nth-child(2){
+    color: #9cff00;
+}
+.linshi_zdy li:nth-child(2) span{
+    background: #9cff00;
+}
+.linshi_zdy li:nth-child(3){
+    color: #fff;
+}
+.linshi_zdy li:nth-child(3) span{
+    background: #fff;
+}
+.linshi_zdy li:nth-child(4){
+    color: #f4a100;
+}
+.linshi_zdy li:nth-child(4) span{
+    background: #f4a100;
+}
 .data_content{
-  /*overflow-x: hidden;*/
   min-width: 1366px;
   padding-top: 20px;
   padding-bottom: 20px;
@@ -117,35 +370,29 @@
   position: relative;
   box-shadow: 0 0 10px #2C58A6;
 }
-.data_content .data_main .main_left div.left_1{
-  /*background: url("../images/chart_1.png") no-repeat center;*/
-}
-
-.data_content .data_main .main_left div.left_2{
-  /*background: url("../images/chart_2.png") no-repeat center;*/
-}
 .data_content .data_main .main_left div:nth-child(1){
   margin-bottom: 50px;
 }
 .main_title{
+  display: flex;
+  align-items: center;
   height: 35px;
   line-height: 33px;
   background-color: #2C58A6;
   border-radius: 18px;
   position: absolute;
   top: -17px;
-  left: 48%;
+  left: 50%;
-  margin-left: -90px;
   color:#fff;
   font-size: 18px;
   font-weight: 600;
+  white-space: nowrap;
   padding: 0 20px;
   z-index: 1000;
   text-align: center;
-  img{
+  transform: translateX(-50%);
-    position: absolute;
+  img {
-    top: 8px;
+    margin-right: 10px;
-    left: 20px;
   }
 }
 
@@ -244,9 +491,6 @@
   color:#fff;
 }
 
-.data_content .data_main .main_right div.right_2{
-  /*background: url("../images/chart_4.png") no-repeat center;*/
-}
 .data_content .data_main .main_right div.right_2 .chart_text {
   width: 18%;
   color:#fff;