逆变器单机页面

src/views/WindSite/pages/Inverter-Info.vue

@@ -4,7 +4,18 @@
       <BtnGroup2 :btnGroups="btnGroups" :rowIndex="0" :index="1" @select="select"></BtnGroup2>
     </div>-->
     <div class="box-main">
-      <List class="list" :title="list.title" :list="list.datas" @select="selectList"></List>
+      <!-- <List class="list" :title="list.title" :list="list.datas" @select="selectList"></List> -->
+      <div class="wind-site-menu">
+        <div class="wind-site-title">选择逆变器</div>
+        <div class="wind-site-body">
+          <collapse-list
+            :list="WindSites"
+            :allowScroll="true"
+            scrollHeight="calc(100vh - 175px)"
+            @click="clickMenu"
+          />
+        </div>
+      </div>
       <div class="Inverter-Info-body">
         <div class="Inverter-Info-title">
           <div class="title">3#逆变器</div>
@@ -16,49 +27,25 @@
               <div class="dot red"></div>
             </div>
           </div>
-          <div class="title-tools">
+          <!-- <div class="title-tools">
             <div class="previous">上一页</div>
             <div class="next">上一页</div>
             <div class="return">返回</div>
-          </div>
+          </div>-->
         </div>
         <div class="inverter-datas">
           <div class="inverter-item">
-            <!-- <div class="inverter-item-header">
-              <div class="name">3#逆变器</div>
-              <div class="other">逆变器型号：GBL-200</div>
-              <div class="state">
-                状态：
-                <div class="dot red"></div>
-              </div>
-            </div> -->
             <div class="inverter-item-info">
               <div class="form">
                 <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 v-for="(aiarr) in aiData" :key="aiarr">
+                      <td class="text gray">{{aiarr[0].name}}</td>
+                      <td class="value green">{{aiarr[0].value}}</td>
+                      <td class="unit gray">{{aiarr[0].unit}}</td>
+                      <td class="text gray" v-if="aiarr.length>1">{{aiarr[1].name}}</td>
+                      <td class="value green" v-if="aiarr.length>1">{{aiarr[1].value}}</td>
+                      <td class="unit gray" v-if="aiarr.length>1">{{aiarr[1].unit}}</td>
                     </tr>
                   </table>
                 </div>
@@ -106,6 +93,7 @@ import List from "@com/coms/list/list.vue";
 import util from "@/helper/util.js";
 import Panel from "../../../components/coms/panel/panel.vue";
 import MultipleLineChart from "../../../components/chart/line/multiple-line-chart.vue";
+import collapseList from "@/components/coms/collapse/collapse-list.vue";
 export default {
   // 名称
   name: "Box",
@@ -114,59 +102,13 @@ export default {
     BtnGroup2,
     List,
     Panel,
-    MultipleLineChart
+    MultipleLineChart,
+    collapseList
   },
   // 数据
   data() {
     return {
-      btnGroups: [
-        {
-          icon: "fa fa-fire",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmfdc1"
-            },
-            {
-              text: "某某风场",
-              code: "mhsfc"
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc2"
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc3"
-            },
-            {
-              text: "某某风场",
-              code: "mmfdc4"
-            }
-          ]
-        },
-        {
-          icon: "fa fa-fire-extinguisher",
-          btns: [
-            {
-              text: "某某风场",
-              code: "mmgf1"
-            },
-            {
-              text: "某某风场",
-              code: "mmgf2"
-            },
-            {
-              text: "某某风场",
-              code: "mmgf3"
-            },
-            {
-              text: "某某风场",
-              code: "mmgf4"
-            }
-          ]
-        }
-      ],
+      WindSites: [],
       list: {
         title: "逆变器列表",
         datas: [
@@ -176,6 +118,8 @@ export default {
           }
         ]
       },
+      wtId: "PL01_01",
+      aiData: [],
       lineValue: [
         {
           title: "平均风速",
@@ -187,30 +131,36 @@ export default {
             {
               text: "2日",
               value: 3
-            },
-            {
-              text: "3日",
-              value: 2
-            },
-            {
-              text: "4日",
-              value: 3
-            },
-            {
-              text: "5日",
-              value: 4
-            },
-            {
-              text: "6日",
-              value: 1
-            },
-            {
-              text: "7日",
-              value: 2
             }
           ]
         }
-      ]
+      ],
+      option: {
+        xAxis: {
+          type: "category",
+          data: function() {
+            let date = new Date();
+            date.setHours(0);
+            date.setMinutes(0);
+            const result = [];
+            for (let i = 0; i < 24 * 4; i++) {
+              result.push(date.formatDate("yyyy-MM-dd hh:mm:ss"));
+              date.setMinutes(date.getMinutes+15);
+              return result;
+            }
+          }
+        },
+        yAxis: {
+          type: "value"
+        },
+        series: [
+          {
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: "line",
+            smooth: true
+          }
+        ]
+      }
     };
   },
   // 函数
