新增PR分析页面并实现页面功能

.env.development

@@ -1,11 +1,11 @@
 
-# VUE_APP_TEST=http://10.81.3.155:9002
-VUE_APP_TEST=http://192.168.1.100:9002
+VUE_APP_TEST=http://10.81.3.155:9002
+# VUE_APP_TEST=http://192.168.1.100:9002
 
 
 # VUE_APP_API=http://192.168.1.110:6060
-VUE_APP_API=http://10.81.3.153:6060
-# VUE_APP_API=http://192.168.1.107:6060
+# VUE_APP_API=http://10.81.3.153:6060
+VUE_APP_API=http://192.168.1.103:6060
 
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011

src/api/curveAnalyse.js

@@ -153,7 +153,7 @@ export function fdlList(data) {
     method: "get",
   });
 }
-//专题分析-综合厂用电量
+//专题分析-综合场用电量
 export function zhcydlList(data) {
   return request({
     baseURL: process.env.VUE_APP_API,
@@ -161,3 +161,19 @@ export function zhcydlList(data) {
     method: "get",
   });
 }
+//专题分析-上网电量
+export function swdlList(data) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/specific/swdlList?companys=${data.companys}&type=${data.type}&year=${data.year}`,
+    method: "get",
+  });
+}
+//专题分析-购网电量
+export function gwdlList(data) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/specific/gwdlList?companys=${data.companys}&type=${data.type}&year=${data.year}`,
+    method: "get",
+  });
+}

src/api/monthlyPerformanceAnalysis.js

@@ -378,3 +378,11 @@ export function getAllStation(params) {
     method: "GET",
   });
 }
+//查询逆变器PR分析
+export function getPrAnalysis(params) {
+  return request({
+    baseURL: process.env.VUE_APP_API,
+    url: `/PVSystemEfficiency/pranalysis?month=${params.month}&wpId=${params.wpId}&target=${params.target}&sort=${params.sort}`,
+    method: "GET",
+  });
+}

src/assets/icon/svg/arrow-up-1.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="200px" height="200px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
-<path fill="#FFFFFF" d="M51.415,25.494L9.428,67.48L0,58.046L58.047,0l58.046,58.046l-9.426,9.434L64.747,25.561v104.846H51.415
-	V25.494L51.415,25.494z"/>
-</svg>

src/assets/icon/svg/shield-error.svg

@@ -1,30 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
-	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
-<g id="图层_2">
-	<g>
-		<g>
-			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M16.667,16.667v166.667h166.667V16.667H16.667z
-				 M177.777,177.951H22.396V22.396h155.382V177.951z"/>
-		</g>
-	</g>
-</g>
-<g id="图层_3">
-	<g>
-		<g>
-			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,0v200h200V0H0z M194.445,194.617H5.729V5.729h188.716
-				V194.617z"/>
-		</g>
-	</g>
-</g>
-<g id="图层_1">
-	<path fill="#FFFFFF" d="M136.279,65.563l-3.526-0.068c-0.082,0-9.364-0.195-17.524-3.958c-8.371-3.86-13.759-8.297-13.808-8.352
-		l-2.132-1.752l-2.11,1.752c-0.049,0.044-5.447,4.481-13.808,8.352c-8.148,3.763-16.054,3.958-16.13,3.958l-3.537,0.068v40.828
-		c0,20.503,23.155,42.177,35.596,42.177c12.451,0,36.99-21.674,36.99-42.177C136.301,106.413,136.279,65.563,136.279,65.563z
-		 M100.092,100.499l14.122-16.081c1.184-1.345,3.137-1.345,4.33,0c1.183,1.362,1.183,3.57,0,4.927l-23.074,26.27
-		c-0.597,0.673-1.378,1.009-2.17,1.009c-0.787,0-1.568-0.336-2.159-1.009l-11.068-12.598c-1.183-1.346-1.183-3.564,0-4.927
-		c1.188-1.345,3.136-1.345,4.33,0l8.902,10.141L100.092,100.499"/>
-</g>
-</svg>

