+ 告警分析

ems-ui/src/api/alarm/alarm-info.js

@@ -1,4 +1,5 @@
-import request from '@/utils/request'
+import { get } from '@/api/commonApi';
+import request from '@/utils/request';
 
 // 查询能源设施告警列表
 export function listAlarmInfo(query) {
@@ -42,3 +43,20 @@ export function delAlarmInfo(id) {
     method: 'delete'
   })
 }
+
+export const fetchAlarmIndex = (params) => {
+  return get('/alarm-info/alarm/type/index', params);
+};
+
+export const fetchAlarmIndexDay = (params) => {
+  return get('/alarm-info/alarm/type/index/day', params);
+};
+
+export const fetchAlarmIndexMonth = (params) => {
+  return get('/alarm-info/alarm/type/index/month', params);
+};
+
+
+export const fetchAlarmIndexYear = (params) => {
+  return get('/alarm-info/alarm/type/index/year', params);
+};

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

@@ -22,6 +22,9 @@ const basicSerie = {
   type: 'line',
 };
 const opts = {
+  legend: {
+    top: '5%',
+  },
   grid: {
     top: 10,
     bottom: 20,
@@ -37,6 +40,7 @@ const opts = {
   yAxis: {
     type: 'value',
     name: 'kw·h',
+    minInterval: 1,
     nameLocation: 'middle',
     nameTextStyle: {
       color: '#000',

ems-ui/src/store/index.js

@@ -1,8 +1,9 @@
+import { userState } from '@/store/modules/userState';
 import Vue from 'vue'
 import Vuex from 'vuex'
 import app from './modules/app'
-import dict from './modules/dict'
 import user from './modules/user'
+import dict from './modules/dict'
 import tagsView from './modules/tagsView'
 import permission from './modules/permission'
 import settings from './modules/settings'
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    userState
   },
   getters
 })

ems-ui/src/store/modules/userState.js

@@ -0,0 +1,18 @@
+export const userState = {
+  namespaced: true,
+  state: {
+    selectedServiceArea: '',
+  },
+
+  mutations: {
+    setSelectedArea: (state, area) => {
+      state.selectedServiceArea = area;
+    }
+  },
+
+  getters: {
+    getSelectedArea(state) {
+      return state.selectedServiceArea;
+    }
+  }
+}

ems-ui/src/utils/DateTool.js

@@ -44,4 +44,16 @@ export const DateTool = {
     return dates;
   },
 
+  getMonthsOfYearAgo: () => {
+    const month = [];
+    const currentDate = dayjs();
+    const oneYearAgo = currentDate.subtract(1, 'year');
+    let currentMonth = oneYearAgo.startOf('month');
+    while (currentMonth.isBefore(currentDate.endOf('month'))) {
+      month.push(currentMonth.format(DateTool.DateFormat.YYYY_MM));
+      currentMonth = currentMonth.add(1, 'month').startOf('month');
+    }
+    return month;
+  },
+
 };

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

@@ -7,21 +7,25 @@
             <div class="index-content">
               <div class="index-icon index-emergent"></div>
               <div class="index-info">
-                <div class="index-label">紧急</div>
+                <div class="index-label">
+                  <dict-tag :options="dict.type.alarm_type" value="3"></dict-tag>
+                </div>
                 <div class="index">
-                  <span class="index-num">10</span>
+                  <span class="index-num">{{ alarmIndex['3'] || 0 }}</span>
                   次
                 </div>
               </div>
             </div>
           </el-col>
-          <el-col class="flex-col" :span="12" >
+          <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-label">
+                  <dict-tag :options="dict.type.alarm_type" value="2"></dict-tag>
+                </div>
                 <div class="index">
-                  <span class="index-num">2</span>
+                  <span class="index-num">{{ alarmIndex['2'] || 0 }}</span>
                   次
                 </div>
               </div>
@@ -33,9 +37,11 @@
             <div class="index-content">
               <div class="index-icon index-minor"></div>
               <div class="index-info">
-                <div class="index-label">次要</div>
+                <div class="index-label">
+                  <dict-tag :options="dict.type.alarm_type" value="1"></dict-tag>
+                </div>
                 <div class="index">
-                  <span class="index-num">110</span>
+                  <span class="index-num">{{ alarmIndex['1'] || 0 }}</span>
                   次
                 </div>
               </div>
@@ -45,9 +51,11 @@
             <div class="index-content">
               <div class="index-icon index-warning"></div>
               <div class="index-info">
-                <div class="index-label">警告</div>
+                <div class="index-label">
+                  <dict-tag :options="dict.type.alarm_type" value="5"></dict-tag>
+                </div>
                 <div class="index">
-                  <span class="index-num">10</span>
+                  <span class="index-num">{{ alarmIndex['5'] || 0 }}</span>
                   次
                 </div>
               </div>
@@ -60,13 +68,31 @@
 </template>
 
 <script>
+import { fetchAlarmIndex } from '@/api/alarm/alarm-info';
+import { ApiCode } from '@/api/apiEmums';
 import Block from '@/components/Block/block.vue';
+import { mapGetters } from 'vuex';
 
 export default {
   components: { Block },
   name: 'DeviceWaring',
+  dicts: ['alarm_type'],
   data() {
-    return {};
+    return {
+      alarmIndex: {},
+    };
+  },
+  computed: {
+    // 监听选中的区域，以更新数据
+    selectedServiceArea() {
+      return this.$store.state.userState.selectedServiceArea;
+    },
+    ...mapGetters('userState', ['getSelectedArea']),
+  },
+  watch: {
+    selectedServiceArea(val) {
+      this.initData();
+    },
   },
   mounted() {
     this.initData();
@@ -75,6 +101,22 @@ export default {
   },
   methods: {
     async initData() {
+      if (!this.selectedServiceArea) {
+        return;
+      }
+      const {
+        code,
+        data,
+      } = await fetchAlarmIndex({
+        areaCode: this.selectedServiceArea.val,
+      });
+      let result = {};
+      if (ApiCode.SUCCESS === code && data && data.length > 0) {
+        data.forEach(item => {
+          result[item.alarmType] = item.cnt;
+        });
+      }
+      this.alarmIndex = result;
     },
   },
 };

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

@@ -20,8 +20,8 @@
           <template v-slot:filters>
             <SwitchTag
                 :ds="[{val: 'day', text: '按日'},{val: 'month', text: '按月'},{val: 'year', text: '按年'}]"
-                :defTag="{val: 'day'}"
-                :tagClick="onSwitchTagClick"
+                :defTag="dateType"
+                :tagClick="onDateTypeSwitch"
             />
           </template>
         </LineChartBlock>
@@ -102,6 +102,7 @@
 
 <script>
 
+import { fetchAlarmIndexDay, fetchAlarmIndexMonth, fetchAlarmIndexYear } from '@/api/alarm/alarm-info';
 import { ApiCode } from '@/api/apiEmums';
 import { get } from '@/api/commonApi';
 import Block from '@/components/Block/block.vue';
@@ -110,11 +111,14 @@ 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 dayjs from 'dayjs';
+import { mapGetters, mapMutations } from 'vuex';
 import * as areaApi from '../../../api/basecfg/area';
 import LineChartBlock from '../../../components/Block/charts/LineChartBlock.vue';
 import SwitchTag from '../../../components/SwitchTag/index.vue';
 
 export default {
+  dicts: ['alarm_type'],
   components: {
     BlockTable,
     DeviceWaring,
@@ -128,14 +132,15 @@ export default {
     return {
       areaTag: [],
       defArea: {},
+      dateType: { val: 'day' },
       devcWarningHis: {
         unit: '  ',
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data:  ["一月","二月","三月","四月","五月","六月","七月"],
+          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
         },
-        series:  [
+        series: [
           {
             name: '紧急',
             type: 'line',
@@ -155,10 +160,9 @@ export default {
             name: '警告',
             type: 'line',
             data: [20, 182, 131, 144, 130, 140, 90],
-          }
-        ]
+          },
+        ],
       },
-
       alarmTableData: [
         {
           warnType: '研发部照明',
@@ -185,14 +189,74 @@ export default {
       ],
     };
   },
+  computed: {
+    // 监听选中的区域，以更新数据
+    selectedServiceArea() {
+      return this.$store.state.userState.selectedServiceArea;
+    },
+    ...mapGetters('userState', ['getSelectedArea']),
+  },
+  watch: {
+    selectedServiceArea(val) {
+      this.queryCharts();
+    },
+  },
   mounted() {
     this.initData();
   },
   created() {
   },
   methods: {
+    ...mapMutations('userState', ['setSelectedArea']),
     onSwitchTagClick(item) {
-      console.log(item);
+      this.setSelectedArea(item);
+    },
+    async onDateTypeSwitch(item) {
+      if (!this.selectedServiceArea) {
+        return;
+      }
+      if (item.val === 'day') {
+        const xaxis = DateTool.getTime(60);
+        const { data } = await fetchAlarmIndexDay({ areaCode: this.selectedServiceArea.val });
+        const series = this.toSeries(data, xaxis);
+        this.devcWarningHis.xAxis.data = xaxis;
+        this.devcWarningHis.series = series;
+        return;
+      }
+      if (item.val === 'month') {
+        const xaxis = DateTool.getDayOfRange(
+            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+        const { data } = await fetchAlarmIndexMonth({ areaCode: this.selectedServiceArea.val });
+        const series = this.toSeries(data, xaxis);
+        this.devcWarningHis.xAxis.data = xaxis;
+        this.devcWarningHis.series = series;
+        return;
+      }
+      const xaxis = DateTool.getMonthsOfYearAgo();
+      const { data } = await fetchAlarmIndexYear({ areaCode: this.selectedServiceArea.val });
+      const series = this.toSeries(data, xaxis);
+      this.devcWarningHis.xAxis.data = xaxis;
+      this.devcWarningHis.series = series;
+    },
+    toSeries(data, xaxis) {
+      const dayGroup = _.groupBy(data, 'alarmType');
+      const series = [];
+      Object.keys(dayGroup).forEach((alarmType) => {
+        let ds = {};
+        let typeName = this.selectDictLabel(this.dict.type.alarm_type, alarmType);
+        dayGroup[alarmType].forEach(item => {
+          ds[item.dateIndex] = item.cnt;
+        });
+        let seriesData = [];
+        xaxis.forEach((item) => seriesData.push(ds[item] || 0));
+        series.push({
+          name: typeName,
+          type: 'line',
+          smooth: true,
+          data: seriesData,
+        });
+      });
+      return series;
     },
     async initData() {
       const {
@@ -210,10 +274,12 @@ export default {
           });
         });
         this.defArea = this.areaTag[0];
+        this.setSelectedArea(this.areaTag[0]);
       }
       this.queryCharts();
     },
     queryCharts() {
+      this.onDateTypeSwitch(this.dateType);
       this.getPvList();
     },
     async getPvList() {