设备监控页面优化

pages/dncmnc/mnc/compose/echart2.vue

  <template>
   <div>
-    <div id="myChart" style="width:380px;height:300px;margin:0 auto;top: 0px;"></div>
+    <div id="myChart" style="width:380px;height:400px;margin:0 auto;top: 30px;"></div>
   </div>
 </template>
     <script>

pages/dncmnc/mnc/index.vue

@@ -118,9 +118,7 @@ export default {
         }
       },
       downUrl: fileUrlDown,
-      columns: {
-        count:7,
-      },
+      columns: [],
       comondata:[
         {
           productName: "受电弓",

pages/dncmnc/mnc/mnc.less

 
+.new_body{
+    &{
+        background: #fff;
+    }
+}
 .set_card{
     padding: 12px 30px 0;
     .set_card_box{
@@ -18,6 +23,7 @@
                 width: 150px;
                 height: 120px;
                 text-align: center;
+                margin: 0 auto;
             }
             .statu_box{
                 line-height: 30px;
@@ -32,11 +38,11 @@
                 margin: 0 10px 0 0;
             }
             .set_masage{
-                min-height: 125px;
+                height: 125px;
                 line-height: 25px;
                 .time_bg{
                     background: #267feb49;
-                    line-height: 34px;
+                    margin: 0 auto;
                     width: 160px;
                     text-align: center;
                     border-radius: 3px;
@@ -44,8 +50,13 @@
             }
             .set_masage02{
                 line-height: 35px;
+                height: 144px;
+                text-align: center;
             }
         }
+        .echarts02{
+            height: 462px;
+        }
     }
 }
 #echarts{
@@ -58,7 +69,7 @@
             .tips_item{
                 background: #eff1f7;
                 margin: 20px;
-                line-height: 38px;
+                line-height: 58px;
                 padding: 0 20px;
                 .item_top{
                     border-bottom: 1px solid #b1b1b1;

pages/dncmnc/mnc/monitoring.vue

@@ -2,7 +2,7 @@
 @import "./mnc.less";
 </style>
 <template>
-    <div>
+    <div class="new_body">
         <a class="back_href" @click="goView">
             <Icon type="ios-undo-outline" size="24" />返回设备监控
         </a>
@@ -74,7 +74,7 @@
                         <p class="set_top">设备状态</p>
                         <div class="set_card_body">
                             <Row>
-                                <Col span="9">
+                                <Col span="24">
                                     <div class="set_img statu_box">
                                         <img v-if="formData.statu=='关机'" src="../image/guan.png" alt="">
                                         <img v-else-if="formData.statu=='空闲'" src="../image/kong.png" alt="">
@@ -83,7 +83,7 @@
                                         <p>{{formData.statu}}</p>
                                     </div>
                                 </Col>
-                                <Col span="15">
+                                <Col span="24">
                                     <div class="set_masage set_masage02">
                                         <p>当前状态开始时间：</p>
                                         <p class="time_bg">11:45:05</p>
@@ -96,7 +96,7 @@
                     </div>
                     <div class="set_card_box">
                         <p class="set_top">加工状态统计</p>
-                        <div class="center">
+                        <div class="center echarts02">
                             <Echart2 ></Echart2>
                         </div>
                     </div>