Преглед изворни кода

[Fix 0000] 解决三维通风系统子应用跳转后子应用路由监测不到的问题

hongrunxia пре 2 месеци
родитељ
комит
cafe8bb7ae

+ 16 - 3
src/components/vent/micro/createSubApp.vue

@@ -45,9 +45,22 @@
       // 这里判断
       if (newPath !== oldPath) {
         await resetComponent();
-      } else if (newQuery !== oldQuery && (Object.keys(oldQuery).length == 0 || Object.keys(newQuery).length == 0)) {
-        const actions = getActions();
-        actions.setGlobalState({ currentRouter: route });
+      } else if (newQuery !== oldQuery) {
+        let isRefresh = false;
+        if (Object.keys(oldQuery).length == 0 || Object.keys(newQuery).length == 0) {
+          isRefresh = true;
+        } else {
+          for (const key in newQuery) {
+            if (newQuery[key] !== oldQuery[key]) {
+              isRefresh = true;
+              break;
+            }
+          }
+        }
+        if (isRefresh) {
+          const actions = getActions();
+          actions.setGlobalState({ currentRouter: route });
+        }
       }
     }
   );

+ 2 - 2
src/design/themify/default.less

@@ -31,7 +31,7 @@ html {
   --vent-base-color: #09172c;
   --vent-base-border: #5cfaff;
   --vent-base-light-bg: #60f4ff;
-  --vent-base-light-bg-opcity: #60f4ff55;
+  --vent-base-light-bg-opcity: #60f4ff33;
   --vent-transparent: #ffffff00;
   --vent-font-color: #ffffff;
   --vent-font-yellow-color: #ffae00;
@@ -50,7 +50,7 @@ html {
   --vent-gas-tab-bg: #0f3656;
   --vent-gas-tab-bg-avtived: #1e7890;
   --vent-gas-tab-border: #5590d8;
-  --vent-gas-primary-text: #00c8d9;
+  --vent-gas-primary-text: #23edff;
   --vent-gas-primary-bg: #1673bf;
   --vent-gas-primary-trasparent-bg: #0091ff12;
 

+ 1 - 1
src/layouts/default/sider/bottomSideder.vue

@@ -115,7 +115,7 @@
           url.location = path['frameSrc']; //使这个窗口跳转到。
           return;
         }
-        // if (currentRoute.value.path.startsWith('/micro')) {
+        // if (currentRoute.value.path.startsWith('/micro') && currentRoute.value.path == path.path) {
         //   router.replace(path.path);
         //   // go(path.path);
         //   window.history.pushState({}, '', path.path);

+ 654 - 654
src/views/vent/bundleSpy/bundleSpyTable/index.vue

@@ -43,704 +43,704 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed, reactive, shallowRef } from 'vue';
-import {
-  columns,
-  Hjtcolumns,
-  Bdcolumns,
-  Bltcolumns,
-  Sgtcolumns,
-  Yjlcolumns,
-  Cctrkcolumns,
-  Wlmlcolumns,
-  Jinjiecolumns,
-  Hlgcolumns,
-  Ltcolumns,
-} from './bundleSpy-table.data';
-import { getbundleSpyInfoList, getAllFileList, getAllFileListById } from './bundleSpy-table.api';
-import customHeader from '/@/components/vent/customHeader.vue';
-import * as echarts from 'echarts';
-import BlastDelta from './modal/blastDelta.vue';
-import { Progress } from 'ant-design-vue';
-import { useGlobSetting } from '/@/hooks/setting';
-// import 'ant-design-vue/dist/antd.css'; // 引入样式
-let selectList = ref<any[]>([]);
+  import { ref, onMounted, computed, reactive, shallowRef } from 'vue';
+  import {
+    columns,
+    Hjtcolumns,
+    Bdcolumns,
+    Bltcolumns,
+    Sgtcolumns,
+    Yjlcolumns,
+    Cctrkcolumns,
+    Wlmlcolumns,
+    Jinjiecolumns,
+    Hlgcolumns,
+    Ltcolumns,
+  } from './bundleSpy-table.data';
+  import { getbundleSpyInfoList, getAllFileList, getAllFileListById } from './bundleSpy-table.api';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import * as echarts from 'echarts';
+  import BlastDelta from './modal/blastDelta.vue';
+  import { Progress } from 'ant-design-vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  // import 'ant-design-vue/dist/antd.css'; // 引入样式
+  let selectList = ref<any[]>([]);
 
