首页修改

src/views/Home/Home.vue

@@ -9,7 +9,11 @@
               :sub-title="nowTime + ' 实况'"
               icon="fa fa-map-marker"
             >
-              <weather :data="tqmap" />
+              <weather
+                style="cursor: pointer"
+                :data="tqmap"
+                @click="openWeatherDialog"
+              />
             </com-panel>
           </Col>
         </Row>
@@ -45,9 +49,17 @@
       <div class="top-right-panel">
         <Row type="flex">
           <Col :span="24">
-            <com-panel title="电量分析" sub-title="（单位：万kWh）">
+            <com-panel title="效益提升" sub-title="（单位：万kWh）">
               <!-- 避免故障、提升率、降低率、风能利用率、设备可利用率、综合场用电率、存在隐患风机 -->
-              <coulometric-analysis :bmgz="gxkmap.tjsl" :tsl="30" :jdl="gxkmap.tjl" :fnlyl="wxssmap.yfnlyl" :sbklyl="gxkmap.ysbklyl" :zhcydl="gxkmap.yzhcydl" :yhfj="gxkmap.sjtjsl" />
+              <coulometric-analysis
+                :bmgz="gxkmap.tjsl"
+                :tsl="30"
+                :jdl="gxkmap.tjl"
+                :fnlyl="wxssmap.yfnlyl"
+                :sbklyl="gxkmap.ysbklyl"
+                :zhcydl="gxkmap.yzhcydl"
+                :yhfj="gxkmap.sjtjsl"
+              />
             </com-panel>
           </Col>
         </Row>
@@ -218,7 +230,7 @@
                   <td class="unit gray gray">小时</td>
                 </tr>
                 <tr class="">
-                  <td class="text gray">等效可用系数</td>
+                  <td class="text gray">等效可用系数(月)</td>
                   <td class="value green">{{ gxkmap.ydxkyss }}</td>
                   <td class="unit gray">%</td>
                 </tr>
@@ -664,6 +676,90 @@
       </Col>
     </Row>
     <el-dialog
+      title="天气详情"
+      custom-class="modal"
+      v-model="showWeatherDialog"
+      width="80%"
+      :destroy-on-close="true"
+    >
+      <div class="weatherBox">
+        <div class="l">
+          <DoubleLineChart :height="'100%'" :list="weatherChart" />
+        </div>
+        <div class="r">
+          <el-collapse
+            style="height: 400px; overflow-y: scroll"
+            v-model="weathercollapse"
+            accordion
+          >
+            <el-collapse-item
+              :name="index"
+              v-for="(item, index) in tqmap5"
+              :key="index"
+            >
+              <template #title>
+                <div class="collapseItemTitle">
+                  {{ item.time }}
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: start;
+                      align-items: center;
+                    "
+                  >
+                    <div class="icon svg-icon svg-icon-white">
+                      <SvgIcon class="svg" :svgid="'svg-' + item.tqtp" />
+                    </div>
+                    <div class="info">{{ item.sd }}% / {{ item.wd }}°C</div>
+                  </div>
+                  <div class="otherWea">{{ item.tqmc }}</div>
+                </div>
+              </template>
+              <div class="other-info">
+                <Row>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-能见度" />
+                    </div>
+                    <div class="value">{{ item.qxd }}</div>
+                    <div class="text">能见度</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-湿度" />
+                    </div>
+                    <div class="value">{{ item.sd }}</div>
+                    <div class="text">湿度</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-气压" />
+                    </div>
+                    <div class="value">{{ item.dqyl }}</div>
+                    <div class="text">气压</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-日出" />
+                    </div>
+                    <div class="value">{{ item.richushijian }}</div>
+                    <div class="text">日出时间</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-日落" />
+                    </div>
+                    <div class="value">{{ item.riluoshijian }}</div>
+                    <div class="text">日落时间</div>
+                  </Col>
+                </Row>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
       :title="dialogTitle"
       v-model="dialogShow"
       width="70%"
@@ -707,6 +803,7 @@ import PowerReview from "./components/power-review.vue";
 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 Table from "./dialog/table.vue";
 
