Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/deviceManager/configurationTable/index.vue

@@ -149,7 +149,6 @@
   async function handleUpdate() {
     isUpdate.value = true;
     try {
-      console.log('debug ', configJSON.value);
       saveOrUpdateHandler({
         ...formData,
         moduleData: JSON.parse(configJSON.value),

src/views/vent/deviceManager/configurationTable/types.ts

@@ -62,6 +62,8 @@ export interface ModuleData {
     direction: 'column' | 'row';
     /** 分区大小，该数组的数量应该和 layout 数量一致 */
     basis: string[];
+    /** 是否允许溢出自滚动 */
+    ignoreOverflow?: boolean;
   };
   preset: ModuleDataPreset[];
   board: ModuleDataBoard[];
@@ -166,31 +168,45 @@ export interface ModuleDataGalleryList {
 export interface ModuleDataChart {
   /** 图表类型，一个类型对应一种图表预设 */
   type: 'pie' | 'bar' | 'line' | 'line_area' | 'line_bar' | 'line_smooth' | 'line_smooth_complex';
-  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。特别的是，pie 类型的图表应将路径指到对象上，其他的图表应该指到数组上 */
+  /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径。应该指到数组上 */
   readFrom: string;
   /** 排序依据，该项应配置将配合 readFrom 使用 */
   sortBy?: string;
   /** 排序规则，desc降序，asc升序 */
   order?: 'desc' | 'asc';
-  /** 图表x轴配置（若有），支持多个 */
+  /** 图表x轴配置（若有），支持多个，注意至少一个 */
   xAxis: {
-    /** x轴内容，formatter 格式 */
-    label: string;
+    show: boolean;
   }[];
-  /** 图表y轴配置（若有），支持多个 */
+  /** 图表y轴配置（若有），支持多个，注意至少一个 */
   yAxis: {
-    /** y轴内容，formatter 格式 */
-    label: string;
+    show: boolean;
+    /** y轴内容，不支持 formatter 格式 */
+    name: string;
     /** y轴的对齐方式 */
-    align: 'left' | 'right';
+    position: 'left' | 'right';
   }[];
-  /** 核心配置，一个系列应对应一个数据维度，例如：[{ label: '风量', prop: '${f1Val}' }] */
+  /**
+   * 核心配置
+   *
+   * 例如有数据：arr1: [{ name: 'A', data: [{ pos: '1', val: 1 }] }, { name: 'B', data: [{ pos: '1', val: 1 }] }]
+   * 首先假设 readFrom: 'arr1'，那么 series 将根据 arr1 数据生成
+   * 则配置一个标准折线图所需的 series 配置类似：[{ label: '${name}', readFrom: 'data', xprop: 'pos', yprop: 'val' }]
+   */
   series: {
-    /** 数据说明， formatter 格式 */
+    /** 该系列的数据说明， formatter 格式，将用于 legend 相关的内容 */
     label: string;
-    /** 取值 prop，注意该项不支持 formatter 格式 */
-    prop: string;
+    /** 设置 series 系列时的基础路径，配合上级 readFrom 使用，其应指向一个数组，该数组将作为映射系列时的基准 */
+    readFrom: string;
+    /** 取值 prop，注意该项不支持 formatter 格式，将用于 xAxis 相关的内容 */
+    xprop: string;
+    /** 取值 prop，注意该项不支持 formatter 格式，将用于 yAxis 相关的内容 */
+    yprop: string;
   }[];
+  /** 图表legend配置 */
+  legend: {
+    show: boolean;
+  };
 }
 
 export interface ModuleDataTable {
@@ -216,7 +232,7 @@ export interface ModuleDataPreset {
 
 export interface ModuleDataComplexList {
   /** 列表预设的背景类型 */
-  type: 'A' | 'B';
+  type: 'A' | 'B' | 'C';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */

src/views/vent/home/billboard/billboard.data.ts

@@ -5,6 +5,11 @@ import FireIcon from '/@/assets/images/vent/fire-icon-2.png';
 import VentIcon from '/@/assets/images/vent/vent-icon-2.png';
 import SafetyIcon from '/@/assets/images/vent/safety-icon-2.png';
 import DustIcon from '/@/assets/images/vent/dust-icon-2.png';
+import NetworkIcon from '/@/assets/images/vent/dust-risk-icon-1.png';
+import DeviceIcon from '/@/assets/images/vent/dust-risk-icon-2.png';
+import LevelChartIcon from '/@/assets/images/vent/dust-risk-icon-3.png';
+import PointIcon from '/@/assets/images/vent/dust-risk-icon-4.png';
+import AlertIcon from '/@/assets/images/vent/dust-risk-icon-5.png';
 
 // export type Translation = Record<string | number, string>;
 // export interface TitleConfig {
@@ -450,6 +455,14 @@ export const WARNING_CONFIG = [
   { src: FireIcon, text: '火灾', prop1: 'fireSWarnInfo.totalNum', prop2: 'fireSWarnInfo.maxWarnLevel', id: 'warning_cfg_002' },
 ];
 
+// 粉尘预警相关的内容配置项
+export const DUST_RISK_CONFIG = [
+  { src: LevelChartIcon, text: '风险等级', prop: 'fxdj', id: 'dust_risk_cfg_005' },
+  { src: PointIcon, text: '测点数', prop: 'cds', id: 'dust_risk_cfg_004' },
+  { src: NetworkIcon, text: '在线测点数', prop: 'zxcds', id: 'dust_risk_cfg_003' },
+  { src: AlertIcon, text: '测点报警数', prop: 'cdbjs', id: 'dust_risk_cfg_001' },
+  { src: DeviceIcon, text: '降尘设备数', prop: 'jcsbs', id: 'dust_risk_cfg_002' },
+];
 export const DEFAULT_TEST_DATA = {
   dustInfo: {
     // 矿井粉尘风险信息
@@ -625,9 +638,187 @@ export const DEFAULT_TEST_DATA = {
     gasSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //瓦斯
     fireSWarnInfo: { totalNum: '2', maxWarnLevel: '安全的' }, //火灾
   },
+  dustRisk: {
+    fxdj: '4',
+    cds: 3,
+    zxcds: 2,
+    cdbjs: 1,
+    jcsbs: 0,
+  },
   orgname: '/',
   orgcode: '/',
   ip: 'localhost',
 };
 
 export type BillboardType = typeof DEFAULT_TEST_DATA;
+
+export const mockSHENDONG = [
+  {
+    code: 'sdmtjtltmk',
+    orgname: '柳塔矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 70,
+      zxcds: 70,
+      cdbjs: 1,
+      jcsbs: 55,
+    },
+  },
+  {
+    code: 'sdmtjtcctrk',
+    orgname: '寸草塔二矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 76,
+      zxcds: 70,
+      cdbjs: 5,
+      jcsbs: 54,
+    },
+  },
+  {
+    code: 'sdmtjtbetmk',
+    orgname: '布尔台矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 55,
+      zxcds: 50,
+      cdbjs: 0,
+      jcsbs: 32,
+    },
+  },
+  {
+    code: 'sdmtjtwlmlmk',
+    orgname: '乌兰木伦矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 32,
+      zxcds: 26,
+      cdbjs: 2,
+      jcsbs: 15,
+    },
+  },
+  {
+    code: 'sdmtjtcctmk',
+    orgname: '寸草塔矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 55,
+      zxcds: 40,
+      cdbjs: 12,
+      jcsbs: 33,
+    },
+  },
+  {
+    code: 'sdmtjtsgtmk',
+    orgname: '石圪台矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 67,
+      zxcds: 20,
+      cdbjs: 0,
+      jcsbs: 22,
+    },
+  },
+  {
+    code: 'sdmtjtbltmk',
+    orgname: '补连塔矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 46,
+      zxcds: 32,
+      cdbjs: 2,
+      jcsbs: 56,
+    },
+  },
+  {
+    code: 'sdmtjthlgmk',
+    orgname: '哈拉沟矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 53,
+      zxcds: 14,
+      cdbjs: 14,
+      jcsbs: 25,
+    },
+  },
+  {
+    code: 'sdmtjtswmk',
+    orgname: '上湾矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 32,
+      zxcds: 21,
+      cdbjs: 1,
+      jcsbs: 0,
+    },
+  },
+  {
+    code: 'sdmtjtdltmkhjtj',
+    orgname: '活鸡兔井',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 53,
+      zxcds: 22,
+      cdbjs: 12,
+      jcsbs: 0,
+    },
+  },
+  {
+    code: 'sdmtjtdltmk',
+    orgname: '大柳塔井',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 15,
+      zxcds: 15,
+      cdbjs: 0,
+      jcsbs: 20,
+    },
+  },
+  {
+    code: 'sdmtjtjjmk',
+    orgname: '锦界矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 78,
+      zxcds: 0,
+      cdbjs: 0,
+      jcsbs: 23,
+    },
+  },
+  {
+    code: 'sdmtjtyjlmk',
+    orgname: '榆家梁矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 31,
+      zxcds: 2,
+      cdbjs: 1,
+      jcsbs: 46,
+    },
+  },
+  {
+    code: 'sdmtjtbdmk',
+    orgname: '保德矿',
+    ip: '',
+    dustRisk: {
+      fxdj: '低',
+      cds: 53,
+      zxcds: 22,
+      cdbjs: 1,
+      jcsbs: 11,
+    },
+  },
+];