-let formSearch = reactive({
-  pageNum: 1,
-  pageSize: 1000,
-  id: '',
-  fileName: '',
-});
-const total = ref(0);
-const { sysOrgCode } = useGlobSetting();
-const qfqCount = ref(0); // 潜伏期
-const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
-const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
-const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
-const qfqPercent = ref(0); // 潜伏期(潜伏期)
-const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
-const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
-const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
-let tableData = ref<any[]>([]);
-let selectedFileId = ref<string | null>(null);
-let modalVisible = ref(false);
-const posMonitor = shallowRef({});
-const computedColumns = computed(() => {
-  switch (sysOrgCode) {
-    case 'sdmtjtdltmkhjtj':
-      return Hjtcolumns; // 活鸡兔对应的列配置
-    case 'sdmtjtBdmk':
-      return Bdcolumns; // 保德对应的列配置
-    case 'sdmtjtbltmk':
-      return Bltcolumns; // 补连塔对应的列配置
-    case 'sdmtjtsgtmk':
-      return Sgtcolumns; // 石圪台对应的列配置
-    case 'sdmtjtyjlmk':
-      return Yjlcolumns; // 榆家梁对应的列配置
-    case 'sdmtjtcctrk':
-      return Cctrkcolumns; // 寸草塔二矿对应的列配置
-    case 'sdmtjtwlmlmk':
-      return Wlmlcolumns; // 乌兰木伦对应的列配置
-    case 'sdmtjtjjmk':
-      return Jinjiecolumns; // 锦界对应的列配置
-    case 'sdmtjthlgmk':
-      return Hlgcolumns; // 哈拉沟对应的列配置
-    case 'sdmtjtltmk':
-      return Ltcolumns; // 柳塔煤矿对应的列配置
-    default:
-      return columns; // 默认情况下返回的列配置
-  }
-});
-
-//获取色谱仪报表
-async function getTableList(params: any) {
-  let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
-  const content = res.content;
-  let contentArr = JSON.parse(content);
-  // const contentNewArr = computed(() => {
-  //   return contentArr.map((item) => {
-  //     let internalFireWarnLevel = '';
-
-  //     const co = item.co_ave;
-  //     const co2 = item.co2_ave;
-  //     const c2h4 = item.c2h4_ave;
-  //     const c2h2 = item.c2h2_ave;
-  //     const coRatio = co / co2;
-
-  //     if (co >= 0 && co <= 13.75) {
-  //       internalFireWarnLevel = '潜伏期阶段';
-  //     } else if (co > 13.75 && co < 67.2 && coRatio < 0.095) {
-  //       internalFireWarnLevel = '缓慢氧化升温阶段';
-  //     } else if ((co >= 67.2 && co < 1606.3) || (coRatio >= 0.095 && coRatio < 0.322) || c2h4 < 2) {
-  //       internalFireWarnLevel = '加速氧化阶段';
-  //     } else if (co >= 1606.3 || coRatio >= 0.322 || c2h4 >= 2 || c2h2 > 0) {
-  //       internalFireWarnLevel = '剧烈氧化阶段';
-  //     }
-
-  //     return { ...item, internalFireWarnLevel };
-  //   });
-  // });
-  total.value = contentArr.length;
-  qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
-  latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
-  selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
-  combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
-  qfqPercent.value = (qfqCount.value / total.value) * 100;
-  latentPercent.value = (latentCount.value / total.value) * 100;
-  selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
-  combustionPercent.value = (combustionCount.value / total.value) * 100;
-  tableData.value = contentArr;
-  updateChart(contentArr);
-}
-async function getTableListById(params: any) {
-  let res = await getAllFileListById({ ...params });
-  const content = res.content;
-  let contentArr = JSON.parse(content);
-  total.value = contentArr.length;
-  qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
-  latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
-  selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
-  combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
-  qfqPercent.value = (qfqCount.value / total.value) * 100;
-  latentPercent.value = (latentCount.value / total.value) * 100;
-  selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
-  combustionPercent.value = (combustionCount.value / total.value) * 100;
-  tableData.value = contentArr;
-  updateChart(contentArr);
-}
-
-//跳转到爆炸三角形
-function toDetail(record: any) {
-  posMonitor.value = record;
-  console.log(posMonitor.value);
-  modalVisible.value = true;
-}
-//折线图
-function updateChart(data: any) {
-  const chartDom = document.getElementById('lineChart');
-  const myChart = echarts.init(chartDom);
-  const categories = data.map((item: any) => item.jcdd);
-  const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
-  const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
-  const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
-  const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
-  const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
-  const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
-  const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
-  const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
-  const c3h8AveValues = data.map((item: any) => parseFloat(item.c3h8_ave));
-  const ch4AveBqValues = data.map((item: any) => parseFloat(item.ch4_ave_bq));
-  const o2AveBqValues = data.map((item: any) => parseFloat(item.o2_ave_bq));
-
-  const getSeriesConfig = (sysOrgCode) => {
+  let formSearch = reactive({
+    pageNum: 1,
+    pageSize: 1000,
+    id: '',
+    fileName: '',
+  });
+  const total = ref(0);
+  const { sysOrgCode } = useGlobSetting();
+  const qfqCount = ref(0); // 潜伏期
+  const latentCount = ref(0); // 缓慢氧化阶段(潜伏期)
+  const selfHeatingCount = ref(0); // 加速氧化阶段(自热期)
+  const combustionCount = ref(0); // 剧烈氧化阶段(燃烧期)
+  const qfqPercent = ref(0); // 潜伏期(潜伏期)
+  const latentPercent = ref(0); // 缓慢氧化阶段(潜伏期)
+  const selfHeatingPercent = ref(0); // 加速氧化阶段(自热期)
+  const combustionPercent = ref(0); // 剧烈氧化阶段(燃烧期)
+  let tableData = ref<any[]>([]);
+  let selectedFileId = ref<string | null>(null);
+  let modalVisible = ref(false);
+  const posMonitor = shallowRef({});
+  const computedColumns = computed(() => {
     switch (sysOrgCode) {
       case 'sdmtjtdltmkhjtj':
-        return [
-          {
-            name: 'CH₄闭内',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'O₂闭内',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO₂闭内',
-            data: co2AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO闭内',
-            data: coAveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CH₄闭前',
-            data: ch4AveBqValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'O₂闭前',
-            data: o2AveBqValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-        ];
+        return Hjtcolumns; // 活鸡兔对应的列配置
       case 'sdmtjtBdmk':
-        return [
-          {
-            name: 'O₂',
-            data: o2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-          {
-            name: 'N₂',
-            data: n2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-
-          {
-            name: 'CO',
-            data: coAveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO₂',
-            data: co2AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CH₄',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₆',
-            data: c2h6AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C3H8',
-            data: c3h8AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₄',
-            data: c2h4AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-          {
-            name: 'C₂H₂',
-            data: c2h2AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-        ];
+        return Bdcolumns; // 保德对应的列配置
+      case 'sdmtjtbltmk':
+        return Bltcolumns; // 补连塔对应的列配置
+      case 'sdmtjtsgtmk':
+        return Sgtcolumns; // 石圪台对应的列配置
       case 'sdmtjtyjlmk':
-        return [
-          {
-            name: 'O₂',
-            data: o2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-          {
-            name: 'N₂',
-            data: n2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-
-          {
-            name: 'CO',
-            data: coAveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO₂',
-            data: co2AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CH₄',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₆',
-            data: c2h6AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₄',
-            data: c2h4AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-          {
-            name: 'C₂H₂',
-            data: c2h2AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-        ];
+        return Yjlcolumns; // 榆家梁对应的列配置
       case 'sdmtjtcctrk':
-        return [
-          {
-            name: 'CH₄闭内',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'O₂闭内',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO₂闭内',
-            data: co2AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO闭内',
-            data: coAveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CH₄闭前',
-            data: ch4AveBqValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'O₂闭前',
-            data: o2AveBqValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-        ];
-      case 'sdmtjtltmk':
+        return Cctrkcolumns; // 寸草塔二矿对应的列配置
       case 'sdmtjtwlmlmk':
+        return Wlmlcolumns; // 乌兰木伦对应的列配置
+      case 'sdmtjtjjmk':
+        return Jinjiecolumns; // 锦界对应的列配置
       case 'sdmtjthlgmk':
-        return [
-          {
-            name: 'O₂',
-            data: o2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-          {
-            name: 'N₂',
-            data: n2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-
-          {
-            name: 'CO',
-            data: coAveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO₂',
-            data: co2AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CH₄',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₆',
-            data: c2h6AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₄',
-            data: c2h4AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-          {
-            name: 'C₂H₂',
-            data: c2h2AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-        ];
+        return Hlgcolumns; // 哈拉沟对应的列配置
+      case 'sdmtjtltmk':
+        return Ltcolumns; // 柳塔煤矿对应的列配置
       default:
-        return [
-          {
-            name: 'C₂H₂',
-            data: c2h2AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-          {
-            name: 'C₂H₄',
-            data: c2h4AveValues,
-            type: 'bar',
-            yAxisIndex: 1,
-          },
-          {
-            name: 'CH₄',
-            data: ch4AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO₂',
-            data: co2AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'CO',
-            data: coAveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-          {
-            name: 'O₂',
-            data: o2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-          {
-            name: 'N₂',
-            data: n2AveValues,
-            yAxisIndex: 0,
-            type: 'bar',
-          },
-          {
-            name: 'C₂H₆',
-            data: c2h6AveValues,
-            yAxisIndex: 1,
-            type: 'bar',
-          },
-        ];
+        return columns; // 默认情况下返回的列配置
     }
-  };
+  });
 
-  const seriesConfig = getSeriesConfig(sysOrgCode);
-  const option = {
-    tooltip: {
-      trigger: 'axis',
-      backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
-      textStyle: {
-        color: '#ffffff', // 设置 tooltip 字体颜色为白色
-      },
-      axisPointer: {
-        label: {
-          show: true,
-          backgroundColor: '#071c44',
+  //获取色谱仪报表
+  async function getTableList(params: any) {
+    let res = await getbundleSpyInfoList({ type: 'bundleSpy', ...params });
+    const content = res.content;
+    let contentArr = JSON.parse(content);
+    // const contentNewArr = computed(() => {
+    //   return contentArr.map((item) => {
+    //     let internalFireWarnLevel = '';
+
+    //     const co = item.co_ave;
+    //     const co2 = item.co2_ave;
+    //     const c2h4 = item.c2h4_ave;
+    //     const c2h2 = item.c2h2_ave;
+    //     const coRatio = co / co2;
+
+    //     if (co >= 0 && co <= 13.75) {
+    //       internalFireWarnLevel = '潜伏期阶段';
+    //     } else if (co > 13.75 && co < 67.2 && coRatio < 0.095) {
+    //       internalFireWarnLevel = '缓慢氧化升温阶段';
+    //     } else if ((co >= 67.2 && co < 1606.3) || (coRatio >= 0.095 && coRatio < 0.322) || c2h4 < 2) {
+    //       internalFireWarnLevel = '加速氧化阶段';
+    //     } else if (co >= 1606.3 || coRatio >= 0.322 || c2h4 >= 2 || c2h2 > 0) {
+    //       internalFireWarnLevel = '剧烈氧化阶段';
+    //     }
+
+    //     return { ...item, internalFireWarnLevel };
+    //   });
+    // });
+    total.value = contentArr.length;
+    qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
+    latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
+    selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
+    combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
+    qfqPercent.value = (qfqCount.value / total.value) * 100;
+    latentPercent.value = (latentCount.value / total.value) * 100;
+    selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
+    combustionPercent.value = (combustionCount.value / total.value) * 100;
+    tableData.value = contentArr;
+    updateChart(contentArr);
+  }
+  async function getTableListById(params: any) {
+    let res = await getAllFileListById({ ...params });
+    const content = res.content;
+    let contentArr = JSON.parse(content);
+    total.value = contentArr.length;
+    qfqCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '潜伏期阶段').length;
+    latentCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '缓慢氧化升温阶段').length;
+    selfHeatingCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '加速氧化升温阶段').length;
+    combustionCount.value = contentArr.filter((item: any) => item.internalFireWarnLevel === '剧烈氧化升温阶段').length;
+    qfqPercent.value = (qfqCount.value / total.value) * 100;
+    latentPercent.value = (latentCount.value / total.value) * 100;
+    selfHeatingPercent.value = (selfHeatingCount.value / total.value) * 100;
+    combustionPercent.value = (combustionCount.value / total.value) * 100;
+    tableData.value = contentArr;
+    updateChart(contentArr);
+  }
+
+  //跳转到爆炸三角形
+  function toDetail(record: any) {
+    posMonitor.value = record;
+    console.log(posMonitor.value);
+    modalVisible.value = true;
+  }
+  //折线图
+  function updateChart(data: any) {
+    const chartDom = document.getElementById('lineChart');
+    const myChart = echarts.init(chartDom);
+    const categories = data.map((item: any) => item.jcdd);
+    const c2h2AveValues = data.map((item: any) => parseFloat(item.c2h2_ave));
+    const c2h4AveValues = data.map((item: any) => parseFloat(item.c2h4_ave));
+    const ch4AveValues = data.map((item: any) => parseFloat(item.ch4_ave));
+    const co2AveValues = data.map((item: any) => parseFloat(item.co2_ave));
+    const coAveValues = data.map((item: any) => parseFloat(item.co_ave));
+    const o2AveValues = data.map((item: any) => parseFloat(item.o2_ave));
+    const n2AveValues = data.map((item: any) => parseFloat(item.n2_ave));
+    const c2h6AveValues = data.map((item: any) => parseFloat(item.c2h6_ave));
+    const c3h8AveValues = data.map((item: any) => parseFloat(item.c3h8_ave));
+    const ch4AveBqValues = data.map((item: any) => parseFloat(item.ch4_ave_bq));
+    const o2AveBqValues = data.map((item: any) => parseFloat(item.o2_ave_bq));
+
+    const getSeriesConfig = (sysOrgCode) => {
+      switch (sysOrgCode) {
+        case 'sdmtjtdltmkhjtj':
+          return [
+            {
+              name: 'CH₄闭内',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'O₂闭内',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO₂闭内',
+              data: co2AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO闭内',
+              data: coAveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CH₄闭前',
+              data: ch4AveBqValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'O₂闭前',
+              data: o2AveBqValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+          ];
+        case 'sdmtjtBdmk':
+          return [
+            {
+              name: 'O₂',
+              data: o2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+            {
+              name: 'N₂',
+              data: n2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+
+            {
+              name: 'CO',
+              data: coAveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO₂',
+              data: co2AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CH₄',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₆',
+              data: c2h6AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C3H8',
+              data: c3h8AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₄',
+              data: c2h4AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+            {
+              name: 'C₂H₂',
+              data: c2h2AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+          ];
+        case 'sdmtjtyjlmk':
+          return [
+            {
+              name: 'O₂',
+              data: o2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+            {
+              name: 'N₂',
+              data: n2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+
+            {
+              name: 'CO',
+              data: coAveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO₂',
+              data: co2AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CH₄',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₆',
+              data: c2h6AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₄',
+              data: c2h4AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+            {
+              name: 'C₂H₂',
+              data: c2h2AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+          ];
+        case 'sdmtjtcctrk':
+          return [
+            {
+              name: 'CH₄闭内',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'O₂闭内',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO₂闭内',
+              data: co2AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO闭内',
+              data: coAveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CH₄闭前',
+              data: ch4AveBqValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'O₂闭前',
+              data: o2AveBqValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+          ];
+        case 'sdmtjtltmk':
+        case 'sdmtjtwlmlmk':
+        case 'sdmtjthlgmk':
+          return [
+            {
+              name: 'O₂',
+              data: o2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+            {
+              name: 'N₂',
+              data: n2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+
+            {
+              name: 'CO',
+              data: coAveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO₂',
+              data: co2AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CH₄',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₆',
+              data: c2h6AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₄',
+              data: c2h4AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+            {
+              name: 'C₂H₂',
+              data: c2h2AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+          ];
+        default:
+          return [
+            {
+              name: 'C₂H₂',
+              data: c2h2AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+            {
+              name: 'C₂H₄',
+              data: c2h4AveValues,
+              type: 'bar',
+              yAxisIndex: 1,
+            },
+            {
+              name: 'CH₄',
+              data: ch4AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO₂',
+              data: co2AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'CO',
+              data: coAveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+            {
+              name: 'O₂',
+              data: o2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+            {
+              name: 'N₂',
+              data: n2AveValues,
+              yAxisIndex: 0,
+              type: 'bar',
+            },
+            {
+              name: 'C₂H₆',
+              data: c2h6AveValues,
+              yAxisIndex: 1,
+              type: 'bar',
+            },
+          ];
+      }
+    };
+
+    const seriesConfig = getSeriesConfig(sysOrgCode);
+    const option = {
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgba(28, 72, 105, 0.5)', // 设置 tooltip 背景为透明
+        textStyle: {
+          color: '#ffffff', // 设置 tooltip 字体颜色为白色
         },
-      },
-    },
-    legend: {
-      top: '5%',
-      textStyle: {
-        color: '#ffffffff',
-      },
-      width: '80%', // 设置图例的宽度
-      orient: 'horizontal', // 水平布局
-      pageIconColor: '#ffffff', // 设置翻页图标颜色
-      pageTextStyle: {
-        color: '#ffffff', // 设置翻页文字颜色
-      },
-    },
-    xAxis: {
-      type: 'category',
-      data: categories,
-      splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
-      axisLabel: {
-        interval: 0, // 显示所有标签
-        color: '#ffffff', // 设置 x 轴字体颜色
-        formatter: function (value: string) {
-          return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
+        axisPointer: {
+          label: {
+            show: true,
+            backgroundColor: '#071c44',
+          },
         },
       },
-    },
-    yAxis: [
-      {
-        type: 'value',
-        name: 'O₂/N₂',
-        max: 100,
-        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
-        axisLabel: {
-          color: '#ffffff',
+      legend: {
+        // top: '5%',
+        textStyle: {
+          color: '#ffffffff',
+        },
+        width: '80%', // 设置图例的宽度
+        orient: 'horizontal', // 水平布局
+        pageIconColor: '#ffffff', // 设置翻页图标颜色
+        pageTextStyle: {
+          color: '#ffffff', // 设置翻页文字颜色
         },
       },
-      {
-        type: 'value',
-        name: '其他气体',
-        splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+      xAxis: {
+        type: 'category',
+        data: categories,
+        splitLine: { show: true, lineStyle: { color: 'rgba(28, 72, 105, 0.5)' } },
         axisLabel: {
-          color: '#ffffff', // 设置 y 轴字体颜色
+          interval: 0, // 显示所有标签
+          color: '#ffffff', // 设置 x 轴字体颜色
+          formatter: function (value: string) {
+            return value.length > 12 ? value.slice(0, 12) + '...' : value; // 截断长标签
+          },
         },
       },
-    ],
-    dataZoom: [
-      {
-        type: 'slider', // 会创建一个滑块来选择要显示的区域
-        start: 0, // 初始选中范围的起始百分比
-        end: (5 / categories.length) * 100, // 初始选中范围的结束百分比,根据数据条数调整
-        minSpan: (5 / categories.length) * 100, // 最小选中范围,根据数据条数调整
-        maxSpan: (5 / categories.length) * 100, // 最大选中范围,根据数据条数调整
-        show: true,
-        height: 10, // 设置滑块高度
-        bottom: 1, // 设置滑块距离容器底部的距离
-        borderColor: 'transparent', // 设置边框颜色为透明
-        backgroundColor: '#F6F7FB', // 设置背景颜色
-        handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
-        handleColor: '#C2D2FF', // 设置手柄颜色
-        handleSize: 13, // 设置手柄大小
-        handleStyle: {
-          borderColor: '#C2D2FF', // 设置手柄边框颜色
+      yAxis: [
+        {
+          type: 'value',
+          name: 'O₂/N₂',
+          max: 100,
+          splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+          axisLabel: {
+            color: '#ffffff',
+          },
+        },
+        {
+          type: 'value',
+          name: '其他气体',
+          splitLine: { show: true, lineStyle: { color: 'rgba(21,80,126,.5)' } },
+          axisLabel: {
+            color: '#ffffff', // 设置 y 轴字体颜色
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: 'slider', // 会创建一个滑块来选择要显示的区域
+          start: 0, // 初始选中范围的起始百分比
+          end: (5 / categories.length) * 100, // 初始选中范围的结束百分比,根据数据条数调整
+          minSpan: (5 / categories.length) * 100, // 最小选中范围,根据数据条数调整
+          maxSpan: (5 / categories.length) * 100, // 最大选中范围,根据数据条数调整
+          show: true,
+          height: 10, // 设置滑块高度
+          bottom: 1, // 设置滑块距离容器底部的距离
+          borderColor: 'transparent', // 设置边框颜色为透明
+          backgroundColor: '#F6F7FB', // 设置背景颜色
+          handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z', // 设置手柄图标为圆形
+          handleColor: '#C2D2FF', // 设置手柄颜色
+          handleSize: 13, // 设置手柄大小
+          handleStyle: {
+            borderColor: '#C2D2FF', // 设置手柄边框颜色
+          },
+          fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
         },
-        fillerColor: '#C2D2FF', // 设置选中范围的填充颜色
+      ],
+      grid: {
+        top: '21%', // 设置 grid 距离顶部的距离,增加间隔
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
       },
-    ],
-    grid: {
-      top: '21%', // 设置 grid 距离顶部的距离,增加间隔
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    series: seriesConfig,
-  };
-  myChart.setOption(option);
-}
-//获取所有文件列表
-async function getAllFile() {
-  let res = await getAllFileList({ type: 'bundleSpy' });
-  selectList.value = res.records.map((item: any) => ({
-    id: item.id,
-    fileName: item.fileName,
-  }));
-  if (selectList.value.length > 0) {
-    formSearch.id = selectList.value[0].id;
-    getSearch();
+      series: seriesConfig,
+    };
+    myChart.setOption(option);
   }
-}
-// 处理文件点击事件
-function handleFileClick(item: any) {
-  formSearch.id = item.id;
-  formSearch.fileName = item.fileName;
-  selectedFileId.value = item.id;
-  getSearch();
-}
-//查询
-function getSearch() {
-  // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
-  const params = {
-    id: formSearch.id,
-    // fileName: selectedFile ? selectedFile.fileName : '',
-  };
-  getTableListById(params);
-}
-onMounted(() => {
-  getTableList({ type: 'bundleSpy' });
-  getAllFile().then(() => {
+  //获取所有文件列表
+  async function getAllFile() {
+    let res = await getAllFileList({ type: 'bundleSpy' });
+    selectList.value = res.records.map((item: any) => ({
+      id: item.id,
+      fileName: item.fileName,
+    }));
     if (selectList.value.length > 0) {
       formSearch.id = selectList.value[0].id;
-      selectedFileId.value = selectList.value[0].id;
       getSearch();
     }
+  }
+  // 处理文件点击事件
+  function handleFileClick(item: any) {
+    formSearch.id = item.id;
+    formSearch.fileName = item.fileName;
+    selectedFileId.value = item.id;
+    getSearch();
+  }
+  //查询
+  function getSearch() {
+    // const selectedFile = selectList.value.find((item) => item.id === formSearch.id);
+    const params = {
+      id: formSearch.id,
+      // fileName: selectedFile ? selectedFile.fileName : '',
+    };
+    getTableListById(params);
+  }
+  onMounted(() => {
+    getTableList({ type: 'bundleSpy' });
+    getAllFile().then(() => {
+      if (selectList.value.length > 0) {
+        formSearch.id = selectList.value[0].id;
+        selectedFileId.value = selectList.value[0].id;
+        getSearch();
+      }
+    });
   });
-});
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.content-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  padding-top: 54px;
-}
+  .content-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    padding-top: 54px;
+  }
 
-.file-list {
-  width: 20%;
-  padding: 10px;
-  margin-right: 10px;
-  margin-bottom: 50px;
-  border: 1px solid #99e8ff66;
-  background: #27546e1a;
-  box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-  -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
-  -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
-}
+  .file-list {
+    width: 20%;
+    padding: 10px;
+    margin-right: 10px;
+    margin-bottom: 50px;
+    border: 1px solid #99e8ff66;
+    background: #27546e1a;
+    box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+    -moz-box-shadow: 0px 0px 20px 7px rgba(145, 233, 254, 0.7) inset;
+    -webkit-box-shadow: 0px 0px 50px 1px rgb(149 235 255 / 5%) inset;
+  }
 
-.file-list ul {
-  list-style: none;
-  padding: 0;
-}
+  .file-list ul {
+    list-style: none;
+    padding: 0;
+  }
 
-.file-list li {
-  color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
+  .file-list li {
+    color: #fff;
+    padding: 5px;
+    cursor: pointer;
+  }
 
-.file-list li:hover,
-.file-list li.selected {
-  background: #1c4869;
-}
+  .file-list li:hover,
+  .file-list li.selected {
+    background: #1c4869;
+  }
 
-.table-container {
-  margin-top: 10px;
-  width: 80%;
-  box-sizing: border-box;
-}
+  .table-container {
+    margin-top: 10px;
+    width: 80%;
+    box-sizing: border-box;
+  }
 
-.dustMonitor {
-  width: 100%;
-  height: 100%;
-  padding: 10px 10px 15px 10px;
-  box-sizing: border-box;
-  position: relative;
-}
+  .dustMonitor {
+    width: 100%;
+    height: 100%;
+    padding: 10px 10px 15px 10px;
+    box-sizing: border-box;
+    position: relative;
+  }
 
-:deep(.zxm-table-thead > tr > th:last-child) {
-  border-right: 1px solid #91e9fe !important;
-}
+  :deep(.zxm-table-thead > tr > th:last-child) {
+    border-right: 1px solid #91e9fe !important;
+  }
 
-:deep(.zxm-picker-input > input) {
-  color: #fff;
-}
+  :deep(.zxm-picker-input > input) {
+    color: #fff;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  border: 1px solid var(--vent-form-item-border) !important;
-  background-color: #ffffff00 !important;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    border: 1px solid var(--vent-form-item-border) !important;
+    background-color: #ffffff00 !important;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
-.data-container {
-  margin-top: 40px;
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
+  .data-container {
+    margin-top: 40px;
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
 
-.line-chart {
-  flex: 3; /* 占据 3/4 的空间 */
-  width: 100%;
-  height: 400px;
-}
-.data-content {
-  flex: 1; /* 占据 1/4 的空间 */
-  height: 400px;
-  display: flex;
-  flex-direction: column; /* 垂直排列进度条 */
-  // align-items: center; /* 水平居中 */
-  margin: 10px;
-  .title {
-    font-size: 18px;
-    font-weight: 600;
+  .line-chart {
+    flex: 3; /* 占据 3/4 的空间 */
+    width: 100%;
+    height: 400px;
+  }
+  .data-content {
+    flex: 1; /* 占据 1/4 的空间 */
+    height: 400px;
+    display: flex;
+    flex-direction: column; /* 垂直排列进度条 */
+    // align-items: center; /* 水平居中 */
+    margin: 10px;
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #fff;
+      margin-bottom: 20px;
+    }
+    .explain {
+      color: var(--vent-table-action-link);
+      margin-top: 18px;
+    }
+  }
+  .progress {
+    width: 100%;
+    height: 20px;
+    margin-top: 10px;
+  }
+  .progress-label {
+    margin-top: 20px;
+    text-align: left;
+    margin-bottom: 5px;
     color: #fff;
-    margin-bottom: 20px;
   }
-  .explain {
-    color: var(--vent-table-action-link);
-    margin-top: 18px;
+  ::deep .progress-text {
+    color: #fff !important; /* 自定义百分比文字颜色 */
+  }
+  .blast-delta-container {
+    margin: 50px;
+  }
+  .yellow-progress .ant-progress-bg {
+    background-color: yellow !important;
   }
-}
-.progress {
-  width: 100%;
-  height: 20px;
-  margin-top: 10px;
-}
-.progress-label {
-  margin-top: 20px;
-  text-align: left;
-  margin-bottom: 5px;
-  color: #fff;
-}
-::deep .progress-text {
-  color: #fff !important; /* 自定义百分比文字颜色 */
-}
-.blast-delta-container {
-  margin: 50px;
-}
-.yellow-progress .ant-progress-bg {
-  background-color: yellow !important;
-}
 
-:deep(.zxm-table-thead > tr > th:last-child) {
-  border-right: 1px solid #91e9fe !important;
-}
+  :deep(.zxm-table-thead > tr > th:last-child) {
+    border-right: 1px solid #91e9fe !important;
+  }
 </style>

+ 20 - 11
src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -81,7 +81,8 @@
         // show: get(baseSeries, '[0].data.length', 1) > e.maxAxisLength,
         xAxisIndex: i,
         end: e.end,
-        height: 20,
+        height: 15,
+        bottom: 15,
       };
     });
 
@@ -387,11 +388,12 @@
             label: {
               show: true,
               position: 'outside',
-              color: '#ddd',
-              formatter: get(legend, 'formatter', '{b}\n{c}'),
+              color: '#00c8d9',
+              fontSize: 14,
+              formatter: get(legend, 'formatter', '{b}\n {c}'),
               rich: {
                 primarytext: {
-                  color: '#00c8d9',
+                  color: '#fff',
                 },
               },
             },
@@ -510,7 +512,7 @@
         textStyle,
         grid: {
           top: 50,
-          bottom: dataZoom.length ? 80 : 30,
+          bottom: dataZoom.length ? 70 : 30,
           left: 75, // 缩小左侧边距,增加图表宽度
           right: 50, // 缩小右侧边距
           ...grid,
@@ -530,7 +532,8 @@
             dataZoom: baseDataZoom,
             type: 'category',
             axisLabel: {
-              color: textStyle.color,
+              // color: textStyle.color,
+              color: '#ccfbff',
               interval: 0,
               width: baseDataZoom.length ? 100 : 800 / get(baseSeries, '[0].data.length', 1),
               overflow: 'break',
@@ -547,7 +550,8 @@
               },
             },
             axisLabel: {
-              color: textStyle.color,
+              // color: textStyle.color,
+              color: '#ffffffcc',
             },
           };
         }),
@@ -618,7 +622,8 @@
             ...e,
             type: 'category',
             axisLabel: {
-              color: textStyle.color,
+              // color: textStyle.color,
+              color: '#ccfbff',
               width: 100,
               overflow: 'break',
             },
@@ -631,9 +636,9 @@
               lineStyle: {
                 opacity: i === 0 ? 0.1 : 0,
               },
-              axisLabel: {
-                color: textStyle.color,
-              },
+            },
+            axisLabel: {
+              color: '#ffffffcc',
             },
           };
         }),
@@ -641,6 +646,10 @@
           return {
             ...serie,
             type: 'line',
+            smooth: true,
+            itemStyle: {
+              opacity: 0,
+            },
           };
         }),
       };

+ 91 - 24
src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -3,13 +3,13 @@
   <div class="mini-board" :class="`mini-board_${type} mini-board_${type}_${getValueDecoClass(value)}`">
     <template v-if="layout === 'val-top'">
       <slot name="value">
-        <div class="mini-board__value" :class="`mini-board__value_${type}`">
-          {{ value }}
+        <div class="mini-board__label" :class="`mini-board__label_${type}`">
+          {{ label }}
         </div>
       </slot>
       <slot name="label">
-        <div class="mini-board__label" :class="`mini-board__label_${type}`">
-          {{ label }}
+        <div class="mini-board__value" :class="`mini-board__value_${type}`">
+          {{ value }}
         </div>
       </slot>
     </template>
@@ -234,10 +234,11 @@
     --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
     --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
     --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-    height: 50px;
+    height: 45px;
     line-height: 25px;
-    width: 130px;
+    width: 120px;
     padding: 0 5px 0 5px;
+    padding-top: 2px;
     text-align: center;
     background-size: 100% 100%;
     position: relative;
@@ -313,8 +314,28 @@
   .mini-board_A {
     width: 120px;
     height: 60px;
-    background-image: var(--image-area3);
+    // background-image: var(--image-area3);
+    // backdrop-filter: blur(10px);
     background-size: 100% 100%;
+    /* ========== 新增精致样式 ========== */
+    /* 半透明底色(高级感) */
+    background-color: rgba(0, 106, 148, 0.15);
+
+    /* 超细圆角 + 超细边框(精致核心) */
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-top: 2px solid #4dc0c9;
+
+    /* 柔和阴影(不突兀、很精致) */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    /* 文字颜色(适配深色/浅色背景) */
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+
+    /* 微动效(鼠标悬浮更精致) */
+    transition: all 0.25s ease;
   }
 
   .mini-board_Q {
@@ -328,12 +349,38 @@
   }
 
   .mini-board_B {
-    width: 131px;
-    height: 64px;
-    background-image: var(--image-value-bg);
-    background-size: auto 40px;
-    background-position: center bottom;
-    background-repeat: no-repeat;
+    // width: 131px;
+    height: 58px;
+    // background-image: var(--image-value-bg);
+    // background-size: auto 40px;
+    // background-position: center bottom;
+    // background-repeat: no-repeat;
+    padding-top: 10px;
+    margin: 0 5px;
+    background-size: 100% 100%;
+    /* ========== 新增精致样式 ========== */
+    /* 半透明底色(高级感) */
+    background-color: rgba(0, 106, 148, 0.15);
+
+    /* 超细圆角 + 超细边框(精致核心) */
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-top: 2px solid #4dc0c9aa;
+
+    /* 柔和阴影(不突兀、很精致) */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    /* 文字颜色(适配深色/浅色背景) */
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+
+    /* 微动效(鼠标悬浮更精致) */
+    transition: all 0.25s ease;
+
+    // box-shadow:
+    //   0 4px 12px rgba(0, 0, 0, 0.1),
+    //   inset 0 0 8px rgba(255, 255, 255, 0.1);
   }
 
   .mini-board_R {
@@ -396,9 +443,28 @@
   .mini-board_D {
     // width: 105px;
     height: 58px;
-    background-image: var(--image-mini-board-1);
-    background-position: center bottom;
-    background-repeat: no-repeat;
+    padding-top: 8px;
+    // background-image: var(--image-mini-board-1);
+    // background-position: center bottom;
+    // background-repeat: no-repeat;
+    /* 半透明底色(高级感) */
+    background-color: rgba(0, 106, 148, 0.15);
+
+    /* 超细圆角 + 超细边框(精致核心) */
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-top: 2px solid #4dc0c9;
+
+    /* 柔和阴影(不突兀、很精致) */
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+    /* 文字颜色(适配深色/浅色背景) */
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+
+    /* 微动效(鼠标悬浮更精致) */
+    transition: all 0.25s ease;
   }
 
   .mini-board_E {
@@ -654,15 +720,15 @@
 
   .mini-board__value_B {
     color: @vent-gas-primary-text;
-    font-size: 20px;
+    font-size: 18px;
     font-weight: bold;
-    height: 40px;
-    line-height: 40px;
+    height: 30px;
+    line-height: 30px;
   }
 
   .mini-board__label_B {
-    line-height: 24px;
-    height: 24px;
+    line-height: 14px;
+    height: 14px;
   }
 
   .mini-board__value_C {
@@ -674,15 +740,16 @@
   }
 
   .mini-board__value_D {
-    font-size: 20px;
+    font-size: 18px;
     font-weight: bold;
     height: 40px;
     line-height: 40px;
+    color: @vent-gas-primary-text;
   }
 
   .mini-board__label_D {
-    line-height: 17px;
-    height: 17px;
+    line-height: 14px;
+    height: 14px;
   }
 
   .mini-board__value_E {

+ 75 - 78
src/views/vent/home/configurable/components/header.vue

@@ -1,11 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- Header部分 -->
-  <div
-    v-if="headerConfig.show"
-    class="w-100% flex costume-header"
-    :class="headerConfig.selector.toggleIcon ? 'costume-headerToggleIcon' : 'costume-header'"
-  >
+  <div v-if="headerConfig.show" class="flex costume-header" :class="headerConfig.selector.toggleIcon ? 'costume-headerToggleIcon' : 'costume-header'">
     <!-- 选择下拉框,自动填充剩余空间,这种实现是因为 Select 不支持 suffix -->
     <Dropdown
       v-if="headerConfig.selector.show"
@@ -24,11 +20,11 @@
         />
         <SwapOutlined v-else class="w-30px" />
 
-        <div class="w-100px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
+        <div class="w-80px flex-grow-1 overflow-hidden whitespace-nowrap text-ellipsis">
           {{ selectedDeviceLabel }}
         </div>
-        <CaretUpOutlined class="w-30px" v-if="visible" />
-        <CaretDownOutlined class="w-30px" v-else />
+        <CaretUpOutlined class="w-20px" v-if="visible" />
+        <CaretDownOutlined class="w-20px" v-else />
       </div>
       <template #overlay>
         <Menu :selected-keys="[selectedDeviceID]" @click="selectHandler">
@@ -40,7 +36,7 @@
     </Dropdown>
     <template v-if="headerConfig.slot.show">
       <div class="flex-basis-50% flex flex-items-center flex-grow-1 costume-header_right">
-        <SwapOutlined class="w-30px" />
+        <SwapOutlined class="w-20px" />
         <div class="flex-grow-1">
           {{ selectedDeviceSlot }}
         </div>
@@ -49,81 +45,82 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { nextTick, ref, watch } from 'vue';
-import { Config } from '../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../hooks/useInit';
-import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-const props = defineProps<{
-  moduleData: Config['moduleData'];
-  deviceType: Config['deviceType'];
-  data: any;
-}>();
+  import { nextTick, ref, watch } from 'vue';
+  import { Config } from '../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../hooks/useInit';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  const props = defineProps<{
+    moduleData: Config['moduleData'];
+    deviceType: Config['deviceType'];
+    data: any;
+  }>();
 
-const emit = defineEmits(['select']);
+  const emit = defineEmits(['select']);
 
-const visible = ref(false);
-const headerConfig = props.moduleData.header;
-const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-  props.deviceType,
-  props.moduleData
-);
+  const visible = ref(false);
+  const headerConfig = props.moduleData.header;
+  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+    props.deviceType,
+    props.moduleData
+  );
 
-function selectHandler({ key }) {
-  selectedDeviceID.value = key;
-  emit('select', selectedDevice.value);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
+  function selectHandler({ key }) {
+    selectedDeviceID.value = key;
     emit('select', selectedDevice.value);
-  },
-  {
-    immediate: true,
   }
-);
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      emit('select', selectedDevice.value);
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 <style scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.costume-header {
-  height: 30px;
-  background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
-}
-.costume-headerToggleIcon {
-  height: 30px;
-  background: url('@/assets/images/home-container/configurable/electroChamper/2-1.png');
-  background-size: 100% 100%;
-}
-.costume-header_left {
-  border-left: 3px solid;
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-.costume-header_right {
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-img {
-  width: 16px;
-  height: 16px;
-  margin-left: 8px;
-}
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-  /* background-color: transparent; */
-  color: #fff;
-}
-::v-deep .zxm-select-arrow {
-  color: #fff;
-}
-::v-deep .zxm-select-selection-item {
-  color: #fff !important;
-}
-::v-deep .zxm-select-selection-placeholder {
-  color: #fff !important;
-}
+  .costume-header {
+    margin: 0 10px;
+    height: 30px;
+    background-image: linear-gradient(90deg, var(--vent-base-light-bg-opcity), transparent 20%, transparent 80%, var(--vent-base-light-bg-opcity));
+  }
+  .costume-headerToggleIcon {
+    height: 30px;
+    background: url('@/assets/images/home-container/configurable/electroChamper/2-1.png');
+    background-size: 100% 100%;
+  }
+  .costume-header_left {
+    border-left: 3px solid;
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
+  }
+  .costume-header_right {
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
+  }
+  img {
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+  }
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    /* background-color: transparent; */
+    color: #fff;
+  }
+  ::v-deep .zxm-select-arrow {
+    color: #fff;
+  }
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+  }
 </style>

+ 4 - 2
src/views/vent/home/configurable/vent182.vue

@@ -341,9 +341,11 @@
     .module-monitor-bar {
       position: absolute;
       top: 90px;
-      width: 1080px;
+      width: 1000px;
       height: 74px;
-      left: calc(50% - 540px);
+      display: flex;
+      justify-content: center;
+      left: calc(50% - 500px);
     }
   }
   :deep(.loading-box) {

+ 2 - 2
src/views/vent/monitorManager/deviceMonitor/components/device/index.vue

@@ -65,8 +65,8 @@
       <div :style="`padding: 5px; height: ${scroll.y + 100}px`">
         <div class="to-small">
           <div class="to-home" @click="toHome()"></div>
-          <div class="to-3D" @click="toHome('3D')"></div>
-          <div v-if="hasPermission('show:modalChange')" class="to-2D" @click="toHome('2D')"></div>
+          <!-- <div class="to-3D" @click="toHome('3D')"></div>
+          <div v-if="hasPermission('show:modalChange')" class="to-2D" @click="toHome('2D')"></div> -->
           <FullscreenOutlined v-if="!tableShow" class="table-show-icon" @click="toHide" />
         </div>
         <div class="device-button-group" v-if="deviceList.length > 0">

+ 4 - 1
src/views/vent/monitorManager/fanLocalVideo/index.vue

@@ -1,3 +1,6 @@
+<template>
+  <div></div>
+</template>
 <!-- <!-- <template>
   <div class="screen-container">
     <div class="top-section">
@@ -997,4 +1000,4 @@ onUnmounted(() => {
 .alarm-item.new {
   animation: newAlarmFlash 1.8s forwards;
 }
-</style> -->
+</style> -->

+ 4 - 0
src/views/vent/monitorManager/mainLocalWind/index.vue

@@ -1,3 +1,7 @@
+<template>
+  <div></div>
+</template>
+
 <!-- <template>
   <div class="screen-container">
     <div class="top-section">

+ 8 - 8
src/views/vent/monitorManager/mainLocalWind/mainLocalWind.data.ts

@@ -1,11 +1,11 @@
-import { getAssetURL } from "/@/utils/ui"
+import { getAssetURL } from '/@/utils/ui';
 
 // 主风机设备
 export const deviceList = [
   { id: 1, name: '一号主通风机' },
   { id: 2, name: '二号主通风机' },
-  { id: 3, name: '配电室总柜' }
-]
+  { id: 3, name: '配电室总柜' },
+];
 
 // ======================
 // 人员检测记录(无姓名、无区队)
@@ -14,7 +14,7 @@ export const personDetectList = [
   { deviceName: '一号主风机', location: '风机主体', detectTime: '2026-04-02 08:45:20', result: '检测到人员', status: '正常' },
   { deviceName: '配电室', location: '设备操作区', detectTime: '2026-04-02 10:18:10', result: '检测到人员', status: '正常' },
   { deviceName: '二号主风机', location: '风机主体', detectTime: '2026-04-02 14:05:00', result: '检测到人员', status: '异常' },
-]
+];
 
 // ======================
 // 抓拍图片
@@ -32,12 +32,12 @@ export const currentImgList = [
   { id: 1, deviceName: '一号主风机', location: '风机主体', event: '人员检测', time: '08:45', imgUrl: getAssetURL('wind-video/f1.png') },
   { id: 1, deviceName: '一号主风机', location: '风机主体', event: '人员检测', time: '09:11', imgUrl: getAssetURL('wind-video/f2.png') },
   { id: 1, deviceName: '一号主风机', location: '风机主体', event: '人员检测', time: '11:45', imgUrl: getAssetURL('wind-video/f3.png') },
-]
+];
 
 // ======================
 // 预警
 // ======================
 export const warnRecordList = [
-    { deviceName: '一号主风机', location: '风机主体', warnType: '设备断网', warnTime: '2026-04-02 09:30:00', handleStatus: '已处理' },
-    { deviceName: '配电室', location: '配电柜', warnType: '设备断网', warnTime: '2026-04-02 11:20:00', handleStatus: '处理中' },
-]
+  { deviceName: '一号主风机', location: '风机主体', warnType: '设备断网', warnTime: '2026-04-02 09:30:00', handleStatus: '已处理' },
+  { deviceName: '配电室', location: '配电柜', warnType: '设备断网', warnTime: '2026-04-02 11:20:00', handleStatus: '处理中' },
+];

+ 4 - 1
src/views/vent/monitorManager/windDoorVideo/index.vue

@@ -1,4 +1,7 @@
- <!-- <template>
+<template>
+  <div></div>
+</template>
+<!-- <template>
   <div class="screen-container">
     <div class="top-section">
       <div class="system-title">风门视频图像综合解析系统</div>