Merge branch 'yx' into sl

src/components/coms/collapse/collapse-list.vue

@@ -5,7 +5,7 @@
         {{ menu.text }}
       </div>
       <div class="collapse-items">
-        <div class="item" v-for="(item, j) in menu.children" :key="item" @click="itemClick(j)" :class="{ active: itemIndex == j }">
+        <div class="item" v-for="(item, j) in menu.children" :key="item" @click.stop="itemClick(item ,j)" :class="{ active: itemIndex == j }">
           <span class="dot" :class="'bg-' + item.color"></span>
           <span class="value"> {{ item.text }}</span>
         </div>
@@ -98,7 +98,7 @@ export default {
   },
   computed: {},
   // 数据
-  data() {
+  data () {
     return {
       menuIndex: 0,
       itemIndex: 0,
@@ -106,29 +106,29 @@ export default {
   },
   // 函数
   methods: {
-    menuClick: function(index) {
+    menuClick: function (index) {
       this.menuIndex = index;
-      this.itemIndex = 0;
     },
-    itemClick(index) {
+    itemClick (clickItem, index) {
       this.itemIndex = index;
+      this.$emit("click", clickItem);
     },
   },
   // 生命周期钩子
-  beforeCreate() {
+  beforeCreate () {
     // 创建前
   },
-  created() {
+  created () {
     // 创建后
   },
-  beforeMount() {
+  beforeMount () {
     // 渲染前
   },
-  mounted() {},
-  beforeUpdate() {
+  mounted () { },
+  beforeUpdate () {
     // 数据更新前
   },
-  updated() {
+  updated () {
     // 数据更新后
   },
 };

src/router/index.js

@@ -3,7 +3,7 @@ import Home from '../views/Home/Home.vue'
 
 const routes = [
   {
-    path: '/',
+    path: '/', // 驾驶舱
     name: 'Home',
     component: Home,
   },
@@ -42,7 +42,7 @@ const routes = [
       path: 'box',
       component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Box.vue'),
     }, {
-      path: 'info',
+      path: 'info', // 单机状态监视
       component: () => import(/* webpackChunkName: "windsitebox" */ '../views/WindSite/pages/Info/Info.vue'),
     }, {
       path: 'tower',

src/views/Home/Home.vue

@@ -2,420 +2,420 @@
   <div class="home">
     <Row type="flex">
       <Col :span="6">
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="银川" sub-title="AM 10:52 实况" icon="fa fa-map-marker">
-              <weather />
-            </com-panel>
-          </Col>
-        </Row>
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="预测电量" sub-title="（单位：万KWh）">
-              <list-bar-chart :list="ForecastPower" height="16.6667vh" />
-            </com-panel>
-          </Col>
-        </Row>
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="功率复核" sub-title="（单位：万KW）">
-              <power-review />
-            </com-panel>
-          </Col>
-        </Row>
+      <Row type="flex">
+        <Col :span="24">
+        <com-panel title="银川" sub-title="AM 10:52 实况" icon="fa fa-map-marker">
+          <weather />
+        </com-panel>
+        </Col>
+      </Row>
+      <Row type="flex">
+        <Col :span="24">
+        <com-panel title="预测电量" sub-title="（单位：万KWh）">
+          <list-bar-chart :list="ForecastPower" height="16.6667vh" />
+        </com-panel>
+        </Col>
+      </Row>
+      <Row type="flex">
+        <Col :span="24">
+        <com-panel title="功率复核" sub-title="（单位：万KW）">
+          <power-review :data="powerData" />
+        </com-panel>
+        </Col>
+      </Row>
       </Col>
       <Col :span="12">
-        <Map></Map>
+      <Map></Map>
       </Col>
       <Col :span="6">
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="电量分析" sub-title="（单位：万KWh）">
-              <coulometric-analysis />
-            </com-panel>
-          </Col>
-        </Row>
-        <Row type="flex">
-          <Col :span="24">
-            <com-panel title="计划电量完成情况" sub-title="（单位：万KWh）">
-              <power-plan />
-            </com-panel>
-          </Col>
-        </Row>
+      <Row type="flex">
+        <Col :span="24">
+        <com-panel title="电量分析" sub-title="（单位：万KWh）">
+          <coulometric-analysis />
+        </com-panel>
+        </Col>
+      </Row>
+      <Row type="flex">
+        <Col :span="24">
+        <com-panel title="计划电量完成情况" sub-title="（单位：万KWh）">
+          <power-plan />
+        </com-panel>
+        </Col>
+      </Row>
       </Col>
     </Row>
     <Row type="flex">
       <Col :span="12">
-        <toolbar-panel title="日发电量">
-          <template v-slot:tools>
+      <toolbar-panel title="日发电量">
+        <template v-slot:tools>
+          <div class="tools">
+            <div class="tool-block">
+              <div class="legend bg-green"></div>
+              <div class="legend-text">日发电量(单位:万KWh)</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-purple"></div>
+              <div class="legend-text">上网电量（单位：万KWh）</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-orange"></div>
+              <div class="legend-text">购网电量（单位：万KWh）</div>
+            </div>
+            <div class="tool-block">
+              <div class="legend bg-yellow"></div>
+              <div class="legend-text">风速</div>
+            </div>
+          </div>
+        </template>
+        <template v-slot:default>
+          <!-- 日发电量 -->
+          <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" />
+        </template>
+      </toolbar-panel>
+      </Col>
+      <Col :span="12">
+      <toolbar-panel title="72小时功率趋势图">
+        <template v-slot:tools>
+          <div class="tools">
             <div class="tools">
               <div class="tool-block">
-                <div class="legend bg-green"></div>
-                <div class="legend-text">日发电量(单位:万KWh)</div>
-              </div>
-              <div class="tool-block">
-                <div class="legend bg-purple"></div>
-                <div class="legend-text">上网电量（单位：万KWh）</div>
+                <div class="legend long bg-green"></div>
+                <div class="legend-text">应发功率</div>
               </div>
               <div class="tool-block">
-                <div class="legend bg-orange"></div>
-                <div class="legend-text">购网电量（单位：万KWh）</div>
+                <div class="legend long bg-yellow"></div>
+                <div class="legend-text">实发功率</div>
               </div>
               <div class="tool-block">
-                <div class="legend bg-yellow"></div>
-                <div class="legend-text">风速</div>
-              </div>
-            </div>
-          </template>
-          <template v-slot:default>
-            <!-- 日发电量 -->
-            <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" />
-          </template>
-        </toolbar-panel>
-      </Col>
-      <Col :span="12">
-        <toolbar-panel title="72小时功率趋势图">
-          <template v-slot:tools>
-            <div class="tools">
-              <div class="tools">
-                <div class="tool-block">
-                  <div class="legend long bg-green"></div>
-                  <div class="legend-text">平均风速</div>
-                </div>
-                <div class="tool-block">
-                  <div class="legend long bg-yellow"></div>
-                  <div class="legend-text">应发功率</div>
-                </div>
-                <div class="tool-block">
-                  <div class="legend long bg-purple"></div>
-                  <div class="legend-text">实际功率</div>
-                </div>
+                <div class="legend long bg-purple"></div>
+                <div class="legend-text">理论功率</div>
               </div>
             </div>
-          </template>
-          <template v-slot:default>
-            <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="12.963vh" />
-          </template>
-        </toolbar-panel>
+          </div>
+        </template>
+        <template v-slot:default>
+          <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="12.963vh" />
+        </template>
+      </toolbar-panel>
       </Col>
     </Row>
     <Row type="flex">
       <!-- 下方 table -->
       <Col :span="16">
-        <row>
-          <Col>
-            <com-panel>
-              <table class="table-card">
-                <tr class="">
-                  <td class="text gray">装机容量</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">上网电量(日)</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化硫</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化碳</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用水</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用煤</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-              </table>
-            </com-panel>
-          </Col>
-          <Col>
-            <com-panel>
-              <table class="table-card">
-                <tr class="">
-                  <td class="text gray">装机容量</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">上网电量(日)</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化硫</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化碳</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用水</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用煤</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-              </table>
-            </com-panel>
-          </Col>
-          <Col>
-            <com-panel>
-              <table class="table-card">
-                <tr class="">
-                  <td class="text gray">装机容量</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">上网电量(日)</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化硫</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化碳</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用水</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用煤</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-              </table>
-            </com-panel>
-          </Col>
-          <Col>
-            <com-panel>
-              <table class="table-card">
-                <tr class="">
-                  <td class="text gray">装机容量</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">上网电量(日)</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化硫</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化碳</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用水</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用煤</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-              </table>
-            </com-panel>
-          </Col>
-          <Col>
-            <com-panel>
-              <table class="table-card">
-                <tr class="">
-                  <td class="text gray">装机容量</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">上网电量(日)</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化硫</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">减排二氧化碳</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用水</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-                <tr class="">
-                  <td class="text gray">节约用煤</td>
-                  <td class="value green">361033.3</td>
-                  <td class="unit gray">MW</td>
-                </tr>
-              </table>
-            </com-panel>
-          </Col>
-        </row>
+      <row>
+        <Col>
+        <com-panel>
+          <table class="table-card">
+            <tr class="">
+              <td class="text gray">装机容量</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">上网电量(日)</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化硫</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化碳</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用水</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用煤</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+          </table>
+        </com-panel>
+        </Col>
+        <Col>
+        <com-panel>
+          <table class="table-card">
+            <tr class="">
+              <td class="text gray">装机容量</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">上网电量(日)</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化硫</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化碳</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用水</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用煤</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+          </table>
+        </com-panel>
+        </Col>
+        <Col>
+        <com-panel>
+          <table class="table-card">
+            <tr class="">
+              <td class="text gray">装机容量</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">上网电量(日)</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化硫</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化碳</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用水</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用煤</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+          </table>
+        </com-panel>
+        </Col>
+        <Col>
+        <com-panel>
+          <table class="table-card">
+            <tr class="">
+              <td class="text gray">装机容量</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">上网电量(日)</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化硫</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化碳</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用水</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用煤</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+          </table>
+        </com-panel>
+        </Col>
+        <Col>
+        <com-panel>
+          <table class="table-card">
+            <tr class="">
+              <td class="text gray">装机容量</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">上网电量(日)</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化硫</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">减排二氧化碳</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用水</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+            <tr class="">
+              <td class="text gray">节约用煤</td>
+              <td class="value green">361033.3</td>
+              <td class="unit gray">MW</td>
+            </tr>
+          </table>
+        </com-panel>
+        </Col>
+      </row>
       </Col>
       <!-- 右下角 panel -->
       <Col :span="8">
-        <panel-3 class="situation">
-          <div class="situation-body">
-            <row align="middle">
-              <div class="situation-item fengji">
-                <div class="icon fengji-icon svg-icon svg-icon-white">
-                  <svg-icon class="" svgid="svg-风机" />
-                </div>
-                <div class="info">
-                  <div class="title green">接入风机</div>
-                  <div class="value">30</div>
-                </div>
+      <panel-3 class="situation">
+        <div class="situation-body">
+          <row align="middle">
+            <div class="situation-item fengji">
+              <div class="icon fengji-icon svg-icon svg-icon-white">
+                <svg-icon class="" svgid="svg-风机" />
               </div>
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-purple">
-                  <svg-icon class="" svgid="svg-待机图标" />
+              <div class="info">
+                <div class="title green">接入风机</div>
+                <div class="value">30</div>
+              </div>
+            </div>
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-purple">
+                <svg-icon class="" svgid="svg-待机图标" />
+              </div>
+              <div class="info">
+                <div class="title green">待机</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">待机</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-green">
-                  <svg-icon class="" svgid="svg-运行图标" />
+            </div>
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-green">
+                <svg-icon class="" svgid="svg-运行图标" />
+              </div>
+              <div class="info">
+                <div class="title green">运行</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">运行</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-yellow">
-                  <svg-icon class="" svgid="svg-限电图标" />
+            </div>
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-yellow">
+                <svg-icon class="" svgid="svg-限电图标" />
+              </div>
+              <div class="info">
+                <div class="title green">待机</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">待机</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-            </row>
-            <row align="middle">
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-red">
-                  <svg-icon class="" svgid="svg-故障图标" />
+            </div>
+          </row>
+          <row align="middle">
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-red">
+                <svg-icon class="" svgid="svg-故障图标" />
+              </div>
+              <div class="info">
+                <div class="title green">待机</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">待机</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-orange">
-                  <svg-icon class="" svgid="svg-检修图标" />
+            </div>
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-orange">
+                <svg-icon class="" svgid="svg-检修图标" />
+              </div>
+              <div class="info">
+                <div class="title green">待机</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">待机</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-gray">
-                  <svg-icon class="" svgid="svg-离线图标" />
+            </div>
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-gray">
+                <svg-icon class="" svgid="svg-离线图标" />
+              </div>
+              <div class="info">
+                <div class="title green">待机</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">待机</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-              <div class="situation-item">
-                <div class="icon svg-icon svg-icon-darkblue">
-                  <svg-icon class="" svgid="svg-受累图标" />
+            </div>
+            <div class="situation-item">
+              <div class="icon svg-icon svg-icon-darkblue">
+                <svg-icon class="" svgid="svg-受累图标" />
+              </div>
+              <div class="info">
+                <div class="title green">待机</div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123 </span>
                 </div>
-                <div class="info">
-                  <div class="title green">待机</div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123 </span>
-                  </div>
-                  <div class="value">
-                    <span class="text gray">手动停机</span>
-                    <span>123</span>
-                  </div>
+                <div class="value">
+                  <span class="text gray">手动停机</span>
+                  <span>123</span>
                 </div>
               </div>
-            </row>
-          </div>
-        </panel-3>
+            </div>
+          </row>
+        </div>
+      </panel-3>
       </Col>
     </Row>
   </div>
@@ -456,8 +456,11 @@ export default {
     SvgIcon,
     Map,
   },
-  data() {
+
+  data () {
     return {
+      timmer: null, // 计时器
+      powerData:{},
       // 预测电量
       ForecastPower: [
         {
@@ -480,257 +483,148 @@ export default {
       // 日发电量
       DayPower: {
         // 图表所用单位
-        units: ["(万KWh)", "(风速)"],
+        units: [""],
         value: [
           {
-            title: "日发电量",
+            title: "",
             yAxisIndex: 0, // 使用单位
-            value: [
-              {
-                text: "1日",
-                value: 1,
-              },
-              {
-                text: "2日",
-                value: 1,
-              },
-              {
-                text: "3日",
-                value: 1,
-              },
-              {
-                text: "4日",
-                value: 1,
-              },
-              {
-                text: "5日",
-                value: 1,
-              },
-              {
-                text: "6日",
-                value: 1,
-              },
-              {
-                text: "7日",
-                value: 1,
-              },
-            ],
-          },
-          {
-            title: "上网电量",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 2,
-              },
-              {
-                text: "2日",
-                value: 2,
-              },
-              {
-                text: "3日",
-                value: 2,
-              },
-              {
-                text: "4日",
-                value: 2,
-              },
-              {
-                text: "5日",
-                value: 2,
-              },
-              {
-                text: "6日",
-                value: 2,
-              },
-              {
-                text: "7日",
-                value: 2,
-              },
-            ],
-          },
-          {
-            title: "购网电量",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 3,
-              },
-              {
-                text: "2日",
-                value: 3,
-              },
-              {
-                text: "3日",
-                value: 3,
-              },
-              {
-                text: "4日",
-                value: 3,
-              },
-              {
-                text: "5日",
-                value: 3,
-              },
-              {
-                text: "6日",
-                value: 3,
-              },
-              {
-                text: "7日",
-                value: 3,
-              },
-            ],
-          },
-          {
-            title: "风速",
-            yAxisIndex: 1,
-            value: [
-              {
-                text: "1日",
-                value: 4,
-              },
-              {
-                text: "2日",
-                value: 4,
-              },
-              {
-                text: "3日",
-                value: 4,
-              },
-              {
-                text: "4日",
-                value: 4,
-              },
-              {
-                text: "5日",
-                value: 4,
-              },
-              {
-                text: "6日",
-                value: 4,
-              },
-              {
-                text: "7日",
-                value: 4,
-              },
-            ],
-          },
+            value: [],
+          }
         ],
       },
       // 72小时功率趋势图
       Powertrend: {
         // 图表所用单位
-        units: ["(万KWh)", "(风速)"],
+        units: [""],
         value: [
           {
-            title: "平均风速",
-            yAxisIndex: 1, // 使用单位
-            value: [
-              {
-                text: "1日",
-                value: 0,
-              },
-              {
-                text: "2日",
-                value: 1,
-              },
-              {
-                text: "3日",
-                value: 0,
-              },
-              {
-                text: "4日",
-                value: 1,
-              },
-              {
-                text: "5日",
-                value: 0,
-              },
-              {
-                text: "6日",
-                value: 1,
-              },
-              {
-                text: "7日",
-                value: 0,
-              },
-            ],
-          },
-          {
-            title: "应发功率",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 4,
-              },
-              {
-                text: "2日",
-                value: 2,
-              },
-              {
-                text: "3日",
-                value: 4,
-              },
-              {
-                text: "4日",
-                value: 2,
-              },
-              {
-                text: "5日",
-                value: 4,
-              },
-              {
-                text: "6日",
-                value: 2,
-              },
-              {
-                text: "7日",
-                value: 4,
-              },
-            ],
-          },
-          {
-            title: "实际功率",
-            yAxisIndex: 0,
-            value: [
-              {
-                text: "1日",
-                value: 1,
-              },
-              {
-                text: "2日",
-                value: 3,
-              },
-              {
-                text: "3日",
-                value: 1,
-              },
-              {
-                text: "4日",
-                value: 3,
-              },
-              {
-                text: "5日",
-                value: 1,
-              },
-              {
-                text: "6日",
-                value: 3,
-              },
-              {
-                text: "7日",
-                value: 1,
-              },
-            ],
-          },
+            title: "",
+            yAxisIndex: 0, // 使用单位
+            value: [],
+          }
         ],
       },
     };
   },
+
+  methods: {
+    // 请求服务
+    requestData (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "genreset/findBasicDataInfo",
+        data: {
+          id: "MHS_FDC"
+        },
+        success (res) {
+          let glvos = [];
+
+          let rdlKey=["value1","value2","value3"];
+          let DayPower = {
+            // 图表所用单位
+            units: ["(万KWh)"],
+            value: [{
+                title: "发电量",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "上网电量",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "购网电量",
+                yAxisIndex: 0,
+                value: []
+              }]
+          };
+
+          let glKey=["value1","value2","value3","value4","value5","value6"];
+          let Powertrend = {
+            // 图表所用单位
+            units: ["(万KWh)","(m/s)"],
+            value: [{
+                title: "应发功率",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "实发功率",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "理论功率",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "预测功率",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "保证功率",
+                yAxisIndex: 0,
+                value: []
+              },{
+                title: "平均风速",
+                yAxisIndex: 1,
+                value: []
+              }]
+          };
+
+          rdlKey.forEach((keyEle,keyIndex)=>{
+            res.data.rdlvos.forEach(cEle=>{
+              DayPower.value[keyIndex].value.push({
+                text: cEle.timestr,
+                value: cEle[keyEle]
+              });
+            });
+          });
+
+          glKey.forEach((keyEle,keyIndex)=>{
+            res.data.glvos.forEach(cEle=>{
+              Powertrend.value[keyIndex].value.push({
+                text: cEle.timestr,
+                value: cEle[keyEle]
+              });
+            });
+          });
+
+          that.powerData=[{
+            title: "风速",
+            value: res.data.jczbmap.ssfs
+          },{
+            title: "保证功率",
+            value: res.data.jczbmap.bzgl
+          },{
+            title: "应发功率",
+            value: res.data.jczbmap.yfgl
+          },{
+            title: "实际功率",
+            value: res.data.jczbmap.sjgl
+          }];
+
+          that.DayPower=DayPower;
+          that.Powertrend=Powertrend;
+          console.log(111, res);
+        }
+      });
+    },
+  },
+
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(false);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
+    });
+  },
+
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
+  },
 };
 </script>
 