src/views/vent/home/billboard/components/DustRisk.vue

@@ -0,0 +1,102 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="dust-risk">
+    <div class="dust-risk-item" v-for="item in DUST_RISK_CONFIG" :key="item.id" @click="$emit('click', item)">
+      <div class="img"> <img :src="item.src" alt="" /> </div>
+      <div class="text">{{ item.text }}</div>
+      <div class="num">{{ get(dustRiskData, item.prop) }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { shallowRef, onMounted } from 'vue';
+  import { BillboardType, DEFAULT_TEST_DATA, DUST_RISK_CONFIG } from '../billboard.data';
+  import _ from 'lodash-es';
+  import { get } from '../utils';
+
+  const props = withDefaults(
+    defineProps<{
+      data?: BillboardType;
+    }>(),
+    {
+      data: () => DEFAULT_TEST_DATA,
+    }
+  );
+  defineEmits(['click']);
+
+  const dustRiskData = shallowRef<BillboardType['dustRisk']>({
+    fxdj: '低',
+    cds: 99,
+    zxcds: 99,
+    cdbjs: 0,
+    jcsbs: 99,
+  });
+
+  function fetchData() {
+    const info = props.data.dustRisk;
+    if (!info) return;
+    dustRiskData.value = info;
+  }
+
+  onMounted(() => {
+    fetchData();
+  });
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+  @font-face {
+    font-family: 'douyuFont';
+    src: url(/@/assets/images/files/douyuFont.otf);
+  }
+
+  .dust-risk {
+    height: 100%;
+    // display: flex;
+    // justify-content: space-evenly;
+    // align-items: center;
+    // flex-wrap: wrap;
+  }
+
+  .dust-risk-item {
+    display: flex;
+    align-items: center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: center;
+    height: 46px;
+    margin-top: 10px;
+    padding: 0 7px;
+
+    .text {
+      text-align: center;
+      width: 200px;
+    }
+    .num {
+      text-align: center;
+      width: 140px;
+    }
+    .img {
+      width: 27px;
+      height: 27px;
+    }
+  }
+
+  .dust-risk-item:nth-child(odd) {
+    background-image: url(/@/assets/images/company/list-item-1.png);
+  }
+  .dust-risk-item:nth-child(even) {
+    background-image: url(/@/assets/images/company/list-item-2.png);
+  }
+
+  .num {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
+  }
+  .risk {
+    font-size: 20px;
+    font-family: douyuFont;
+    color: @vent-gas-primary-text;
+  }
+</style>

src/views/vent/home/billboard/components/Warning.vue

@@ -27,12 +27,12 @@
   defineEmits(['click']);
 
   const warnData = shallowRef<BillboardType['warn']>({
-    allNum: 19,
-    synthesizeSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //安全监控
-    ventSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //通风
-    dustSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //粉尘
-    gasSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //瓦斯
-    fireSWarnInfo: { totalNum: '预警总数', maxWarnLevel: '最高预警级别' }, //火灾
+    allNum: 0,
+    synthesizeSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //安全监控
+    ventSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //通风
+    dustSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //粉尘
+    gasSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //瓦斯
+    fireSWarnInfo: { totalNum: '0', maxWarnLevel: '安全' }, //火灾
   });
 
   function fetchData() {

src/views/vent/home/billboard/dust.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="DustStatus" />
+  <Billboard billboard-type="DustStatus" title="粉尘看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/billboard/dustRiskMock.vue

@@ -0,0 +1,7 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <Billboard billboard-type="DuskRisk" title="粉尘看板" />
+</template>
+<script lang="ts" setup>
+  import Billboard from './mock.vue';
+</script>

src/views/vent/home/billboard/file.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="FileOverview" />
+  <Billboard billboard-type="FileOverview" title="文件总览看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/billboard/fire.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="FireStatus" />
+  <Billboard billboard-type="FireStatus" title="防灭火看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/billboard/gas.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="GasStatus" />
+  <Billboard billboard-type="GasStatus" title="瓦斯看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/billboard/index.vue

@@ -58,12 +58,14 @@
   import GasStatus from './components/GasStatus.vue';
   import Summary from './components/Summary.vue';
   import Warning from './components/Warning.vue';
+  import DuskRisk from './components/DustRisk.vue';
   import _ from 'lodash-es';
   import { useRouter } from 'vue-router';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const props = defineProps<{
     billboardType: string;
+    title?: string;
   }>();
 
   // const route = useRoute();
@@ -79,9 +81,10 @@
     FireStatus,
     Summary,
     Warning,
+    DuskRisk,
   };
 
-  const mainTitle = '国能神东一通三防管控平台';
+  const mainTitle = props.title || '国能神东一通三防管控平台';
 
   // 看板相关的基础配置
   const billboards = ref<(() => VNode)[]>([]);

src/views/vent/home/billboard/mock.vue

@@ -0,0 +1,209 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="company-home">
+    <a-button
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: 15px; color: #fff"
+      @click="getBack"
+    >
+      回到首页
+    </a-button>
+    <div class="top-bg">
+      <div class="main-title">{{ mainTitle }}</div>
+    </div>
+    <a-row class="company-content" :gutter="10">
+      <!-- <a-col v-for="(item, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
+        <BaseCard :title="item.orgname || '/'" @open="openHandler(item.ip)">
+          <component :is="componentMap[billboardType]" :data="item" />
+        </BaseCard>
+      </a-col> -->
+      <a-col v-for="(render, i) in shownBillboards" :key="`svvhbi-${i}`" :span="6">
+        <component :is="render" />
+      </a-col>
+    </a-row>
+    <!-- <div v-if="showBtn" style="position: absolute; top: 0; left: 0">
+      <a-button @click="billboardType = 'DustStatus'">切换粉尘看板</a-button>
+      <a-button @click="billboardType = 'FireStatus'">切换火灾看板</a-button>
+      <a-button @click="billboardType = 'FileOverview'">切换文件看板</a-button>
+      <a-button @click="billboardType = 'VentilationStatus'">切换风扇看板</a-button>
+      <a-button @click="billboardType = 'GasStatus'">切换瓦斯看板</a-button>
+    </div> -->
+    <ArrowButton point-to="left" class="company__arrow_left" @click="changeCurrentPage(-1)" />
+    <ArrowButton point-to="right" class="company__arrow_right" @click="changeCurrentPage(1)" />
+  </div>
+</template>
+<script lang="ts" setup>
+  /**
+   * 本文件夹下的内容是公司端看板页的内容：
+   *
+   * 看板有多种类型，包含了监测、跳转矿端的功能。
+   *
+   * 菜单配置相关信息：使用vent/home/billboard/gas及类似组件进行配置（即 ./gas.vue ./fire.vue 等）
+   *
+   * 支持的看板类型如下：'DustStatus'、'FireStatus'、'FileOverview'、'VentilationStatus'、'GasStatus'、'Summary'
+   *
+   */
+  import { VNode, computed, h, onMounted, ref } from 'vue';
+  import BaseCard from './components/BaseCard.vue';
+  import ArrowButton from './components/ArrowButton.vue';
+  // import { useRoute } from 'vue-router';
+  // import { getSummary } from './billboard.api';
+  import { useAutoLogin } from '../../../../hooks/vent/useAutoLogin';
+  import DustStatus from './components/DustStatus.vue';
+  import FileOverview from './components/FileOverview.vue';
+  import FireStatus from './components/FireStatus.vue';
+  import VentilationStatus from './components/VentilationStatus.vue';
+  import GasStatus from './components/GasStatus.vue';
+  import Summary from './components/Summary.vue';
+  import Warning from './components/Warning.vue';
+  import DuskRisk from './components/DustRisk.vue';
+  import _ from 'lodash-es';
+  import { useRouter } from 'vue-router';
+  import { mockSHENDONG } from './billboard.data';
+  // import mapComponent from './components/3Dmap/index.vue';
+
+  const props = defineProps<{
+    billboardType: string;
+    title?: string;
+  }>();
+
+  // const route = useRoute();
+  const { open } = useAutoLogin();
+  const router = useRouter();
+
+  // 组件Map，不同type使用不用组件
+  const componentMap = {
+    DustStatus,
+    FileOverview,
+    VentilationStatus,
+    GasStatus,
+    FireStatus,
+    Summary,
+    Warning,
+    DuskRisk,
+  };
+
+  const mainTitle = props.title || '国能神东一通三防管控平台';
+
+  // 看板相关的基础配置
+  const billboards = ref<(() => VNode)[]>([]);
+
+  function fetchBillboards() {
+    Promise.resolve(mockSHENDONG).then((r) => {
+      billboards.value = r.map((el) => {
+        return () =>
+          h(
+            BaseCard,
+            {
+              title: el.orgname || '/',
+              onOpen: () => openHandler(el.ip),
+            },
+            {
+              default: () =>
+                h(componentMap[props.billboardType], {
+                  data: JSON.parse(JSON.stringify(el)),
+                }),
+            }
+          );
+      });
+    });
+  }
+
+  // 看板分页相关的配置
+  const pageSize = 8;
+  const currentPage = ref(1);
+  const totalPage = computed(() => {
+    return Math.ceil(billboards.value.length / pageSize) + 1;
+  });
+
+  // 能真正在页面上展示的看板
+  const shownBillboards = computed(() => {
+    return billboards.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize);
+  });
+
+  function changeCurrentPage(pagecount: number) {
+    currentPage.value = Math.max((currentPage.value + pagecount) % totalPage.value, 1);
+  }
+
+  // const billboardType = ref('DustStatus');
+  // const showBtn = ref(true);
+
+  // 组件Map，不同type需要跳转到不同的矿端页面
+  const routePathMap = {
+    DustStatus: '/dust/warn/home',
+    FileOverview: '/fileManager/fileDetail/home',
+    VentilationStatus: '/micro-vent-3dModal/dashboard/analysis',
+    GasStatus: '/gas/warn/home',
+    FireStatus: '/fire/warn/home',
+    Summary: '/monitorChannel/monitor-alarm-home',
+  };
+  // 页面跳转
+  function openHandler(ip: string) {
+    // const url = `http://localhost:3100/login`;
+    const url = `http://${ip}:8092${routePathMap[props.billboardType]}`;
+    open(url);
+  }
+
+  // 返回首页
+  function getBack() {
+    router.push('/company/home');
+  }
+
+  onMounted(() => {
+    // if (route.query.type) {
+    //   billboardType.value = route.query.type as string;
+    //   showBtn.value = false;
+    // }
+    fetchBillboards();
+  });
+</script>
+<style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+
+  .company-home {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    position: relative;
+    background: url('@/assets/images/company/content-bg.png') no-repeat;
+    background-size: 100% 100%;
+    // background: url('../../../../assets/images/company/home-pageBg.png') no-repeat center;
+    // background-size: 100% 100%;
+
+    .top-bg {
+      width: 100%;
+      height: 97px;
+      background: url('@/assets/images/company/top-bg.png') no-repeat center;
+      .main-title {
+        height: 96px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+
+    .company-content {
+      width: 100%;
+      height: calc(100% - 97px);
+      padding: 30px 100px 0 100px;
+    }
+    .company__arrow_left {
+      position: absolute;
+      top: calc(50% - 38px);
+      left: 15px;
+    }
+    .company__arrow_right {
+      position: absolute;
+      top: calc(50% - 38px);
+      right: 15px;
+    }
+  }
+</style>

src/views/vent/home/billboard/summary.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="Summary" />
+  <Billboard billboard-type="Summary" title="综合看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/billboard/vent.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="VentilationStatus" />
+  <Billboard billboard-type="VentilationStatus" title="通风看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/billboard/warn.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <Billboard billboard-type="Warning" />
+  <Billboard billboard-type="Warning" title="预警信息看板" />
 </template>
 <script lang="ts" setup>
   import Billboard from './index.vue';

src/views/vent/home/configurable/components/ModuleBD.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dane-bd" :style="style" :class="daneClass">
     <div v-if="moduleName" class="dane-title">
-      <div class="common-navL">{{ moduleName }}</div>
+      <div class="common-navL" :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
 
       <div class="common-navR">
         <!-- 下拉框 -->
@@ -53,6 +53,7 @@
   import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
   import { useInitDevicesBD } from '../hooks/useInit';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  import { openWindow } from '/@/utils';
 
   const props = defineProps<{
     moduleData: ModuleData;
@@ -102,6 +103,12 @@
     emit('select', selectedDevice);
   }
 
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(to);
+  }
+
   onMounted(() => {
     fetchDevices({ init: true });
     interval = setInterval(() => {

src/views/vent/home/configurable/components/ModuleCommon.vue

@@ -2,7 +2,7 @@
   <!-- 常用模块 -->
   <ventBox1 class="module-common" :style="style">
     <template v-if="moduleName" #title>
-      <div @click="redirectTo">{{ moduleName }}</div>
+      <div :class="{ 'cursor-pointer': !!moduleData.to }" @click="redirectTo">{{ moduleName }}</div>
     </template>
     <template #container>
       <slot>

src/views/vent/home/configurable/components/ModuleEnhanced.vue

@@ -5,6 +5,7 @@
     :style="style"
     :title="moduleName"
     :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
     @close="$emit('close')"
     @click="redirectTo"
   >

src/views/vent/home/configurable/components/ModuleOriginal.vue

@@ -5,6 +5,7 @@
     :style="style"
     :title="moduleName"
     :visible="visible"
+    :class="{ 'cursor-pointer': !!moduleData.to }"
     @close="$emit('close')"
     @click="redirectTo"
   >

src/views/vent/home/configurable/components/content.vue

@@ -16,7 +16,11 @@
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: slice.direction }">
-      <div v-for="(config, i) in layoutConfig" :key="config.key" :style="{ flexBasis: slice.basis[i], overflow: 'auto' }">
+      <div
+        v-for="(config, i) in layoutConfig"
+        :key="config.key"
+        :style="{ flexBasis: slice.basis[i], overflow: slice.ignoreOverflow ? 'none' : 'auto' }"
+      >
         <!-- 告示板部分 -->
         <template v-if="config.key === 'board'">
           <div class="content__module flex flex-justify-around pt-10px pb-10px">

src/views/vent/home/configurable/components/detail/ComplexList.vue

@@ -176,6 +176,64 @@
       display: none;
     }
   }
+
+  .list_C {
+    padding: 5px 10px;
+  }
+
+  .list__wrapper_C {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .list-item_C {
+    position: relative;
+    height: 140px;
+    width: 210px;
+    background-repeat: no-repeat;
+    background-image: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
+    background-size: 100% 100%;
+    background-position: left center;
+  }
+  .list-item__title_C {
+    position: absolute;
+    left: 99px;
+    // font-size: 14px;
+    top: 15px;
+  }
+  .list-item__content_C:nth-of-type(2) {
+    position: absolute;
+    top: 15px;
+    left: 19px;
+    width: 30%;
+    text-align: center;
+    display: block;
+
+    .list-item__label {
+      // font-size: 18px;
+      margin-bottom: 25px;
+    }
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 18px;
+    }
+  }
+  .list-item__content_C:nth-of-type(3) {
+    position: absolute;
+    left: 99px;
+    top: 55px;
+
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 18px;
+    }
+  }
+
   // .list-item__title_B_O2 {
   //   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
   // }

src/views/vent/home/configurable/components/detail/CustomChart.vue

@@ -11,7 +11,7 @@
 
   const props = withDefaults(
     defineProps<{
-      chartData: Record<string, any> | Record<string, any>[];
+      chartData: Record<string, any>[] | Record<string, any>;
       chartConfig: Config['moduleData']['chart']['0'];
       height?: string;
       width?: string;
@@ -25,27 +25,70 @@
 
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  function getData(raw, readFrom) {
+    if (readFrom) {
+      return get(raw, readFrom);
+    }
+    return raw;
+  }
 
   // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
   const genChartOption = () => {
     // 依据每一个图表配置生成图表选项
-    const { yAxis = [], xAxis = [], order, type, sortBy, series } = props.chartConfig;
-    const isArray = Array.isArray(props.chartData);
+    const { yAxis = [], xAxis = [], legend, order, type, sortBy, series } = props.chartConfig;
+    const textStyle = {
+      color: '#fff',
+    };
+
+    let sorttedData: any[] = [];
+    if (Array.isArray(props.chartData)) {
+      sorttedData = props.chartData;
+    } else {
+      sorttedData = [props.chartData];
+    }
+    // 如果这个配置指明了需要排序则执行排序
+    if (sortBy && order) {
+      sorttedData.sort((pre, cur) => {
+        if (order === 'asc') {
+          return get(pre, sortBy, 0) - get(cur, sortBy, 0);
+        } else {
+          return get(cur, sortBy, 0) - get(pre, sortBy, 0);
+        }
+      });
+    }
 
-    // 饼状图通常依赖单个对象的不同字段绘制
-    if (type === 'pie' && !isArray) {
+    // 该项作为下面所有图表依赖的基准系列数据
+    const baseSeries: { name: string; data: { name: string; value: any }[] }[] = sorttedData.reduce((res: any[], baseData) => {
+      series.forEach((serie) => {
+        res.push({
+          name: getFormattedText(baseData, serie.label),
+          data: (getData(baseData, serie.readFrom) || []).map((data) => {
+            return [getData(data, serie.xprop), getData(data, serie.yprop)]; /** x y */
+            // return { name: getData(data, serie.xprop), value: getData(data, serie.yprop) }; /** x y */
+          }),
+        });
+      });
+
+      return res;
+    }, []);
+
+    if (type === 'pie') {
       return {
-        legend: { show: false },
+        textStyle,
+        legend: {
+          textStyle,
+          show: legend.show,
+        },
         color: ['#d9a1ff', '#00d1ff', '#82fe78'],
-        series: [
-          {
+        series: baseSeries.map((serie) => {
+          return {
             type: 'pie',
             radius: ['50%', '75%'],
             center: ['50%', '55%'],
-            data: series.map((serie) => {
+            name: serie.name,
+            data: serie.data.map((serie) => {
               return {
-                name: serie.label,
-                value: get(props.chartData, serie.prop, 0),
+                ...serie,
                 labelLine: { show: false },
                 label: { show: false },
                 itemStyle: {
@@ -54,48 +97,32 @@
                 },
               };
             }),
-          },
-        ],
+          };
+        }),
       };
     }
-    if (!isArray) return {};
-
-    let sorttedData = [...(props.chartData as any[])];
 
-    // 如果这个配置指明了需要排序则执行排序
-    if (sortBy && order) {
-      sorttedData.sort((pre, cur) => {
-        if (order === 'asc') {
-          return get(pre, sortBy, 0) - get(cur, sortBy, 0);
-        } else {
-          return get(cur, sortBy, 0) - get(pre, sortBy, 0);
-        }
-      });
-    }
-
-    // 柱状图则要求使用数组形式的数据作依赖
+    // 柱状图
     if (type === 'bar') {
       return {
+        textStyle,
         grid: {
           top: 50,
-          height: 150,
+          bottom: 30,
         },
-        textStyle: {
-          color: '#fff',
+        legend: {
+          textStyle,
+          show: legend.show,
         },
-        legend: { show: false },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 color: '#ffffff',
@@ -104,17 +131,10 @@
             },
           };
         }),
-        series: series.reduce((curr: EChartsOption[], serie, index) => {
+        series: baseSeries.reduce((curr: EChartsOption[], serie, index) => {
           const colors = ['#66ffff', '#ffff66'];
-          // 系列选项，如果指定了x轴配置则以x轴配置优先
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
           curr.push({
-            name: 'pictorial element',
+            ...serie,
             type: 'pictorialBar',
             symbol: 'circle',
             symbolPosition: 'end',
@@ -124,13 +144,14 @@
             itemStyle: {
               color: colors[index % colors.length],
             },
-            data,
           });
           curr.push({
-            name: 'reference bar',
+            ...serie,
             type: 'bar',
             silent: true,
             yAxisIndex: index,
+            tooltip: { show: false },
+            barWidth: 8,
             itemStyle: {
               color: new graphic.LinearGradient(0, 0, 0, 1, [
                 { offset: 0, color: colors[index % colors.length] },
@@ -138,9 +159,6 @@
                 { offset: 1, color: `${colors[index % colors.length]}22` },
               ]),
             },
-            tooltip: { show: false },
-            barWidth: 8,
-            data,
           });
 
           return curr;
@@ -151,16 +169,12 @@
     // 折线图和上面的柱状图类似
     if (type === 'line') {
       return {
+        textStyle,
         legend: {
+          show: legend.show,
           top: 10,
           right: 10,
-          textStyle: {
-            color: '#fff',
-          },
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
+          textStyle,
         },
         grid: {
           left: 60,
@@ -170,16 +184,13 @@
         },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 color: '#fff',
@@ -188,54 +199,38 @@
             },
           };
         }),
-        series: series.map((serie) => {
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
-
+        series: baseSeries.map((serie) => {
           return {
+            ...serie,
             type: 'line',
-            data,
           };
         }),
       };
     }
 
-    // 折线图和上面的柱状图类似
+    // 平滑曲线图
     if (type === 'line_smooth') {
       return {
+        textStyle,
         legend: {
+          show: legend.show,
           top: 10,
-          right: 10,
-          textStyle: {
-            color: '#fff',
-          },
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
+          textStyle,
         },
         grid: {
-          left: 50,
-          top: 50,
-          right: 50,
-          bottom: 50,
+          left: 60,
+          right: 60,
+          bottom: 30,
         },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 opacity: 0.3,
@@ -243,32 +238,26 @@
             },
           };
         }),
-        series: series.map((serie) => {
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
-
+        series: baseSeries.map((serie) => {
           return {
+            ...serie,
             type: 'line',
-            data,
             smooth: true,
+            itemStyle: {
+              opacity: 0,
+            },
           };
         }),
       };
     }
 
-    // 折线图和上面的柱状图类似
+    // 折线区域图，即折线下面的区域填满
     if (type === 'line_area') {
       return {
+        textStyle,
         legend: {
-          show: false,
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
+          textStyle,
+          show: legend.show,
         },
         grid: {
           left: 50,
@@ -278,17 +267,14 @@
         },
         xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
             boundaryGap: false,
-            data: sorttedData.map((d) => {
-              return getFormattedText(d, e.label);
-            }),
           };
         }),
         yAxis: yAxis.map((e) => {
           return {
-            name: e.label,
-            position: e.align,
+            ...e,
             splitLine: {
               lineStyle: {
                 color: '#fff',
@@ -297,21 +283,14 @@
             },
           };
         }),
-        series: series.map((serie, index) => {
+        series: baseSeries.map((serie, index) => {
           const colors = ['#66ffff', '#6666ff'];
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-            };
-          });
 
           return {
+            ...serie,
             type: 'line',
-            data,
             symbol: 'none',
             endLabel: { distance: 0 },
-            // itemStyle: { show: false, opacity: 0 },
             lineStyle: { color: colors[index % colors.length] },
             areaStyle: {
               origin: 'auto',
@@ -328,16 +307,12 @@
 
     if (type === 'line_bar') {
       return {
+        textStyle,
         legend: {
+          textStyle,
+          show: legend.show,
           top: 10,
           right: 10,
-          textStyle: {
-            color: '#fff',
-          },
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
         },
         grid: {
           left: 40,
@@ -346,112 +321,28 @@
           bottom: 10,
           show: false,
         },
-        xAxis: xAxis.map(() => {
+        xAxis: xAxis.map((e) => {
           return {
+            ...e,
             type: 'category',
-            show: false,
           };
         }),
-        yAxis: yAxis.map(() => {
+        yAxis: yAxis.map((e) => {
           return {
-            show: false,
-            // name: e.label,
-            // position: e.align,
+            ...e,
           };
         }),
-        series: series.map((serie, i) => {
-          const data = sorttedData.map((d) => {
-            return {
-              name: serie.label,
-              value: get(d, serie.prop, 0),
-              label: {
-                show: true,
-                position: 'top',
-                borderWidth: 0,
-                color: '#fff',
-              },
-              itemStyle: {
-                color: new graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#66ffff' },
-                  { offset: 0.2, color: '#66ffff' },
-                  { offset: 1, color: '#66ffff22' },
-                ]),
-              },
-            };
-          });
-
+        series: baseSeries.map((serie, i) => {
           return {
+            ...serie,
             type: i % 2 ? 'line' : 'bar',
             smooth: true,
-            data,
             barWidth: 20,
           };
         }),
       };
     }
 
-    // 折线图和上面的柱状图类似
-    if (type === 'line_smooth_complex') {
-      return {
-        legend: {
-          top: 10,
-          right: 10,
-          textStyle: {
-            color: '#fff',
-          },
-        },
-        // backgroundColor: '#081f33',
-        textStyle: {
-          color: '#fff',
-        },
-        grid: {
-          left: 50,
-          top: 50,
-          right: 50,
-          bottom: 50,
-        },
-        xAxis: xAxis.map(() => {
-          return {
-            type: 'category',
-            // data: sorttedData.map((d) => {
-            //   return getFormattedText(d, e.label);
-            // }),
-          };
-        }),
-        yAxis: yAxis.map((e) => {
-          return {
-            name: e.label,
-            position: e.align,
-            splitLine: {
-              lineStyle: {
-                opacity: 0.3,
-              },
-            },
-          };
-        }),
-        // 基于以下情况作处理：
-        // 数据示例：arr1: [ { arr2: [ { val: 2 } ] } ]
-        // readFrom 指向 arr1，则 prop 配置应为 arr2|val
-        series: sorttedData.map((data) => {
-          const serie = series[0];
-          const [p1, p2] = serie.prop.split('|');
-          // 从 readFrom 指向的数组项中，取出指定的子数组
-          const arr = get(data, p1);
-
-          return {
-            type: 'line',
-            data: arr.map((e) => {
-              return {
-                name: get(e, serie.label),
-                value: get(e, p2, 0),
-              };
-            }),
-            smooth: true,
-          };
-        }),
-      };
-    }
-
     return {};
   };
 
@@ -467,7 +358,6 @@
 
   function initCharts() {
     const o = genChartOption();
-    console.log('debug initchart');
     setOptions(o as EChartsOption, false);
   }
 </script>

src/views/vent/home/configurable/configurable.api.ts

@@ -51,5 +51,15 @@ export const getBDFireData = (params) => {
       })
     );
   }
-  return cache.get(key) as Promise<any>;
+  return (cache.get(key) as Promise<any>).then((res) => {
+    res.pdArray.forEach((e) => {
+      e.arrayFiber.forEach((j) => {
+        j.fibreTemperatureArr = JSON.parse(j.fibreTemperature);
+      });
+    });
+    res.sgGxObj.devGxcw.forEach((e) => {
+      e.fibreTemperatureArr = JSON.parse(e.fibreTemperature);
+    });
+    return res;
+  });
 };

src/views/vent/home/configurable/configurable.data.ts

@@ -1591,22 +1591,16 @@ export const testConfigBDDust: Config[] = [
       chart: [
         {
           type: 'line_area',
-          readFrom: 'historyList',
-          xAxis: [
-            {
-              label: '${time}',
-            },
-          ],
-          yAxis: [
-            {
-              label: '浓度',
-              align: 'left',
-            },
-          ],
+          readFrom: '',
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '浓度', position: 'left' }],
           series: [
             {
-              label: '粉尘浓度',
-              prop: 'dustval',
+              label: '${strinstallpos}',
+              readFrom: 'historyList',
+              xprop: 'time',
+              yprop: 'dustval',
             },
           ],
         },
@@ -1685,6 +1679,7 @@ export const testConfigBDDust: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
+      to: 'http://10.248.210.154:8801',
       // mock: BDdustMock,
     },
     showStyle: {
@@ -1695,7 +1690,7 @@ export const testConfigBDDust: Config[] = [
   },
   {
     deviceType: '',
-    moduleName: '粉尘关联指标',
+    moduleName: '隔爆设施管理台账',
     pageType: '',
     moduleData: {
       header: {
@@ -1904,18 +1899,8 @@ const BDfireMock = {
         fmax: '0', //最高浓度
         fmin: '0', //最低温度
         favg: '0', //平均温度
-        fibreTemperature: [
-          {
-            fmax: '0', //最高浓度
-            fmin: '1', //最低温度
-            time: '1',
-          },
-          {
-            fmax: '1', //最高浓度
-            fmin: '0', //最低温度
-            time: '1',
-          },
-        ], //曲线图数据
+        fibreTemperature:
+          '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
         warnLevel: '低风险', //风险监测
       },
       {
@@ -1923,18 +1908,8 @@ const BDfireMock = {
         fmax: '0', //最高浓度
         fmin: '0', //最低温度
         favg: '0', //平均温度
-        fibreTemperature: [
-          {
-            fmax: '0', //最高浓度
-            fmin: '0', //最低温度
-            time: '1',
-          },
-          {
-            fmax: '1', //最高浓度
-            fmin: '1', //最低温度
-            time: '1',
-          },
-        ], //曲线图数据
+        fibreTemperature:
+          '[{"pos":1,"value":"7.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
         warnLevel: '低风险', //风险监测
       },
     ],
@@ -1950,7 +1925,7 @@ const BDfireMock = {
         o2Val: '0', //氧气值
         connectSta: '连接', //连接状态
         warnLevel: '低风险', //风险监测
-        btTriBlast: '', //爆炸三角信息
+        btTriBlast: '{"G_y":10.53,"G_x":0,"F_y":0,"A_x":5.0,"B_x":15.0,"A_y":19.93,"B_y":17.83,"E_y":10.0,"F_x":9.55,"E_x":5.0}', //爆炸三角信息
       },
       {
         strinstallpos: '位置2', //安装位置
@@ -1962,7 +1937,7 @@ const BDfireMock = {
         o2Val: '0', //氧气值
         connectSta: '连接', //连接状态
         warnLevel: '低风险', //风险监测
-        btTriBlast: '', //爆炸三角信息
+        btTriBlast: '{"G_y":10.53,"G_x":0,"F_y":0,"A_x":5.0,"B_x":15.0,"A_y":19.93,"B_y":17.83,"E_y":10.0,"F_x":9.55,"E_x":5.0}', //爆炸三角信息
       },
     ],
   },
@@ -1995,20 +1970,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [
-            {
-              favg: '20',
-              time: '2024-09-10 17:04:50',
-              fmin: '19.01',
-              fmax: '32.0',
-            },
-            {
-              favg: '24',
-              time: '2024-09-11 00:00:00',
-              fmin: '19.01',
-              fmax: '31.99',
-            },
-          ], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
         {
@@ -2016,20 +1979,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [
-            {
-              favg: '23',
-              time: '2024-09-10 17:04:50',
-              fmin: '19.01',
-              fmax: '32.0',
-            },
-            {
-              favg: '30',
-              time: '2024-09-11 00:00:00',
-              fmin: '19.01',
-              fmax: '31.99',
-            },
-          ], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
         {
@@ -2037,20 +1988,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [
-            {
-              favg: '10',
-              time: '2024-09-10 17:04:50',
-              fmin: '19.01',
-              fmax: '32.0',
-            },
-            {
-              favg: '13',
-              time: '2024-09-11 00:00:00',
-              fmin: '19.01',
-              fmax: '31.99',
-            },
-          ], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"19.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
         {
@@ -2058,20 +1997,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [
-            {
-              favg: '30',
-              time: '2024-09-10 17:04:50',
-              fmin: '19.01',
-              fmax: '32.0',
-            },
-            {
-              favg: '27',
-              time: '2024-09-11 00:00:00',
-              fmin: '19.01',
-              fmax: '31.99',
-            },
-          ], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
       ],
@@ -2103,7 +2030,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
         {
@@ -2111,7 +2039,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
         {
@@ -2119,7 +2048,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
         {
@@ -2127,7 +2057,8 @@ const BDfireMock = {
           fmax: '0', //最高浓度
           fmin: '0', //最低温度
           favg: '0', //平均温度
-          fibreTemperature: [], //曲线图数据
+          fibreTemperature:
+            '[{"pos":1,"value":"17.8"},{"pos":2,"value":"18.0"},{"pos":3,"value":"18.5"},{"pos":4,"value":"18.6"},{"pos":5,"value":"18.4"},{"pos":6,"value":"18.1"}]',
           warnLevel: '低风险', //风险监测
         },
       ],
@@ -2587,7 +2518,7 @@ const BDfireMock = {
 export const testConfigBDFire: Config[] = [
   {
     deviceType: '',
-    moduleName: '工作面风险监测',
+    moduleName: '重点区域风险监测',
     pageType: '',
     moduleData: {
       header: {
@@ -2631,7 +2562,7 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [
         {
-          type: 'A',
+          type: 'C',
           readFrom: 'fireManageInfo.sysList',
           mapFromData: true,
           items: [
@@ -2687,6 +2618,7 @@ export const testConfigBDFire: Config[] = [
       },
       slice: {
         direction: 'column',
+        ignoreOverflow: true,
         basis: ['35%', '65%'],
       },
       layout: ['board', 'chart'],
@@ -2713,14 +2645,17 @@ export const testConfigBDFire: Config[] = [
       ],
       chart: [
         {
-          type: 'line_smooth_complex',
+          type: 'line_smooth',
           readFrom: 'arrayFiber',
-          xAxis: [{ label: '${position}' }],
-          yAxis: [{ label: '温度（℃）', align: 'left' }],
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
           series: [
             {
-              label: '${position}',
-              prop: 'fibreTemperature|favg',
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
             },
           ],
         },
@@ -2801,17 +2736,17 @@ export const testConfigBDFire: Config[] = [
             },
             {
               // label: 'C₂H₄',
-              label: 'H₂',
-              value: '--',
+              label: 'O₂',
+              value: '${o2Val}',
               color: 'blue',
-              info: '氢气',
+              info: '氧气',
             },
             {
               // label: 'O₂',
-              label: 'N₂',
-              value: '--',
+              label: 'C₂H₄',
+              value: '${c2h4Val}',
               color: 'blue',
-              info: '氮气',
+              info: '乙烯',
             },
             {
               label: '温度',
@@ -2831,7 +2766,7 @@ export const testConfigBDFire: Config[] = [
       complex_list: [],
       preset: [
         {
-          readFrom: 'btTriBlast',
+          readFrom: '',
         },
       ],
       // mock: BDfireMock,
@@ -2872,21 +2807,16 @@ export const testConfigBDFire: Config[] = [
       chart: [
         {
           type: 'line_smooth',
-          readFrom: 'fibreTemperature',
-          xAxis: [{ label: '${position}' }],
-          yAxis: [{ label: '温度（℃）', align: 'left' }],
+          readFrom: '',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
           series: [
             {
-              label: '最高温度',
-              prop: 'fmax',
-            },
-            {
-              label: '最低温度',
-              prop: 'fmin',
-            },
-            {
-              label: '平均温度',
-              prop: 'favg',
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
             },
           ],
         },
@@ -2984,9 +2914,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:230px;',
+      size: 'width:450px;height:240px;',
       version: '保德',
-      position: 'top:210px;right:0;',
+      position: 'top:160px;right:0;',
     },
   },
   {
@@ -3082,9 +3012,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:230px;',
+      size: 'width:450px;height:240px;',
       version: '保德',
-      position: 'top:450px;right:0;',
+      position: 'top:410px;right:0;',
     },
   },
   {
@@ -3147,9 +3077,9 @@ export const testConfigBDFire: Config[] = [
       // mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:230px;',
+      size: 'width:450px;height:260px;',
       version: '保德',
-      position: 'top:690px;right:0;',
+      position: 'top:660px;right:0;',
     },
   },
 ];
@@ -3392,9 +3322,10 @@ export const testConfigBDNew: Config[] = [
         {
           type: 'line',
           readFrom: 'btArray',
-          xAxis: [{ label: '${strinstallpos}' }],
-          yAxis: [{ label: '值', align: 'left' }],
-          series: [{ prop: 'val', label: '值' }],
+          legend: { show: false },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '值', position: 'left' }],
+          series: [{ label: '', readFrom: '', xprop: 'value', yprop: 'pos' }],
         },
       ],
       gallery: [],

src/views/vent/home/configurable/fireBD.vue

@@ -25,7 +25,7 @@
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
             {{ homedata.allMineWarn }}
           </div>
-          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
+          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
         </div>
         <div class="tcontent-r">
           <div>火灾</div>
@@ -53,6 +53,17 @@
       :visible="true"
       :page-type="pageType"
     />
+    <ModuleBDDual
+      :show-style="configA.showStyle"
+      :module-data-a="configA.moduleData"
+      :module-name-a="configA.moduleName"
+      :device-type-a="configA.deviceType"
+      :module-data-b="configB.moduleData"
+      :module-name-b="configB.moduleName"
+      :device-type-b="configB.deviceType"
+      :visible="true"
+      :page-type="pageType"
+    />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
       <VentModal />
     </div>
@@ -64,6 +75,7 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
   import { testConfigBDFire } from './configurable.data';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getBDFireData } from './configurable.api';
@@ -73,7 +85,21 @@
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
-  const configs = ref(testConfigBDFire);
+  const configs = ref(
+    testConfigBDFire.filter(({ moduleName }) => {
+      return moduleName !== '工作面光纤监测' && moduleName !== '工作面束管监测';
+    })
+  );
+  const configA = ref<any>(
+    testConfigBDFire.find(({ moduleName }) => {
+      return moduleName === '工作面束管监测';
+    })
+  );
+  const configB = ref<any>(
+    testConfigBDFire.find(({ moduleName }) => {
+      return moduleName === '工作面光纤监测';
+    })
+  );
   // const { configs, fetchConfigs } = useInitConfigs();
 
   const homedata = ref<any>({});
@@ -225,7 +251,8 @@
   }
   .right-t {
     position: absolute;
-    height: 160px;
+    // height: 160px;
+    height: 115px;
     right: 0;
     top: 40px;
     width: 450px;
@@ -241,8 +268,8 @@
 
     .tcontent-l {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
@@ -254,13 +281,13 @@
         center,
         center top;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
+      padding-top: 35px;
+      line-height: 40px;
     }
     .tcontent-r {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
@@ -272,8 +299,8 @@
         center,
         center top;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
+      padding-top: 35px;
+      line-height: 40px;
     }
   }
 

src/views/vent/home/configurable/index.vue

@@ -25,7 +25,7 @@
           <div style="margin-bottom: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
             {{ homedata.allMineWarn }}
           </div>
-          <!-- <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div> -->
+          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
         </div>
         <div class="tcontent-r">
           <div>火灾</div>
@@ -251,7 +251,8 @@
   }
   .right-t {
     position: absolute;
-    height: 160px;
+    // height: 160px;
+    height: 115px;
     right: 0;
     top: 40px;
     width: 450px;
@@ -267,8 +268,8 @@
 
     .tcontent-l {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
@@ -280,13 +281,13 @@
         center,
         center top;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
+      padding-top: 35px;
+      line-height: 40px;
     }
     .tcontent-r {
       flex: 1;
-      height: 70%;
-      font-size: 20px;
+      height: 100%;
+      font-size: 16px;
       font-weight: bold;
       background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
         url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
@@ -298,8 +299,8 @@
         center,
         center top;
       text-align: center;
-      padding-top: 40px;
-      line-height: 50px;
+      padding-top: 35px;
+      line-height: 40px;
     }
   }
 

src/views/vent/monitorManager/deviceMonitor/components/device/modal/blastDelta.vue

@@ -355,8 +355,8 @@
     () => props.posMonitor,
     (newV, oldV) => {
       if (newV.btTriBlast) {
-        maxY1.value = parseFloat(newV.o2val || newV.o2Val);
-        maxX1.value = parseFloat(newV.coval || newV.coVal) * 0.0001 + parseFloat(newV.gasval || newV.gasVal) + parseFloat(newV.ch2val || newV.ch2Val) * 0.0001 + parseFloat(newV.chval || newV.chVal) * 0.0001;
+        maxY1.value = parseFloat(newV.o2val);
+        maxX1.value = parseFloat(newV.coval) * 0.0001 + parseFloat(newV.gasval) + parseFloat(newV.ch2val) * 0.0001 + parseFloat(newV.chval) * 0.0001;
         let btTriBlasts = JSON.parse(newV.btTriBlast);
         coordinateA.x = btTriBlasts.A_x;
         coordinateA.y = btTriBlasts.A_y;