尺寸调整

src/App.vue

@@ -33,12 +33,20 @@ export default {
       // 因为设计图是带3840*1080的，但是浏览器本身带顶部工具栏，所以缩放到时候稍微更小一点，这样不会有滚动条，这个值可以选择更大些，比如2300，这样左右两边会有空白
       let myWidth = document.documentElement.clientWidth;
       let myHeight = document.documentElement.clientHeight;
-      if (myHeight / 3840 !== 0 && myWidth / 3840 / (myHeight / 1080) >= 1) {
+      if (myHeight / 2560 !== 0 && myWidth /2560 / (myHeight / 1080) >= 1) {
 
         this.scalesNum = myHeight / 1080;
+        let left = ((1 - myHeight / 1080)/2*100).toFixed(2)
       } else {
-        this.scalesNum = myWidth / 3840;
+        this.scalesNum = myWidth / 2560;
+        console.log("kuain" + this.scalesNum)
       }
+      // if (myHeight / 2560 !== 0 && myWidth / 2560 / (myHeight / 1080) >= 1) {
+
+      //   this.scalesNum = myHeight / 1080;
+      // } else {
+      //   this.scalesNum = myWidth / 2560;
+      // }
 
     },
   },
@@ -67,7 +75,7 @@ export default {
 
   position:relative;
 
-  width:3840px;
+   width:2560px;
 
   height: 1080px;
   top:50%;

src/components2/seHeader/index.vue

@@ -1,83 +1,83 @@
-<template>
-  <el-row
-    class="top"
-    v-loading="loading"
-    element-loading-background="rgba(28,33,41,1)"
-  >
-    <el-col :span="6">
-      <el-col :span="24" class="time">{{ date }}</el-col>
-    </el-col>
-    <el-col :span="12">
-      <el-col :span="24" class="title">中国东信南宁总部大楼</el-col>
-    </el-col>
-    <el-col :span="6">
-      <el-col :span="24" class="logo">
-        <el-image :src="logo" fit="scale-down"> </el-image>
-      </el-col>
-    </el-col>
-  </el-row>
-</template>
-<script>
-import logo from "@/assets/logo/logo-b.png";
-export default {
-  data() {
-    return {
-      loading: true,
-      date: new Date(),
-      logo: logo,
-    };
-  },
-  mounted() {
-    let that= this;
-    that.loading = false;
-    this.timer = setInterval(function() {
-        let myDate = new Date()
-        let year = myDate.getFullYear() + '年'
-        let month = myDate.getMonth() + 1 > 9 ? (myDate.getMonth() + 1) + '月' : '0' + (myDate.getMonth() + 1)  + '月'
-        let day = myDate.getDate() > 9 ?  myDate.getDate() + '日' : '0' + myDate.getDate() + '日 '
-        let s = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours()
-        let f = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes()
-        let m = myDate.getSeconds() > 9  ? myDate.getSeconds() : '0' + myDate.getSeconds()
-        that.date = year + month + day + ' ' + s + ":" + f + ":" + m
-    });
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import "@/assets/styles/common.scss";
-#main {
-  .top {
-    width: 100%;
-    height: 100px;
-    line-height: 100px;
-    vertical-align: middle;
-    position: absolute;
-    z-index: 10;
-    .time {
-      font-size: 24px;
-      color: $white;
-      margin-left:6px;
-    }
-    .title {
-      font-size: 40px;
-      color: $white;
-      letter-spacing: 2.22px;
-      font-family: "MicrosoftYaHei-Bold";
-      vertical-align: middle;
-      text-align: center;
-    }
-    .logo {
-      position: absolute;
-      right:40px;
-      width:100%;
-      text-align: right;
-
-      .el-image {
-        height: 65px;
-        vertical-align: middle;
-      }
-    }
-  }
-}
-</style>
-
+<template>
+  <el-row
+    class="top"
+    v-loading="loading"
+    element-loading-background="rgba(28,33,41,1)"
+  >
+    <el-col :span="6">
+      <el-col :span="24" class="time">{{ date }}</el-col>
+    </el-col>
+    <el-col :span="12">
+      <el-col :span="24" class="title">中国东信南宁总部大楼</el-col>
+    </el-col>
+    <el-col :span="6">
+      <el-col :span="24" class="logo">
+        <el-image :src="logo" fit="scale-down"> </el-image>
+      </el-col>
+    </el-col>
+  </el-row>
+</template>
+<script>
+import logo from "@/assets/logo/logo-b.png";
+export default {
+  data() {
+    return {
+      loading: true,
+      date: new Date(),
+      logo: logo,
+    };
+  },
+  mounted() {
+    let that= this;
+    that.loading = false;
+    this.timer = setInterval(function() {
+        let myDate = new Date()
+        let year = myDate.getFullYear() + '年'
+        let month = myDate.getMonth() + 1 > 9 ? (myDate.getMonth() + 1) + '月' : '0' + (myDate.getMonth() + 1)  + '月'
+        let day = myDate.getDate() > 9 ?  myDate.getDate() + '日' : '0' + myDate.getDate() + '日 '
+        let s = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours()
+        let f = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes()
+        let m = myDate.getSeconds() > 9  ? myDate.getSeconds() : '0' + myDate.getSeconds()
+        that.date = year + month + day + ' ' + s + ":" + f + ":" + m
+    });
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/common.scss";
+#main {
+  .top {
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+    vertical-align: middle;
+    position: absolute;
+    z-index: 10;
+    .time {
+      font-size: 24px;
+      color: $white;
+      margin-left:6px;
+    }
+    .title {
+      font-size: 40px;
+      color: $white;
+      letter-spacing: 2.22px;
+      font-family: "MicrosoftYaHei-Bold";
+      vertical-align: middle;
+      text-align: center;
+    }
+    .logo {
+      position: absolute;
+      right:40px;
+      width:100%;
+      text-align: right;
+
+      .el-image {
+        height: 65px;
+        vertical-align: middle;
+      }
+    }
+  }
+}
+</style>
+

src/components3/anquanjiance/index.vue

@@ -5,13 +5,13 @@
       <span class="title">安全监测</span>
     </el-col>
     <el-row class="wrap">
-      <el-col class="left" :span="13">
+      <el-col class="left" :span="12">
         <el-row class="content" >
-          <el-col :span="12">
+          <el-col :span="14">
             <p class="title">本月安防事件</p>
             <pie :resData="pieData"/>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="10">
             <el-col class="listWrap">
               <el-col class="list">
                 <el-image :src="img5" fit="scale-down"/>
@@ -46,11 +46,11 @@
           <el-image :src="line1"></el-image>
         </div>
         <el-row class="content">
-          <el-col :span="16">
+          <el-col :span="18">
             <p class="title">巡更准时率</p>
             <pie2 :resData="pie2Data"/>
           </el-col>
-          <el-col :span="8">
+          <el-col :span="6">
             <el-col class="listWrap" style="margin:20px 0 0 0px">
               <el-col class="list">
                 <el-image :src="img6" fit="scale-down"/>
@@ -123,6 +123,7 @@ export default {
 @import '@/assets/styles/common.scss';
 .wrap{
   color:$white;
+  margin-top:50px;
   >.left,>.right{
     margin-left:24px;
     .content{
@@ -137,7 +138,7 @@ export default {
       .listWrap{
         margin-top:-30px;
         .list{
-          margin-top:15px;
+          margin-top:30px;
           .el-image{
             width:24px;
             vertical-align: top;
@@ -145,18 +146,18 @@ export default {
           }
           .attribute{
               margin-top:-26px;
-              font-size: 20px;
+              font-size: 14px;
               margin-left: 30px;
               .num {
-                font-size: 25px;
+                font-size: 18px;
                 font-family: "微软雅黑";
                 font-weight: 700;
                 margin: 0.7vh 0 0 -2px;
                 .unit {
-                  font-size: 24px;
+                  font-size: 16px;
                   width: auto;
                   margin:10px 0 0 0px;
-                  vertical-align: middle;
+                  // vertical-align: middle;
                 }
               }
           }
@@ -169,7 +170,7 @@ export default {
     .lineL{
       height:240px;
       position: absolute;
-      left:-60px;
+      left:-10px;
       top:-40px;
     }
   }

src/components3/anquanjiance/pie.vue

@@ -2,7 +2,7 @@
   <el-row >
     <div
       id="index3"
-      style="height:260px;margin-top:-30px;"
+      style="height:200px;margin-top:-20px;"
     ></div>
   </el-row>
 </template>
@@ -36,7 +36,7 @@ export default {
           trigger: 'item'
         },
         grid: {
-          left: '30%',
+          left: '0%',
           containLabel: true
         },
         title: {
@@ -44,12 +44,12 @@ export default {
           text: jishilv + '%',
           textStyle: {
             color: '#E6EFFF',
-            fontSize: 25
+            fontSize: 18
           },
           subtext: '及时处理率',
           subtextStyle: {
             color: '#E6EFFF',
-            fontSize: 14
+            fontSize: 12
           },
           itemGap: 10, // 主副标题距离
           left: 'center',
@@ -86,21 +86,21 @@ export default {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value/total) * 100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 15,
-                  length2: 30,
+                  length: 10,
+                  length2: 10,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/anquanjiance/pie2.vue

@@ -2,7 +2,7 @@
   <el-row >
     <div
       id="index4"
-      style="height:260px;margin-top:-30px;"
+      style="height:200px;margin:-20px 0 0 20px;"
     ></div>
   </el-row>
 </template>
@@ -36,25 +36,46 @@ export default {
           trigger: 'item'
         },
         grid: {
-          left: '20%',
-          containLabel: true
-        },
-        title: {
-          text: "",
-          text: zhunshilv + '%',
-          textStyle: {
-            color: '#E6EFFF',
-            fontSize: 25
-          },
-          subtext: '巡更准时率',
-          subtextStyle: {
-            color: '#E6EFFF',
-            fontSize: 14
-          },
-          itemGap: 10, // 主副标题距离
-          left: 'center',
-          top: '40%'
+          left: '-20%',
+          right:"0%",
+          // containLabel: true
         },
+        title: [
+          // text: "",
+          // text: zhunshilv + '%',
+          // textStyle: {
+          //   color: '#E6EFFF',
+          //   fontSize: 18
+          // },
+          // subtext: '巡更准时率',
+          // subtextStyle: {
+          //   color: '#E6EFFF',
+          //   fontSize: 12
+          // },
+          // itemGap: 10, // 主副标题距离
+          // left: '45%',
+          // top: '40%'
+          {
+            text: zhunshilv + '%',
+            left: 'center',
+            left: '50%',
+            top: '40%',
+            textStyle: {
+              fontSize:18,
+              color: '#E6EFFF',
+              textAlign: 'center',
+            },
+          }, {
+            text: '巡更准时率',
+            left: '46%',
+            top: '52%',
+            textStyle: {
+              fontSize: 12,
+              color: '#E6EFFF',
+              textAlign: 'center',
+            },
+          }
+          ],
         legend: {
           orient: 'vertical',
           itemHeight: 8,
@@ -70,7 +91,7 @@ export default {
             }
           ],
           top: '40%',
-          left: 'left',
+          left: '0%',
           textStyle: {
             color: "#FFF"
           }
@@ -80,27 +101,28 @@ export default {
             name: '',
             type: 'pie',
             radius: ['40%', '55%'],
+            center: ['60%', 'center'],
             avoidLabelOverlap: true,
             itemStyle: {
               normal: {
                 label: {
                   show: false,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value/total) * 100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: false,
-                  length: 15,
-                  length2: 30,
+                  length: 10,
+                  length2: 10,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/nengyuan/index.vue

@@ -8,7 +8,7 @@
       <el-col class="left" :span="7">
         <el-row class="top content" :gutter="10">
           <el-col :span="12">
-            <el-image :src="img1" fit="scale-down"/>
+            <el-image :src="img1" fit="scale-down" class="imgI"/>
             <el-col class="attribute"
               >当月制冷量<el-col class="num"
                 >{{ data.zhileng }}<span class="unit">kw·h</span></el-col
@@ -25,7 +25,7 @@
         </el-row>
         <el-row class="bottom content" :gutter="10">
           <el-col :span="12">
-            <el-image :src="img2" fit="scale-down"/>
+            <el-image :src="img2" fit="scale-down" class="imgI"/>
             <el-col class="attribute"
               >当月发热量<el-col class="num"
                 >{{data.fare}}<span class="unit">kw·h</span></el-col
@@ -108,40 +108,45 @@ export default {
 @import '@/assets/styles/common.scss';
 .wrap{
   color:$white;
+  margin-top:10px;
   .left{
     margin-left:24px;
     .content{
-      margin-top:40px;
-      >.el-image{
-        width:66px;
+      margin-top:60px;
+      .imgI{
+        width:40px;
         vertical-align: middle;
         display: inline-block;
       }
+      // >.el-image{
+      //   vertical-align: middle;
+      //   display: inline-block;
+      // }
       .attribute{
-          margin-top:-70px;
+          margin-top:-50px;
           vertical-align: middle;
-          font-size: 20px;
-          margin-left: 78px;
+          font-size: 14px;
+          margin-left: 50px;
           .num {
-            font-size: 30px;
+            font-size: 16px;
             font-family: "微软雅黑";
             font-weight: 700;
             margin: 0.7vh 0 0 -2px;
             .unit {
-              font-size: 24px;
+              font-size: 18px;
               width: auto;
               margin:10px 0 0 0px;
-              vertical-align: middle;
             }
           }
       }
       .attribute2{
-        margin-top:0px;
+        margin:-10px 0 0 40px;
           .num {
             position: relative;
             .img{
               position: absolute;
               top:0px;
+              width:20px;
             }
           }
       }
@@ -154,16 +159,17 @@ export default {
   .middle{
     position: relative;
     .lineL{
-      height:240px;
+      height:100px;
       position: absolute;
-      left:30px;
+      left:0px;
       top:-40px;
     }
     .lineR{
-      height:240px;
+      height:100px;
       position: absolute;
-      left:330px;
-      top:-20px;
+      left:236px;
+      top:-40px;
+      opacity: 1;
     }
     >p{
       width:100%;

src/components3/nengyuan/pie.vue

@@ -2,7 +2,7 @@
     <el-row >
       <div
         id="index1"
-        style="height:260px;margin-top:-30px;"
+        style="height:200px;margin-top:-20px;"
       ></div>
     </el-row>
   </template>
@@ -39,7 +39,7 @@ import * as echarts from 'echarts';
             text: this.data[0].value + this.data[1].value + '个',
             textStyle: {
               color: '#E6EFFF',
-              fontSize: 25
+              fontSize: 18
             },
             subtext: '设备总数',
             subtextStyle: {
@@ -63,7 +63,7 @@ import * as echarts from 'echarts';
                 icon: 'circle',
               }
             ],
-            top: '84%',
+            top: '90%',
             left: 'center',
             textStyle: {
               color: "#FFF"
@@ -80,21 +80,21 @@ import * as echarts from 'echarts';
                   label: {
                     show: true,
                     position: 'outer',
-                    fontSize: 18,
+                    fontSize: 14,
                     fontWeight: 'bold',
                     align: "left",
                     formatter: function (p) { //指示线对应文字，说明文字
                       return ((p.data.value/total) * 100).toFixed(2) + '%';
                     },
                     textStyle: {
-                      fontSize: 18,
+                      fontSize: 14,
                       color: "#fff"
                     },
                   },
                   labelLine: { //指示线状态
                     show: true,
-                    length: 15,
-                    length2: 30,
+                    length: 10,
+                    length2: 10,
                     lineStyle: {
                       color: '#ABABAB'
                     },

src/components3/tongxingguanli/index.vue

@@ -4,29 +4,29 @@
       <span class="biao"></span>
       <span class="title">通行管理</span>
     </el-col>
-    <el-row class="wrap" :gutter="32">
+    <el-row class="wrap" :gutter="10">
       <el-col class="left" :span="12">
         <el-col class="top" :span="24">
           <el-col class="left" :span="6">
             <el-col class="top">今日总人流量</el-col>
-            <el-col class="bottom" >
+            <el-col class="bottom" style="text-align: center;" >
               <el-col class="num">{{data1.n1}}<span class="unit">人/次</span></el-col>
             </el-col>
           </el-col>
-          <el-col class="middle middleRight" :span="9">
+          <el-col class="middle middleRight" :span="9" style="margin-left:-14px;">
             <el-col class="top">
-              <el-col class="attribute">今日考勤人数：<span class="num">{{data1.n2}}</span><span class="unit">人/次</span></el-col>
+              <el-col class="attribute" >今日考勤人数: <span class="num">{{data1.n2}}</span><span class="unit" >人/次</span></el-col>
             </el-col>
             <el-col class="bottom" >
-              <el-col class="attribute">今日访客通行：<span class="num">{{data1.n3}}</span><span class="unit">人/次</span></el-col>
+              <el-col class="attribute">今日访客通行: <span class="num">{{data1.n3}}</span><span class="unit">人/次</span></el-col>
             </el-col>
           </el-col>
           <el-col class="bottom middleRight" :span="9">
             <el-col class="top">
-              <el-col class="attribute">无感考勤效率提升：<span class="num">{{data1.n4}}</span><span class="unit">%</span></el-col>
+              <el-col class="attribute">无感考勤效率提升: <span class="num">{{data1.n4}}</span><span class="unit">%</span></el-col>
             </el-col>
             <el-col class="bottom" >
-              <el-col class="attribute">访客通行效率提升：<span class="num">{{data1.n5}}</span><span class="unit">%</span></el-col>
+              <el-col class="attribute">访客通行效率提升: <span class="num">{{data1.n5}}</span><span class="unit">%</span></el-col>
             </el-col>
           </el-col>
         </el-col>
@@ -46,16 +46,16 @@
               <el-col class="num">{{data2.n1}}<span class="unit">辆/次</span></el-col>
             </el-col>
           </el-col>
-          <el-col class="middle middleRight" :span="16">
-            <el-col class="top" style="padding-left:0;">
-              <el-col class="attribute">地下停车场流量：<span class="num">{{data2.n2}}</span><span class="unit">辆/次</span></el-col>
+          <el-col class="middle middleRight" :span="16" >
+            <el-col class="top" style="padding-left:10px;">
+              <el-col class="attribute">地下停车场流量: <span class="num">{{data2.n2}}</span><span class="unit">辆/次</span></el-col>
             </el-col>
-            <el-col class="bottom" style="padding-left:0;">
-              <el-col class="attribute">VIP停车场流量：<span class="num">{{data2.n3}}</span><span class="unit">辆/次</span></el-col>
+            <el-col class="bottom" style="padding-left:10px;">
+              <el-col class="attribute">VIP停车场流量: <span class="num">{{data2.n3}}</span><span class="unit">辆/次</span></el-col>
             </el-col>
           </el-col>
         </el-col>
-        <el-col class="bottom" :span="24">
+        <el-col class="bottom" :span="24" style="margin-left:10px">
           <el-col class="left" :span="6">
             <el-image :src="img10" fit="scale-down"/>
             <el-col class="title">无人值守车辆通行</el-col>
@@ -146,10 +146,10 @@ export default {
     >.top{
       height:90px;
       background: rgba(77,85,101,0.25);
-      padding:16px 0 16px 0px !important;
+      padding:25px 0 0px 0px !important;
       >.left{
         >.top{
-          font-size: 16px;
+          font-size: 12px;
           padding:0 !important;
         }
         >.bottom{
@@ -157,9 +157,9 @@ export default {
           font-weight: 700;
           padding:0 !important;
           .num{
-            font-size: 24px;
+            font-size: 12px;
             .unit{
-              font-size: 20px;
+              font-size: 12px;
             }
           }
         }
@@ -171,12 +171,13 @@ export default {
       >.middleRight{
          padding:0 !important;
         >.top{
-          font-size: 16px;
+          font-size: 12px;
           padding:0 !important;
           // background: red;
           .attribute{
+            font-size: 12px;
             .num{
-              font-size: 20px;
+              font-size: 12px;
               font-weight: 700;
             }
           }
@@ -184,10 +185,10 @@ export default {
         >.bottom{
           padding:0 !important;
           margin-top:6px;
-          font-size: 16px;
+          font-size: 12px;
           .attribute{
             .num{
-              font-size: 20px;
+              font-size: 12px;
               font-weight: 700;
             }
           }
@@ -198,11 +199,11 @@ export default {
       position: relative;
       >.left{
         height:100px;
-        margin:12px 0  0 -16px !important;
+        margin:12px 0  0 -6px !important;
         text-align: center;
         background-image: linear-gradient(180deg, rgba(77,85,101,0.00) 0%, #4D5565 100%);
         font-weight: 700;
-        font-size: 14px;
+        font-size: 12px;
         .el-image{
           margin:-4px 0 10px;
         }
@@ -213,11 +214,11 @@ export default {
     >.top{
       height:90px;
       background: rgba(77,85,101,0.25);
-      padding:16px 0 16px 16px;
+      padding:25px 0 0px 0px;
       >.left{
         padding:0 !important;
         >.top{
-          font-size: 16px;
+          font-size: 12px;
           padding:0 !important;
         }
         >.bottom{
@@ -225,9 +226,9 @@ export default {
           font-weight: 700;
           padding:0 !important;
           .num{
-            font-size: 26px;
+            font-size: 12px;
             .unit{
-              font-size: 20px;
+              font-size: 12px;
             }
           }
         }
@@ -239,20 +240,20 @@ export default {
       >.middleRight{
         padding:0 12px;
         >.top{
-          font-size: 16px;
+          font-size: 12px;
           .attribute{
             .num{
-              font-size: 20px;
+              font-size: 12px;
               font-weight: 700;
             }
           }
         }
         >.bottom{
           margin-top:6px;
-          font-size: 16px;
+          font-size: 12px;
           .attribute{
             .num{
-              font-size: 20px;
+              font-size: 12px;
               font-weight: 700;
             }
           }
@@ -267,7 +268,7 @@ export default {
         text-align: center;
         background-image: linear-gradient(180deg, rgba(77,85,101,0.00) 0%, #4D5565 100%);
         font-weight: 700;
-        font-size: 14px;
+        font-size: 12px;
         padding:0 !important;
 
         .title{
@@ -283,10 +284,10 @@ export default {
       .attribute{
           margin-top:-70px;
           vertical-align: middle;
-          font-size: 20px;
+          font-size: 12px;
           margin-left: 78px;
           .num {
-            font-size: 30px;
+            font-size: 12px;
             font-family: "微软雅黑";
             font-weight: 700;
             margin: 0.7vh 0 0 -2px;
@@ -302,9 +303,7 @@ export default {
 
   }
 }
-.attribute{
-  padding:0 0 0 16px !important;
-}
+
 .num{
     padding:0 !important;
   }

src/components3/tongxingguanli/lineE2.vue

@@ -4,8 +4,8 @@
         id="index8"
         style="position:absolute;
         top:-140px;
-        left:-34px;
-        width:125%;
+        left:-24px;
+        width:120%;
         height:235px;"
       ></div>
     </el-row>
@@ -40,9 +40,11 @@ import * as echarts from 'echarts';
           tooltip: {
             trigger: 'axis'
           },
-          legend: {
-            data: this.data[3]
-          },
+          // legend: {
+          //   orient: 'vertical',
+          //   show: true,
+          //   data: this.data[3]
+          // },
           grid: {
             left: '24%',
             containLabel: true
@@ -78,6 +80,7 @@ import * as echarts from 'echarts';
           legend: {
             itemHeight: 8,
             itemWidth: 8,
+            orient: 'vertical',
             data: [
               {
                 name: this.data[3][0],
@@ -88,8 +91,9 @@ import * as echarts from 'echarts';
                 icon: 'circle',
               }
             ],
-            top: '65%',
+            top: '62%',
             left: 'left',
+            itemGap: 6,
             textStyle: {
               color: "#FFF"
             }

src/components3/xiaofangjiangkong/index.vue

@@ -104,12 +104,13 @@ export default {
 @import '@/assets/styles/common.scss';
 .wrap{
   color:$white;
+  margin-top:50px;
   .left_{
-    margin-left:24px;
+    margin:20px 0 0 24px;
     .attribute{
-        font-size: 16px;
-        width:120px;
-        height:136px;
+        font-size: 14px;
+        width:90px;
+        height:102px;
         text-align: center;
         background:  linear-gradient(180deg, rgba(77,85,101,0.00) 0%, #4D5565 100%);
         position: relative;
@@ -119,15 +120,14 @@ export default {
           display: block;
         }
         .num {
-          font-size: 25px;
+          font-size: 16px;
           font-family: "微软雅黑";
           font-weight: 700;
           margin: 0.7vh 0 0 -2px;
           .unit {
-            font-size: 24px;
+            font-size: 16px;
             width: auto;
             margin:10px 0 0 0px;
-            vertical-align: middle;
           }
         }
       }
@@ -139,13 +139,13 @@ export default {
     .lineL1{
       height:240px;
       position: absolute;
-      left:-15px;
+      left:0px;
       top:-40px;
     }
     .lineL2{
       height:240px;
       position: absolute;
-      left:15px;
+      left:25px;
       top:-40px;
     }
     .content{
@@ -158,7 +158,7 @@ export default {
         font-weight: 700;
       }
       .listWrap{
-        margin-top:-30px;
+        margin-top:-20px;
         .list{
           margin-top:15px;
           .el-image{
@@ -168,18 +168,17 @@ export default {
           }
           .attribute{
               margin-top:-26px;
-              font-size: 20px;
+              font-size: 14px;
               margin-left: 30px;
               .num {
-                font-size: 25px;
+                font-size: 18px;
                 font-family: "微软雅黑";
                 font-weight: 700;
                 margin: 0.7vh 0 0 -2px;
                 .unit {
-                  font-size: 24px;
+                  font-size: 18px;
                   width: auto;
                   margin:10px 0 0 0px;
-                  vertical-align: middle;
                 }
               }
           }

src/components3/xiaofangjiangkong/pie.vue

@@ -2,7 +2,7 @@
   <el-row >
     <div
       id="index5"
-      style="height:260px;margin-top:-30px;"
+      style="height:200px;margin:-30px 0 0 10px;"
     ></div>
   </el-row>
 </template>
@@ -44,14 +44,14 @@ export default {
           text: jishilv + '%',
           textStyle: {
             color: '#E6EFFF',
-            fontSize: 25
+            fontSize: 18
           },
           subtext: '及时处理率',
           subtextStyle: {
             color: '#E6EFFF',
             fontSize: 14
           },
-          itemGap: 10, // 主副标题距离
+          itemGap: 8, // 主副标题距离
           left: 'center',
           top: '40%'
         },
@@ -86,21 +86,21 @@ export default {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value/total) * 100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 15,
-                  length2: 30,
+                  length: 10,
+                  length2: 10,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/xiaofangjiangkong/pie2.vue

@@ -3,7 +3,7 @@
     <div
       id="index6"
       class="line"
-      style="width:110%;height:260px;margin:120px 0 0 40px;"
+      style="width:110%;height:200px;margin:120px 0 0 40px;"
     ></div>
   </el-row>
 </template>
@@ -48,14 +48,14 @@ export default {
           text: zaixianlv + '%',
           textStyle: {
             color: '#E6EFFF',
-            fontSize: 25
+            fontSize: 18
           },
           subtext: '设备在线率',
           subtextStyle: {
             color: '#E6EFFF',
             fontSize: 14
           },
-          itemGap: 10, // 主副标题距离
+          itemGap: 6, // 主副标题距离
           left: 'center',
           top: '40%'
         },
@@ -103,21 +103,21 @@ export default {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value/total) * 100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 15,
-                  length2: 30,
+                  length: 8,
+                  length2: 4,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/yuanqushenghuo/index.vue

@@ -54,18 +54,18 @@
           <el-col class="lineWrap" :span="18"><pie :resData="pieData"/></el-col>
         </el-col>
          <el-col class="middle bottomM" :span="8">
-          <div class="lineL1">
+          <!-- <div class="lineL1">
             <el-image :src="line1"></el-image>
-          </div>
+          </div> -->
           <el-col class="left" >
             <el-col class="text" :span="24">近七日客房使用情况</el-col>
           </el-col>
           <el-col class="lineWrap" :span="18"><lineE3 :resData="lineData3"/></el-col>
         </el-col>
         <el-col class="right bottomM" :span="8">
-          <div class="lineL1">
+          <!-- <div class="lineL1">
             <el-image :src="line1"></el-image>
-          </div>
+          </div> -->
           <el-col class="left" >
             <el-col class="text" :span="24">近七日充值情况（元）</el-col>
           </el-col>
@@ -145,25 +145,25 @@ export default {
     >.left{
       margin-top:35px;
       >.left{
-        width:60px;
+        width:30px;
         height:200px;
         text-align: center;
         display: flex;
         float:left;
-        font-size: 20px;
+        font-size: 14px;
         background: rgba(77,85,101,0.35);
-        margin:0 20px 0 16px;
+        margin:0 10px 0 0px;
 
         .text{
           writing-mode: vertical-lr;
           writing-mode: tb-lr;
-          margin-left:16px;
+          margin-left:6px;
           font-weight: 700;
           letter-spacing: 4px;
         }
       }
       >.right{
-        font-size: 16px;
+        font-size: 12px;
         .wrapList{
           .list{
             span{
@@ -186,16 +186,18 @@ export default {
         top:0px;
       };
       >.top{
-        font-size: 16px;
+        font-size: 12px;
         .list{
+
           p:nth-child(1){
             margin-top:22px;
           }
           p:nth-child(2){
-            margin-top:-16px;
+            margin-top:-12px;
           }
           span{
             margin-left:10px;
+
           }
         }
         .lineWrap{
@@ -223,19 +225,19 @@ export default {
         top:-40px;
       }
       >.left{
-        width:60px;
+        width:30px;
         height:290px;
         text-align: center;
         display: flex;
         float:left;
-        font-size: 20px;
+        font-size: 12px;
         background: rgba(77,85,101,0.35);
-        margin:0 20px 0 16px;
+        margin:0 20px 0 0px;
 
         .text{
           writing-mode: vertical-lr;
           writing-mode: tb-lr;
-          margin-left:5px;
+          margin-left:7px;
           font-weight: 700;
           letter-spacing: 4px;
         }
@@ -271,23 +273,21 @@ export default {
         width:auto;
         display: inline-block;
         .el-image{
-          width:24px;
-          vertical-align: top;
+          width:20px;
           display: inline-block;
           margin-top:6px;
         }
         .attribute{
             margin:-28px 0 0 26px;
-            font-size: 20px;
+            font-size: 14px;
             .num {
-              font-size: 25px;
+              font-size: 16px;
               font-family: "微软雅黑";
               font-weight: 700;
               margin:0 4px !important;
               .unit {
-                font-size: 24px;
+                font-size: 16px;
                 width: auto;
-                vertical-align: middle;
               }
             }
         }

src/components3/yuanqushenghuo/lineE.vue

@@ -142,9 +142,6 @@ import * as echarts from 'echarts';
           tooltip: {
             trigger: 'axis'
           },
-          legend: {
-            data: this.data[3]
-          },
           grid: {
             left: '0%',
             containLabel: true
@@ -194,9 +191,10 @@ import * as echarts from 'echarts';
               }
             ],
             bottom: '10%',
-            left: 'center',
+            left: '0',
             textStyle: {
-              color: "#FFF"
+              color: "#FFF",
+              fontSize: '10'
             }
           },
           series: [

src/components3/yuanqushenghuo/lineE2.vue

@@ -3,6 +3,7 @@
       <div
         id="index7-2"
         class="line"
+        style="height:260px;width:106%"
       ></div>
     </el-row>
   </template>

src/components3/yuanqushenghuo/pie.vue

@@ -2,7 +2,7 @@
   <el-row >
     <div
       id="index7-3"
-      style="width:120%;height:200px;margin-top:40px;"
+      style="width:100%;height:200px;margin-top:40px;"
     ></div>
   </el-row>
 </template>
@@ -43,7 +43,7 @@ export default {
           containLabel: true
         },
         legend: {
-          orient: 'vertical',
+          // orient: 'vertical',
           itemHeight: 8,
           itemWidth: 8,
           data: [
@@ -60,7 +60,7 @@ export default {
               icon: 'circle',
             }
           ],
-          bottom: '20%',
+          bottom: '0%',
           left: 'left',
           textStyle: {
             color: "#FFF"
@@ -72,26 +72,27 @@ export default {
             type: 'pie',
             // radius: ['40%', '55%'],
             avoidLabelOverlap: true,
+            center:["45%","44%"],
             itemStyle: {
               normal: {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return p.data.value;
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 4,
-                  length2: 10,
+                  length: -10,
+                  length2: -10,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/yuanqushenghuo/pie2.vue

@@ -49,11 +49,11 @@ export default {
           containLabel: true
         },
         legend: {
-          orient: 'vertical',
+          // orient: 'vertical',
           itemHeight: 8,
           itemWidth: 8,
           data: [],
-          bottom: '20%',
+          bottom: '0%',
           left: 'left',
           textStyle: {
             color: "#FFF"
@@ -70,21 +70,21 @@ export default {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value / total)*100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 4,
-                  length2: 10,
+                  length: -45,
+                  length2: 20,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/zhihuibangong/index.vue

@@ -161,21 +161,21 @@ export default {
       margin-top:0px;
       padding-left:50px;
       .list{
-        margin-top:30px;
+        margin:30px 0 0 -10px;
         .el-image{
           width:24px;
-          vertical-align: top;
+          // vertical-align: top;
           display: inline-block;
         }
         .attribute{
-            margin:-30px 0 0 30px;
-            font-size: 20px;
+            margin:-26px 0 0 30px;
+            font-size: 12px;
             .num {
-              font-size: 25px;
+              font-size: 14px;
               font-family: "微软雅黑";
               font-weight: 700;
               .unit {
-                font-size: 24px;
+                font-size: 12px;
                 width: auto;
                 vertical-align: middle;
               }
@@ -191,14 +191,14 @@ export default {
     width:100%;
     text-align: center;
     margin:-10px auto 10px;
-    font-size: 20px;
+    font-size: 14px;
     font-weight: 700;
   }
 }
 .listWrap{
-  margin-top:-30px;
+  margin-top:-10px;
   .list{
-    margin-top:20px;
+    margin:20px 0 0 -30px;
     .el-image{
       width:24px;
       vertical-align: top;
@@ -206,17 +206,16 @@ export default {
     }
     .attribute{
         margin:-28px 0 0 30px;
-        font-size: 20px;
+        font-size: 14px;
         .num {
-          font-size: 25px;
+          font-size: 16px;
           font-family: "微软雅黑";
           font-weight: 700;
           margin: 0.7vh 0 0 -2px;
           .unit {
-            font-size: 24px;
+            font-size: 16px;
             width: auto;
             margin:10px 0 0 0px;
-            vertical-align: middle;
           }
         }
     }

src/components3/zhihuibangong/pie1.vue

@@ -56,16 +56,16 @@ export default {
           text: lv + '%',
           textStyle: {
             color: '#E6EFFF',
-            fontSize: 25
+            fontSize: 18
           },
           subtext: '使用率',
           subtextStyle: {
             color: '#E6EFFF',
-            fontSize: 14
+            fontSize: 12
           },
-          itemGap: 10, // 主副标题距离
+          itemGap: 4, // 主副标题距离
           left: 'center',
-          top: '42%'
+          top: '44%'
         },
         legend: {
           // orient: 'vertical',

src/components3/zhihuibangong/pie2.vue

@@ -59,16 +59,16 @@ export default {
           text: total + '个',
           textStyle: {
             color: '#E6EFFF',
-            fontSize: 25
+            fontSize: 18
           },
           subtext: '会议总数',
           subtextStyle: {
             color: '#E6EFFF',
-            fontSize: 14
+            fontSize: 12
           },
-          itemGap: 10, // 主副标题距离
+          itemGap: 4, // 主副标题距离
           left: 'center',
-          top: '42%'
+          top: '44%'
         },
         legend: {
           // orient: 'vertical',

src/components3/zhihuixuexi/index.vue

@@ -18,7 +18,7 @@
           <el-col class="list">
             <el-image :src="img16" fit="scale-down" />
             <el-col class="attribute"
-              >当前在外数量：<span class="num"
+              >当前在外数量: <span class="num"
                 >{{ data.n2 }}<span class="unit">本</span></span
               ></el-col
             >
@@ -26,7 +26,7 @@
           <el-col class="list">
             <el-image :src="img16" fit="scale-down" />
             <el-col class="attribute"
-              >还书准时率：<span class="num"
+              >还书准时率: <span class="num"
                 >{{ data.n3 }}<span class="unit">%</span></span
               ></el-col
             >
@@ -34,7 +34,7 @@
           <el-col class="list">
             <el-image :src="img16" fit="scale-down" />
             <el-col class="attribute"
-              >总共外借数：<span class="num"
+              >总共外借数: <span class="num"
                 >{{ data.n4 }}<span class="unit">本/次</span></span
               ></el-col
             >
@@ -107,8 +107,8 @@ export default {
     padding-left: 24px;
     .pf {
       .attribute {
-        font-size: 16px;
-        width: 120px;
+        font-size: 14px;
+        width: 90px;
         height: 136px;
         text-align: center;
         background: linear-gradient(
@@ -119,16 +119,16 @@ export default {
         position: relative;
         margin: 80px auto 0;
         .el-image {
-          margin: -50px auto -4px;
+          margin: -20px auto -4px;
           display: block;
         }
         .num {
-          font-size: 25px;
+          font-size: 18px;
           font-family: "微软雅黑";
           font-weight: 700;
           margin: 0.7vh 0 0 -2px;
           .unit {
-            font-size: 24px;
+            font-size: 18px;
             width: auto;
             margin: 10px 0 0 0px;
             vertical-align: middle;
@@ -138,28 +138,27 @@ export default {
     }
 
     .listWrap {
-      margin-top: 30px;
+      margin: 30px 0 0 0px;
       .list {
-        margin-top: 30px;
+        margin-top: 40px;
         .el-image {
-          width: 24px;
+          width: 20px;
           vertical-align: top;
           display: inline-block;
         }
         .attribute {
-          margin-top: -30px;
-          font-size: 20px;
-          margin-left: 30px;
+          margin-top: -24px;
+          font-size: 14px;
+          margin-left: 24px;
           .num {
-            font-size: 25px;
+            font-size: 14px;
             font-family: "微软雅黑";
             font-weight: 700;
             margin: 1.3vh 0 0 -2px;
             .unit {
-              font-size: 24px;
+              font-size: 14px;
               width: auto;
               margin: 10px 0 0 0px;
-              vertical-align: middle;
             }
           }
         }

src/components3/zhihuixuexi/pie.vue

@@ -70,7 +70,7 @@ export default {
           top: '20%',
           left: 'left',
           textStyle: {
-            color: "#FFF"
+            color: "#FFF",
           }
         },
         series: [
@@ -83,21 +83,21 @@ export default {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value/total) * 100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 4,
-                  length2: 10,
+                  length: -20,
+                  length2: -20,
                   lineStyle: {
                       color: '#ABABAB'
                     },

src/components3/zhihuixuexi/pie2.vue

@@ -83,21 +83,21 @@ export default {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 14,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return ((p.data.value/total) * 100).toFixed(2) + '%';
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 14,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 4,
-                  length2: 10,
+                  length: -20,
+                  length2: -20,
                   lineStyle: {
                       color: '#ABABAB'
                     },

src/components3/zuhuguanli/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: wt
+ * @Date: 2023-05-31 10:35:11
+ * @LastEditors: wt
+ * @LastEditTime: 2023-06-01 11:41:55
+-->
 <template>
   <el-col :span="24" class="xiaofangjiangkong modular modularTop">
     <el-col class="top" >
@@ -79,7 +87,7 @@ export default {
     .lineL{
       height:240px;
       position: absolute;
-      left:340px;
+      left:240px;
       top:-60px;
     };
   }
@@ -89,7 +97,7 @@ export default {
     width:100%;
     text-align: center;
     margin:-20px auto 16px;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: 700;
   }
 }

src/components3/zuhuguanli/pie1.vue

@@ -2,7 +2,7 @@
   <el-row >
     <div
       id="index6-1"
-      style="height:220px;margin-top:-10px;"
+      style="height:180px;margin-top:4px;"
     ></div>
   </el-row>
 </template>
@@ -51,12 +51,11 @@ export default {
           containLabel: true
         },
         legend: {
-          orient: 'vertical',
           itemHeight: 8,
           itemWidth: 8,
           data: [],
-          bottom: '40%',
-          left: 'left',
+          bottom: '0%',
+          left: '14%',
           textStyle: {
             color: "#FFF"
           }
@@ -67,26 +66,27 @@ export default {
             type: 'pie',
             // radius: ['40%', '55%'],
             avoidLabelOverlap: true,
+            center:["45%","45%"],
             itemStyle: {
               normal: {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 12,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return p.data.value;
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 12,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态
                   show: true,
-                  length: 10,
-                  length2: 10,
+                  length: -60,
+                  length2: 20,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/zuhuguanli/pie2.vue

@@ -2,7 +2,7 @@
   <el-row >
     <div
       id="index6-2"
-      style="height:220px;margin-top:-10px;"
+      style="height:180px;margin-top:4px;"
     ></div>
   </el-row>
 </template>
@@ -50,12 +50,12 @@ export default {
           containLabel: true
         },
         legend: {
-          orient: 'vertical',
+          // orient: '',
           itemHeight: 8,
           itemWidth: 8,
           data: [],
-          bottom: '40%',
-          left: 'left',
+          bottom: '0%',
+          left: '14%',
           textStyle: {
             color: "#FFF"
           }
@@ -66,26 +66,27 @@ export default {
             type: 'pie',
             // radius: ['40%', '55%'],
             avoidLabelOverlap: false,
+            center:["45%","45%"],
             itemStyle: {
               normal: {
                 label: {
                   show: true,
                   position: 'outer',
-                  fontSize: 18,
+                  fontSize: 12,
                   fontWeight: 'bold',
                   align: "left",
                   formatter: function (p) { //指示线对应文字，说明文字
                     return  p.data.value;
                   },
                   textStyle: {
-										fontSize: 18,
+										fontSize: 12,
 										color: "#fff"
 									},
                 },
                 labelLine: { //指示线状态smooth: 0.8,
                   show: true,
-                  length: 10,
-                  length2: 10,
+                  length: -20,
+                  length2: -20,
                   lineStyle: {
 										color: '#ABABAB'
 									},

src/components3/zuhuguanli/seTable.vue

@@ -164,5 +164,12 @@ export default {
     border-radius: 6px;
     background: $modularBackGround;//滚动条背景色
   }
+  .el-table th > .cell {
+    // font-size: 12px;
+  }
+  tr .cell{
+    padding-left: 20px !important;
+  }
+
 }
 </style>

src/views/index.vue

@@ -1,3 +1,11 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author: wt
+ * @Date: 2022-11-01 09:09:32
+ * @LastEditors: wt
+ * @LastEditTime: 2023-05-31 14:28:34
+-->
 <template>
   <div class="app-container home">
     <div id="main">
@@ -453,13 +461,16 @@ export default {
   font-family: "MicrosoftYaHei";
   .containWrap {
     clear: both;
-    width: 3800px;
+    width: 2560px;
     overflow: hidden;
     padding: 0 !important;
     height: 950px;
     margin-top: 100px;
+    display: flex;
+    flex-direction: row;
     > div {
-      width: 1255.3px;
+      // width: 829.6px;
+      // width: 30%;
     }
     .middleWrap,
     .rightWrap {