组件放大

ui/src/views/front/acrylicTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div style="text-align: center;padding-bottom: 2px;display: flex;justify-content: space-around;margin-top: 10px;align-items: center;height: 80%;">
+      <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;text-align: center;padding-bottom: 2px;display: flex;justify-content: center;margin-top: 10px;align-items: center;height: 80%;' :'text-align: center;padding-bottom: 2px;display: flex;justify-content: center;margin-top: 10px;align-items: center;height: 80%;'">
         <div style="position: relative;">
           <img src="@/assets/image/Spherical1.png" style="height: 100px;width: 80px; margin-top: 0.7rem" v-if="0<=(dashboarddata.acrOne) && (dashboarddata.acrOne)<20">
           <img src="@/assets/image/Spherical2.png" style="height: 100px;width: 80px; margin-top: 0.7rem" v-if="20<=(dashboarddata.acrOne) && (dashboarddata.acrOne)<40">
@@ -65,7 +65,7 @@
 
 <script>
 export default {
-  props: ['dashboarddata'],
+  props: ['dashboarddata','transformdata'],
   data () {
     return {
       // 查询参数

ui/src/views/front/bottomLeft.vue

@@ -34,7 +34,7 @@ export default {
     height: {
       type: String,
       default: '200px'
-    }
+    },
   },
   data() {
     return {

ui/src/views/front/bottomRight.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div>
-        <dv-scroll-board :config="config" style="height:200px;widows: 70% !important; margin: auto;"/>
+        <dv-scroll-board :config="config" :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;height:200px;widows: 70% !important; margin: auto;' :'height:200px;widows: 70% !important; margin: auto;'"/>
       </div>
     </div>
   </div>
@@ -22,7 +22,7 @@
 <script>
 
 export default {
-  props: ['dashboarddata'],
+  props: ['dashboarddata','transformdata'],
   data() {
     return {
       config: {
@@ -66,6 +66,9 @@ export default {
   },
   mounted() {},
   methods: {},
+  created() {
+    console.log("transformdata",this.transformdata);
+  },
 };
 </script>
 

ui/src/views/front/energyConsumption.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div>
-        <div id="LossrateChart" style="width:420px; height: 160px;margin: auto;"></div>
+        <div id="LossrateChart" :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;width:420px; height: 160px;margin: auto;' :'width:420px; height: 160px;margin: auto;'"></div>
       </div>
     </div>
   </div>
@@ -25,7 +25,7 @@ import resize from "../dashboard/mixins/resize";
 export default {
   components: {},
   mixins: [resize],
-  props: ['monthData'],
+  props: ['monthData','transformdata'],
   data() {
     return {
       chart: null

ui/src/views/front/ethyleneTank.vue

@@ -12,50 +12,50 @@
           </div>
         </div>
       </div>
-      <div style="text-align: center; display: flex;justify-content: space-around;margin-top: 10px;align-items: center;height: 80%;">
+      <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;text-align: center; display: flex;justify-content: center;margin-top: 10px;align-items: center;height: 80%;' :'text-align: center; display: flex;justify-content: center;margin-top: 10px;align-items: center;height: 80%;'">
         <div style="position: relative;">
-            <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="0<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<20">
-            <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="20<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<40">
-            <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="40<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<60">
-            <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="60<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<80">
-            <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="80<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<100">
+            <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;" v-if="0<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<20">
+            <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;" v-if="20<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<40">
+            <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;" v-if="40<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<60">
+            <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;" v-if="60<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<80">
+            <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;" v-if="80<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<100">
             <span class="modelTop pos">STT1061</span>
             <span class="ModelFont">{{ dashboarddata.ehtOne }}%</span>
         </div>
-        <div style="position: relative;">
-          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="0<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<20">
-          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="20<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<40">
-          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="40<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<60">
-          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="60<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<80">
-          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="80<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<100">
+        <div style="position: relative; margin-left: 8% ;">
+          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;" v-if="0<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<20">
+          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;" v-if="20<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<40">
+          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;" v-if="40<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<60">
+          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;" v-if="60<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<80">
+          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;" v-if="80<=(dashboarddata.ehtTwo) && (dashboarddata.ehtTwo)<100">
             <span class="modelTop pos">STT1062</span>
             <span class="ModelFont">{{ dashboarddata.ehtTwo }}%</span>
         </div>
 
-        <div style="position: relative;">
-          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="0<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<20">
-          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="20<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<40">
-          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="40<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<60">
-          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="60<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<80">
-          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="80<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<100">
+        <div style="position: relative;margin-left: 8% ;">
+          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;" v-if="0<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<20">
+          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;" v-if="20<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<40">
+          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;" v-if="40<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<60">
+          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;" v-if="60<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<80">
+          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;" v-if="80<=(dashboarddata.ehtThree) && (dashboarddata.ehtThree)<100">
           <span class="modelTop pos">STT1063</span>
           <span class="ModelFont">{{ dashboarddata.ehtThree }}%</span>
         </div>
-        <div style="position: relative;">
-          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="0<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<20">
-          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="20<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<40">
-          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="40<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<60">
-          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="60<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<80">
-          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="80<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<100">
+        <div style="position: relative;margin-left: 8% ;">
+          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;" v-if="0<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<20">
+          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;" v-if="20<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<40">
+          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;" v-if="40<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<60">
+          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;" v-if="60<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<80">
+          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;" v-if="80<=(dashboarddata.ehtFour) && (dashboarddata.ehtFour)<100">
           <span class="modelTop pos">STT1064</span>
           <span class="ModelFont">{{ dashboarddata.ehtFour }}%</span>
         </div>
-        <div style="position: relative;">
-          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="0<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<20">
-          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="20<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<40">
-          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="40<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<60">
-          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="60<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<80">
-          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="80<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<100">
+        <div style="position: relative;margin-left: 8% ;">
+          <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;" v-if="0<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<20">
+          <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;" v-if="20<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<40">
+          <img src="@/assets/image/cylindrical3.png" style="width:40px;height: 170px;" v-if="40<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<60">
+          <img src="@/assets/image/cylindrical4.png" style="width:40px;height: 170px;" v-if="60<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<80">
+          <img src="@/assets/image/cylindrical5.png" style="width:40px;height: 170px;" v-if="80<=(dashboarddata.ehtFive) && (dashboarddata.ehtFive)<100">
           <span class="modelTop pos">STT1065</span>
           <span class="ModelFont">{{ dashboarddata.ehtFive }}%</span>
         </div>
@@ -66,7 +66,7 @@
 
 <script>
 export default {
-  props: ['dashboarddata'],
+  props: ['dashboarddata','transformdata'],
   data () {
     return {
       // 查询参数
@@ -107,7 +107,7 @@ export default {
     .ModelFont {
       position: absolute;
       bottom: -13px;
-      left: 7px;
+      left: 0;
     }
 
     .modelTop{

ui/src/views/front/napTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div style="text-align: center; display: flex;justify-content: center;height: 100%;align-items: center;">
+      <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;text-align: center; display: flex;justify-content: center;height: 100%;align-items: center;' :'text-align: center; display: flex;justify-content: center;height: 100%;align-items: center;'">
         <div style="position: relative;">
           <span class="span-num1">T1621</span>
           <img src="@/assets/image/warehouse1.png" style="height: 100px;width:120px;margin-top: 0.3rem" v-if="0<=(dashboarddata.napOne) && (dashboarddata.napOne)<20">
@@ -22,7 +22,7 @@
           <img src="@/assets/image/warehouse1.png" style="height: 100px;width:120px;margin-top: 0.3rem" v-if="80<=(dashboarddata.napOne) && (dashboarddata.napOne)<100">
           <div class="ModelFont">{{ dashboarddata.napOne }}%</div>
         </div>
-        <div style="position: relative;margin: 0 10%;">
+        <div style="position: relative;margin: 0 3%;">
           <span class="span-num2">T1622</span>
           <img src="@/assets/image/warehouse1.png" style="height: 100px;width:120px;margin-top: 0.3rem" v-if="0<=(dashboarddata.napTwo) && (dashboarddata.napTwo)<20">
           <img src="@/assets/image/warehouse2.png" style="height: 100px;width:120px;margin-top: 0.3rem" v-if="20<=(dashboarddata.napTwo) && (dashboarddata.napTwo)<40">
@@ -48,7 +48,7 @@
 <script>
 export default {
   components: {},
-  props: ['dashboarddata'],
+  props: ['dashboarddata','transformdata'],
 }
 </script>
 

ui/src/views/front/productProportion.vue

@@ -14,7 +14,7 @@
       </div>
       <div>
         <div>
-          <div id="productProportion" style="width:420px; height: 160px;margin: auto;"></div>
+          <div id="productProportion" :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;width:420px; height: 160px;margin: auto;' :'width:420px; height: 160px;margin: auto;'"></div>
         </div>
       </div>
     </div>
@@ -25,7 +25,7 @@
 import productProportion from "../dashboard/productProportion";
 import resize from "@/views/dashboard/mixins/resize";
 export default {
-  props: ['dashboarddata'],
+  props: ['dashboarddata','transformdata'],
   components: {
     productProportion
   },

ui/src/views/front/productTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div style="display:flex; align-items: center;justify-content: center;width: 100%;height: 90%;">
+      <div :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;display:flex; align-items: center;justify-content: center;width: 100%;height: 90%;' :'display:flex; align-items: center;justify-content: center;width: 100%;height: 90%;'">
         <div style="float: left;position: relative">
           <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="0<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<20">
           <img src="@/assets/image/warehouse2.png" style="height: 124px;margin-top: 0.3rem" v-if="20<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<40">
@@ -22,7 +22,7 @@
           <div class="ModelFont" style="margin-left: 55px;margin-top: 7px">{{ dashboarddata.proTwo }}%</div>
           <span class="modelTop pos1">STT1520</span>
         </div>
-        <div style="float: left; margin-left: 10%;position: relative">
+        <div style="float: left; margin-left: 5%;position: relative">
           <div style="text-align: center">
             <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proOne) && (dashboarddata.proOne)<20">
             <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proOne) && (dashboarddata.proOne)<40">
@@ -56,7 +56,7 @@
 
 <script>
 export default {
-  props: ['dashboarddata'],
+  props: ['dashboarddata','transformdata'],
   components: {
   },
 }

ui/src/views/monitor/elecNew/index.vue

@@ -71,42 +71,42 @@
                       </div>
                       <div class="middle">
                         <dv-border-box-13>
-                          <energy-consumption :monthData = 'monthData'/>
+                          <energy-consumption :monthData = 'monthData' :transformdata = 'transformdatabottomright'/>
                         </dv-border-box-13>
                       </div>
                       <div class="down">
                         <dv-border-box-13>
-                          <product-proportion :dashboarddata = 'dashboarddata'/>
+                          <product-proportion :dashboarddata = 'dashboarddata' :transformdata = 'transformdatabottomright'/>
                         </dv-border-box-13>
                       </div>
 
                       <dv-border-box-12 style="height: 260px;overflow: hidden;">
-                        <bottom-right :dashboarddata = 'dashboarddata'/>
+                        <bottom-right :dashboarddata = 'dashboarddata' :transformdata = 'transformdatabottomright'/>
                       </dv-border-box-12>
                     </div>
                   </el-col>
                   <!-- 中间 -->
                   <el-col :span="8" class="yunxing-middle">
                     <dv-border-box-12 style="width: 100%;height: 323px;">
-                      <nap-tank :dashboarddata = 'dashboarddata'/>
+                      <nap-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdatanaptank'/>
                     </dv-border-box-12>
                     <dv-border-box-12 style="width: 100%;height: 323px;">
-                      <product-tank :dashboarddata = 'dashboarddata'/>
+                      <product-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdatanaptank'/>
                     </dv-border-box-12>
                     <dv-border-box-12 style="width: 100%;height: 323px;">
-                      <bottom-left :monthData = 'monthData'/>
+                      <bottom-left :monthData = 'monthData' :height = 'height'/>
                     </dv-border-box-12>
                   </el-col>
                   <!-- 右侧 -->
                   <el-col :span="8" class="yunxing-right">
                     <dv-border-box-12 style="width: 100%;height: 323px;">
-                      <ethylene-tank :dashboarddata = 'dashboarddata' />
+                      <ethylene-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdataethylenetank'/>
                     </dv-border-box-12>
                     <dv-border-box-12 style="width: 100%;height: 323px;">
-                      <acrylic-tank :dashboarddata = 'dashboarddata'/>
+                      <acrylic-tank :dashboarddata = 'dashboarddata' :transformdata = 'transformdataacrylictank'/>
                     </dv-border-box-12>
                     <dv-border-box-12 style="width: 100%;height: 323px;">
-                      <bottom-energy :monthData = 'monthData'/>
+                      <bottom-energy :monthData = 'monthData' :height = 'height'/>
                     </dv-border-box-12>
                   </el-col>
 
@@ -339,7 +339,12 @@
         // 重构页面
         tabIndex:1,
         goodSwiper:null,
-        swiperAutoText:"暂停轮播"
+        swiperAutoText:"暂停轮播",
+        transformdatabottomright:"1.25,1",
+        transformdatanaptank:"1.35,1.35",
+        transformdataethylenetank:"1.3,1.2",
+        transformdataacrylictank:"1.4,1.3",
+        height:"260px"
       };
     },
     components: {
@@ -562,6 +567,7 @@ width: 100%;
 	width: 70%!important;
   margin:auto ;
 }
+
 </style>