add:对接告警总览

hx-ai-intelligent/src/view/alarmManagement/alarmOverview/index.vue

@@ -1,60 +1,141 @@
 <template>
   <div class="box">
     <div class="box-top">
-      <div v-for="index in 3" :key="index" class="box-top-item">
-        <div class="item-box">
-          <div class="item-box-left">
-            <div class="item-box-left-title">设备告警 (今日处理 / 总数) </div>
-            <div class="iem-box-left-number">
-              10 / 13
-              <span
-                style="
-                  color: #04d919;
-                  font-size: 14px;
-                  margin-left: 5px;
-                  font-weight: 700;
-                  font-style: normal;
-                "
-                >+10%</span
-              >
-            </div>
+      <div v-for="(item, index) in infoObject" :key="index" class="box-top-item">
+        <div
+          class="item-box"
+          :style="{
+            'background-image': 'url(' + item.url + ')',
+            'background-position': 'center right',
+            'background-repeat': 'no-repeat',
+            'background-clip': 'content-box',
+            'background-origin': 'content-box',
+          }">
+          <div class="item-box-icon">
+            <img style="width: 34px; height: 34px" src="./img/icon.png" />
           </div>
-          <div class="item-box-right">
-            <img width="48px" height="48px" src="../../../../src/icon/gaojingtonglan.svg" />
+          <div class="item-box-left">
+            <div class="iem-box-left-number">
+              {{ item.todayProcessing }} / {{ item.total }}
+              <span
+                v-if="item.liftRatio"
+                style="font-size: 12px; margin-left: 5px; font-weight: 700; font-style: normal"
+                :style="{
+                  color: item.liftRatio > 0 ? 'rgba(243, 97, 99, 1)' : 'rgba(0, 170, 124, 1)',
+                }"
+                ><span v-if="item.liftRatio > 0">+</span>{{ item.liftRatio }}%</span
+              >
+              <img
+                v-if="item.liftRatio"
+                style="width: 12px; margin-top: 6px"
+                :src="item.liftRatio > 0 ? rise : decline" />
+              <span
+                v-if="item.liftRatio === 0"
+                style="font-size: 12px; margin-left: 5px; font-weight: 700; font-style: normal">
+                -
+              </span>
+            </div>
+            <div class="item-box-left-title"
+              ><span style="color: rgba(0, 0, 0, 1); font-size: 16px; font-weight: 700">{{
+                item.title
+              }}</span>
+              <span style="margin-left: 6px; font-size: 13px"> 今日处理 / 总数</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div style="flex: 4; width: 100%; display: flex; gap: 5px">
-      <div
-        style="flex: 1; height: 100%; background-color: white; border-radius: 4px; padding: 12px">
-        <div ref="echartPieOne" style="width: 100%; height: 100%"></div>
+    <div class="box-center">
+      <div class="box-center-item">
+        <div class="box-center-item-top">
+          <img style="display: flex; position: absolute; top: 5px" :src="priority" />
+          <div class="box-center-item-top-title">
+            <span style="font-size: 18px">优先级</span>
+          </div>
+          <div
+            style="
+              width: auto;
+              height: 40px;
+              display: flex;
+              position: absolute;
+              left: 128px;
+              top: 13px;
+              color: rgba(102, 102, 102, 1);
+              font-size: 12px;
+            ">
+            ( 近30天 )
+          </div>
+        </div>
+        <div ref="echartPieOne" style="width: 100%; height: calc(100% - 40px)"></div>
       </div>
-      <div style="flex: 1; height: 100%; background-color: white; border-radius: 4px">
-        <div ref="echartPieTow" style="width: 100%; height: 100%"></div>
+      <div class="box-center-item">
+        <div class="box-center-item-top">
+          <img style="display: flex; position: absolute; top: 5px" :src="priority" />
+          <div class="box-center-item-top-title">
+            <span style="font-size: 18px">处理进度</span>
+          </div>
+          <div
+            style="
+              width: auto;
+              height: 40px;
+              display: flex;
+              position: absolute;
+              left: 148px;
+              top: 13px;
+              color: rgba(102, 102, 102, 1);
+              font-size: 12px;
+            ">
+            ( 近30天 )
+          </div>
+        </div>
+        <div ref="echartPieTow" style="width: 100%; height: calc(100% - 40px)"></div>
       </div>
     </div>
     <!-- 告警矩形 echarts -->
