[Wip 0000] 手动输入的评判模块开发

src/views/vent/gas/components/board/squareBoard.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="board">
+    <div class="board__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="board__value">
+      <slot name="value">
+        <div class="board__value_txt">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** label（即上侧）内容，可用slot */
+      label?: string;
+      /** value（即下侧）内容，可用slot */
+      value?: string | number;
+    }>(),
+    {
+      label: '',
+      value: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .board {
+    background-image: url('/@/assets/images/vent/gas/square-border.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 162px;
+    height: 145px;
+    text-align: center;
+    color: @white;
+    padding: 40px 0;
+  }
+
+  .board__value_txt {
+    font-size: 24px;
+    color: @vent-gas-primary-text;
+    font-style: italic;
+  }
+</style>

src/views/vent/gas/components/board/unitBoard.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="board">
+    <div class="board__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="board__value">
+      <slot name="contents">
+        <div class="flex flex-justify-around">
+          <div v-for="(ctx, i) in contents" :key="`vgcbubc-${i}`" class="board__content">
+            <div>{{ ctx.label }}</div>
+            <div class="board__content_value" :style="{ color: ctx.color }">{{ ctx.value }}</div>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** label（即上侧）内容，可用slot */
+      label?: string;
+      /** value（即下侧）内容，可用slot */
+      contents?: { label: string; value: string; color?: string }[];
+    }>(),
+    {
+      label: '',
+      contents: () => [],
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .board {
+    background-image: url('@/assets/images/vent/gas/list-wrapper.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 452px;
+    height: 145px;
+    padding: 5px;
+    text-align: center;
+    color: @white;
+  }
+
+  .board__value {
+    margin: 20px 0;
+  }
+
+  .board__content {
+    background-image: url('@/assets/images/vent/gas/list-item.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 137px;
+    height: 90px;
+    padding: 10px;
+  }
+
+  .board__content_value {
+    font-size: 20px;
+    color: @vent-gas-primary-text;
+    font-style: italic;
+  }
+</style>

src/views/vent/gas/gasPumpSetting/components/settingForm.vue

@@ -4,7 +4,14 @@
       <FormTitle icon="gas-pump" title="工作面参数" />
       <BasicForm :model="model" :schemas="workSurfaceFormSchema" @register="regWSForm" @submit="submitHandler">
         <template #input="{ model: m, field, schema }">
-          <ListItem class="w-100%" v-model:value="m[field]" type="input" :label="schema.label" bordered :label-width="200" />
+          <ListItem class="w-100%" v-model:value="m[field]" type="input" bordered :label-width="200">
+            <template #label>
+              {{ schema.label }}
+              <Tooltip v-if="schema.helpMessage" :title="schema.helpMessage">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </template>
+          </ListItem>
         </template>
       </BasicForm>
     </div>
@@ -12,7 +19,14 @@
       <FormTitle icon="pump" title="抽采单元参数" />
       <BasicForm :model="model" :schemas="extractionUnitFormSchema" @register="regEUForm" @submit="submitHandler">
         <template #input="{ model: m, field, schema }">
-          <ListItem class="w-100%" v-model:value="m[field]" type="input" :label="schema.label" bordered :label-width="200" />
+          <ListItem class="w-100%" v-model:value="m[field]" type="input" bordered :label-width="200">
+            <template #label>
+              {{ schema.label }}
+              <Tooltip v-if="schema.helpMessage" :title="schema.helpMessage">
+                <InfoCircleOutlined />
+              </Tooltip>
+            </template>
+          </ListItem>
         </template>
       </BasicForm>
     </div>
@@ -41,12 +55,13 @@
 </template>
 
 <script lang="ts" setup>
-  import { Button } from 'ant-design-vue';
+  import { Button, Tooltip } from 'ant-design-vue';
   import ListItem from '@/views/vent/gas/components/list/listItem.vue';
   import FormTitle from '@/views/vent/gas/components/form/formTitle.vue';
   import { useForm, BasicForm } from '/@/components/Form';
   import { workSurfaceFormSchema, extractionUnitFormSchema, calculationFormSchema } from '../gasPumpSetting.data';
   import { ref } from 'vue';
+  import { InfoCircleOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<{ model: Record<string, any> }>();
   const emit = defineEmits(['submit', 'calculate', 'cancel']);

src/views/vent/gas/gasPumpSetting/components/unitTable.vue

@@ -0,0 +1,107 @@
+<template>
+  <!--定义表格-->
+  <BasicTable @register="registerTable" />
+</template>
+
+<script lang="ts" name="basic-table-demo" setup>
+  import { BasicTable } from '/@/components/Table';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { UnitTableColumns } from '../gasPumpSetting.data';
+
+  const tableData = [
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+    {
+      key: '1',
+      name: '胡歌',
+      age: 32,
+      dep: '朝阳区林萃路1号',
+      ret: '朝阳区林萃路1号',
+      oba: '朝阳区林萃路1号',
+    },
+  ];
+
+  const { tableContext } = useListPage({
+    designScope: 'basic-table-demo',
+    tableProps: {
+      columns: UnitTableColumns,
+      size: 'small',
+      useSearchForm: false,
+      api: () => Promise.resolve(tableData),
+      showActionColumn: false,
+      showTableSetting: false,
+    },
+  });
+  // BasicTable绑定注册
+  const [registerTable] = tableContext;
+</script>

src/views/vent/gas/gasPumpSetting/gasPumpSetting.data.ts

@@ -1,100 +1,202 @@
 import { FormSchema } from '@/components/Form';
+import { BasicColumn } from '/@/components/Table';
 
 /** 工作面参数表单配置项 */
 export const workSurfaceFormSchema: FormSchema[] = [
   {
-    label: '钻孔长度',
-    field: 'drillLength',
+    label: '煤的灰分',
+    field: 'Ad',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: 'K1',
+    field: 'K1',
     component: 'Input',
     slot: 'input',
+    helpMessage: '围岩瓦斯涌出影响系数',
   },
   {
-    label: '钻孔方位角',
-    field: 'drillAzimuth',
+    label: 'K2',
+    field: 'K2',
     component: 'Input',
     slot: 'input',
+    helpMessage: '采区内准备巷道预排瓦斯对开采层瓦斯涌出影响系数',
   },
   {
-    label: '钻孔倾角',
-    field: 'drillDipAngle',
+    label: 'K3',
+    field: 'K3',
     component: 'Input',
     slot: 'input',
+    helpMessage: '放落煤体破碎度对放顶煤瓦斯涌出影响系数',
   },
   {
-    label: '钻孔间距',
-    field: 'drillSpace',
+    label: 'K4',
+    field: 'K4',
     component: 'Input',
     slot: 'input',
+    helpMessage: '留煤瓦斯涌出不均衡系数',
   },
   {
-    label: '抽采半径',
-    field: 'drainageRadius',
+    label: 'K5',
+    field: 'K5',
     component: 'Input',
     slot: 'input',
+    helpMessage: '综放工作面平均回采率',
   },
   {
-    label: '管路直径',
-    field: 'pipelineDiameter',
+    label: 'Kfi',
+    field: 'Kfi',
     component: 'Input',
     slot: 'input',
+    helpMessage: '分层开采第i分层瓦斯涌出影响系数,面无分层开采该值取1',
   },
   {
-    label: '残余可解吸瓦斯量',
-    field: 'residualGasDesorptionCapacity',
+    label: '煤的水分',
+    field: 'Mad',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '工作面回采率',
-    field: 'workingFaceRecoveryRate',
+    label: '标准大气压',
+    field: 'Pa',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '工作面长度',
-    field: 'workingFaceLengeh',
+    label: 'Pcy',
+    field: 'Pcy',
+    component: 'Input',
+    slot: 'input',
+    helpMessage: '煤层残余相对瓦斯压力',
+  },
+  {
+    label: 'Q',
+    field: 'Q',
+    component: 'Input',
+    slot: 'input',
+    helpMessage: '评价单元钻孔抽排瓦斯总量',
+  },
+  {
+    label: 'Qf',
+    field: 'Qf',
+    component: 'Input',
+    slot: 'input',
+    helpMessage: '下分层相对瓦斯涌出量,回采工作面无分层开采该值取0',
+  },
+  {
+    label: '吸附常数A',
+    field: 'a',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '吸附常数B',
+    field: 'b',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '煤的密度',
+    field: 'coalDensity',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '煤的厚度',
+    field: 'coalSeamThickness',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '达标含量',
+    field: 'complianceContent',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: 'daH1',
+    field: 'daH1',
+    component: 'Input',
+    slot: 'input',
+    helpMessage: '评价单元正向两端巷道瓦斯预排等值宽度',
+  },
+  {
+    label: 'daH2',
+    field: 'daH2',
+    component: 'Input',
+    slot: 'input',
+    helpMessage: '评价单元反向两端巷道瓦斯预排等值宽度',
+  },
+  {
+    label: 'daH',
+    field: 'daH',
+    component: 'Input',
+    slot: 'input',
+    helpMessage: '评价单元煤层走向长度',
+  },
+  {
+    label: '评价单元煤炭储量',
+    field: 'evaluationUnitCoalReserves',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: 'h',
+    field: 'h',
     component: 'Input',
     slot: 'input',
+    helpMessage: '邻近层与开采层垂直距离',
   },
   {
-    label: '巷道宽度',
-    field: 'tunnelWidth',
+    label: 'm',
+    field: 'm',
     component: 'Input',
     slot: 'input',
+    helpMessage: '评价单元平均煤层厚度',
   },
   {
-    label: '工作面采高',
-    field: 'workingFaceHeight',
+    label: 'm1',
+    field: 'm1',
     component: 'Input',
     slot: 'input',
+    helpMessage: '割煤高度',
   },
   {
-    label: '最低允许风速',
-    field: 'minimumAllowableWindSpeed',
+    label: 'm2',
+    field: 'm2',
     component: 'Input',
     slot: 'input',
+    helpMessage: '放顶煤高度',
   },
   {
-    label: '最大允许风速',
-    field: 'maximumAllowableWindSpeed',
+    label: '煤的孔隙率',
+    field: 'meiDeKongXiLv',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '回风流风速',
-    field: 'returnAirFlowSpeed',
+    label: '煤的容重',
+    field: 'meiDeRongZhong',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '工作面日产量',
-    field: 'workingFaceDailyOutput',
+    label: 'mi',
+    field: 'mi',
     component: 'Input',
     slot: 'input',
+    helpMessage: '第i个邻近层煤层厚度',
   },
   {
-    label: '取样深度',
-    field: 'samplingDepth',
+    label: '工作面瓦斯储量',
+    field: 'workingFaceGasReserves',
+    component: 'Input',
+    slot: 'input',
+  },
+  {
+    label: '工作面长度',
+    field: 'workingFaceLengeh',
     component: 'Input',
     slot: 'input',
   },
@@ -150,12 +252,12 @@ export const calculationFormSchema: FormSchema[] = [
     component: 'Input',
     slot: 'input',
   },
-  {
-    label: '煤的灰分',
-    field: 'Ad',
-    component: 'Input',
-    slot: 'input',
-  },
+  // {
+  //   label: '煤的灰分',
+  //   field: 'Ad',
+  //   component: 'Input',
+  //   slot: 'input',
+  // },
   {
     label: 'K1',
     field: 'K1',
@@ -180,116 +282,171 @@ export const calculationFormSchema: FormSchema[] = [
     component: 'Input',
     slot: 'input',
   },
-  {
-    label: 'Q',
-    field: 'Q',
-    component: 'Input',
-    slot: 'input',
-  },
+  // {
+  //   label: 'Q',
+  //   field: 'Q',
+  //   component: 'Input',
+  //   slot: 'input',
+  // },
+  // {
+  //   label: 'R',
+  //   field: 'R',
+  //   component: 'Input',
+  //   slot: 'input',
+  // },
+  // {
+  //   label: '吸附常数a',
+  //   field: 'a',
+  //   component: 'Input',
+  //   slot: 'input',
+  // },
+  // {
+  //   label: '吸附常数b',
+  //   field: 'b',
+  //   component: 'Input',
+  //   slot: 'input',
+  // },
+];
+
+/** 抽采单元参数表单配置项 */
+export const extractionUnitFormSchema: FormSchema[] = [
   {
     label: 'R',
     field: 'R',
     component: 'Input',
     slot: 'input',
+    helpMessage: '抽采钻孔的有效影响半径',
   },
   {
-    label: '吸附常数a',
-    field: 'a',
+    label: 'TMax',
+    field: 'TMax',
     component: 'Input',
     slot: 'input',
+    helpMessage: '预抽时间最长的钻孔抽采天数',
   },
   {
-    label: '吸附常数b',
-    field: 'b',
+    label: 'Tmin',
+    field: 'Tmin',
     component: 'Input',
     slot: 'input',
+    helpMessage: '预抽时间最短的钻孔抽采天数',
   },
-];
 
-/** 抽采单元参数表单配置项 */
-export const extractionUnitFormSchema: FormSchema[] = [
   {
-    label: '评价单元煤炭储量',
-    field: 'evaluationUnitCoalReserves',
+    label: 'W0',
+    field: 'W0',
     component: 'Input',
     slot: 'input',
+    helpMessage: '回采前煤体瓦斯含量',
   },
   {
-    label: '工作面瓦斯储量',
-    field: 'workingFaceGasReserves',
+    label: '煤的原始瓦斯含量',
+    field: 'W01',
     component: 'Input',
     slot: 'input',
   },
   {
-    label: '实时支管抽采负压',
-    field: 'currentBranchSuctionNegativePressure',
+    label: 'W0i',
+    field: 'W0i',
     component: 'Input',
     slot: 'input',
+    helpMessage: '第i个邻近层煤层原始瓦斯含量',
   },
   {
-    label: '钻孔施工长度',
-    field: 'drillWorkLength',
+    label: 'Wc',
+    field: 'Wc',
     component: 'Input',
     slot: 'input',
+    helpMessage: '运出矿井后煤的残存瓦斯含量',
   },
   {
-    label: '钻孔设计长度',
-    field: 'drillDesignLength',
+    label: 'Wci',
+    field: 'Wci',
     component: 'Input',
     slot: 'input',
+    helpMessage: '第i个邻近层煤层残存瓦斯含量	',
   },
   {
-    label: '单元原始瓦斯含量',
-    field: 'originalGasContent',
+    label: 'xiaoH1',
+    field: 'xiaoH1',
     component: 'Input',
     slot: 'input',
+    helpMessage: '评价单元走向方向两端巷道瓦斯预排等值宽度1',
   },
   {
-    label: '单元原始瓦斯压力',
-    field: 'originalGasPressure',
+    label: 'xiaoH2',
+    field: 'xiaoH2',
     component: 'Input',
     slot: 'input',
+    helpMessage: '评价单元走向方向两端巷道瓦斯预排等值宽度2',
   },
   {
-    label: '煤层厚度',
-    field: 'coalSeamThickness',
-    component: 'Input',
-    slot: 'input',
-  },
-  {
-    label: '工作面切眼长度',
-    field: 'workingFaceQieyanLength',
+    label: 'xiaoL',
+    field: 'xiaoL',
     component: 'Input',
     slot: 'input',
+    helpMessage: '评价单元抽采钻孔控制范围内煤层平均倾向长度',
   },
+];
+
+export const ManualSettingHeaderConfig = {
+  summary: {
+    title: '工作面日产量',
+    prop: 'ssss',
+  },
+  contentTemplate: {
+    titleProp: 'name',
+    items: [
+      {
+        title: '抽采纯量',
+        prop: 'am',
+      },
+      {
+        title: '预抽率',
+        prop: 'pr',
+      },
+      {
+        title: '抽采达标',
+        prop: 'sd',
+        color: 'green',
+      },
+    ],
+  },
+};
+
+export const UnitTableColumns: BasicColumn[] = [
   {
-    label: '工作面走向长度',
-    field: 'workingFaceZouxiangLength',
-    component: 'Input',
-    slot: 'input',
+    title: '评价单元',
+    dataIndex: 'name',
+    key: 'name',
+    rowSpan: 4,
+    customCell: (_, index = 0) => {
+      // 每4行合并为一列
+      if (index % 4 === 0) {
+        return { rowSpan: 4 };
+      }
+      // 这是剩下的3行，合并到上面去
+      return { rowSpan: 0 };
+    },
   },
   {
-    label: '第i个邻近层煤层厚度',
-    field: 'mi',
-    component: 'Input',
-    slot: 'input',
+    title: '取样位置',
+    dataIndex: 'age',
+    key: 'age',
   },
   {
-    label: '工作面预测相对涌出量',
-    field: 'relativeSurgeVolume',
-    component: 'Input',
-    slot: 'input',
+    title: '采样深度(m)',
+    dataIndex: 'dep',
+    key: 'dep',
   },
   {
-    label: '工作面预测绝对涌出量',
-    field: 'absoluteSurgeVolume',
-    component: 'Input',
-    slot: 'input',
+    title: '残余瓦斯含量',
+    dataIndex: 'ret',
+    key: 'ret',
   },
   {
-    label: '工作面有效配风量',
-    field: 'effectiveAirDistribution',
-    component: 'Input',
-    slot: 'input',
+    title: '可解吸瓦斯含量',
+    dataIndex: 'oba',
+    key: 'oba',
   },
 ];

src/views/vent/gas/gasPumpSetting/index copy.vue

@@ -0,0 +1,56 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <CustomHeader> 瓦斯抽采达标评判参数设置 </CustomHeader>
+  <SettingForm :model="formModel" class="mt-75px" @submit="submit" @calculate="calculate" />
+</template>
+
+<script lang="ts" setup>
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import SettingForm from './components/settingForm.vue';
+  import { getGasDrainageParamList, updateGasDrainageParam, createParam, addGasDrainageParam } from './gasPumpSetting.api';
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { onMounted } from 'vue';
+
+  const formModel = ref<any>({});
+  // 判断是否已经存在评判参数，没有的话需要新建
+  let paramsExists = true;
+
+  function refresh() {
+    getGasDrainageParamList({}).then(({ records }) => {
+      if (records[0]) {
+        formModel.value = records[0];
+      } else {
+        paramsExists = false;
+      }
+    });
+  }
+
+  function submit(formData) {
+    if (paramsExists) {
+      updateGasDrainageParam(formData).then(() => {
+        message.success('修改成功');
+        refresh();
+      });
+    } else {
+      addGasDrainageParam(formData).then(() => {
+        message.success('新建成功');
+        paramsExists = true;
+        refresh();
+      });
+    }
+  }
+
+  function calculate(formData) {
+    createParam(formData).then(() => {
+      message.success('计算成功');
+      refresh();
+    });
+  }
+
+  onMounted(() => {
+    refresh();
+  });
+</script>
+
+<style lang="less" scoped></style>

src/views/vent/gas/gasPumpSetting/manual.vue

@@ -0,0 +1,107 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <CustomHeader> 评价单元现场测定 </CustomHeader>
+  <div class="mt-75px flex p-10px overflow-y-auto">
+    <SquareBoard class="mr-20px" :label="summary.label" :value="summary.value" />
+    <!-- <div class="flex-grow-1 overflow-y-auto flex"> -->
+    <UnitBoard v-for="(unit, i) in units" :key="`vggpsmh-${i}`" class="mr-20px" :label="unit.label" :contents="unit.contents" />
+    <!-- </div> -->
+  </div>
+  <div class="flex flex-justify-around mt-20px">
+    <div class="manual__maincontent">
+      <span class="font-size-26px">现场测点布置图</span>
+    </div>
+    <div class="manual__maincontent">
+      <div class="flex flex-justify-between">
+        <div>123123123</div>
+        <div>454454544</div>
+      </div>
+      <div class="manual__mainbadge"> 未达标！呀！！！#123e69 </div>
+      <UnitTable />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import CustomHeader from '/@/components/vent/customHeader.vue';
+  import SquareBoard from '../components/board/squareBoard.vue';
+  import UnitBoard from '../components/board/unitBoard.vue';
+  import UnitTable from './components/unitTable.vue';
+  import { computed, ref } from 'vue';
+  import { ManualSettingHeaderConfig } from './gasPumpSetting.data';
+  import { onMounted } from 'vue';
+
+  const data = ref([
+    {
+      name: 'test',
+      am: 111,
+      pr: 30,
+      sd: '已达标',
+    },
+    {
+      name: 'test',
+      am: 111,
+      pr: 30,
+      sd: '已达标',
+    },
+    {
+      name: 'test',
+      am: 111,
+      pr: 30,
+      sd: '已达标',
+    },
+  ]);
+
+  const units = computed(() => {
+    const { titleProp, items } = ManualSettingHeaderConfig.contentTemplate;
+    return data.value.map((e) => {
+      return {
+        label: e[titleProp] || '/',
+        contents: items.map((item) => {
+          return {
+            label: item.title,
+            value: e[item.prop],
+            color: item.color,
+          };
+        }),
+      };
+    });
+  });
+
+  const summary = computed(() => {
+    return { label: ManualSettingHeaderConfig.summary.title, value: '123' };
+  });
+
+  onMounted(() => {});
+</script>
+
+<style lang="less" scoped>
+  .unit__summary {
+    background-image: url('/@/assets/images/vent/gas/square-border.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 162px;
+    height: 145px;
+    text-align: center;
+  }
+
+  .manual__maincontent {
+    background-image: url('/@/assets/images/vent/gas/square-border-1.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 941px;
+    height: 806px;
+    text-align: center;
+    padding: 10px;
+    color: @white;
+  }
+
+  .manual__mainbadge {
+    margin: 10px 0;
+    padding: 20px 10px;
+    text-align: center;
+    background-image: linear-gradient(to right, #123e69, #123e6955, #123e69);
+  }
+</style>