src/views/Home/components/power-review.vue

@@ -20,29 +20,30 @@ export default {
     Col,
     DashPieChart,
   },
+
   data() {
     return {
       // 功率复核数据
-      PowerLoad: [
-        {
-          title: "风速",
-          value: 12.3,
-        },
-        {
-          title: "保证功率",
-          value: 22,
-        },
-        {
-          title: "应发功率",
-          value: 33,
-        },
-        {
-          title: "实发功率",
-          value: 44,
-        },
-      ],
+      PowerLoad: [],
     };
   },
+
+  props:{
+    data:{
+      type:Array,
+      default:() => []
+    }
+  },
+
+  mounted(){
+    this.PowerLoad=this.data;
+  },
+
+  watch:{
+    data(res){
+      this.PowerLoad=res;
+    }
+  }
 };
 </script>
 

src/views/WindSite/pages/Home/Home.vue

@@ -317,6 +317,32 @@ export default {
   },
   // 函数
   methods: {
+    // 根据风机状态码返回对应 class
+    getColor (fjzt) {
+      switch (fjzt) {
+        case 0:
+          return "green";
+          break;
+        case 1:
+          return "blue";
+          break;
+        case 2:
+          return "red";
+          break;
+        case 3:
+          return "gray";
+          break;
+        case 4:
+          return "orange";
+          break;
+        case 5:
+          return "purple";
+          break;
+        case 6:
+          return "write";
+          break;
+      }
+    },
     // 请求服务
     requestData (showLoading) {
       this.requestWpInfo(showLoading);
@@ -421,7 +447,7 @@ export default {
             res.data.fjjzmap.fjmap[0].forEach((ele) => {
               fjmap.push({
                 tag: ele.wtnum,
-                color: "gray",
+                color: that.getColor(ele.fjzt),
               });
             });
 

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

@@ -6,23 +6,23 @@
         <span class="svg-icon svg-icon-green mg-r-8">
           <svg-icon class="" :svgid="'svg-normal-power'" />
         </span>
-        MA B401
+        {{sourceMap.code}}
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">所属线路</div>
-        <div class="tag-value">某某某1线</div>
+        <div class="tag-value">{{sourceMap.lnname}}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">机型</div>
-        <div class="tag-value">GW1000</div>
+        <div class="tag-value">{{sourceMap.lnname}}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警时间</div>
-        <div class="tag-value">2021年5月10日 12:23:31</div>
+        <div class="tag-value">{{sourceMap.gxkmap && sourceMap.gxkmap.bjsj}}</div>
       </div>
       <div class="wind-site-tag">
         <div class="tag-text">告警内容</div>
-        <div class="tag-value">通讯中断</div>
+        <div class="tag-value">{{sourceMap.gxkmap && sourceMap.gxkmap.bjmc}}</div>
       </div>
     </el-row>
     <!-- 发电信息 -->
@@ -31,23 +31,23 @@
         <el-row class="generation background pd-8 mg-r-8">
           <div class="mg-r-8">
             <div class="generation-text">日发电量</div>
-            <div class="generation-value green">1,495<span class="unit">kwh</span></div>
+            <div class="generation-value green">{{sourceMap.jczbmap && sourceMap.jczbmap.RFDL}}<span class="unit">kwh</span></div>
           </div>
           <el-row class="wind-site-state">
             <el-col :span="6">
-              <div class="value">123</div>
+              <div class="value">{{sourceMap.jczbmap && sourceMap.jczbmap.FJKYL}}</div>
               <div class="text">月可利用率</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">123</div>
+              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.ygzxs}}</div>
               <div class="text">月故障小时数</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">123</div>
-              <div class="text">月等效小时数</div>
+              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.ytjxs}}</div>
+              <div class="text">月待机小时数</div>
             </el-col>
             <el-col :span="6">
