束管分析

src/views/vent/bundle/bundleMonitorTable/bundle-table.data.ts

@@ -136,6 +136,12 @@ export const columns: BasicColumn[] = [
     ],
   },
   {
+    title: '煤自然阶段',
+    dataIndex: 'internalFireWarnLevel',
+    width: 100,
+    align: 'center',
+  },
+  {
     title: '操作',
     dataIndex: 'action',
     width: 100,

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

@@ -17,7 +17,10 @@
             </template>
           </template>
         </a-table>
-        <div id="barChart" class="bar-chart"></div>
+        <div class="data-container">
+          <div id="barChart" class="bar-chart"></div>
+          <div class="data-content"> </div>
+        </div>
       </div>
     </div>
     <a-modal style="width: 50%; height: 300px" title="爆炸三角形" v-model:visible="modalVisible" :draggable="true" :footer="null">
@@ -38,7 +41,6 @@ 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 { color } from 'echarts/core';
 let selectList = ref<any[]>([]);
 let jcddArr = ref<any[]>([]);
 let formSearch = reactive({
@@ -75,6 +77,8 @@ function updateChart(data: any) {
       textStyle: {
         color: '#ffffff', // 设置标题颜色
       },
+      left: 'center', // 水平居中
+      top: '0', // 设置标题距离顶部的距离
     },
     tooltip: {
       trigger: 'axis',
@@ -91,10 +95,16 @@ function updateChart(data: any) {
       },
     },
     legend: {
-      top: 10,
+      top: '8%',
       textStyle: {
         color: '#ffffffff',
       },
+      width: '80%', // 设置图例的宽度
+      orient: 'horizontal', // 水平布局
+      pageIconColor: '#ffffff', // 设置翻页图标颜色
+      pageTextStyle: {
+        color: '#ffffff', // 设置翻页文字颜色
+      },
     },
     xAxis: {
       type: 'category',
@@ -104,7 +114,7 @@ function updateChart(data: any) {
         interval: 0, // 显示所有标签
         color: '#ffffff', // 设置 x 轴字体颜色
         formatter: function (value: string) {
-          return value.length > 11 ? value.slice(0, 11) + '...' : value; // 截断长标签
+          return value.length > 8 ? value.slice(0, 8) + '...' : value; // 截断长标签
         },
       },
     },
@@ -115,64 +125,71 @@ function updateChart(data: any) {
         color: '#ffffff',
       },
     },
+    grid: {
+      top: '21%', // 设置 grid 距离顶部的距离，增加间隔
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
     series: [
       {
-        name: 'C₂H₂ 最大值',
+        name: 'C₂H₂最大值',
         data: c2h2MaxValues,
         type: 'bar',
       },
       {
-        name: 'C₂H₂ 平均值',
+        name: 'C₂H₂平均值',
         data: c2h2AveValues,
         type: 'bar',
       },
       {
-        name: 'C₂H₄ 最大值',
+        name: 'C₂H₄最大值',
         data: c2h4MaxValues,
         type: 'bar',
       },
       {
-        name: 'C₂H₄ 平均值',
+        name: 'C₂H₄平均值',
         data: c2h4AveValues,
         type: 'bar',
       },
       {
-        name: 'CH₄ 最大值',
+        name: 'CH₄最大值',
         data: ch4MaxValues,
         type: 'bar',
       },
       {
-        name: 'CH₄ 平均值',
+        name: 'CH₄平均值',
         data: ch4AveValues,
         type: 'bar',
       },
       {
-        name: 'CO₂ 最大值',
+        name: 'CO₂最大值',
         data: co2MaxValues,
         type: 'bar',
       },
       {
-        name: 'CO₂ 平均值',
+        name: 'CO₂平均值',
         data: co2AveValues,
         type: 'bar',
       },
       {
-        name: 'CO 最大值',
+        name: 'CO最大值',
         data: coMaxValues,
         type: 'bar',
       },
       {
-        name: 'CO 平均值',
+        name: 'CO平均值',
         data: coAveValues,
         type: 'bar',
       },
       {
-        name: 'O₂ 最小值',
+        name: 'O₂最小值',
         data: o2MinValues,
         type: 'bar',
       },
       {
-        name: 'O₂ 平均值',
+        name: 'O₂平均值',
         data: o2AveValues,
         type: 'bar',
       },
@@ -185,7 +202,6 @@ function toDetail(record: any) {
   posMonitor.value = record;
   modalVisible.value = true;
 }
-
 //获取色谱仪报表
 async function getTableList(params: any) {
   let res = await getBundleInfoList({ type: 'bundle', ...params });
@@ -282,7 +298,25 @@ onMounted(() => {
   width: 80%;
   box-sizing: border-box;
 }
+.data-container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
 
+.bar-chart {
+  flex: 3; /* 占据 3/4 的空间 */
+  width: 100%;
+  height: 400px;
+}
+
+.data-content {
+  flex: 1; /* 占据 1/4 的空间 */
+  height: 100%;
+  display: flex;
+  flex-direction: column; /* 垂直排列进度条 */
+  align-items: center; /* 水平居中 */
+}
 .dustMonitor {
   width: 100%;
   height: 100%;
@@ -291,6 +325,10 @@ onMounted(() => {
   position: relative;
 }
 
+.yellow-progress .ant-progress-bg {
+  background-color: yellow !important;
+}
+
 :deep(.zxm-table-thead > tr > th:last-child) {
   border-right: 1px solid #91e9fe !important;
 }
@@ -312,9 +350,4 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
 }
-.bar-chart {
-  width: 100%;
-  height: 400px;
-  margin-top: 50px;
-}
 </style>