Browse Source

单机健康页面,高度调整

wsy 3 years ago
parent
commit
8bbdb30ae3

+ 1 - 0
src/components/chart/line/weather-line-chart.vue

@@ -45,6 +45,7 @@ export default {
           top: 50,
           bottom: 50,
           left: 20,
+          right:20
         },
         tooltip: {
           trigger: "axis",

+ 22 - 37
src/views/HealthControl/Health10.vue

@@ -30,30 +30,22 @@
                 <tr>
                   <th rowspan="1" class="type1" style="width: 50px"></th>
                   <th rowspan="1" class="type1" style="width: 105px">健康度</th>
-                  <th rowspan="2" class="type1" style="width: 400px">
-                    MTBF(H/H)
-                  </th>
+                  <th rowspan="2" class="type1" style="width: 400px">MTBF(H/H)</th>
                   <th rowspan="1" class="type1" style="width: 180px"></th>
-                  <th rowspan="1" class="type1" style="width: 100px">
-                    MTTR(H)
-                  </th>
+                  <th rowspan="1" class="type1" style="width: 100px">MTTR(H)</th>
                 </tr>
               </thead>
             </table>
             <el-scrollbar>
-              <div style="height: calc(100vh - 174px)">
-                <table style="width: 100%" border="0" cellspacing="0">
+              <div style="height: calc(30vh)">
+                <table border="0" cellspacing="0">
                   <tbody>
                     <tr v-for="(item, index) of partsArray" :key="index">
                       <td style="width: 50px">
                         {{ item[1] }}
                       </td>
                       <td style="width: 105px">
-                        <div :style="
-                            'background-color: ' +
-                            item[0] +
-                            ';width:10px;height:10px;margin:0 auto;'
-                          "></div>
+                        <div :style="'background-color: ' + item[0] + ';width:10px;height:10px;margin:0 auto;'"></div>
                       </td>
                       <td style="width: 400px">
                         <div class="percent-item">
@@ -82,28 +74,31 @@
       <el-col :span="12">
         <div class="chart-title">
           <div class="title-panel" style="">
-            <span style="text-align: left; padding-left: 20px; font-size: 12px">故障信息
-            </span>
+            <span style="text-align: left; padding-left: 20px; font-size: 12px">故障信息 </span>
             <span class="des-title">预计损失电量<span class="num">73824.0</span><span class="unit">Kwh</span></span>
             <span class="des-title">预计检修时长<span class="num">29.33</span><span class="unit">H</span></span>
           </div>
           <!-- <img-line-chart
             height="270px"
           /> -->
-          <weather-line-chart :list="weatherData"/>
+          <weather-line-chart :list="weatherData" />
         </div>
       </el-col>
     </el-row>
     <div class="fc-info mg-b-16">
       <panel :title="'曲线'" :showLine="false">
-        <zoom-line-chart height="35vh" :list="powerChartData.value" :units="powerChartData.units" />
+        <zoom-line-chart height="28vh" :list="powerChartData.value" :units="powerChartData.units" />
       </panel>
     </div>
-    <HealthReport :show="healthReportShow" :params="{ wtId: this.wtId, recorddate: this.recorddate }" @closed="
+    <HealthReport
+      :show="healthReportShow"
+      :params="{ wtId: this.wtId, recorddate: this.recorddate }"
+      @closed="
         (res) => {
           this.healthReportShow = false;
         }
-      " />
+      "
+    />
   </div>
 </template>
 
@@ -245,11 +240,7 @@ export default {
             name: "故障名称",
             field: "v1",
             template: function (data) {
-              return (
-                "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" +
-                data +
-                "</div>"
-              );
+              return "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" + data + "</div>";
             },
           },
           {
@@ -373,9 +364,7 @@ export default {
       for (let i = 0; i < day; i++) {
         tableData.push({
           index: i + 1,
-          date: new Date(
-            new Date().getTime() - 3600 * 1000 * 24 * (i + 1)
-          ).formatDate("yyyy-MM-dd hh:mm:ss"),
+          date: new Date(new Date().getTime() - 3600 * 1000 * 24 * (i + 1)).formatDate("yyyy-MM-dd hh:mm:ss"),
           wtId: this.wtId,
         });
       }
@@ -399,12 +388,8 @@ export default {
             const item = {
               index: index + 1,
               warnDesc: ele.warnDesc,
-              startTime: new Date(ele.startTime).formatDate(
-                "yyyy-MM-dd hh:mm:ss"
-              ),
-              stopTime: new Date(ele.stopTime).formatDate(
-                "yyyy-MM-dd hh:mm:ss"
-              ),
+              startTime: new Date(ele.startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
+              stopTime: new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
               stopHours: ele.stopHours,
             };
             if (index < 5) {
@@ -503,14 +488,14 @@ export default {
         subUrl: "healthsub/getWeatherRealDay5Info",
         data: { wpId: this.wpId },
       });
-        // console.log(data);
+      // console.log(data);
       if (data && data.data) {
         this.weatherData = data.data.ls;
         // const list = [];
         // data.data.ls.forEach((element) => {
-          // console.log(element);
-          // console.log(new Date(element.time).formatDate("yyyy-MM-dd hh:mm:ss"));
-          // list.push();
+        // console.log(element);
+        // console.log(new Date(element.time).formatDate("yyyy-MM-dd hh:mm:ss"));
+        // list.push();
         // });
       }
     },