-              <div class="value">123</div>
+              <div class="value">{{sourceMap.gxkmap && sourceMap.gxkmap.yyxxs}}</div>
               <div class="text">月发电小时数</div>
             </el-col>
           </el-row>
@@ -57,7 +57,7 @@
         <el-row type="flex" justify="center" :align="'middle'" class="power-load">
           <!-- 功率复核 PowerLoad -->
           <el-col v-for="item in PowerLoad" :key="item" :span="6">
-            <dash-pie-chart :title="item.title" :value="item.value" height="9.722vh" />
+            <dash-pie-chart :title="item.title" :value="sourceMap.jczbmap && sourceMap.jczbmap[item.key]" height="9.722vh" />
           </el-col>
         </el-row>
       </el-col>
@@ -71,30 +71,38 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">发电机</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">有功功率</td>
-                <td class="value green">1557</td>
-                <td class="unit gray">KW</td>
-                <td class="text gray">风速</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray">m/s</td>
+                <td class="text gray">U1绕组温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.U1YZWD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">V1绕组温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.V1YZWD}}</td>
+                <td class="unit gray">℃</td>
               </tr>
               <tr>
-                <td class="text gray">有功功率</td>
-                <td class="value green">1557</td>
-                <td class="unit gray">KW</td>
-                <td class="text gray">风速</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray">m/s</td>
+                <td class="text gray">W1绕组温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.W1YZWD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">发电机轴承A温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJZCAWD}}</td>
+                <td class="unit gray">℃</td>
               </tr>
               <tr>