@@ -729,12 +826,27 @@ export default {
     Map,
     ListBarChart2,
     Table,
+    DoubleLineChart,
   },
   data() {
     return {
       timmer: null, // 计时器
       timmer2: null,
       timmer3: null,
+      showWeatherDialog: false,
+      weatherChart: [
+        {
+          title: "温度",
+          smooth: true,
+          value: [],
+        },
+        {
+          title: "湿度",
+          smooth: true,
+          value: [],
+        },
+      ],
+      tqmap5: [],
       jczbmap: {},
       wxssmap: {},
       gxkmap: {},
@@ -768,7 +880,7 @@ export default {
       },
       dialogType: null,
       wpId: "0",
-      wpName: "",  //安全天数下面的场站名
+      wpName: "", //安全天数下面的场站名
       fcmap: {},
       xtmap: {},
       dialogShow: false,
@@ -800,6 +912,49 @@ export default {
   },
 
   methods: {
+    // 打开天气弹窗
+    openWeatherDialog() {
+      let that = this;
+      that.API.requestData({
+        method: "POST",
+        subUrl: "genreset/getWeatherRealDay5Info",
+        data: {
+          wpId: that.wpId,
+        },
+        success(res) {
+          const keys = ["wd", "sd"];
+          let weatherChart = [
+            {
+              title: "温度",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "湿度",
+              smooth: true,
+              value: [],
+            },
+          ];
+
+          res.data.ls.forEach((ele) => {
+            ele.time = new Date(ele.time).formatDate("yyyy-MM-dd hh:mm");
+          });
+
+          keys.forEach((key, keyIndex) => {
+            res.data.ls.forEach((ele) => {
+              weatherChart[keyIndex].value.push({
+                text: ele.time,
+                value: ele[key],
+              });
+            });
+          });
+          that.tqmap5 = res.data.ls;
+          that.weatherChart = weatherChart;
+          that.showWeatherDialog = true;
+        },
+      });
+    },
+
     // 请求服务
     requestData(showLoading) {
       let that = this;
@@ -904,7 +1059,6 @@ export default {
           id: that.wpId,
         },
         success(res) {
-
           let rdlKey = ["value1", "value2", "value3", "speed"];
           let DayPower = {
             // 图表所用单位
@@ -934,21 +1088,15 @@ export default {
           };
 
           let glKey = [
-            "value1",
             "value2",
-            "value3",
-            "value4",
+            "value1",
             "value5",
-            "value6",
+            "value4",
             "value7",
+            "value6",
           ];
           let Powertrend = [
             {
-              title: "应发功率",
-              smooth: true,
-              value: [],
-            },
-            {
               title: "实发功率",
               smooth: true,
               value: [],
@@ -959,22 +1107,22 @@ export default {
               value: [],
             },
             {
-              title: "4小时预测功率",
+              title: "保证功率",
               smooth: true,
               value: [],
             },
             {
-              title: "保证功率",
+              title: "4小时预测功率",
               smooth: true,
               value: [],
             },
             {
-              title: "平均风速",
+              title: "24小时预测功率",
               smooth: true,
               value: [],
             },
             {
-              title: "24小时预测功率",
+              title: "平均风速",
               smooth: true,
               value: [],
             },
@@ -1039,8 +1187,8 @@ export default {
     },
 
     // 点击安全天数下的场站按钮重置数据
-    onBackStation(){
-      if (this.wpId.indexOf("FDC") == -1){
+    onBackStation() {
+      if (this.wpId.indexOf("FDC") == -1) {
         clearInterval(this.timmer);
         this.timmer = null;
         this.wpId = this.wpId.substring(0, this.wpId.indexOf("0")) + "_FDC";
@@ -1291,5 +1439,81 @@ export default {
     justify-content: space-between;
     flex: 0 0 380px;
   }
+  .weatherBox {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .l,
+    .r {
+      width: 48%;
+      height: 500px;
+      padding: 50px 0;
+    }
+
+    .el-collapse {
+      border-top: 1px solid #999;
+    }
+
+    .el-collapse-item .el-collapse-item__wrap {
+      border-bottom: 1px solid #999;
+    }
+
+    .el-collapse-item__content {
+      background: rgba(18, 29, 28);
+      color: rgba(255, 255, 255, 0.75);
+      padding: 20px;
+    }
+
+    .el-collapse-item__header {
+      background: rgb(18, 29, 28);
+      border-bottom: 1px solid #999;
+      color: rgba(255, 255, 255, 0.75);
+    }
+
+    .el-card__header,
+    .el-collapse,
+    .el-collapse-item__header {
+      border-bottom: 1px solid #999;
+    }
+
+    .collapseItemTitle {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+
+      .svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      .info {
+        margin-left: 4px;
+      }
+
+      .otherWea {
+        margin-right: 10px;
+      }
+    }
+
+    .other-info {
+      text-align: center;
+      font-size: @fontsize-s;
+
+      .text {
+        color: @font-color;
+        font-size: 12px;
+      }
+
+      .value {
+        margin: 0.741vh 0 0 0;
+      }
+
+      .other-icon {
+        margin: 0 auto;
+      }
+    }
+  }
 }
 </style>

src/views/Home/components/coulometric-analysis.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="coulometric-analysis">
     <tab @select="selectionItemClick" v-if="false" />
-    <row>
+    <row style="margin-top: 36px">
       <Col :span="12">
         <div class="coulometric-info">
           <svg-icon svgid="svg-arrow-up" class="icon green" />

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

@@ -1,14 +1,37 @@
 <template>
   <div class="power-plan">
-    <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" />
-    <row @click="openDialog('计划电量完成详情', 'genreset/findProjectPlanPower', 'doneLineChart')">
+    <!-- <tab @select="selectionItemClick" :data="currTabs" class="power-plan-tab" /> -->
+    <row
+      style="margin-top: 47px"
+      @click="
+        openDialog(
+          '计划电量完成详情',
+          'genreset/findProjectPlanPower',
+          'doneLineChart'
+        )
+      "
+    >
       <Col :span="12">
         <!-- <percent-card-2 :title="'月完成率' + parseInt((planData.yfdl / planData.yfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" /> -->
-        <percent-card-2 :title="''" TotalText="实际" ActualText="计划" :TotalValue="planData.yfdl" :ActualValue="planData.yfdljh" :percent="planData.ywcl" />
+        <percent-card-2
+          :title="''"
+          TotalText="实际"
+          ActualText="计划"
+          :TotalValue="planData.yfdl"
+          :ActualValue="planData.yfdljh"
+          :percent="planData.ywcl"
+        />
       </Col>
       <Col :span="12">
         <!-- <percent-card-2 :title="'年完成率' + parseInt((planData.nfdl / planData.nfdljh) * 100) + '%'" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" /> -->
-        <percent-card-2 :title="''" TotalText="实际" ActualText="计划" :TotalValue="planData.nfdl" :ActualValue="planData.nfdljh" :percent="planData.nwcl" />
+        <percent-card-2
+          :title="''"
+          TotalText="实际"
+          ActualText="计划"
+          :TotalValue="planData.nfdl"
+          :ActualValue="planData.nfdljh"
+          :percent="planData.nwcl"
+        />
       </Col>
     </row>
   </div>
@@ -21,17 +44,17 @@ 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: {},
       wpId: "",
-      showTitle:"",
+      showTitle: "",
       // tab项
       tabs: [
         {
           id: "1",
-          text: ""
-        }
+          text: "",
+        },
       ],
       // 月计划完成率
       monthPlan: {
@@ -52,16 +75,16 @@ export default {
     },
     data: {
       type: Object,
-      default: () => { }
+      default: () => {},
     },
-    id:{
+    id: {
       type: String,
-      default: ""
+      default: "",
     },
-    title:{
+    title: {
       type: String,
-      default: ""
-    }
+      default: "",
+    },
   },
   computed: {
     currTabs() {
@@ -81,7 +104,7 @@ export default {
     this.tabs[0].text = this.title;
   },
   methods: {
-    selectionItemClick (item) {
+    selectionItemClick(item) {
       // 点击tab选项 模拟数据变化
       // 动态改变子组件数据变化
       this.monthPlan = {
@@ -94,29 +117,33 @@ export default {
       };
     },
 
-    openDialog(dialogTitle, subUrl, dialogType){
+    openDialog(dialogTitle, subUrl, dialogType) {
       let that = this;
       that.API.requestData({
         method: "POST",
         subUrl,
         data: {
-          id:that.wpId
+          id: that.wpId,
         },
-        success (res) {
-          
-          let key = [{
-            key:"value1",
-            title:"月计划发电量"
-          }, {
-            key:"value2",
-            title:"年计划发电量"
-          }, {
-            key:"value3",
-            title:"月发电量"
-          }, {
-            key:"value4",
-            title:"年发电量"
-          }];
+        success(res) {
+          let key = [
+            {
+              key: "value1",
+              title: "月计划发电量",
+            },
+            {
+              key: "value2",
+              title: "年计划发电量",
+            },
+            {
+              key: "value3",
+              title: "月发电量",
+            },
+            {
+              key: "value4",
+              title: "年发电量",
+            },
+          ];
 
           let doneLineChartData = {
             // 图表所用单位
@@ -124,40 +151,42 @@ export default {
             value: [],
           };
 
-          key.forEach((keyEle, keyIndex)=>{
-
+          key.forEach((keyEle, keyIndex) => {
             doneLineChartData.value.push({
               title: keyEle.title,
               yAxisIndex: 0, // 使用单位
-              value: []
+              value: [],
             });
 
-            res.data.forEach(ele => {
+            res.data.forEach((ele) => {
               doneLineChartData.value[keyIndex].value.push({
                 text: ele.name,
-                value: ele[keyEle.key]
+                value: ele[keyEle.key],
               });
             });
           });
 
-          that.$emit("chartClick", { dialogTitle, dialogType, data: doneLineChartData });
-
-        }
+          that.$emit("chartClick", {
+            dialogTitle,
+            dialogType,
+            data: doneLineChartData,
+          });
+        },
       });
     },
   },
 
   watch: {
-    data (res) {
+    data(res) {
       this.planData = res;
     },
-    id(res){
+    id(res) {
       this.wpId = res;
     },
-    title(res){
+    title(res) {
       this.tabs[0].text = res;
-    }
-  }
+    },
+  },
 };
 </script>