+ 产能分析功能模块

ems-ui/jsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": [
+                "src/*"
+            ]
+        }
+    },
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

ems-ui/package.json

@@ -40,6 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "^3.25.3",
+    "dayjs": "^1.11.12",
     "echarts": "5.4.0",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",

ems-ui/src/api/analysis/prod.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+
+// 查询光伏并网计量光伏并网计量-小时列表
+export function listProd(query) {
+  return request({
+    url: '/ems/prod/list',
+    method: 'get',
+    params: query,
+  });
+}

ems-ui/src/api/apiEmums.js

@@ -0,0 +1,86 @@
+export const ApiCode = {
+  /**
+   * 操作成功
+   */
+  SUCCESS: 200,
+
+  /**
+   * 对象创建成功
+   */
+  CREATED: 201,
+
+  /**
+   * 请求已经被接受
+   */
+  ACCEPTED: 202,
+
+  /**
+   * 操作已经执行成功，但是没有返回数据
+   */
+  NO_CONTENT: 204,
+
+  /**
+   * 资源已被移除
+   */
+  MOVED_PERM: 301,
+
+  /**
+   * 重定向
+   */
+  SEE_OTHER: 303,
+
+  /**
+   * 资源没有被修改
+   */
+  NOT_MODIFIED: 304,
+
+  /**
+   * 参数列表错误（缺少，格式不匹配）
+   */
+  BAD_REQUEST: 400,
+
+  /**
+   * 未授权
+   */
+  UNAUTHORIZED: 401,
+
+  /**
+   * 访问受限，授权过期
+   */
+  FORBIDDEN: 403,
+
+  /**
+   * 资源，服务未找到
+   */
+  NOT_FOUND: 404,
+
+  /**
+   * 不允许的http方法
+   */
+  BAD_METHOD: 405,
+
+  /**
+   * 资源冲突，或者资源被锁
+   */
+  CONFLICT: 409,
+
+  /**
+   * 不支持的数据，媒体类型
+   */
+  UNSUPPORTED_TYPE: 415,
+
+  /**
+   * 系统内部错误
+   */
+  ERROR: 500,
+
+  /**
+   * 接口未实现
+   */
+  NOT_IMPLEMENTED: 501,
+
+  /**
+   * 系统警告消息
+   */
+  WARN: 601,
+};

ems-ui/src/api/commonApi.js

@@ -1,4 +1,4 @@
-import request from '@/utils/request'
+import request from '@/utils/request';
 
 // 查询用电分类
 export function getElecValencyType(){
@@ -23,3 +23,11 @@ export function getEmsTag(tagModel){
     method: 'get'
   })
 }
+
+export const get = (uri, param = {}) => {
+  return request({
+    url: `/ems/${uri}`,
+    method: 'get',
+    params: param,
+  });
+};

ems-ui/src/components/Block/charts/LineChartBlock.vue

@@ -20,10 +20,44 @@
 
 <script>
 
+import { copyObj, uuid } from '@/utils';
 import * as echarts from 'echarts';
-import { uuid } from '../../../utils';
 import SwitchTag from '../../SwitchTag/index.vue';
 