-    <div style="flex: 4; width: 100%; background-color: white; border-radius: 4px; padding: 12px">
-      <div ref="graphChart" style="width: 100%; height: 100%"></div>
+    <div class="box-bottom">
+      <div class="box-bottom-top">
+        <img style="display: flex; position: absolute; top: 5px" :src="priority" />
+        <div class="box-bottom-top-title">
+          <span style="font-size: 18px">处理进度</span>
+        </div>
+        <div class="box-bottom-top-unit"> ( 近30天 ) </div>
+      </div>
+      <div ref="graphChart" style="width: 100%; height: calc(100% - 40px)"></div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue'; // 从 Vue 中导入 ref、onMounted 和 watchEffect
   import * as echarts from 'echarts';
+  import gatewayAlarm from './img/gatewayAlarm.png';
+  import equipmentAlarm from './img/equipmentAlarm.png';
+  import energyAlarm from './img/energyAlarm.png';
+  import rise from './img/rise.png';
+  import decline from './img/decline.png';
+  import priority from './img/priority.png';
+
+  import { alarmOverviewApi } from '/@/api/alarmManagement/alarmOverview.ts';
+  import { http } from '/nerv-lib/util';
 
   defineOptions({
     name: 'alarmOverviewIndex', // 与页面路由name一致缓存才可生效
   });
-
+  //组织树
+  const orgId = ref('');
+  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+  orgId.value = result;
+  const infoObject = ref([
+    { title: '设备告警', url: gatewayAlarm, liftRatio: 0, todayProcessing: 0, total: 0 },
+    { title: '网关告警', url: equipmentAlarm, liftRatio: 0, todayProcessing: 0, total: 0 },
+    { title: '能源告警', url: energyAlarm, liftRatio: 0, todayProcessing: 0, total: 0 },
+  ]);
   let chartInstance: echarts.ECharts | null = null;
   let chartInstanceOne: echarts.ECharts | null = null;
   let chartInstanceTow: echarts.ECharts | null = null;
   const graphChart = ref(null);
   const echartPieOne = ref(null);
   const echartPieTow = ref(null);