-                <td class="text gray">有功功率</td>
-                <td class="value green">1557</td>
-                <td class="unit gray">KW</td>
+                <td class="text gray">发电机轴承B温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJZCBWD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">发电机冷却风温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJLQFWD}}</td>
+                <td class="unit gray">℃</td>
+              </tr>
+              <tr>
+                <td class="text gray">发电机滑环温度</td>
+                <td class="value green">{{sourceMap.fdjmap && sourceMap.fdjmap.FDJHHWD}}</td>
+                <td class="unit gray">℃</td>
                 <td class="text gray"></td>
                 <td class="value green"></td>
                 <td class="unit gray"></td>
@@ -108,41 +116,33 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">齿轮箱</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">风机型号</td>
-                <td class="value green">1557</td>
-                <td class="unit gray"></td>
-                <td class="text gray">控制版本系统</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray"></td>
+                <td class="text gray">润滑油滤网入口压力</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.RHYLWRKYL}}</td>
+                <td class="unit gray">Kw</td>
+                <td class="text gray">润滑油滤网出口压力</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.RHYLWCKYL}}</td>
+                <td class="unit gray">Kw</td>
               </tr>
               <tr>
-                <td class="text gray">变桨类型</td>
-                <td class="value green">1557</td>
-                <td class="unit gray"></td>
-                <td class="text gray">变频器类型</td>
-                <td class="value green">12.57</td>
-                <td class="unit gray"></td>
-              </tr>
-              <tr>
-                <td class="text gray">齿香类型</td>
-                <td class="value green">1557</td>
-                <td class="unit gray"></td>
-                <td class="text gray">发电机类型</td>
-                <td class="value green"></td>
-                <td class="unit gray"></td>
+                <td class="text gray">齿轮箱输入轴1温度</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXSRZ1WD}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">齿轮箱输入轴2温度</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXSRZ2WD}}</td>
+                <td class="unit gray">℃</td>
               </tr>
               <tr>