@@ -223,6 +173,54 @@ export default {
     },
     onReturn: function() {
       console.log("return");
+    },
+    // 点击左侧菜单
+    clickMenu(res) {
+      this.wtId = res.wtId;
+      this.getData();
+    },
+    async buildSelectList() {
+      let res = await this.API.requestData({
+        method: "POST",
+        baseURL: "http://localhost:8082/",
+        subUrl: "matrix/findPVSimpleMatrixAll"
+      });
+      let WindSites = [];
+      res.data.data.forEach((ele, index) => {
+        ele.inverterls.forEach(function(inver) {
+          inver["text"] = inver["wtnum"];
+          inver["color"] = "blue";
+        });
+        WindSites.push({
+          id: String(index),
+          text: ele.wpName,
+          children: ele.inverterls
+        });
+      });
+      this.WindSites = WindSites;
+    },
+    async getData() {
+      let res = await this.API.requestData({
+        method: "POST",
+        baseURL: "http://localhost:8082/",
+        subUrl: "monitorinverter/findInverterInfo",
+        data: {
+          wtId: this.wtId
+        }
+      });
+      const aiData = [];
+      if (res.data.data) {
+        const arr = res.data.data;
+        for (let index = 0; index < arr.length; index = index + 2) {
+          const elem1 = arr[index];
+          const elem2 = arr[index + 1];
+          aiData.push([elem1, elem2]);
+        }
+        if (arr.length % 2 == 1) {
+          aiData.push([arr[arr.length - 1]]);
+        }
+      }
+      this.aiData = aiData;
     }
   },
   // 生命周期钩子
@@ -230,22 +228,13 @@ export default {
     // 创建前
   },
   created() {
-    // 创建后
-    for (let i = 2; i <= 16; i++) {
-      let t = {
-        text: i + "#逆变室"
-      };
-      if (i <= 5) {
-        t.color = "blue";
-      } else if (i <= 6) {
-        t.color = "green";
-      } else if (i <= 8) {
-        t.color = "red";
-      } else {
-        t.color = "yellow";
-      }
-      this.list.datas.push(t);
-    }
+    this.buildSelectList();
+    this.getData();
+    let that = this;
+    that.timmer = setInterval(() => {
+      that.getData();
+    }, 2000);
+    console.log(this.option);
   },
   beforeMount() {
     // 渲染前
@@ -272,23 +261,50 @@ export default {
 .Inverter-Info {
   width: 100%;
   height: auto;
-
-  .btn-group-tabs {
-    display: flex;
-    flex-direction: row;
-
-    .photovoltaic {
-      margin-left: 1.481vh;
-    }
-  }
-
   .box-main {
     width: 100%;
     height: calc(100vh - 12.963vh);
     display: flex;
     flex-direction: row;
     margin-top: 1.481vh;
-
+    .wind-site-menu {
+      flex: 0 0 15vh;
+      color: @gray;
+      background: fade(@darkgray, 10);
+      height: calc(100vh - 122px);
+      .wind-site-title {
+        font-size: 14px;
+        font-weight: 600;
+        padding: 16px;
+      }
+    }
+    .wind-site-info-body {
+      flex: auto;
+      padding-left: 1.481vh;
+      .info-menu {
+        .info-menu-item {
+          display: inline-block;
+          border: 1px solid fade(@darkgray, 80);
+          border-radius: 2px;
+          color: @gray;
+          font-size: @fontsize-s;
+          letter-spacing: 1px;
+          cursor: pointer;
+          width: 85px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          &.active {
+            color: @white;
+            background: fade(@purple, 60);
+            border-color: fade(@purple, 60);
+          }
+          & + .info-menu-item {
+            margin-left: 0.741vh;
+          }
+        }
+      }
+    }
     .list {
       margin-right: 1.481vh;
       flex: 0 0 auto;
@@ -312,11 +328,9 @@ export default {
           right: 0;
           display: flex;
           color: @gray-l;
-
           & > div {
             padding: 16px;
           }
-
           .return {
             padding-left: 40px;
           }
@@ -362,15 +376,12 @@ export default {
           }
         }
       }
-
       .inverter-datas {
         display: flex;
         height: calc(100% - 53px);
-
         .inverter-item {
           flex: 0 0 calc(100% - 4px);
           margin: 8px 0;
-
           .inverter-item-header {
             color: @gray-l;
             background: fade(@gray, 40);
@@ -378,15 +389,12 @@ export default {
             height: 37px;
             line-height: 37px;
             padding: 0 16px;
-
             .name {
               flex: 1 0 auto;
             }
-
             .other {
               margin-right: 32px;
             }
-
             .state {
               display: flex;
               align-items: center;
@@ -412,11 +420,10 @@ export default {
               }
             }
           }
-
           .inverter-item-info {
             display: flex;
             margin-top: 8px;
-            height: calc(100% );
+            height: calc(100%);
 
             .form {
               // flex: 0 0 calc(50% -4px);
@@ -436,18 +443,15 @@ export default {
                   padding-left: 32px;
                 }
               }
-
               .line-panel {
                 position: absolute;
                 bottom: 0;
                 width: 100%;
-
                 .panel-body {
                   height: 216px;
                 }
               }
             }
-
             .states {
               // flex: 0 0 calc(50% -4px);
               flex-basis: 40%;