Merge branch 'wsy' of http://61.161.152.110:10101/r/electronic-map into sl

src/views/WindSite/pages/Tower.vue

@@ -1,4 +1,7 @@
 <template>
+  <div class="btn-group-tabs">
+      <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
+  </div>
   <div class="tower">
     <Wave></Wave>
     <Windmill class="windmill-1"></Windmill>
@@ -20,6 +23,7 @@
       :value="cftmap.FCCFTYQ || 0"
       height="9.722vh"
       width="9.722vh"
+      max="500"
     />
     <Panel class="panel-top" title="日资源玫瑰图" :bgBlur="true">
       <div class="direction-chart">
@@ -40,43 +44,17 @@
       </div>
     </Panel>
     <toolbar-panel class="rose-chart" title="功率曲线">
-      <template v-slot:tools>
-        <!--<div class="tools">
-                    <div class="tool-block">
-                        <div class="legend bg-green"></div>
-                        <div class="legend-text">应发功率</div>
-                    </div>
-                    <div class="tool-block">
-                        <div class="legend bg-purple"></div>
-                        <div class="legend-text">实际功率</div>
-                    </div>
-                    <div class="tool-block">
-                        <div class="legend bg-orange"></div>
-                        <div class="legend-text">理论功率</div>
-                    </div>
-                    <div class="tool-block">
-                        <div class="legend bg-yellow"></div>
-                        <div class="legend-text">预测功率4小时</div>
-                    </div>
-                    <div class="tool-block">
-                        <div class="legend bg-blue"></div>
-                        <div class="legend-text">保证功率</div>
-                    </div>
-                    <div class="tool-block">
-                        <div class="legend bg-pink"></div>
-                        <div class="legend-text">风速</div>
-                    </div>
-                </div>-->
-      </template>
-      <template v-slot:default>
-        <!-- 日发电量 -->
+      <!-- <template v-slot:tools>
+      </template> -->
+      <!-- <template v-slot:default> -->
         <multiple-line-chart
-          :list="Powertrend.value"
-          :units="Powertrend.units"
-          height="28vh"
+          height="220px"
+          :list="Powertrend"
+          :units="['(MW)']"
           :showLegend="true"
+          :hoverType="'axis'"
         />
-      </template>
+      <!-- </template> -->
     </toolbar-panel>
   </div>
 </template>
@@ -90,11 +68,13 @@ import MultipleLineChart from "@com/chart/line/normal-line-chart";
 import WindTower from "./Tower/WindTower.vue";
 import DashPieChart from "@com/chart/pie/dash-pie-chart.vue";
 import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