-                <td class="text gray">总发电量</td>
-                <td class="value green">2455619</td>
-                <td class="unit gray">VKwh</td>
-                <td class="text gray"></td>
-                <td class="value green"></td>
-                <td class="unit gray"></td>
+                <td class="text gray">齿轮箱油温</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXYW}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">齿轮箱入口油温</td>
+                <td class="value green">{{sourceMap.clxmap && sourceMap.clxmap.CLXRKYW}}</td>
+                <td class="unit gray">℃</td>
               </tr>
             </table>
           </div>
@@ -153,40 +153,32 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">变桨</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">叶片1偏角</td>
-                <td class="value green">7.14</td>
-                <td class="unit gray">°</td>
-                <td class="text gray">叶片2偏角</td>
-                <td class="value green">7.14</td>
-                <td class="unit gray">°</td>
+                <td class="text gray">U1项绕组电流</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U1YZDL}}</td>
+                <td class="unit gray">A</td>
+                <td class="text gray">U2项绕组电流</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U2YZDL}}</td>
+                <td class="unit gray">A</td>
               </tr>
               <tr>
+                <td class="text gray">U3项绕组电流</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U3YZDL}}</td>
+                <td class="unit gray">A</td>
                 <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U1YZDY}}</td>
                 <td class="unit gray">V</td>
               </tr>
               <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
