束管日报分析煤自然阶段数据分析

src/views/vent/bundle/bundleMonitorTable/index.vue

@@ -19,7 +19,14 @@
         </a-table>
         <div class="data-container">
           <div id="barChart" class="bar-chart"></div>
-          <div class="data-content"> </div>
+          <div class="data-content">
+            <div class="progress-label">缓慢氧化阶段(潜伏期)：{{ latentCount }}</div>
+            <Progress :percent="latentPercent" size="default" strokeColor="green" :show-info="false" />
+            <div class="progress-label">加速氧化阶段(自热期)：{{ selfHeatingCount }}</div>
+            <Progress :percent="selfHeatingPercent" size="default" strokeColor="yellow" :show-info="false" />
+            <div class="progress-label">剧烈氧化阶段(燃烧期)：{{ combustionCount }}</div>
+            <Progress :percent="combustionPercent" size="default" strokeColor="red" :show-info="false" />
+          </div>
         </div>
       </div>
     </div>
@@ -41,6 +48,8 @@ import customHeader from '/@/components/vent/customHeader.vue';
 import BlastDelta from './modal/blastDelta.vue';
 import BlastDelta1 from './modal/blastDelta1.vue';
 import * as echarts from 'echarts';
+import { Progress } from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css'; // 引入样式
 let selectList = ref<any[]>([]);
 let jcddArr = ref<any[]>([]);
 let formSearch = reactive({
@@ -49,11 +58,16 @@ let formSearch = reactive({
   fileId: '',
   fileName: '',
 });
+const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
+const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
+const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
+const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
+const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
+const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
 let tableData = ref<any[]>([]);
 let modalVisible = ref(false);
 let selectedFileId = ref<string | null>(null);
 const posMonitor = shallowRef({});
-
 function updateChart(data: any) {
   const chartDom = document.getElementById('barChart');
   const myChart = echarts.init(chartDom);
@@ -202,11 +216,18 @@ function toDetail(record: any) {
   posMonitor.value = record;
   modalVisible.value = true;
 }
-//获取色谱仪报表
+//获取束管日报
 async function getTableList(params: any) {
   let res = await getBundleInfoList({ type: 'bundle', ...params });
   const content = res.content;
   let contentArr = JSON.parse(content);
+  latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化阶段（潜伏期）').length;
+  selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化阶段（自热期）').length;
+  combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化阶段（燃烧期）').length;
+  const total = contentArr.length;
+  latentPercent.value = (latentCount.value / total) * 100;
+  selfHeatingPercent.value = (selfHeatingCount.value / total) * 100;
+  combustionPercent.value = (combustionCount.value / total) * 100;
   tableData.value = contentArr;
   nextTick(() => {
     updateChart(contentArr);
@@ -317,6 +338,7 @@ onMounted(() => {
   flex-direction: column; /* 垂直排列进度条 */
   align-items: center; /* 水平居中 */
 }
+
 .dustMonitor {
   width: 100%;
   height: 100%;
@@ -350,4 +372,18 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
 }
+.progress {
+  width: 100%;
+  height: 20px;
+  margin-top: 10px;
+}
+.progress-label {
+  margin-top: 10px;
+  text-align: center;
+  margin-bottom: 5px;
+  color: #fff;
+}
+::deep .progress-text {
+  color: #fff !important; /* 自定义百分比文字颜色 */
+}
 </style>