首页增加弹窗

src/views/Home/Home.vue

@@ -20,7 +20,11 @@
         <Row type="flex" class="plan">
           <Col :span="24">
             <com-panel title="预测电量" sub-title="（单位：万kWh）">
-              <list-bar-chart-2 :list="ForecastPower" height="15.7407vh" />
+              <list-bar-chart-2
+                :list="ForecastPower"
+                height="15.7407vh"
+                @click="showForecastBox"
+              />
             </com-panel>
           </Col>
         </Row>
@@ -80,7 +84,14 @@
     </Row>
     <Row type="flex" style="height: calc(40vh - 236px); margin-top: 20px">
       <Col :span="12">
-        <toolbar-panel title="日发电量">
+        <toolbar-panel
+          :title="
+            planBtnName.indexOf('电站') !== -1 ||
+            planBtnName.indexOf('光电厂') !== -1
+              ? '日照强度'
+              : '日发电量'
+          "
+        >
           <!-- <template v-slot:tools>
             <div class="tools">
               <div class="tool-block">
@@ -760,6 +771,18 @@
       </div>
     </el-dialog>
     <el-dialog
+      title="预测电量详情"
+      v-model="showForecastDialog"
+      width="70%"
+      top="10vh"
+      custom-class="modal"
+      :close-on-click-modal="true"
+    >
+      <div style="height: 500px; padding: 50px 0">
+        <ComTable :data="forecastData" height="100%;" />
+      </div>
+    </el-dialog>
+    <el-dialog
       :title="dialogTitle"
       v-model="dialogShow"
       width="70%"
@@ -804,6 +827,7 @@ import PowerPlan from "./components/power-plan.vue";
 import Map from "./components/map.vue";
 import ListBarChart2 from "../../components/chart/bar/list-bar-chart2.vue";
 import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
+import ComTable from "@com/coms/table/table.vue";
 
 import Table from "./dialog/table.vue";
 
@@ -827,6 +851,7 @@ export default {
     ListBarChart2,
     Table,
     DoubleLineChart,
+    ComTable,
   },
   data() {
     return {
@@ -834,6 +859,7 @@ export default {
       timmer2: null,
       timmer3: null,
       showWeatherDialog: false,
+      showForecastDialog: false,
       weatherChart: [
         {
           title: "温度",
@@ -882,6 +908,18 @@ export default {
       dialogShow: false,
       dialogTitle: "",
       dialogData: {},
+      forecastData: {
+        column: [
+          {
+            name: "风场",
+            field: "name",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
       // 预测电量
       ForecastPower: [],
       // 日发电量
@@ -908,14 +946,14 @@ export default {
         {
           name: "功率",
           min: 0,
-          max: 500,
+          max: 734,
           unit: "(万kWh)",
           position: "left",
         },
         {
           name: "风速",
           min: 0,
-          max: 50,
+          max: 25,
           unit: "(m/s)",
           position: "right",
         },
@@ -1066,7 +1104,6 @@ export default {
       that.API.requestData({
         method: "POST",
         subUrl: "genreset/findPowerInfo",
-        timeout: 60000,
         data: {
           id: that.wpId,
         },
@@ -1210,6 +1247,47 @@ export default {
       }
     },
 
+    showForecastBox() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "/genreset/getForecastwindspeedInfo",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+
+          let forecastData = {
+            column: [
+              {
+                name: "风场名称",
+                field: "name",
+                is_num: false,
+                is_light: false,
+                sortable: true,
+              },
+            ],
+            data: [],
+          };
+
+          res.data.retValue.forEach((ele, index) => {
+            forecastData.column.push({
+              name: res.data.datels[index],
+              field: "value" + (index + 1),
+              is_num: false,
+              is_light: false,
+              sortable: true,
+            });
+          });
+
+          forecastData.data = res.data.retValue;
+          that.forecastData = forecastData;
+
+          that.showForecastDialog = true;
+        },
+      });
+    },
+
     // 显示功率复核图表
     showPowerChart(res) {
       this.dialogTitle = res.dialogTitle;