[Wip 0000] 可配置首页开发火灾相关模块，添加部分新的预设并调整样式

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

@@ -49,7 +49,7 @@ export interface ModuleData {
     link: string;
   };
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'blast_delta')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
   /** 展示牌元素 */
   board: {
     /** 展示牌说明内容 */
@@ -68,11 +68,13 @@ export interface ModuleData {
     label: string;
     formatter?: string;
     prop: string;
+    /** 列表预设的背景类型，仅第一个type生效，即第一个type决定了列表整体的类型 */
+    type: 'timeline' | 'A' | 'B';
   }[];
   /** 图表元素，仅第一个配置项将生效 */
   chart: {
     /** 图表通用类型，一个类型对应一种图表预设 */
-    type: 'pie' | 'bar' | 'line';
+    type: 'pie' | 'bar' | 'line' | 'line_area';
     /** 读取数据时的基础路径，例如如果图表依赖一个数组，那么该项应设置能读取到该数组的路径。例如：readData.history */
     readFrom: string;
     /** 排序依据，该项应配置为`readFrom`指向的数据中的可读项。例如：createTime */

src/views/vent/home/configurable/components/customChart.vue → src/views/vent/home/configurable/components/CustomChart.vue

@@ -26,7 +26,7 @@
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-  // 核心方法，生成适用与 echart 的选项
+  // 核心方法，生成适用与 echart 的选项，这个方法需要适配 chart 类型的每种子类型
   const genChartOption = () => {
     // 依据每一个图表配置生成图表选项
     const { yAxis = [], xAxis = [], order, type, sortBy, series } = props.chartConfig;
@@ -147,6 +147,7 @@
         }, []),
       };
     }
