驾驶舱模块补传

src/components/coms/cards/percent-card-2.vue

@@ -36,7 +36,7 @@ export default {
     },
     TotalValue: {
       type: Number,
-      default: 100,
+      default: 0,
     },
     ActualText: {
       type: String,
@@ -44,16 +44,19 @@ export default {
     },
     ActualValue: {
       type: Number,
-      default: 25,
+      default: 100,
     },
     color: {
       type: String,
       default: "green",
-    },
+    }
   },
   computed: {
     percent() {
-      return (this.ActualValue / this.TotalValue) * 100;
+      console.log(111,this.TotalValue)
+      console.log(222,this.ActualValue)
+      // return parseInt((this.ActualValue / this.TotalValue) * 100);
+      return parseInt((this.TotalValue / this.ActualValue) * 100);
     },
   },
 };

src/views/Home/Home.vue

@@ -38,7 +38,7 @@
       <Row type="flex">
         <Col :span="24">
         <com-panel title="计划电量完成情况" sub-title="（单位：万KWh）">
-          <power-plan />
+          <power-plan :data="planData" />
         </com-panel>
         </Col>
       </Row>
@@ -108,33 +108,33 @@
           <table class="table-card">
             <tr class="">
               <td class="text gray">装机容量</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="value green">{{jczbmap.zjrl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">上网电量(日)</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">装机台数</td>
+              <td class="value green">{{jczbmap.zjts}}</td>
+              <td class="unit gray">台</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化硫</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">日发电量</td>
+              <td class="value green">{{jczbmap.rfdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化碳</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray gray">MW</td>
+              <td class="text gray">月发电量</td>
+              <td class="value green">{{jczbmap.yfdl}}</td>
+              <td class="unit gray gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用水</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年发电量</td>
+              <td class="value green">{{jczbmap.nfdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用煤</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年设备可利用率</td>
+              <td class="value green">{{gxkmap.nsbklyl}}</td>
+              <td class="unit gray">%</td>
             </tr>
           </table>
         </com-panel>
@@ -143,34 +143,34 @@
         <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>
+              <td class="text gray">mttr</td>
+              <td class="value green">{{jczbmap.mttr}}</td>
+              <td class="unit gray">小时</td>
             </tr>
             <tr class="">
-              <td class="text gray">上网电量(日)</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">mtbf</td>
+              <td class="value green">{{jczbmap.mtbf}}</td>
+              <td class="unit gray">小时</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化硫</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">上网电量</td>
+              <td class="value green">{{jczbmap.swdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化碳</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray gray">MW</td>
+              <td class="text gray">月利用小时</td>
+              <td class="value green">{{jczbmap.ylyxs}}</td>
+              <td class="unit gray">%</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用水</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年利用小时</td>
+              <td class="value green">{{jczbmap.nlyxs}}</td>
+              <td class="unit gray gray">%</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用煤</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年等效科利用系数</td>
+              <td class="value green">{{gxkmap.ndxkyss}}</td>
+              <td class="unit gray">%</td>
             </tr>
           </table>
         </com-panel>
@@ -179,34 +179,34 @@
         <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>
+              <td class="text gray">日性能损失</td>
+              <td class="value green">{{wxssmap.rqfssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">上网电量(日)</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">日故障损失</td>
+              <td class="value green">{{wxssmap.rgzssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化硫</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">日检修损失</td>
+              <td class="value green">{{wxssmap.rjxssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化碳</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray gray">MW</td>
+              <td class="text gray">日限电损失</td>
+              <td class="value green">{{wxssmap.rxdssdl}}</td>
+              <td class="unit gray gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用水</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">日受累损失</td>
+              <td class="value green">{{wxssmap.rslssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用煤</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年待机小时</td>
+              <td class="value green">{{gxkmap.ndjxs}}</td>
+              <td class="unit gray">小时</td>
             </tr>
           </table>
         </com-panel>
@@ -215,34 +215,34 @@
         <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>
+              <td class="text gray">月性能损失</td>
+              <td class="value green">{{wxssmap.yqfssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">上网电量(日)</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">月故障损失</td>
+              <td class="value green">{{wxssmap.ygzssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化硫</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">月检修损失</td>
+              <td class="value green">{{wxssmap.yjxssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化碳</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray gray">MW</td>
+              <td class="text gray">月限电损失</td>
+              <td class="value green">{{wxssmap.yxdssdl}}</td>
+              <td class="unit gray gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用水</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">月受累损失</td>
+              <td class="value green">{{wxssmap.yslssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用煤</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年运行小时</td>
+              <td class="value green">{{gxkmap.nyxxs}}</td>
+              <td class="unit gray">小时</td>
             </tr>
           </table>
         </com-panel>
@@ -251,34 +251,34 @@
         <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>
+              <td class="text gray">年性能损失</td>
+              <td class="value green">{{wxssmap.nqfssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">上网电量(日)</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年故障损失</td>
+              <td class="value green">{{wxssmap.ngzssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化硫</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年检修损失</td>
+              <td class="value green">{{wxssmap.njxssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">减排二氧化碳</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray gray">MW</td>
+              <td class="text gray">年限电损失</td>
+              <td class="value green">{{wxssmap.nxdssdl}}</td>
+              <td class="unit gray gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用水</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年受累损失</td>
+              <td class="value green">{{wxssmap.nslssdl}}</td>
+              <td class="unit gray">万kwh</td>
             </tr>
             <tr class="">
-              <td class="text gray">节约用煤</td>
-              <td class="value green">361033.3</td>
-              <td class="unit gray">MW</td>
+              <td class="text gray">年故障小时</td>
+              <td class="value green">{{gxkmap.ngzxs}}</td>
+              <td class="unit gray">小时</td>
             </tr>
           </table>
         </com-panel>
@@ -296,7 +296,7 @@
               </div>
               <div class="info">
                 <div class="title green">接入风机</div>
-                <div class="value">30</div>
+                <div class="value">{{mxztmap.jrts}}</div>
               </div>
             </div>
             <div class="situation-item">
@@ -306,12 +306,12 @@
               <div class="info">
                 <div class="title green">待机</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">待风</span>
+                  <span>{{mxztmap.djts}}</span>
                 </div>
                 <div class="value">
                   <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span>{{mxztmap.sdtjts}}</span>
                 </div>
               </div>
             </div>
@@ -322,12 +322,12 @@
               <div class="info">
                 <div class="title green">运行</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">正常发电</span>
+                  <span>{{mxztmap.yxts}}</span>
                 </div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span class="text gray">降出力运行</span>
+                  <span>{{mxztmap.fdjclts}}</span>
                 </div>
               </div>
             </div>
@@ -336,14 +336,14 @@
                 <svg-icon class="" svgid="svg-限电图标" />
               </div>
               <div class="info">
-                <div class="title green">待机</div>
+                <div class="title green">限电</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">限电降出力</span>
+                  <span>{{mxztmap.xdjclts}}</span>
                 </div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span class="text gray">停机</span>
+                  <span>{{mxztmap.xdtjts}}</span>
                 </div>
               </div>
             </div>
@@ -354,14 +354,14 @@
                 <svg-icon class="" svgid="svg-故障图标" />
               </div>
               <div class="info">
-                <div class="title green">待机</div>
+                <div class="title green">故障</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">故障停机</span>
+                  <span>{{mxztmap.gzts}}</span>
                 </div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span class="text gray">场内受累</span>
+                  <span>{{mxztmap.cnslgzts}}</span>
                 </div>
               </div>
             </div>
@@ -370,46 +370,46 @@
                 <svg-icon class="" svgid="svg-检修图标" />
               </div>
               <div class="info">
-                <div class="title green">待机</div>
+                <div class="title green">检修</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">检修停机</span>
+                  <span>{{mxztmap.jxts}}</span>
                 </div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span class="text gray">场内受累</span>
+                  <span>{{mxztmap.cnsljxts}}</span>
                 </div>
               </div>
             </div>
             <div class="situation-item">
-              <div class="icon svg-icon svg-icon-gray">
-                <svg-icon class="" svgid="svg-离线图标" />
+              <div class="icon svg-icon svg-icon-darkblue">
+                <svg-icon class="" svgid="svg-受累图标" />
               </div>
               <div class="info">
-                <div class="title green">待机</div>
+                <div class="title green">受累</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">电网</span>
+                  <span>{{mxztmap.dwslts}}</span>
                 </div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span class="text gray">环境</span>
+                  <span>{{mxztmap.hjslts}}</span>
                 </div>
               </div>
             </div>
             <div class="situation-item">
-              <div class="icon svg-icon svg-icon-darkblue">
-                <svg-icon class="" svgid="svg-受累图标" />
+              <div class="icon svg-icon svg-icon-gray">
+                <svg-icon class="" svgid="svg-离线图标" />
               </div>
               <div class="info">
-                <div class="title green">待机</div>
+                <div class="title green">离线</div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123 </span>
+                  <span class="text gray">离线</span>
+                  <span>{{mxztmap.lxts}}</span>
                 </div>
                 <div class="value">
-                  <span class="text gray">手动停机</span>
-                  <span>123</span>
+                  <span class="text gray">未知</span>
+                  <span>---</span>
                 </div>
               </div>
             </div>
@@ -460,7 +460,12 @@ export default {
   data () {
     return {
       timmer: null, // 计时器
-      powerData:{},
+      jczbmap: {},
+      wxssmap: {},
+      gxkmap: {},
+      mxztmap: {},
+      planData:{},
+      powerData: {},
       // 预测电量
       ForecastPower: [
         {
@@ -521,90 +526,102 @@ export default {
         success (res) {
           let glvos = [];
 
-          let rdlKey=["value1","value2","value3"];
+          let rdlKey = ["value1", "value2", "value3"];
           let DayPower = {
             // 图表所用单位
             units: ["(万KWh)"],
             value: [{
-                title: "发电量",
-                yAxisIndex: 0,
-                value: []
-              },{
-                title: "上网电量",
-                yAxisIndex: 0,
-                value: []
-              },{
-                title: "购网电量",
-                yAxisIndex: 0,
-                value: []
-              }]
+              title: "发电量",
+              yAxisIndex: 0,
+              value: []
+            }, {
+              title: "上网电量",
+              yAxisIndex: 0,
+              value: []
+            }, {
+              title: "购网电量",
+              yAxisIndex: 0,
+              value: []
+            }]
           };
 
-          let glKey=["value1","value2","value3","value4","value5","value6"];
+          let glKey = ["value1", "value2", "value3", "value4", "value5", "value6"];
           let Powertrend = {
             // 图表所用单位
-            units: ["(万KWh)","(m/s)"],
+            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: []
-              }]
+              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=>{
+          rdlKey.forEach((keyEle, keyIndex) => {
+            res.data.rdlvos.forEach(cEle => {
               DayPower.value[keyIndex].value.push({
-                text: cEle.timestr,
+                text: new Date(cEle.time).formatDate("yyyy-MM-dd"),
                 value: cEle[keyEle]
               });
             });
           });
 
-          glKey.forEach((keyEle,keyIndex)=>{
-            res.data.glvos.forEach(cEle=>{
+          glKey.forEach((keyEle, keyIndex) => {
+            res.data.glvos.forEach(cEle => {
               Powertrend.value[keyIndex].value.push({
-                text: cEle.timestr,
+                text: new Date(cEle.time).formatDate("yyyy-MM-dd"),
                 value: cEle[keyEle]
               });
             });
           });
 
-          that.powerData=[{
+          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;
+          that.DayPower = DayPower;
+          that.Powertrend = Powertrend;
+          that.jczbmap = res.data.jczbmap;
+          that.wxssmap = res.data.wxssmap;
+          that.gxkmap = res.data.gxkmap;
+          that.mxztmap = res.data.mxztmap;
+          that.planData = {
+            yfdl: res.data.jczbmap.yfdl,
+            nfdl: res.data.jczbmap.nfdl,
+            yfdljh: res.data.gxkmap.yfdljh,
+            nfdljh: res.data.gxkmap.nfdljh,
+            ywcl: res.data.gxkmap.ywcl,
+            nwcl: res.data.gxkmap.nwcl
+          };
           console.log(111, res);
         }
       });

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

@@ -3,10 +3,12 @@
     <tab @select="selectionItemClick" :data="tabs" class="power-plan-tab" />
     <row>
       <Col :span="12">
-        <percent-card-2 title="月计划完成率" TotalText="实际" ActualText="计划" :TotalValue="monthPlan.plan" :ActualValue="monthPlan.actual" />
+      <percent-card-2 :title="'月完成率' + (planData.ywcl || '') + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl"
+        :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
       </Col>
       <Col :span="12">
-        <percent-card-2 title="年计划完成率" TotalText="实际" ActualText="计划" :TotalValue="yearPlan.plan" :ActualValue="yearPlan.actual" />
+      <percent-card-2 :title="'年完成率' + (planData.nwcl || '') + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl"
+        :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
       </Col>
     </row>
   </div>
@@ -19,22 +21,15 @@ import Tab from "@/components/coms/tabs/tab.vue";
 import PercentCard2 from "../../../components/coms/cards/percent-card-2.vue";
 export default {
   components: { Row, Col, Tab, PercentCard2 },
-  data() {
+  data () {
     return {
+      planData: {},
       // tab项
       tabs: [
         {
           id: "1",
-          text: "风电",
-        },
-        {
-          id: "2",
-          text: "光电",
-        },
-        {
-          id: "3",
-          text: "总和",
-        },
+          text: "风电"
+        }
       ],
       // 月计划完成率
       monthPlan: {
@@ -48,8 +43,20 @@ export default {
       },
     };
   },
+
+  props: {
+    data: {
+      type: Object,
+      default: () => { }
+    }
+  },
+
+  mounted () {
+    this.planData = this.data;
+  },
+
   methods: {
-    selectionItemClick(item) {
+    selectionItemClick (item) {
       // 点击tab选项 模拟数据变化
       // 动态改变子组件数据变化
       this.monthPlan = {
@@ -62,6 +69,12 @@ export default {
       };
     },
   },
+
+  watch: {
+    data (res) {
+      this.planData = res;
+    }
+  }
 };
 </script>
 

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

@@ -3,7 +3,7 @@
     <Row type="flex" justify="center" :align="'middle'">
       <!-- 功率复核 PowerLoad -->
       <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="item.value" height="9.722vh" />
       </Col>
     </Row>
   </div>
@@ -21,27 +21,27 @@ export default {
     DashPieChart,
   },
 
-  data() {
+  data () {
     return {
       // 功率复核数据
       PowerLoad: [],
     };
   },
 
-  props:{
-    data:{
-      type:Array,
-      default:() => []
+  props: {
+    data: {
+      type: Array,
+      default: () => []
     }
   },
 
-  mounted(){
-    this.PowerLoad=this.data;
+  mounted () {
+    this.PowerLoad = this.data;
   },
 
-  watch:{
-    data(res){
-      this.PowerLoad=res;
+  watch: {
+    data (res) {
+      this.PowerLoad = res;
     }
   }
 };