+                <td class="text gray">U2项绕组电压</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U2YZDY}}</td>
                 <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
+                <td class="text gray">U2项绕组电压</td>
+                <td class="value green">{{sourceMap.bjmap && sourceMap.bjmap.U3YZDY}}</td>
                 <td class="unit gray">V</td>
               </tr>
             </table>
@@ -200,41 +192,17 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">偏航</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">功率因数</td>
-                <td class="value green">0</td>
-                <td class="unit gray"></td>
-                <td class="text gray">频率</td>
-                <td class="value green">50.02</td>
-                <td class="unit gray">HZ</td>
+                <td class="text gray">对风角度</td>
+                <td class="value green">{{sourceMap.phmap && sourceMap.phmap.DFJD}}</td>
+                <td class="unit gray">度</td>
+                <td class="text gray">偏航位置</td>
+                <td class="value green">{{sourceMap.phmap && sourceMap.phmap.PHWZ}}</td>
+                <td class="unit gray">度</td>
               </tr>
             </table>
           </div>
@@ -245,49 +213,25 @@
             <div class="svg-icon svg-icon-gray-l mg-r-16">
               <svg-icon :svgid="'svg-normal-power'" />
             </div>
-            <div class="title">基本信息</div>
+            <div class="title">液压</div>
           </div>
           <div class="panel-body">
             <table class="table-form">
               <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-              </tr>
-              <tr>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
-                <td class="text gray">U1项绕组电压</td>
-                <td class="value green">123.57</td>
-                <td class="unit gray">V</td>
+                <td class="text gray">液压系统油压</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.YYXTYY}}</td>
+                <td class="unit gray">Pa</td>
+                <td class="text gray">转子刹车系统液压</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.ZZSCXTYY}}</td>
+                <td class="unit gray">Pa</td>
               </tr>
               <tr>
-                <td class="text gray">功率因数</td>
-                <td class="value green">0</td>
-                <td class="unit gray"></td>
-                <td class="text gray">频率</td>
-                <td class="value green">50.02</td>
-                <td class="unit gray">HZ</td>
-              </tr>
-              <tr>
-                <td class="text gray">功率因数</td>
-                <td class="value green">0</td>
-                <td class="unit gray"></td>
-                <td class="text gray">频率</td>
-                <td class="value green">50.02</td>
-                <td class="unit gray">HZ</td>
+                <td class="text gray">液压油温</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.YYYW}}</td>
+                <td class="unit gray">℃</td>
+                <td class="text gray">液压系统油压</td>
+                <td class="value green">{{sourceMap.yymap && sourceMap.yymap.FDJLQSWD}}</td>
+                <td class="unit gray">Pa</td>
               </tr>
             </table>
           </div>
@@ -308,31 +252,46 @@ export default {
       type: String,
       default: "",
     },
+    data: {
+      type: Object,
+      default: () => { },
+    },
   },
-  data() {
+  data () {
     return {
+      sourceMap: {},
       // 功率复核数据
       PowerLoad: [
         {
           title: "风速",
-          value: 12.3,
+          key: "FS",
         },
         {
           title: "保证功率",
-          value: 22,
+          key: "LLGL",
         },
         {
           title: "应发功率",
-          value: 33,
+          key: "YFGL",
         },
         {
           title: "实发功率",
-          value: 44,
+          key: "GL",
         },
       ],
     };
   },
   methods: {},
+
+  mounted () {
+    this.sourceMap = this.data;
+  },
+
+  watch: {
+    data (value) {
+      this.sourceMap = value;
+    }
+  }
 };
 </script>
 

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