src/assets/icon/svg/shield-right.svg

@@ -1,29 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
-	 height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
-<g id="图层_2">
-	<g>
-		<g>
-			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M16.667,16.667v166.667h166.667V16.667H16.667z
-				 M177.777,177.951H22.396V22.396h155.382V177.951z"/>
-		</g>
-	</g>
-</g>
-<g id="图层_3">
-	<g>
-		<g>
-			<path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,0v200h200V0H0z M194.445,194.617H5.729V5.729h188.716
-				V194.617z"/>
-		</g>
-	</g>
-</g>
-<g id="图层_1">
-	<path fill="#FFFFFF" d="M136.279,65.563l-3.526-0.068c-0.082,0-9.364-0.195-17.524-3.958c-8.371-3.86-13.759-8.297-13.808-8.352
-		l-2.132-1.752l-2.11,1.752c-0.049,0.044-5.447,4.481-13.808,8.352c-8.148,3.763-16.054,3.958-16.13,3.958l-3.537,0.068v40.828
-		c0,20.503,23.155,42.177,35.596,42.177c12.451,0,36.99-21.674,36.99-42.177C136.301,106.413,136.279,65.563,136.279,65.563z
-		 M-8091.5,83.5h16383 M-8091.5,117h16383 M100.34,107.691l-9.699,9.698l-6.472-6.473l9.698-9.698l-9.698-9.697l6.474-6.474
-		l9.697,9.698l9.698-9.697l6.472,6.473l-9.696,9.697l9.699,9.699l-6.475,6.474L100.34,107.691z"/>
-</g>
-</svg>

src/views/economicsOperation/photovoltaicAnalyse/performanceEvaluation/index.vue

@@ -38,16 +38,6 @@
           时间
           <div class="">
             <el-date-picker
-              v-if="tabIndex == 'day'"
-              size="mini"
-              v-model="pickerTimer"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <el-date-picker
               v-if="tabIndex == 'month'"
               size="mini"
               v-model="pickerTimer"
@@ -57,16 +47,6 @@
               popper-class="date-select"
             >
             </el-date-picker>
-            <el-date-picker
-              v-if="tabIndex == 'year'"
-              size="mini"
-              v-model="pickerTimer"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年份"
-              popper-class="date-select"
-            >
-            </el-date-picker>
           </div>
         </div>
         <div class="but">
@@ -75,29 +55,6 @@
           >
         </div>
       </div>
-      <div class="selections">
-        <div
-          class="selections_btn"
-          @click="tabSelect('day')"
-          :class="{ active: tabIndex == 'day' }"
-        >
-          日
-        </div>
-        <div
-          class="selections_btn"
-          @click="tabSelect('month')"
-          :class="{ active: tabIndex == 'month' }"
-        >
-          月
-        </div>
-        <div
-          class="selections_btn"
-          @click="tabSelect('year')"
-          :class="{ active: tabIndex == 'year' }"
-        >
-          年
-        </div>
-      </div>
     </div>
     <div
       style="