+import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
 export default {
   // 名称
   name: "Tower",
   // 使用组件
   components: {
+    BtnGroup2,
     Wave,
     Windmill,
     ToolbarPanel,
@@ -111,6 +91,9 @@ export default {
   // 数据
   data() {
     return {
+      btnGroupsss: [],
+      rowIndex:1,
+      selectIndex:1,
       timmer: null, // 计时器
       cftmap: {},
       glvos: [],
@@ -134,8 +117,7 @@ export default {
         ],
       },
       ymgtTitle: "",
-      // 日发电量
-      Powertrend: {
+      DayPower: {
         // 图表所用单位
         units: [""],
         value: [
@@ -146,132 +128,201 @@ export default {
           },
         ],
       },
+      // 72小时功率趋势图
+      Powertrend: [
+        {
+          title: "",
+          yAxisIndex: 0, // 使用单位
+          value: [],
+        },
+      ],
     };
   },
   // 函数
   methods: {
-    // 请求服务
-    requestData(showLoading) {
+    requestLine() {
       let that = this;
       that.API.requestData({
-        showLoading,
         method: "POST",
-        subUrl: "monitor/findCftInfo",
+        subUrl: "genreset/findPowerInfo",
+        timeout: 60000,
         data: {
-          wpId: that.wpId,
+          id: that.wpId,
         },
         success(res) {
-          let rmgtmap = {
-            indicator: [],
-            data: [
+
+          let rdlKey = ["value1", "value2", "value3", "speed"];
+          let DayPower = {
+            // 图表所用单位
+            units: ["(万kWh)", "(m/s)"],
+            value: [
               {
+                title: "发电量",
+                yAxisIndex: 0,
                 value: [],
-                name: "",
               },
-            ],
-          };
-
-          let ymgtmap = {
-            indicator: [],
-            data: [
               {
+                title: "上网电量",
+                yAxisIndex: 0,
+                value: [],
+              },
+              {
+                title: "购网电量",
+                yAxisIndex: 0,
+                value: [],
+              },
+              {
+                title: "实时风速",
+                yAxisIndex: 1,
                 value: [],
-                name: "",
               },
             ],
           };
 
-          res.data.rmgtmap.data.forEach((ele) => {
-            rmgtmap.indicator.push(ele.name);
-            rmgtmap.data[0].value.push(ele.data1);
-          });
-
-          res.data.ymgtmap.data.forEach((ele) => {
-            ymgtmap.indicator.push(ele.name);
-            ymgtmap.data[0].value.push(ele.data1);
-          });
-
-          that.rmgtmap = rmgtmap;
-          that.rmgtTitle = res.data.rmgtmap.jfpl;
-
-          that.ymgtmap = ymgtmap;
-          that.ymgtTitle = res.data.ymgtmap.jfpl;
-
-          let units = ["(万kw)", "(米/s)"];
-          let keyArray = [
+          let glKey = [
             "value1",
             "value2",
             "value3",
             "value4",
             "value5",
             "value6",
+            "value7",
+          ];
+          let Powertrend = [
+            {
+              title: "应发功率",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "实发功率",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "理论功率",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "4小时预测功率",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "保证功率",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "平均风速",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "24小时预测功率",
+              smooth: true,
+              value: [],
+            },
           ];
 
-          let Powertrend = {
-            units,
-            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: [],
-              },
-              {
-                title: "平均风速",
-                yAxisIndex: 1, // 使用单位
-                value: [],
-              },
-            ],
-          };
+          rdlKey.forEach((keyEle, keyIndex) => {
+            res.data.rdlvos.forEach((cEle) => {
+              DayPower.value[keyIndex].value.push({
+                text: cEle.timestr,
+                value: cEle[keyEle],
+              });
+            });
+          });
 
-          keyArray.forEach((key, keyIndex) => {
-            res.data.glvos.forEach((ele) => {
-              Powertrend.value[keyIndex].value.push({
-                text: new Date(ele.time).formatDate("hh:mm"),
-                value: ele[key],
+          glKey.forEach((keyEle, keyIndex) => {
+            res.data.glvos.forEach((cEle) => {
+              Powertrend[keyIndex].value.push({
+                text: new Date(cEle.time).formatDate("hh:mm"),
+                value: cEle[keyEle],
               });
             });
           });
 
-          that.cftmap = res.data.cftmap;
+          that.DayPower = DayPower;
           that.Powertrend = Powertrend;
         },
       });
     },
+    requestData(showLoading) {
+      let that = this;
+      that.API.requestData({
+        showLoading,
+        method: "POST",
+        subUrl: "monitor/findCftInfo",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          that.cftmap = res.data.cftmap;
+        },
+      });
+    },
+    getWp () {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windfarmAllAjax",
+        success (res) {
+          let btnGroups = [
+            {
+              icon: "svg-wind-site",
+              btns: [],
+            }
+          ];
+
+          res.data.forEach((ele, index) => {
+            if (ele.id.indexOf("FDC") !== -1) {
+              btnGroups[0].btns.push({
+                text: ele.name,
+                code: ele.id,
+              });
+            } 
+          });
+
+          that.btnGroupsss = btnGroups;
+          that.renderBtnActiveIndex();
+        },
+      });
+    },
+    renderBtnActiveIndex () {
+      this.btnGroupsss.forEach((pEle, pIndex) => {
+        pEle.btns.forEach((cEle, cIndex) => {
+          if (cEle.code === this.wpId) {
+            this.rowIndex = pIndex;
+            this.selectIndex = cIndex;
+          }
+        });
+      });
+    },
+
+    select (res) {
+      this.$router.replace({
+        path: `/monitor/windsite/tower/${res.code}`,
+      });
+      this.wpId = res.code;
+      this.renderBtnActiveIndex ();
+      this.requestData(false);
+      this.requestLine();
+    },
   },
 
   created() {
     let that = this;
     that.wpId = that.$route.params.wpId;
+    that.getWp();
     that.$nextTick(() => {
       that.requestData(false);
-      // that.timmer = setInterval(() => {
-      //   that.requestData(false);
-      // }, that.$store.state.websocketTimeSec);
+      that.requestLine();
+      that.timmer = setInterval(() => {
+        that.requestData(false);
+        that.requestLine();
+      }, 60 * 1000);
     });
   },
 
@@ -350,7 +401,7 @@ export default {
   .pie-left,
   .pie-right {
     position: fixed;
-    top: 8vh;
+    top: 11vh;
   }
 
   .pie-left {

src/views/WindSite/pages/Tower/WindTower.vue

@@ -139,7 +139,7 @@ export default {
 .wind-tower {
   position: absolute;
   width: 64.352vh;
-  top: 0;
+  top: 10px;
   left: calc(50% - 31.759vh);
 
   #wind-tower-left {