@@ -3,25 +3,26 @@
     <div class="wind-site-menu">
       <div class="wind-site-title">选择风机</div>
       <div class="wind-site-body">
-        <collapse-list :list="WindSites" />
+        <collapse-list :list="WindSites" @click="clickMenu" />
       </div>
     </div>
     <div class="wind-site-info-body">
       <div class="info-menu mg-b-16">
-        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }" @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
+        <div class="info-menu-item" v-for="(item, index) in InfoBtns.data" :key="item" :class="{ active: InfoBtns.activeIndex == index }"
+          @click="onInfoMenuItemClick(item, index)">{{ item.text }}</div>
       </div>
       <el-row>
         <el-col :span="16" class="pd-r-16" style="text-align: center;">
           <!-- 基本信息 使用 v-if 每次点击重新加载  -->
           <!-- 使用 v-show 首次全部加载 之后隐藏 点击后显示 -->
-          <base-info v-show="InfoBtns.activeIndex == 0" />
+          <base-info v-show="InfoBtns.activeIndex == 0" :data="sourceMap" />
           <!-- <base-info v-if="InfoBtns.activeIndex == 2" /> -->
           <StandAloneImg class="sai" v-show="InfoBtns.activeIndex != 0" :activeIndex="InfoBtns.activeIndex" @selectSvg="selectSvg"></StandAloneImg>
           <generator class="saig" v-show="InfoBtns.activeIndex == 1"></generator>
           <gearbox class="saig" v-show="InfoBtns.activeIndex == 2"></gearbox>
         </el-col>
         <el-col :span="8">
-          <warning />
+          <warning :data="WarnData" />
         </el-col>
       </el-row>
     </div>
@@ -43,73 +44,13 @@ export default {
       default: "",
     },
   },
-  data() {
+  data () {
     return {
-      WindSites: [
-        {
-          id: "1",
-          text: "某某风电场",
-          children: [
-            {
-              id: "1",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "2",
-              text: "2E01",
-              color: "red",
-            },
-            {
-              id: "3",
-              text: "2E01",
-              color: "blue",
-            },
-          ],
-        },
-        {
-          id: "2",
-          text: "某某风电场",
-          children: [
-            {
-              id: "1",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "2",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "3",
-              text: "2E01",
-              color: "green",
-            },
-          ],
-        },
-        {
-          id: "2",
-          text: "某某风电场",
-          children: [
-            {
-              id: "1",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "2",
-              text: "2E01",
-              color: "green",
-            },
-            {
-              id: "3",
-              text: "2E01",
-              color: "green",
-            },
-          ],
-        },
-      ],
+      timmer: null, // 计时器
+      wtId: "", // 风机ID
+      sourceMap: {},
+      WarnData: {},
+      WindSites: [],
       InfoBtns: {
         activeIndex: 0,
         data: [
@@ -149,13 +90,140 @@ export default {
       },
     };
   },
+
   methods: {
-    onInfoMenuItemClick(item, index) {
+    onInfoMenuItemClick (item, index) {
       this.InfoBtns.activeIndex = index;
     },
-    selectSvg: function(index) {
+
+    selectSvg (index) {
       this.InfoBtns.activeIndex = index;
     },
+
+    // 根据风机状态码返回对应 class
+    getColor (fjzt) {
+      switch (fjzt) {
+        case 0:
+          return "green";
+          break;
+        case 1:
+          return "blue";
+          break;
+        case 2:
+          return "red";
+          break;
+        case 3:
+          return "gray";
+          break;
+        case 4:
+          return "orange";
+          break;
+        case 5:
+          return "purple";
+          break;
+        case 6:
+          return "write";
+          break;
+      }
+    },
+
+    // 请求服务
+    requestData (showLoading) {
+      this.getSimpleMatrixAll(showLoading);
+    },
+
+    // 获取场列表
+    getSimpleMatrixAll (showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "matrix/findSimpleMatrixAll",
+        data: {
+          wpId: "MHS_FDC"
+        },
+        success (res) {
+          let WindSites = [];
+
+          res.data.forEach((ele, index) => {
+            WindSites.push({
+              id: String(index),
+              text: ele.wpName,
+              children: []
+            });
+          });
+
+          res.data.forEach((pEle, pIndex) => {
+            pEle.fjls[0].forEach(cEle => {
+              WindSites[pIndex].children.push({
+                id: cEle.wtId,
+                text: cEle.wtnum,
+                color: that.getColor(cEle.fjzt)
+              });
+            });
+          });
+
+          that.WindSites = WindSites;
+
+          if (res.data.length) {
+            that.wtId = that.wtId || res.data[0].fjls[0][0].wtId;
+            that.getWtInfo();
+          }
+        }
+      });
+    },
+
+    // 获取风机信息
+    getWtInfo () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitorwt/findWtInfo",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+          that.sourceMap = res.data;
+          that.getWarnInfo();
+        }
+      });
+    },
+
+    // 获取报警信息
+    getWarnInfo () {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "monitorwt/findWtWarnInfo",
+        data: {
+          wtId: that.wtId
+        },
+        success (res) {
+          that.WarnData = res.data;
+        }
+      });
+    },
+
+    // 点击左侧菜单
+    clickMenu (res) {
+      this.wtId = res.id;
+      this.getWtInfo();
+    }
+  },
+
+  created () {
+    let that = this;
+    that.$nextTick(() => {
+      that.requestData(false);
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+      }, that.$store.state.websocketTimeSec);
+    });
+  },
+
+  unmounted () {
+    clearInterval(this.timmer);
+    this.timmer = null;
   },
 };
 </script>