+
     // 折线图和上面的柱状图类似
     if (type === 'line') {
       return {
@@ -162,9 +163,9 @@
           color: '#fff',
         },
         grid: {
-          left: 80,
+          left: 60,
           top: 50,
-          right: 80,
+          right: 60,
           bottom: 50,
         },
         xAxis: xAxis.map((e) => {
@@ -204,6 +205,74 @@
 
       return {};
     }
+
+    // 折线图和上面的柱状图类似
+    if (type === 'line_area') {
+      return {
+        legend: {
+          show: false,
+        },
+        // backgroundColor: '#081f33',
+        textStyle: {
+          color: '#fff',
+        },
+        grid: {
+          left: 60,
+          top: 50,
+          right: 60,
+          bottom: 50,
+        },
+        xAxis: xAxis.map((e) => {
+          return {
+            type: 'category',
+            boundaryGap: false,
+            data: sorttedData.map((d) => {
+              return getFormattedText(d, e.prop, e.formatter);
+            }),
+          };
+        }),
+        yAxis: yAxis.map((e) => {
+          return {
+            name: e.label,
+            position: e.align,
+            splitLine: {
+              lineStyle: {
+                color: '#fff',
+                opacity: 0.3,
+              },
+            },
+          };
+        }),
+        series: series.map((serie, index) => {
+          const colors = ['#66ffff', '#6666ff'];
+          const data = sorttedData.map((d) => {
+            return {
+              name: serie.label,
+              value: get(d, serie.prop, 0),
+            };
+          });
+
+          return {
+            type: 'line',
+            data,
+            symbol: 'none',
+            endLabel: { distance: 0 },
+            // itemStyle: { show: false, opacity: 0 },
+            lineStyle: { color: colors[index % colors.length] },
+            areaStyle: {
+              origin: 'auto',
+              color: new graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: colors[index % colors.length] },
+                { offset: 0.2, color: colors[index % colors.length] },
+                { offset: 1, color: `${colors[index % colors.length]}22` },
+              ]),
+            },
+          };
+        }),
+      };
+
+      return {};
+    }
   };
 
   watch(

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

@@ -0,0 +1,146 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="list flex items-center" :class="`list__${type}`">
+    <!-- 部分类型的列表需要加一张图片 -->
+    <div :class="`list-item__image__${type}`"></div>
+    <div class="flex-grow">
+      <div v-for="item in listConfig" :key="item.prop" class="flex items-center list-item">
+        <div :class="`list-item__icon__${type}`"></div>
+        <div class="flex-grow" :class="`list-item__content__${type}`">
+          <div class="list-item__label">{{ item.label }}</div>
+          <div :class="`list-item__value_${item.color}`">
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+      }[];
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+  /* Timeline 相关的样式 */
+
+  .list-item {
+    height: 20%;
+  }
+  .list-item__content__A {
+    background-repeat: no-repeat;
+    background-image: @vent-gas-list-item-bg-img;
+    padding: 5px 10px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .list-item__content__B {
+    background-repeat: no-repeat;
+    padding: 5px 10px 10px 10px;
+    display: flex;
+    justify-content: space-between;
+    background-position: left bottom;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+  }
+  .list-item__image__B {
+    width: 77px;
+    height: 77px;
+    background-repeat: no-repeat;
+    background-image: url(/@/assets/images/home-container/configurable/deco_1.png);
+    background-size: auto;
+    margin-right: 20px;
+  }
+  .list-item__icon__A {
+    background-repeat: no-repeat;
+    width: 25px;
+    height: 29px;
+    background-image: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+  }
+  // .list-item__icon_red {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
+  // }
+  // .list-item__icon_orange {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_4.png');
+  // }
+  // .list-item__icon_yellow {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_3.png');
+  // }
+  // .list-item__icon_green {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_2.png');
+  // }
+  // .list-item__icon_blue {
+  //   background-image: url('@/assets/images/home-container/configurable/warn_icon_1.png');
+  // }
+  // .list-item__icon {
+  //   width: 33px;
+  //   height: 35px;
+  //   margin-left: 50px;
+  //   background-repeat: no-repeat;
+  //   background-position: center center;
+  // }
+  // .list-item__dot {
+  //   width: 10px;
+  //   height: 10px;
+  //   margin-left: 70px;
+  //   background-color: @vent-gas-primary-bg;
+  //   border-radius: 5px;
+  //   position: relative;
+  // }
+  // .list-item__dot::before {
+  //   content: '';
+  //   position: absolute;
+  //   top: -3px;
+  //   left: -3px;
+  //   width: 16px;
+  //   height: 16px;
+  //   border-radius: 8px;
+  //   border: 1px solid @vent-gas-tab-border;
+  // }
+  // .list-item__label {
+  // }
+  .list-item__value_red {
+    color: red;
+  }
+  .list-item__value_orange {
+    color: orange;
+  }
+  .list-item__value_yellow {
+    color: yellow;
+  }
+  .list-item__value_green {
+    color: yellowgreen;
+  }
+  .list-item__value_blue {
+    color: lightblue;
+  }
+
+  .list {
+    padding: 5px 20px;
+    position: relative;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+    background-size: auto 100%;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+  }
+
+  .list__A {
+    padding-left: 5px;
+  }
+</style>

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

@@ -0,0 +1,133 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="w-100% h-100% flex justify-around">
+    <div v-for="(item, i) in listAConfig" :key="`hccfc${i}`" class="board">
+      <div class="text-center mb-20px">{{ item.title }}</div>
+      <div v-for="stuff in item.list" :key="stuff.prop" class="board-item flex justify-between">
+        <div>{{ stuff.label }}</div>
+        <div :class="`board-item__value_${stuff.color}`">{{ stuff.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted } from 'vue';
+  //   import { Config } from '../../../deviceManager/configurationTable/types';
+  //   import { useInitDevices } from '../hooks/useInit';
+  //   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  //   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  //   import MiniBoard from './MiniBoard.vue';
+  //   import TimelineList from './TimelineList.vue';
+  //   import CustomList from './CustomList.vue';
+  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  //   import CustomChart from './CustomChart.vue';
+  //   import { get } from 'lodash-es';
+  //   import CommonTable from '../../billboard/components/CommonTable.vue';
+  //   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+
+  //   const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
+  const listA = [
+    {
+      title: '防火注浆',
+      list: [
+        {
+          prop: 'b',
+          label: '回采位置',
+          color: 'white',
+        },
+        {
+          prop: 'c',
+          label: '硐室火情',
+          color: 'blue',
+          formatter: 'a${}ff',
+        },
+      ],
+      //   color: 'yellow',
+    },
+    {
+      title: '防火注氮',
+      list: [
+        {
+          prop: 'b',
+          label: '回采位置',
+          color: 'white',
+        },
+        {
+          prop: 'c',
+          label: '硐室火情',
+          color: 'blue',
+        },
+      ],
+      //   color: 'yellow',
+    },
+  ];
+
+  const listAConfig = computed(() => {
+    const data = {
+      a: '氧化',
+      b: '氧化吗',
+      c: '不氧化',
+      d: '正常',
+    };
+    return listA.map((b) => {
+      return {
+        ...b,
+        list: b.list.map((e) => {
+          return {
+            ...e,
+            value: getFormattedText(data, e.prop, e.formatter),
+          };
+        }),
+      };
+    });
+  });
+  //   const listType = computed(() => {
+  //     return list[0]?.type || 'A';
+  //   });
+
+  //   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
+  //     props.deviceType,
+  //     headerConfig
+  //   );
+
+  onMounted(() => {
+    // fetchDevices();
+  });
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .board {
+    width: 151px;
+    height: 196px;
+    background-image: url(/@/assets/images/home-container/configurable/board_bg.png);
+    padding: 8px 5px 0 5px;
+  }
+
+  .board-item {
+    height: 40px;
+    line-height: 40px;
+    border-style: solid;
+    // border: 2px solid blue;
+    // border-image: linear-gradient(transparent, #fff, transparent);
+    border-top: none;
+    border-bottom: none;
+    border-image: linear-gradient(transparent 30%, #fff 50%, transparent 80%) 10;
+    padding: 0 5px;
+  }
+  .board-item__value_red {
+    color: red;
+  }
+  .board-item__value_orange {
+    color: orange;
+  }
+  .board-item__value_yellow {
+    color: yellow;
+  }
+  .board-item__value_green {
+    color: yellowgreen;
+  }
+  .board-item__value_blue {
+    color: lightblue;
+  }
+</style>

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

@@ -0,0 +1,132 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div class="w-100% h-100% pl-5px pr-5px">
+    <div class="flex items-center h-140px">
+      <div class="fire-warn__image">
+        <div class="fire-warn__image_sub w-50px h-50px top-10px left-20px">CO</div>
+        <div class="fire-warn__image_sub w-30px h-30px top-50px left-70px">CO</div>
+        <div class="fire-warn__image_sub w-20px h-20px top-80px left-20px">CO</div>
+      </div>
+      <CustomList type="A" :list-config="listAConfig" />
+    </div>
+    <CustomList type="B" :list-config="listBConfig" style="height: 80px; margin-top: 10px" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, onMounted } from 'vue';
+  import { Config } from '../../../deviceManager/configurationTable/types';
+  //   import { useInitDevices } from '../hooks/useInit';
+  //   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  //   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  //   import MiniBoard from './MiniBoard.vue';
+  //   import TimelineList from './TimelineList.vue';
+  import CustomList from './CustomList.vue';
+  import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
+  //   import CustomChart from './CustomChart.vue';
+  //   import { get } from 'lodash-es';
+  //   import CommonTable from '../../billboard/components/CommonTable.vue';
+  //   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+
+  //   const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
+  const listA: Config['moduleData']['list'] = [
+    {
+      type: 'A',
+      prop: 'a',
+      label: '火情状态',
+      color: 'yellow',
+    },
+    {
+      type: 'A',
+      prop: 'b',
+      label: '回采位置',
+      color: 'white',
+    },
+    {
+      type: 'A',
+      prop: 'c',
+      label: '硐室火情',
+      color: 'blue',
+    },
+    {
+      type: 'A',
+      prop: 'd',
+      label: '联动设备状态',
+      color: 'blue',
+    },
+  ];
+  const listB: Config['moduleData']['list'] = [
+    {
+      type: 'B',
+      prop: 'a',
+      label: '2222/2/2 22:22:22',
+      color: 'white',
+    },
+    {
+      type: 'B',
+      prop: 'b',
+      label: '我是地点1',
+      color: 'white',
+    },
+  ];
+  const listBConfig = computed(() => {
+    const data = {
+      a: '堵塞',
+      b: '甲烷0。02',
+    };
+    return listB.map((b) => {
+      return {
+        ...b,
+        value: getFormattedText(data, b.prop, b.formatter),
+      };
+    });
+  });
+  const listAConfig = computed(() => {
+    const data = {
+      a: '氧化',
+      b: '氧化吗',
+      c: '不氧化',
+      d: '正常',
+    };
+    return listA.map((b) => {
+      return {
+        ...b,
+        value: getFormattedText(data, b.prop, b.formatter),
+      };
+    });
+  });
+  //   const listType = computed(() => {
+  //     return list[0]?.type || 'A';
+  //   });
+
+  //   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
+  //     props.deviceType,
+  //     headerConfig
+  //   );
+
+  onMounted(() => {
+    // fetchDevices();
+  });
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .fire-warn__image {
+    position: relative;
+    width: 200px;
+    height: 100%;
+    margin: 0 10px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/deco_2.png);
+  }
+
+  .fire-warn__image_sub {
+    text-align: center;
+    position: absolute;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/deco_3.png);
+  }
+</style>

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