+const basicSerie = {
+  type: 'line',
+  areaStyle: {
+    color: '#d7e4fc',
+    emphasis: {
+      color: '#6093f5',
+    },
+  },
+};
+const opts = {
+  grid: {
+    top: 10,
+    bottom: 20,
+  },
+  tooltip: {
+    show: true,
+    trigger: 'axis',
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+  },
+  yAxis: {
+    type: 'value',
+    name: 'kw·h',
+    nameLocation: 'middle',
+    nameTextStyle: {
+      color: '#000',
+      fontSize: '14px',
+      lineHeight: 56,
+    },
+  },
+  series: [],
+};
 export default {
   components: { SwitchTag },
   props: {
@@ -41,6 +75,20 @@ export default {
         return {};
       },
     },
+    optCfg: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  watch: {
+    optCfg: {
+      handler(val) {
+        this.initChart();
+      },
+      deep: true,
+    },
   },
   data() {
     return {
@@ -62,71 +110,13 @@ export default {
       this.refCharts && this.refCharts.clear();
       const chartDom = document.getElementById(this.id);
       this.refCharts = echarts.init(chartDom);
-      const option = {
-        grid: {
-          top: 10,
-          bottom: 20,
-        },
-        tooltip: {
-          show: true,
-          trigger: 'axis',
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: [
-            '00:00',
-            '01:00',
-            '02:00',
-            '03:00',
-            '04:00',
-            '05:00',
-            '06:00',
-            '07:00',
-            '08:00',
-            '09:00',
-            '10:00',
-            '11:00',
-            '12:00',
-            '13:00',
-            '14:00',
-            '15:00',
-            '16:00',
-            '17:00',
-            '18:00',
-            '19:00',
-            '20:00',
-            '21:00',
-            '22:00',
-            '23:00',
-          ],
-        },
-        yAxis: {
-          type: 'value',
-          name: 'kw·h',
-          nameLocation: 'middle',
-          nameTextStyle: {
-            color: '#000',
-            fontSize: '14px',
-            lineHeight: 56,
-          },
-        },
-        series: [
-          {
-            data: [
-              735, 577, 377, 403, 377, 400, 239, 500, 550, 600, 800, 900, 991, 980,
-              990, 600, 540, 500, 600, 700, 789, 790, 500, 450, 400,
-            ],
-            type: 'line',
-            areaStyle: {
-              color: '#d7e4fc',
-              emphasis: {
-                color: '#6093f5',
-              },
-            },
-          },
-        ],
-      };
+      const option = copyObj(opts);
+      this.optCfg.series.forEach((item, index) => {
+        const serie = { ...basicSerie };
+        Object.assign(serie, item);
+        option.series.push(serie);
+      });
+      option.xAxis = this.optCfg.xAxis;
       option && this.refCharts && this.refCharts.setOption(option);
       this.refCharts.resize();
     },

ems-ui/src/components/SwitchTag/index.vue

@@ -31,6 +31,11 @@ export default {
       },
     },
   },
+  watch: {
+    defTag(newVal, oldVal) {
+      this.selectTag = newVal;
+    },
+  },
   data() {
     return {
       selectTag: this.defTag,

ems-ui/src/utils/DateTool.js

@@ -0,0 +1,47 @@
+import dayjs from 'dayjs';
+
+const isSameOrBefore = require('dayjs/plugin/isSameOrBefore');
+dayjs.extend(isSameOrBefore);
+export const DateTool = {
+  DateFormat: {
+    YYYY: 'YYYY',
+    YYYY_MM: 'YYYY-MM',
+    YYYY_MM_DD: 'YYYY-MM-DD',
+    YYYY_MM_DD_HH_mm: 'YYYY-MM-DD HH:mm',
+    YYYY_MM_DD_HH_mm_ss: 'YYYY-MM-DD HH:mm:ss',
+    YYYY_MM_DD_HH_mm_ss_SSS: 'YYYY-MM-DD HH:mm:ss.SSS',
+    YYYYMMDD: 'YYYYMMDD',
+    YYYYMMDDHHmmss: 'YYYYMMDDHHmmss',
+  },
+  /**
+   * 获取当天时间刻度
+   * @param timeSplit 单位分钟
+   */
+  getTime: function (timeSplit = 5) {
+    const now = dayjs();
+    let zero = dayjs().startOf('date');
+    const result = [];
+    while (zero.isSameOrBefore(now)) {
+      result.push(zero.format('HH:mm'));
+      zero = zero.add(timeSplit, 'minute');
+    }
+    return result;
+  },
+
+  /**
+   * 获取一段时间的日期
+   * @param start 开始时间
+   * @param end 结束时间
+   * @param format
+   */
+  getDayOfRange: function (start, end, format = this.DateFormat.YYYY_MM_DD) {
+    const dates = [];
+    let current = dayjs(start);
+    while (current.isSameOrBefore(end)) {
+      dates.push(current.format(format));
+      current = current.add(1, 'day');
+    }
+    return dates;
+  },
+
+};

ems-ui/src/utils/index.js

@@ -1,5 +1,6 @@
-import { parseTime } from './ruoyi'
 import { UUID } from 'uuidjs';
+import { parseTime } from './ruoyi';
+
 /**
  * 表格时间格式化
  */
@@ -391,3 +392,12 @@ export function isNumberStr(str) {
 export const uuid = () => {
   return UUID.generate();
 };
+
+/**
+ * 对象浅拷贝，防止嵌套对象的引用还是原来的对象
+ * @param obj
+ * @returns {any}
+ */
+export const copyObj = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};

ems-ui/src/views/analysis/power/prod.vue

@@ -4,7 +4,8 @@
       <el-col :span="24">
         <div class="gl-filters">
           <SwitchTag
-              :ds="[{val: 'all', text: '全部'},{val: 'south', text: '南区'},{val: 'north', text: '北区'}]"
+              :ds="areaTag"
+              :def-tag="defArea"
               :tagClick="onSwitchTagClick"
           />
         </div>
@@ -12,18 +13,26 @@
     </el-row>
     <el-row type="flex" :gutter="20" style="margin-top: 20px">
       <el-col :span="12">
-        <LineChartBlock title="发电量" :on-filter="()=>{}" />
+        <LineChartBlock
+            title="发电量"
+            :on-filter="getPvList"
+            :opt-cfg="pvData"
+        />
       </el-col>
       <el-col :span="12">
-        <LineChartBlock title="发电功率" :on-filter="()=>{}" />
+        <LineChartBlock
+            title="发电功率"
+            :on-filter="()=>{}"
+            :opt-cfg="pvPower"
+        />
       </el-col>
     </el-row>
     <el-row type="flex" :gutter="20" style="margin-top: 20px">
       <el-col :span="12">
-        <LineChartBlock title="发电效率" :on-filter="()=>{}" />
+        <LineChartBlock title="发电效率" :on-filter="()=>{}" :opt-cfg="pvEff" />
       </el-col>
       <el-col :span="12">
-        <LineChartBlock title="近七天发电趋势分析" :on-filter="()=>{}" />
+        <LineChartBlock title="近七天发电趋势分析" :on-filter="()=>{}" :opt-cfg="pvWeek" />
       </el-col>
     </el-row>
   </div>
@@ -31,7 +40,10 @@
 
 <script>
 
-import * as echarts from 'echarts';
+import { ApiCode } from '@/api/apiEmums';
+import { get } from '@/api/commonApi';
+import { DateTool } from '@/utils/DateTool';
+import * as areaApi from '../../../api/basecfg/area';
 import LineChartBlock from '../../../components/Block/charts/LineChartBlock.vue';
 import SwitchTag from '../../../components/SwitchTag/index.vue';
 
@@ -41,10 +53,154 @@ export default {
     SwitchTag,
   },
   data() {
-    return {};
+    return {
+      areaTag: [],
+      defArea: {},
+      pvData: {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [],
+        },
+        series: [
+          {
+            data: [],
+            type: 'line',
+            areaStyle: {
+              color: '#d7e4fc',
+              emphasis: {
+                color: '#6093f5',
+              },
+            },
+          },
+        ],
+      },
+      pvPower: {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '00:00',
+            '01:00',
+            '02:00',
+            '03:00',
+            '04:00',
+            '05:00',
+            '06:00',
+            '07:00',
+            '08:00',
+            '09:00',
+            '10:00',
+            '11:00',
+            '12:00',
+            '13:00',
+            '14:00',
+            '15:00',
+            '16:00',
+            '17:00',
+            '18:00',
+            '19:00',
+            '20:00',
+            '21:00',
+            '22:00',
+            '23:00',
+          ],
+        },
+        series: [
+          {
+            data: [
+              735, 577, 377, 403, 377, 400, 239, 500, 550, 600, 800, 900, 991, 980,
+              990, 600, 540, 500, 600, 700, 789, 790, 500, 450, 400,
+            ],
+            type: 'line',
+            areaStyle: {
+              color: '#d7e4fc',
+              emphasis: {
+                color: '#6093f5',
+              },
+            },
+          },
+        ],
+      },
+      pvEff: {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '00:00',
+            '01:00',
+            '02:00',
+            '03:00',
+            '04:00',
+            '05:00',
+            '06:00',
+            '07:00',
+            '08:00',
+            '09:00',
+            '10:00',
+            '11:00',
+            '12:00',
+            '13:00',
+            '14:00',
+            '15:00',
+            '16:00',
+            '17:00',
+            '18:00',
+            '19:00',
+            '20:00',
+            '21:00',
+            '22:00',
+            '23:00',
+          ],
+        },
+        series: [
+          {
+            data: [
+              735, 577, 377, 403, 377, 400, 239, 500, 550, 600, 800, 900, 991, 980,
+              990, 600, 540, 500, 600, 700, 789, 790, 500, 450, 400,
+            ],
+            type: 'line',
+            areaStyle: {
+              color: '#d7e4fc',
+              emphasis: {
+                color: '#6093f5',
+              },
+            },
+          },
+        ],
+      },
+      pvWeek: {
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '08-01',
+            '08-02',
+            '08-03',
+            '08-04',
+            '08-05',
+            '08-06',
+          ],
+        },
+        series: [
+          {
+            data: [
+              735, 577, 377, 403, 377, 400,
+            ],
+            type: 'line',
+            areaStyle: {
+              color: '#d7e4fc',
+              emphasis: {
+                color: '#6093f5',
+              },
+            },
+          },
+        ],
+      },
+    };
   },
   mounted() {
-
+    this.initData();
   },
   created() {
   },