@@ -164,7 +121,7 @@ export default {
   },
   data() {
     return {
-      tabIndex: "day",
+      tabIndex: "month",
       companyVal: "",
       companyOptions: [],
       stationVal: "",
@@ -216,19 +173,7 @@ export default {
       this.page.pagesize = val;
       this.seachData();
     },
-    // 切换tab
-    tabSelect(index) {
-      this.tabIndex = index;
-      if (this.tabIndex == "year") {
-        this.pickerTimer = dayjs().format("YYYY");
-      } else if (this.tabIndex == "month") {
-        this.pickerTimer = dayjs().format("YYYY-MM");
-      } else if (this.tabIndex == "day") {
-        this.pickerTimer = dayjs().add(-1, "day").format("YYYY-MM-DD");
-      }
-      this.page.currentPage = 1;
-      this.seachData();
-    },
+
     changeBtn(id) {
       this.tabEvent = id;
       this.stationVal = "";
@@ -256,12 +201,19 @@ export default {
       this.stationOptions = [];
       let params = {
         type: this.tabEvent,
-        companyid: 0,
+        companyid: this.companyVal,
       };
       const { data: datas } = await getApiwpByCplistlist(params);
-      this.stationOptions = datas.data;
-      this.stationVal = "SXJ_KGDL_HR_GDC_STA";
-      this.getTableData();
+      if (datas.data.length) {
+        this.stationOptions = datas.data;
+        this.stationVal = "SXJ_KGDL_HR_GDC_STA";
+        this.getTableData();
+      } else {
+        this.stationOptions = [];
+        this.stationVal = "";
+        this.EvaluationData = [];
+        this.page.total = 0;
+      }
     },
     changeStation(val) {
       this.stationVal = val;

src/views/economicsOperation/photovoltaicAnalyse/prAnalyse/components/barCharts.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "pr-bar-chart",
+  componentName: "pr-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "800px",
+    },
+    // 传入数据
+    bardata: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    // 颜色
+    color: {
+      type: Array,
+      default: () => ["#05bb4c"],
+    },
+    // 每页显示个数
+    pageSize: {
+      type: Number,
+      default: 23,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      areaData: [],
+    };
+  },
+  computed: {
+    legend() {
+      return this.bardata.legend;
+    },
+  },
+  methods: {
+    initChart() {
+      let chart = echarts.init(this.$el);
+
+      let option = {
+        color: this.color,
+        grid: {
+          left: 18,
+          right: 16,
+          bottom: 16,
+          top: 35,
+          containLabel: true,
+        },
+        legend: {
+          data: this.bardata.legend,
+          right: 0,
+          icon: "ract",
+          itemWidth: 4,
+          itemHeight: 4,
+          inactiveColor: "#999999",
+          padding: [10, 0],
+          textStyle: {
+            color: "#999999",
+            fontSize: 12,
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          borderColor: "#05bb4c",
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          textStyle: {
+            color: "#fff",
+            fontSize: 16,
+          },
+          formatter: function (params) {
+            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
+            htmlStr += `<div style='margin-bottom:2px'>`;
+            var seriesName = "本期PR"; //图例名称
+            var value = params[0].value; //值
+            var mark = params[0].marker; //点
+            htmlStr += mark; //一个点
+            htmlStr += ` ${seriesName} : ${
+              value != null ? value + ` %</span>` : "--"
+            }`; //圆点后面显示的文本
+            htmlStr += "</div>";
+            return htmlStr;
+          },
+          axisPointer: {
+            type: "shadow",
+            shadowStyle: {
+              color: "rgba(105,105,105, .05)",
+              width: "1",
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "category",
+            axisLabel: {
+              show: false,
+              color: "#999999",
+            },
+            inverse: true,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            data: this.bardata.name,
+          },
+        ],
+        xAxis: [
+          {
+            type: "value",
+            axisLabel: {
+              show: false,
+              color: "#999999",
+            },
+            axisLine: {
+              type: "",
+              lineStyle: {
+                color: "#999999",
+              },
+              width: 15,
+            },
+            axisTick: {
+              show: true,
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                dashOffset: 100,
+                color: "#5a6162",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "",
+            axisLabel: {
+              show: false,
+              // formatter: "{value}",
+              // color: partten.getColor("gray"),
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            name: this.bardata.legend,
+            type: "bar",
+            barWidth: 10,
+            label: {
+              show: false,
+              position: "insideRight",
+            },
+            data: this.bardata.data,
+          },
+        ],
+      };
+      console.log(option);
+      chart.setOption(option); //重新绘制图标
+    },
+    resize() {
+      let chart = echarts.init(this.$el);
+      chart.resize();
+    },
+  },
+  created() {
+    this.id = "bar-chart-" + util.newGUID();
+    if (this.bardata.name && this.bardata.name.length < this.pageSize) {
+      this.areaData = this.bardata.name;
+      for (let i = this.bardata.name.length; i <= this.pageSize; i++) {
+        this.areaData.push("");
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+
+      this.initChart();
+      window.addEventListener("resize", this.resize);
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeUpdate() {
+    this.areaData = this.bardata.name;
+  },
+  watch: {
+    bardata(val) {
+      if (val.name && val.name.length < this.pageSize) {
+        this.areaData = val.name;
+        for (let i = val.name.length; i <= this.pageSize; i++) {
+          this.areaData.push("");
+        }
+      }
+    },
+    height() {
+      this.areaData = this.bardata.name;
+      this.initChart();
+    },
+    "$store.state.isFixed": {
+      handler() {
+        this.resize();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/economicsOperation/photovoltaicAnalyse/prAnalyse/index.vue

@@ -1,11 +1,261 @@
 <template>
-  <div>PR分析</div>
+  <div class="pr-wrapper">
+    <div class="pr-search">
+      <el-select
+        size="mini"
+        v-model="station"
+        placeholder="请选择"
+        style="margin-left: 15px"
+      >
+        <el-option
+          v-for="item in stationOptions"
+          :key="item.id"
+          :label="item.aname"
+          :value="item.id"
+        >
+        </el-option>
+      </el-select>
+      <el-date-picker
+        size="mini"
+        type="month"
+        v-model="month"
+        value-format="YYYY-MM"
+        placeholder="请选择"
+        style="margin-left: 15px"
+        popper-class="date-select"
+      >
+      </el-date-picker>
+      <el-button round size="mini" class="searchColor" @click="getDatas"
+        >搜索</el-button
+      >
+    </div>
+    <div class="pr-content">
+      <div class="leftContent">
+        <span>{{ selectValue }}</span>
+      </div>
+
+      <div class="pr-body">
+        <div class="table-wrapper">
+          <el-table
+            :data="tableData"
+            width="100%"
+            stripe
+            @sort-change="handleSort"
+          >
+            <el-table-column
+              v-for="(item, index) in tableHeaders"
+              :key="index"
+              align="center"
+              show-overflow-tooltip
+              :prop="item.prop"
+              :label="item.label"
+              :width="item.width"
+              :sortable="item.prop != 'prpm' && item.prop != 'wtid'"
+            >
+              <template #default="{ row }">
+                <div class="pr-table-cell" v-if="item.label == '增长率(%)'">
+                  <span>{{
+                    row[item.prop] || row[item.prop] == 0
+                      ? row[item.prop]
+                      : "--"
+                  }}</span>
+                  <span v-if="row[item.prop] && row[item.prop] != 0">
+                    <i
+                      class="svg-icon svg-icon-sm svg-icon-green"
+                      v-if="row[item.prop] < 0"
+                    >
+                      <svgIcon svgid="svg-arrow-down"></svgIcon>
+                    </i>
+                    <i
+                      class="svg-icon svg-icon-sm svg-icon-red"
+                      v-if="row[item.prop] > 0"
+                    >
+                      <svgIcon svgid="svg-arrow-up"></svgIcon>
+                    </i>
+                  </span>
+                </div>
+                <div v-else>
+                  {{
+                    row[item.prop] || row[item.prop] == 0
+                      ? row[item.prop]
+                      : "--"
+                  }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column width="800"></el-table-column>
+          </el-table>
+        </div>
+        <div class="chart-wrapper" :style="{ height: height }">
+          <barCharts height="100%" width="100%" :bardata="bardata" />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import dayjs from "dayjs";
+import barCharts from "@/views/economicsOperation/photovoltaicAnalyse/prAnalyse/components/barCharts.vue";
+import { getPrAnalysis } from "@/api/monthlyPerformanceAnalysis.js";
+import { GetStationByCompany } from "@/api/factoryMonitor/index.js";
+import svgIcon from "@/components/coms/icon/svg-icon.vue";
 export default {
   name: "PrAnalyse", //PR分析
+  data() {
+    return {
+      selectValue: "PR分析",
+      station: "",
+      stationOptions: [],
+      month: dayjs().format("YYYY-MM"),
+      tableHeaders: [
+        { prop: "prpm", label: "排名", width: 80 },
+        { prop: "wtid", label: "设备" },
+        { prop: "pr", label: "本期" },
+        { prop: "prhb", label: "上月" },
+        { prop: "prhbzzl", label: "增长率(%)" },
+        { prop: "prtb", label: "同期" },
+        { prop: "prtbzzl", label: "增长率(%)" },
+      ],
+      tableData: [],
+      bardata: {},
+      height: "",
+      target: "",
+      sort: "",
+    };
+  },
+  components: { barCharts, svgIcon },
+  created() {
+    this.getStation();
+    if (this.tableData.length > 22) {
+      this.height = this.tableData.length * 37 + 53 + "px";
+    } else {
+      this.height = 23 * 38 + 80 + "px";
+    }
+  },
+  methods: {
+    getStation() {
+      GetStationByCompany({
+        companyids: 0,
+        type: -2,
+      }).then(({ data: res, code }) => {
+        if (res.code == 200) {
+          this.stationOptions = res.data;
+          this.station = this.stationOptions[0].id;
+          this.getDatas();
+        }
+      });
+    },
+    getDatas() {
+      getPrAnalysis({
+        wpId: this.station,
+        month: this.month,
+        target: this.target,
+        sort: this.sort,
+      }).then((res) => {
+        if (res.code == 200) {
+          this.tableData = res.data.map((i) => {
+            return {
+              ...i,
+              prhbzzl: i.prhbzzl ? i.prhbzzl.toFixed(2) : i.prhbzzl,
+              prtbzzl: i.prtbzzl ? i.prtbzzl.toFixed(2) : i.prtbzzl,
+            };
+          });
+          this.bardata = {
+            name: this.tableData.map((i) => i.wtid),
+            lengend: "PR",
+            data: this.tableData.map((i) => i.pr),
+          };
+        }
+      });
+    },
+    handleSort({ column, prop, order }) {
+      switch (prop) {
+        case "pr":
+          this.target = "prpm";
+          break;
+        case "prhb":
+          this.target = "prhbpm";
+          break;
+        case "prhbzzl":
+          this.target = "prhbzzlpm";
+          break;
+        case "prtb":
+          this.target = "prtbpm";
+          break;
+        case "prtbzzl":
+          this.target = "prtbzzlpm";
+          break;
+        case null:
+          this.target = "";
+      }
+      this.sort = order == "ascending" ? 1 : order == "descending" ? 2 : "";
+      this.getDatas();
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.pr-wrapper {
+  height: 100%;
+  padding: 0 20px;
+  .pr-search {
+    padding: 10px 0;
+    button {
+      margin-left: 10px;
+      background: rgba(67, 81, 107, 0.3);
+      border: 1px solid #274934;
+      color: #b3b3b3;
+    }
+
+    .searchColor {
+      background-color: rgba(5, 187, 76, 0.2);
+      border: 1px solid #3b6c53;
+      color: #b3b3b3;
+      font-size: 14px;
+
+      &:hover {
+        background-color: rgba(5, 187, 76, 0.5);
+        color: #ffffff;
+      }
+    }
+  }
+  .pr-content {
+    height: calc(100% - 40px);
+    width: 100%;
+    padding-bottom: 10px;
+    .leftContent {
+      width: 242px;
+      height: 45px;
+      line-height: 45px;
+      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;
+      span {
+        font-size: 16px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #05bb4c;
+        margin-left: 25px;
+      }
+    }
+    .pr-body {
+      height: calc(100% - 36px);
+      width: 100%;
+
+      position: relative;
+      overflow: auto;
+      .table-wrapper {
+        height: 100%;
+        width: 100%;
+      }
+      .chart-wrapper {
+        width: 800px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+  }
+}
+</style>

src/views/economicsOperation/stationAnalyse/stationElectricAnalyse/index.vue

@@ -34,7 +34,6 @@
           v-model="station"
           placeholder="请选择"
           style="margin-left: 15px"
-          @change="stationChanged"
         >
           <el-option
             v-for="item in stationOptions"

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>光资源分析</div>
+</template>
+
+<script>
+export default {
+  name: "Photovoltaic", //光资源分析
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>风资源分析</div>
+</template>
+
+<script>
+export default {
+  name: "Wind", //风资源分析
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/index.vue

@@ -1,11 +1,22 @@
 <template>
-  <div>风光资源分析</div>
+  <div class="windAndPhotovoltaic">
+    <div class=""></div>
+  </div>
 </template>
 
 <script>
+import Wind from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue";
+import Photovoltaic from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue";
 export default {
   name: "WindAndPhotovoltaic", //风光资源分析
+  components: { Wind, Photovoltaic },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.windAndPhotovoltaic {
+  height: 100%;
+  width: 100%;
+  padding: 0 20px;
+}
+</style>

src/views/economicsOperation/thematicAnalysis/MTBF/index.vue

@@ -191,7 +191,8 @@
 <script>
 // import Panel from "@/components/curveAnalyse/panel.vue";
 // import ChartColumnar from '@/components/curveAnalyse/multiple-bar-chart.vue'
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, mtbfList, mttrList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/MTTR/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, mttrList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/affected/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, slsslList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/components/barCharts.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="chart" :id="id" :style="{ width, height }"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+export default {
+  name: "multiple-bar-chart",
+  componentName: "multiple-bar-chart",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "13.889vh",
+    },
+    pillarName: {
+      type: String,
+      default: "",
+    },
+    top: {
+      type: Number,
+      default: 30,
+    },
+    interval: {
+      type: Number,
+      default: 0,
+    },
+    padding: {
+      type: Array,
+      default: () => [10, 10],
+    },
+    // 传入数据
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    // 单位
+    units: {
+      type: Array,
+      default: () => ["(万KWh)", ""],
+    },
+    // 显示 legend
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // X轴是否为时间
+    xdate: {
+      type: Boolean,
+      default: true,
+    },
+    // 颜色#
+    color: {
+      type: Array,
+      default: () => ["#05bb4c", "#1b92f4"],
+    },
+    showAnimation: {
+      type: Boolean,
+      default: true,
+    },
+    colorIndex: {
+      type: Boolean,
+      default: false,
+    },
+    // 柱子最大宽度
+    barMaxWidth: {
+      type: Number || String,
+      default: 0,
+    },
+    // 柱子间距
+    barGap: {
+      type: Number || String,
+      default: 0,
+    },
+    dataInterval: {
+      type: String,
+      default: "D",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+    };
+  },
+  computed: {
+    legend() {
+      return this.list.map((t) => {
+        return t.name;
+      });
+    },
+    xdata() {
+      let result = [];
+      if (this.list && this.list.length > 0) {
+        result = this.list[0].date.map((t) => {
+          if (this.dataInterval === "M") {
+            return dayjs(t).format("YYYY-MM");
+          } else if (this.dataInterval === "Y") {
+            return dayjs(t).format("YYYY");
+          } else {
+            return this.xdate ? dayjs(t).format("MM-DD") : t;
+          }
+        });
+      }
+      return result;
+    },
+    ydata() {
+      let result = [];
+      this.units.forEach((value, index) => {
+        let data = null;
+        if (index == 0) {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value} ",
+              fontSize: 12,
+              textStyle: {
+                color: "#828484",
+              },
+            },
+            //分格线
+            splitLine: {
+              lineStyle: {
+                color: "rgba(96,103,105,0.3)",
+                type: "dashed",
+              },
+            },
+          };
+        } else {
+          data = {
+            type: "value",
+            name: value,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: 12,
+              textStyle: {
+                color: "#828484",
+              },
+            },
+            //分格线
+            splitLine: {
+              show: false,
+            },
+          };
+        }
+
+        result.push(data);
+      });
+
+      return result;
+    },
+    series() {
+      let result = [];
+      if (this.list && this.list.length > 0) {
+        this.list.forEach((value, index) => {
+          let seriesItem = {
+            name: value.name,
+            type: "bar",
+            barWidth: "12",
+            animation: this.firstAnimation && this.showAnimation,
+            yAxisIndex: value.yAxisIndex,
+            itemStyle: {
+              borderColor: this.color[index],
+              borderWidth: 1,
+              // shadowBlur: 1,
+              // shadowColor: "#16ADD4",
+            },
+            data: value.children,
+          };
+          result.push(seriesItem);
+        });
+      }
+      return result;
+    },
+  },
+  methods: {
+    resize() {
+      this.initChart();
+    },
+    initChart() {
+      let chart = echarts.init(this.$el);
+      let option = {
+        color: this.color,
+
+        title: {
+          text: this.pillarName,
+          textStyle: {
+            color: "#999999",
+            fontSize: 18,
+          },
+        },
+        zoom: 12,
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          borderWidth: 1,
+          padding: [10, 10, 3, 10],
+          borderColor: "#05bb4c",
+          textStyle: {
+            color: "#fff",
+            fontSize: 12,
+          },
+          axisPointer: {
+            type: "shadow",
+            shadowStyle: {
+              color: "rgba(105,105,105, .05)",
+              width: "1",
+            },
+          },
+        },
+        legend: {
+          show: this.showLegend,
+          data: this.legend,
+          padding: this.padding,
+          right: 56,
+          icon: "ract",
+          itemWidth: 8,
+          itemHeight: 8,
+          inactiveColor: partten.getColor("gray"),
+          textStyle: {
+            fontSize: 12,
+            color: partten.getColor("grayl"),
+          },
+        },
+        grid: {
+          top: 40,
+          left: 10,
+          right: 15,
+          bottom: 10,
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.xdata,
+            nameLocation: "center",
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              interval: this.interval,
+              fontSize: 12,
+              textStyle: {
+                color: "rgb(116,124,128)",
+              },
+            },
+          },
+        ],
+        yAxis: this.ydata,
+        series: this.series,
+      };
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.$nextTick(() => {
+      this.id = "pie-chart-" + util.newGUID();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      //   this.$el.style.width = this.width;
+      //   this.$el.style.height = this.height;
+      this.initChart();
+      this.firstAnimation = false;
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
+};
+</script>
+
+<style lang="less">
+// .chart {
+//   width: 100%;
+//   height: 100%;
+//   display: inline-block;
+// }
+</style>

src/views/economicsOperation/thematicAnalysis/defect/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, xqjslList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/failure/index.vue

@@ -191,7 +191,8 @@
 <script>
 // import Panel from "@/components/curveAnalyse/panel.vue";
 // import ChartColumnar from '@/components/curveAnalyse/multiple-bar-chart.vue'
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 // import { companys, fnlylList, gzsslList, whsslList, xdsslList, xnsslList, slsslList } from '@/api/curveAnalyse'
 import {
   companys,

src/views/economicsOperation/thematicAnalysis/generation/index.vue

@@ -191,8 +191,14 @@
 <script>
 // import Panel from "@/components/curveAnalyse/panel.vue";
 // import ChartColumnar from '@/components/curveAnalyse/multiple-bar-chart.vue'
-import BarCharts from "../../homePage/components/barCharts.vue";
-import { companys, fdlList, zhcydlList } from "@/api/curveAnalyse";
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
+import {
+  companys,
+  fdlList,
+  zhcydlList,
+  gwdlList,
+  swdlList,
+} from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",
   components: {
@@ -248,7 +254,13 @@ export default {
           name: "发电量分析",
         },
         {
-          name: "综合厂用电量",
+          name: "综合场用电量",
+        },
+        {
+          name: "上网电量",
+        },
+        {
+          name: "购网电量",
         },
       ],
       selectValue: "发电量分析",
@@ -318,7 +330,7 @@ export default {
           });
           break;
 
-        case "综合厂用电量":
+        case "综合场用电量":
           zhcydlList({
             companys: this.company,
             type: this.tabIndex,
@@ -340,6 +352,50 @@ export default {
             }
           });
           break;
+        case "上网电量":
+          swdlList({
+            companys: this.company,
+            type: this.tabIndex,
+            year: this.monthChange(this.searchYear),
+          }).then(({ data: res }) => {
+            if (res.data) {
+              let arr = [
+                {
+                  wpname: "",
+                  data: {
+                    wpname: "期次",
+                    current: "本期",
+                    sameperiod: "同期",
+                  },
+                },
+              ];
+              this.tableData = [...arr, ...res.data];
+              this.rowClick(res.data[res.data.length - 1]);
+            }
+          });
+          break;
+        case "购网电量":
+          gwdlList({
+            companys: this.company,
+            type: this.tabIndex,
+            year: this.monthChange(this.searchYear),
+          }).then(({ data: res }) => {
+            if (res.data) {
+              let arr = [
+                {
+                  wpname: "",
+                  data: {
+                    wpname: "期次",
+                    current: "本期",
+                    sameperiod: "同期",
+                  },
+                },
+              ];
+              this.tableData = [...arr, ...res.data];
+              this.rowClick(res.data[res.data.length - 1]);
+            }
+          });
+          break;
       }
     },
     monthChange(data) {
@@ -353,7 +409,14 @@ export default {
 
     tabClick(data) {
       this.tabIndex = data;
-      this.search();
+
+      if (data == -2) {
+        this.company = "SXJ_KGDL_GFFD_ZGS";
+        this.search();
+      } else {
+        this.company = this.companyOptions[0].id;
+        this.search();
+      }
     },
     initialization() {
       companys().then(({ data: res }) => {
@@ -424,7 +487,6 @@ export default {
         margin-left: 25px;
       }
     }
-
   }
 
   .search {

src/views/economicsOperation/thematicAnalysis/maintain/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, whsslList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/property/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, xnsslList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/ration/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, xdsslList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/reset/index.vue

@@ -204,7 +204,8 @@
 <script>
 // import Panel from "@/components/curveAnalyse/panel.vue";
 // import ChartColumnar from '@/components/curveAnalyse/multiple-bar-chart.vue'
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import {
   companys,
   fwjslList,

src/views/economicsOperation/thematicAnalysis/state/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, ztzhlList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/synthesize/index.vue

@@ -159,7 +159,8 @@
 <script>
 import Panel from "@/components/curveAnalyse/panel.vue";
 import ChartColumnar from "@/components/curveAnalyse/multiple-bar-chart.vue";
-import BarCharts from "../../homePage/components/barCharts.vue";
+
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, zhcydlList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/economicsOperation/thematicAnalysis/windEnergy/index.vue

@@ -175,7 +175,7 @@
 </template>
 
 <script>
-import BarCharts from "../../homePage/components/barCharts.vue";
+import BarCharts from "@/views/economicsOperation/thematicAnalysis/components/barCharts.vue";
 import { companys, fnlylList } from "@/api/curveAnalyse";
 export default {
   name: "curveAnalyse",

src/views/stateMonitor/factoryMonitor/photovoltaic/lighthome/index.vue

@@ -77,7 +77,7 @@
             style="width: 100%; height: calc(100% - 39px); margin-top: 10px"
             v-if="showFlag"
           >
-           <power-echarts
+            <power-echarts
               :CurveValues="powerList"
               width="100%"
               unit="MW"
@@ -629,7 +629,7 @@ export default {
               value: this.wpInfos.sspjfsgzd.toFixed(2),
               dialogTitle: "光照强度",
               max: 3000,
-              unit: "m/s",
+              unit: "W/m²",
             },
             {
               title: "有功功率",