commit

package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.5",
         "echarts": "^4.9.0",
         "element-ui": "^2.15.13",
+        "v-scale-screen": "^1.0.2",
         "vue": "^2.6.11",
         "vue-native-websocket": "^2.0.15",
         "vue-router": "^3.5.2",
@@ -14993,6 +14994,17 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-scale-screen": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/v-scale-screen/-/v-scale-screen-1.0.2.tgz",
+      "integrity": "sha512-qMXPglHIs8KnhzDBdEBLcIoF3q7jgFCTWNIVPD5M0FGBkD+amYjbFUoLdKol/Xylm+pli4AHOZOqwyL6xX62SA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vue": "^2.6.14"
+      }
+    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -36546,6 +36558,12 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-scale-screen": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/v-scale-screen/-/v-scale-screen-1.0.2.tgz",
+      "integrity": "sha512-qMXPglHIs8KnhzDBdEBLcIoF3q7jgFCTWNIVPD5M0FGBkD+amYjbFUoLdKol/Xylm+pli4AHOZOqwyL6xX62SA==",
+      "requires": {}
+    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.15.13",
+    "v-scale-screen": "^1.0.2",
     "vue": "^2.6.11",
     "vue-native-websocket": "^2.0.15",
     "vue-router": "^3.5.2",

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view />
+    <VScaleScreen class="VScaleScreen" width="1920" height="1080">
+      <router-view />
+    </VScaleScreen>
   </div>
 </template>
 
@@ -31,6 +33,10 @@ body{
 #app {
     height: 100%;
     width: 100%;
-    position: absolute;
 } 
+
+.VScaleScreen{
+  background: url('~@/assets/image/bg.png') !important;
+  background-size: 100% 100%;
+}
 </style>

src/layout/Main/index.vue

@@ -66,11 +66,12 @@ export default {
            this.$wst.send({url:'getPlatformTable'})
       }
   },
+  
   methods:{
     handleCurrentChange(val) {
       
       this.$store.commit("app/setPlatformID",val.platformID)
-      }
+    }
 
   }
   
@@ -84,7 +85,6 @@ export default {
     overflow: hidden;
     display: flex;
     color: white !important;
-    height: calc(100vh - 130px);
 }
 .left-container{
   width: 100%;

src/layout/index.vue

@@ -27,13 +27,11 @@
   .outer-container{
     height: 100vh;
     flex-direction: column;
-    background-image: url('~@/assets/image/bg.png');
-    background-size: 100% 100%;
-    -webkit-box-shadow: 0 0 3px #00f;
-    box-shadow: 0 0 3px #00f;
+
     -ms-flex-direction: column;
     flex-direction: column;
   }
+
   .center-container{
     overflow: hidden;
     height: calc(100vh - 130px);

src/main.js

@@ -12,6 +12,8 @@ import SvgIcon from '@/components/svgIcon/index.vue'// svg component
 import '@/assets/svg'  // 导入图标资源
 // 将自动注册所有组件为全局组件
 import dataV from '@jiaminghi/data-view'
+import VScaleScreen from 'v-scale-screen'
+Vue.use(VScaleScreen)
 Vue.use(dataV)
 Vue.use(websocket, 'ws://localhost:1234', {// 这里要填的是服务器的地址，可以换一个在线服务器wss://echo.websocket.org
   reconnection: true, // (Boolean)是否自动重连，默认false

src/views/radarInvestigation/index.vue

@@ -223,8 +223,6 @@ export default {
     },
     mounted() {
         for (let i = 0; i <= 7; i++) {
-            // let theta = (i / 100) * 360;
-            // let r = 5;
             let theta = (i / 100) * 180 + Math.random() * 90;
             let r = 5 * (1 + Math.sin((theta / 180) * Math.PI));
             this.data.push([r, theta]);