@@ -52,7 +208,62 @@ export default {
     onSwitchTagClick(item) {
       console.log(item);
     },
-  },
+    async initData() {
+      const {
+        rows,
+        total,
+      } = await areaApi.listArea({
+        pageNum: 1,
+        pageSize: 10,
+      });
+      if (rows.length > 0) {
+        rows.forEach(item => {
+          this.areaTag.push({
+            val: item.areaCode,
+            text: item.areaName,
+          });
+        });
+        this.defArea = this.areaTag[0];
+      }
+      this.queryCharts();
+    },
+    queryCharts() {
+      this.getPvList();
+    },
+    async getPvList() {
+      const {
+        data,
+        code,
+      } = await get('/prod/list/prod/this/day/index', {
+        areaCode: this.defArea.val,
+      });
+      const result = {};
+      if (ApiCode.SUCCESS !== code || !data || data.length < 1) {
+        return null;
+      }
+      const xAxis = DateTool.getTime(60);
+      data.forEach(item => {
+        const {
+          elecQuantity,
+          timeIndex,
+        } = item;
+        result[timeIndex] = {
+          elecQuantity,
+        };
+      });
+      const chartData = [];
+      xAxis.forEach((item, index) => {
+        const timeIndex = index + 1;
+        if (result[timeIndex]) {
+          chartData.push(result[timeIndex].elecQuantity);
+        } else {
+          chartData.push(0);
+        }
+      });
+      this.pvData.xAxis.data = xAxis;
+      this.pvData.series[0].data = chartData;
+    },
+  }
 };
 </script>
 <style src="./index.scss" lang="scss" />