@@ -57,19 +57,30 @@
       </div>
       <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
       <template v-if="val === 'chart'">
-        <CustomChart :chart-config="chartConfig" :chart-data="chartData" style="flex-grow: 1" />
+        <CustomChart :chart-config="chartConfig" :chart-data="chartData" class="flex-grow" />
       </template>
-      <!-- 时间线列表部分，这部分通常是占一整个模块的 -->
+      <!-- 通常列表部分 -->
       <template v-if="val === 'list'">
-        <TimelineList :list-config="listConfig" />
+        <template v-if="listType === 'timeline'">
+          <TimelineList :list-config="listConfig" />
+        </template>
+        <template v-else>
+          <CustomList :type="listType" :list-config="listConfig" />
+        </template>
       </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="val === 'table'">
-        <CommonTable :columns="tableConfig.columns" :data="tableData" class="mt-10px mb-10px" />
+        <CommonTable :columns="tableConfig.columns" :data="tableData" class="mt-10px mb-10px text-center flex-grow overflow-auto" />
       </template>
       <template v-if="val === 'blast_delta'">
         <BlastDelta class="mt-10px mb-10px" />
       </template>
+      <template v-if="val === 'fire_control'">
+        <FIreControl class="mt-10px mb-10px" />
+      </template>
+      <template v-if="val === 'fire_warn'">
+        <FIreWarn class="mt-10px mb-10px" />
+      </template>
     </template>
   </div>
 </template>
