[Mod 0000] 整改需求变更

src/components/Configurable/detail/CustomChart.vue

@@ -708,6 +708,10 @@
           return {
             ...e,
             type: 'category',
+            axisLabel: {
+              width: 100,
+              overflow: 'break',
+            },
           };
         }),
         yAxis: yAxis.map((e, i) => {

src/components/Configurable/preset/BlastDelta.vue

@@ -6,13 +6,19 @@
         <div :style="{ width: '5px', height: `${lengY}px`, 'border-top': '1px solid #0079ff' }" v-for="item in 10" :key="item"></div>
       </div>
       <div class="coord-labelY">
-        <div :style="{ width: '20px', height: `${lengY}px`, color: textColor }" v-for="(ite, ind) in 10" :key="ind">{{ ind == 0 ? maxY : '' }}</div>
+        {{ maxY }}%
+        <!-- <div :style="{ width: '20px', height: `${lengY}px`, color: textColor }" v-for="(ite, ind) in 10" :key="ind">
+          {{ ind == 0 ? `${maxY}%` : '' }}
+        </div> -->
       </div>
       <div class="coord-lineX">
         <div :style="{ height: '5px', width: `${lengY}px`, 'border-right': '1px solid #0079ff' }" v-for="item in 15" :key="item"></div>
       </div>
       <div class="coord-labelX">
-        <div :style="{ height: '20px', width: `${lengY}px`, color: textColor }" v-for="(ite, ind) in 15" :key="ind">{{ ind == 14 ? maxX : '' }}</div>
+        {{ maxX }}%
+        <!-- <div :style="{ height: '20px', width: `${lengY}px`, color: textColor }" v-for="(ite, ind) in 15" :key="ind">
+          {{ ind == 13 ? `${maxX}%` : '' }}
+        </div> -->
       </div>
       <div class="line-AB" :style="{ width: 'calc(100% - 10px)', height: 'calc(100% - 10px)' }">
         <canvas id="myCanvas" :width="canvasSize.width" :height="canvasSize.height"></canvas>
@@ -80,7 +86,7 @@
     },
     legendStyle: {
       type: Object,
-      default: () => ({ left: '50%', top: '20px' }),
+      default: () => ({ left: '10%', top: '-5px' }),
     },
   });
 
@@ -100,7 +106,7 @@
     G: { x: 0, y: 0 },
   });
 
-  const legendList = ref([{ name: '不爆炸' }, { name: '可燃气体不足' }, { name: '可爆炸' }, { name: '氧气不足' }]);
+  const legendList = ref([{ name: '增减风安全区' }, { name: '减风危险区' }, { name: '爆炸危险区' }, { name: '增风危险区' }]);
 
   // 工具函数
   const getAxisLength = () => {
@@ -139,7 +145,7 @@
     ctx.fill();
 
     ctx.font = '12px Arial';
-    ctx.fillStyle = '#fff';
+    ctx.fillStyle = '#000';
     ctx.fillText(label, x + offsetX, y + offsetY);
   };
 
@@ -378,11 +384,11 @@
 
     .line-legend {
       position: absolute;
-      left: 50%;
+      left: 10%;
       top: 20px;
-      width: 75%;
+      width: 90%;
       height: 20px;
-      transform: translate(-50%, 0);
+      // transform: translate(-50%, 0);
       display: flex;
       justify-content: space-around;
 
@@ -401,18 +407,18 @@
             width: 10px;
             height: 10px;
             background-color: #7ffe02;
-            margin-right: 5px;
+            margin-right: 3px;
           }
         }
 
         &:nth-child(2) {
-          flex: 1.5;
+          flex: 1;
 
           .legend-icon {
             width: 10px;
             height: 10px;
             background-color: #017f02;
-            margin-right: 5px;
+            margin-right: 3px;
           }
         }
 
@@ -423,7 +429,7 @@
             width: 10px;
             height: 10px;
             background-color: #ff0000;
-            margin-right: 5px;
+            margin-right: 3px;
           }
         }
 
@@ -434,7 +440,7 @@
             width: 10px;
             height: 10px;
             background-color: #ffff00;
-            margin-right: 5px;
+            margin-right: 3px;
           }
         }
       }
@@ -461,8 +467,8 @@
       .coord-labelY {
         position: absolute;
         left: -20px;
-        top: -5px;
-        width: 20px;
+        top: -20px;
+        width: 30px;
         height: 100%;
       }
 

src/components/Table/src/BasicTable.vue

@@ -487,6 +487,15 @@
         // background-color: @app-content-background;
         background-color: @table-striped-bg-color;
       }
