Bläddra i källkod

逆变器单机页面,布局修改

wsy 3 år sedan
förälder
incheckning
20fc38fc9b
1 ändrade filer med 132 tillägg och 131 borttagningar
  1. 132 131
      src/views/WindSite/pages/Inverter-Info.vue

+ 132 - 131
src/views/WindSite/pages/Inverter-Info.vue

@@ -1,13 +1,21 @@
 <template>
   <div class="Inverter-Info">
-    <div class="btn-group-tabs">
+    <!-- <div class="btn-group-tabs">
       <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
-    </div>
+    </div>-->
     <div class="box-main">
       <List class="list" :title="list.title" :list="list.datas" @select="selectList"></List>
       <div class="Inverter-Info-body">
         <div class="Inverter-Info-title">
-          <div class="title">逆变室编号:28#</div>
+          <div class="title">3#逆变器</div>
+
+          <div class="title-tools-left">
+            <div class="other">逆变器型号:GBL-200</div>
+            <div class="state">
+              状态:
+              <div class="dot red"></div>
+            </div>
+          </div>
           <div class="title-tools">
             <div class="previous">上一页</div>
             <div class="next">上一页</div>
@@ -15,103 +23,50 @@
           </div>
         </div>
         <div class="inverter-datas">
-          <div v-for="index of 2" :key="index" class="inverter-item">
-            <div class="inverter-item-header">
+          <div class="inverter-item">
+            <!-- <div class="inverter-item-header">
               <div class="name">3#逆变器</div>
-              <div class="other">逆变器型号:GBL-2000</div>
+              <div class="other">逆变器型号:GBL-200</div>
               <div class="state">
                 状态:
                 <div class="dot red"></div>
               </div>
-            </div>
+            </div> -->
             <div class="inverter-item-info">
               <div class="form">
-                <table class="table-form mg-b-8">
-                  <tr>
-                    <td class="text gray">直流电机</td>
-                    <td class="value green">20.00</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">交流无功功率</td>
-                    <td class="value green">20.00</td>
-                    <td class="unit gray">Var</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流电流</td>
-                    <td class="value green">19.56</td>
-                    <td class="unit gray">A</td>
-                    <td class="text gray">功率因素</td>
-                    <td class="value green">19.56</td>
-                    <td class="unit gray">Var</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray">功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">KWh</td>
-                  </tr>
-                  <tr>
-                    <td class="text gray">直流功率</td>
-                    <td class="value green">52000.20</td>
-                    <td class="unit gray">V</td>
-                    <td class="text gray"></td>
-                    <td class="value green"></td>
-                    <td class="unit gray"></td>
-                  </tr>
-                </table>
-
-                <panel class="line-panel" :title="'开网频率'">
-                  <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
-                </panel>
+                <div>
+                  <table class="table-form mg-b-8" height="60%">
+                    <tr>
+                      <td class="text gray">直流功率</td>
+                      <td class="value green">52000.20</td>
+                      <td class="unit gray">V</td>
+                      <td class="text gray">功率</td>
+                      <td class="value green">52000.20</td>
+                      <td class="unit gray">KWh</td>
+                    </tr>
+                    <tr>
+                      <td class="text gray">直流功率</td>
+                      <td class="value green">52000.20</td>
+                      <td class="unit gray">V</td>
+                      <td class="text gray">功率</td>
+                      <td class="value green">52000.20</td>
+                      <td class="unit gray">KWh</td>
+                    </tr>
+                    <tr>
+                      <td class="text gray">直流功率</td>
+                      <td class="value green">52000.20</td>
+                      <td class="unit gray">V</td>
+                      <td class="text gray"></td>
+                      <td class="value green"></td>
+                      <td class="unit gray"></td>
+                    </tr>
+                  </table>
+                </div>
+                <div>
+                  <panel class="line-panel" :title="'开网频率'">
+                    <multiple-line-chart :list="lineValue" :units="['']" height="100%" />
+                  </panel>
+                </div>
               </div>
               <div class="states">
                 <div class="counts">