-  const getGraphChart = () => {
+  const getGraphChart = async () => {
     let dayData = [];
     // 能源告警
     let energyAlarm = [];
@@ -63,21 +144,28 @@
     // 设备告警
     let equipmentAlarm = [];
     let total = [];
-
-    // Extend data for 30 days
-    for (let i = 1; i < 30; i++) {
-      dayData.push(`3/${i}`);
-      energyAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
-      wgAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
-      equipmentAlarm.push(Math.floor(Math.random() * 11)); // Assuming the same value for simplicity
-      total.push(0); // Assuming the same value for simplicity
-    }
+    await http
+      .post(alarmOverviewApi.getAlarmTrend, {
+        orgId: orgId.value,
+      })
+      .then((res) => {
+        if (res.msg === 'success') {
+          res.data.forEach((item: any, index) => {
+            energyAlarm.push(item.alarmEnergyConsumptionNum);
+            wgAlarm.push(item.alarmGatewayNum);
+            equipmentAlarm.push(item.alarmEquipmentNum);
+            total.push(0);
+            dayData.push(item.createTime);
+          });
+        }
+      });
     if (chartInstance) {
       chartInstance.dispose();
     }
     chartInstance = echarts.init(graphChart.value);
     const option = {
       title: {
+        show: false,
         text: '告警趋势/ 近30天',
         textStyle: {
           fontSize: 16,
@@ -126,7 +214,7 @@
       legend: [
         {
           top: 5,
-          left: 'center', // 将图例居中显示
+          left: 'right', // 将图例居中显示
           textStyle: {
             color: 'rgb(89, 89, 89)',
             fontSize: '14',
@@ -136,13 +224,6 @@
           itemGap: 30, // 这里可以调整图例项之间的间距，单位为像素
         },
       ],
-      // toolbox: {
-      //   show: true,
-      //   feature: {
-      //     restore: {},
-      //     saveAsImage: {},
-      //   },
-      // },
       calculable: true,
       xAxis: [
         {
@@ -194,12 +275,12 @@
           name: '能源告警',
           type: 'bar',
           stack: '能源告警',
-          barMaxWidth: 40,
+          barMaxWidth: 20,
           barGap: '10%',
           itemStyle: {
             normal: {
               barBorderRadius: 0,
-              color: 'rgb(246, 189, 22)',
+              color: 'rgba(85, 125, 255, 1)',
             },
           },
           data: energyAlarm,
@@ -208,12 +289,12 @@
           name: '网关告警',
           type: 'bar',
           stack: '能源告警',
-          barMaxWidth: 40,
+          barMaxWidth: 20,
           barGap: '10%',
           itemStyle: {
             normal: {
               barBorderRadius: 0,
-              color: 'rgb(91, 143, 249)',
+              color: 'rgba(255, 232, 139, 1)',
             },
           },
           data: wgAlarm,
@@ -222,12 +303,12 @@
           name: '设备告警',
           type: 'bar',
           stack: '能源告警',
-          barMaxWidth: 40,
+          barMaxWidth: 20,
           barGap: '10%',
           itemStyle: {
             normal: {
               barBorderRadius: 0,
-              color: 'rgb(48, 191, 120)',
+              color: 'rgba(47, 213, 135, 1)',
             },
           },
           data: equipmentAlarm,
@@ -236,7 +317,7 @@
           name: '总数',
           type: 'bar',
           stack: '能源告警',
-          barMaxWidth: 40,
+          barMaxWidth: 20,
           barHight: 0,
           itemStyle: {
             normal: {
@@ -264,38 +345,42 @@
     chartInstance = echarts.init(graphChart.value);
     chartInstance.setOption(option);
   };
-  const getEchartPieOne = () => {
+  const getEchartPieOne = async () => {
     if (chartInstanceOne) {
       chartInstanceOne.dispose();
     }
-    chartInstanceOne = echarts.init(echartPieOne.value);
+    // 获取接口数据
     var m2R2Data = [
-      { value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
-      { value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
-      { value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
+      { value: 0, name: '紧急', itemStyle: { color: 'rgba(243, 97, 99, 1)' } },
+      { value: 0, name: '重要', itemStyle: { color: 'rgba(255, 116, 44, 1)' } },
+      { value: 0, name: '一般', itemStyle: { color: 'rgba(255, 224, 158, 1)' } },
     ];
+    var total = 0;
+    await http
+      .post(alarmOverviewApi.getPriority, {
+        orgId: orgId.value,
+      })
+      .then((res) => {
+        if (res.msg === 'success') {
+          m2R2Data[0].value = res.data.emergent;
+          m2R2Data[1].value = res.data.important;
+          m2R2Data[2].value = res.data.general;
+          total = res.data.prioritySum;
+        }
+      });
+    chartInstanceOne = echarts.init(echartPieOne.value);
+
     const option = {
       title: [
         {
-          text: '优先级 / 近30天',
+          text: total,
+          subtext: '优先级',
           textStyle: {
-            fontSize: 16,
-            fontWeight: 'normal',
-            color: '#aaaaaa',
-          },
-          left: '2%',
-          top: '2%',
-        },
-        {
-          text: '优先级',
-          subtext: 12312 + '个',
-          textStyle: {
-            fontSize: 24,
+            fontSize: 22,
             color: 'black',
           },
           subtextStyle: {
-            fontSize: 24,
-            fontWeight: '700',
+            fontSize: 18,
             color: 'black',
           },
           textAlign: 'center',
@@ -305,8 +390,8 @@
       ],
       tooltip: {
         trigger: 'item',
-        formatter: function (parms) {
-          var str = parms.marker + ' :' + parms.data.value;
+        formatter: function (parms: any) {
+          var str = parms.marker + ' ' + parms.data.name + ' : ' + parms.data.value;
           return str;
         },
       },
@@ -316,9 +401,9 @@
         top: 'center',
         orient: 'vertical',
         // 图例图标设置为圆形
-        icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        // icon: 'circle',
+        itemWidth: 16,
+        itemHeight: 16,
         itemGap: 16,
         textStyle: {
           fontSize: 14,
@@ -345,12 +430,25 @@
                 return '[ ' + parms.data.name + ' ] : ' + parms.data.value;
               },
             },
+            // emphasis: {
+            //   show: true, // 鼠标悬停时显示标签
+            //   position: 'outside', // 标签位置
+            //   textStyle: {
+            //     fontSize: 14,
+            //   },
+            //   formatter: function (params) {
+            //     return '[ ' + params.data.name + ' ] : ' + params.data.value;
+            //   },
+            // },
           },
           labelLine: {
-            show: true, // 控制标签线是否显示
-            length: 10, // 标签线长度
-            length2: 0, // 标签线引出部分长度
-            // 其他样式属性，如 lineStyle 等
+            show: true, // 显示标签线
+            length: 15, // 标签线的长度
+            length2: 10, // 标签线引出部分长度
+            lineStyle: {
+              width: 2, // 标签线的宽度
+              type: 'solid', // 标签线的样式
+            },
           },
           data: m2R2Data,
         },
@@ -359,38 +457,44 @@
     chartInstanceOne = echarts.init(echartPieOne.value);
     chartInstanceOne.setOption(option);
   };
-  const getEchartPieTow = () => {
+  const getEchartPieTow = async () => {
     if (chartInstanceTow) {
       chartInstanceTow.dispose();
     }
     chartInstanceTow = echarts.init(echartPieTow.value);
     var m2R2Data = [
-      { value: 335, name: '紧急', itemStyle: { color: '#F56E53' } },
-      { value: 310, name: '重要', itemStyle: { color: '#F7C122' } },
-      { value: 234, name: '一般', itemStyle: { color: '#3BC27F' } },
+      { value: 0, name: '待处理', itemStyle: { color: '#f36163' } },
+      { value: 310, name: '处理中', itemStyle: { color: '#2778ff' } },
+      { value: 234, name: '已完成', itemStyle: { color: '#62daab' } },
+      { value: 234, name: '超时', itemStyle: { color: '#ffbc46' } },
+      { value: 234, name: '关闭', itemStyle: { color: '#5e87d2' } },
     ];
+    var total = 0;
+    await http
+      .post(alarmOverviewApi.getProcessProgress, {
+        orgId: orgId.value,
+      })
+      .then((res) => {
+        if (res.msg === 'success') {
+          m2R2Data[0].value = res.data.pendingProcessing;
+          m2R2Data[1].value = res.data.processing;
+          m2R2Data[2].value = res.data.completed;
+          m2R2Data[3].value = res.data.timeout;
+          m2R2Data[4].value = res.data.close;
+          total = res.data.processSum;
+        }
+      });
     const option = {
       title: [
         {
-          text: '优先级 / 近30天',
+          text: total,
+          subtext: '进度',
           textStyle: {
-            fontSize: 16,
-            fontWeight: 'normal',
-            color: '#aaaaaa',
-          },
-          left: '2%',
-          top: '2%',
-        },
-        {
-          text: '优先级',
-          subtext: 12312 + '个',
-          textStyle: {
-            fontSize: 24,
+            fontSize: 22,
             color: 'black',
           },
           subtextStyle: {
-            fontSize: 24,
-            fontWeight: '700',
+            fontSize: 18,
             color: 'black',
           },
           textAlign: 'center',
@@ -400,8 +504,8 @@
       ],
       tooltip: {
         trigger: 'item',
-        formatter: function (parms) {
-          var str = parms.marker + ' :' + parms.data.value;
+        formatter: function (parms: any) {
+          var str = parms.marker + ' ' + parms.data.name + ' : ' + parms.data.value;
           return str;
         },
       },
@@ -410,10 +514,8 @@
         right: 50,
         top: 'center',
         orient: 'vertical',
-        // 图例图标设置为圆形
-        icon: 'circle',
-        itemWidth: 12,
-        itemHeight: 12,
+        itemWidth: 16,
+        itemHeight: 16,
         itemGap: 16,
         textStyle: {
           fontSize: 14,
@@ -444,7 +546,7 @@
           labelLine: {
             show: true, // 控制标签线是否显示
             length: 10, // 标签线长度
-            length2: 0, // 标签线引出部分长度
+            length2: 10, // 标签线引出部分长度
             // 其他样式属性，如 lineStyle 等
           },
           data: m2R2Data,
@@ -454,7 +556,47 @@
     chartInstanceTow = echarts.init(echartPieTow.value);
     chartInstanceTow.setOption(option);
   };
+  const getTotal = () => {
+    // 获取设备告警数据
+    http
+      .post(alarmOverviewApi.getAlarmEquipment, {
+        orgId: orgId.value,
+      })
+      .then((res) => {
+        if (res.msg === 'success') {
+          infoObject.value[0].total = res.data.total;
+          infoObject.value[0].liftRatio = res.data.liftRatio;
+          infoObject.value[0].todayProcessing = res.data.todayProcessing;
+        }
+      });
+    // 获取网关告警数据
+    http
+      .post(alarmOverviewApi.getAlarmGateway, {
+        orgId: orgId.value,
+      })
+      .then((res) => {
+        if (res.msg === 'success') {
+          infoObject.value[1].total = res.data.total;
+          infoObject.value[1].liftRatio = res.data.liftRatio;
+          infoObject.value[1].todayProcessing = res.data.todayProcessing;
+        }
+      });
+    // 获取能碳告警数据
+    http
+      .post(alarmOverviewApi.getAlarmEnergyConsumption, {
+        orgId: orgId.value,
+      })
+      .then((res) => {
+        if (res.msg === 'success') {
+          infoObject.value[2].total = res.data.total;
+          infoObject.value[2].liftRatio = res.data.liftRatio;
+          infoObject.value[2].todayProcessing = res.data.todayProcessing;
+        }
+      });
+  };
   onMounted(() => {
+    // 获取三个告警数量
+    getTotal();
     //渲染第三个图表
     getGraphChart();
     //优先级
@@ -469,36 +611,41 @@
     // border: 1px solid red;
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 12px;
     background-color: #f0f1f4;
     box-sizing: border-box;
     .box-top {
-      flex: 1;
+      flex: 1.5;
       width: 100%;
       height: 100%;
       display: flex;
       flex-direction: row;
-      gap: 5px;
+      gap: 12px;
       .box-top-item {
         height: 100%;
         flex: 1;
-        gap: 5px;
+        gap: 12px;
         background-color: white;
         border-radius: 4px;
-        padding: 20px;
         .item-box {
           width: 100%;
           height: 100%;
           display: flex;
-          .item-box-left {
-            flex: 9;
+          .item-box-icon {
+            flex: 1.5;
             height: 100%;
-            padding: 0px !important;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .item-box-left {
+            flex: 8.5;
+            height: 100%;
+            padding: 20px 4px;
             .item-box-left-title {
               color: rgba(0, 0, 0, 0.45);
               font-weight: 400;
               font-style: normal;
-              font-size: 14px;
               color: #aaaaaa;
               font-kerning: normal;
               font-family: '微软雅黑', sans-serif;
@@ -512,13 +659,71 @@
             }
           }
           .item-box-right {
-            flex: 1;
+            flex: 5;
             height: 100%;
-            display: grid;
-            place-items: center;
           }
         }
       }
     }
+    .box-center {
+      flex: 4;
+      width: 100%;
+      display: flex;
+      gap: 12px;
+      .box-center-item {
+        flex: 1;
+        height: 100%;
+        background-color: white;
+        border-radius: 4px;
+        padding: 12px;
+        .box-center-item-top {
+          width: 100%;
+          height: 40px;
+          padding: 0px 12px;
+          display: flex;
+          position: relative;
+          .box-center-item-top-title {
+            width: auto;
+            height: 40px;
+            display: flex;
+            position: absolute;
+            left: 62px;
+            top: 5px;
+          }
+        }
+      }
+    }
+    .box-bottom {
+      flex: 3.5;
+      width: 100%;
+      background-color: white;
+      border-radius: 4px;
+      padding: 12px;
+      .box-bottom-top {
+        width: 100%;
+        height: 40px;
+        padding: 0px 12px;
+        display: flex;
+        position: relative;
+        .box-bottom-top-title {
+          width: auto;
+          height: 40px;
+          display: flex;
+          position: absolute;
+          left: 62px;
+          top: 5px;
+        }
+        .box-bottom-top-unit {
+          width: auto;
+          height: 40px;
+          display: flex;
+          position: absolute;
+          left: 148px;
+          top: 13px;
+          color: rgba(102, 102, 102, 1);
+          font-size: 12px;
+        }
+      }
+    }
   }
 </style>

hx-ai-intelligent/src/view/alarmManagement/energyAlarm/index.vue

@@ -2,7 +2,7 @@
   <ns-view-list-table v-bind="config" ref="mainRef">
     <template #bodyCell="{ record, column }">
       <template v-if="column.dataIndex === 'alarmTitle'">
-        <div style="color: #2778ff">{{ record.alarmTitle }}</div>
+        <div style="color: rgba(255, 118, 54, 1)">{{ record.alarmTitle }}</div>
         {{ record.abnormalDescription }}
       </template>
       <template v-if="column.dataIndex === 'priority'">

hx-ai-intelligent/src/view/alarmManagement/equipmentAlarm/index.vue

@@ -2,7 +2,7 @@
   <ns-view-list-table v-bind="config" ref="mainRef">
     <template #bodyCell="{ record, column }">
       <template v-if="column.dataIndex === 'alarmTitle'">
-        <div style="color: #2778ff">{{ record.alarmTitle }}</div>
+        <div style="color: rgba(255, 118, 54, 1)">{{ record.alarmTitle }}</div>
         {{ record.abnormalDescription }}
       </template>
       <template v-if="column.dataIndex === 'priority'">