+
+      .ant-table-cell-fix-left,
+      td {
+        background-color: @table-striped-bg-color;
+      }
+      .ant-table-cell-fix-right,
+      td {
+        background-color: @table-striped-bg-color;
+      }
     }
     // 代码逻辑说明: 【TV360X-1232】查询区域隐藏后点击刷新不走请求了(采用css隐藏)
     > .table-search-area-hidden {

src/layouts/default/feature/components/LeafPopup.vue

@@ -85,7 +85,6 @@
   function clickHandler() {
     props.callback(props.node);
   }
-  console.log('debug rr', props.node);
   const linkStatusText = ref(['断线', '正常', '标校']);
   const alarmLevelText = ref(['暂无信息', '低风险', '一般风险', '较高风险', '高风险']);
   const alarmLevelColor = ref([StatusColorEnum.red, StatusColorEnum.blue, StatusColorEnum.gold, StatusColorEnum.purple, StatusColorEnum.red]);

src/settings/componentSetting.ts

@@ -22,24 +22,24 @@ export default {
     // 表格默认尺寸
     defaultSize: 'middle',
     //默认每页显示多少条
-    defaultPageSize: 10,
+    defaultPageSize: 100,
     // 默认排序方法
     defaultSortFn: (sortInfo: SorterResult) => {
       // 代码逻辑说明: VUEN-2199【表单设计器】多字段排序
-      if(sortInfo instanceof Array){
-        const sortInfoArray:any[] = []
-        for(const item of sortInfo){
+      if (sortInfo instanceof Array) {
+        const sortInfoArray: any[] = [];
+        for (const item of sortInfo) {
           const info = getSort(item);
-          if(info){
-            sortInfoArray.push(info)
+          if (info) {
+            sortInfoArray.push(info);
           }
         }
         return {
-          sortInfoString: JSON.stringify(sortInfoArray)
-        }
-      }else{
-        const info = getSort(sortInfo)
-        return info || {}
+          sortInfoString: JSON.stringify(sortInfoArray),
+        };
+      } else {
+        const info = getSort(sortInfo);
+        return info || {};
       }
     },
     // 自定义过滤方法
@@ -76,7 +76,7 @@ export default {
  * 获取排序信息
  * @param item
  */
-function getSort(item){
+function getSort(item) {
   const { field, order } = item;
   if (field && order) {
     const sortType = 'ascend' == order ? 'asc' : 'desc';
@@ -87,5 +87,5 @@ function getSort(item){
       order: sortType,
     };
   }
-  return ''
+  return '';
 }

src/views/analysis/warningAnalysis/airLeakStatus/airLeakStatus.data.ts

@@ -13,11 +13,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -73,7 +75,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },
@@ -119,12 +121,12 @@ export const columns: BasicColumn[] = [
 //     width: 100,
 //   },
 //   {
-//     title: '密闭内压力',
+//     title: '密密闭墙内压力',
 //     dataIndex: 'sourcePressure',
 //     width: 100,
 //   },
 //   {
-//     title: '密闭外压力',
+//     title: '密密闭墙外压力',
 //     dataIndex: 'sourcePressure',
 //     width: 100,
 //   },
@@ -134,7 +136,7 @@ export const columns: BasicColumn[] = [
 //     width: 100,
 //   },
 //   {
-//     title: '预警时间',
+//     title: '分析时间',
 //     dataIndex: 'createTime',
 //     width: 100,
 //   },

src/views/analysis/warningAnalysis/airLeakStatus/index.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-    <TabPane tab="实时监测" key="realtime">
+    <TabPane tab="实时分析" key="realtime">
       <div class="board-info">
         <div v-for="(item, index) in boardData" :key="index" class="board-item">
           <MiniBoard type="A" :label="item.label" :value="item.value" layout="label-top" />
@@ -71,8 +71,8 @@
 
   const boardData = ref([
     { label: '存在风险情况数量', value: '-' },
-    { label: '闭内气体涌出', value: '-' },
-    { label: '闭外气体涌入', value: '-' },
+    { label: '密闭墙内气体涌出', value: '-' },
+    { label: '密闭墙外气体涌入', value: '-' },
   ]);
 
   const wrappedGetMineData = (params) => {

src/views/analysis/warningAnalysis/autoFireAnalysis/autoFireAnalysis.data.ts

@@ -28,11 +28,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -114,7 +116,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/autoFireAnalysis/index.vue

@@ -3,7 +3,7 @@
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
     <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-      <TabPane tab="实时监测" key="realtime">
+      <TabPane tab="实时分析" key="realtime">
         <div class="board-info">
           <MiniBoard
             v-for="(item, index) in boardData"

src/views/analysis/warningAnalysis/autoFireOutAnalysis/autoFireOutAnalysis.data.ts

@@ -28,11 +28,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -99,7 +101,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/autoFireOutAnalysis/index.vue

@@ -3,7 +3,7 @@
   <div class="monitoring-page">
     <!-- 新增Tabs组件区分实时/历史数据 -->
     <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-      <TabPane tab="实时监测" key="realtime">
+      <TabPane tab="实时分析" key="realtime">
         <div class="board-info">
           <MiniBoard
             v-for="(item, index) in boardData"

src/views/analysis/warningAnalysis/connectAnalysis/AnalysisChart.vue

@@ -0,0 +1,287 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="connectAnalysis">
+    <div class="filter-area">
+      <Row style="width: 100%">
+        <Col v-if="!requestParams" :span="7">
+          <div class="filter-section param-section">
+            <span class="filter-label">煤矿名称：</span>
+            <div class="param-selector">
+              <MineCascader
+                v-model:value="innerValue"
+                style="width: 330px"
+                :sync-to-store="false"
+                :init-from-store="false"
+                :change-on-select="false"
+                @change="changeCascader"
+              ></MineCascader>
+            </div>
+          </div>
+        </Col>
+        <Col v-if="!requestParams" :span="7">
+          <!-- 时间选择 -->
+          <div class="filter-section param-section">
+            <span class="filter-label">老空区永久密闭：</span>
+            <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择老空区">
+              <SelectOption v-for="(item, index) in goafOptions" :key="index" :value="item.value">{{ item.label }} </SelectOption>
+            </Select>
+          </div>
+        </Col>
+        <Col :span="6">
+          <div class="filter-section param-section">
+            <span class="filter-label">时间选择：</span>
+            <RangePicker
+              v-model:value="dateRange"
+              format="YYYY-MM-DD HH:mm:ss"
+              :placeholder="['开始时间', '结束时间']"
+              style="width: 300px"
+              :show-time="{ format: 'HH:mm:ss' }"
+              @change="changeTime"
+            />
+          </div>
+        </Col>
+        <Col :span="4">
+          <div class="filter-section">
+            <Button type="primary" @click="generateChart" :loading="loading">
+              <template #icon>
+                <SvgIcon style="margin-right: 10px" name="shencen" />
+              </template>
+              生成
+            </Button>
+          </div>
+        </Col>
+      </Row>
+    </div>
+    <!-- 动态图表区域-->
+    <div class="echart-box">
+      <div class="check-title">
+        <CheckboxNav :options="checkboxOptions" @check-box-change="checkBoxChange"></CheckboxNav>
+      </div>
+      <div class="check-line">
+        <echartDivder></echartDivder>
+      </div>
+      <div class="echart-content">
+        <echartContent :echartData="echartData" :x-axis="xAxis" :y-axis="yAxis"></echartContent>
+      </div>
+      <div class="check-line">
+        <echartDivder></echartDivder>
+      </div>
+      <div class="check-title">
+        <echartLengend :lengends="legendsOptions"></echartLengend>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, reactive } from 'vue';
+  import dayjs from 'dayjs';
+  import { Select, SelectOption, Row, Col, DatePicker, Button, message } from 'ant-design-vue';
+  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
+  import CheckboxNav from './components/checkbox-nav.vue';
+  import echartLengend from './components/echart-lengend.vue';
+  import echartContent from './components/echart-content.vue';
+  import echartDivder from './components/echart-divder.vue';
+  import { getGoafHistory } from './connectAnalysis.api';
+  // import { useRouter } from 'vue-router';
+  // import { useMineDepartmentStore } from '/@/store/modules/mine';
+  import { SvgIcon } from '/@/components/Icon';
+  import { useInitForm } from './hooks/form';
+
+  // 这个页面被其他的页面需要，故添加部分props以作复用
+  const props = withDefaults(
+    defineProps<{
+      /** 指定请求历史数据时携带的参数，指定后不会显示除了时间范围的表单 */
+      requestParams?: any;
+      /** 这是参数多选选项 */
+      checkboxOptions: {
+        label: string;
+        value: string;
+        color: string;
+        areaColor: string[];
+      }[];
+      /** 这是图例显示的选项 */
+      legendsOptions: {
+        label: string;
+      }[];
+      /** 历史数据取多少天之前到现在的数据 */
+      dateForm?: number;
+      xAxis?: number[];
+      yAxis?: {
+        name: string;
+        gridIndex: number;
+        min?: number;
+        position: string;
+        max?: number;
+      }[];
+    }>(),
+    {
+      dateForm: 30,
+    }
+  );
+
+  const { goafOptions, goafId, innerValue, loading, initGoafOptions } = useInitForm();
+
+  // 组件注册
+  const RangePicker: any = DatePicker.RangePicker;
+  // const { currentRoute } = useRouter();
+  // 筛选相关响应式数据
+  const dateRange = ref([dayjs().add(-props.dateForm, 'day'), dayjs()]); // 默认时间范围（近1天）
+  // const mineStore = useMineDepartmentStore();
+  const checkList = ref<any[]>(props.checkboxOptions.map((e) => e.value)); //当前选中要进行显示的选项
+  const echartData = reactive({
+    xData: [] as any,
+    yData: [] as any,
+    flag: true,
+  });
+
+  //煤矿选项切换
+  function changeCascader(val) {
+    innerValue.value = val;
+    initGoafOptions(val).then(() => {
+      if (echartData.flag) {
+        generateChart();
+      }
+    });
+  }
+  //时间选择选项切换
+  function changeTime(val) {
+    dateRange.value[0] = val[0];
+    dateRange.value[1] = val[1];
+  }
+  //图表选项标签切换
+  function checkBoxChange(val) {
+    checkList.value = val.checkedList;
+    generateChart();
+  }
+
+  // 生成折线图核心逻辑
+  async function generateChart() {
+    echartData.yData.length = 0;
+    echartData.flag = false;
+    if (!goafId.value) {
+      return message.info('请先选择煤矿及老空区');
+    }
+
+    const startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
+    const endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
+    const res = await getGoafHistory({
+      pageNo: 1,
+      pageSize: 1000,
+      startTime: startTime,
+      endTime: endTime,
+      goafId: goafId.value,
+      ...(props.requestParams || {}),
+    });
+    if (res) {
+      const data = res.records || [];
+      if (data.length) {
+        echartData.xData = data.map((e) => e.createTime);
+        if (checkList.value.length) {
+          checkList.value.forEach((el) => {
+            echartData.yData.push({
+              label: el,
+              value: data,
+            });
+          });
+        }
+      }
+    }
+  }
+
+  //获取采空区列表
+  // async function getGoafListData() {
+  //   let res = await getGoafList({ mineCode: innerValue.value });
+  //   console.log(res, '90');
+  //   goafOption.value =
+  //     res.map((el) => {
+  //       return {
+  //         label: el.devicePos,
+  //         value: el.id,
+  //       };
+  //     }) || [];
+  //   goafId.value = goafOption.value.length ? (goafId.value ? goafId.value : goafOption.value[0]['value']) : '';
+  // }
+</script>
+
+<style lang="less" scoped>
+  .connectAnalysis {
+    width: 100%;
+    // height: 100%;
+    // margin: 10px 0px 0px 10px;
+    // padding: 10px;
+    box-sizing: border-box;
+    // border: 1px solid @border-color-base;
+    // border-radius: 4px;
+    // background: @card-bg-color;
+    //background-color: @card-bg-color;
+    align-items: center;
+    // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
+  }
+
+  .filter-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 20px;
+    border: 1px solid @border-color-base;
+    border-radius: 4px;
+    // background: @card-bg-color;
+    background-color: @card-bg-color;
+    align-items: center;
+    // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
+  }
+
+  .filter-section {
+    display: flex;
+    align-items: center;
+  }
+
+  .filter-label {
+    color: #666;
+    min-width: 70px;
+    flex-shrink: 0;
+    font-weight: 500;
+  }
+
+  .param-section {
+    flex: 1;
+    // min-width: 300px;
+  }
+
+  .param-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+  }
+
+  .echart-box {
+    width: 100%;
+    height: calc(100% - 95px);
+  }
+
+  .check-title {
+    height: 40px;
+    line-height: 40px;
+    background-color: @table-thead-bg-color;
+    border-radius: 4px;
+    padding: 0px 20px;
+    box-sizing: border-box;
+    margin: 15px 0px;
+  }
+
+  .check-line {
+    width: 100%;
+  }
+
+  .echart-content {
+    width: 100%;
+    height: calc(100% - 112px);
+  }
+
+  :deep(.ant-btn-primary) {
+    display: flex !important;
+    align-items: center !important;
+  }
+</style>

src/views/analysis/warningAnalysis/connectAnalysis/components/checkbox-nav.vue

@@ -2,7 +2,7 @@
   <div class="check-nav">
     <Checkbox v-model:checked="state.checkAll" :indeterminate="state.indeterminate" @change="onCheckAllChange"> 全选 </Checkbox>
     <CheckboxGroup v-model:value="state.checkedList" @change="onChangeGroup">
-      <Checkbox v-for="item in plainOptions" :key="item.value" :value="item.value">
+      <Checkbox v-for="item in options" :key="item.value" :value="item.value">
         {{ item.label }}
       </Checkbox>
     </CheckboxGroup>
@@ -12,18 +12,23 @@
 <script setup lang="ts">
   import { reactive } from 'vue';
   import { Checkbox, CheckboxGroup } from 'ant-design-vue';
-  import { plainOptions } from '../connectAnalysis.data';
+  // import { plainOptions } from '../connectAnalysis.data';
+
+  const props = defineProps<{
+    options: any[];
+  }>();
 
   const state = reactive({
     indeterminate: true,
     checkAll: false,
-    checkedList: ['coVal', 'c2h4Val', 'c2h2Val', 'ch4Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature'],
+    checkedList: props.options.map((e) => e.value),
   });
-  let $emit = defineEmits(['checkBoxChange']);
+
+  const $emit = defineEmits(['checkBoxChange']);
+
   const onCheckAllChange = (e: any) => {
-    let checkVal = plainOptions.map((v) => v.value);
     Object.assign(state, {
-      checkedList: e.target.checked ? checkVal : [],
+      checkedList: e.target.checked ? props.options.map((v) => v.value) : [],
       indeterminate: false,
     });
     $emit('checkBoxChange', state);
@@ -42,11 +47,11 @@
     height: 100%;
 
     .ant-checkbox-wrapper {
-      width: 130px;
+      width: 80px;
     }
 
     .ant-checkbox-group {
-      width: calc(100% - 130px);
+      width: calc(100% - 80px);
       display: flex;
       justify-content: space-between;
     }

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-content.vue

@@ -7,21 +7,39 @@
   // import { plainOptions} from '../connectAnalysis.data'
   import * as echarts from 'echarts';
 
-  let props = defineProps({
+  const props = defineProps({
     echartData: {
       type: Object,
       default: () => {
         return {};
       },
     },
+    xAxis: {
+      type: Array,
+      default: () => {
+        return [0, 1, 2];
+      },
+    },
+    /** { name, position, min, max } */
+    yAxis: {
+      type: Array,
+      default: () => {
+        return [
+          { name: 'ppm', gridIndex: 0, min: 0, position: 'left' },
+          { name: '%', gridIndex: 1, min: 0, position: 'left', max: 100 },
+          { name: 'kPa', gridIndex: 2, min: 2, position: 'left' },
+          { name: '℃', gridIndex: 2, min: 0, position: 'right' },
+        ];
+      },
+    },
   });
   //获取dom元素节点
-  let line = ref<any>();
+  const line = ref<any>();
 
   // function initSeries(param) {
   //   if (param.length) {
-  //     let data = param.map((el) => {
-  //       let seriesD = plainOptions.find((v) => v.value == el.label);
+  //     const data = param.map((el) => {
+  //       const seriesD = plainOptions.find((v) => v.value == el.label);
   //       return {
   //         name: seriesD['label'],
   //         type: 'line',
@@ -88,8 +106,9 @@
 
   function getOption(param) {
     nextTick(() => {
-      let myChart = echarts.init(line.value);
-      let commonAxis = {
+      const myChart = echarts.init(line.value);
+
+      const commonXAxis = {
         boundaryGap: false,
         axisLabel: {
           color: '#74767b',
@@ -114,7 +133,29 @@
         },
       };
 
-      let option = {
+      const commonYAxis = {
+        type: 'value',
+        axisLabel: {
+          formatter: '{value}',
+          color: '#74767b',
+        },
+        nameTextStyle: {
+          color: '#74767b',
+          fontSize: 14,
+          lineHeight: 10,
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+      };
+
+      const option = {
         grid: [
           {
             left: '2%',
@@ -146,142 +187,20 @@
             fontSize: 12,
           },
         },
-        xAxis: [
-          {
-            ...commonAxis,
-            type: 'category',
-            gridIndex: 0,
-            data: param.xData || [],
-          },
-          {
-            ...commonAxis,
+        xAxis: props.xAxis.map((ele) => {
+          return {
+            ...commonXAxis,
             type: 'category',
-            gridIndex: 1,
+            gridIndex: ele,
             data: param.xData || [],
-          },
-          {
-            ...commonAxis,
-            type: 'category',
-            gridIndex: 2,
-            data: param.xData || [],
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'ppm',
-            gridIndex: 0,
-            position: 'left',
-            min: 0,
-            axisLabel: {
-              formatter: '{value}',
-              color: '#74767b',
-            },
-            nameTextStyle: {
-              color: '#74767b',
-              fontSize: 14,
-              lineHeight: 10,
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'dashed',
-                color: 'rgba(209, 229, 253)',
-              },
-            },
-          },
-          {
-            type: 'value',
-            name: '%',
-            gridIndex: 1,
-            position: 'left',
-            min: 0,
-            max: 100,
-            axisLabel: {
-              formatter: '{value}',
-              color: '#74767b',
-            },
-            nameTextStyle: {
-              color: '#74767b',
-              fontSize: 14,
-              lineHeight: 10,
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'dashed',
-                color: 'rgba(209, 229, 253)',
-              },
-            },
-          },
-          {
-            type: 'value',
-            name: 'kPa',
-            gridIndex: 2,
-            position: 'left',
-            min: 0,
-            axisLabel: {
-              formatter: '{value}',
-              color: '#74767b',
-            },
-            nameTextStyle: {
-              color: '#74767b',
-              fontSize: 14,
-              lineHeight: 10,
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'dashed',
-                color: 'rgba(209, 229, 253)',
-              },
-            },
-          },
-          {
-            type: 'value',
-            name: '℃',
-            gridIndex: 2,
-            position: 'right',
-            offset: 0,
-            min: 0,
-            axisLabel: {
-              formatter: '{value}',
-              color: '#74767b',
-            },
-            nameTextStyle: {
-              color: '#74767b',
-              fontSize: 14,
-              lineHeight: 10,
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-          },
-        ],
+          };
+        }),
+        yAxis: props.yAxis.map((ele: any) => {
+          return {
+            ...ele,
+            ...commonYAxis,
+          };
+        }),
         series: [
           buildLineSeries(param, 'CO浓度(ppm)', 'coVal', '#3bd97a', 'rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)', 0, 0),
           buildLineSeries(param, 'C2H4浓度(ppm)', 'c2h4Val', '#d35400', 'rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)', 0, 0),
@@ -291,6 +210,13 @@
           buildLineSeries(param, 'O2浓度(%)', 'o2Val', '#ff6666', 'rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)', 1, 1),
           buildLineSeries(param, '压差(kPa)', 'sourcePressure', '#3b4bd9', 'rgba(59, 75, 217,0.1)', 'rgba(59, 75, 217,0.8)', 2, 2),
           buildLineSeries(param, '温度(℃)', 'temperature', '#f18736', 'rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)', 2, 3),
+          buildLineSeries(param, '密闭墙外CO浓度(ppm)', 'coValOut', '#3bd97a', 'rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)', 0, 0),
+          buildLineSeries(param, '密闭墙外C2H4浓度(ppm)', 'c2h4ValOut', '#d35400', 'rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)', 0, 0),
+          buildLineSeries(param, '密闭墙外C2H2浓度(ppm)', 'c2h2ValOut', '#c0392b', 'rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)', 0, 0),
+          buildLineSeries(param, '密闭墙外CH4浓度(%)', 'ch4ValOut', '#f9c74a', 'rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)', 1, 1),
+          buildLineSeries(param, '密闭墙外CO2浓度(%)', 'co2ValOut', '#1fd0da', 'rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)', 1, 1),
+          buildLineSeries(param, '密闭墙外O2浓度(%)', 'o2ValOut', '#ff6666', 'rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)', 1, 1),
+          buildLineSeries(param, '密闭墙外温度(℃)', 'temperatureOut', '#f18736', 'rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)', 2, 3),
         ],
         dataZoom: [
           {
@@ -310,6 +236,7 @@
   }
 
   watchEffect(() => {
+    console.log('dbeug rr', props.echartData);
     if (props.echartData.xData.length || props.echartData.yData.length) {
       props.echartData && getOption(props.echartData);
     }

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-lengend.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="echart-lengend">
-    <div v-for="(item, index) in lengendTitle" :key="index" class="lengend-box">
+    <div v-for="(item, index) in lengends" :key="index" class="lengend-box">
       <div class="lengend-icon"></div>
       <div class="lengend-label">{{ item.label }}</div>
     </div>
@@ -9,7 +9,11 @@
 
 <script setup lang="ts">
   // import { ref } from 'vue';
-  import { lengendTitle } from '../connectAnalysis.data';
+  // import { lengendTitle } from '../connectAnalysis.data';
+
+  defineProps<{
+    lengends: any[];
+  }>();
 </script>
 
 <style lang="less" scoped>
@@ -23,6 +27,7 @@
     .lengend-box {
       display: flex;
       align-items: center;
+      padding-left: 80px;
 
       &:nth-child(1) {
         .lengend-icon {

src/views/analysis/warningAnalysis/connectAnalysis/connectAnalysis.data.ts

@@ -1,21 +1,43 @@
 export const plainOptions: any[] = [
   { label: 'CO浓度(ppm)', value: 'coVal', color: '#3bd97a', areaColor: ['rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)'] },
-  { label: 'C2H4浓度(ppm)', value: 'c2h4Val', color: '#d35400', areaColor: ['rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)'] },
-  { label: 'C2H2浓度(ppm)', value: 'c2h2Val', color: '#c0392b', areaColor: ['rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)'] },
-  { label: 'CH4浓度(%)', value: 'ch4Val', color: '#f9c74a', areaColor: ['rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)'] },
-  { label: 'CO2浓度(%)', value: 'co2Val', color: '#1fd0da', areaColor: ['rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)'] },
-  { label: 'O2浓度(%)', value: 'o2Val', color: '#ff6666', areaColor: ['rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)'] },
+  // { label: 'C2H4浓度(ppm)', value: 'c2h4Val', color: '#d35400', areaColor: ['rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)'] },
+  // { label: 'C2H2浓度(ppm)', value: 'c2h2Val', color: '#c0392b', areaColor: ['rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)'] },
+  // { label: 'CH4浓度(%)', value: 'ch4Val', color: '#f9c74a', areaColor: ['rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)'] },
+  // { label: 'CO2浓度(%)', value: 'co2Val', color: '#1fd0da', areaColor: ['rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)'] },
+  // { label: 'O2浓度(%)', value: 'o2Val', color: '#ff6666', areaColor: ['rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)'] },
+  // { label: '压差(kPa)', value: 'sourcePressure', color: '#3b4bd9', areaColor: ['rgba(59, 75, 217,0.1)', 'rgba(59, 75, 217,0.8)'] },
+  // { label: '温度(℃)', value: 'temperature', color: '#f18736', areaColor: ['rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)'] },
+];
+
+export const plainOptionsOut: any[] = [
+  { label: '密闭墙外CO浓度(ppm)', value: 'coValOut', color: '#3bd97a', areaColor: ['rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)'] },
+  { label: '密闭墙外C2H4浓度(ppm)', value: 'c2h4ValOut', color: '#d35400', areaColor: ['rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)'] },
+  { label: '密闭墙外C2H2浓度(ppm)', value: 'c2h2ValOut', color: '#c0392b', areaColor: ['rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)'] },
+  { label: '密闭墙外CH4浓度(%)', value: 'ch4ValOut', color: '#f9c74a', areaColor: ['rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)'] },
+  { label: '密闭墙外CO2浓度(%)', value: 'co2ValOut', color: '#1fd0da', areaColor: ['rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)'] },
+  { label: '密闭墙外O2浓度(%)', value: 'o2ValOut', color: '#ff6666', areaColor: ['rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)'] },
   { label: '压差(kPa)', value: 'sourcePressure', color: '#3b4bd9', areaColor: ['rgba(59, 75, 217,0.1)', 'rgba(59, 75, 217,0.8)'] },
-  { label: '温度(℃)', value: 'temperature', color: '#f18736', areaColor: ['rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)'] },
+  { label: '密闭墙外温度(℃)', value: 'temperatureOut', color: '#f18736', areaColor: ['rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)'] },
 ];
 
 export const lengendTitle = [
   { label: 'CO浓度(ppm)' },
-  { label: 'C2H4浓度(ppm)' },
-  { label: 'C2H2浓度(ppm)' },
-  { label: 'CH4浓度(%)' },
-  { label: 'CO2浓度(%)' },
-  { label: 'O2浓度(%)' },
+  // { label: 'C2H4浓度(ppm)' },
+  // { label: 'C2H2浓度(ppm)' },
+  // { label: 'CH4浓度(%)' },
+  // { label: 'CO2浓度(%)' },
+  // { label: 'O2浓度(%)' },
+  // { label: '压差(kPa)' },
+  // { label: '温度(℃)' },
+];
+
+export const lengendTitleOut = [
+  { label: '密闭墙外CO浓度(ppm)' },
+  { label: '密闭墙外C2H4浓度(ppm)' },
+  { label: '密闭墙外C2H2浓度(ppm)' },
+  { label: '密闭墙外CH4浓度(%)' },
+  { label: '密闭墙外CO2浓度(%)' },
+  { label: '密闭墙外O2浓度(%)' },
   { label: '压差(kPa)' },
-  { label: '温度(℃)' },
+  { label: '密闭墙外温度(℃)' },
 ];

src/views/analysis/warningAnalysis/connectAnalysis/hooks/form.ts

@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { getGoafSelectOption } from '/@/views/monitor/sealedMonitor/monitor.api';
 import { useMineDepartmentStore } from '/@/store/modules/mine';
 
-export function useInitForm() {
+export function useInitForm({ unlinkGoafId }: { unlinkGoafId?: boolean } = {}) {
   const mineStore = useMineDepartmentStore();
   const route = useRoute();
   const loading = ref(false);
@@ -31,6 +31,7 @@ export function useInitForm() {
     return getGoafSelectOption({ deptId })
       .then(({ options, defaultValue }) => {
         goafOptions.value = options;
+        if (unlinkGoafId) return;
         goafId.value = defaultValue;
       })
       .finally(() => {

src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -1,248 +1,28 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <div class="connectAnalysis">
-    <div class="filter-area">
-      <Row style="width: 100%">
-        <Col :span="7">
-          <div class="filter-section param-section">
-            <span class="filter-label">煤矿名称：</span>
-            <div class="param-selector">
-              <MineCascader
-                v-model:value="innerValue"
-                style="width: 330px"
-                :sync-to-store="false"
-                :init-from-store="false"
-                :change-on-select="false"
-                @change="changeCascader"
-              ></MineCascader>
-            </div>
-          </div>
-        </Col>
-        <Col :span="7">
-          <!-- 时间选择 -->
-          <div class="filter-section param-section">
-            <span class="filter-label">老空区永久密闭：</span>
-            <Select ref="select" v-model:value="goafId" style="width: 300px" placeholder="请选择老空区">
-              <SelectOption v-for="(item, index) in goafOptions" :key="index" :value="item.value">{{ item.label }} </SelectOption>
-            </Select>
-          </div>
-        </Col>
-        <Col :span="7">
-          <div class="filter-section param-section">
-            <span class="filter-label">时间选择：</span>
-            <RangePicker
-              v-model:value="dateRange"
-              format="YYYY-MM-DD HH:mm:ss"
-              :placeholder="['开始时间', '结束时间']"
-              style="width: 300px"
-              :show-time="{ format: 'HH:mm:ss' }"
-              @change="changeTime"
-            />
-          </div>
-        </Col>
-        <Col :span="2">
-          <div class="filter-section">
-            <Button type="primary" @click="generateChart" :loading="loading">
-              <template #icon>
-                <SvgIcon style="margin-right: 10px" name="shencen" />
-              </template>
-              生成
-            </Button>
-          </div>
-        </Col>
-      </Row>
-    </div>
-    <!-- 动态图表区域-->
-    <div class="echart-box">
-      <div class="check-title">
-        <CheckboxNav @checkBoxChange="checkBoxChange"></CheckboxNav>
-      </div>
-      <div class="check-line">
-        <echartDivder></echartDivder>
-      </div>
-      <div class="echart-content">
-        <echartContent :echartData="echartData"></echartContent>
-      </div>
-      <div class="check-line">
-        <echartDivder></echartDivder>
-      </div>
-      <div class="check-title">
-        <echartLengend></echartLengend>
-      </div>
-    </div>
-  </div>
+  <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs analysis-wrapper" :destroy-inactive-tab-pane="true">
+    <TabPane tab="密闭墙内" key="in">
+      <AnalysisChart class="h-740px" :checkbox-options="plainOptions" :legends-options="lengendTitle"></AnalysisChart>
+    </TabPane>
+
+    <TabPane tab="密闭墙外" key="out">
+      <AnalysisChart class="h-740px" :checkbox-options="plainOptionsOut" :legends-options="lengendTitleOut"></AnalysisChart>
+    </TabPane>
+  </Tabs>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive } from 'vue';
-  import dayjs from 'dayjs';
-  import { Select, SelectOption, Row, Col, DatePicker, Button, message } from 'ant-design-vue';
-  import MineCascader from '@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';
-  import CheckboxNav from './components/checkbox-nav.vue';
-  import echartLengend from './components/echart-lengend.vue';
-  import echartContent from './components/echart-content.vue';
-  import echartDivder from './components/echart-divder.vue';
-  import { getGoafHistory } from './connectAnalysis.api';
-  // import { useRouter } from 'vue-router';
-  // import { useMineDepartmentStore } from '/@/store/modules/mine';
-  import { SvgIcon } from '/@/components/Icon';
-  import { useInitForm } from './hooks/form';
+  import { ref } from 'vue';
+  import { plainOptions, lengendTitle, plainOptionsOut, lengendTitleOut } from './connectAnalysis.data';
+  import AnalysisChart from './AnalysisChart.vue';
+  import { Tabs, TabPane } from 'ant-design-vue';
 
-  const { goafOptions, goafId, innerValue, loading, initGoafOptions } = useInitForm();
-
-  // 组件注册
-  const RangePicker: any = DatePicker.RangePicker;
-  // const { currentRoute } = useRouter();
-  // 筛选相关响应式数据
-  const dateRange = ref([dayjs().add(-30, 'day'), dayjs()]); // 默认时间范围（近1天）
-  // const mineStore = useMineDepartmentStore();
-  const checkList = ref<any[]>(['coVal', 'ch4Val', 'c2h4Val', 'c2h2Val', 'co2Val', 'o2Val', 'sourcePressure', 'temperature']); //当前选中要进行显示的选项
-  const echartData = reactive({
-    xData: [] as any,
-    yData: [] as any,
-    flag: true,
-  });
-
-  //煤矿选项切换
-  function changeCascader(val) {
-    innerValue.value = val;
-    initGoafOptions(val).then(() => {
-      if (echartData.flag) {
-        generateChart();
-      }
-    });
-  }
-  //时间选择选项切换
-  function changeTime(val) {
-    dateRange.value[0] = val[0];
-    dateRange.value[1] = val[1];
-  }
-  //图表选项标签切换
-  function checkBoxChange(val) {
-    checkList.value = val.checkedList;
-    generateChart();
-  }
-
-  // 生成折线图核心逻辑
-  async function generateChart() {
-    echartData.yData.length = 0;
-    echartData.flag = false;
-    if (!goafId.value) {
-      return message.info('请先选择煤矿及老空区');
-    }
-
-    const startTime = dateRange.value[0].format('YYYY-MM-DD HH:mm:ss');
-    const endTime = dateRange.value[1].format('YYYY-MM-DD HH:mm:ss');
-    const res = await getGoafHistory({ pageNo: 1, pageSize: 1000, startTime: startTime, endTime: endTime, goafId: goafId.value });
-    if (res) {
-      const data = res.records || [];
-      if (data.length) {
-        echartData.xData = data.map((e) => e.createTime);
-        if (checkList.value.length) {
-          checkList.value.forEach((el) => {
-            echartData.yData.push({
-              label: el,
-              value: data,
-            });
-          });
-        }
-      }
-    }
-  }
-
-  //获取采空区列表
-  // async function getGoafListData() {
-  //   let res = await getGoafList({ mineCode: innerValue.value });
-  //   console.log(res, '90');
-  //   goafOption.value =
-  //     res.map((el) => {
-  //       return {
-  //         label: el.devicePos,
-  //         value: el.id,
-  //       };
-  //     }) || [];
-  //   goafId.value = goafOption.value.length ? (goafId.value ? goafId.value : goafOption.value[0]['value']) : '';
-  // }
+  const activeTab = ref('in');
 </script>
 
 <style lang="less" scoped>
-  .connectAnalysis {
-    width: calc(100% - 10px);
-    height: calc(100% - 10px);
-    margin: 10px 0px 0px 10px;
-    padding: 10px;
-    box-sizing: border-box;
-    border: 1px solid @border-color-base;
-    border-radius: 4px;
-    // background: @card-bg-color;
-    //background-color: @card-bg-color;
-    align-items: center;
-    // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
-  }
-
-  .filter-area {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding: 20px;
-    border: 1px solid @border-color-base;
-    border-radius: 4px;
-    // background: @card-bg-color;
-    background-color: @card-bg-color;
-    align-items: center;
-    // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
-  }
-
-  .filter-section {
-    display: flex;
-    align-items: center;
-  }
-
-  .filter-label {
-    color: #666;
-    min-width: 70px;
-    flex-shrink: 0;
-    font-weight: 500;
-  }
-
-  .param-section {
-    flex: 1;
-    // min-width: 300px;
-  }
-
-  .param-selector {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-  }
-
-  .echart-box {
-    width: 100%;
-    height: calc(100% - 95px);
-  }
-
-  .check-title {
-    height: 40px;
-    line-height: 40px;
-    background-color: @table-thead-bg-color;
-    border-radius: 4px;
-    padding: 0px 20px;
+  .analysis-wrapper {
+    height: calc(100% - 16px);
     box-sizing: border-box;
-    margin: 15px 0px;
-  }
-
-  .check-line {
-    width: 100%;
-  }
-
-  .echart-content {
-    width: 100%;
-    height: calc(100% - 112px);
-  }
-
-  :deep(.ant-btn-primary) {
-    display: flex !important;
-    align-items: center !important;
   }
 </style>

src/views/analysis/warningAnalysis/fireAreaJudgeAnalysis/fireAreaJudgeAnalysis.data.ts

@@ -28,11 +28,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -94,7 +96,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/fireAreaJudgeAnalysis/index.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-    <TabPane tab="实时监测" key="realtime">
+    <TabPane tab="实时分析" key="realtime">
       <div class="board-info">
         <MiniBoard
           v-for="(item, index) in boardData"

src/views/analysis/warningAnalysis/overlimitAlarm/index.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-    <TabPane tab="实时监测" key="realtime">
+    <TabPane tab="实时分析" key="realtime">
       <!-- <div class="board-info">
         <MiniBoard
           v-for="(item, index) in boardData"

src/views/analysis/warningAnalysis/overlimitAlarm/overlimitAlarm.data.ts

@@ -28,11 +28,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -99,7 +101,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/overlimitAlarmOut/index.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-    <TabPane tab="实时监测" key="realtime">
+    <TabPane tab="实时分析" key="realtime">
       <!-- <div class="board-info">
         <MiniBoard
           v-for="(item, index) in boardData"

src/views/analysis/warningAnalysis/overlimitAlarmOut/overlimitAlarm.data.ts

@@ -28,11 +28,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -84,7 +86,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/pressureDiffAnalysis/index.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-    <TabPane tab="实时监测" key="realtime">
+    <TabPane tab="实时分析" key="realtime">
       <div class="board-info">
         <MiniBoard
           v-for="(item, index) in boardData"
@@ -58,7 +58,7 @@
     style="top: 30%; left: 170px"
     v-model:visible="visibleModal"
     :width="450"
-    title="实时监测数据"
+    title="实时分析数据"
     @ok="handleOkEdit"
     @cancel="handleCancelEdit"
   >

src/views/analysis/warningAnalysis/pressureDiffAnalysis/pressureDiffAnalysis.data.ts

@@ -28,11 +28,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -85,7 +87,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/reportAnalysis/reportAnalysis.data.ts

@@ -5,11 +5,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -23,7 +25,7 @@ export const columns: BasicColumn[] = [
     width: 300,
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/index.vue

@@ -2,7 +2,7 @@
 <template>
   <!-- 新增Tabs组件区分实时/历史数据 -->
   <Tabs v-model:activeKey="activeTab" type="line" class="common-page-tabs">
-    <TabPane tab="实时监测" key="realtime">
+    <TabPane tab="实时分析" key="realtime">
       <div class="board-info">
         <MiniBoard
           v-for="(item, index) in boardData"

src/views/analysis/warningAnalysis/sealRiskJudgeAnalysis/sealRiskJudgeAnalysis.data.ts

@@ -29,11 +29,13 @@ export const columns: BasicColumn[] = [
   {
     title: '区域',
     dataIndex: 'areaName',
+    fixed: 'left',
     width: 100,
   },
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
@@ -90,7 +92,7 @@ export const columns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: '预警时间',
+    title: '分析时间',
     dataIndex: 'createTime',
     width: 100,
   },

src/views/dashboard/Overhaul/components/LeafPage.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="dashboard-container">
-
     <!-- 内容区域 -->
     <div class="content-area">
       <!-- 顶部信息卡片 -->
@@ -10,7 +9,9 @@
             <div class="info-details">
               <div class="label">{{ basicInfo.mineName }}</div>
               <!-- <div class="value">西川煤矿分公司</div> -->
-              <div class="tag" :style="{ backgroundColor: getAlarmColor(basicInfo.alarmLevel), color: '#fff' }">{{ getRiskText(basicInfo.alarmLevel) }}</div>
+              <div class="tag" :style="{ backgroundColor: getAlarmColor(basicInfo.alarmLevel), color: '#fff' }">{{
+                getRiskText(basicInfo.alarmLevel)
+              }}</div>
             </div>
             <div>
               <a-button class="btn" @click="handleGoToPageQuery('/warningAnalysis/connectAnalysis')">数据看板</a-button>
@@ -23,23 +24,16 @@
           </div>
 
           <div class="card-details">
-            <div
-              v-for="item in basicInfoColumns"
-              :key="item.key"
-              class="info-card-item"
-            >
+            <div v-for="item in basicInfoColumns" :key="item.key" class="info-card-item">
               <div class="card-label">{{ item.label }}</div>
               <div class="card-value-wrapper">
-                <span 
+                <span
                   v-if="['accessStatus', 'status', 'gasLevelName', 'alarmLevel', 'gjMineStatus'].includes(item.key)"
-                  class="status-dot" 
-                  :style="{ backgroundColor: getBasicInfoColor(item.key),boxShadow: `0 0 10px ${getBasicInfoColor(item.key)}` }"
+                  class="status-dot"
+                  :style="{ backgroundColor: getBasicInfoColor(item.key), boxShadow: `0 0 10px ${getBasicInfoColor(item.key)}` }"
                 ></span>
-                
-                <span 
-                  class="card-value-text" 
-                  :style="{ color: getBasicInfoColor(item.key) }"
-                >
+
+                <span class="card-value-text" :style="{ color: getBasicInfoColor(item.key) }">
                   {{ getBasicInfoValue(item.key) }}
                 </span>
               </div>
@@ -50,7 +44,6 @@
             </div>
           </div>
         </div>
-
       </div>
 
       <!-- 预警统计 -->
@@ -102,57 +95,39 @@
         <div class="details-header">
           <div class="title">预警数据详情</div>
           <div class="btn-group">
-            <button class="btn"  @click="collapseAll">收起所有分组</button>
-            <button class="btn"  @click="expandAll">展开详情</button>
+            <button class="btn" @click="collapseAll">收起所有分组</button>
+            <button class="btn" @click="expandAll">展开详情</button>
           </div>
         </div>
         <div class="details-content">
           <!-- 第一个预警项 -->
-          <div 
-            v-for="(item, index) in goafMonitorData" 
-            :key="index" 
-            class="warning-item"
-          >
+          <div v-for="(item, index) in goafMonitorData" :key="index" class="warning-item">
             <div class="item-header">
               <div class="header-left">
                 <div class="icon"></div>
                 <div class="name">老空区密闭名称: {{ item.devicePos }}</div>
-                <div 
-                  class="risk-level" 
-                  :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }"
-                >
+                <div class="risk-level" :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }">
                   {{ getRiskText(item.alarmLevel) }}
                 </div>
               </div>
-              <a-button 
-                class="expand-btn"
-                @click="toggleExpand(index)"
-              >
+              <a-button class="expand-btn" @click="toggleExpand(index)">
                 {{ isExpanded(index) ? '收起' : '展开' }}
                 <div class="arrow-icon-wrapper">
-                  <div class="arrow-icon" :class="{ 'rotate': isExpanded(index) }"></div>
+                  <div class="arrow-icon" :class="{ rotate: isExpanded(index) }"></div>
                 </div>
               </a-button>
             </div>
             <div class="item-body">
               <div class="data-row">
-                <div 
-                  v-for="(col, colIndex) in dataColumns" 
-                  :key="colIndex" 
-                  class="data-col"
-                >
+                <div v-for="(col, colIndex) in dataColumns" :key="colIndex" class="data-col">
                   <div class="col-title">{{ col.label }}</div>
-                  <div 
-                    class="col-value" 
-                    :style="{ color: getColValueColor(col, item) }"
-                  >
-
-                    <span 
-                      v-if="col.type !== 'text'" 
-                      class="status-dot" 
-                      :style="{ 
-                        backgroundColor: getColValueColor(col, item), 
-                        boxShadow: `0 0 10px ${getColValueColor(col, item)}`
+                  <div class="col-value" :style="{ color: getColValueColor(col, item) }">
+                    <span
+                      v-if="col.type !== 'text'"
+                      class="status-dot"
+                      :style="{
+                        backgroundColor: getColValueColor(col, item),
+                        boxShadow: `0 0 10px ${getColValueColor(col, item)}`,
                       }"
                     ></span>
                     {{ getColDisplayText(col, item) }}
@@ -172,11 +147,7 @@
                   </div>
                 </div>
                 <div class="indicator-area">
-                  <div 
-                    v-for="(ind, indIndex) in indicatorColumns" 
-                    :key="'inner-' + indIndex" 
-                    class="indicator-item"
-                  >
+                  <div v-for="(ind, indIndex) in indicatorColumns" :key="'inner-' + indIndex" class="indicator-item">
                     <div class="label">{{ ind.label }}:</div>
                     <!-- 墙内数据直接取 item[key]，例如 item.coVal -->
                     <div class="value" :title="getDataValue(item, ind.key)">{{ getDataValue(item, ind.key) }} {{ ind.unit }}</div>
@@ -193,11 +164,7 @@
                   </div>
                 </div>
                 <div class="indicator-area">
-                  <div 
-                    v-for="(ind, indIndex) in indicatorColumns" 
-                    :key="'outer-' + indIndex" 
-                    class="indicator-item"
-                  >
+                  <div v-for="(ind, indIndex) in indicatorColumns" :key="'outer-' + indIndex" class="indicator-item">
                     <div class="label">{{ ind.label }}:</div>
                     <!-- 墙外数据+ Out item[key]，例如 item.coValOut -->
                     <div class="value" :title="getDataValue(item, ind.key + 'Out')">{{ getDataValue(item, ind.key + 'Out') }} {{ ind.unit }}</div>
@@ -208,16 +175,10 @@
                 <div class="group-title">
                   <div class="title-icon-top icon-result"></div>
                   <div class="title-icon-bottom"></div>
-                  <div class="title-content">
-                    预警结果  
-                  </div>
+                  <div class="title-content"> 预警结果 </div>
                 </div>
-                <div class="indicator-area indicator-result"> 
-                  <div 
-                    v-for="(res, resIndex) in resultColumns" 
-                    :key="'result-' + resIndex" 
-                    class="indicator-item"
-                  >
+                <div class="indicator-area indicator-result">
+                  <div v-for="(res, resIndex) in resultColumns" :key="'result-' + resIndex" class="indicator-item">
                     <div class="label">{{ res.label }}:</div>
                     <div v-if="res.key == 'alarmLevel'" :title="getRiskText(item.alarmLevel)" class="value">{{ getRiskText(item.alarmLevel) }}</div>
                     <div v-else class="value" :title="getDataValue(item, res.key)">{{ getDataValue(item, res.key) }}</div>
@@ -240,11 +201,7 @@
           </div>
         </div>
         <div class="alarm-content">
-          <div 
-            v-for="(alarm, index) in alarmColumns" 
-            :key="index" 
-            class="alarm-item"
-          >
+          <div v-for="(alarm, index) in alarmColumns" :key="index" class="alarm-item">
             <div class="alarm-name">{{ alarm.label }}</div>
             <div class="alarm-count">{{ mineAlarmData[alarm.key] ?? '-' }}</div>
             <div class="alarm-border">
@@ -267,11 +224,10 @@
           </div>
         </div>
         <div class="chart-content" v-show="isChartVisible">
-          <ConnectAnalysis ref="connectAnalysisRef"/>
+          <ConnectAnalysis ref="connectAnalysisRef" />
         </div>
       </div>
     </div>
-    
   </div>
 </template>
 
@@ -283,7 +239,6 @@
   import { getGoafAlarmNum, getGoafData, getMineData, getProvinceAlarm } from '../overhaul.api';
   import { StatusColorEnum } from '/@/enums/jeecgEnum';
   import ConnectAnalysis from '/@/views/analysis/warningAnalysis/connectAnalysis/index.vue';
-  
 
   const appStore = useAppStore();
   const mineStore = useMineDepartmentStore();
@@ -292,13 +247,13 @@
   const router = useRouter();
   const route = useRoute();
 
-    // 1. 定义数据类型接口
+  // 1. 定义数据类型接口
   interface GoafMonitorItem {
     devicePos?: string;
     [key: string]: any; // 允许其他动态属性
   }
 
-    /**
+  /**
    * 风险等级映射配置
    */
   const RISK_LEVEL_MAP: Record<string, { text: string; color: string }> = {
@@ -325,13 +280,13 @@
 
   // 1. 预警数据详情 - 顶部指标列配置
   const dataColumns = [
-    { label: '闭内自燃发火隐患', key: 'fireAlarm.alarmName', colorKey: 'fireAlarm.alarmLevel', type: 'alarm'  },
-    { label: '闭外自燃发火隐患', key: 'fireAlarmOut.alarmName', colorKey: 'fireAlarmOut.alarmLevel', type: 'alarm'  },
-    { label: '爆炸三角', key: 'explosionAlarm.alarmName', colorKey: 'explosionAlarm.alarmLevel', type: 'alarm'  },
-    { label: '压差预警', key: 'sourcePressureAlarm.alarmName', colorKey: 'sourcePressureAlarm.alarmLevel', type: 'alarm'  },
-    { label: '漏风状态判定', key: 'leakageAlarm.alarmName', colorKey: 'leakageAlarm.alarmLevel', type: 'alarm'  },
+    { label: '密闭墙内自燃发火隐患', key: 'fireAlarm.alarmName', colorKey: 'fireAlarm.alarmLevel', type: 'alarm' },
+    { label: '密闭墙外自燃发火隐患', key: 'fireAlarmOut.alarmName', colorKey: 'fireAlarmOut.alarmLevel', type: 'alarm' },
+    { label: '爆炸三角', key: 'explosionAlarm.alarmName', colorKey: 'explosionAlarm.alarmLevel', type: 'alarm' },
+    { label: '压差预警', key: 'sourcePressureAlarm.alarmName', colorKey: 'sourcePressureAlarm.alarmLevel', type: 'alarm' },
+    { label: '漏风状态判定', key: 'leakageAlarm.alarmName', colorKey: 'leakageAlarm.alarmLevel', type: 'alarm' },
     { label: '设备状态', key: 'linkStatus', type: 'status' },
-    { label: '检查时间', key: 'readTime',type: 'text' },
+    { label: '检查时间', key: 'readTime', type: 'text' },
   ];
 
   // 2. 监测指标通用配置 (用于墙内和墙外)
@@ -347,8 +302,8 @@
 
   // 3. 预警结果配置
   const resultColumns = [
-    { label: '数据来源', key: 'readTime' ,value: '最近2天' }, // 静态数据可以直接写死在配置里，或者从 item 取
-    { label: '预警结果', key: 'alarmLevel', value: '异常' },     // 这里假设是静态展示，如果是动态可改为 key: 'resultStatus'
+    { label: '数据来源', key: 'readTime', value: '最近2天' }, // 静态数据可以直接写死在配置里，或者从 item 取
+    { label: '预警结果', key: 'alarmLevel', value: '异常' }, // 这里假设是静态展示，如果是动态可改为 key: 'resultStatus'
   ];
 
   // 4. 异常超限报警配置
@@ -362,8 +317,8 @@
     { label: '压差超限', key: 'sourcePressure' },
     { label: '温度超限', key: 'temperature' },
   ];
-  const basicInfo = ref<any>({});  //煤矿基础信息数据
-  const alarmStatistics = ref<any>({});  //预警统计数据
+  const basicInfo = ref<any>({}); //煤矿基础信息数据
+  const alarmStatistics = ref<any>({}); //预警统计数据
   const goafMonitorData = ref<GoafMonitorItem[]>([]); //密闭监测详情数据
   const mineAlarmData = ref<any>({}); // 煤矿预警数据
 
@@ -382,7 +337,7 @@
   const isExpanded = (index: number) => {
     return !!expandedIndices.value[index];
   };
-   // 4. 展开所有详情
+  // 4. 展开所有详情
   const expandAll = () => {
     goafMonitorData.value.forEach((_, index) => {
       expandedIndices.value[index] = true;
@@ -392,13 +347,13 @@
   // 5. 收起所有分组
   const collapseAll = () => {
     // 清空对象即可，或者遍历设为 false
-    expandedIndices.value = {}; 
+    expandedIndices.value = {};
   };
   // 切换图表显示状态
   const toggleChartVisibility = () => {
     isChartVisible.value = !isChartVisible.value;
   };
-   /**
+  /**
    * 获取设备状态信息 (文本和颜色)
    * @param status 0: 断开, 1: 正常
    */
@@ -408,16 +363,16 @@
     }
     return { text: '断开', color: '#ff4d4f' }; // 红色
   };
-    /**
+  /**
    * 获取列显示的文本
    */
   const getColDisplayText = (col: any, item: any) => {
     const rawValue = getDataValue(item, col.key);
-    
+
     if (col.type === 'status') {
       return getlinkStatusInfo(rawValue).text;
     }
-    
+
     // 默认直接返回原始值或经过 getDataValue 处理后的值
     return rawValue;
   };
@@ -430,16 +385,16 @@
     if (col.type === 'alarm' && col.colorKey) {
       return getAlarmColor(getDataValue(item, col.colorKey));
     }
-    
+
     // 如果是设备状态类型，使用状态颜色逻辑
     if (col.type === 'status') {
       return getlinkStatusInfo(getDataValue(item, col.key)).color;
     }
-    
+
     // 默认黑色
     return '#333';
   };
-   /**
+  /**
    * 获取风险等级对应的文本
    * @param level 报警级别 '1', '2', '3', '4'
    */
@@ -467,30 +422,25 @@
     return RISK_LEVEL_MAP[String(level)]?.color;
   };
 
-  
   /**
    * 获取基础信息的显示内容（包含文本和颜色）
    */
   const getBasicInfoDisplay = (key: string) => {
     const value = basicInfo.value[key];
-    
+
     // 默认返回黑色文本
     const defaultResult = { text: value ?? '-', color: '#333' };
 
     if (key === 'accessStatus') {
       // 1: 已接入 (绿色), 其他: 未接入 (红色)
-      return value === 1 
-        ? { text: '已接入', color: '#52c41a' } 
-        : { text: '未接入', color: StatusColorEnum.red };
+      return value === 1 ? { text: '已接入', color: '#52c41a' } : { text: '未接入', color: StatusColorEnum.red };
     }
-    
+
     if (key === 'status') {
       // 1: 在线 (绿色), 其他: 离线 (红色)
-      return value === 1 
-        ? { text: '在线', color: '#52c41a' } 
-        : { text: '离线', color: StatusColorEnum.red };
+      return value === 1 ? { text: '在线', color: '#52c41a' } : { text: '离线', color: StatusColorEnum.red };
     }
-    
+
     if (key === 'alarmLevel') {
       // 根据风险等级获取颜色
       const levelStr = String(value);
@@ -523,11 +473,10 @@
         return { text: val, color: StatusColorEnum.blue }; // 蓝色
       } else {
         // 其余状态均显示绿色
-        return { text: val, color: StatusColorEnum.red }; 
+        return { text: val, color: StatusColorEnum.red };
       }
     }
 
-
     return defaultResult;
   };
 
@@ -545,29 +494,29 @@
     return getBasicInfoDisplay(key).color;
   };
 
-
   /**
    * 通用页面跳转方法
    * @param record 当前行数据
    * @param path 目标路径
    */
   function handleGoToPageQuery(path: string) {
-
-    router.push({
-      path,
-    }).catch(err => {
-      console.error('跳转失败:', err);
-    });
+    router
+      .push({
+        path,
+      })
+      .catch((err) => {
+        console.error('跳转失败:', err);
+      });
   }
 
   async function fetchLeafData() {
     try {
       // 异步获取所有接口数据（并行请求提升性能）
-      const [goafAlarmNum, goafData, mineData, alarmData ] = await Promise.all([
+      const [goafAlarmNum, goafData, mineData, alarmData] = await Promise.all([
         getGoafAlarmNum(appStore.simpleMapParams), // 预警统计
         getGoafData(appStore.simpleMapParams), // 密闭监测数据
         getMineData(appStore.simpleMapParams), // 煤矿基础信息数据
-        getProvinceAlarm(appStore.simpleMapParams),  // 预警信息列表
+        getProvinceAlarm(appStore.simpleMapParams), // 预警信息列表
       ]);
       alarmStatistics.value = goafAlarmNum[0];
       goafMonitorData.value = goafData.records;
@@ -579,7 +528,6 @@
           connectAnalysisRef.value.generateChart();
         }
       });
-
     } catch (error) {
       console.error('数据获取/配置更新失败：', error);
     }
@@ -589,378 +537,200 @@
     console.log('当前页面的参数：', mineStore.getRoot);
   });
 
-// 页面逻辑代码
+  // 页面逻辑代码
 </script>
 
 <style scoped>
-.dashboard-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: scroll;
-}
-
-.content-area {
-  flex: 1;
-  padding: 20px;
-  background-color: #f0f8ff;
-}
-
-.top-info {
-  width: 100%;
-  height: 200px;
-  margin-bottom: 20px;
-}
-
-.info-card {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  background-image: url('/@/assets/images/overHaul/leafPage/info-card-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-  border-radius: 8px;
-  padding: 20px;
-}
-
-.card-title {
-  width: 20%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 8px 10px 8px 50px;
+    .dashboard-container {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: scroll;
+    }
 
-  .btn {
-    color: #fff;
-    background-color: #2b6ff0;
+    .content-area {
+      flex: 1;
+      padding: 20px;
+      background-color: #f0f8ff;
+    }
 
-    &:hover {
-      background-color: #397af3;
+    .top-info {
+      width: 100%;
+      height: 200px;
+      margin-bottom: 20px;
     }
-  }
-}
-.info-border {
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  .info-border-icon {
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
+
+  .info-card {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    background-image: url('/@/assets/images/overHaul/leafPage/info-card-bg.png');
     background-repeat: no-repeat;
     background-size: 100%;
-
-  }
-  .info-border-line {
-    width: 1px;
-    height: 95px;
-    border-left: 2px dotted #397af3;
-    margin-left: 7px;
-  }
-}
-.info-details {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 8px 0;
-  
-  .label {
-    font-size: 16px;
-    color: #000;
+    border-radius: 8px;
+    padding: 20px;
   }
 
-  .value {
-    font-size: 16px;
-    color: #000;
-  }
+    .card-title {
+      width: 20%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 8px 10px 8px 50px;
 
-  .tag {
-    width: fit-content;
-    height: 24px;
-    padding: 2px 8px;
-    border-radius: 15px;
-    font-size: 12px;
-    background-color: #ff6b6b;
-    color: white;
-  }
-}
-
-.card-details {
-  width: 80%;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 8px;
-}
-.info-card-item {
-  max-width: 245px;
-  height: 70px;
-  position: relative;
-  padding: 8px 10px 8px 40px;;
-  background-color: #f1f7ff;
-  border-radius: 4px;
-  text-align: left;
-}
-.card-border {
-  width: 20px;
-  height: 50px;
-  position: absolute;
-  top: 14px;
-  left: 15px;
-
-  .card-border-icon{
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+      .btn {
+        color: #fff;
+        background-color: #2b6ff0;
 
+        &:hover {
+          background-color: #397af3;
+        }
+      }
+    }
   }
-  .card-border-line{
-    width: 1px;
-    height: 30px;
-    border-left: 2px dotted #397af3;
-    margin-left: 7px;
-  }
-}
-
-.card-label {
-  font-size: 16px;
-  color: #000;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.card-value-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  display: inline-block;
-  flex-shrink: 0;
-
-}
-
-.card-value-text {
-  font-size: 14px;
-  color: #333;
-  font-weight: bold;
-}
-
-
-
-.warning-statistics {
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.statistics-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-}
-
-.btn-group {
-  display: flex;
-  gap: 8px;
-}
-
-.btn {
-  color: #2b6ff0;
-  padding: 6px 12px;
-  border: 1px solid #2b6ff0;
-  border-radius: 4px;
-  background-color: #E9F0FE;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.btn:hover {
-  background-color: #f5f5f5;
-}
-
-.statistics-content {
-  display: flex;
-  gap: 50px;
-}
-
-.stat-item {
-  flex: 1;
-  padding: 16px 50px 10px 90px;
-  text-align: left;
-  position: relative;
-  overflow: hidden;
-  background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-
-  .icon {
+  .info-border {
     position: absolute;
-    top: 15px;
+    top: 20px;
     left: 20px;
+    .info-border-icon {
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+
+    }
+    .info-border-line {
+      width: 1px;
+      height: 95px;
+      border-left: 2px dotted #397af3;
+      margin-left: 7px;
+    }
   }
-  .text {
-    font-size: 16px;
-    color: #000;
-    font-weight: bold;
-    .text-sub {
+  .info-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 8px 0;
+
+    .label {
+      font-size: 16px;
+      color: #000;
+    }
+
+    .value {
+      font-size: 16px;
+      color: #000;
+    }
+
+    .tag {
+      width: fit-content;
+      height: 24px;
+      padding: 2px 8px;
+      border-radius: 15px;
       font-size: 12px;
-      color: #989587;
+      background-color: #ff6b6b;
+      color: white;
     }
   }
-  .count {
-    font-size: 24px;
-    font-weight: bold;
-  }
 
-  .icon-top{
-    width: 40px;
-    height: 40px;
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;;
+  .card-details {
+    width: 80%;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 8px;
   }
-  .icon-bottom{
-    width: 40px;
-    height: 20px;
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
-    background-repeat: no-repeat;
-    background-size: 100%;
-    margin-top: -5px;
+  .info-card-item {
+    max-width: 245px;
+    height: 70px;
+    position: relative;
+    padding: 8px 10px 8px 40px;;
+    background-color: #f1f7ff;
+    border-radius: 4px;
+    text-align: left;
   }
-}
+  .card-border {
+    width: 20px;
+    height: 50px;
+    position: absolute;
+    top: 14px;
+    left: 15px;
 
-.stat-item.high-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
-  }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
-  }
-  .count {
-    color: #FF0000;
-  }
-}
+    .card-border-icon{
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
 
-.stat-item.medium-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
-  }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
-  }
-  .count {
-    color: #FF7700;
+    }
+    .card-border-line{
+      width: 1px;
+      height: 30px;
+      border-left: 2px dotted #397af3;
+      margin-left: 7px;
+    }
   }
-}
 
-.stat-item.normal-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon1.svg');
-  }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
+  .card-label {
+    font-size: 16px;
+    color: #000;
+    font-weight: bold;
+    margin-bottom: 8px;
   }
-  .count {
-    color: #D5C702;
+
+  .card-value-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
   }
-}
 
-.stat-item.low-risk {
-  background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
-  .icon-top {
-    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon1.svg');
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+
   }
-  .icon-bottom {
-    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
+
+  .card-value-text {
+    font-size: 14px;
+    color: #333;
+    font-weight: bold;
   }
-  .count {
-    color: #0070FF;
+
+
+
+  .warning-statistics {
+    background-color: #ffffff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
   }
-}
-
-.warning-details {
-  background-color: #ffffff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.details-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.warning-item {
-  margin-bottom: 20px;
-  background-color: rgba(218, 234, 251, 0.5);
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-bottom: 10px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid rgba(43, 111, 240, 0.2); 
-
-  .icon {
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+
+  .statistics-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
   }
-  .name {
+
+  .title {
     font-size: 16px;
     font-weight: bold;
     color: #333;
-    margin: 0 15px 0px 5px;
   }
 
-  .risk-level {
-    width: fit-content;
-    height: 24px;
-    padding: 2px 8px;
-    border-radius: 15px;
-    font-size: 12px;
-    background-color: #ff6b6b;
-    color: white;
-  }
-
-  
-  .header-left {
+  .btn-group {
     display: flex;
-    align-items: center;
+    gap: 8px;
   }
 
-  .expand-btn {
+  .btn {
     color: #2b6ff0;
-    display: flex;
-    align-items: center;
-    gap: 4px;
     padding: 6px 12px;
     border: 1px solid #2b6ff0;
     border-radius: 4px;
@@ -969,322 +739,623 @@
     font-size: 12px;
   }
 
-  .expand-btn:hover {
-    color: #1a5cc8;
+  .btn:hover {
+    background-color: #f5f5f5;
   }
 
-  .arrow-icon-wrapper {
-    width: 16px;
-    height: 16px;
-    position: relative;
-    display: inline-block;
+  .statistics-content {
+    display: flex;
+    gap: 50px;
   }
 
-  .arrow-icon {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-down.png');
+  .stat-item {
+    flex: 1;
+    padding: 16px 50px 10px 90px;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
     background-repeat: no-repeat;
-    background-size: 100% 100%;
-    transition: transform 0.3s ease;
-  }
+    background-size: 100%;
 
-  .arrow-icon.rotate {
-    transform: translate(-50%, -50%) rotate(180deg);
-  }
+    .icon {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      .info-border-icon {
+        width: 16px;
+        height: 16px;
+        background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon1.svg');
+        background-repeat: no-repeat;
+        background-size: 100%;
+      }
+      .info-border-line {
+        width: 1px;
+        height: 95px;
+        border-left: 2px dotted #397af3;
+        margin-left: 7px;
+      }
+    }
+    .info-details {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 8px 0;
+
+      .label {
+        font-size: 16px;
+        color: #000;
+      }
 
+      .value {
+        font-size: 16px;
+        color: #000;
+      }
 
-}
-
-.data-row {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 12px;
-  margin-bottom: 8px;
-}
-
-.data-col {
-  width: 100%;
-  height: 80px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  justify-content: center ;
-  padding: 0 16px 0 30px;
-  background-image: url('/@/assets/images/overHaul/leafPage/warning-item-bg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  border-radius: 4px;
-  font-size: 12px;
-
-  .col-title {
-    color: #000;
-    font-size: 14px;
-    margin-bottom: 5px;
-  }
-  .col-value {
-    color: #000;
-    font-size: 14px;
+      .tag {
+        width: fit-content;
+        height: 24px;
+        padding: 2px 8px;
+        border-radius: 15px;
+        font-size: 12px;
+        background-color: #ff6b6b;
+        color: white;
+      }
+    }
+
+    .card-details {
+      width: 80%;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+    }
+    .info-card-item {
+      max-width: 245px;
+      height: 70px;
+      position: relative;
+      padding: 8px 10px 8px 40px;
+      background-color: #f1f7ff;
+      border-radius: 4px;
+      text-align: left;
+    }
+    .card-border {
+      width: 20px;
+      height: 50px;
+      position: absolute;
+      top: 14px;
+      left: 15px;
+
+      .card-border-icon {
+        width: 16px;
+        height: 16px;
+        background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon.svg');
+        background-repeat: no-repeat;
+        background-size: 100%;
+      }
+      .card-border-line {
+        width: 1px;
+        height: 30px;
+        border-left: 2px dotted #397af3;
+        margin-left: 7px;
+      }
+    }
+
+    .card-label {
+      font-size: 16px;
+      color: #000;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+
+    .card-value-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
 
     .status-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       display: inline-block;
+      flex-shrink: 0;
+    }
+
+    .card-value-text {
+      font-size: 14px;
+      color: #333;
+      font-weight: bold;
+    }
+
+    .icon-top{
+      width: 40px;
+      height: 40px;
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;;
+    }
+    .icon-bottom{
+      width: 40px;
+      height: 20px;
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      margin-top: -5px;
     }
   }
-  .col-icon {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 18px;
-    height: 18px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+
+  .stat-item.high-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
+    }
+    .count {
+      color: #FF0000;
+    }
   }
-}
-
-.monitoring-indicators {
-  display: flex;
-  gap: 20px;
-  margin-top: 20px;
-}
-
-.indicator-group {
-  display: flex;
-  background-color: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-width: 0;
-  flex: 1;
-}
-
-.indicator-group:nth-child(1) {
-  flex: 4;
-}
-
-.indicator-group:nth-child(2) {
-  flex: 4;
-}
-
-.indicator-group:nth-child(3) {
-  flex: 2;
-}
-
-.group-title {
-  width: 120px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: bold;
-  color: #000;
-  background-color: rgba(192, 222, 255, 0.6);
-
-  .title-icon-top {
-    width: 30px;
-    height: 30px;
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-top1.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
-    margin-bottom: -5px;
+
+  .stat-item.medium-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
+    }
+    .count {
+      color: #FF7700;
+    }
+  }
+
+  .stat-item.normal-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
+    }
+    .count {
+      color: #D5C702;
+    }
+  }
+
+  .stat-item.low-risk {
+    background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
+    .icon-top {
+      background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon1.svg');
+    }
+    .icon-bottom {
+      background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
+    }
+    .count {
+      color: #0070FF;
+    }
+  }
+
+  .warning-details {
+    background-color: #ffffff;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: 4px;
+  }
+
+  .details-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .warning-item {
+    margin-bottom: 20px;
+    background-color: rgba(218, 234, 251, 0.5);
+    border-radius: 8px;
+    padding: 16px;
   }
-  .icon-outer{
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-top2.svg');
+
+  .item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid rgba(43, 111, 240, 0.2);
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
+    .name {
+      font-size: 16px;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .btn-group {
+      display: flex;
+      gap: 8px;
+    }
+
+    .btn {
+      color: #2b6ff0;
+      padding: 6px 12px;
+      border: 1px solid #2b6ff0;
+      border-radius: 4px;
+      background-color: #e9f0fe;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .btn:hover {
+      background-color: #f5f5f5;
+    }
+
+    .statistics-content {
+      display: flex;
+      gap: 50px;
+    }
+
+    .stat-item {
+      flex: 1;
+      padding: 16px 50px 10px 90px;
+      text-align: left;
+      position: relative;
+      display: inline-block;
+    }
+
+    .arrow-icon {
+      width: 16px;
+      height: 16px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-down.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+
+      .icon {
+        position: absolute;
+        top: 15px;
+        left: 20px;
+      }
+      .text {
+        font-size: 16px;
+        color: #000;
+        font-weight: bold;
+        .text-sub {
+          font-size: 12px;
+          color: #989587;
+        }
+      }
+      .count {
+        font-size: 24px;
+        font-weight: bold;
+      }
+
+
   }
-  .icon-result{ 
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-top3.svg');
+
+  .data-row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 12px;
+    margin-bottom: 8px;
   }
-  .title-icon-bottom{
-    width: 50px;
-    height: 23px;
-    background-image: url('/@/assets/images/overHaul/leafPage/icon-bottom.png');
+
+  .data-col {
+    width: 100%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center ;
+    padding: 0 16px 0 30px;
+    background-image: url('/@/assets/images/overHaul/leafPage/warning-item-bg.png');
     background-repeat: no-repeat;
-    background-size: 100%;
+    background-size: 100% 100%;
+    border-radius: 4px;
+    font-size: 12px;
+
+    .col-title {
+      color: #000;
+      font-size: 14px;
+      margin-bottom: 5px;
+    }
+    .col-value {
+      color: #000;
+      font-size: 14px;
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+    }
+    .col-icon {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      width: 18px;
+      height: 18px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      border-radius: 4px;
+      font-size: 12px;
+
+      .col-title {
+        color: #000;
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+      .col-value {
+        color: #000;
+        font-size: 14px;
+
+        .status-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          display: inline-block;
+        }
+      }
+      .col-icon {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 18px;
+        height: 18px;
+        background-image: url('/@/assets/images/overHaul/leafgPage/info-card-icon.svg');
+        background-repeat: no-repeat;
+        background-size: 100%;
+      }
+    }
+
+  .monitoring-indicators {
+    display: flex;
+    gap: 20px;
+    margin-top: 20px;
   }
-}
-
-.indicator-area {
-  width: calc(100% - 120px);
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-  padding: 10px 16px;
-
-}
-.indicator-result {
-  grid-template-columns: repeat(1, 1fr);
-}
-
-.indicator-item {
-  height: 30px;
-  line-height: 30px;
-  display: flex;
-  justify-content: space-between;
-  background: linear-gradient(90deg, rgba(192, 222, 255, 0.5) 0%, rgba(192, 222, 255, 0.2) 100%);
-  border-radius: 4px;
-  margin-bottom: 8px;
-  padding: 0 4px;
-   .value {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+  .indicator-group {
+    display: flex;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     min-width: 0;
     flex: 1;
-    text-align: right;
-   }
-}
-
-/* 预警结果只有两行，用来占位的 item */
-.placeholder-item {
-  visibility: hidden;
-  height: 30px;
-  margin-bottom: 8px;
-  background: transparent;
-  pointer-events: none;
-}
-
-.indicator-result .indicator-item:last-of-type {
-   margin-bottom: 8px; 
-}
-
-.indicator-item:last-child {
-  border-bottom: none;
-}
-
-
-.abnormal-alarm {
-  background-color: #fff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.alarm-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.alarm-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.alarm-item {
-  flex: 1;
-  min-width: 120px;
-  height: 70px;
-  position: relative;
-  padding: 8px 10px 8px 40px;;
-  background-color: rgba(215, 233, 253, 0.9);
-  border-radius: 4px;
-  text-align: left;
-}
-
-.alarm-name {
-  font-size: 16px;
-  color: #000;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.alarm-count {
-  font-size: 14px;
-  color: #333;
-  font-weight: bold;
-}
-.alarm-border {
-  width: 20px;
-  height: 50px;
-  position: absolute;
-  top: 14px;
-  left: 15px;
-
-  .alarm-border-icon{
-    width: 16px;
-    height: 16px;
-    background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
-    background-repeat: no-repeat;
-    background-size: 100%;
+  }
 
+  .indicator-group:nth-child(1) {
+    flex: 4;
+  }
+
+  .indicator-group:nth-child(2) {
+    flex: 4;
+  }
+
+  .indicator-group:nth-child(3) {
+    flex: 2;
+  }
+
+  .group-title {
+    width: 120px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #000;
+    background-color: rgba(192, 222, 255, 0.6);
+
+    .title-icon-top {
+      width: 30px;
+      height: 30px;
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-top1.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      margin-bottom: -5px;
+    }
+    .icon-outer{
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-top2.svg');
+    }
+    .icon-result{
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-top3.svg');
+    }
+    .title-icon-bottom{
+      width: 50px;
+      height: 23px;
+      background-image: url('/@/assets/images/overHaul/leafPage/icon-bottom.png');
+      background-repeat: no-repeat;
+      background-size: 100%;
+    }
   }
-  .alarm-border-line{
-    width: 1px;
+
+    .indicator-group {
+      display: flex;
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      min-width: 0;
+      flex: 1;
+    }
+
+    .indicator-group:nth-child(1) {
+      flex: 4;
+    }
+
+    .indicator-group:nth-child(2) {
+      flex: 4;
+    }
+
+    .indicator-group:nth-child(3) {
+      flex: 2;
+    }
+
+    .group-title {
+      width: 120px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: bold;
+      color: #000;
+      background-color: rgba(192, 222, 255, 0.6);
+
+      .title-icon-top {
+        width: 30px;
+        height: 30px;
+        background-image: url('/@/assets/images/overHaul/leafgPage/icon-top1.svg');
+        background-repeat: no-repeat;
+        background-size: 100%;
+        margin-bottom: -5px;
+      }
+      .icon-outer {
+        background-image: url('/@/assets/images/overHaul/leafgPage/icon-top2.svg');
+      }
+      .icon-result {
+        background-image: url('/@/assets/images/overHaul/leafgPage/icon-top3.svg');
+      }
+      .title-icon-bottom {
+        width: 50px;
+        height: 23px;
+        background-image: url('/@/assets/images/overHaul/leafgPage/icon-bottom.png');
+        background-repeat: no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    .indicator-area {
+      width: calc(100% - 120px);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      padding: 10px 16px;
+    }
+    .indicator-result {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .indicator-item {
+      height: 30px;
+      line-height: 30px;
+      display: flex;
+      justify-content: space-between;
+      background: linear-gradient(90deg, rgba(192, 222, 255, 0.5) 0%, rgba(192, 222, 255, 0.2) 100%);
+      border-radius: 4px;
+      margin-bottom: 8px;
+      padding: 0 4px;
+      .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+        flex: 1;
+        text-align: right;
+      }
+    }
+
+    /* 预警结果只有两行，用来占位的 item */
+    .placeholder-item {
+      visibility: hidden;
+      height: 30px;
+      margin-bottom: 8px;
+      background: transparent;
+      pointer-events: none;
+    }
+
+    .indicator-result .indicator-item:last-of-type {
+      margin-bottom: 8px;
+    }
+
+    .indicator-item:last-child {
+      border-bottom: none;
+    }
+
+    .alarm-border-icon{
+      width: 16px;
+      height: 16px;
+      background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon.svg');
+      background-repeat: no-repeat;
+      background-size: 100%;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+
+    .historical-data {
+      background-color: #fff;
+      margin-bottom: 20px;
+      padding: 10px 12px;
+      border-radius: 4px;
+    }
+  }
+  .alarm-border-bottom{
+    width: 30px;
     height: 30px;
-    border-left: 2px dotted #397af3;
-    margin-left: 7px;
+    background-image: url('/@/assets/images/overHaul/leafPage/alarm-card-icon.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
   }
-}
-.alarm-border-bottom{ 
-  width: 30px;
-  height: 30px;
-  background-image: url('/@/assets/images/overHaul/leafPage/alarm-card-icon.png');
-  background-repeat: no-repeat;
-  background-size: 100%;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-}
-
-.historical-data {
-  background-color: #fff;
-  margin-bottom: 20px;
-  padding: 10px 12px;
-  border-radius: 4px;
-}
-
-.chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.chart-content {
-  padding: 0;
-  height: 600px; 
-  overflow: hidden;
-  position: relative;
-}
-
-/* 深度选择器：重置 ConnectAnalysis 的样式以适配嵌入环境 */
-:deep(.connectAnalysis) {
-  margin: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  display: flex;
-  flex-direction: column;
-}
-
-:deep(.filter-area) {
-  display: none;
-}
-
-:deep(.echart-box) {
-  /* 让图表区域占据剩余所有高度 */
-  flex: 1;
-  height: auto !important;
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-}
-
-:deep(.echart-content) {
-  flex: 1;
-  height: auto !important;
-  min-height: 300px;
-}
-</style>
+
+    .chart-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .chart-content {
+      padding: 0;
+      height: 600px;
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* 深度选择器：重置 ConnectAnalysis 的样式以适配嵌入环境 */
+    :deep(.connectAnalysis) {
+      margin: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      border: none !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+      display: flex;
+      flex-direction: column;
+    }
+
+    :deep(.filter-area) {
+      display: none;
+    }
+
+    :deep(.echart-box) {
+      /* 让图表区域占据剩余所有高度 */
+      flex: 1;
+      height: auto !important;
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+    }
+
+    :deep(.echart-content) {
+      flex: 1;
+      height: auto !important;
+      min-height: 300px;
+    }
+</style>

src/views/dashboard/SealedGoaf/configurable.data.sealedGoaf.ts

@@ -285,8 +285,8 @@ export const testConfigSealedGoaf: Config[] = [
               to: '/basicinfo/mines-info?status=1',
             },
             {
-              label: '离线',
-              value: '${lxTotal}',
+              label: '中断',
+              value: '${zdNum}',
               to: '/basicinfo/mines-info?status=0',
             },
             {
@@ -1009,7 +1009,7 @@ export const testConfigSealedMine: Config[] = [
       position: 'top:600px;left:25px;',
     },
   },
-  // 4.  密闭内墙详情展示
+  // 4.  密密闭墙内墙详情展示
   {
     deviceType: 'detail_inner_display',
     moduleName: '密闭详情展示',
@@ -1056,7 +1056,7 @@ export const testConfigSealedMine: Config[] = [
             {
               type: 'H',
               layout: 'label-top',
-              title: '密闭内',
+              title: '密密闭墙内',
               items: [
                 { label: '甲烷(%)', value: '${ch4Val}' },
                 { label: '一氧化碳(ppm)', value: '${coVal}' },
@@ -1071,7 +1071,7 @@ export const testConfigSealedMine: Config[] = [
             {
               type: 'H',
               layout: 'label-top',
-              title: '密闭外',
+              title: '密密闭墙外',
               items: [
                 { label: '甲烷(%)', value: '${ch4ValOut}' },
                 { label: '一氧化碳(ppm)', value: '${coValOut}' },
@@ -1088,8 +1088,8 @@ export const testConfigSealedMine: Config[] = [
               layout: 'val-top',
               title: '预警',
               items: [
-                { label: '闭内自燃发火隐患等级', value: '${fireAlarm.alarmName}' },
-                { label: '闭外自燃发火隐患等级', value: '${fireAlarmOut.alarmName}' },
+                { label: '密闭墙内自燃发火隐患等级', value: '${fireAlarm.alarmName}' },
+                { label: '密闭墙外自燃发火隐患等级', value: '${fireAlarmOut.alarmName}' },
                 { label: '爆炸预警等级', value: '${explosionAlarm.alarmName}' },
                 { label: '压差隐患等级', value: '${sourcePressureAlarm.alarmName}' },
                 { label: '是否漏风', value: '${leakageAlarm.alarmName}' },

src/views/dashboard/SealedGoaf/index.vue

@@ -214,7 +214,7 @@
           leakageAlarm: '老空区永久密闭漏风状态报警',
           sourcePressureAlarm: '内外压差风险报警',
           fireAlarm: '自燃发火隐患报警',
-          fireAlarmOut: '老空区永久密闭外自燃发火报警',
+          fireAlarmOut: '老空区永久密密闭墙外自燃发火报警',
           unsealAlarm: '火区老空区永久密闭启封报警',
           explosionAlarm: '老空区永久密闭爆炸危险性报警',
           overLimitAlarm: '超限报警',

src/views/dashboard/SealedGoafMine/configurable.data.sealedGoafMine.ts

@@ -202,7 +202,7 @@ export const testConfigSealedGoaf: Config[] = [
       position: 'top:470px;left:25px;',
     },
   },
-  // 4.  密闭内墙详情展示
+  // 4.  密密闭墙内墙详情展示
   {
     deviceType: 'detail_inner_display',
     moduleName: '老空区永久密闭详情展示',
@@ -249,7 +249,7 @@ export const testConfigSealedGoaf: Config[] = [
             {
               type: 'D',
               layout: 'val-top',
-              title: '密闭内详情',
+              title: '密密闭墙内详情',
               items: [
                 { label: '甲烷', value: '${ch4Val}' },
                 { label: '一氧化碳', value: '${coVal}' },
@@ -264,7 +264,7 @@ export const testConfigSealedGoaf: Config[] = [
             {
               type: 'D',
               layout: 'val-top',
-              title: '密闭外详情',
+              title: '密密闭墙外详情',
               items: [
                 { label: '甲烷', value: '${ch4ValOut}' },
                 { label: '一氧化碳', value: '${coValOut}' },

src/views/dashboard/SealedGoafMine/index.vue

@@ -41,7 +41,6 @@
     goafStatusNum: null,
     goafAlarmNum: null,
     provinceAlarm: null,
-
   }); // 所有数据汇总
   const mineCode = ref('610801006584'); //暂时写死
   const goafList = ref<any[]>([]);
@@ -49,29 +48,28 @@
   async function fetchHomeData() {
     try {
       // 异步获取所有接口数据（并行请求提升性能）
-      const [monitorData,  coalSeamFireData, goafStatusNum , goafAlarmNum, provinceAlarm] = await Promise.all([
-        getGoafData({mineCodeList: mineCode.value}), // 密闭监测详情
+      const [monitorData, coalSeamFireData, goafStatusNum, goafAlarmNum, provinceAlarm] = await Promise.all([
+        getGoafData({ mineCodeList: mineCode.value }), // 密闭监测详情
         getCoalSeamFireNum(appStore.simpleMapParams), // 煤层自燃倾向数据
         getGoafStatusNum({}), // 密闭统计
-        getGoafAlarmNum({}),  // 预警统计
-        getProvinceAlarm({mineCodeList: mineCode.value}), // 预警信息列表
+        getGoafAlarmNum({}), // 预警统计
+        getProvinceAlarm({ mineCodeList: mineCode.value }), // 预警信息列表
       ]);
 
-      
       if (provinceAlarm?.records) {
         const alarmTypeMap = {
-          leakageAlarm: "密闭漏风状态报警",
-          sourcePressureAlarm: "内外压差风险报警",
-          fireAlarm: "自燃发火隐患报警",
-          fireAlarmOut:"密闭外自燃发火报警",
-          unsealAlarm: "火区密闭启封报警",
-          explosionAlarm: "密闭爆炸危险性报警",
-          overLimitAlarm: "超限报警",
-          lateReport: "数据延迟上报预警",
+          leakageAlarm: '密闭漏风状态报警',
+          sourcePressureAlarm: '内外压差风险报警',
+          fireAlarm: '自燃发火隐患报警',
+          fireAlarmOut: '密密闭墙外自燃发火报警',
+          unsealAlarm: '火区密闭启封报警',
+          explosionAlarm: '密闭爆炸危险性报警',
+          overLimitAlarm: '超限报警',
+          lateReport: '数据延迟上报预警',
         };
 
         // 遍历列表，把 alarmType 替换成中文
-        provinceAlarm.records = provinceAlarm.records.map(item => {
+        provinceAlarm.records = provinceAlarm.records.map((item) => {
           item.alarmTypeCont = alarmTypeMap[item.alarmType] || item.alarmType;
           return item;
         });
@@ -104,14 +102,14 @@
       try {
         // 调用接口
         const res = await getGoafList({
-          order: "desc",
+          order: 'desc',
           mineCode: mineCode.value,
         });
         goafList.value = res || [];
         await renderGoafMarkers(goafList.value); // 渲染标记
       } catch (error) {
         goafList.value = [];
-        console.error("接口请求失败：", error);
+        console.error('接口请求失败：', error);
       }
     });
   });

src/views/dashboard/basicInfo/accessStatistics/access.data.ts

@@ -43,10 +43,10 @@ export const accessStatisticsColumns: BasicColumn[] = [
     width: 120,
     align: 'center',
   },
-  {
-    title: '离线数量',
-    dataIndex: 'lxNum',
-    width: 120,
-    align: 'center',
-  },
-]
+  // {
+  //   title: '离线数量',
+  //   dataIndex: 'lxNum',
+  //   width: 120,
+  //   align: 'center',
+  // },
+];

src/views/dashboard/basicInfo/closedStatistics/closed.data.ts

@@ -16,41 +16,11 @@ export const dataColumns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: '正常生产',
+    title: '正常生产煤矿',
     dataIndex: 'mbStatusNum0',
     align: 'center',
     width: 100,
   },
-  {
-    title: '长期停建无法联系矿井',
-    dataIndex: 'mbStatusNum1',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: '长期停建矿井',
-    dataIndex: 'mbStatusNum2',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: '长期停产矿井',
-    dataIndex: 'mbStatusNum3',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: '停产整改矿井',
-    dataIndex: 'mbStatusNum4',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: '自行停产',
-    dataIndex: 'mbStatusNum5',
-    align: 'center',
-    width: 100,
-  },
   {
     title: '正常建设煤矿',
     dataIndex: 'mbStatusNum6',
@@ -58,27 +28,27 @@ export const dataColumns: BasicColumn[] = [
     width: 100,
   },
   {
-    title: '责令停产整顿',
-    dataIndex: 'mbStatusNum7',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: '拟建矿井',
-    dataIndex: 'mbStatusNum8',
-    align: 'center',
-    width: 100,
-  },
-  {
-    title: '自行停建',
-    dataIndex: 'mbStatusNum9',
+    title: '停产停建',
+    dataIndex: 'mbStatusNum11',
     align: 'center',
+    customRender({ record }) {
+      return ['mbStatusNum12', 'mbStatusNum9', 'mbStatusNum8', 'mbStatusNum4', 'mbStatusNum5', 'mbStatusNum7', 'mbStatusNum10'].reduce((num, key) => {
+        return num + parseInt(record[key]) || 0;
+      }, 0);
+    },
+    helpMessage: '包含：停建整改，自行停建，拟建矿井，停产整改矿井，自行停产矿井，责令停产整顿，责令停止建设',
     width: 100,
   },
   {
-    title: '停建整改',
-    dataIndex: 'mbStatusNum10',
+    title: '长期停产停建',
+    dataIndex: 'mbStatusNum1',
     align: 'center',
+    customRender({ record }) {
+      return ['mbStatusNum1', 'mbStatusNum2', 'mbStatusNum3'].reduce((num, key) => {
+        return num + parseInt(record[key]) || 0;
+      }, 0);
+    },
+    helpMessage: '包含：长期停建无法联系矿井，长期停建矿井，长期停产矿井',
     width: 100,
   },
   {
@@ -87,10 +57,70 @@ export const dataColumns: BasicColumn[] = [
     align: 'center',
     width: 100,
   },
-  {
-    title: '其他',
-    dataIndex: 'mbStatusNumQt',
-    align: 'center',
-    width: 100,
-  },
+  // {
+  //   title: '正常生产',
+  //   dataIndex: 'mbStatusNum0',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '长期停建无法联系矿井',
+  //   dataIndex: 'mbStatusNum1',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '长期停建矿井',
+  //   dataIndex: 'mbStatusNum2',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '长期停产矿井',
+  //   dataIndex: 'mbStatusNum3',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '停产整改矿井',
+  //   dataIndex: 'mbStatusNum4',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '自行停产',
+  //   dataIndex: 'mbStatusNum5',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '责令停产整顿',
+  //   dataIndex: 'mbStatusNum7',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '拟建矿井',
+  //   dataIndex: 'mbStatusNum8',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '自行停建',
+  //   dataIndex: 'mbStatusNum9',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '停建整改',
+  //   dataIndex: 'mbStatusNum10',
+  //   align: 'center',
+  //   width: 100,
+  // },
+  // {
+  //   title: '其他',
+  //   dataIndex: 'mbStatusNumQt',
+  //   align: 'center',
+  //   width: 100,
+  // },
 ];

src/views/dashboard/basicInfo/minesInfo/minesInfo.data.ts

@@ -69,7 +69,7 @@ export const columns: BasicColumn[] = [
     // },
   },
   {
-    title: '最高自燃倾向性',
+    title: '煤层自燃倾向性',
     dataIndex: 'coalSeamLevel',
     width: 100,
   },
@@ -102,26 +102,26 @@ export const columns: BasicColumn[] = [
       if (isEmpty(status)) {
         return h('span', '-');
       }
-      const text = status === '1' ? '在线' : '离线';
+      const text = status === '1' ? '在线' : '中断';
       const textColor = status === '1' ? StatusColorEnum.green : StatusColorEnum.red;
       return h('span', { style: { color: textColor } }, text);
     },
   },
-  {
-    title: '应接数量',
-    dataIndex: 'yingjieNum',
-    width: 100,
-  },
+  // {
+  //   title: '应接数量',
+  //   dataIndex: 'yingjieNum',
+  //   width: 100,
+  // },
   {
     title: '已接数量',
     dataIndex: 'accessGoafNum',
     width: 100,
   },
-  {
-    title: '未接数量',
-    dataIndex: 'notAccessGoafNum',
-    width: 100,
-  },
+  // {
+  //   title: '未接数量',
+  //   dataIndex: 'notAccessGoafNum',
+  //   width: 100,
+  // },
 ];
 
 // 4. 生成动态搜索表单配置（接收动态下拉选项）
@@ -171,7 +171,7 @@ export const searchFormSchema: FormSchema[] = [
     component: 'Select',
     componentProps: {
       options: [
-        { label: '离线', value: '0' },
+        { label: '中断', value: '0' },
         { label: '在线', value: '1' },
       ],
     },

src/views/dashboard/basicInfo/problemReport/index.vue

@@ -72,7 +72,7 @@
           />
         </template>
         <template #form-goaf-select>
-          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" :allowClear="true" />
         </template>
       </BasicTable>
     </TabPane>
@@ -108,7 +108,7 @@
           />
         </template>
         <template #form-goaf-select>
-          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" />
+          <a-select v-model:value="goafId" :options="goafOptions" placeholder="请选择" :allowClear="true" />
         </template>
       </BasicTable>
     </TabPane>
@@ -176,7 +176,7 @@
   // 实例化矿井Store
   const mineStore = useMineDepartmentStore();
 
-  const { goafOptions, goafId, innerValue, initGoafOptions } = useInitForm();
+  const { goafOptions, goafId, innerValue, initGoafOptions } = useInitForm({ unlinkGoafId: true });
 
   // 响应式数据
   const activeKey = ref('unresolved'); // 激活的Tab键

src/views/monitor/sealedMonitor/components/HistoricalDetailsModal.txt

@@ -0,0 +1,350 @@
+<template>
+  <Modal v-model:open="visible" title="老空区永久密闭监测详情" width="1200px" @ok="handleOk" @cancel="handleCancel" prefixCls="custom-modal">
+    <div class="filter-area">
+      <!-- 时间选择 -->
+      <div class="filter-section">
+        <span class="filter-label">时间选择：</span>
+        <RangePicker
+          v-model="dateRange"
+          format="YYYY-MM-DD HH:mm:ss"
+          :placeholder="['开始时间', '结束时间']"
+          style="width: 320px"
+          :show-time="{ format: 'HH:mm:ss' }"
+        />
+      </div>
+      <!-- 参数选择 -->
+      <div class="filter-section param-section">
+        <span class="filter-label">参数选择：</span>
+        <div class="param-selector">
+          <Input v-model="selectedParamsText" placeholder="请选择监测参数" readonly style="width: 300px" />
+          <Button type="primary" @click="showTree = !showTree">+</Button>
+          <!-- 树形选择器 -->
+          <div class="tree-popup" v-if="showTree">
+            <BasicTree :treeData="treeData" :checkable="true" defaultExpandAll @check="handleTreeCheck" :checkedKeys="checkedTreeKeys" />
+          </div>
+        </div>
+      </div>
+      <!-- 生成按钮 -->
+      <div class="filter-section">
+        <Button type="primary" @click="generateChart">生成</Button>
+      </div>
+    </div>
+    <!-- 动态图表区域-->
+    <div class="chart-area">
+      <div class="chart-item" style="flex: 1 1 100%">
+        <div class="chart-placeholder">
+          <template v-if="generatedChartData.length">
+            <CustomChart :chart-data="generatedChartData" :chart-config="generatedChartConfig" style="height: 100%; width: 100%" />
+          </template>
+          <template v-else-if="isChartGenerated">
+            <div class="empty-chart">暂无匹配数据，请调整筛选条件</div>
+          </template>
+          <template v-else>
+            <div class="empty-chart">请选择时间范围和参数，点击"生成"查看数据</div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { Modal, DatePicker, Button, message, Input } from 'ant-design-vue';
+  import { BasicTree } from '/@/components/Tree/index';
+  import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
+  import { treeData } from '../monitor.data'; // 引入模拟数据
+  import dayjs from 'dayjs';
+  // import isBetween from 'dayjs/plugin/isBetween'; // 引入 isBetween 插件
+
+  // // 关键：使用 dayjs 插件
+  // dayjs.extend(isBetween);
+
+  // 组件注册
+  const RangePicker = DatePicker.RangePicker;
+
+  // 弹框控制
+  const visible = ref(false);
+  const dataRef = ref<any>();
+
+  // 外部调用显示弹框
+  const showModal = (record: any) => {
+    visible.value = true;
+    dataRef.value = record;
+  };
+  const hideModal = () => (visible.value = false);
+  const handleOk = () => hideModal();
+  const handleCancel = () => hideModal();
+
+  // 筛选相关响应式数据
+  const dateRange = ref([dayjs().subtract(1, 'day').toDate(), dayjs().toDate()]); // 默认时间范围（近1天）
+  const selectedParams = ref([]); // 选中的参数（实际用于图表）
+  const selectedParamsText = ref(''); // 参数选择框显示文本
+  const showTree = ref(false); // 控制树形选择器显示/隐藏
+  const checkedTreeKeys = ref([]); // 树形选中的key
+  const generatedChartData = ref([]); // 生成的图表数据
+  const generatedChartConfig = ref({}); // 生成的图表配置
+  const isChartGenerated = ref(false); // 是否已点击生成
+
+  // Tree Key 与参数名映射（关键：关联树形节点和实际参数）
+  const treeKeyToParamMap = computed(() => ({
+    '0-0-0': 'CO',
+    '0-0-1': 'CH4',
+    '0-0-2': 'C2H4',
+    '0-0-3': 'C2H2',
+    '0-0-4': 'CO2',
+    '0-0-5': 'O2',
+    '1-1-0': 'innerPressure',
+    '1-1-1': 'outerPressure',
+    '1-1-2': 'pressureDiff',
+    '2-2': 'temperature',
+  }));
+
+  // 参数名反向映射到 Tree Key
+  const paramToTreeKeyMap = computed(() => {
+    return Object.fromEntries(Object.entries(treeKeyToParamMap.value).map(([key, val]) => [val, key]));
+  });
+
+  // 树形选择事件处理
+  const handleTreeCheck = (checkedKeys) => {
+    checkedTreeKeys.value = checkedKeys;
+    // 转换为实际参数名
+    const params = checkedKeys.map((key) => treeKeyToParamMap.value[key]).filter((param) => param); // 过滤无效参数
+    selectedParams.value = params;
+
+    // 更新输入框显示文本
+    const paramLabels = params.map((param) => paramLabelMap.value[param]);
+    selectedParamsText.value = paramLabels.join('、');
+  };
+
+  // 参数颜色映射
+  const paramColorMap = computed(() => ({
+    CO: '#f5222d', // 红色
+    CH4: '#1890ff', // 蓝色
+    C2H4: '#faad14', // 橙色
+    C2H2: '#52c41a', // 绿色
+    CO2: '#722ed1', // 紫色
+    O2: '#13c2c2', // 青色
+    innerPressure: '#ff4d4f', // 浅红
+    outerPressure: '#40a9ff', // 浅蓝
+    pressureDiff: '#fa8c16', // 浅橙
+    temperature: '#9254de', // 浅紫
+  }));
+
+  // 参数标签映射（图表系列名称）
+  const paramLabelMap = computed(() => ({
+    CO: 'CO浓度(ppm)',
+    CH4: 'CH4浓度(%)',
+    C2H4: 'C2H4浓度(ppm)',
+    C2H2: 'C2H2浓度(ppm)',
+    CO2: 'CO2浓度(%)',
+    O2: 'O2浓度(%)',
+    innerPressure: '内压力(kPa)',
+    outerPressure: '外压力(kPa)',
+    pressureDiff: '压差(kPa)',
+    temperature: '温度(℃)',
+  }));
+
+  // 生成折线图核心逻辑
+  const generateChart = () => {
+    // 校验筛选条件
+    if (!dateRange.value[0] || !dateRange.value[1]) {
+      message.warning('请选择完整的时间范围');
+      return;
+    }
+    if (selectedParams.value.length === 0) {
+      message.warning('请至少选择一个监测参数');
+      return;
+    }
+
+    isChartGenerated.value = true;
+    const start = dayjs(dateRange.value[0]); // 转为 dayjs 实例
+    const end = dayjs(dateRange.value[1]); // 转为 dayjs 实例
+
+    // 1. 筛选时间范围内的模拟数据（修复核心漏洞）
+    const filteredData = [];
+
+    // 2. 构建图表数据结构（适配 CustomChart 的 line 类型）
+    const timeMap = new Map();
+    // 修复变量名：filteredRawData → filteredData（之前未定义）
+    filteredData.forEach((item) => {
+      const timeStr = dayjs(item.time).format('YYYY-MM-DD HH:mm:ss');
+      if (!timeMap.has(timeStr)) {
+        timeMap.set(timeStr, { time: timeStr });
+      }
+      // 只保留选中的参数数据
+      selectedParams.value.forEach((param) => {
+        if (item[param] !== undefined) {
+          timeMap.get(timeStr)[param] = item[param];
+        }
+      });
+    });
+
+    // 转换为数组并按时间排序
+    const chartData = Array.from(timeMap.values()).sort((a, b) => {
+      return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
+    });
+    generatedChartData.value = chartData;
+
+    // 3. 构建图表配置（折线图类型，完善适配逻辑）
+    generatedChartConfig.value = {
+      type: 'line', // 折线图
+      clear: true, // 每次生成清空之前的图表
+      legend: { show: true, top: 10, right: 10 },
+      xAxis: [
+        {
+          type: 'category',
+          axisLabel: {
+            rotate: 30,
+            formatter: (value) => dayjs(value).format('HH:mm:ss'),
+            interval: Math.max(1, Math.floor(chartData.length / 10)), // 控制x轴标签密度
+          },
+        },
+      ],
+      yAxis: selectedParams.value.map((param) => ({
+        type: 'value',
+        name: paramLabelMap.value[param].split('(')[1].replace(')', ''), // 显示单位
+        nameTextStyle: { color: paramColorMap.value[param] },
+        axisLine: { lineStyle: { color: paramColorMap.value[param] } },
+        splitLine: { lineStyle: { opacity: 0.1 } },
+      })),
+      series: selectedParams.value.map((param, index) => ({
+        name: paramLabelMap.value[param],
+        type: 'line',
+        readFrom: '', // 适配 CustomChart 的 baseSeries 读取逻辑
+        label: paramLabelMap.value[param],
+        xprop: 'time', // 对应图表数据的 x 字段（时间）
+        yprop: param, // 对应图表数据的 y 字段（参数值）
+        color: paramColorMap.value[param],
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 4,
+        yAxisIndex: index,
+      })),
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'cross' },
+        formatter: (params) => {
+          let tooltipHtml = `<div>${dayjs(params[0].axisValue).format('YYYY-MM-DD HH:mm:ss')}</div>`;
+          params.forEach((param) => {
+            tooltipHtml += `<div style="color: ${param.color}">${param.seriesName}: ${param.value[1]} ${param.seriesName.split('(')[1].replace(')', '')}</div>`;
+          });
+          return tooltipHtml;
+        },
+      },
+      grid: { left: 60, top: 40, right: 60, bottom: 60 },
+    };
+
+    // 无数据提示
+    if (chartData.length === 0) {
+      message.info('当前筛选条件下无数据');
+    }
+  };
+
+  // 暴露方法给父组件
+  defineExpose({
+    showModal,
+    hideModal,
+  });
+</script>
+<style scoped>
+  .param-selector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    position: relative;
+  }
+  .tree-popup {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+    width: 300px;
+    max-height: 300px;
+    overflow-y: auto;
+    background: #fff;
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    padding: 8px;
+  }
+  .filter-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: 20px;
+    padding: 20px;
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
+    background: #f8f9fc;
+    align-items: center;
+  }
+  .filter-section {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .filter-label {
+    color: #666;
+    min-width: 80px;
+    flex-shrink: 0;
+    font-weight: 500;
+  }
+  .param-section {
+    flex: 1;
+    min-width: 300px;
+  }
+  .chart-area {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 20px;
+    border: 1px solid #f0f0f0;
+    border-radius: 10px;
+    background: #f8f9fc;
+  }
+  .chart-item {
+    flex: 1;
+    min-width: 200px;
+  }
+  .chart-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 12px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .chart-desc {
+    font-size: 12px;
+    color: #666;
+    font-weight: normal;
+  }
+  .chart-placeholder {
+    width: 100%;
+    height: 300px;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #333;
+    border: 1px solid #eee;
+  }
+  .empty-chart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #999;
+    font-size: 14px;
+  }
+  @media (max-width: 1200px) {
+    .param-section {
+      min-width: 100%;
+      margin-top: 8px;
+    }
+    .filter-area {
+      gap: 12px;
+    }
+  }
+</style>

src/views/monitor/sealedMonitor/components/HistoricalDetailsModal.vue

@@ -1,350 +1,352 @@
 <template>
-  <Modal v-model:open="visible" title="老空区永久密闭监测详情" width="1200px" @ok="handleOk" @cancel="handleCancel" prefixCls="custom-modal">
-    <div class="filter-area">
-      <!-- 时间选择 -->
-      <div class="filter-section">
-        <span class="filter-label">时间选择：</span>
-        <RangePicker
-          v-model="dateRange"
-          format="YYYY-MM-DD HH:mm:ss"
-          :placeholder="['开始时间', '结束时间']"
-          style="width: 320px"
-          :show-time="{ format: 'HH:mm:ss' }"
-        />
+  <BasicModal
+    v-bind="$attrs"
+    title="密闭监测详情"
+    width="1400px"
+    :bodyStyle="{ padding: `0 20px 0 20px` }"
+    :showOkBtn="false"
+    cancelText="返回"
+    @register="register"
+    @close="okHandler"
+    @ok="okHandler"
+    @cancel="okHandler"
+  >
+    <!-- 基础信息栏（修改布局：每行4列，共两行） -->
+    <div class="base-info">
+      <div v-for="(item, index) in modalDetailsData.basicInfo" :key="index" class="info-item">
+        <span class="label">{{ item.label }}:</span>
+        <component :is="contextRender(item)"></component>
       </div>
-      <!-- 参数选择 -->
-      <div class="filter-section param-section">
-        <span class="filter-label">参数选择：</span>
-        <div class="param-selector">
-          <Input v-model="selectedParamsText" placeholder="请选择监测参数" readonly style="width: 300px" />
-          <Button type="primary" @click="showTree = !showTree">+</Button>
-          <!-- 树形选择器 -->
-          <div class="tree-popup" v-if="showTree">
-            <BasicTree :treeData="treeData" :checkable="true" defaultExpandAll @check="handleTreeCheck" :checkedKeys="checkedTreeKeys" />
+    </div>
+
+    <a-tabs v-model:activeKey="activeKey" type="card" :destroyInactiveTabPane="true">
+      <a-tab-pane key="1" tab="密闭墙内">
+        <!-- 监测数据卡片 -->
+        <div class="data-cards">
+          <MiniBoard
+            v-for="(item, index) in modalDetailsData.board"
+            :key="index"
+            type="J"
+            :label="item.label"
+            :value="dataRef[item.value] || '-'"
+            layout="label-top"
+          />
+        </div>
+
+        <!-- 图表区域 -->
+        <div class="chart-area">
+          <div v-if="modalDetailsData.blastDeltaConfig" class="chart-item">
+            <div class="chart-title pl-20px">爆炸三角形</div>
+            <div class="chart-placeholder">
+              <BlastDelta class="chart-blast" :posMonitor="dataRef" :canvas-size="{ width: 196, height: 125 }" text-color="#000" />
+            </div>
+          </div>
+          <div v-if="modalDetailsData.gasConcentrationConfig" class="chart-item">
+            <div class="chart-title pl-20px">气体浓度曲线</div>
+            <div class="chart-placeholder">
+              <CustomChart
+                :chart-data="{ chartData: dataArray }"
+                :chart-config="modalDetailsData.gasConcentrationConfig"
+                :chart-option="{
+                  textStyle: {
+                    color: '#000',
+                  },
+                }"
+                style="height: 100%; width: 100%"
+              />
+            </div>
+          </div>
+          <div v-if="modalDetailsData.pressureConfig" class="chart-item">
+            <div class="chart-title pl-20px">内外压力及压差曲线</div>
+            <div class="chart-placeholder">
+              <CustomChart
+                :chart-data="{ chartData: dataArray }"
+                :chart-config="modalDetailsData.pressureConfig"
+                :chart-option="{
+                  textStyle: {
+                    color: '#000',
+                  },
+                }"
+                style="height: 100%; width: 100%"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <!-- 生成按钮 -->
-      <div class="filter-section">
-        <Button type="primary" @click="generateChart">生成</Button>
-      </div>
-    </div>
-    <!-- 动态图表区域-->
-    <div class="chart-area">
-      <div class="chart-item" style="flex: 1 1 100%">
-        <div class="chart-placeholder">
-          <template v-if="generatedChartData.length">
-            <CustomChart :chart-data="generatedChartData" :chart-config="generatedChartConfig" style="height: 100%; width: 100%" />
-          </template>
-          <template v-else-if="isChartGenerated">
-            <div class="empty-chart">暂无匹配数据，请调整筛选条件</div>
-          </template>
-          <template v-else>
-            <div class="empty-chart">请选择时间范围和参数，点击"生成"查看数据</div>
-          </template>
+      </a-tab-pane>
+
+      <a-tab-pane key="2" tab="密闭墙外">
+        <!-- 监测数据卡片 -->
+        <div class="data-cards">
+          <MiniBoard
+            v-for="(item, index) in modalDetailsData.boardOut"
+            :key="index"
+            type="J"
+            :label="item.label"
+            :value="dataRef[item.value] || '-'"
+            layout="label-top"
+          />
         </div>
-      </div>
-    </div>
-  </Modal>
+
+        <!-- 图表区域 -->
+        <div class="chart-area">
+          <div v-if="modalDetailsData.blastDeltaOutConfig" class="chart-item">
+            <div class="chart-title pl-20px">爆炸三角形</div>
+            <div class="chart-placeholder">
+              <BlastDelta class="chart-blast" :posMonitor="dataRef" :canvas-size="{ width: 196, height: 125 }" text-color="#000" />
+            </div>
+          </div>
+          <div v-if="modalDetailsData.gasConcentrationOutConfig" class="chart-item">
+            <div class="chart-title pl-20px">气体浓度曲线</div>
+            <div class="chart-placeholder">
+              <CustomChart
+                :chart-data="{ chartData: dataArray }"
+                :chart-config="modalDetailsData.gasConcentrationOutConfig"
+                :chart-option="{
+                  textStyle: {
+                    color: '#000',
+                  },
+                }"
+                style="height: 100%; width: 100%"
+              />
+            </div>
+          </div>
+          <div v-if="modalDetailsData.pressureOutConfig" class="chart-item">
+            <div class="chart-title pl-20px">内外压力及压差曲线</div>
+            <div class="chart-placeholder">
+              <CustomChart
+                :chart-data="{ chartData: dataArray }"
+                :chart-config="modalDetailsData.pressureOutConfig"
+                :chart-option="{
+                  textStyle: {
+                    color: '#000',
+                  },
+                }"
+                style="height: 100%; width: 100%"
+              />
+            </div>
+          </div>
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+  </BasicModal>
 </template>
-<script lang="ts" setup>
-  import { ref, computed } from 'vue';
-  import { Modal, DatePicker, Button, message, Input } from 'ant-design-vue';
-  import { BasicTree } from '/@/components/Tree/index';
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ref } from 'vue';
+  import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
+  import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';
   import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
-  import { treeData } from '../monitor.data'; // 引入模拟数据
+  import { get, isFunction } from 'lodash-es';
+  import { h } from 'vue';
+  import { getGoafHistory } from '../monitor.api';
+  // import { useIntervalFn } from '@vueuse/core';
   import dayjs from 'dayjs';
-  // import isBetween from 'dayjs/plugin/isBetween'; // 引入 isBetween 插件
-
-  // // 关键：使用 dayjs 插件
-  // dayjs.extend(isBetween);
+  import { propTypes } from '/@/utils/propTypes';
+  import { message } from 'ant-design-vue';
 
-  // 组件注册
-  const RangePicker = DatePicker.RangePicker;
+  export default defineComponent({
+    components: { BasicModal, MiniBoard, BlastDelta, CustomChart },
+    props: {
+      identifyField: propTypes.string.def('goafId'),
+      modalDetailsData: propTypes.any,
+    },
+    emits: ['close', 'register'],
+    setup(props, { emit }) {
+      const dataRef = ref<any>({});
+      const dataArray = ref<any[]>([]);
+      const activeKey = ref('1');
 
-  // 弹框控制
-  const visible = ref(false);
-  const dataRef = ref<any>();
+      // 添加元素，数组最多15项，按队列排布
+      // const push = (item) => {
+      //   item.readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+      //   dataArray.value = takeRight(concat(dataArray.value, item), 15);
+      // };
 
-  // 外部调用显示弹框
-  const showModal = (record: any) => {
-    visible.value = true;
-    dataRef.value = record;
-  };
-  const hideModal = () => (visible.value = false);
-  const handleOk = () => hideModal();
-  const handleCancel = () => hideModal();
-
-  // 筛选相关响应式数据
-  const dateRange = ref([dayjs().subtract(1, 'day').toDate(), dayjs().toDate()]); // 默认时间范围（近1天）
-  const selectedParams = ref([]); // 选中的参数（实际用于图表）
-  const selectedParamsText = ref(''); // 参数选择框显示文本
-  const showTree = ref(false); // 控制树形选择器显示/隐藏
-  const checkedTreeKeys = ref([]); // 树形选中的key
-  const generatedChartData = ref([]); // 生成的图表数据
-  const generatedChartConfig = ref({}); // 生成的图表配置
-  const isChartGenerated = ref(false); // 是否已点击生成
-
-  // Tree Key 与参数名映射（关键：关联树形节点和实际参数）
-  const treeKeyToParamMap = computed(() => ({
-    '0-0-0': 'CO',
-    '0-0-1': 'CH4',
-    '0-0-2': 'C2H4',
-    '0-0-3': 'C2H2',
-    '0-0-4': 'CO2',
-    '0-0-5': 'O2',
-    '1-1-0': 'innerPressure',
-    '1-1-1': 'outerPressure',
-    '1-1-2': 'pressureDiff',
-    '2-2': 'temperature',
-  }));
-
-  // 参数名反向映射到 Tree Key
-  const paramToTreeKeyMap = computed(() => {
-    return Object.fromEntries(Object.entries(treeKeyToParamMap.value).map(([key, val]) => [val, key]));
-  });
-
-  // 树形选择事件处理
-  const handleTreeCheck = (checkedKeys) => {
-    checkedTreeKeys.value = checkedKeys;
-    // 转换为实际参数名
-    const params = checkedKeys.map((key) => treeKeyToParamMap.value[key]).filter((param) => param); // 过滤无效参数
-    selectedParams.value = params;
-
-    // 更新输入框显示文本
-    const paramLabels = params.map((param) => paramLabelMap.value[param]);
-    selectedParamsText.value = paramLabels.join('、');
-  };
-
-  // 参数颜色映射
-  const paramColorMap = computed(() => ({
-    CO: '#f5222d', // 红色
-    CH4: '#1890ff', // 蓝色
-    C2H4: '#faad14', // 橙色
-    C2H2: '#52c41a', // 绿色
-    CO2: '#722ed1', // 紫色
-    O2: '#13c2c2', // 青色
-    innerPressure: '#ff4d4f', // 浅红
-    outerPressure: '#40a9ff', // 浅蓝
-    pressureDiff: '#fa8c16', // 浅橙
-    temperature: '#9254de', // 浅紫
-  }));
-
-  // 参数标签映射（图表系列名称）
-  const paramLabelMap = computed(() => ({
-    CO: 'CO浓度(ppm)',
-    CH4: 'CH4浓度(%)',
-    C2H4: 'C2H4浓度(ppm)',
-    C2H2: 'C2H2浓度(ppm)',
-    CO2: 'CO2浓度(%)',
-    O2: 'O2浓度(%)',
-    innerPressure: '内压力(kPa)',
-    outerPressure: '外压力(kPa)',
-    pressureDiff: '压差(kPa)',
-    temperature: '温度(℃)',
-  }));
-
-  // 生成折线图核心逻辑
-  const generateChart = () => {
-    // 校验筛选条件
-    if (!dateRange.value[0] || !dateRange.value[1]) {
-      message.warning('请选择完整的时间范围');
-      return;
-    }
-    if (selectedParams.value.length === 0) {
-      message.warning('请至少选择一个监测参数');
-      return;
-    }
-
-    isChartGenerated.value = true;
-    const start = dayjs(dateRange.value[0]); // 转为 dayjs 实例
-    const end = dayjs(dateRange.value[1]); // 转为 dayjs 实例
-
-    // 1. 筛选时间范围内的模拟数据（修复核心漏洞）
-    const filteredData = [];
+      const [register] = useModalInner((d) => {
+        if (!d) return;
+        // 没数据或者新传入的数据id不同，说明是首次/点击别的数据列进入的该组件
+        // if (!dataRef.value || d[props.identifyField] !== dataRef.value[props.identifyField]) {
+        //   dataArray.value = [];
+        // }
+        dataRef.value = d;
+        getGoafHistory({
+          goafId: dataRef.value.goafId,
+          startTime: dayjs().add(-3, 'day').format('YYYY-MM-DD 00:00:00'),
+          endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+          pageSize: 100,
+        }).then((r) => {
+          if (r && r.records) {
+            dataArray.value = r.records;
+          } else {
+            message.info('暂无历史数据');
+            dataArray.value = [];
+          }
+        });
+        // push(d);
+        // resume();
+      });
 
-    // 2. 构建图表数据结构（适配 CustomChart 的 line 类型）
-    const timeMap = new Map();
-    // 修复变量名：filteredRawData → filteredData（之前未定义）
-    filteredData.forEach((item) => {
-      const timeStr = dayjs(item.time).format('YYYY-MM-DD HH:mm:ss');
-      if (!timeMap.has(timeStr)) {
-        timeMap.set(timeStr, { time: timeStr });
+      function contextRender({ value, customRender }: any) {
+        if (isFunction(customRender)) return customRender({ record: dataRef.value });
+        return h('span', get(dataRef.value, value));
       }
-      // 只保留选中的参数数据
-      selectedParams.value.forEach((param) => {
-        if (item[param] !== undefined) {
-          timeMap.get(timeStr)[param] = item[param];
-        }
-      });
-    });
 
-    // 转换为数组并按时间排序
-    const chartData = Array.from(timeMap.values()).sort((a, b) => {
-      return dayjs(a.time).valueOf() - dayjs(b.time).valueOf();
-    });
-    generatedChartData.value = chartData;
+      // function fetchDetailData() {
+      //   const { deptId, goafId } = dataRef.value;
+      //   getGoafData({ deptId, goafId }).then(({ records }) => {
+      //     dataRef.value = {
+      //       ...dataRef.value,
+      //       ...last(records),
+      //     };
+      //     push(dataRef.value);
+      //   });
+      // }
 
-    // 3. 构建图表配置（折线图类型，完善适配逻辑）
-    generatedChartConfig.value = {
-      type: 'line', // 折线图
-      clear: true, // 每次生成清空之前的图表
-      legend: { show: true, top: 10, right: 10 },
-      xAxis: [
-        {
-          type: 'category',
-          axisLabel: {
-            rotate: 30,
-            formatter: (value) => dayjs(value).format('HH:mm:ss'),
-            interval: Math.max(1, Math.floor(chartData.length / 10)), // 控制x轴标签密度
-          },
-        },
-      ],
-      yAxis: selectedParams.value.map((param) => ({
-        type: 'value',
-        name: paramLabelMap.value[param].split('(')[1].replace(')', ''), // 显示单位
-        nameTextStyle: { color: paramColorMap.value[param] },
-        axisLine: { lineStyle: { color: paramColorMap.value[param] } },
-        splitLine: { lineStyle: { opacity: 0.1 } },
-      })),
-      series: selectedParams.value.map((param, index) => ({
-        name: paramLabelMap.value[param],
-        type: 'line',
-        readFrom: '', // 适配 CustomChart 的 baseSeries 读取逻辑
-        label: paramLabelMap.value[param],
-        xprop: 'time', // 对应图表数据的 x 字段（时间）
-        yprop: param, // 对应图表数据的 y 字段（参数值）
-        color: paramColorMap.value[param],
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 4,
-        yAxisIndex: index,
-      })),
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: { type: 'cross' },
-        formatter: (params) => {
-          let tooltipHtml = `<div>${dayjs(params[0].axisValue).format('YYYY-MM-DD HH:mm:ss')}</div>`;
-          params.forEach((param) => {
-            tooltipHtml += `<div style="color: ${param.color}">${param.seriesName}: ${param.value[1]} ${param.seriesName.split('(')[1].replace(')', '')}</div>`;
-          });
-          return tooltipHtml;
-        },
-      },
-      grid: { left: 60, top: 40, right: 60, bottom: 60 },
-    };
+      // const { pause, resume } = useIntervalFn(
+      //   () => {
+      //     fetchDetailData();
+      //   },
+      //   1000,
+      //   {
+      //     immediate: false,
+      //   }
+      // );
 
-    // 无数据提示
-    if (chartData.length === 0) {
-      message.info('当前筛选条件下无数据');
-    }
-  };
+      function okHandler() {
+        // pause();
+        emit('close');
+      }
 
-  // 暴露方法给父组件
-  defineExpose({
-    showModal,
-    hideModal,
+      return {
+        dataRef,
+        dataArray,
+        get,
+        register,
+        contextRender,
+        okHandler,
+        activeKey,
+      };
+    },
   });
 </script>
-<style scoped>
-  .param-selector {
+<style lang="less" scoped>
+  .base-info {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr); /* 强制每行4列 */
+    grid-template-rows: auto auto; /* 两行自动高度 */
+    gap: 12px 12px; /* 行列间距（行间距16px，列间距12px） */
+    margin-bottom: 20px;
+    padding: 20px 10px;
+    // border: 1px solid @border-color-base;
+    border-radius: 10px;
+    background: #ecf4fd;
+  }
+  .info-item {
     display: flex;
     align-items: center;
-    gap: 8px;
-    position: relative;
+    /* 适配文字过长的情况 */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background-image: linear-gradient(to right, #d7eafe, transparent);
+    padding: 5px 10px;
+    border-radius: 5px;
   }
-  .tree-popup {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    margin-top: 8px;
-    width: 300px;
-    max-height: 300px;
-    overflow-y: auto;
-    background: #fff;
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    z-index: 100;
-    padding: 8px;
+  .label {
+    color: #666;
+    margin-right: 8px;
+    // min-width: 90px;
+    flex-shrink: 0; /* 标签宽度不收缩 */
+  }
+  .value {
+    color: #333;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
-  .filter-area {
+  .data-cards {
     display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
+    // grid-template-columns: repeat(8, 1fr);
+    // gap: 16px;
+    justify-content: space-evenly;
     margin-bottom: 20px;
     padding: 20px;
-    border: 1px solid #f0f0f0;
+    // border: 1px solid @border-color-base;
     border-radius: 10px;
-    background: #f8f9fc;
-    align-items: center;
+    // background: @card-bg-color;
+    background: #ecf4fd;
   }
-  .filter-section {
-    display: flex;
-    align-items: center;
-    gap: 8px;
+  .data-card {
+    background: #fafafa;
+    border-radius: 8px;
+    padding: 12px;
+    text-align: center;
   }
-  .filter-label {
-    color: #666;
-    min-width: 80px;
-    flex-shrink: 0;
-    font-weight: 500;
+  .card-value {
+    font-size: 20px;
+    font-weight: bold;
+    color: #1890ff;
+    margin-bottom: 4px;
   }
-  .param-section {
-    flex: 1;
-    min-width: 300px;
+  .card-label {
+    font-size: 14px;
+    color: #666;
   }
+
   .chart-area {
     display: flex;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 20px;
     padding: 20px;
-    border: 1px solid #f0f0f0;
+    // border: 1px solid @border-color-base;
     border-radius: 10px;
-    background: #f8f9fc;
+    justify-content: space-evenly;
+    /* background: black; */
+    // background: @card-bg-color;
+    background: #ecf4fd;
+    --image-title-2: url(/@/assets/images/sealedGoaf/module/module-title-2.png);
+    // --image-bg: linear-gradient();
   }
   .chart-item {
     flex: 1;
-    min-width: 200px;
+    // flex-basis: 6;
+    // flex-shrink: 1;
+    // min-width: 200px;
+    width: 300px;
+    &:first-child {
+      // flex-basis: 380px;
+      flex: 0 0 380px;
+      // flex-shrink: 0;
+      // flex-grow: 1;
+    }
   }
   .chart-title {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
-    margin-bottom: 12px;
-    color: #333;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .chart-desc {
-    font-size: 12px;
-    color: #666;
-    font-weight: normal;
+    // margin-bottom: 8px;
+    font-weight: bold;
+    color: @text-color-call-out;
+    background-image: var(--image-title-2);
+    background-size: 100% 100%;
+    height: 32px;
+    line-height: 32px;
   }
   .chart-placeholder {
     width: 100%;
-    height: 300px;
+    height: 200px;
     border-radius: 4px;
     overflow: hidden;
-    background: #333;
-    border: 1px solid #eee;
+    background-image: @gradient-thirdary-color;
+
+    .chart-blast {
+      height: 170px;
+      margin-top: 20px;
+    }
   }
-  .empty-chart {
+  .chart-placeholder img {
     width: 100%;
     height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #999;
-    font-size: 14px;
-  }
-  @media (max-width: 1200px) {
-    .param-section {
-      min-width: 100%;
-      margin-top: 8px;
-    }
-    .filter-area {
-      gap: 12px;
-    }
+    object-fit: cover;
   }
 </style>

src/views/monitor/sealedMonitor/components/RealtimeDetailsModal.vue

@@ -36,12 +36,7 @@
       <div v-if="modalDetailsData.blastDeltaConfig" class="chart-item">
         <div class="chart-title pl-20px">爆炸三角形</div>
         <div class="chart-placeholder">
-          <BlastDelta
-            :posMonitor="dataRef"
-            :canvas-size="{ width: 225, height: 149 }"
-            :legendStyle="{ left: '50%', top: '10px' }"
-            text-color="#000"
-          />
+          <BlastDelta :posMonitor="dataRef" :canvas-size="{ width: 225, height: 149 }" text-color="#000" />
         </div>
       </div>
       <div v-if="modalDetailsData.gasConcentrationConfig" class="chart-item">
@@ -84,10 +79,10 @@
   import MiniBoard from '/@/components/Configurable/detail/MiniBoard.vue';
   import BlastDelta from '/@/components/Configurable/preset/BlastDelta.vue';
   import CustomChart from '/@/components/Configurable/detail/CustomChart.vue';
-  import { concat, get, isFunction, last, takeRight } from 'lodash-es';
+  import { get, isFunction } from 'lodash-es';
   import { h } from 'vue';
-  import { getGoafData } from '../monitor.api';
-  import { useIntervalFn } from '@vueuse/core';
+  import { getGoafHistory } from '../monitor.api';
+  // import { useIntervalFn } from '@vueuse/core';
   import dayjs from 'dayjs';
   import { propTypes } from '/@/utils/propTypes';
 
@@ -103,20 +98,27 @@
       const dataArray = ref<any[]>([]);
 
       // 添加元素，数组最多15项，按队列排布
-      const push = (item) => {
-        item.readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
-        dataArray.value = takeRight(concat(dataArray.value, item), 15);
-      };
+      // const push = (item) => {
+      //   item.readTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
+      //   dataArray.value = takeRight(concat(dataArray.value, item), 15);
+      // };
 
       const [register] = useModalInner((d) => {
         if (!d) return;
         // 没数据或者新传入的数据id不同，说明是首次/点击别的数据列进入的该组件
-        if (!dataRef.value || d[props.identifyField] !== dataRef.value[props.identifyField]) {
-          dataArray.value = [];
-        }
+        // if (!dataRef.value || d[props.identifyField] !== dataRef.value[props.identifyField]) {
+        //   dataArray.value = [];
+        // }
         dataRef.value = d;
-        push(d);
-        resume();
+        getGoafHistory({
+          goafId: dataRef.value.goafId,
+          startTime: dayjs().add(-3, 'day').format('YYYY-MM-DD 00:00:00'),
+          endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        }).then((r) => {
+          dataArray.value = r.records;
+        });
+        // push(d);
+        // resume();
       });
 
       function contextRender({ value, customRender }: any) {
@@ -124,29 +126,29 @@
         return h('span', get(dataRef.value, value));
       }
 
-      function fetchDetailData() {
-        const { deptId, goafId } = dataRef.value;
-        getGoafData({ deptId, goafId }).then(({ records }) => {
-          dataRef.value = {
-            ...dataRef.value,
-            ...last(records),
-          };
-          push(dataRef.value);
-        });
-      }
+      // function fetchDetailData() {
+      //   const { deptId, goafId } = dataRef.value;
+      //   getGoafData({ deptId, goafId }).then(({ records }) => {
+      //     dataRef.value = {
+      //       ...dataRef.value,
+      //       ...last(records),
+      //     };
+      //     push(dataRef.value);
+      //   });
+      // }
 
-      const { pause, resume } = useIntervalFn(
-        () => {
-          fetchDetailData();
-        },
-        1000,
-        {
-          immediate: false,
-        }
-      );
+      // const { pause, resume } = useIntervalFn(
+      //   () => {
+      //     fetchDetailData();
+      //   },
+      //   1000,
+      //   {
+      //     immediate: false,
+      //   }
+      // );
 
       function okHandler() {
-        pause();
+        // pause();
         emit('close');
       }
 

src/views/monitor/sealedMonitor/index.vue

@@ -35,9 +35,7 @@
   </Tabs>
 
   <!-- 实时数据详情弹框 -->
-  <RealtimeDetailsModal :modal-details-data="modalDetailsData" @register="registerRealtimeModal" @close="resume" />
-  <!-- 历史数据详情弹框 -->
-  <!-- <HistoricalDetailsModal @register="registerHistoryModal" @close="resume" /> -->
+  <HistoricalDetailsModal :modal-details-data="modalDetailsData" @register="registerRealtimeModal" @close="resume" />
 </template>
 
 <script setup lang="ts">
@@ -46,8 +44,7 @@
   import { Tabs, TabPane, message } from 'ant-design-vue';
   // 引入模拟数据
   import { columns, historicalColumns, historicalFormSchema, searchFormSchema } from './monitor.data';
-  import RealtimeDetailsModal from './components/RealtimeDetailsModal.vue';
-  // import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
+  import HistoricalDetailsModal from './components/HistoricalDetailsModal.vue';
   import { SvgIcon } from '/@/components/Icon';
   import { getGoafData, getGoafHistory } from './monitor.api';
   import { useListPage } from '/@/hooks/system/useListPage';

src/views/monitor/sealedMonitor/monitor.data.ts

@@ -16,9 +16,16 @@ const riskMap = {
   '4': '高风险',
 };
 const linkMap = {
-  '0': '断线',
-  '1': '正常',
-  '2': '标校',
+  0: '正常',
+  1: '超限报警',
+  2: '断电报警',
+  4: '标校',
+  5: '标校报警',
+  8: '超量程',
+  16: '分站故障',
+  32: '不巡检',
+  64: '暂停',
+  128: '传感器故障',
 };
 
 // const dictMap = getDictItemsByCode('mineProStatus');
@@ -36,18 +43,21 @@ export const columns: BasicColumn[] = [
   //   width: 80,
   // },
   {
-    title: '矿井名称',
+    title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
     title: '老空区永久密闭名称',
     dataIndex: 'devicePos',
+    fixed: 'left',
     width: 200,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    fixed: 'left',
     width: 100,
   },
   {
@@ -86,7 +96,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '闭内自燃发火隐患等级',
+    title: '密闭墙内自燃发火隐患等级',
     dataIndex: 'fireAlarm',
     width: 100,
     customRender({ record }) {
@@ -94,7 +104,7 @@ export const columns: BasicColumn[] = [
     },
   },
   {
-    title: '闭外自燃发火隐患等级',
+    title: '密闭墙外自燃发火隐患等级',
     dataIndex: 'fireAlarmOut',
     width: 100,
     customRender({ record }) {
@@ -136,13 +146,13 @@ export const columns: BasicColumn[] = [
   },
   {
     title: '设备状态',
-    dataIndex: 'linkStatus',
+    dataIndex: 'status',
     width: 100,
     customRender({ record }) {
       return alarmCellRender(
-        record.linkStatus,
+        record.status,
         (r) => linkMap[r],
-        (r) => String(r)
+        (r) => r
       );
     },
   },
@@ -156,12 +166,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'coVal',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'coValOut',
         width: 100,
       },
@@ -172,12 +182,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'co2Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'co2ValOut',
         width: 100,
       },
@@ -188,12 +198,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'ch4Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'ch4ValOut',
         width: 100,
       },
@@ -204,12 +214,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'c2h2Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'c2h2ValOut',
         width: 100,
       },
@@ -220,12 +230,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'c2h4Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'c2h4ValOut',
         width: 100,
       },
@@ -236,12 +246,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'o2Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'o2ValOut',
         width: 100,
       },
@@ -252,12 +262,12 @@ export const columns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'temperature',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'temperatureOut',
         width: 100,
       },
@@ -327,6 +337,15 @@ export const searchFormSchema: FormSchema[] = [
     },
     colProps: { span: 6 },
   },
+  {
+    field: 'status',
+    label: '设备状态',
+    component: 'Select',
+    componentProps: {
+      options: map(linkMap, (val, key) => ({ label: val, value: key })),
+    },
+    colProps: { span: 6 },
+  },
 ];
 
 interface ModalDetailsData {
@@ -335,6 +354,10 @@ interface ModalDetailsData {
   gasConcentrationConfig?: ModuleDataChart;
   pressureConfig?: ModuleDataChart;
   blastDeltaConfig?: Record<string, any>;
+  boardOut: Record<string, any>[];
+  gasConcentrationOutConfig?: ModuleDataChart;
+  pressureOutConfig?: ModuleDataChart;
+  blastDeltaOutConfig?: Record<string, any>;
 }
 export const modalDetailsData: ModalDetailsData = {
   basicInfo: [
@@ -354,14 +377,14 @@ export const modalDetailsData: ModalDetailsData = {
       },
     },
     {
-      label: '闭内自燃发火隐患等级',
+      label: '密闭墙内自燃发火隐患等级',
       value: 'fireAlarm',
       customRender({ record }) {
         return alarmCellRender(record.fireAlarm);
       },
     },
     {
-      label: '闭外自燃发火隐患等级',
+      label: '密闭墙外自燃发火隐患等级',
       value: 'fireAlarmOut',
       customRender({ record }) {
         return alarmCellRender(record.fireAlarmOut);
@@ -459,19 +482,19 @@ export const modalDetailsData: ModalDetailsData = {
       {
         label: '氧气浓度',
         readFrom: 'chartData',
-        xprop: 'readTime',
+        xprop: 'createTime',
         yprop: 'o2Val',
       },
       {
         label: '一氧化碳浓度',
         readFrom: 'chartData',
-        xprop: 'readTime',
+        xprop: 'createTime',
         yprop: 'coVal',
       },
       {
         label: '二氧化碳浓度',
         readFrom: 'chartData',
-        xprop: 'readTime',
+        xprop: 'createTime',
         yprop: 'co2Val',
       },
     ],
@@ -499,13 +522,122 @@ export const modalDetailsData: ModalDetailsData = {
       {
         label: '压差',
         readFrom: 'chartData',
-        xprop: 'readTime',
+        xprop: 'createTime',
         yprop: 'sourcePressure',
       },
     ],
     readFrom: '',
   },
   blastDeltaConfig: {},
+  boardOut: [
+    {
+      label: 'CO(ppm)',
+      value: 'coValOut',
+    },
+    {
+      label: 'CO2(%)',
+      value: 'co2ValOut',
+    },
+    {
+      label: 'O2(%)',
+      value: 'o2ValOut',
+    },
+    {
+      label: 'CH4(%)',
+      value: 'ch4ValOut',
+    },
+    {
+      label: 'C2H4(ppm)',
+      value: 'c2h4ValOut',
+    },
+    {
+      label: 'C2H2(ppm)',
+      value: 'c2h2ValOut',
+    },
+    {
+      label: '温度(℃)',
+      value: 'temperatureOut',
+    },
+    {
+      label: '压差(Pa)',
+      value: 'sourcePressureOut',
+    },
+  ],
+  gasConcentrationOutConfig: {
+    type: 'line_smooth', // 使用光滑曲线类型
+    legend: { show: true },
+    xAxis: [
+      {
+        show: true,
+        name: '时间',
+        axisLabel: { color: '#000000' },
+      },
+    ],
+    yAxis: [
+      {
+        show: true,
+        name: '浓度(%)',
+        position: 'left',
+        splitLine: { show: false },
+        axisLine: {
+          show: true,
+          lineStyle: { color: '#333' },
+        },
+        axisLabel: { color: '#000000' },
+        nameTextStyle: { color: '#000' },
+      },
+    ],
+    series: [
+      {
+        label: '氧气浓度',
+        readFrom: 'chartData',
+        xprop: 'createTime',
+        yprop: 'o2ValOut',
+      },
+      {
+        label: '一氧化碳浓度',
+        readFrom: 'chartData',
+        xprop: 'createTime',
+        yprop: 'coValOut',
+      },
+      {
+        label: '二氧化碳浓度',
+        readFrom: 'chartData',
+        xprop: 'createTime',
+        yprop: 'co2ValOut',
+      },
+    ],
+    readFrom: '',
+  },
+  pressureOutConfig: {
+    type: 'line', // 使用普通折线图类型
+    legend: { show: true },
+    xAxis: [
+      {
+        show: true,
+        name: '时间',
+        axisLabel: { color: '#000000' },
+      },
+    ],
+    yAxis: [
+      {
+        show: true,
+        position: 'left',
+        name: '压力(kPa)',
+        axisLabel: { color: '#000000' },
+      },
+    ],
+    series: [
+      {
+        label: '压差',
+        readFrom: 'chartData',
+        xprop: 'createTime',
+        yprop: 'sourcePressure',
+      },
+    ],
+    readFrom: '',
+  },
+  blastDeltaOutConfig: {},
 };
 
 // 历史数据相关
@@ -523,16 +655,19 @@ export const historicalColumns: BasicColumn[] = [
   {
     title: '煤矿名称',
     dataIndex: 'mineName',
+    fixed: 'left',
     width: 200,
   },
   {
     title: '老空区永久密闭名称',
     dataIndex: 'devicePos',
+    fixed: 'left',
     width: 200,
   },
   {
     title: '所属煤层',
     dataIndex: 'coalSeamName',
+    fixed: 'left',
     width: 100,
   },
   {
@@ -545,12 +680,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'coVal',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'coValOut',
         width: 100,
       },
@@ -561,12 +696,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'co2Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'co2ValOut',
         width: 100,
       },
@@ -577,12 +712,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'ch4Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'ch4ValOut',
         width: 100,
       },
@@ -593,12 +728,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'c2h2Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'c2h2ValOut',
         width: 100,
       },
@@ -609,12 +744,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'c2h4Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'c2h4ValOut',
         width: 100,
       },
@@ -625,12 +760,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'o2Val',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'o2ValOut',
         width: 100,
       },
@@ -641,12 +776,12 @@ export const historicalColumns: BasicColumn[] = [
     width: 100,
     children: [
       {
-        title: '闭内',
+        title: '密闭墙内',
         dataIndex: 'temperature',
         width: 100,
       },
       {
-        title: '闭外',
+        title: '密闭墙外',
         dataIndex: 'temperatureOut',
         width: 100,
       },
@@ -729,12 +864,13 @@ export const historicalFormSchema: FormSchema[] = [
     label: '起始日期',
     component: 'DatePicker',
     componentProps: {
+      showTime: true,
       //日期格式化，页面上显示的值
-      format: 'YYYY-MM-DD',
+      format: 'YYYY-MM-DD HH:mm:ss',
       //返回值格式化（绑定值的格式）
-      valueFormat: 'YYYY-MM-DD 00:00:00',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
-    defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD'),
+    defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD 00:00:00'),
     colProps: { span: 6 },
   },
   {
@@ -743,11 +879,11 @@ export const historicalFormSchema: FormSchema[] = [
     component: 'DatePicker',
     componentProps: {
       //日期格式化，页面上显示的值
-      format: 'YYYY-MM-DD',
+      format: 'YYYY-MM-DD HH:mm:ss',
       //返回值格式化（绑定值的格式）
-      valueFormat: 'YYYY-MM-DD 23:59:59',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
-    defaultValue: dayjs().format('YYYY-MM-DD'),
+    defaultValue: dayjs().format('YYYY-MM-DD 23:59:59'),
     colProps: { span: 6 },
   },
 ];

src/views/system/algorithm/algorithm.data.ts

@@ -294,7 +294,7 @@ export const schemasCoalExpression: FormSchema[] = [
   },
   {
     field: 'm1',
-    label: '密闭内外压差变化风险提示模型',
+    label: '密密闭墙内外压差变化风险提示模型',
     // labelWidth: 140,
     component: 'Divider',
   },
@@ -329,7 +329,7 @@ export const schemasCoalExpression: FormSchema[] = [
   },
   {
     field: 'm2',
-    label: '闭内煤自燃发火隐患分级预警模型',
+    label: '密闭墙内煤自燃发火隐患分级预警模型',
     // labelWidth: 140,
     component: 'Divider',
   },
@@ -367,7 +367,7 @@ export const schemasCoalExpression: FormSchema[] = [
   },
   {
     field: 'm3',
-    label: '闭外煤自燃发火隐患分级预警模型',
+    label: '密闭墙外煤自燃发火隐患分级预警模型',
     // labelWidth: 140,
     component: 'Divider',
   },