@@ -159,7 +114,7 @@ export default {
     BtnGroup2,
     List,
     Panel,
-    MultipleLineChart,
+    MultipleLineChart
   },
   // 数据
   data() {
@@ -170,56 +125,56 @@ export default {
           btns: [
             {
               text: "某某风场",
-              code: "mmfdc1",
+              code: "mmfdc1"
             },
             {
               text: "某某风场",
-              code: "mhsfc",
+              code: "mhsfc"
             },
             {
               text: "某某风场",
-              code: "mmfdc2",
+              code: "mmfdc2"
             },
             {
               text: "某某风场",
-              code: "mmfdc3",
+              code: "mmfdc3"
             },
             {
               text: "某某风场",
-              code: "mmfdc4",
-            },
-          ],
+              code: "mmfdc4"
+            }
+          ]
         },
         {
           icon: "fa fa-fire-extinguisher",
           btns: [
             {
               text: "某某风场",
-              code: "mmgf1",
+              code: "mmgf1"
             },
             {
               text: "某某风场",
-              code: "mmgf2",
+              code: "mmgf2"
             },
             {
               text: "某某风场",
-              code: "mmgf3",
+              code: "mmgf3"
             },
             {
               text: "某某风场",
-              code: "mmgf4",
-            },
-          ],
-        },
+              code: "mmgf4"
+            }
+          ]
+        }
       ],
       list: {
         title: "逆变器列表",
         datas: [
           {
             text: "1#逆变室",
-            color: "blue",
-          },
-        ],
+            color: "blue"
+          }
+        ]
       },
       lineValue: [
         {
@@ -227,35 +182,35 @@ export default {
           value: [
             {
               text: "1日",
-              value: 0,
+              value: 0
             },
             {
               text: "2日",
-              value: 3,
+              value: 3
             },
             {
               text: "3日",
-              value: 2,
+              value: 2
             },
             {
               text: "4日",
-              value: 3,
+              value: 3
             },
             {
               text: "5日",
-              value: 4,
+              value: 4
             },
             {
               text: "6日",
-              value: 1,
+              value: 1
             },
             {
               text: "7日",
-              value: 2,
-            },
-          ],
-        },
-      ],
+              value: 2
+            }
+          ]
+        }
+      ]
     };
   },
   // 函数
@@ -268,7 +223,7 @@ export default {
     },
     onReturn: function() {
       console.log("return");
-    },
+    }
   },
   // 生命周期钩子
   beforeCreate() {
@@ -278,7 +233,7 @@ export default {
     // 创建后
     for (let i = 2; i <= 16; i++) {
       let t = {
-        text: i + "#逆变室",
+        text: i + "#逆变室"
       };
       if (i <= 5) {
         t.color = "blue";
@@ -303,7 +258,7 @@ export default {
   },
   updated() {
     // 数据更新后
-  },
+  }
 };
 </script>
 
@@ -316,7 +271,7 @@ export default {
 
 .Inverter-Info {
   width: 100%;
-  height: 100%;
+  height: auto;
 
   .btn-group-tabs {
     display: flex;
@@ -366,6 +321,46 @@ export default {
             padding-left: 40px;
           }
         }
+        .title-tools-left {
+          position: absolute;
+          top: 0;
+          left: 100px;
+          // margin-left: 10px;
+          display: flex;
+          color: @gray-l;
+
+          & > div {
+            padding: 16px;
+          }
+
+          .return {
+            padding-left: 40px;
+          }
+          .state {
+            display: flex;
+            align-items: center;
+            .dot {
+              width: 8px;
+              height: 8px;
+
+              &.green {
+                background: @green;
+              }
+
+              &.yellow {
+                background: @yellow;
+              }
+
+              &.orange {
+                background: @orange;
+              }
+
+              &.red {
+                background: @red;
+              }
+            }
+          }
+        }
       }
 
       .inverter-datas {
@@ -373,7 +368,7 @@ export default {
         height: calc(100% - 53px);
 
         .inverter-item {
-          flex: 0 0 calc(50% - 4px);
+          flex: 0 0 calc(100% - 4px);
           margin: 8px 0;
 
           .inverter-item-header {
@@ -421,12 +416,17 @@ export default {
           .inverter-item-info {
             display: flex;
             margin-top: 8px;
-            height: calc(100% - 37px);
+            height: calc(100% );
 
             .form {
-              flex: 0 0 518px;
+              // flex: 0 0 calc(50% -4px);
+              flex-basis: 60%;
               position: relative;
-
+              display: flex;
+              flex-flow: column;
+              // & > div{
+              //   flex-basis: 40%;
+              // }
               .table-form {
                 outline: 1px solid fade(@gray, 40);
                 tr td.text {
@@ -449,7 +449,8 @@ export default {
             }
 
             .states {
-              flex: 1 1 auto;
+              // flex: 0 0 calc(50% -4px);
+              flex-basis: 40%;
               margin-left: 8px;
 
               .counts {