+ 设备分析，告警分析

ems-ui/src/assets/styles/index.scss

@@ -181,3 +181,10 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

ems-ui/src/components/Block/block.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+      class="grid-content bg-purple"
+      v-resize='onResize'
+  >
+    <div class="grid-title">{{ title }}</div>
+    <div class="grid-main-content">
+      <slot name="main"></slot>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+export default {
+  props: {
+    title: {
+      default: '标题',
+      type: String,
+    },
+    onResize: {
+      type: Function,
+      default: () => {
+        return () => {
+        };
+      },
+    },
+  },
+};
+</script>
+<style src="./index.scss" lang="scss" />

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

@@ -0,0 +1,114 @@
+<template>
+  <block :title="title" :on-resize='initChart'>
+    <template v-slot:main>
+      <div class="filters">
+        <slot name="filters"></slot>
+      </div>
+      <div class="grid-chart" :id="id">
+
+      </div>
+    </template>
+  </block>
+</template>
+
+<script>
+
+import Block from '@/components/Block/block.vue';
+import { copyObj, uuid } from '@/utils';
+import * as echarts from 'echarts';
+import SwitchTag from '../../SwitchTag/index.vue';
+
+const basicSerie = {
+  type: 'bar',
+  label: {
+    show: true,
+  },
+  stack: '总量',
+  data: [],
+};
+const opts = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  legend: {
+    data: [],
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisTick: {
+      alignWithLabel: true,
+    },
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [],
+};
+export default {
+  components: {
+    Block,
+    SwitchTag,
+  },
+  props: {
+    title: {
+      default: '标题',
+      type: String,
+    },
+    optCfg: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  watch: {
+    optCfg: {
+      handler(val) {
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      id: uuid(),
+      refCharts: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(this.initChart);
+  },
+  created() {
+  },
+  methods: {
+    initChart() {
+      this.refCharts && this.refCharts.clear();
+      const chartDom = document.getElementById(this.id);
+      this.refCharts = echarts.init(chartDom);
+      const option = copyObj(opts);
+      const legend = [];
+      this.optCfg.series.forEach((item, index) => {
+        const serie = copyObj(basicSerie);
+        Object.assign(serie, item);
+        option.series.push(serie);
+        legend.push(item.name);
+      });
+      option.legend.data = legend;
+      option.xAxis.data = this.optCfg.categories;
+      option && this.refCharts && this.refCharts.setOption(option);
+      this.refCharts.resize();
+    },
+  },
+};
+</script>
+<style src="./index.scss" lang="scss" />

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

@@ -5,14 +5,9 @@
   >
     <div class="grid-title">{{ title }}</div>
     <div class="filters">
-      <SwitchTag
-          :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
-          :defTag="{val: defTag}"
-          :tagClick="onSwitchTagClick"
-      />
+      <slot name="filters"></slot>
     </div>
     <div class="grid-chart" :id="id">
-
     </div>
   </div>
 
@@ -65,16 +60,6 @@ export default {
       default: '标题',
       type: String,
     },
-    defTag: {
-      default: 'day',
-      type: String,
-    },
-    onFilter: {
-      type: Function,
-      default: () => {
-        return {};
-      },
-    },
     optCfg: {
       type: Object,
       default: () => {
@@ -102,21 +87,18 @@ export default {
   created() {
   },
   methods: {
-    onSwitchTagClick(item) {
-      console.log(item);
-      this.onFilter(item);
-    },
     initChart() {
       this.refCharts && this.refCharts.clear();
       const chartDom = document.getElementById(this.id);
       this.refCharts = echarts.init(chartDom);
       const option = copyObj(opts);
       this.optCfg.series.forEach((item, index) => {
-        const serie = { ...basicSerie };
+        const serie = copyObj(basicSerie);
         Object.assign(serie, item);
         option.series.push(serie);
       });
       option.xAxis = this.optCfg.xAxis;
+      option.yAxis.name = this.optCfg.unit || "kw·h"
       option && this.refCharts && this.refCharts.setOption(option);
       this.refCharts.resize();
     },

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

@@ -0,0 +1,102 @@
+<template>
+  <block :title="title" :on-resize='initChart'>
+    <template v-slot:main>
+      <div class="filters">
+        <slot name="filters"></slot>
+      </div>
+      <div class="grid-chart" :id="id">
+
+      </div>
+    </template>
+  </block>
+</template>
+
+<script>
+
+import Block from '@/components/Block/block.vue';
+import { copyObj, uuid } from '@/utils';
+import * as echarts from 'echarts';
+import SwitchTag from '../../SwitchTag/index.vue';
+
+const basicSerie = {
+  type: 'pie',
+  radius: ['50%', '70%'],
+  center: ['50%', '60%'],
+  data: [],
+};
+const opts = {
+  tooltip: {
+    trigger: 'item',
+  },
+  legend: {
+    top: 0,
+    left: 'center',
+  },
+  emphasis: {
+    itemStyle: {
+      shadowBlur: 10,
+      shadowOffsetX: 0,
+      shadowColor: 'rgba(0, 0, 0, 0.5)'
+    }
+  },
+  label: {
+    show: true,
+    position: 'outside',
+    formatter: '{c}' // 显示名称、值和百分比 {b}: {c} ({d}%)
+  },
+  labelLine: {
+    show: true
+  },
+  series: [],
+};
+export default {
+  components: { Block, SwitchTag },
+  props: {
+    title: {
+      default: '标题',
+      type: String,
+    },
+    optCfg: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  watch: {
+    optCfg: {
+      handler(val) {
+        this.initChart();
+      },
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      id: uuid(),
+      refCharts: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(this.initChart);
+  },
+  created() {
+  },
+  methods: {
+    initChart() {
+      this.refCharts && this.refCharts.clear();
+      const chartDom = document.getElementById(this.id);
+      this.refCharts = echarts.init(chartDom);
+      const option = copyObj(opts);
+      this.optCfg.series.forEach((item, index) => {
+        const serie = copyObj(basicSerie);
+        Object.assign(serie, item);
+        option.series.push(serie);
+      });
+      option && this.refCharts && this.refCharts.setOption(option);
+      this.refCharts.resize();
+    },
+  },
+};
+</script>
+<style src="./index.scss" lang="scss" />

ems-ui/src/components/Block/charts/index.scss

@@ -1,35 +1,9 @@
 @import "src/assets/styles";
 
 .grid-content {
-  height: 38vh;
-  display: flex;
-  background: $bg-color;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-
-  > div {
-    width: 100%;
-  }
-
-  .grid-title {
-    font-weight: bolder;
-    font-size: 24px;
-    box-sizing: border-box;
-    padding: 10px;
-  }
-
-  .filters {
-    box-sizing: border-box;
-    padding: 0 10px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
   .grid-chart {
-    height: calc(100% - 100px);
+    flex-grow: 1;
+    width: 100%;
   }
 }
 

ems-ui/src/components/Block/index.scss

@@ -0,0 +1,40 @@
+@import "src/assets/styles";
+
+.grid-content {
+  height: 38vh;
+  display: flex;
+  background: $bg-color;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+
+  > div {
+    width: 100%;
+  }
+
+  .grid-title {
+    font-weight: 400;
+    color: #000000d9;
+    font-size: 20px;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+
+  .filters {
+    box-sizing: border-box;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .grid-main-content {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+}
+

ems-ui/src/views/analysis/device/DevcWarning/img/icon_waring.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1723023867267" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10780" xmlns:xlink="http://www.w3.org/1999/xlink" width="48.328125" height="48"><path d="M518.4 678.4c-19.2 0-32-12.8-32-32L486.4 384c0-19.2 12.8-32 32-32S550.4 364.8 550.4 384l0 262.4C550.4 659.2 537.6 678.4 518.4 678.4z" fill="#ffffff" p-id="10781"></path><path d="M518.4 774.4m-44.8 0a0.7 0.7 0 1 0 89.6 0 0.7 0.7 0 1 0-89.6 0Z" fill="#ffffff" p-id="10782"></path><path d="M992 960C992 960 992 960 992 960l-960 0c-12.8 0-19.2-6.4-25.6-19.2-6.4-12.8-6.4-19.2 0-32l480-832c12.8-19.2 44.8-19.2 57.6 0l480 825.6c6.4 6.4 6.4 12.8 6.4 19.2C1024 947.2 1011.2 960 992 960zM89.6 896l851.2 0L512 160 89.6 896z" fill="#ffffff" p-id="10783"></path></svg>

ems-ui/src/views/analysis/device/DevcWarning/index.scss

@@ -0,0 +1,61 @@
+@import "src/assets/styles";
+
+.device-waring-container {
+  flex-grow: 1;
+  width: 100%;
+
+  .index-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .index-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 50px;
+      background: url(./img/icon_waring.svg) no-repeat 50% 40%;
+      background-size: 50%;
+      margin-right: 14px;
+
+      &.index-emergent {
+        background-color: rgba(255, 0, 0, 1);
+      }
+
+      &.index-minor {
+        background-color: rgba(255, 165, 0, 1);
+      }
+
+      &.index-warning {
+        background-color: rgba(255, 165, 0, 1);
+      }
+
+      &.index-important {
+        background-color: rgb(255, 78, 78);
+      }
+    }
+
+    .index-info {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .index-label {
+        font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+        color: #515a6e;
+        font-size: 20px;
+        margin-bottom: 10px;
+      }
+
+      .index {
+        font-size: 10px;
+
+        .index-num {
+          font-size: 20px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+

ems-ui/src/views/analysis/device/DevcWarning/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <Block title="告警总数">
+    <template v-slot:main>
+      <div class="device-waring-container">
+        <el-row type="flex" style="height: 50%">
+          <el-col class="flex-col" :span="12">
+            <div class="index-content">
+              <div class="index-icon index-emergent"></div>
+              <div class="index-info">
+                <div class="index-label">紧急</div>
+                <div class="index">
+                  <span class="index-num">10</span>
+                  次
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col class="flex-col" :span="12" >
+            <div class="index-content">
+              <div class="index-icon index-important"></div>
+              <div class="index-info">
+                <div class="index-label">重要</div>
+                <div class="index">
+                  <span class="index-num">2</span>
+                  次
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row type="flex" style="height: 50%">
+          <el-col class="flex-col" :span="12">
+            <div class="index-content">
+              <div class="index-icon index-minor"></div>
+              <div class="index-info">
+                <div class="index-label">次要</div>
+                <div class="index">
+                  <span class="index-num">110</span>
+                  次
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col class="flex-col" :span="12">
+            <div class="index-content">
+              <div class="index-icon index-warning"></div>
+              <div class="index-info">
+                <div class="index-label">警告</div>
+                <div class="index">
+                  <span class="index-num">10</span>
+                  次
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </template>
+  </Block>
+</template>
+
+<script>
+import Block from '@/components/Block/block.vue';
+
+export default {
+  components: { Block },
+  name: 'DeviceWaring',
+  data() {
+    return {};
+  },
+  mounted() {
+    this.initData();
+  },
+  created() {
+  },
+  methods: {
+    async initData() {
+    },
+  },
+};
+</script>
+<style src="./index.scss" lang="scss" />

ems-ui/src/views/analysis/device/index.scss

@@ -0,0 +1,16 @@
+@import "src/assets/styles";
+
+.power-index-content {
+  background: rgba(245, 247, 249, 1);
+
+  .gl-filters {
+    height: 50px;
+    background: $bg-color;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    padding: 0 10px;
+  }
+}
+

ems-ui/src/views/analysis/device/index.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="app-container power-index-content">
+    <el-row type="flex" :gutter="20">
+      <el-col :span="24">
+        <div class="gl-filters">
+          <SwitchTag
+              :ds="areaTag"
+              :def-tag="defArea"
+              :tagClick="onSwitchTagClick"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <el-row type="flex" :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <BarChartBlock
+            title="设备数量统计"
+            :opt-cfg="devcNum"
+        />
+      </el-col>
+      <el-col :span="12">
+        <PieChartBlock title="设备状态统计" :opt-cfg="devcStat"></PieChartBlock>
+      </el-col>
+    </el-row>
+    <el-row type="flex" :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <PieChartBlock title="供应商占比" :opt-cfg="supplyerIndex"></PieChartBlock>
+      </el-col>
+      <el-col :span="12">
+        <LineChartBlock title="故障发生情况" :opt-cfg="devcFault" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import { ApiCode } from '@/api/apiEmums';
+import { get } from '@/api/commonApi';
+import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
+import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
+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';
+
+export default {
+  components: {
+    BarChartBlock,
+    PieChartBlock,
+    LineChartBlock,
+    SwitchTag,
+  },
+  data() {
+    return {
+      areaTag: [],
+      defArea: {},
+      devcStat: {
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            data: [
+              {
+                value: 8,
+                name: '故障',
+              },
+              {
+                value: 75,
+                name: '运行',
+              },
+              {
+                value: 2,
+                name: '未运行',
+              },
+            ],
+          },
+        ],
+      },
+      supplyerIndex: {
+        series: [
+          {
+            type: 'pie',
+            radius: ['0%', '70%'],
+            data: [
+              {
+                value: 7,
+                name: '西门子',
+              },
+              {
+                value: 6,
+                name: '施耐德',
+              },
+              {
+                value: 9,
+                name: '通用电器',
+              },
+              {
+                value: 14,
+                name: '飞利浦',
+              },
+              {
+                value: 18,
+                name: '霍尼韦尔',
+              },
+            ],
+          },
+        ],
+      },
+      devcNum: {
+        categories: ['空调', '灯具', '杀菌设备', '出纳机', '感应器'],
+        series: [
+          {
+            name: '故障',
+            data: [1, 0, 0, 1, 1],
+          },
+          {
+            name: '运行',
+            data: [20, 109, 20, 20, 10],
+          },
+          {
+            name: '未运行',
+            data: [1, 2, 4, 0, 1],
+          },
+        ],
+      },
+      devcFault: {
+        unit:"  ",
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '1月',
+            '2月',
+            '03月',
+            '04月',
+            '05月',
+            '06月',
+            '07月',
+            '08月',
+          ],
+        },
+        series: [
+          {
+            data: [
+              73, 57, 37, 40, 37, 40, 73, 57,
+            ],
+            type: 'line',
+            areaStyle: {
+              color: '#d7e4fc',
+              emphasis: {
+                color: '#6093f5',
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  created() {
+  },
+  methods: {
+    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" />

ems-ui/src/views/analysis/device/warn.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="app-container power-index-content">
+    <el-row type="flex" :gutter="20">
+      <el-col :span="24">
+        <div class="gl-filters">
+          <SwitchTag
+              :ds="areaTag"
+              :def-tag="defArea"
+              :tagClick="onSwitchTagClick"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <DeviceWaring />
+      </el-col>
+      <el-col :span="12">
+        <PieChartBlock title="设备状态统计" :opt-cfg="devcStat"></PieChartBlock>
+      </el-col>
+    </el-row>
+    <el-row type="flex" :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <PieChartBlock title="供应商占比" :opt-cfg="supplyerIndex"></PieChartBlock>
+      </el-col>
+      <el-col :span="12">
+        <LineChartBlock title="故障发生情况" :opt-cfg="devcFault" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import { ApiCode } from '@/api/apiEmums';
+import { get } from '@/api/commonApi';
+import Block from '@/components/Block/block.vue';
+import BarChartBlock from '@/components/Block/charts/BarChartBlock.vue';
+import PieChartBlock from '@/components/Block/charts/PieChartBlock.vue';
+import { DateTool } from '@/utils/DateTool';
+import DeviceWaring from '@/views/analysis/device/DevcWarning/index.vue';
+import * as areaApi from '../../../api/basecfg/area';
+import LineChartBlock from '../../../components/Block/charts/LineChartBlock.vue';
+import SwitchTag from '../../../components/SwitchTag/index.vue';
+
+export default {
+  components: {
+    DeviceWaring,
+    Block,
+    BarChartBlock,
+    PieChartBlock,
+    LineChartBlock,
+    SwitchTag,
+  },
+  data() {
+    return {
+      areaTag: [],
+      defArea: {},
+      devcStat: {
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            data: [
+              {
+                value: 8,
+                name: '故障',
+              },
+              {
+                value: 75,
+                name: '运行',
+              },
+              {
+                value: 2,
+                name: '未运行',
+              },
+            ],
+          },
+        ],
+      },
+      supplyerIndex: {
+        series: [
+          {
+            type: 'pie',
+            radius: ['0%', '70%'],
+            data: [
+              {
+                value: 7,
+                name: '西门子',
+              },
+              {
+                value: 6,
+                name: '施耐德',
+              },
+              {
+                value: 9,
+                name: '通用电器',
+              },
+              {
+                value: 14,
+                name: '飞利浦',
+              },
+              {
+                value: 18,
+                name: '霍尼韦尔',
+              },
+            ],
+          },
+        ],
+      },
+      devcNum: {
+        categories: ['空调', '灯具', '杀菌设备', '出纳机', '感应器'],
+        series: [
+          {
+            name: '故障',
+            data: [1, 0, 0, 1, 1],
+          },
+          {
+            name: '运行',
+            data: [20, 109, 20, 20, 10],
+          },
+          {
+            name: '未运行',
+            data: [1, 2, 4, 0, 1],
+          },
+        ],
+      },
+      devcFault: {
+        unit: '  ',
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: [
+            '1月',
+            '2月',
+            '03月',
+            '04月',
+            '05月',
+            '06月',
+            '07月',
+            '08月',
+          ],
+        },
+        series: [
+          {
+            data: [
+              73, 57, 37, 40, 37, 40, 73, 57,
+            ],
+            type: 'line',
+            areaStyle: {
+              color: '#d7e4fc',
+              emphasis: {
+                color: '#6093f5',
+              },
+            },
+          },
+        ],
+      },
+    };
+  },
+  mounted() {
+    this.initData();
+  },
+  created() {
+  },
+  methods: {
+    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" />

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

@@ -17,22 +17,54 @@
             title="发电量"
             :on-filter="getPvList"
             :opt-cfg="pvData"
-        />
+        >
+          <template v-slot:filters>
+            <SwitchTag
+                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
+                :defTag="{val: 'day'}"
+                :tagClick="getPvList"
+            />
+          </template>
+        </LineChartBlock>
       </el-col>
       <el-col :span="12">
         <LineChartBlock
             title="发电功率"
             :on-filter="()=>{}"
             :opt-cfg="pvPower"
-        />
+        >
+          <template v-slot:filters>
+            <SwitchTag
+                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
+                :defTag="{val: 'day'}"
+                :tagClick="getPvList"
+            />
+          </template>
+        </LineChartBlock>
       </el-col>
     </el-row>
     <el-row type="flex" :gutter="20" style="margin-top: 20px">
       <el-col :span="12">
-        <LineChartBlock title="发电效率" :on-filter="()=>{}" :opt-cfg="pvEff" />
+        <LineChartBlock title="发电效率" :on-filter="()=>{}" :opt-cfg="pvEff">
+          <template v-slot:filters>
+            <SwitchTag
+                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
+                :defTag="{val: 'day'}"
+                :tagClick="getPvList"
+            />
+          </template>
+        </LineChartBlock>
       </el-col>
       <el-col :span="12">
-        <LineChartBlock title="近七天发电趋势分析" :on-filter="()=>{}" :opt-cfg="pvWeek" />
+        <LineChartBlock title="近七天发电趋势分析" :on-filter="()=>{}" :opt-cfg="pvWeek">
+          <template v-slot:filters>
+            <SwitchTag
+                :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
+                :defTag="{val: 'day'}"
+                :tagClick="getPvList"
+            />
+          </template>
+        </LineChartBlock>
       </el-col>
     </el-row>
   </div>