11111

components/charts/PeakWarningTypeChart.vue

@@ -147,8 +147,8 @@ export default {
             name: '',
             type: 'pie',
             roundCap: true,
-            radius: ['26%', '50%'],
-            center: ['20%', '50%'],
+            radius: ['40%', '60%'],
+            center: ['20.2%', '57%'],
             label: {
               show: false
             },

components/peak-coal-monitoring/MonitorData2.vue

@@ -0,0 +1,75 @@
+<template>
+<div class="monitor-data">
+  <peak-secondary-title :title="title"/>
+  <div class="table-content">
+    <peak-custom-table :table-title="tableTitle" :data-source="dataSource" :limit-move-num="4"/>
+  </div>
+</div>
+</template>
+
+<script>
+import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
+import PeakCustomTable from "@/components/peak-coal-monitoring/PeakCustomTable";
+export default {
+  name: "MonitorData",
+  components: {PeakCustomTable, PeakSecondaryTitle},
+  data(){
+    return{
+      title: '报警信息汇总',
+      tableTitle: [
+        {
+          title: '报警时间',
+          dataIndex: 'alarmTime',
+          width: '35%'
+        },
+        {
+          title: '报警类型',
+          dataIndex: 'eventType',
+          width: '25%'
+        },
+        {
+          title: '报警内容',
+          dataIndex: 'content',
+          width: '40%'
+        }
+      ],
+      dataSource: [
+        {
+          alarmTime: '2024年6月11日21:46:36',
+          eventType: '排放超标',
+          content: 'xxxxx'
+        },
+        {
+          alarmTime: '2024年6月11日21:46:36',
+          eventType: '排放超标',
+          content: 'xxxxx'
+        },
+        {
+          alarmTime: '2024年6月11日21:46:36',
+          eventType: '排放超标',
+          content: 'xxxxx'
+        },
+        {
+          alarmTime: '2024年6月11日21:46:36',
+          eventType: '排放超标',
+          content: 'xxxxx'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "assets/styles/mixin";
+.monitor-data{
+  height: 100%;
+  width: 100%;
+  .flex-column;
+  .table-content{
+    padding-top: 20px;
+    flex: 1;
+    height: 0;
+  }
+}
+</style>

pages/peak-coal-monitoring/PeakCoalMonitoring.vue

@@ -21,12 +21,13 @@
       <div class="atmospheric-module-module">
         <atmospheric-module />
       </div>
-      <div class="device-online-rate">
-        <device-online-rate />
-      </div>
+
       <div class="monitor-data-module">
         <monitor-data/>
       </div>
+<!--      <div class="monitor-data-module">
+        <monitor-data2/>
+      </div>-->
     </div>
 
     <div class="right-panel show-top">
@@ -34,10 +35,10 @@
         <energy-profile/>
       </div>
       <div class="device-overview-module">
-        <peak-energy-use/>
+        <device-overview/>
       </div>
       <div class="alarm-overview-module">
-        <excessive-warning/>
+        <alarm-overview/>
       </div>
     </div>
 
@@ -50,6 +51,7 @@
 import AtmosphericModule from "@/components/peak-coal-monitoring/AtmosphericModule";
 import PollutionInformation from "@/components/peak-coal-monitoring/PollutionInformation";
 import MonitorData from "@/components/peak-coal-monitoring/MonitorData";
+import MonitorData2 from "@/components/peak-coal-monitoring/MonitorData2";
 import EnergyProfile from "@/components/peak-coal-monitoring/EnergyProfile";
 import DeviceOverview from "@/components/peak-coal-monitoring/DeviceOverview";
 import AlarmOverview from "@/components/peak-coal-monitoring/AlarmOverview";
@@ -60,16 +62,9 @@ import GBZDialog from "@/components/GBZDialog";
 import CEMSDialog from "@/components/CEMSDialog";
 import pointDialog from '@/components/PointDialog'
 import {mapState} from "vuex";
-import DeviceOnlineRate from "@/components/peak-coal-monitoring/DeviceOnlineRate";
-import PeakEnergyUse from "@/components/peak-coal-monitoring/PeakEnergyUse";
-import ExcessiveWarning from "@/components/peak-coal-monitoring/ExcessiveWarning";
 export default {
   name: "PeakCoalMonitoring",
-  components: {
-    ExcessiveWarning,
-    PeakEnergyUse,
-    DeviceOnlineRate,
-    AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule},
+  components: {AlarmOverview, DeviceOverview, EnergyProfile, MonitorData, PollutionInformation, AtmosphericModule, MonitorData2},
   computed: {
     ...mapState({
       title: state => state.system.title,
@@ -249,12 +244,9 @@ body, html, #__nuxt, #__layout {
     padding-right: 0;
 
     .atmospheric-module-module{
-      height: 230px;
+      height: 336px;
       width: 100%;
     }
-    .device-online-rate{
-      height: 230px;
-    }
 
     .pollution-information-module{
       height: 260px;