@@ -79,13 +90,16 @@
   import { useInitDevices } from '../hooks/useInit';
   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-  import MiniBoard from './miniBoard.vue';
-  import TimelineList from './timelineList.vue';
+  import MiniBoard from './MiniBoard.vue';
+  import TimelineList from './TimelineList.vue';
+  import CustomList from './CustomList.vue';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
-  import CustomChart from './customChart.vue';
+  import CustomChart from './CustomChart.vue';
   import { get } from 'lodash-es';
   import CommonTable from '../../billboard/components/CommonTable.vue';
   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import FIreWarn from './FIreWarn.vue';
+  import FIreControl from './FIreControl.vue';
 
   const props = defineProps<{
     deviceType: Config['deviceType'];
@@ -122,6 +136,9 @@
       };
     });
   });
+  const listType = computed(() => {
+    return list[0]?.type || 'A';
+  });
 
   const chartConfig = computed(() => {
     return chart[0];
@@ -142,8 +159,26 @@
     };
   });
   const tableData = computed(() => {
-    const data = selectedDevice.value;
-    return get(data, table[0]?.readFrom, []);
+    // const data = selectedDevice.value;
+    return [
+      {
+        A: '亦',
+        B: '瑞',
+      },
+      {
+        A: '眼',
+        B: '氪',
+      },
+      {
+        A: '订',
+        B: '骑',
+      },
+      {
+        A: '帧',
+        B: '剑',
+      },
+    ];
+    // return get(data, table[0]?.readFrom, []);
   });
 
   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(

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

@@ -44,11 +44,11 @@
   // import VentilateAnalysis from './components/VentilateAnalysis.vue';
   // import WorkSurface from './components/WorkSurface.vue';
   // import DeviceWarning from './components/DeviceWarning.vue';
-  import MonitorCenter from './components/monitorCenter.vue';
+  import MonitorCenter from './components/MonitorCenter.vue';
   // import { useInitConfigs } from './hooks/useInit';
   import { Config } from '../../deviceManager/configurationTable/types';
-  import ModuleEnhanced from './components/moduleEnhanced.vue';
-  import ModuleOriginal from './components/moduleOriginal.vue';
+  import ModuleEnhanced from './components/ModuleEnhanced.vue';
+  import ModuleOriginal from './components/ModuleOriginal.vue';
   import Content from './components/content.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
@@ -129,7 +129,7 @@
         list: [],
         chart: [
           {
-            type: 'line',
+            type: 'line_area',
             readFrom: 'majorpath.paths',
             xAxis: [{ prop: 'name' }],
             yAxis: [
@@ -157,7 +157,7 @@
       pageType: '',
       moduleData: {
         header: {
-          show: true,
+          show: false,
           showSelector: false,
           showSlot: true,
           selector: {
@@ -173,7 +173,8 @@
           type: 'video',
           link: '',
         },
-        layout: ['list'],
+        layout: ['fire_warn'],
+        // layout: ['list'],
         board: [],
         chart: [],
         table: [],
@@ -182,26 +183,31 @@
             label: '正常',
             prop: 'blue.val',
             color: 'blue',
+            type: 'B',
           },
           {
             label: '告警',
             prop: 'orange.val',
             color: 'orange',
+            type: 'B',
           },
           {
             label: '报警',
             prop: 'yellow.val',
             color: 'yellow',
+            type: 'B',
           },
           {
             label: '危险',
             prop: 'red.val',
             color: 'red',
+            type: 'B',
           },
           {
             label: '错误',
             prop: 'alarm.val',
             color: 'green',
+            type: 'B',
           },
         ],
       },
@@ -363,11 +369,44 @@
         chart: [],
       },
       showStyle: {
-        size: 'width:450px;height:570px;',
+        size: 'width:450px;height:280px;',
         version: 'enhanced',
         position: 'top:350px;right:0;',
       },
     },
+    {
+      deviceType: 'sys_majorpath',
+      moduleName: '测试关键路线',
+      pageType: '',
+      moduleData: {
+        header: {
+          show: false,
+          showSelector: true,
+          showSlot: true,
+          selector: {
+            prop: 'devicePos',
+          },
+          slot: {
+            prop: 'devicePos',
+          },
+        },
+        background: {
+          show: false,
+          type: 'video',
+          link: '',
+        },
+        layout: ['fire_control'],
+        board: [],
+        list: [],
+        table: [],
+        chart: [],
+      },
+      showStyle: {
+        size: 'width:450px;height:280px;',
+        version: 'enhanced',
+        position: 'top:640px;right:0;',
+      },
+    },
   ]);
   const isOriginal = true;
   const visible = ref(true);