src/views/WindSite/pages/Info/Warning.vue

@@ -5,12 +5,13 @@
         <div class="query">
           <input class="search-input" name="query" v-model="query" />
         </div>
-        <button class="btn search">搜索</button>
+        <button class="btn search" @click="search">搜索</button>
         <div class="empty"></div>
-        <button class="btn empty-btn">重置</button>
+        <button class="btn empty-btn" @click="reset">重置</button>
       </el-row>
       <el-row class="options">
-        <el-col class="option-item" :span="8" v-for="option in options" :key="option" @click="onOptionClick(option)" :class="{ active: option.isActive, 'has-value': option.count != '' }">
+        <el-col class="option-item" :span="8" v-for="(option, index) in options" :key="option" @click="onOptionClick(option, index)"
+          :class="{ active: option.isActive, 'has-value': option.count != '' }">
           <div class="count">{{ option.count }}</div>
           <div class="text">{{ option.text }}</div>
         </el-col>
@@ -28,211 +29,147 @@ export default {
   components: {
     Table,
   },
-  data() {
+  data () {
     return {
       query: "",
-      options: [
-        {
-          id: "",
-          text: "总故障",
-          count: "1",
-          isActive: true,
-        },
-        {
-          id: "",
-          text: "总故障",
-          count: "",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "总故障",
-          count: "1",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "叶轮刹车类",
-          count: "1",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "发电机类",
-          count: "1",
-          isActive: false,
-        },
-        {
-          id: "",
-          text: "电网类",
-          count: "1",
-        },
-        {
-          id: "",
-          text: "电网类",
-          count: "1",
-        },
-      ],
+      options: [],
+      ackupData: {},
       warning: {
         column: [
-          {
-            name: "报警编号",
-            field: "Code",
-            is_num: true, // 是否为数字
-          },
+          // {
+          //   name: "报警编号",
+          //   field: "Code",
+          //   is_num: true, // 是否为数字
+          // },
           {
             name: "PLC变量名",
-            field: "Text",
+            field: "name",
           },
           {
             name: "报警信息",
-            field: "Warning",
+            field: "value",
           },
           {
             name: "报警状态",
-            field: "State",
-            template: function(data) {
-              if (data != "正常") return "<div class='error-state'></div>";
-              else return data;
+            field: "data1",
+            template: function (data) {
+              if (data === 1) return "<div class='error-state'></div>";
+              else return "正常";
             },
           },
         ],
-        data: [
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "不正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-          {
-            Code: "1000",
-            Text: "变桨电池充电的故障",
-            Warning: "error_battery_charger",
-            State: "正常",
-          },
-        ],
+        data: [],
       },
+      activeArray: [],
+      isSearch: false,
     };
   },
+
+  props: {
+    data: {
+      type: Object,
+      default: () => { }
+    }
+  },
+
+  mounted () {
+    this.backupData = this.BASE.deepCopy(this.data);
+    this.riseData(this.data);
+  },
+
   methods: {
-    onOptionClick(option) {
+    onOptionClick (option, index) {
       option.isActive = !option.isActive;
+      this.activeArray[index] = !this.activeArray[index];
+
+      let warningData = [];
+
+      this.activeArray.forEach((bool, index) => {
+        if (bool) {
+          this.options[index].vos.forEach(ele => {
+            warningData.push(ele);
+          });
+        }
+      });
+
+      this.warning.data = warningData;
+      this.isSearch = false;
+      this.query = "";
+    },
+
+    // 格式化数据
+    riseData (data) {
+      let options = [];
+      let warningData = [];
+      let index = 0;
+
+      for (let key in data) {
+        data.index = index;
+
+        if (this.activeArray.length < (index + 1)) {
+          this.activeArray.push(false);
+        }
+
+        options.push({
+          id: data[key].id,
+          text: data[key].name,
+          vos: data[key].vos,
+          count: data[key].vos.length,
+          isActive: this.activeArray[index]
+        });
+
+        if (this.activeArray[index]) {
+          data[key].vos.forEach(ele => {
+            warningData.push(ele);
+          });
+        }
+
+        index++;
+      }
+
+      this.options = options;
+      this.warning.data = warningData;
+
+      if (this.isSearch) {
+        this.search();
+      }
+    },
+
+    search () {
+      // 压器类总
+      this.isSearch = true;
+      if (this.query) {
+        let warningData = [];
+        this.BASE.deepCopy(this.warning.data).forEach(ele => {
+          if (ele.name.indexOf(this.query) !== -1) {
+            warningData.push(ele);
+          }
+        });
+        this.warning.data = warningData;
+      } else {
+        this.riseData(this.data)
+      }
     },
+
+    reset () {
+
+      for (let i = 0; i < this.activeArray.length; i++) {
+        this.activeArray[i] = false;
+      }
+
+      this.isSearch = false;
+      this.query = "";
+      let sourceMap = this.BASE.deepCopy(this.backupData);
+      this.riseData(sourceMap, true);
+    }
   },
+
+  watch: {
+    data (res) {
+      this.backupData = this.BASE.deepCopy(res);
+      this.riseData(res);
+    }
+  }
 };
 </script>