2560*1080调整

src/App.vue

@@ -1,6 +1,10 @@
 <template>
   <div
-    id="app">
+    id="app" :style="{'transform':`scale(${scalesNum}) translate(0%,0%)`,
+    '-webkit-transform':`scale(${scalesNum}) translate(0%,0%)`,
+    '-moz-transform':`scale(${scalesNum}) translate(0%,0%)`,
+    '-o-transform':`scale(${scalesNum}) translate(-50%,0%)`,
+    '-ms-transform':`scale(${scalesNum}) translate(-50%,0%)`}">
 
     <router-view />
   </div>
@@ -16,23 +20,19 @@ export default {
   },
   mounted() {
     // 计算缩放比例
-    // this.resize_window();
-    // window.addEventListener("resize", () => {
-    //   this.resize_window();
-    // });
+    this.resize_window();
+    window.addEventListener("resize", () => {
+      this.resize_window();
+    });
   },
   methods: {
-    // resize_window() {
-    //   // 因为设计图是带3840*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
-    //   let myWidth = document.documentElement.clientWidth;
-    //   let myHeight = document.documentElement.clientHeight;
-    //   console.log(myWidth,myHeight);
-    //   if (myHeight / 1080 !== 0 && myWidth / 1920 / (myHeight / 1080) >= 1) {
-    //     this.scalesNum = myHeight / 1080;
-    //   } else {
-    //     this.scalesNum = myWidth / 1920;
-    //   }
-    // },
+    resize_window() {
+      // 因为设计图是带2560*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
+      let myWidth = document.documentElement.clientWidth;
+      let myHeight = document.documentElement.clientHeight;
+      this.scalesNum = myWidth / 2560;
+
+    },
   },
   metaInfo() {
     return {
@@ -55,10 +55,10 @@ export default {
   padding: 0;
   transform-origin: 0 0;
   position:relative;
-  width: 1920px;
+  width: 2560px;
   // width: 100%;
-  // height: 1080px;
-  height: 100%;
+  height: 1080px;
+  // height: 100%;
   // top:50%;
   overflow: hidden;
 }

src/components4/bottomWrap/total/index.vue

@@ -80,10 +80,10 @@
         </div>
       </div>
     </div>
-     <el-col class="left" >
+     <!-- <el-col class="left" >
       <el-col class="text" :span="24">上月运营收入情况</el-col>
-    </el-col>
-    <el-col id="index" style="height: 18vh; width: 1360px"></el-col>
+    </el-col> -->
+    <el-col id="index" style="height: 18vh; width: 2090px"></el-col>
   </div>
 </template>
 <script>
@@ -153,7 +153,7 @@ export default {
           },
         },
         grid: {
-          left: "12%",
+          left: "9%",
           // right: '2%',
           bottom: "10%",
           top: "8%",

src/components4/middleWrap/equipment/index.vue

@@ -102,6 +102,7 @@ export default{
         }
         .bottomT {
             margin-left: 26px;
+            margin-top:4px;
             width: 432px;
             font-family: MicrosoftYaHei;
             font-size: 16px;
@@ -133,6 +134,7 @@ export default{
 
         .bottomImg {
             margin-left: 95px;
+            margin-top:-4px;
             img{
                 height: 8vh !important;
             }

src/components4/middleWrap/saveEnergy/index.vue

@@ -10,6 +10,7 @@
                 <div class="time">
                     <div class="time1">8:00~10:00</div>
                     <div class="time2">15:00~16:00</div>
+
                 </div>
                 <div class="textUp">
                     <div class="des1">制冷机组运转，23.5℃</div>
@@ -52,9 +53,9 @@
             <div class="imgX">
                 <img src="@/assets/images4/0fbbc08bd505fb71d67f385f149272a.png" alt="">
             </div>
-            <div id="botmRight" style='height:20vh;width:230px;'></div>
-        </div>
 
+        </div>
+        <div id="botmRight" style='height:200px;width:350px;margin-top:-200px;margin-left:1080px'></div>
     </div>
 </template>
 
@@ -159,7 +160,7 @@ export default {
             margin-left: 26px;
             font-family: MicrosoftYaHei;
             font-size: 16px;
-            color: #E6EFFF;
+            color: #B9C4D8;
             letter-spacing: 0;
             line-height: 2.77vh;
             font-weight: 400;
@@ -169,15 +170,14 @@ export default {
     .botm {
         display: flex;
         margin-top: 0.96vh;
-
+        width:1080px;
         .botmLeft {
-            width: 488px;
-
+            width:1080px;
             .time {
                 display: flex;
-
                 .time1 {
-                    margin-left: 120px;
+                    margin-left: 312px;
+                    margin-bottom:10px;
                     font-family: 微软雅黑;
                     font-size: 2.22vh;
                     color: #E6EFFF;
@@ -188,7 +188,7 @@ export default {
 
                 .time2 {
                     margin-left: 40px;
-                    font-family: 微软雅黑;
+                    font-family: "PingFangSC-Semibold";
                     font-size: 2.22vh;
                     color: #E6EFFF;
                     letter-spacing: 0;
@@ -201,7 +201,7 @@ export default {
                 display: flex;
 
                 .des1 {
-                    margin-left: 115px;
+                    margin-left: 300px;
                     font-family: MicrosoftYaHei;
                     font-size: 14px;
                     color: #B9C4D8;
@@ -210,7 +210,7 @@ export default {
                 }
 
                 .des2 {
-                    margin-left: 20px;
+                    margin-left: 150px;
                     font-family: MicrosoftYaHei;
                     font-size: 14px;
                     color: #B9C4D8;
@@ -222,32 +222,32 @@ export default {
             .bottomC {
                 // margin-top: 100px;
                 margin-left: 21px;
-                width: 460px;
+                width: 1008px;
                 height: 1.48vh;
                 display: flex;
 
                 .one {
-                    width: 130px;
+                    width: 284px;
                     background-color: #8082D6;
                 }
 
                 .two {
-                    width: 70px;
+                    width: 155px;
                     background-color: #F6BD16;
                 }
 
                 .three {
-                    width: 60px;
+                    width: 130px;
                     background-color: #8082D6;
                 }
 
                 .four {
-                    width: 70px;
+                    width: 155px;
                     background-color: #F6BD16;
                 }
 
                 .five {
-                    width: 130px;
+                    width: 284px;
                     background-color: #8082D6;
                 }
 
@@ -263,9 +263,11 @@ export default {
                 color: #B9C4D8;
                 letter-spacing: 0;
                 font-weight: 400;
-
+                .numS{
+                    margin-top:4px;
+                }
                 .row1 {
-                    margin-left: 80px;
+                    margin-left: 110px;
                     height: 2.12vh !important;
                     color: #8082D6;
                     // .row1Text{
@@ -275,12 +277,13 @@ export default {
                 }
 
                 .row2 {
-                    margin-left: 220px;
+                    margin-left: 710px;
                     color: #8082D6;
                 }
 
                 .numE {
-                    margin-left: 75px;
+                    margin-left: -370px;
+                    margin-top:4px;
                 }
 
             }
@@ -290,12 +293,12 @@ export default {
                 margin-top: 0.37vh;
 
                 .rowU1 {
-                    margin-left: 160px;
+                    margin-left: 378px;
                     color: #F6BD16;
                 }
 
                 .rowU2 {
-                    margin-left: 160px;
+                    margin-left: 280px;
                     color: #F6BD16;
                 }
             }
@@ -306,7 +309,7 @@ export default {
 
                 .textDesNum1 {
                     width: 41px;
-                    margin-left: 30px;
+                    margin-left: 64px;
                     font-family: 微软雅黑;
                     font-size: 2.22vh;
                     color: #E6EFFF;
@@ -315,7 +318,7 @@ export default {
                 }
 
                 .textDesNum2 {
-                    margin-left: 180px;
+                    margin-left: 668px;
                     width: 41px;
                     font-family: 微软雅黑;
                     font-size: 2.22vh;
@@ -330,9 +333,10 @@ export default {
 
                 .textDesT {
                     margin-left: 25px;
-                    width: 210px;
+                    width: 280px;
                     font-family: MicrosoftYaHei;
                     font-size: 14px;
+                    line-height: 20px;
                     color: #B9C4D8;
                     letter-spacing: 0;
                     text-align: center;
@@ -344,10 +348,11 @@ export default {
                 }
 
                 .textDesT1 {
-                    margin-left: 5px;
+                    margin-left: 455px;
                     width: 240px;
                     font-family: MicrosoftYaHei;
                     font-size: 14px;
+                    line-height: 20px;
                     color: #B9C4D8;
                     letter-spacing: 0;
                     text-align: center;
@@ -367,10 +372,10 @@ export default {
             }
         }
 
-        // .botmRight{
-        // width: 260px;
-        // }
     }
+    .botmRight{
+        width: 260px;
+        }
 
 }
 </style>

src/components4/middleWrap/saveManPower/index.vue

@@ -4,7 +4,7 @@
     <div>
       <div id="index3" style="width: 350px; height: 26vh"></div>
     </div>
-    <div class="right1">
+    <div class="right1" style="margin-top:50px">
       <div class="rightBox">
         <div><img src="@/assets/images4/ic_共节省人力.png" alt="" /></div>
         <div class="rrBox">
@@ -56,7 +56,6 @@ export default {
   },
   watch: {
     s(val, old) {
-
       this.peopleLei = val.peopleLei;
       this.num1 = val.datas.num1;
       this.num2 = val.datas.num2;
@@ -93,8 +92,8 @@ export default {
           orient: "horizontal",
           x: "center",
           y: "bottom",
-          itemWidth: 8,
-          itemHeight: 8,
+          itemWidth: 16,
+          itemHeight: 16,
           padding: [280, 50, 10, 50],
           icon: "circle",
           textStyle: {
@@ -156,18 +155,20 @@ export default {
           {
             //stack: true,
             name: "计划安排人员",
-            type: "bar",
+            type: 'bar',
+            stack: 'Ad',
             data: this.num1,
             color: "#8082D6 ",
-            barWidth: "10px",
+            barWidth: "16px",
           },
           {
              //stack: "true",
             name: "实际安排人员",
-            type: "bar",
+            type: 'bar',
+            stack: 'Ad',
             data: this.num2,
             color: "#F6BD16",
-            barWidth: "10px",
+            barWidth: "16px",
           },
         ],
       };
@@ -184,7 +185,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .main {
-  width: 550px;
+  width: 100%;
   display: flex;
   margin-top: 3px;
   .biao {
@@ -203,7 +204,7 @@ export default {
 
     .rightBox {
       display: flex;
-      margin: 20px 0 0 10px;
+      margin: 10px 0 0 0px;
 
       .rrBox {
         margin: -2px 0 0 6px;

src/components4/topWrap/index.vue

@@ -116,7 +116,7 @@ export default{
 <style lang="scss" scoped>
 @import '@/assets/styles/common.scss';
 .widthF {
-    width: 210px;
+    width: 420px;
 }
 .mainT {
     .top {
@@ -155,7 +155,8 @@ export default{
             display: flex;
             .oneChild {
                 display: flex;
-                margin-left: 105px;
+                width:504px;
+                // margin-left: 105px;
                 // margin-right:100px;
                 .left {
                     display: inline-block;
@@ -163,6 +164,7 @@ export default{
                         width: 6.11vh !important;
                         height: 6.11vh !important;
                     }
+                    margin-left:80px;
                 }
                 .middle {
                     height: 17.59vh;

src/views/index.vue

@@ -22,7 +22,7 @@
         <el-col :span="8" class="left1">
           <saveSpend :s="data.saveSpend.pie" />
         </el-col>
-        <el-col :span="16" class="right1T">
+        <el-col :span="16" class="right1T2">
           <total :s="data.total" />
         </el-col>
       </el-row>
@@ -264,7 +264,7 @@ export default {
 
   .containWrap1 {
     clear: both;
-    width: 100%;
+    width: 2520px;;
     overflow: hidden;
     padding: 0 !important;
     height: 29.7vh;
@@ -281,7 +281,7 @@ export default {
       background: rgba(77, 85, 101, 0.15);
     }
     .centerT {
-      width: 748px;
+      width: 1388px;
       margin-top: 1.49vh;
       background: rgba(77, 85, 101, 0.15);
       margin-left: 16px;
@@ -308,6 +308,12 @@ export default {
       background: rgba(77, 85, 101, 0.15);
       margin-left: 16px;
     }
+    .right1T2 {
+      width: 1954px;
+      margin-top: 1.49vh;
+      background: rgba(77, 85, 101, 0.15);
+      margin-left: 16px;
+    }
   }
 
   .containWrap {

vue.config.js

@@ -18,7 +18,7 @@ module.exports = {
     // 例如 https://www.yongtian.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.yongtian.vip/admin/，则设置 baseUrl 为 /admin/。
     publicPath: process.env.NODE_ENV === "production" ? "" : "",
     // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
-    outputDir: 'DXLargeScreen-v3-zhong',
+    outputDir: 'DXLargeScreen-v3-zhong2560*1080',
     // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
     assetsDir: 'static',
     // 是否开启eslint保存检测，有效值：ture | false | 'error'
@@ -125,4 +125,4 @@ module.exports = {
                 }
             )
     }
-}
+}