+ 告警数据对接

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

@@ -1,4 +1,4 @@
-import { get } from '@/api/commonApi';
+import {get} from '@/api/commonApi';
 import request from '@/utils/request';
 
 // 查询能源设施告警列表
@@ -73,3 +73,11 @@ export const fetchSubSysIndexMonth = (params) => {
 export const fetchSubSysIndexYear = (params) => {
   return get('/alarm-info/subsys/index/year', params);
 };
+
+export const fetchCntHandled = (params) => {
+  return get('/alarm-info/cnt/handled', params);
+};
+
+export const fetchCntDateAlarmType = (params) => {
+  return get('/alarm-info/cnt/date/alarm/type', params);
+};

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

@@ -68,13 +68,18 @@
 </template>
 
 <script>
-import { fetchAlarmIndex } from '@/api/alarm/alarm-info';
-import { ApiCode } from '@/api/apiEmums';
+import {fetchAlarmIndex, fetchCntDateAlarmType} 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 },
+  components: {Block},
+  props: {
+    areaCode: {
+      type: String,
+      default: '',
+    },
+  },
   name: 'DeviceWaring',
   dicts: ['alarm_type'],
   data() {
@@ -82,15 +87,9 @@ export default {
       alarmIndex: {},
     };
   },
-  computed: {
-    // 监听选中的区域，以更新数据
-    selectedServiceArea() {
-      return this.$store.state.userState.selectedServiceArea;
-    },
-    ...mapGetters('userState', ['getSelectedArea']),
-  },
+  computed: {},
   watch: {
-    selectedServiceArea(val) {
+    areaCode(val) {
       this.initData();
     },
   },
@@ -101,15 +100,11 @@ export default {
   },
   methods: {
     async initData() {
-      if (!this.selectedServiceArea) {
-        return;
-      }
       const {
         code,
         data,
-
-      } = await fetchAlarmIndex({
-        areaCode: this.selectedServiceArea.val,
+      } = await fetchCntDateAlarmType({
+        areaCode: this.areaCode,
       });
       let result = {};
       if (ApiCode.SUCCESS === code && data && data.length > 0) {
@@ -122,4 +117,4 @@ export default {
   },
 };
 </script>
-<style src="./index.scss" lang="scss" />
+<style src="./index.scss" lang="scss"/>

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

@@ -3,23 +3,26 @@
     <el-row :gutter="10">
       <el-col :span="4" :xs="24">
         <div class="head-container">
-          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small" prefix-icon="el-icon-search"
-            style="margin-bottom: 20px" />
+          <el-input v-model="areaName" placeholder="请输入服务区名称" clearable size="small"
+                    prefix-icon="el-icon-search"
+                    style="margin-bottom: 20px"/>
         </div>
         <div class="head-container">
-          <el-tree ref="tree" :data="areaOptions" :default-expand-all="true" :expand-on-click-node="false"  :filter-node-method="filterNode" node-key="id" highlight-current @node-click="handleNodeClick" />
+          <el-tree ref="tree" :data="areaOptions" :default-expand-all="true" :expand-on-click-node="false"
+                   :filter-node-method="filterNode" node-key="id" highlight-current @node-click="handleNodeClick"/>
         </div>
       </el-col>
       <el-col :span="20" :xs="24">
         <el-row :gutter="20">
           <el-col :span="12">
-            <DeviceWaring />
+            <DeviceWaring :areaCode="areaCode"/>
           </el-col>
           <el-col :span="12">
             <LineChartBlock title="历史告警变化" :opt-cfg="devcWarningHis">
               <template v-slot:filters>
-                <SwitchTag :ds="[{ val: 'year', text: '按年' }, { val: 'month', text: '按月' }, { val: 'day', text: '按日' }]"
-                  :defTag="dateType" :tagClick="onDateTypeSwitch" />
+                <SwitchTag
+                    :ds="[{ val: 'year', text: '按年' }, { val: 'month', text: '按月' }, { val: 'day', text: '按日' }]"
+                    :defTag="dateType" :tagClick="onDateTypeSwitch"/>
               </template>
             </LineChartBlock>
           </el-col>
@@ -28,22 +31,22 @@
           <el-col :span="12">
             <BlockTable title="实时告警" :table-data="realTimeTableData">
               <template v-slot:columns>
-                <el-table-column type="index" label="序号" align="center" />
-                <el-table-column prop="subSystemName" label="子系统" align="center" />
-                <el-table-column prop="objName" label="对象名称" align="center" />
-                <el-table-column prop="alarmMsg" label="描述" align="center" />
-                <el-table-column prop="alarmTime" label="时间" align="center" />
+                <el-table-column type="index" label="序号" align="center"/>
+                <el-table-column prop="subSystemName" label="子系统" align="center"/>
+                <el-table-column prop="objName" label="对象名称" align="center"/>
+                <el-table-column prop="alarmMsg" label="描述" align="center"/>
+                <el-table-column prop="alarmTime" label="时间" align="center"/>
                 <el-table-column label="操作" align="center" width="100">
                   <template slot-scope="scope">
                     <el-dropdown @command="(cmd) => handleCommand(cmd, scope.row)"
-                      v-if="![ALARM_STATE.dissolved.value, ALARM_STATE.dissolved.value].includes(scope.row.alarmState)">
+                                 v-if="![ALARM_STATE.dissolved.value, ALARM_STATE.dissolved.value].includes(scope.row.alarmState)">
                       <span class="el-dropdown-link">
                         <dict-tag :options="dict.type.alarm_state" :value="scope.row.alarmState"></dict-tag>
                         <i class="el-icon-arrow-down el-icon--right"></i>
                       </span>
                       <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item :command="ALARM_STATE.disposing.code"
-                          v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
+                                          v-if="scope.row.alarmState === ALARM_STATE.new.value">开始处理
                         </el-dropdown-item>
                         <el-dropdown-item :command="ALARM_STATE.disposed.code">已处理</el-dropdown-item>
                         <el-dropdown-item :command="ALARM_STATE.dissolved.code">已消散</el-dropdown-item>
@@ -57,8 +60,9 @@
           <el-col :span="12">
             <BarChartBlock title="告警统计报表" :opt-cfg="subSysIndex">
               <template v-slot:filters>
-                <SwitchTag :ds="[{ val: 'year', text: '按年' }, { val: 'month', text: '按月' }, { val: 'day', text: '按日' }]"
-                  :defTag="dateType" :tagClick="onSubSysDateTypeSwitch" />
+                <SwitchTag
+                    :ds="[{ val: 'year', text: '按年' }, { val: 'month', text: '按月' }, { val: 'day', text: '按日' }]"
+                    :defTag="dateType" :tagClick="onSubSysDateTypeSwitch"/>
               </template>
             </BarChartBlock>
           </el-col>
@@ -72,8 +76,14 @@
 <script>
 
 import {
-  fetchAlarmIndexDay, fetchAlarmIndexMonth, fetchAlarmIndexYear, fetchSubSysIndexDay, fetchSubSysIndexMonth,
-  fetchSubSysIndexYear, listAlarmInfo, updateAlarmInfo,
+  fetchAlarmIndexDay,
+  fetchAlarmIndexMonth,
+  fetchAlarmIndexYear,
+  fetchSubSysIndexDay,
+  fetchSubSysIndexMonth,
+  fetchSubSysIndexYear,
+  listAlarmInfo,
+  updateAlarmInfo,
 } from '@/api/alarm/alarm-info';
 import {ApiCode} from '@/api/apiEmums';
 import Block from '@/components/Block/block.vue';
@@ -101,7 +111,7 @@ export default {
     LineChartBlock,
     SwitchTag,
   },
-  data () {
+  data() {
     return {
       startRecTime: '',
       endRecTime: '',
@@ -131,11 +141,11 @@ export default {
   },
   watch: {
     // 根据名称筛选区域树
-    areaName (val) {
+    areaName(val) {
       this.$refs.tree.filter(val)
     }
   },
-  async mounted () {
+  async mounted() {
     await this.getAreaTreeByTag('0', 1)
     this.queryCharts()
     this.getRecentSevenDays();
@@ -160,15 +170,15 @@ export default {
       })
     },
     // 筛选节点
-    filterNode (value, data) {
+    filterNode(value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
-    handleNodeClick (data, node) {
+    handleNodeClick(data, node) {
       this.areaCode = data.id
       this.queryCharts()
     },
-    async onDateTypeSwitch (item) {
+    async onDateTypeSwitch(item) {
       if (item.val === 'day') {
         const xaxis = DateTool.getTime(60);
         const {data} = await fetchAlarmIndexDay({
@@ -181,7 +191,7 @@ export default {
       }
       if (item.val === 'month') {
         const xaxis = DateTool.getDayOfRange(
-          dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
         const {data} = await fetchAlarmIndexMonth({areaCode: this.areaCode});
         const series = this.toSeries(data, xaxis);
         this.devcWarningHis.xAxis.data = xaxis;
@@ -194,7 +204,7 @@ export default {
       this.devcWarningHis.xAxis.data = xaxis;
       this.devcWarningHis.series = series;
     },
-    async onSubSysDateTypeSwitch (item) {
+    async onSubSysDateTypeSwitch(item) {
       if (item.val === 'day') {
         const xaxis = DateTool.getTime(60);
         const {data} = await fetchSubSysIndexDay({
@@ -207,7 +217,7 @@ export default {
       }
       if (item.val === 'month') {
         const xaxis = DateTool.getDayOfRange(
-          dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
+            dayjs().subtract(1, 'month'), dayjs(), DateTool.DateFormat.YYYY_MM_DD);
         const {data} = await fetchSubSysIndexMonth({areaCode: this.areaCode});
         const series = this.subSysIndexToSeries(data, xaxis);
         this.subSysIndex.xAxis.data = xaxis;
@@ -220,7 +230,7 @@ export default {
       this.subSysIndex.xAxis.data = xaxis;
       this.subSysIndex.series = series;
     },
-    toSeries (data, xaxis) {
+    toSeries(data, xaxis) {
       const dayGroup = _.groupBy(data, 'alarmType');
       const series = [];
       Object.keys(dayGroup).forEach((alarmType) => {
@@ -241,7 +251,7 @@ export default {
       return series;
     },
 
-    subSysIndexToSeries (data, xaxis) {
+    subSysIndexToSeries(data, xaxis) {
       const dayGroup = _.groupBy(data, 'systemCode');
       const series = [];
       Object.keys(dayGroup).forEach((subSysCode) => {
@@ -260,12 +270,12 @@ export default {
       });
       return series;
     },
-    queryCharts () {
+    queryCharts() {
       this.onDateTypeSwitch(this.dateType);
       this.onSubSysDateTypeSwitch(this.dateType);
       this.getRealTimeAlarm();
     },
-    async getRealTimeAlarm () {
+    async getRealTimeAlarm() {
       let result = [];
       const {
         code,
@@ -285,7 +295,7 @@ export default {
       }
       this.realTimeTableData = result;
     },
-    async handleCommand (command, data) {
+    async handleCommand(command, data) {
       await updateAlarmInfo({
         id: data.id,
         alarmState: ALARM_STATE[command].value,
@@ -295,4 +305,4 @@ export default {
   },
 };
 </script>
-<style src="./index.scss" scoped lang="scss" />
+<style src="./index.scss" scoped lang="scss"/>

ems-ui-cloud/src/views/largeScreen/components/CusModule.vue

@@ -26,7 +26,7 @@ export default {
 </script>
 <style lang='scss' scoped>
 .module {
-  padding: 0 15px 0 10px;
+  padding: 0 0 0 10px;
 }
 .title {
   display: flex;

ems-ui-cloud/src/views/largeScreen/device/left.vue

@@ -50,6 +50,8 @@ import BaseChart from '@/components/BaseChart/index.vue'
 import Pie3d from './pie3d.vue'
 import {mapState} from 'vuex';
 import {listDeviceStatus, listDeviceType} from "@/api/device/device";
+import {fetchCntHandled} from "@/api/alarm/alarm-info";
+import {DateTool} from "@/utils/DateTool";
 
 export default {
   name: 'DeviceLeft',
@@ -133,12 +135,7 @@ export default {
     getDeviceData() {
       this.cntListDeviceType()
       this.cntListDeviceStatus()
-      this.deal = this.deal.map((item, index) => ({
-        ...item,
-        percent: Math.floor(Math.random() * 100),
-        value: Math.floor(Math.random() * 100 + (index + 1) * 100),
-        dealValue: Math.floor(Math.random() * 100 + index * 100)
-      }))
+      this.getCntHandled()
     },
     async cntListDeviceType() {
       const {data} = await listDeviceType({
@@ -162,7 +159,26 @@ export default {
       const onlinePct = (onlineCount / total * 100).toFixed(1)
       online.pct = onlinePct
       offline.pct = (100 - onlinePct).toFixed(1)
-    }
+    },
+    async getCntHandled() {
+      const {data: thisday = {}} = await fetchCntHandled({
+        areaCode: this.areaType,
+        startRecTime: DateTool.now()
+      })
+
+      const {data: thisMonth = {}} = await fetchCntHandled({
+        areaCode: this.areaType,
+        startRecTime: DateTool.thisMonth()
+      })
+      const [thisDayData, thisMonthData] = this.deal
+      thisMonthData.value = thisMonth.cnt || 0
+      thisMonthData.dealValue = thisMonth.handledCnt || 0
+      thisMonthData.percent = thisMonthData.value && (thisMonthData.dealValue / thisMonthData.value * 100).toFixed(2)
+      thisDayData.value = thisday.cnt || 0
+      thisDayData.dealValue = thisday.handledCnt || 0
+      thisDayData.percent = thisDayData.value && (thisDayData.dealValue / thisDayData.value * 100).toFixed(2)
+      this.deal = [thisDayData, thisMonthData]
+    },
   }
 }
 </script>

ems-ui-cloud/src/views/largeScreen/device/right.vue

@@ -1,24 +1,21 @@
 <template>
   <div>
     <CusModule title="告警信息">
-      <BaseChart height="200px" width="100%" :option="pieOptions" />
+      <BaseChart height="200px" width="100%" :option="pieOptions"/>
       <div class="custom-table">
         <el-table :data="tableData" class="customer-table" style="width: 100%" height="650">
-          <el-table-column type="index" label="序号" width="60" align="center" />
+          <el-table-column type="index" label="序号" width="60" align="center"/>
           <el-table-column prop="type" label="报警类型" align="center">
             <template #default="{ row }">
-              <el-tag v-if="row.type == '预警'" type="info">预警</el-tag>
-              <el-tag v-else-if="row.type == '一般'">一般</el-tag>
-              <el-tag v-else-if="row.type == '严重'" type="warning">严重</el-tag>
-              <el-tag v-else-if="row.type == '紧急'" type="danger">紧急</el-tag>
+              <dict-tag :options="dict.type.alarm_type" :value="row.alarmType"/>
             </template>
           </el-table-column>
-          <el-table-column prop="content" label="报警内容" align="center" />
-          <el-table-column prop="time" label="处理时间" align="center" />
+          <el-table-column prop="alarmMsg" label="报警内容" align="center"/>
+          <el-table-column prop="alarmTime" label="告警事件" align="center"/>
         </el-table>
-        <el-pagination :current-page="page.pageIndex" :page-size="100" :small="'small'" :background="true"
-          layout="total,  prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange" />
+        <el-pagination :current-page="page.pageIndex" :page-size="page.pageSize" :small="'small'" :background="true"
+                       layout="total,  prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"/>
       </div>
     </CusModule>
   </div>
@@ -27,78 +24,56 @@
 import CusModule from '../components/CusModule.vue';
 import BaseChart from '@/components/BaseChart/index.vue'
 import {mapState} from 'vuex';
+import {fetchCntDateAlarmType, listAlarmInfo} from "@/api/alarm/alarm-info";
+import {DateTool} from "@/utils/DateTool";
+import {ALARM_STATE} from "@/enums/alarm";
+import {ApiCode} from "@/api/apiEmums";
+
+const colorDic = {
+  3: {
+    itemStyle: {
+      color: '#FF4949'
+    },
+  },
+  2: {
+    itemStyle: {
+      color: '#FFBD1F'
+    },
+  },
+  1: {
+    itemStyle: {
+      color: '#1990FF'
+    },
+  },
+  4: {
+    itemStyle: {
+      color: '#2fe30f'
+    },
+  },
+  5: {
+    itemStyle: {
+      color: '#737386'
+    },
+  },
+  6: {
+    itemStyle: {
+      color: 'rgba(232,244,255,0.58)'
+    },
+  }
+}
 export default {
   name: 'DeviceRight',
-  data () {
+  dicts: ['alarm_type'],
+  data() {
     return {
       pieData: [],
       tableData: [
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "紧急",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "电梯报警",
-          type: "严重",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "路灯报警",
-          type: "一般",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "空调报警",
-          type: "一般",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "一般",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "预警",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "预警",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "预警",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "预警",
-        },
-        {
-          code: "12321",
-          time: "2023/02/23 12:02",
-          content: "变压器报警",
-          type: "预警",
-        },
       ],
       page: {
         pageIndex: 1,
-        pageNun: 10
+        pageSize: 10,
+        total: 0
       }
-
     }
   },
   components: {
@@ -107,62 +82,33 @@ export default {
   },
   computed: {
     ...mapState('userState', ['areaType']),
-    pieOptions () {
+    pieOptions() {
       return this.getPie3D(this.pieData, 0)// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
     }
   },
   watch: {
-    areaType () {
+    areaType() {
       this.getPieData()
     }
   },
-  mounted () {
+  mounted() {
     this.getPieData()
   },
   methods: {
-    handleSizeChange () {
-
+    handleSizeChange(size) {
+      this.page.pageIndex = 1
+      this.page.pageSize = size
+      this.getRealTimeAlarm()
     },
-    handleCurrentChange () {
-
+    handleCurrentChange(index) {
+      this.page.pageIndex = index
+      this.getRealTimeAlarm()
     },
-    getPieData () {
-      const pieData = [
-        {
-          name: '紧急',
-          value: Math.floor(Math.random() * 100),
-          itemStyle: {
-            color: '#FF4949'
-          },
-        },
-        {
-          name: '严重',
-          value: Math.floor(Math.random() * 100),
-          itemStyle: {
-            color: '#FFBD1F'
-          },
-        },
-        {
-          name: '一般',
-          value: Math.floor(Math.random() * 100),
-          itemStyle: {
-            color: '#1990FF'
-          },
-        },
-        {
-          name: '预警',
-          value: Math.floor(Math.random() * 100),
-          itemStyle: {
-            color: '#A1A2A7'
-          },
-        }]
-      let totalValue = pieData.reduce((acc, cur) => acc + cur.value, 0);
-      this.pieData = pieData.map(item => ({
-        ...item,
-        proportion: ((item.value / totalValue) * 100).toFixed(2)
-      }))
+    getPieData() {
+      this.getDateAlarmType()
+      this.getRealTimeAlarm()
     },
-    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
       const midRatio = (startRatio + endRatio) / 2;
       const startRadian = startRatio * Math.PI * 2;
       const endRadian = endRatio * Math.PI * 2;
@@ -190,7 +136,7 @@ export default {
           step: Math.PI / 20,
         },
 
-        x (u, v) {
+        x(u, v) {
           if (u < startRadian) {
             return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
           }
@@ -200,7 +146,7 @@ export default {
           return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
         },
 
-        y (u, v) {
+        y(u, v) {
           if (u < startRadian) {
             return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
           }
@@ -210,7 +156,7 @@ export default {
           return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
         },
 
-        z (u, v) {
+        z(u, v) {
           if (u < -Math.PI * 0.5) {
             return Math.sin(u);
           }
@@ -222,16 +168,16 @@ export default {
         },
       };
     },
-    getPie3D (pieData, internalDiameterRatio) {
+    getPie3D(pieData, internalDiameterRatio) {
       const series = [];
       let sumValue = 0;
       let startValue = 0;
       let endValue = 0;
       const legendData = [];
       const k =
-        typeof internalDiameterRatio !== 'undefined'
-          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
-          : 1 / 3;
+          typeof internalDiameterRatio !== 'undefined'
+              ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+              : 1 / 3;
       for (let i = 0; i < pieData.length; i += 1) {
         sumValue += pieData[i].value;
         const seriesItem = {
@@ -254,8 +200,8 @@ export default {
           typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
           // eslint-disable-next-line no-unused-expressions
           typeof pieData[i].itemStyle.opacity !== 'undefined'
-            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
-            : null;
+              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+              : null;
 
           seriesItem.itemStyle = itemStyle;
         }
@@ -266,12 +212,12 @@ export default {
         series[i].pieData.startRatio = startValue / sumValue;
         series[i].pieData.endRatio = endValue / sumValue;
         series[i].parametricEquation = this.getParametricEquation(
-          series[i].pieData.startRatio,
-          series[i].pieData.endRatio,
-          false,
-          false,
-          k,
-          10//在此处传入饼图初始高度h
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            10//在此处传入饼图初始高度h
         );
         startValue = endValue;
         legendData.push(series[i].name);
@@ -333,7 +279,58 @@ export default {
         series,
       };
       return option;
-    }
+    },
+
+    async getDateAlarmType() {
+      const {data} = await fetchCntDateAlarmType(
+          {
+            startRecTime: DateTool.now(),
+            areaCode: this.areaType,
+          }
+      )
+      if (!data) {
+        return
+      }
+      const pieData = data.map(item => {
+        return {
+          name: this.dict.label.alarm_type[item.alarmType],
+          alarmType: item.alarmType,
+          value: item.cnt,
+          proportion: item.proportion,
+        }
+      })
+
+
+      let totalValue = pieData.reduce((acc, cur) => acc + cur.value, 0);
+      this.pieData = pieData.map(item => {
+        item.proportion = (item.value / totalValue * 100).toFixed(2)
+        let color = colorDic[item.alarmType] || colorDic['6']
+        return {
+          ...item,
+          ...color
+        }
+      })
+    },
+    async getRealTimeAlarm() {
+      let result = [];
+      const {
+        code,
+        rows,
+        total,
+      } = await listAlarmInfo({
+        pageNum: this.page.pageIndex,
+        pageSize: this.page.pageSize,
+        areaCode: this.areaType,
+        alarmStateList: [
+          ALARM_STATE.new.value, ALARM_STATE.disposing.value,
+        ]
+      });
+      if (ApiCode.SUCCESS === code && rows && rows.length > 0) {
+        result = rows;
+      }
+      this.tableData = result;
+      this.page.total = total
+    },
   }
 }
 </script>
@@ -379,7 +376,7 @@ export default {
   }
 
   ::v-deep.el-table tr,
-  ::v-deep.el-table__body tr:hover>td {
+  ::v-deep.el-table__body tr:hover > td {
     background-color: transparent !important;
   }
 

ems-ui-cloud/src/views/largeScreen/index.vue

@@ -268,6 +268,6 @@ export default {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 85% 100%;
-  z-index: 50;
+  z-index: 20;
 }
 </style>

ems-ui-cloud/src/views/mgr/powergrid.vue

@@ -12,7 +12,7 @@
             {{ pvCfg.total }}kW
           </template>
         </el-statistic>
-        <el-statistic :title="`光伏${item.name}装机`" v-for="item in pvCfg.areas">
+        <el-statistic :title="`光伏${item.name}装机`" v-for="(item,index) in pvCfg.areas" :key="`pv_${index}`">
           <template slot="formatter">
             {{ numToStr(item.pv) }}kW
           </template>

ems-ui-cloud/src/views/mgr/powerstore.vue

@@ -7,7 +7,7 @@
             {{ pvCfg.total }}kW·h
           </template>
         </el-statistic>
-        <el-statistic :title="`光伏${item.name}装机`" v-for="item in pvCfg.areas">
+        <el-statistic :title="`光伏${item.name}装机`" v-for="(item,index) in pvCfg.areas" :key="`pv_${index}`">
           <template slot="formatter">
             {{ numToStr(item.pv) }}kW
           </template>
@@ -23,7 +23,7 @@
                 <div>总充电量</div>
                 <div>{{ daySum.chargeElecQuantity }}kW·h</div>
               </div>
-              <BaseChart width="100%" height="500px" :option="chargePieOptions" />
+              <BaseChart width="100%" height="500px" :option="chargePieOptions"/>
             </div>
           </Block>
           <Block title="当日放电量【单位：kW·h】">
@@ -32,7 +32,7 @@
                 <div>总放电量</div>
                 <div>{{ daySum.dischargeElecQuantity }}kW·h</div>
               </div>
-              <BaseChart width="100%" height="500px" :option="disChargePieOptions" />
+              <BaseChart width="100%" height="500px" :option="disChargePieOptions"/>
             </div>
           </Block>
         </div>
@@ -40,25 +40,27 @@
       <el-tab-pane label="区块储能" name="area">
         <el-col :span="4" :xs="24">
           <div class="head-container">
-            <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small" prefix-icon="el-icon-search"
-              style="margin-bottom: 20px" />
+            <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small"
+                      prefix-icon="el-icon-search"
+                      style="margin-bottom: 20px"/>
           </div>
           <div class="head-container" style="height: 100vh; overflow: hidden; position: relative;">
             <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
-              :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
-              @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;" />
+                     :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
+                     @node-click="handleNodeClick" style="height: calc(100vh - 50px); overflow-y: auto;"/>
           </div>
         </el-col>
         <el-col :span="20" :xs="24">
           <div class="container-block">
-            <SubTitle :title="`时段储能数据【${selectedLabel}】`" />
-            <BaseChart width="100%" height="300px" :option="elecOptions" />
+            <SubTitle :title="`时段储能数据【${selectedLabel}】`"/>
+            <BaseChart width="100%" height="300px" :option="elecOptions"/>
           </div>
           <div class="container-block">
             <div class="ctl-container">
               <el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
-                value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
-                align="right">
+                              value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
+                              end-placeholder="结束日期"
+                              align="right">
               </el-date-picker>
             </div>
             <el-table v-loading="loading" :data="elecStoreHList" max-height="400px">
@@ -66,8 +68,8 @@
               </el-table-column>
               <el-table-column label="时间" align="center" prop="time">
               </el-table-column>
-              <el-table-column label="充电电量(kW·h)" align="center" prop="chargeElecQuantity" />
-              <el-table-column label="放电电量(kW·h)" align="center" prop="dischargeElecQuantity" />
+              <el-table-column label="充电电量(kW·h)" align="center" prop="chargeElecQuantity"/>
+              <el-table-column label="放电电量(kW·h)" align="center" prop="dischargeElecQuantity"/>
             </el-table>
           </div>
         </el-col>
@@ -77,8 +79,8 @@
 </template>
 
 <script>
-import {listElecStoreH, dayStatistics} from '@/api/mgr/elecStoreH'
-import { areaTreeByFacsCategory } from '@/api/basecfg/area'
+import {dayStatistics, listElecStoreH} from '@/api/mgr/elecStoreH'
+import {areaTreeByFacsCategory} from '@/api/basecfg/area'
 import {dateFormat, numToStr} from '@/utils/index.js'
 import dayjs from 'dayjs'
 import {DateTool} from '@/utils/DateTool'
@@ -97,7 +99,7 @@ export default {
     Block,
     SubTitle
   },
-  data () {
+  data() {
     return {
       activeName: 'summary',
       // 遮罩层
@@ -124,7 +126,7 @@ export default {
         shortcuts: [
           {
             text: '最近一周',
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
@@ -132,7 +134,7 @@ export default {
             }
           }, {
             text: '最近一个月',
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
@@ -140,7 +142,7 @@ export default {
             }
           }, {
             text: '最近三个月',
-            onClick (picker) {
+            onClick(picker) {
               const end = new Date()
               const start = new Date()
               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
@@ -158,7 +160,7 @@ export default {
     }
   },
   computed: {
-    elecOptions () {
+    elecOptions() {
       const xData = this.todayList.map(item => item.time)
       const chargeQuantity = this.todayList.map(item => item.chargeElecQuantity)
       const dischargeQuantity = this.todayList.map(item => item.dischargeElecQuantity)
@@ -191,7 +193,7 @@ export default {
             var relVal = params[0].name
             for (var i = 0, l = params.length; i < l; i++) {
               const unit = 'kW·h'
-              relVal =`${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
+              relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName}&nbsp;&nbsp;&nbsp;${params[i].value}${unit}`
             }
             return relVal
           }
@@ -239,7 +241,7 @@ export default {
       }
       return option
     },
-    chargePieOptions () {
+    chargePieOptions() {
       return {
         tooltip: {
           trigger: 'item',
@@ -259,15 +261,15 @@ export default {
               borderRadius: 8
             },
             data:
-              this.hourSum.map(item => ({
-                name: item.time,
-                value: item.chargeElecQuantity
-              }))
+                this.hourSum.map(item => ({
+                  name: item.time,
+                  value: item.chargeElecQuantity
+                }))
           }
         ]
       }
     },
-    disChargePieOptions () {
+    disChargePieOptions() {
       return {
         tooltip: {
           trigger: 'item',
@@ -297,11 +299,11 @@ export default {
   },
   watch: {
     // 根据名称筛选区域树
-    areaName (val) {
+    areaName(val) {
       this.$refs.tree.filter(val)
     }
   },
-  async created () {
+  async created() {
     this.facsCategory = 'C'
     await this.getAreaList()
     this.tabClick()
@@ -331,7 +333,7 @@ export default {
       }
     },
     // 查询区域列表
-    async getAreaList () {
+    async getAreaList() {
       await areaTreeByFacsCategory(this.facsCategory, this.facsSubCategory, false).then(response => {
         this.areaOptions = [{
           id: '-1',
@@ -341,7 +343,7 @@ export default {
       })
     },
     /** 查询储能计量-小时列表 */
-    getList () {
+    getList() {
       this.loading = true
       const {areaCode} = this.queryParams
       let startRecTime = ''
@@ -363,7 +365,7 @@ export default {
         this.loading = false
       })
     },
-    getTodayChart () {
+    getTodayChart() {
       const {areaCode} = this.queryParams
       const nowDay = dateFormat(new Date(), 'yyyy-MM-dd')
       listElecStoreH({
@@ -376,7 +378,7 @@ export default {
         this.todayList = response.rows
       })
     },
-    getSummary () {
+    getSummary() {
       dayStatistics({date: dateFormat(new Date(), 'yyyy-MM-dd')}).then(({code, data}) => {
         if (code === 200) {
           this.hourSum = data.hourSum || []
@@ -385,19 +387,19 @@ export default {
       })
     },
     // 筛选节点
-    filterNode (value, data) {
+    filterNode(value, data) {
       if (!value) return true
       return data.label.indexOf(value) !== -1
     },
     // 节点单击事件
-    handleNodeClick (data) {
+    handleNodeClick(data) {
       this.queryParams.areaCode = data.id
       this.selectedLabel = data.label
       this.getList()
       this.getTodayChart();
     },
     /** 搜索按钮操作 */
-    tabClick () {
+    tabClick() {
       if (this.activeName === 'summary') {
         this.getSummary()
       } else {
@@ -430,7 +432,7 @@ export default {
 .chartGroup {
   display: flex;
 
-  >div {
+  > div {
     flex: 1;
 
   }