[Feat 0000]预警联动控制 皮带三级防灭火

src/assets/images/beltFire/listO1.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.603" height="17.853" viewBox="0 0 20.603 17.853">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16869" data-name="组 16869" transform="translate(-61.5 -153.9)">
+    <path id="路径_57976" data-name="路径 57976" d="M234.249,158.149m-4.249,0a4.249,4.249,0,1,0,4.249-4.249A4.249,4.249,0,0,0,230,158.149Z" transform="translate(-164.446)" fill="url(#linear-gradient)"/>
+    <path id="路径_57977" data-name="路径 57977" d="M71.839,243.44H68.5a7,7,0,0,0-7,7,2.116,2.116,0,0,0,2.115,2.115H76.323a1.66,1.66,0,0,0,1.66-1.66v-1.309A6.147,6.147,0,0,0,71.839,243.44Zm2.757-4.523a4.5,4.5,0,0,1-1.088,2.943.236.236,0,0,0,.01.318,3.234,3.234,0,1,0,.977-5.19.319.319,0,0,0-.168.395A4.428,4.428,0,0,1,74.6,238.917Z" transform="translate(0 -80.801)" fill="url(#linear-gradient)"/>
+    <path id="路径_57978" data-name="路径 57978" d="M636.312,527.5h-.934a.188.188,0,0,0-.1.349,6.334,6.334,0,0,1,3.106,5.454v1.35a1.7,1.7,0,0,1-.308.979.186.186,0,0,0,.152.294h2.223a1.536,1.536,0,0,0,1.535-1.535v-1.208A5.68,5.68,0,0,0,636.312,527.5Z" transform="translate(-559.888 -364.611)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/assets/images/beltFire/listO2.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.603" height="17.853" viewBox="0 0 20.603 17.853">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abffff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <g id="组_16870" data-name="组 16870" transform="translate(-61.5 -153.9)">
+    <path id="路径_57976" data-name="路径 57976" d="M234.249,158.149m-4.249,0a4.249,4.249,0,1,0,4.249-4.249A4.249,4.249,0,0,0,230,158.149Z" transform="translate(-164.446)" fill="url(#linear-gradient)"/>
+    <path id="路径_57977" data-name="路径 57977" d="M71.839,243.44H68.5a7,7,0,0,0-7,7,2.116,2.116,0,0,0,2.115,2.115H76.323a1.66,1.66,0,0,0,1.66-1.66v-1.309A6.147,6.147,0,0,0,71.839,243.44Zm2.757-4.523a4.5,4.5,0,0,1-1.088,2.943.236.236,0,0,0,.01.318,3.234,3.234,0,1,0,.977-5.19.319.319,0,0,0-.168.395A4.428,4.428,0,0,1,74.6,238.917Z" transform="translate(0 -80.801)" fill="url(#linear-gradient)"/>
+    <path id="路径_57978" data-name="路径 57978" d="M636.312,527.5h-.934a.188.188,0,0,0-.1.349,6.334,6.334,0,0,1,3.106,5.454v1.35a1.7,1.7,0,0,1-.308.979.186.186,0,0,0,.152.294h2.223a1.536,1.536,0,0,0,1.535-1.535v-1.208A5.68,5.68,0,0,0,636.312,527.5Z" transform="translate(-559.888 -364.611)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

src/views/vent/deviceManager/comment/warningTabel/BaseModal1Leather.vue

@@ -7,13 +7,20 @@
         <h3 class="panel-title">配置预警设备</h3>
         <div class="form-row" v-for="(item, idx) in warnList" :key="`warn-${idx}`">
           <BasicForm
-            ref="warnFormRefs"
+            :ref="(el) => setWarnFormRef(el, idx)"
             :model="item"
-            :schemas="deviceFormColumns"
+            :schemas="formSchemas"
             layout="horizontal"
             label-width="150px"
             :show-action-button-group="false"
-          />
+          >
+            <template #monitor="{ model }">
+              <div class="vent-flex-row-between">
+                <a-input :value="model.pointOptions?.[0]?.label || ''" style="width: calc(100% - 65px)" />
+                <a-button type="primary" @click="selectPoint(model)" style="position: absolute; right: 0; top: 1px">选择</a-button>
+              </div>
+            </template>
+          </BasicForm>
           <a-button type="link" normal @click="delWarnRow(idx)" :disabled="warnList.length <= 1">删除</a-button>
         </div>
         <a-button type="dashed" block @click="addWarnRow" class="setting-form__button">新增预警配置</a-button>
@@ -23,32 +30,40 @@
         <h3 class="panel-title">配置控制设备</h3>
         <div class="form-row" v-for="(item, idx) in controlList" :key="`control-${idx}`">
           <BasicForm
-            ref="controlFormRefs"
+            :ref="(el) => setControlFormRef(el, idx)"
             :model="item"
-            :schemas="deviceControlColumns"
+            :schemas="formSchemas1"
             layout="horizontal"
             label-width="120px"
             :show-action-button-group="false"
-          />
+          >
+            <template #monitor="{ model }">
+              <div class="vent-flex-row-between">
+                <a-input :value="model.pointOptions?.[0]?.label || ''" style="width: calc(100% - 65px)" />
+                <a-button type="primary" @click="selectPoint(model)" style="position: absolute; right: 0; top: 1px">选择</a-button>
+              </div>
+            </template>
+          </BasicForm>
           <a-button type="link" normal @click="delControlRow(idx, item)" :disabled="controlList.length <= 1">删除</a-button>
         </div>
         <a-button type="dashed" block @click="addControlRow" class="setting-form__button">新增控制配置</a-button>
       </div>
     </div>
   </BasicModal>
+  <DevicePointTable @register="registerPointModal" :data-source="devicePointList" @reload="setPoint" />
 </template>
+
 <script lang="ts" setup>
-import { ref, unref, toRaw } from 'vue';
+import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
+import { ref, unref, nextTick } from 'vue';
 import { BasicForm, useForm } from '/@/components/Form';
-import { BasicModal, useModalInner } from '/@/components/Modal';
 import { message } from 'ant-design-vue';
 import { deviceFormColumns, deviceControlColumns } from './warning.data';
-import { workFaceWarningDelete } from './warning.api';
-
+import { workFaceWarningDelete, workFacePointList } from './warning.api';
+import DevicePointTable from './DevicePointTable.vue';
 import type { FormSchema } from '/@/components/Form/src/types/form';
-import type { FormActionType } from '/@/components/Form'; // 引入类型定义
+import type { FormActionType } from '/@/components/Form';
 
-// ... props 和 emits 定义保持不变 ...
 const props = defineProps({
   formSchemas: {
     type: Array as PropType<FormSchema[]>,
@@ -57,19 +72,29 @@ const props = defineProps({
   deviceId: String,
   monitorType: String,
 });
-
 const emit = defineEmits(['add', 'update']);
+
+const [registerPointModal, { openModal: openPointModal }] = useModal();
+const formSchemas = deviceFormColumns({ id: String(props.deviceId) });
+const formSchemas1 = deviceControlColumns({ id: String(props.deviceId) });
+
 const title = ref('');
 const isUpdate = ref(false);
 
+// 表单Ref数组
 const warnFormRefs = ref<FormActionType[]>([]);
 const controlFormRefs = ref<FormActionType[]>([]);
+// 点位弹窗临时保存当前行
+const tempCurrentModel = ref<any>(null);
+const devicePointList = ref<any[]>([]);
 
+// 预警列表
 const warnList = ref([getEmptyWarnRow()]);
 function getEmptyWarnRow() {
   return {
     deviceType: '',
     monitorId: '',
+    pointOptions: [],
     fmax: null,
     fmin: null,
     cxTime: null,
@@ -78,33 +103,78 @@ function getEmptyWarnRow() {
     monitorType: '2',
   };
 }
+// 收集预警表单Ref
+function setWarnFormRef(el: any, index: number) {
+  if (el) warnFormRefs.value[index] = el;
+}
 function addWarnRow() {
   warnList.value.push(getEmptyWarnRow());
+  warnFormRefs.value.push(null);
 }
-function delWarnRow(idx) {
+function delWarnRow(idx: number) {
   if (warnList.value.length <= 1) return message.warning('至少保留一行');
   warnList.value.splice(idx, 1);
+  warnFormRefs.value.splice(idx, 1);
 }
 
+// 控制列表
 const controlList = ref([getEmptyControlRow()]);
 function getEmptyControlRow() {
   return {
     deviceType: '',
     monitorId: '',
+    pointOptions: [],
     value: '',
     orderNum: null,
     remark: '',
     monitorType: '1',
   };
 }
+// 收集控制表单Ref
+function setControlFormRef(el: any, index: number) {
+  if (el) controlFormRefs.value[index] = el;
+}
 function addControlRow() {
   controlList.value.push(getEmptyControlRow());
+  controlFormRefs.value.push(null);
 }
-async function delControlRow(idx, record) {
+async function delControlRow(idx: number, record: any) {
   if (controlList.value.length <= 1) return message.warning('至少保留一行');
   controlList.value.splice(idx, 1);
-  console.log(record, '111111');
-  // await workFaceWarningDelete({ id: record.id });
+  controlFormRefs.value.splice(idx, 1);
+  await workFaceWarningDelete({ id: record.id });
+}
+
+// 获取点位列表
+async function getDevicePointList(strtype: string) {
+  try {
+    const result = await workFacePointList({ deviceType: strtype, valueTypes: props.monitorType });
+    devicePointList.value = result;
+  } catch (error) {
+    devicePointList.value = [];
+  }
+}
+
+// 打开点位选择弹窗
+async function selectPoint(model: any) {
+  if (!model.strtype) {
+    message.info('请先选择设备！');
+    return;
+  }
+  // 缓存当前编辑行
+  tempCurrentModel.value = model;
+  await getDevicePointList(model.strtype);
+  openPointModal(true, { deviceType: model.strtype });
+}
+
+// 选中点位回填到当前行
+function setPoint(value: any[]) {
+  if (!value || !value.length || !tempCurrentModel.value) return;
+  const data = value[0];
+  const model = tempCurrentModel.value;
+  // 赋值当前行
+  model.monitorId = data.id;
+  model.pointOptions = [{ value: data.id, label: data.valuename }];
 }
 
 const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }] = useForm({
@@ -114,71 +184,113 @@ const [registerForm, { resetFields, setFieldsValue, validate, getFieldsValue }]
 
 const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
   isUpdate.value = unref(data.isUpdate);
-  title.value = data.isUpdate ? '编辑' : '新增';
   await resetFields();
+  title.value = data.isUpdate ? '编辑' : '新增';
+
   warnFormRefs.value = [];
   controlFormRefs.value = [];
+  tempCurrentModel.value = null;
+
   if (data.isUpdate && data.record) {
     await setFieldsValue(data.record);
     const allAlarms = data.record.alarmList || [];
-    // 预警设备 monitorType 2
-    const warnings = allAlarms.filter((item: any) => String(item.monitorType) === '1');
-    // 控制设备 monitorType 1
-    const controls = allAlarms.filter((item: any) => String(item.monitorType) === '2');
+    const warnings = allAlarms.filter((item: any) => String(item.monitorType) === '2');
+    const controls = allAlarms.filter((item: any) => String(item.monitorType) === '1');
     warnList.value = warnings.length ? warnings : [getEmptyWarnRow()];
     controlList.value = controls.length ? controls : [getEmptyControlRow()];
   } else {
     warnList.value = [getEmptyWarnRow()];
     controlList.value = [getEmptyControlRow()];
   }
+
+  if (data.type === 'devicePoint') {
+    title.value = unref(data.title);
+    if (data.record) {
+      await getDevicePointList(data.record['deviceType']);
+      devicePointList.value.forEach((item) => {
+        if (item.id == data.record.monitorId) {
+          const model = data.record;
+          model.monitorId = item.id;
+          model.pointOptions = [{ value: item.id, label: item.valuename }];
+        }
+      });
+      await setFieldsValue({ ...data.record });
+    }
+  }
 });
+
+// 提交
+// 提交
 async function onSubmit() {
+  setModalProps({ confirmLoading: true });
   try {
     const baseForm = await getFieldsValue();
-    await validate();
-    setModalProps({ confirmLoading: true });
-    // 1. 获取警告表单值 + 追加 monitorType:2 + 过滤空 deviceType
-    const warnValues = await Promise.all(unref(warnFormRefs).map((formRef) => formRef.getFieldsValue()));
-    //添加类型 + 过滤
-    const processedWarn = warnValues
-      .map((item) => ({
-        ...item,
-        monitorType: 2,
-      }))
-      .filter((item) => item.deviceType !== '');
-
-    // 2. 获取控制表单值 + 追加 monitorType:1 + 过滤空 deviceType
-    const controlValues = await Promise.all(unref(controlFormRefs).map((formRef) => formRef.getFieldsValue()));
-    const processedControl = controlValues
-      .map((item) => ({
-        ...item,
-        monitorType: 1,
-      }))
-      .filter((item) => item.deviceType !== '');
-    console.log(processedControl, '控制设备处理后');
-    console.log(processedWarn, '警告设备处理后');
-    // 最终提交数据
+
+    // 获取预警数据
+    const warnValues = [];
+    for (const form of warnFormRefs.value) {
+      if (form) {
+        const val = await form.getFieldsValue();
+        delete val.pointOptions;
+        if (val.strtype) {
+          val.deviceType = val.strtype;
+        }
+        delete val.strtype;
+        const deviceId = Array.isArray(val.deviceId) ? val.deviceId[0] : val.deviceId || '';
+        if (!deviceId) continue;
+        warnValues.push({
+          ...val,
+          monitorType: 2,
+          deviceId: deviceId,
+        });
+      }
+    }
+
+    // 获取控制数据
+    const controlValues = [];
+    for (const form of controlFormRefs.value) {
+      if (form) {
+        const val = await form.getFieldsValue();
+        delete val.pointOptions;
+
+        if (val.strtype) {
+          val.deviceType = val.strtype;
+        }
+        delete val.strtype;
+        const deviceId = Array.isArray(val.deviceId) ? val.deviceId[0] : val.deviceId || '';
+        if (!deviceId) continue;
+
+        controlValues.push({
+          ...val,
+          monitorType: 1,
+          deviceId: deviceId,
+        });
+      }
+    }
+
     const submitData = {
       ...baseForm,
-      alarmList: [...processedWarn, ...processedControl],
+      alarmList: [...warnValues, ...controlValues],
     };
+
     if (!isUpdate.value) {
-      emit('add', 'add', submitData);
+      emit('add', submitData);
     } else {
-      emit('update', 'update', submitData);
+      emit('update', submitData);
     }
 
     closeModal();
   } catch (error) {
-    console.error('表单验证失败:', error);
+    console.error('提交异常：', error);
+    message.error('提交失败，请检查表单');
   } finally {
     setModalProps({ confirmLoading: false });
   }
 }
 </script>
+
 <style lang="less" scoped>
 @import '/@/design/theme.less';
-@import '/@/design/theme.less';
 
 .setting-form {
   padding: 0 20px;

src/views/vent/deviceManager/comment/warningTabel/indexLeather.vue

@@ -12,7 +12,15 @@
         </a-popconfirm>
       </template>
     </BasicTable>
-    <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :destroy-on-close="true" :form-schemas="workFaceWarningSchemas"> </BaseModal>
+    <BaseModal
+      @register="register"
+      @add="onSubmit"
+      :deviceId="props.deviceId"
+      @update="onSubmit"
+      :destroy-on-close="true"
+      :form-schemas="workFaceWarningSchemas"
+    >
+    </BaseModal>
   </div>
 </template>
 
@@ -81,23 +89,25 @@ async function handleDelete(record) {
   await warningLogDeleteById(record.id);
 }
 
-async function onSubmit(flag, values) {
-  console.log(values, '1111');
-  // 提交数据弹窗
-  if (flag == 'update') {
-    await warningLogEdit(values);
+async function onSubmit(values) {
+  // 自动判断是新增还是编辑
+  const isUpdate = !!values.id;
+  if (isUpdate) {
+    // 编辑模式
+    if (values.alarmType === 'belt_part_warn') {
+      await warningLogAddLeather({ ...values, sysId: props.deviceId, id: values.id });
+    } else {
+      await warningLogEdit(values);
+    }
   } else {
+    // 新增模式
     if (values.alarmType === 'belt_part_warn') {
-      // 调用第二个接口
       await warningLogAddLeather({ ...values, sysId: props.deviceId });
     } else {
-      // 调用默认接口
       await warningLogAdd({ ...values, sysId: props.deviceId });
     }
-    // await warningLogAdd({ ...values, sysId: props.deviceId });
   }
   closeModal();
-  //刷新列表
   reload();
 }
 

src/views/vent/deviceManager/comment/warningTabel/warning.data.ts

@@ -325,7 +325,7 @@ export const workFaceWarningFormSchemasLeather: FormSchema[] = [
     required: true,
   },
   {
-    label: '分区数',
+    label: '分区总数',
     field: 'partNum',
     component: 'Input',
   },
@@ -352,110 +352,139 @@ export const workFaceWarningFormSchemasLeather: FormSchema[] = [
     componentProps: { dictCode: 'kindtype' },
   },
 ];
-export const deviceFormColumns: FormSchema[] = [
-  {
-    label: '设备',
-    field: 'deviceType',
-    component: 'MTreeSelect',
-    componentProps: {
-      isSearch: false,
+export const deviceFormColumns = (param) =>
+  <FormSchema[]>[
+    {
+      label: '设备名称',
+      field: 'deviceId',
+      component: 'ApiSelect',
+      required: true,
+      componentProps: ({ formModel }) => {
+        return {
+          api: workFaceDeviceList.bind(null, param),
+          labelField: 'strname',
+          valueField: 'id',
+          onChange: (e, option) => {
+            if (option) formModel['strtype'] = option['strtype'];
+          },
+        };
+      },
     },
-    colProps: { span: 12 },
-  },
-  {
-    label: '报警下限值',
-    field: 'fmin',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-  {
-    label: '报警上限值',
-    field: 'fmax',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-  {
-    label: '报警持续时间(s)',
-    field: 'cxTime',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-  {
-    label: '数据趋势',
-    field: 'dataTrend',
-    component: 'JDictSelectTag',
-    componentProps: {
-      dictCode: 'dataTrend',
-      placeholder: '请选择数据趋势',
+    {
+      label: '点位',
+      field: 'monitorId',
+      component: 'Select',
+      slot: 'monitor',
     },
-    colProps: { span: 12 },
-  },
-  {
-    label: '数据趋势持续时间',
-    field: 'trendCxTime',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-  {
-    label: '数据趋势持续时间单位',
-    field: 'trendCxTimeUnit',
-    component: 'Select',
-    componentProps: {
-      options: [
-        {
-          label: '分钟',
-          value: '0',
-        },
-        {
-          label: '小时',
-          value: '1',
-        },
-      ],
+    {
+      label: '报警下限值',
+      field: 'fmin',
+      component: 'InputNumber',
+      colProps: { span: 12 },
     },
-    colProps: { span: 12 },
-  },
-  {
-    label: '持续范围下限值',
-    field: 'trendMin',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-  {
-    label: '持续范围上限值',
-    field: 'trendMax',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-];
-export const deviceControlColumns: FormSchema[] = [
-  {
-    label: '设备类型',
-    field: 'deviceType',
-    component: 'MTreeSelect',
-    componentProps: {
-      isSearch: false,
+    {
+      label: '报警上限值',
+      field: 'fmax',
+      component: 'InputNumber',
+      colProps: { span: 12 },
     },
-    colProps: { span: 12 },
-  },
-  {
-    label: '值',
-    field: 'value',
-    component: 'Input',
-    colProps: { span: 12 },
-  },
-  {
-    label: '执行顺序',
-    field: 'orderNum',
-    component: 'InputNumber',
-    colProps: { span: 12 },
-  },
-  {
-    label: '操作描述',
-    field: 'remark',
-    component: 'Input',
-    colProps: { span: 12 },
-  },
-];
+    {
+      label: '报警持续时间(s)',
+      field: 'cxTime',
+      component: 'InputNumber',
+      colProps: { span: 12 },
+    },
+    {
+      label: '数据趋势',
+      field: 'dataTrend',
+      component: 'JDictSelectTag',
+      componentProps: {
+        dictCode: 'dataTrend',
+        placeholder: '请选择数据趋势',
+      },
+      colProps: { span: 12 },
+    },
+    {
+      label: '数据趋势持续时间',
+      field: 'trendCxTime',
+      component: 'InputNumber',
+      colProps: { span: 12 },
+    },
+    {
+      label: '数据趋势持续时间单位',
+      field: 'trendCxTimeUnit',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '分钟',
+            value: '0',
+          },
+          {
+            label: '小时',
+            value: '1',
+          },
+        ],
+      },
+      colProps: { span: 12 },
+    },
+    {
+      label: '持续范围下限值',
+      field: 'trendMin',
+      component: 'InputNumber',
+      colProps: { span: 12 },
+    },
+    {
+      label: '持续范围上限值',
+      field: 'trendMax',
+      component: 'InputNumber',
+      colProps: { span: 12 },
+    },
+  ];
+export const deviceControlColumns = (param) =>
+  <FormSchema[]>[
+    {
+      label: '设备名称',
+      field: 'deviceId',
+      component: 'ApiSelect',
+      required: true,
+      componentProps: ({ formModel }) => {
+        return {
+          api: workFaceDeviceList.bind(null, param),
+          labelField: 'strname',
+          valueField: 'id',
+          mode: undefined,
+          onChange: (e, option) => {
+            if (option) formModel['strtype'] = option['strtype'];
+          },
+        };
+      },
+    },
+    {
+      label: '点位',
+      field: 'monitorId',
+      component: 'Select',
+      slot: 'monitor',
+    },
+    {
+      label: '值',
+      field: 'value',
+      component: 'Input',
+      colProps: { span: 12 },
+    },
+    {
+      label: '执行顺序',
+      field: 'orderNum',
+      component: 'InputNumber',
+      colProps: { span: 12 },
+    },
+    {
+      label: '操作描述',
+      field: 'remark',
+      component: 'Input',
+      colProps: { span: 12 },
+    },
+  ];
 export const manageWarningPointColumns: BasicColumn[] = [
   {
     title: '设备名称',

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

@@ -226,7 +226,8 @@ export interface ModuleDataList extends ReadFrom {
     | 'Q'
     | 'R'
     | 'S'
-    | 'T';
+    | 'T'
+    | 'U';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */

src/views/vent/home/configurable/belt/belt-new.vue

@@ -62,7 +62,7 @@ import ModuleCommonDual from './components/ModuleCommonDual.vue';
 import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
 import BeltNav from './components/BeltNav.vue';
 import { useRouter, useRoute } from 'vue-router';
-import { getSystem, getMonitorAndAlertBelt, getWarnInfo, getDevice, getDataHome, getWarnResult } from './configurable.api';
+import { getSystem, getMonitorAndAlertBelt, getWarnInfo, getDevice, getDataHome, getWarnResult, getStaffInfo } from './configurable.api';
 import { modalAnimate } from './threejs/belt.threejs';
 import History from './components/detail/history.vue';
 import sys from '/@/locales/lang/en/sys';
@@ -123,7 +123,9 @@ interface WarnResult {
   tempRange?: string;
   tempTrend?: string;
   hclRange?: string;
+  warnCtrl?: string;
 }
+// 处理预警指标展示数据格式
 function groupWarnByType(data: any) {
   const result: WarnResult[] = [];
 
@@ -131,35 +133,56 @@ function groupWarnByType(data: any) {
   Object.keys(data).forEach((warnKey) => {
     const list = data[warnKey] || [];
     const warnName = warnTypeMap[warnKey as keyof typeof warnTypeMap];
-
+    function getWarnCtrlByWarnName(warnName) {
+      if (warnName === '黄色预警(较大风险)') return '预警';
+      if (warnName === '橙色预警(重大风险)') return '报警启动喷淋';
+      if (warnName === '红色预警(特别重大风险)') return '启动喷淋与排烟';
+      return '';
+    }
     // 构建当前预警对象
     const warnObj: WarnResult = { warnName };
-
+    warnObj.warnCtrl = getWarnCtrlByWarnName(warnName);
     list.forEach((item: any) => {
       const { deviceType, fmin, fmax, trendMin, trendMax, trendCxTimeUnit } = item;
       // CO
       if (deviceType === 'modelsensor_co') {
         if (fmin != null && fmax != null) {
           warnObj.coRange = `${fmin} - ${fmax}`;
-        } else if (trendMin != null && trendMax != null) {
-          warnObj.coTrend = `${trendMin} - ${trendMax}`;
+        } else if (fmin != null && fmax == null) {
+          warnObj.coRange = `> ${fmin}`;
+        }
+        // 处理变化率（原来的逻辑不动）
+        else if (trendMin != null && trendMax != null) {
+          if (warnName === '黄色预警(较大风险)') {
+            warnObj.coTrend = `加速上升(${trendMin} - ${trendMax})`;
+          } else if (warnName === '橙色预警(重大风险)') {
+            warnObj.coTrend = `急剧上升(${trendMin} - ${trendMax})`;
+          } else if (warnName === '红色预警(特别重大风险)') {
+            warnObj.coTrend = `极端上升(${trendMin} - ${trendMax})`;
+          }
+        } else if (trendMin != null && trendMax == null) {
+          warnObj.coTrend = `极端上升>${trendMin}`;
         }
       }
       // 温度（带单位）
       else if (deviceType === 'modelsensor_temperature') {
         if (fmin != null && fmax != null) {
           warnObj.tempRange = `${fmin} - ${fmax}℃`;
+        } else if (fmin != null && fmax == null) {
+          warnObj.tempRange = `≥ ${fmin}℃(持续高温)`;
         } else if (trendMin != null) {
           let unit = '';
           if (trendCxTimeUnit === 0) unit = '分钟';
           if (trendCxTimeUnit === 1) unit = '小时';
-          warnObj.tempTrend = `>${trendMin}℃ +${unit}`;
+          warnObj.tempTrend = `>+${trendMin}℃ /${unit}`;
         }
       }
       // HCL
       else if (deviceType === 'modelsensor_hcl') {
         if (fmin != null && fmax != null) {
           warnObj.hclRange = `${fmin} - ${fmax}`;
+        } else if (fmin != null && fmax == null) {
+          warnObj.hclRange = `≥ ${fmin}`;
         }
       }
     });
@@ -182,6 +205,7 @@ async function refresh() {
     monitorType: 2,
   };
   const warnInfo = await getWarnInfo(params);
+  const staffInfo = await getStaffInfo({ sysId: optionValue.value });
   Object.assign(modalRes, resSys);
   if (pageType.value == 'fire_risk_warn') {
     configs.value = [...testBeltNew];
@@ -191,6 +215,9 @@ async function refresh() {
       alarmLevel: '102,103,104',
     };
     const resWarn = await getMonitorAndAlertBelt(params);
+    resWarn.warnInfo = groupWarnByType(warnInfo);
+    console.log(resWarn.warnInfo, '111111111');
+    resWarn.staffInfo = staffInfo;
     updateData(resWarn);
     Object.assign(modalRes, resWarn);
   } else if (pageType.value == 'emergencyControl') {
@@ -205,7 +232,7 @@ async function refresh() {
       data.value.warn_result = alarmRes.warn_result;
     }
     data.value.warnInfo = groupWarnByType(warnInfo);
-    console.log(data.value, '11111111');
+    data.value.staffInfo = staffInfo;
     updateData(data.value);
   } else if (pageType.value == 'sprayControl') {
     updateData(resSys);
@@ -214,6 +241,7 @@ async function refresh() {
       alarmLevel: '103,104',
     };
     const sprayData = [];
+    const dustData = [];
     if (data.value?.deviceInfo) {
       // 遍历对象的所有 value
       Object.values(data.value.deviceInfo).forEach((item) => {
@@ -222,8 +250,17 @@ async function refresh() {
           sprayData.push({ ...item, ...item.readData });
         }
       });
+      Object.values(data.value.deviceInfo).forEach((item) => {
+        const hasDustAuto = item.type && item.type.toLowerCase().includes('dustdev');
+        if (hasDustAuto) {
+          dustData.push({ ...item, ...item.readData });
+        }
+      });
     }
     data.value.sprayData = sprayData;
+    data.value.dustData = dustData;
+    data.value.warnInfo = groupWarnByType(warnInfo);
+    data.value.staffInfo = staffInfo;
     const alarmRes = await getWarnResult(params1);
     if (alarmRes.warn_result) {
       data.value.warn_result = alarmRes.warn_result;
@@ -251,7 +288,6 @@ async function changePage(pageTypeStr) {
   await nextTick();
   await refresh();
 }
-
 // watch(
 //   // 监听动态路由参数 :type
 //   () => route.params.type,

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

@@ -19,6 +19,8 @@ enum Api {
   getWarnResult = '/ventanaly-device/monitor/disaster/beltAlertRecords',
   // 预警指标信息获取
   getWarnInfo = '/ventanaly-device/monitor/disaster/findAlarmsBySystemAndMonitorType',
+  // 获取人员定位信息
+  findStaffInfoBySystem = '/ventanaly-device/monitor/disaster/findStaffInfoBySystem',
 }
 export const getSystem = (params) => defHttp.post({ url: Api.getSystem, params });
 export const getMonitorAndAlertBelt = (params) => defHttp.post({ url: Api.monitorAndAlertBelt, params });
@@ -28,3 +30,4 @@ export const changeStatus = (params) => defHttp.get({ url: Api.changeStatus, par
 export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });
 export const getWarnResult = (params) => defHttp.post({ url: Api.getWarnResult, params });
 export const getWarnInfo = (params) => defHttp.post({ url: Api.getWarnInfo, params });
+export const getStaffInfo = (params) => defHttp.post({ url: Api.findStaffInfoBySystem, params });

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

@@ -536,7 +536,7 @@ export const testBeltNew: Config[] = [
 
   // ==================== 中央中部：预警结果列表 ====================
   {
-    deviceType: 'warn_result',
+    deviceType: '',
     moduleName: '预警结果',
     pageType: 'fireMonitorMid',
     moduleData: {
@@ -560,9 +560,13 @@ export const testBeltNew: Config[] = [
       layout: {
         direction: 'column',
         items: [
+          {
+            name: 'list',
+            basis: '20%',
+          },
           {
             name: 'warning_result',
-            basis: '100%',
+            basis: '80%',
           },
         ],
       },
@@ -571,7 +575,27 @@ export const testBeltNew: Config[] = [
       gallery: [],
       gallery_list: [],
       table: [],
-      list: [],
+      list: [
+        {
+          type: 'U',
+          readFrom: 'staffInfo',
+          pagetype: '',
+          items: [
+            {
+              label: '进风侧人数',
+              value: '${inStaff.num}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '回风侧人数',
+              value: '${outStaff.num}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
       complex_list: [],
       preset: [
         {
@@ -602,15 +626,14 @@ export const testBeltNew: Config[] = [
             {
               name: '操作',
               prop: 'action',
-              render: (row: any) => {
-                return `<button class="btn-start-spray">执行预案</button>`;
-              },
+              width: '80px',
+            },
+            {
+              name: '是否按预案执行',
+              prop: 'isPlanned',
+              width: '180px',
             },
           ],
-          otherProps: {
-            title: '火灾风险预警',
-            prop: 'status',
-          },
         },
       ],
     },
@@ -667,32 +690,32 @@ export const testBeltNew: Config[] = [
           columns: [
             {
               name: '级别名称',
-              prop: 'warnType',
+              prop: 'warnName',
               width: '180px',
             },
             {
               name: 'CO浓度(ppm)',
-              prop: 'fmin fmax',
+              prop: 'coRange',
               width: '180px',
             },
             {
               name: '温度(环境)',
-              prop: 'status',
+              prop: 'tempRange',
               width: '180px',
             },
             {
               name: 'CO变化率(ppm/min)',
-              prop: 'trendMmin trendMax',
+              prop: 'coTrend',
               width: '220px',
             },
             {
               name: 'HCL浓度(ppm)',
-              prop: 'trendMmin trendMax',
+              prop: 'hclRange',
               width: '180px',
             },
             {
               name: '设备升温(△T/△t)',
-              prop: 'trendMmin trendMax',
+              prop: 'tempTrend',
               width: '180px',
             },
             {
@@ -702,14 +725,10 @@ export const testBeltNew: Config[] = [
             },
             {
               name: '操作',
-              prop: 'warnType',
+              prop: 'warnCtrl',
               width: '180px',
             },
           ],
-          otherProps: {
-            title: '火灾风险预警',
-            prop: 'status',
-          },
         },
       ],
     },
@@ -846,7 +865,7 @@ export const testSpary: Config[] = [
     pageType: 'beltYjkf1',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,
@@ -854,7 +873,7 @@ export const testSpary: Config[] = [
         },
         slot: {
           show: false,
-          value: '短路风门管控详情',
+          value: '',
           trans: {},
         },
       },
@@ -868,7 +887,11 @@ export const testSpary: Config[] = [
         items: [
           {
             name: 'sprayCtrl',
-            basis: '100%',
+            basis: '20%',
+          },
+          {
+            name: 'sprayCtrl',
+            basis: '80%',
           },
         ],
       },
@@ -880,6 +903,36 @@ export const testSpary: Config[] = [
       list: [],
       complex_list: [],
       preset: [
+        {
+          readFrom: 'dustData[0].datalist',
+          type: 'C',
+          deviceType: 'dust',
+          config: [
+            {
+              title: 'strinstallpos',
+              contentTop: [
+                {
+                  label: '设备名称',
+                  code: '${strname}',
+                },
+                {
+                  label: '设备位置',
+                  code: '${strinstallpos}',
+                },
+              ],
+              contents: [
+                {
+                  label: '运行状态',
+                  code: '${readData.openStatus}',
+                  trans: {
+                    0: '关闭',
+                    1: '打开',
+                  },
+                },
+              ],
+            },
+          ],
+        },
         {
           readFrom: 'sprayData[0].datalist',
           type: 'C',
@@ -888,7 +941,7 @@ export const testSpary: Config[] = [
               title: 'strinstallpos',
               contentTop: [
                 {
-                  label: '皮带区域',
+                  label: '设备名称',
                   code: '${strname}',
                 },
                 {
@@ -913,10 +966,6 @@ export const testSpary: Config[] = [
                     1: '正常',
                   },
                 },
-                {
-                  label: '水量',
-                  code: '${readData.volume}',
-                },
                 {
                   label: '水压',
                   code: '${readData.MPa}',
@@ -926,67 +975,6 @@ export const testSpary: Config[] = [
           ],
         },
       ],
-      // mock: {
-      //   plmhInfo: [
-      //     {
-      //       id: '1',
-      //       beltName: '1#皮带区域',
-      //       beltData: [
-      //         {
-      //           sid: '1',
-      //           beltArea: '1#皮带区域',
-      //           devicePosition: '1#皮带-50m处',
-      //           netStatus: '1',
-      //           runStatus: '1',
-      //           waterVolume: '0.0',
-      //           waterPressure: '0.0 Mpa',
-      //         },
-      //         {
-      //           sid: '2',
-      //           beltArea: '1#皮带区域',
-      //           devicePosition: '1#皮带-100m处',
-      //           netStatus: '1',
-      //           runStatus: '1',
-      //           waterVolume: '0.0',
-      //           waterPressure: '0.0 Mpa',
-      //         },
-      //         {
-      //           sid: '3',
-      //           beltArea: '1#皮带区域',
-      //           devicePosition: '1#皮带-150m处',
-      //           netStatus: '1',
-      //           runStatus: '1',
-      //           waterVolume: '0.0',
-      //           waterPressure: '0.0 Mpa',
-      //         },
-      //       ],
-      //     },
-      //     {
-      //       id: '2',
-      //       beltName: '2#皮带区域',
-      //       beltData: [
-      //         {
-      //           sid: '4',
-      //           beltArea: '2#皮带区域',
-      //           devicePosition: '2#皮带-50m处',
-      //           netStatus: '1',
-      //           runStatus: '1',
-      //           waterVolume: '0.0',
-      //           waterPressure: '0.0 Mpa',
-      //         },
-      //         {
-      //           sid: '5',
-      //           beltArea: '2#皮带区域',
-      //           devicePosition: '2#皮带-100m处',
-      //           netStatus: '1',
-      //           runStatus: '1',
-      //           waterVolume: '0.0',
-      //           waterPressure: '0.0 Mpa',
-      //         },
-      //       ],
-      //     },
-      //   ],
-      // },
     },
     showStyle: {
       size: 'width:440px;height:820px;',
@@ -1057,7 +1045,7 @@ export const testSpary: Config[] = [
     },
   },
   {
-    deviceType: 'warn_result',
+    deviceType: '',
     moduleName: '预警结果',
     pageType: 'fireMonitorMid',
     moduleData: {
@@ -1081,9 +1069,13 @@ export const testSpary: Config[] = [
       layout: {
         direction: 'column',
         items: [
+          {
+            name: 'list',
+            basis: '20%',
+          },
           {
             name: 'warning_result',
-            basis: '100%',
+            basis: '80%',
           },
         ],
       },
@@ -1092,7 +1084,27 @@ export const testSpary: Config[] = [
       gallery: [],
       gallery_list: [],
       table: [],
-      list: [],
+      list: [
+        {
+          type: 'U',
+          readFrom: 'staffInfo',
+          pagetype: '',
+          items: [
+            {
+              label: '进风侧人数',
+              value: '${inStaff.num}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '回风侧人数',
+              value: '${outStaff.num}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
       complex_list: [],
       preset: [
         {
@@ -1123,15 +1135,14 @@ export const testSpary: Config[] = [
             {
               name: '操作',
               prop: 'action',
-              render: (row: any) => {
-                return `<button class="btn-start-spray">执行预案</button>`;
-              },
+              width: '80px',
+            },
+            {
+              name: '是否按预案执行',
+              prop: 'isPlanned',
+              width: '180px',
             },
           ],
-          otherProps: {
-            title: '火灾风险预警',
-            prop: 'status',
-          },
         },
       ],
     },
@@ -1187,33 +1198,33 @@ export const testSpary: Config[] = [
           columns: [
             {
               name: '级别名称',
-              prop: 'warnType',
+              prop: 'warnName',
               width: '180px',
             },
             {
               name: 'CO浓度(ppm)',
-              prop: 'fmin fmax',
+              prop: 'coRange',
               width: '180px',
             },
             {
               name: '温度(环境)',
-              prop: 'status',
+              prop: 'tempRange',
               width: '180px',
             },
             {
               name: 'CO变化率(ppm/min)',
-              prop: 'trendMmin trendMax',
+              prop: 'coTrend',
               width: '220px',
             },
             {
               name: 'HCL浓度(ppm)',
-              prop: 'trendMmin trendMax',
+              prop: 'hclRange',
               width: '180px',
             },
             {
               name: '设备升温(△T/△t)',
-              prop: 'trendMmin trendMax',
-              width: '180px',
+              prop: 'tempTrend',
+              width: '220px',
             },
             {
               name: '其他',
@@ -1222,14 +1233,10 @@ export const testSpary: Config[] = [
             },
             {
               name: '操作',
-              prop: 'warnType',
+              prop: 'warnCtrl',
               width: '180px',
             },
           ],
-          otherProps: {
-            title: '火灾风险预警',
-            prop: 'status',
-          },
         },
       ],
     },
@@ -1387,7 +1394,7 @@ export const testYjkf: Config[] = [
     },
   },
   {
-    deviceType: 'warn_result',
+    deviceType: '',
     moduleName: '预警结果',
     pageType: 'fireMonitorMid',
     moduleData: {
@@ -1411,9 +1418,13 @@ export const testYjkf: Config[] = [
       layout: {
         direction: 'column',
         items: [
+          {
+            name: 'list',
+            basis: '20%',
+          },
           {
             name: 'warning_result',
-            basis: '100%',
+            basis: '80%',
           },
         ],
       },
@@ -1422,7 +1433,27 @@ export const testYjkf: Config[] = [
       gallery: [],
       gallery_list: [],
       table: [],
-      list: [],
+      list: [
+        {
+          type: 'U',
+          readFrom: 'staffInfo',
+          pagetype: '',
+          items: [
+            {
+              label: '进风侧人数',
+              value: '${inStaff.num}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '回风侧人数',
+              value: '${outStaff.num}',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
       complex_list: [],
       preset: [
         {
@@ -1443,6 +1474,7 @@ export const testYjkf: Config[] = [
             {
               name: '预警类型',
               prop: 'status',
+              width: '80px',
             },
             {
               name: '处置意见',
@@ -1452,15 +1484,14 @@ export const testYjkf: Config[] = [
             {
               name: '操作',
               prop: 'action',
-              render: (row: any) => {
-                return `<button class="btn-start-spray">执行预案</button>`;
-              },
+              width: '80px',
+            },
+            {
+              name: '是否按预案执行',
+              prop: 'isPlanned',
+              width: '180px',
             },
           ],
-          otherProps: {
-            title: '火灾风险预警',
-            prop: 'status',
-          },
         },
       ],
     },
@@ -1551,7 +1582,7 @@ export const testYjkf: Config[] = [
             },
             {
               name: '操作',
-              prop: '',
+              prop: 'warnCtrl',
               width: '180px',
             },
           ],

src/views/vent/home/configurable/components/belt/ComplexList1Belt.vue

@@ -52,14 +52,9 @@ const activeItem = ref(0);
 
 // 预警映射表
 const alarmMap: Record<string | number | null, string> = {
-  '101': '绿色预警',
-  '102': '蓝色预警',
-  '103': '黄色预警',
-  '104': '橙色预警',
-  '201': '报警',
-  '0': '正常',
-  '1001': '网络中断',
-  null: '正常',
+  '102': '黄色预警',
+  '103': '橙色预警',
+  '104': '红色预警',
 };
 
 // 获取背景样式
@@ -92,13 +87,9 @@ const handleItemClick = (ctx) => {
 
 // 获取预警名称
 const getAlertName = (riskLevel: string | number | null) => {
-  // 空值：null / undefined / 空字符串 → 正常
-  if (riskLevel === null || riskLevel === undefined || riskLevel === '') {
-    return '正常';
-  }
-  return alarmMap[riskLevel] || '正常';
+  const key = String(riskLevel);
+  return alarmMap[key] || '正常';
 };
-
 onMounted(() => {});
 </script>
 

src/views/vent/home/configurable/components/belt/ExecutePlan.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="modal-overlay" @click.self="close">
+    <div class="modal-container">
+      <div class="dialog-header">
+        <h3>执行预案</h3>
+      </div>
+      <div class="dialog-body">
+        <!-- 展示设备列表 -->
+        <div class="device-list" v-if="data && data.length">
+          <div class="device-item" v-for="item in data" :key="item.id"> {{ item.devicePos }} - {{ item.monitorName }} </div>
+        </div>
+
+        <div class="password-box">
+          <span>授权密码：</span>
+          <input v-model="password" type="password" placeholder="请输入操作密码" @keyup.enter="confirm" />
+        </div>
+      </div>
+      <div class="dialog-footer">
+        <a-button @click="close">取消</a-button>
+        <a-button type="primary" @click="confirm">确认执行</a-button>
+      </div>
+      <div class="close-btn" @click="close">
+        <img src="@/assets/images/beltFire/fireMonitor/close.svg" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, defineProps, defineEmits } from 'vue';
+import { message } from 'ant-design-vue';
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits(['update:visible']);
+
+// 密码
+const password = ref('');
+
+// 关闭弹窗
+function closeModal() {
+  emit('update:visible', false);
+  password.value = '';
+}
+
+// 确认执行
+const confirm = () => {
+  if (!password.value) {
+    message.warning('请输入授权密码！');
+    return;
+  }
+  if (!props.data || props.data.length === 0) {
+    message.warning('暂无预案数据！');
+    return;
+  }
+  const params = {
+    monitorType: 1,
+    alarmLogId: props.data[0].alarmId,
+    alarmList: props.data.map((item) => item.id).join(','),
+    password: password.value,
+  };
+
+  message.success('确认执行');
+  close();
+};
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val) password.value = '';
+  }
+);
+</script>
+
+<style scoped lang="less">
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.modal-container {
+  width: 50%;
+  max-width: 580px;
+  min-height: 40vh;
+  background: url('/@/assets/images/beltFire/fireMonitor/modalBorder.png') no-repeat;
+  background-size: 100% 100%;
+  border-radius: 6px;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 20px;
+}
+
+.dialog-header {
+  padding: 20px 24px;
+  text-align: center;
+  color: #fff;
+  background: url('/@/assets/images/beltFire/fireMonitor/historyTitle.png') no-repeat;
+  background-size: 100% 40%;
+  h3 {
+    margin: 5px;
+    font-size: 18px;
+    color: #fff;
+    margin-top: -35px;
+    font-family: 'douyuFont';
+  }
+}
+
+.dialog-body {
+  flex: 1;
+  padding: 10px 0;
+}
+
+.device-list {
+  margin-bottom: 20px;
+}
+.device-item {
+  padding: 8px 0;
+  font-size: 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.password-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 15px;
+  input {
+    flex: 1;
+    padding: 8px 12px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background: rgba(0, 0, 0, 0.3);
+    color: #fff;
+    outline: none;
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding-top: 15px;
+}
+
+.close-btn {
+  position: absolute;
+  top: -12px;
+  right: -20px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  z-index: 10;
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+}
+</style>

src/views/vent/home/configurable/components/belt/SprayControl.vue

@@ -3,7 +3,7 @@
     <!-- 数据列表容器 -->
     <div class="sensor-list">
       <!-- 按钮 -->
-      <div class="control-bar">
+      <div class="control-bar" v-if="config.deviceType != 'dust'">
         <a-button class="control-btn" @click="handleSpary(true)">启动喷淋</a-button>
         <a-button class="control-btn" @click="handleSpary(false)">停止喷淋</a-button>
         <div class="switch-wrapper">
@@ -19,7 +19,7 @@
         <!-- 这里应该由data渲染，因为data数量是动态不固定的，config.config是静态的 -->
         <div v-for="(group, index) in config.config" :key="index" class="sensor-group">
           <!-- 组标题 -->
-          <div class="group-title">
+          <div class="group-title" v-if="config.deviceType != 'dust'">
             <a-checkbox
               class="check-btn"
               :checked="selectedSids.includes(beltData.sid)"
@@ -65,6 +65,7 @@ import { getFormattedText } from '../../hooks/helper';
 const props = defineProps<{
   config: Array<{
     readFrom: string;
+    deviceType?: string;
     contentTop: Array<{
       label: string;
       code: string;
@@ -115,10 +116,7 @@ const handleSpary = (state: boolean) => {
 function toggleSwitch() {
   isOn.value = !isOn.value;
 }
-onMounted(() => {
-  console.log(props.config, '123');
-  console.log(props.data, 'data');
-});
+onMounted(() => {});
 </script>
 
 <style scoped lang="less">

src/views/vent/home/configurable/components/belt/WarningResultList.vue

@@ -1,34 +1,54 @@
 <template>
   <div class="warning-result-panel">
-    <!-- 表格主体 -->
     <div class="table-container">
       <table v-if="!!data" class="warning-table">
-        <thead>
+        <thead class="table-header">
           <tr>
             <th v-for="col in config.columns" :key="col.prop" :style="{ width: col.width }">
               {{ col.name }}
             </th>
           </tr>
         </thead>
-        <tbody>
-          <!-- 给 tr 绑定行样式 -->
-          <tr v-for="(row, index) in data[config.tableReadFrom]" :key="index" class="table-row" :class="getRowStatusClass(row)">
-            <td v-for="col in config.columns" :key="col.prop" class="table-cell">
-              <span v-if="col.render" v-html="col.render(row, index)"></span>
-              <span v-else-if="col.prop === 'status'">
-                {{ row[col.prop] || '-' }}
-              </span>
-              <span v-else>{{ row[col.prop] || '-' }}</span>
+
+        <tbody class="table-body">
+          <tr v-for="(row, index) in data[config.tableReadFrom]" :key="index" class="table-row">
+            <td
+              v-for="col in config.columns"
+              :key="col.prop"
+              class="table-cell"
+              :style="{ width: col.width }"
+              :class="col.prop !== 'isPlanned' ? getRowStatusClass(row) : ''"
+            >
+              <template v-if="col.prop === 'isPlanned'">
+                <label class="switch-btn">
+                  <span class="text">否</span>
+                  <input type="checkbox" :checked="row.isPlanned === 1" @change="handleSwitchChange(row)" />
+                  <span class="slider"></span>
+                  <span class="text">是</span>
+                </label>
+              </template>
+              <template v-else-if="col.prop === 'action'">
+                <a-button type="primary" style="background-color: #286d9f !important; border-radius: 5px" @click="openModel(row)">执行预案</a-button>
+              </template>
+              <template v-else>
+                <span v-if="col.render" v-html="col.render(row, index)"></span>
+                <span v-else-if="col.prop === 'status'">
+                  {{ getStatusText(row[col.prop]) || '-' }}
+                </span>
+                <span v-else>{{ row[col.prop] || '-' }}</span>
+              </template>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
   </div>
+  <!-- <ExecutePlan v-model="visible" :data="planData"></ExecutePlan> -->
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+import ExecutePlan from './ExecutePlan.vue';
 const props = defineProps<{
   config: {
     tableReadFrom: string;
@@ -47,25 +67,33 @@ const props = defineProps<{
     [key: string]: any;
   };
 }>();
-
-// 给整行添加颜色样式
+const visible = ref(false);
+const planData = ref([]);
+function getStatusText(status) {
+  const map = {
+    '102': '黄色预警',
+    '103': '橙色预警',
+    '104': '红色预警',
+  };
+  return map[status] || status || '-';
+}
 function getRowStatusClass(row: any) {
   const status = row?.status || '';
   const warnName = row?.warnName || '';
-
-  // 只要任意一个字段包含对应文字，就返回对应 class
-  if (status.includes('黄色预警') || warnName.includes('黄色预警')) {
-    return 'row-status-yellow';
-  }
-  if (status.includes('橙色预警') || warnName.includes('橙色预警')) {
-    return 'row-status-orange';
-  }
-  if (status.includes('红色预警') || warnName.includes('红色预警')) {
-    return 'row-status-red';
-  }
+  if (status.includes('102') || warnName.includes('黄色预警')) return 'row-status-yellow';
+  if (status.includes('103') || warnName.includes('橙色预警')) return 'row-status-orange';
+  if (status.includes('104') || warnName.includes('红色预警')) return 'row-status-red';
   return '';
 }
-
+const handleSwitchChange = (row: any) => {
+  row.isPlanned = row.isPlanned === 1 ? 0 : 1;
+  console.log('当前值：', row.isPlanned);
+};
+function openModel(data) {
+  console.log(data, '=====data');
+  planData.value = data.alarmRecords['1'];
+  visible.value = true;
+}
 onMounted(() => {});
 </script>
 
@@ -73,8 +101,7 @@ onMounted(() => {});
 .warning-result-panel {
   border-radius: 8px;
   padding: 10px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Arial', sans-serif;
+  font-family: 'Microsoft YaHei', sans-serif;
   height: 100%;
   max-height: 250px;
   display: flex;
@@ -82,57 +109,58 @@ onMounted(() => {});
   overflow: hidden;
 }
 
-/* --- 表格样式 --- */
 .table-container {
   width: 100%;
   flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: 0px 15px;
+  padding: 0 15px;
+  overflow: hidden;
 }
 
 .warning-table {
   width: 100%;
-  min-width: 800px;
+  table-layout: fixed;
   border-collapse: collapse;
 }
 
-thead {
+.table-header {
+  display: table;
+  width: 100%;
   background: url('@/assets/images/beltFire/2-8.png') no-repeat;
   background-size: 100% 100%;
-  height: 25px;
+  height: 35px;
 }
 
-thead tr {
-  color: #38e4ef;
-}
-
-:deep(.warning-table thead th) {
-  padding: 5px 10px;
-  text-align: center !important;
-  font-size: 14px;
-  font-weight: bold;
-  color: #38e4ef;
-  vertical-align: middle;
-  line-height: 30px;
-  position: relative;
-  z-index: 1;
+.table-body {
+  display: block;
+  max-height: 180px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
 }
 
 .table-row {
-  height: 20px;
+  display: table;
+  width: 100%;
+  height: 36px;
   background: url('@/assets/images/beltFire/2-9.png') no-repeat;
   background-size: 100% 100%;
 }
 
-:deep(.table-cell) {
-  padding: 8px;
+th,
+.table-cell {
+  text-align: center;
+  padding: 5px;
   font-size: 14px;
+  box-sizing: border-box;
+  display: table-cell;
   vertical-align: middle;
-  text-align: center !important;
 }
 
-/* ====================== 整行预警颜色 ====================== */
+th {
+  font-weight: bold;
+  color: #38e4ef;
+}
+
 .row-status-yellow {
   color: #ffd700 !important;
   font-weight: bold;
@@ -146,7 +174,6 @@ thead tr {
   font-weight: bold;
 }
 
-/* 操作列按钮样式 */
 :deep(.btn-start-spray) {
   background: #2192d9;
   color: #fff;
@@ -155,7 +182,46 @@ thead tr {
   border-radius: 4px;
   cursor: pointer;
   font-size: 12px;
+}
+.switch-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+.switch-btn input {
+  display: none;
+}
+.switch-btn .slider {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  background: #d9d9d9;
+  border-radius: 20px;
+  transition: all 0.3s;
+}
+.switch-btn .slider::before {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50%;
+  top: 2px;
+  left: 2px;
+  transition: all 0.3s;
+}
+
+.switch-btn input:checked + .slider {
+  background: #1890ff;
+}
+.switch-btn input:checked + .slider::before {
+  transform: translateX(16px);
+}
+.switch-btn .text {
+  font-size: 14px;
+  color: inherit;
   font-weight: bold;
-  transition: all 0.2s;
 }
 </style>

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

@@ -231,7 +231,7 @@
         </template>
         <!-- 4. 预警结果列表 -->
         <template v-if="config.name === 'warning_result'">
-          <WarningResultList class="content__module" :config="config.config" :data="config.data" />
+          <WarningResultList class="content__module overflow-auto" style="height: calc(100% - 30px)" :config="config.config" :data="config.data" />
         </template>
 
         <!-- 5. 车辆定位与 CO 浓度关联分析 -->
@@ -254,400 +254,403 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, defineAsyncComponent, ref } from 'vue';
-  import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
-  import MiniBoard from './detail/MiniBoard.vue';
-  import TimelineList from './detail/TimelineList.vue';
-  import TimelineListNew from './detail/TimelineListNew.vue';
-  import CustomList from './detail/CustomList.vue';
-  import CustomGallery from './detail/CustomGallery.vue';
-  import ComplexList from './detail/ComplexList.vue';
-  import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
-  import CustomChart from './detail/CustomChart.vue';
-  import { clone } from 'lodash-es';
-  import { getData, getFormattedText } from '../hooks/helper';
-  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-  import QHCurve from './preset/QHCurve.vue';
-  import MeasureDetail from './preset/MeasureDetail.vue';
-  import CustomTabs from './preset/CustomTabs.vue';
-  import AIChat from '/@/components/AIChat/MiniChat.vue';
-  import DeviceAlarm from './preset/DeviceAlarm.vue';
-  import SelectCs from './preset/SelectCs.vue';
-  import MiniBoardNew from './detail/MiniBoard-New.vue';
-  import Partition from './preset/partition.vue';
-  import SelectorDualChart from './preset/selectorDualChart.vue';
-  import RadioLabel from './preset/radioLabel.vue';
-  import ButtonList from './preset/buttonList.vue';
-  import NitrogenBtnList from './preset/nitrogenBtnList.vue';
-  import cardList from './preset/cardList.vue';
-  import generalList from './preset/generalList.vue';
-  import GateBoard from '../belt/components/detail/gateBoard.vue';
-  import fireGateBoard from '../belt/components/detail/fireGateBoard.vue';
-  import PersonPositioning from './preset/PersonPositioning.vue';
-  // ==================== 新增皮带巷火灾监测组件 ====================
-  import SensorStatusPanel from './belt/SensorStatusPanel.vue';
-  import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
-  import WarningResultList from './belt/WarningResultList.vue';
-  import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
-  // 首页组件
-  import CustomListBelt from './belt/CustomListBelt.vue';
-  import ComplexListBelt from './belt/ComplexListBelt.vue';
-  import ComplexList1Belt from './belt/ComplexList1Belt.vue';
-  import CustomTableBelt from './belt/CustomTableBelt.vue';
-  import SprayControl from './belt/SprayControl.vue';
-  import CameraList from './belt/CameraList.vue';
-  import CameraListTest from './belt/CameraListTest.vue';
+import { computed, defineAsyncComponent, ref } from 'vue';
+import { CommonItem, Config } from '../../../deviceManager/configurationTable/types';
+import MiniBoard from './detail/MiniBoard.vue';
+import TimelineList from './detail/TimelineList.vue';
+import TimelineListNew from './detail/TimelineListNew.vue';
+import CustomList from './detail/CustomList.vue';
+import CustomGallery from './detail/CustomGallery.vue';
+import ComplexList from './detail/ComplexList.vue';
+import GalleryList from './detail/GalleryList.vue';
+import CustomTable from './detail/CustomTable.vue';
+import CustomChart from './detail/CustomChart.vue';
+import { clone } from 'lodash-es';
+import { getData, getFormattedText } from '../hooks/helper';
+import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+import QHCurve from './preset/QHCurve.vue';
+import MeasureDetail from './preset/MeasureDetail.vue';
+import CustomTabs from './preset/CustomTabs.vue';
+import AIChat from '/@/components/AIChat/MiniChat.vue';
+import DeviceAlarm from './preset/DeviceAlarm.vue';
+import SelectCs from './preset/SelectCs.vue';
+import MiniBoardNew from './detail/MiniBoard-New.vue';
+import Partition from './preset/partition.vue';
+import SelectorDualChart from './preset/selectorDualChart.vue';
+import RadioLabel from './preset/radioLabel.vue';
+import ButtonList from './preset/buttonList.vue';
+import NitrogenBtnList from './preset/nitrogenBtnList.vue';
+import cardList from './preset/cardList.vue';
+import generalList from './preset/generalList.vue';
+import GateBoard from '../belt/components/detail/gateBoard.vue';
+import fireGateBoard from '../belt/components/detail/fireGateBoard.vue';
+import PersonPositioning from './preset/PersonPositioning.vue';
+// ==================== 新增皮带巷火灾监测组件 ====================
+import SensorStatusPanel from './belt/SensorStatusPanel.vue';
+import FireSensorAnalysis from './belt/FireSensorAnalysis.vue';
+import WarningResultList from './belt/WarningResultList.vue';
+import VehicleCOAnalysis from './belt/VehicleCOAnalysis.vue';
+// 首页组件
+import CustomListBelt from './belt/CustomListBelt.vue';
+import ComplexListBelt from './belt/ComplexListBelt.vue';
+import ComplexList1Belt from './belt/ComplexList1Belt.vue';
+import CustomTableBelt from './belt/CustomTableBelt.vue';
+import SprayControl from './belt/SprayControl.vue';
+import CameraList from './belt/CameraList.vue';
+import CameraListTest from './belt/CameraListTest.vue';
 
-  const SysWindCard = defineAsyncComponent(() => import('./preset/SysWindCard.vue'));
+const SysWindCard = defineAsyncComponent(() => import('./preset/SysWindCard.vue'));
 
-  const props = defineProps<{
-    data: any;
-    moduleData: Config['moduleData'];
-    chartData: any;
-    activeId?: [String, Number];
-  }>();
+const props = defineProps<{
+  data: any;
+  moduleData: Config['moduleData'];
+  chartData: any;
+  activeId?: [String, Number];
+}>();
 
-  const emit = defineEmits<{
-    (e: 'start-spray', data: any): void;
-    (e: 'clickItem', data: any): void;
-    (e: 'emergency-action', action: string, data: any): void;
-  }>();
-  const handleClickItem = (data: any) => {
-    emit('clickItem', data);
-  };
-  const { background, layout } = props.moduleData;
+const emit = defineEmits<{
+  (e: 'start-spray', data: any): void;
+  (e: 'clickItem', data: any): void;
+  (e: 'emergency-action', action: string, data: any): void;
+}>();
+const handleClickItem = (data: any) => {
+  emit('clickItem', data);
+};
+const { background, layout } = props.moduleData;
 
-  // 获取当原始配置带 items 项时的最终 items 配置
-  function getItems(raw: any, items: CommonItem[]) {
-    return items.map((i) => {
+// 获取当原始配置带 items 项时的最终 items 配置
+function getItems(raw: any, items: CommonItem[]) {
+  return items.map((i) => {
+    return {
+      ...i,
+      label: getFormattedText(raw, i.label, i.trans),
+      value: getFormattedText(raw, i.value, i.trans),
+    };
+  });
+}
+
+// 获取当 List 组件配置带 items 项时的最终 items 配置
+function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+  if (mapFromData && Array.isArray(raw)) {
+    return raw.map((data) => {
+      const item = items[0];
       return {
-        ...i,
-        label: getFormattedText(raw, i.label, i.trans),
-        value: getFormattedText(raw, i.value, i.trans),
+        ...item,
+        label: getFormattedText(data, item.label, item.trans),
+        value: getFormattedText(data, item.value, item.trans),
       };
     });
   }
+  return getItems(raw, items);
+}
 
-  // 获取当 List 组件配置带 items 项时的最终 items 配置
-  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-    if (mapFromData && Array.isArray(raw)) {
-      return raw.map((data) => {
-        const item = items[0];
-        return {
-          ...item,
-          label: getFormattedText(data, item.label, item.trans),
-          value: getFormattedText(data, item.value, item.trans),
-        };
-      });
-    }
-    return getItems(raw, items);
-  }
-
-  /** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
-  const layoutConfig = computed(() => {
-    const refData = props.data;
-    const board = clone(props.moduleData.board) || [];
-    const list = clone(props.moduleData.list) || [];
-    const gallery = clone(props.moduleData.gallery) || [];
-    const complex_list = clone(props.moduleData.complex_list) || [];
-    const gallery_list = clone(props.moduleData.gallery_list) || [];
-    const tabs = clone(props.moduleData.tabs) || [];
-    const chart = clone(props.moduleData.chart) || [];
-    const table = clone(props.moduleData.table) || [];
-    const preset = clone(props.moduleData.preset) || [];
-    const partition = clone(props.moduleData.partition) || [];
+/** 根据配置里的 layout 将配置格式化为带 key 的具体配置 */
+const layoutConfig = computed(() => {
+  const refData = props.data;
+  const board = clone(props.moduleData.board) || [];
+  const list = clone(props.moduleData.list) || [];
+  const gallery = clone(props.moduleData.gallery) || [];
+  const complex_list = clone(props.moduleData.complex_list) || [];
+  const gallery_list = clone(props.moduleData.gallery_list) || [];
+  const tabs = clone(props.moduleData.tabs) || [];
+  const chart = clone(props.moduleData.chart) || [];
+  const table = clone(props.moduleData.table) || [];
+  const preset = clone(props.moduleData.preset) || [];
+  const partition = clone(props.moduleData.partition) || [];
 
-    const mockData = clone(props.chartData) || [];
+  const mockData = clone(props.chartData) || [];
 
-    return layout.items.reduce((arr: any[], item) => {
-      switch (item.name) {
-        case 'board': {
-          const cfg = board.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+  return layout.items.reduce((arr: any[], item) => {
+    switch (item.name) {
+      case 'board': {
+        const cfg = board.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'list': {
+        const cfg = list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        console.log(cfg.readFrom, '111111111');
+        console.log(refData, '111111111');
+        console.log(data, '111111111');
+        arr.push({
+          // overflow: true,
+          ...item,
+          ...cfg,
+          items: getListItems(data, cfg.items, cfg.mapFromData),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'complex_list': {
+        const cfg = complex_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: (data || []).map((d: any) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e: any) => {
+                  const contentItem = {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                  if (cfg.pagetype === 'complex_list1') {
+                    contentItem.id = getFormattedText(d, e.id, e.trans);
+                  }
+                  return contentItem;
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'list': {
-          const cfg = list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getListItems(data, cfg.items, cfg.mapFromData),
+            items: cfg.items.map((i: any) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
         }
-        case 'gallery': {
-          const cfg = gallery.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        break;
+      }
+      case 'gallery_list': {
+        const cfg = gallery_list.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          ...cfg,
+          items: getItems(data, cfg.items),
+          galleryItems: getItems(data, cfg.galleryItems),
+        });
+        break;
+      }
+      case 'tabs': {
+        const cfg = tabs.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        if (cfg.mapFromData) {
+          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
+            items: (data || []).map((d: any) => {
+              return {
+                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                contents: firstListItem.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(d, e.label, e.trans),
+                    value: getFormattedText(d, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'complex_list': {
-          const cfg = complex_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d: any) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e: any) => {
-                    const contentItem = {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                    if (cfg.pagetype === 'complex_list1') {
-                      contentItem.id = getFormattedText(d, e.id, e.trans);
-                    }
-                    return contentItem;
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i: any) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'gallery_list': {
-          const cfg = gallery_list.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
+        } else {
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: getItems(data, cfg.items),
-            galleryItems: getItems(data, cfg.galleryItems),
-          });
-          break;
-        }
-        case 'tabs': {
-          const cfg = tabs.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          if (cfg.mapFromData) {
-            const firstListItem = cfg.items[0];
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: (data || []).map((d: any) => {
-                return {
-                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                  contents: firstListItem.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(d, e.label, e.trans),
-                      value: getFormattedText(d, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          } else {
-            arr.push({
-              overflow: true,
-              ...item,
-              ...cfg,
-              items: cfg.items.map((i: any) => {
-                return {
-                  title: getFormattedText(data, i.title, i.trans),
-                  contents: i.contents.map((e: any) => {
-                    return {
-                      ...e,
-                      label: getFormattedText(data, e.label, e.trans),
-                      value: getFormattedText(data, e.value, e.trans),
-                    };
-                  }),
-                };
-              }),
-            });
-          }
-          break;
-        }
-        case 'chart': {
-          const cfg = chart.shift();
-          if (!cfg) break;
-          const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            ...item,
-            config: cfg,
-            data,
-          });
-          break;
-        }
-        case 'table': {
-          const cfg = table.shift();
-          if (!cfg) break;
-          // const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            ...cfg,
-            ...item,
-            columns: cfg.columns,
-            data: refData,
+            items: cfg.items.map((i: any) => {
+              return {
+                title: getFormattedText(data, i.title, i.trans),
+                contents: i.contents.map((e: any) => {
+                  return {
+                    ...e,
+                    label: getFormattedText(data, e.label, e.trans),
+                    value: getFormattedText(data, e.value, e.trans),
+                  };
+                }),
+              };
+            }),
           });
-          break;
-        }
-        case 'partition': {
-          const cfg = partition.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            overflow: true,
-            ...item,
-            data,
-            ...cfg,
-          });
-          break;
-        }
-        default: {
-          const cfg = preset.shift();
-          if (!cfg) break;
-          const data = getData(refData, cfg.readFrom, cfg.parser);
-          arr.push({
-            ...item,
-            data,
-            config: cfg,
-          });
-          break;
         }
+        break;
       }
-      return arr;
-    }, []);
-  });
+      case 'chart': {
+        const cfg = chart.shift();
+        if (!cfg) break;
+        const data = cfg?.type == 'scatter' ? getData(mockData, cfg.readFrom, cfg.parser) : getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...item,
+          config: cfg,
+          data,
+        });
+        break;
+      }
+      case 'table': {
+        const cfg = table.shift();
+        if (!cfg) break;
+        // const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...cfg,
+          ...item,
+          columns: cfg.columns,
+          data: refData,
+        });
+        break;
+      }
+      case 'partition': {
+        const cfg = partition.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          overflow: true,
+          ...item,
+          data,
+          ...cfg,
+        });
+        break;
+      }
+      default: {
+        const cfg = preset.shift();
+        if (!cfg) break;
+        const data = getData(refData, cfg.readFrom, cfg.parser);
+        arr.push({
+          ...item,
+          data,
+          config: cfg,
+        });
+        break;
+      }
+    }
+    return arr;
+  }, []);
+});
 </script>
 <style lang="less" scoped>
-  @import '@/design/theme.less';
+@import '@/design/theme.less';
 
-  .content {
-    height: calc(100% - 30px);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-  .content__background {
-    width: 100%;
-    // height: 100%;
-    height: calc(100% - 65px);
-    position: absolute;
-    top: 65px;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-    padding: 5px;
-    box-sizing: border-box;
-  }
-  .content__background_1 {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0px;
-    left: 0;
-    z-index: 0;
-    object-fit: fill;
-  }
+.content {
+  height: calc(100% - 30px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.content__background {
+  width: 100%;
+  // height: 100%;
+  height: calc(100% - 65px);
+  position: absolute;
+  top: 65px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+  padding: 5px;
+  box-sizing: border-box;
+}
+.content__background_1 {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  z-index: 0;
+  object-fit: fill;
+}
 
-  .image__background {
-    width: 35%;
-    height: 61%;
-    left: 30%;
-  }
+.image__background {
+  width: 35%;
+  height: 61%;
+  left: 30%;
+}
 
-  .content__module {
-    width: 100%;
-    height: 100%;
-  }
+.content__module {
+  width: 100%;
+  height: 100%;
+}
 
-  .content__module1 {
-    background: url('@/assets/images/vent/homeNew/databg/4.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 129px;
-    margin-top: 20%;
-  }
+.content__module1 {
+  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  height: 129px;
+  margin-top: 20%;
+}
 
-  .content__moduleFire {
-    width: 100%;
-    height: 100%;
-    margin-left: -24% !important;
-  }
+.content__moduleFire {
+  width: 100%;
+  height: 100%;
+  margin-left: -24% !important;
+}
 
-  .content__module_dust {
-    background: url('@/assets/images/vent/homeNew/bottomBg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 100%;
-    height: 100%;
-  }
+.content__module_dust {
+  background: url('@/assets/images/vent/homeNew/bottomBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+}
 
-  ::-webkit-scrollbar {
-    width: 5px !important;
-  }
+::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  ::-webkit-scrollbar-thumb {
-    width: 5px !important;
-  }
+::-webkit-scrollbar-thumb {
+  width: 5px !important;
+}
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-    color: #fff;
-  }
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-arrow) {
-    color: #fff;
-  }
+:deep(.zxm-select-arrow) {
+  color: #fff;
+}
 
-  :deep(.zxm-select-selection-item) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 
-  :deep(.zxm-select-selection-placeholder) {
-    color: #fff !important;
-  }
+:deep(.zxm-select-selection-placeholder) {
+  color: #fff !important;
+}
 
-  :deep(.dialog-overlay) {
-    width: 100%;
-    height: 100%;
-    position: unset;
-    box-shadow: unset;
-  }
+:deep(.dialog-overlay) {
+  width: 100%;
+  height: 100%;
+  position: unset;
+  box-shadow: unset;
+}
 </style>

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

@@ -20,715 +20,778 @@
   </div>
 </template>
 <script lang="ts" setup>
-  withDefaults(
-    defineProps<{
-      listConfig: {
-        value: string;
-        color: string;
-        label: string;
-        info: string;
-      }[];
-      /** A B C D E F G */
-      type: string;
-    }>(),
-    {
-      listConfig: () => [],
-      type: 'A',
-    }
-  );
-
-  //   defineEmits(['click']);
+const props = withDefaults(
+  defineProps<{
+    listConfig: {
+      value: string;
+      color: string;
+      label: string;
+      info: string;
+    }[];
+    /** A B C D E F G */
+    type: string;
+  }>(),
+  {
+    listConfig: () => [],
+    type: 'A',
+  }
+);
+//   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/theme.less';
-  /* Timeline 相关的样式 */
-  @{theme-green} {
-    .list {
-      // --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
-      // --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
-      // --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
-      // --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
-      // --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
-      // --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
-      // --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
-      // --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
-      // --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
-      --image-list: url(/@/assets/images/themify/green/home-container/configurable/list_bg_f.png);
-      --image-list_bg_h: url(/@/assets/images/themify/green/home-container/configurable/list_bg_h.png);
-      --image-list_bg_i: url(/@/assets/images/themify/green/home-container/configurable/list_bg_i.png);
-      // --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
-    }
-  }
-  @{theme-deepblue} {
-    .list {
-      --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
-      --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
-      --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
-      --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
-      --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
-      --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
-      --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
-      --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
-      --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
-      --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
-      --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
-      --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
-      --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
-    }
-  }
-
+@import '/@/design/theme.less';
+@import '/@/design/theme.less';
+/* Timeline 相关的样式 */
+@{theme-green} {
   .list {
-    --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
-    --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
-    --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
-    --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
-    --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
-    --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
-    --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-    --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
-    --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
-    --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
-    --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
-    --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
-    --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
-    --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
-    --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
-    --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
-    --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
-    --image-list_icon_l1: url('/@/assets/images/home-container/configurable/minehome/list-icon-wd.png');
-    --image-list_icon_l2: url('/@/assets/images/home-container/configurable/minehome/list-icon-CO.png');
-    --image-list_icon_l3: url('/@/assets/images/home-container/configurable/minehome/list-icon-yw.png');
-    --image-list_icon_l4: url('/@/assets/images/home-container/configurable/minehome/list-icon-hy.png');
-    --image-list_icon_m1: url('/@/assets/images/home-container/configurable/minehome/list-icon-co1.png');
-    --image-list_icon_m2: url('/@/assets/images/home-container/configurable/minehome/list-icon-co2.png');
-    --image-list_icon_m3: url('/@/assets/images/home-container/configurable/minehome/list-icon-ch4.png');
-    --image-list_icon_m4: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h2.png');
-    --image-list_icon_m5: url('/@/assets/images/home-container/configurable/minehome/list-icon-o2.png');
-    --image-list_icon_m6: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h4.png');
-    --image-list_icon_m7: url('/@/assets/images/home-container/configurable/minehome/list-icon-n2.png');
-    --image-list_icon_m8: url('/@/assets/images/home-container/configurable/minehome/list-icon-h2.png');
-    --image-list_bg_l1: url('/@/assets/images/home-container/configurable/minehome/list-bg-l1.png');
-    --image-list_bg_l2: url('/@/assets/images/home-container/configurable/minehome/list-bg-l2.png');
-    --image-list_bg_m1: url('/@/assets/images/home-container/configurable/minehome/list-bg-m1.png');
-    --image-list_bg_m2: url('/@/assets/images/home-container/configurable/minehome/list-bg-m2.png');
-    --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
-    --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
-    --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
-    --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
-    padding: 5px 20px;
-    position: relative;
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-image: var(--image-list_bg_default);
-  }
+    // --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
+    // --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
+    // --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
+    // --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
+    // --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
+    // --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
+    // --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+    // --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
+    // --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/themify/green/home-container/configurable/list_bg_f.png);
+    --image-list_bg_h: url(/@/assets/images/themify/green/home-container/configurable/list_bg_h.png);
+    --image-list_bg_i: url(/@/assets/images/themify/green/home-container/configurable/list_bg_i.png);
+    // --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
+  }
+}
+@{theme-deepblue} {
+  .list {
+    --image-list_bg_default: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_default.png);
+    --image-triangle_icon: url(/@/assets/images/themify/deepblue/home-container/configurable/triangle_icon.png);
+    --image-list_bg_b: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_b.png);
+    --image-deco_1: url(/@/assets/images/themify/deepblue/home-container/configurable/deco_1.png);
+    --image-list_bg_c: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_c.png);
+    --image-list_bg_defflip: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_defflip.png);
+    --image-list_bg_d: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_d.png);
+    --image-list_bg_s: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_s.png);
+    --image-list_bg_e: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_e.png);
+    --image-list: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/list.png);
+    --image-list_bg_h: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_h.png);
+    --image-list_bg_i: url('/@/assets/images/themify/deepblue/home-container/configurable/list_bg_i.png');
+    --image-list_bg_r: url(/@/assets/images/themify/deepblue/home-container/configurable/list_bg_r.png);
+  }
+}
 
-  .list_A {
-    padding-left: 5px;
-  }
-  .list-item__content_A {
-    background-repeat: no-repeat;
-    background-image: @vent-gas-list-item-bg-img;
-    // padding: 5px 10px;
-    display: flex;
-  }
-  .list-item__icon_A {
-    background-repeat: no-repeat;
-    width: 25px;
-    height: 29px;
-    background-image: var(--image-triangle_icon);
-  }
+.list {
+  --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
+  --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
+  --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
+  --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
+  --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
+  --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+  --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
+  --image-list_bg_s: url(/@/assets/images/home-container/configurable/list_bg_s.png);
+  --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
+  --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
+  --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
+  --image-list_bg_r: url(/@/assets/images/home-container/configurable/list_bg_r.png);
+  --image-list_bg_r_icon1: url(/@/assets/images/home-container/configurable/list_bg_r_icon1.png);
+  --image-list_bg_r_icon2: url(/@/assets/images/home-container/configurable/list_bg_r_icon2.png);
+  --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
+  --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
+  --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
+  --image-list_icon_l1: url('/@/assets/images/home-container/configurable/minehome/list-icon-wd.png');
+  --image-list_icon_l2: url('/@/assets/images/home-container/configurable/minehome/list-icon-CO.png');
+  --image-list_icon_l3: url('/@/assets/images/home-container/configurable/minehome/list-icon-yw.png');
+  --image-list_icon_l4: url('/@/assets/images/home-container/configurable/minehome/list-icon-hy.png');
+  --image-list_icon_m1: url('/@/assets/images/home-container/configurable/minehome/list-icon-co1.png');
+  --image-list_icon_m2: url('/@/assets/images/home-container/configurable/minehome/list-icon-co2.png');
+  --image-list_icon_m3: url('/@/assets/images/home-container/configurable/minehome/list-icon-ch4.png');
+  --image-list_icon_m4: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h2.png');
+  --image-list_icon_m5: url('/@/assets/images/home-container/configurable/minehome/list-icon-o2.png');
+  --image-list_icon_m6: url('/@/assets/images/home-container/configurable/minehome/list-icon-c2h4.png');
+  --image-list_icon_m7: url('/@/assets/images/home-container/configurable/minehome/list-icon-n2.png');
+  --image-list_icon_m8: url('/@/assets/images/home-container/configurable/minehome/list-icon-h2.png');
+  --image-list_bg_l1: url('/@/assets/images/home-container/configurable/minehome/list-bg-l1.png');
+  --image-list_bg_l2: url('/@/assets/images/home-container/configurable/minehome/list-bg-l2.png');
+  --image-list_bg_m1: url('/@/assets/images/home-container/configurable/minehome/list-bg-m1.png');
+  --image-list_bg_m2: url('/@/assets/images/home-container/configurable/minehome/list-bg-m2.png');
+  --image-list_bg_n1: url('/@/assets/images/home-container/configurable/minehome/list-bg-n1.png');
+  --image-list_bg_n2: url('/@/assets/images/home-container/configurable/minehome/list-bg-n2.png');
+  --image-list_bg_n3: url('/@/assets/images/home-container/configurable/minehome/list-bg-n3.png');
+  --image-list_bg_n4: url('/@/assets/images/home-container/configurable/minehome/list-bg-n4.png');
+  --image-list_bg_o1: url('/@/assets/images/beltFire/listO1.png');
+  --image-list_bg_o2: url('/@/assets/images/beltFire/listO2.png');
+  --image-list_icon_o1: url('/@/assets/images/beltFire/listO1.svg');
+  --image-list_icon_o2: url('/@/assets/images/beltFire/listO2.svg');
+  padding: 5px 20px;
+  position: relative;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_default);
+}
 
-  .list-item__content_B {
-    background-repeat: no-repeat;
-    padding: 5px 10px 10px 10px;
-    display: flex;
-    background-position: left bottom;
-    background-size: 100% auto;
-    background-image: var(--image-list_bg_b);
-  }
-  .list__image_B {
-    width: 77px;
-    height: 77px;
-    background-repeat: no-repeat;
-    background-image: var(--image-deco_1);
-    background-size: auto;
-    margin-right: 20px;
-  }
+.list_A {
+  padding-left: 5px;
+}
+.list-item__content_A {
+  background-repeat: no-repeat;
+  background-image: @vent-gas-list-item-bg-img;
+  // padding: 5px 10px;
+  display: flex;
+}
+.list-item__icon_A {
+  background-repeat: no-repeat;
+  width: 25px;
+  height: 29px;
+  background-image: var(--image-triangle_icon);
+}
 
-  .list_C {
-    background: none;
-  }
-  .list-item__content_C {
-    height: 60px;
-    background-repeat: no-repeat;
-    padding: 25px 50px 0 50px;
-    display: flex;
-    background-position: center;
-    background-size: 100% 100%;
-    background-image: var(--image-list_bg_c);
-    margin-bottom: 10px;
-    text-align: center;
-  }
-  .list-item__content_C > div {
-    flex-basis: 33.3%;
-  }
+.list-item__content_B {
+  background-repeat: no-repeat;
+  padding: 5px 10px 10px 10px;
+  display: flex;
+  background-position: left bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_b);
+}
+.list__image_B {
+  width: 77px;
+  height: 77px;
+  background-repeat: no-repeat;
+  background-image: var(--image-deco_1);
+  background-size: auto;
+  margin-right: 20px;
+}
 
-  .list_D {
-    background-image: var(--image-list_bg_defflip);
-  }
-  .list__wrapper_D {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .list-item__icon_D {
-    display: none;
-  }
-  .list-item_D {
-    flex-basis: 25%;
-    height: 60px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto 100%;
-    background-image: var(--image-list_bg_d);
-    text-align: center;
-    margin-bottom: 10px;
-  }
+.list_C {
+  background: none;
+}
+.list-item__content_C {
+  height: 60px;
+  background-repeat: no-repeat;
+  padding: 25px 50px 0 50px;
+  display: flex;
+  background-position: center;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_c);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_C > div {
+  flex-basis: 33.3%;
+}
 
-  .list-item__content_D {
-    line-height: 30px;
-  }
-  .list-item__value_D {
-    font-weight: bold;
-  }
+.list_D {
+  background-image: var(--image-list_bg_defflip);
+}
+.list__wrapper_D {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-item__icon_D {
+  display: none;
+}
+.list-item_D {
+  flex-basis: 25%;
+  height: 60px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_d);
+  text-align: center;
+  margin-bottom: 10px;
+}
 
-  .list_S {
-    background: none;
-  }
-  .list__wrapper_S {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr); /* 2列均等 */
-    gap: 10px;
-  }
-  .list-item_S {
-    height: 45px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-    background-image: var(--image-list_bg_s);
-    text-align: center;
-    padding: 0 7px;
-  }
-  .list-item__content_S {
-    display: flex;
-  }
-  .list-item__value_S {
-    font-family: 'douyuFont';
-    font-size: 13px;
-    color: @vent-gas-primary-text;
-    padding-top: 3px;
-  }
-  .list_E {
-    background-image: var(--image-list_bg_defflip);
-  }
-  .list__wrapper_E {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .list-item__icon_E {
-    display: none;
-  }
-  .list-item_E {
-    flex-basis: 25%;
-    height: 70px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto 100%;
-    background-image: var(--image-list_bg_e);
-    text-align: center;
-    margin: 5px 0px;
-    padding-top: 32px;
-    font-size: 12px;
-  }
+.list-item__content_D {
+  line-height: 30px;
+}
+.list-item__value_D {
+  font-weight: bold;
+}
 
-  .list_F {
-    background: none;
-  }
-  .list-item__content_F {
-    height: 40px;
-    background-repeat: no-repeat;
-    padding: 0 50px 0 50px;
-    display: flex;
-    background-position: center;
-    background-size: 100% auto;
-    background-image: var(--image-list);
-    margin-top: 10px;
-    text-align: center;
-  }
-  .list-item__content_F > div {
-    flex-basis: 33.3%;
-  }
+.list_S {
+  background: none;
+}
+.list__wrapper_S {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2列均等 */
+  gap: 10px;
+}
+.list-item_S {
+  height: 45px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_s);
+  text-align: center;
+  padding: 0 7px;
+}
+.list-item__content_S {
+  display: flex;
+}
+.list-item__value_S {
+  font-family: 'douyuFont';
+  font-size: 13px;
+  color: @vent-gas-primary-text;
+  padding-top: 3px;
+}
+.list_E {
+  background-image: var(--image-list_bg_defflip);
+}
+.list__wrapper_E {
+  display: flex;
+  flex-wrap: wrap;
+}
+.list-item__icon_E {
+  display: none;
+}
+.list-item_E {
+  flex-basis: 25%;
+  height: 70px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 100%;
+  background-image: var(--image-list_bg_e);
+  text-align: center;
+  margin: 5px 0px;
+  padding-top: 32px;
+  font-size: 12px;
+}
 
-  .list_G {
-    background: none;
-  }
-  .list__wrapper_G {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-  .list-item_G {
-    width: 130px;
-    height: 80px;
-    align-items: center;
-    text-align: center;
-    border: 1px solid rgba(25, 237, 255, 0.4);
-    box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
-    background: rgba(0, 0, 0, 0.1);
-    margin: 5px 10px;
-  }
-  .list-item__content_G {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .list-item__content_G > .list-item__label {
-    width: 60px;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    font-size: 20px;
-    line-height: 80px;
-  }
-  .list-item__content_G > .list-item__info {
-    width: 70px;
-    height: 30px;
-    line-height: 30px;
-    right: 0;
-    position: absolute;
-  }
-  .list-item__content_G > .list-item__value {
-    width: 70px;
-    height: 50px;
-    line-height: 50px;
-    top: 30px;
-    right: 0;
-    position: absolute;
-    text-shadow: 0 0 25px #00fbfe;
-    background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
-    font-style: normal;
-    background-size: cover;
-    font-family: electronicFont;
-    font-size: 30px;
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 18px;
-    color: aliceblue;
-  }
+.list_F {
+  background: none;
+}
+.list-item__content_F {
+  height: 40px;
+  background-repeat: no-repeat;
+  padding: 0 50px 0 50px;
+  display: flex;
+  background-position: center;
+  background-size: 100% auto;
+  background-image: var(--image-list);
+  margin-top: 10px;
+  text-align: center;
+}
+.list-item__content_F > div {
+  flex-basis: 33.3%;
+}
 
-  .list_H {
-    background: none;
-  }
-  .list-item__content_H {
-    height: 50px;
-    background-repeat: no-repeat;
-    padding: 20px 50px 0 50px;
-    display: flex;
-    background-position: bottom;
-    background-size: 100% auto;
-    background-image: var(--image-list_bg_h);
-    margin-bottom: 10px;
-    text-align: center;
-  }
-  .list-item__content_H > div {
-    flex-basis: 33.3%;
-  }
+.list_G {
+  background: none;
+}
+.list__wrapper_G {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.list-item_G {
+  width: 130px;
+  height: 80px;
+  align-items: center;
+  text-align: center;
+  border: 1px solid rgba(25, 237, 255, 0.4);
+  box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
+  background: rgba(0, 0, 0, 0.1);
+  margin: 5px 10px;
+}
+.list-item__content_G {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_G > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 80px;
+}
+.list-item__content_G > .list-item__info {
+  width: 70px;
+  height: 30px;
+  line-height: 30px;
+  right: 0;
+  position: absolute;
+}
+.list-item__content_G > .list-item__value {
+  width: 70px;
+  height: 50px;
+  line-height: 50px;
+  top: 30px;
+  right: 0;
+  position: absolute;
+  text-shadow: 0 0 25px #00fbfe;
+  background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
+  font-style: normal;
+  background-size: cover;
+  font-family: electronicFont;
+  font-size: 30px;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 18px;
+  color: aliceblue;
+}
 
-  .list-item__icon_R {
-    width: 24px;
-    height: 25px;
-    background-image: var(--image-list_bg_r_icon1);
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: contain;
-    margin-bottom: 5px;
-    position: absolute;
-    left: 35px;
-  }
-  .list-item_R:last-of-type .list-item__icon_R {
-    background-image: var(--image-list_bg_r_icon2);
-  }
-  .list_R {
-    background: none;
-  }
-  .list-item__content_R {
-    height: 52px;
-    background-repeat: no-repeat;
-    padding: 0 30px;
-    display: flex;
-    background-position: bottom;
-    background-size: 100% 100%;
-    background-image: var(--image-list_bg_r);
-    text-align: center;
-    align-items: center;
-    .list-item__label {
-      font-size: 15px;
-    }
-    .list-item__value_R {
-      font-family: 'douyuFont';
-      font-size: 15px;
-      padding-top: 5px;
-      color: #00bfff;
-    }
-  }
-  .list-item__content_R > div {
-    flex-basis: 33.3%;
-  }
+.list_H {
+  background: none;
+}
+.list-item__content_H {
+  height: 50px;
+  background-repeat: no-repeat;
+  padding: 20px 50px 0 50px;
+  display: flex;
+  background-position: bottom;
+  background-size: 100% auto;
+  background-image: var(--image-list_bg_h);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.list-item__content_H > div {
+  flex-basis: 33.3%;
+}
 
-  .list_fireList {
-    background: none;
-  }
-  .list__wrapper_fireList {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-left: 86px;
-  }
-  .list-item_fireList {
-    width: 167px;
-    height: 58px;
-    align-items: center;
-    text-align: center;
-    background-image: var(--image-list_bg_i);
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    margin: 5px 10px;
-  }
-  .list-item__content_fireList {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .list-item__content_fireList > .list-item__label {
-    width: 60px;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    font-size: 20px;
-    line-height: 63px;
-    color: #009bff;
-  }
-  .list-item__content_fireList > .list-item__info {
-    height: 50%;
-    left: 70px;
-    position: absolute;
-  }
-  .list-item__content_fireList > .list-item__value {
-    top: 50%;
-    height: 50%;
-    left: 70px;
-    position: absolute;
-    font-size: 18px;
-  }
-  .list_I {
-    background: none;
-  }
-  .list__wrapper_I {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-  .list-item_I {
-    width: 160px;
-    height: 63px;
-    align-items: center;
-    text-align: center;
-    background-image: var(--image-list_bg_i);
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    margin: 5px 10px;
-  }
-  .list-item__content_I {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-  .list-item__content_I > .list-item__label {
-    width: 60px;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    font-size: 20px;
-    line-height: 63px;
-    color: #009bff;
-  }
-  .list-item__content_I > .list-item__info {
-    height: 50%;
-    left: 70px;
-    position: absolute;
-  }
-  .list-item__content_I > .list-item__value {
-    top: 50%;
-    height: 50%;
-    left: 70px;
-    position: absolute;
-    font-size: 18px;
-  }
-  .list_J {
-    background: unset;
-    padding: 0 5px 0 10px;
-  }
-  .list-item_J {
-    width: 312px;
-    height: 57px;
-    align-items: center;
-    text-align: center;
-    background-image: var(--image-list_bg_j);
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    margin: 5px 10px;
-  }
-  .list-item__content_J {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 20px 0 15px;
-  }
-  .list_K {
-    background: unset;
-    padding: 0 5px 0 10px;
-  }
-  .list__wrapper_K {
-    height: 100%;
+.list-item__icon_R {
+  width: 24px;
+  height: 25px;
+  background-image: var(--image-list_bg_r_icon1);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin-bottom: 5px;
+  position: absolute;
+  left: 35px;
+}
+.list-item_R:last-of-type .list-item__icon_R {
+  background-image: var(--image-list_bg_r_icon2);
+}
+.list_R {
+  background: none;
+}
+.list-item__content_R {
+  height: 52px;
+  background-repeat: no-repeat;
+  padding: 0 30px;
+  display: flex;
+  background-position: bottom;
+  background-size: 100% 100%;
+  background-image: var(--image-list_bg_r);
+  text-align: center;
+  align-items: center;
+  .list-item__label {
+    font-size: 15px;
   }
-  .list-item__content_K {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px;
-    margin: 4px 0;
-    background-image: var(--image-linear-gradient-3);
+  .list-item__value_R {
+    font-family: 'douyuFont';
+    font-size: 15px;
+    padding-top: 5px;
+    color: #00bfff;
+  }
+}
+.list-item__content_R > div {
+  flex-basis: 33.3%;
+}
 
-    .list-item__value {
-      flex-basis: unset;
-    }
-    .list-item__label {
-      flex-basis: unset;
-    }
-    .list-item__info {
-      display: none;
-    }
-  }
+.list_fireList {
+  background: none;
+}
+.list__wrapper_fireList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-left: 86px;
+}
+.list-item_fireList {
+  width: 167px;
+  height: 58px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_i);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_fireList {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_fireList > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 63px;
+  color: #009bff;
+}
+.list-item__content_fireList > .list-item__info {
+  height: 50%;
+  left: 70px;
+  position: absolute;
+}
+.list-item__content_fireList > .list-item__value {
+  top: 50%;
+  height: 50%;
+  left: 70px;
+  position: absolute;
+  font-size: 18px;
+}
+.list_I {
+  background: none;
+}
+.list__wrapper_I {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+.list-item_I {
+  width: 160px;
+  height: 63px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_i);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_I {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.list-item__content_I > .list-item__label {
+  width: 60px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  font-size: 20px;
+  line-height: 63px;
+  color: #009bff;
+}
+.list-item__content_I > .list-item__info {
+  height: 50%;
+  left: 70px;
+  position: absolute;
+}
+.list-item__content_I > .list-item__value {
+  top: 50%;
+  height: 50%;
+  left: 70px;
+  position: absolute;
+  font-size: 18px;
+}
+.list_J {
+  background: unset;
+  padding: 0 5px 0 10px;
+}
+.list-item_J {
+  width: 312px;
+  height: 57px;
+  align-items: center;
+  text-align: center;
+  background-image: var(--image-list_bg_j);
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin: 5px 10px;
+}
+.list-item__content_J {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px 0 15px;
+}
+.list_K {
+  background: unset;
+  padding: 0 5px 0 10px;
+}
+.list__wrapper_K {
+  height: 100%;
+}
+.list-item__content_K {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  margin: 4px 0;
+  background-image: var(--image-linear-gradient-3);
 
-  .list_L {
-    background: none;
-    padding: 5px 10px;
+  .list-item__value {
+    flex-basis: unset;
   }
-  .list-item_L {
-    width: 100%;
-    height: 37px;
-    background-repeat: no-repeat;
-    background-size: auto 100%;
-    margin-bottom: 8px;
+  .list-item__label {
+    flex-basis: unset;
   }
-  /* 奇数项背景图 */
-  .list-item_L:nth-child(odd) {
-    background-image: var(--image-list_bg_l1);
+  .list-item__info {
+    display: none;
   }
+}
 
-  /* 偶数项背景图 */
-  .list-item_L:nth-child(even) {
-    background-image: var(--image-list_bg_l2);
-  }
-  .list-item__icon_L {
-    background-repeat: no-repeat;
-    width: 16px;
-    height: 20px;
-    margin-left: 15px;
-    background-position: center;
-    background-size: contain;
-  }
-  /* 四个图标样式 */
-  .list-item_L:nth-child(1) .list-item__icon_L {
-    background-image: var(--image-list_icon_l1);
-  }
+.list_L {
+  background: none;
+  padding: 5px 10px;
+}
+.list-item_L {
+  width: 100%;
+  height: 37px;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  margin-bottom: 8px;
+}
+/* 奇数项背景图 */
+.list-item_L:nth-child(odd) {
+  background-image: var(--image-list_bg_l1);
+}
 
-  .list-item_L:nth-child(2) .list-item__icon_L {
-    background-image: var(--image-list_icon_l2);
-  }
+/* 偶数项背景图 */
+.list-item_L:nth-child(even) {
+  background-image: var(--image-list_bg_l2);
+}
+.list-item__icon_L {
+  background-repeat: no-repeat;
+  width: 16px;
+  height: 20px;
+  margin-left: 15px;
+  background-position: center;
+  background-size: contain;
+}
+/* 四个图标样式 */
+.list-item_L:nth-child(1) .list-item__icon_L {
+  background-image: var(--image-list_icon_l1);
+}
 
-  .list-item_L:nth-child(3) .list-item__icon_L {
-    background-image: var(--image-list_icon_l3);
-  }
+.list-item_L:nth-child(2) .list-item__icon_L {
+  background-image: var(--image-list_icon_l2);
+}
 
-  .list-item_L:nth-child(4) .list-item__icon_L {
-    background-image: var(--image-list_icon_l4);
-  }
-  .list-item__content_L {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    .list-item__value_L {
-      font-family: 'douyuFont';
-    }
-  }
-  .list-item__content_L > div {
-    flex-basis: 33.3%;
-  }
+.list-item_L:nth-child(3) .list-item__icon_L {
+  background-image: var(--image-list_icon_l3);
+}
 
-  .list_M {
-    background: none;
-    padding: 0;
-  }
-  .list__wrapper_M {
-    display: grid;
-    grid-template-columns: 1fr 1fr; /* 两列均等 */
-    gap: 18px; /* 统一间距 */
-  }
-  .list-item_M {
-    height: 37px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .list-item_M:nth-child(1),
-  .list-item_M:nth-child(4),
-  .list-item_M:nth-child(5),
-  .list-item_M:nth-child(8) {
-    background-image: var(--image-list_bg_m1);
+.list-item_L:nth-child(4) .list-item__icon_L {
+  background-image: var(--image-list_icon_l4);
+}
+.list-item__content_L {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  .list-item__value_L {
+    font-family: 'douyuFont';
   }
+}
+.list-item__content_L > div {
+  flex-basis: 33.3%;
+}
 
-  .list-item_M:nth-child(2),
-  .list-item_M:nth-child(3),
-  .list-item_M:nth-child(6),
-  .list-item_M:nth-child(7) {
-    background-image: var(--image-list_bg_m2);
-  }
-  .list-item_M:nth-child(7),
-  .list-item_M:nth-child(8) {
-    margin-bottom: 0;
-  }
-  .list-item__icon_M {
-    background-repeat: no-repeat;
-    height: 16px;
-    margin-left: 5px;
-    background-position: center;
-    background-size: auto 100%;
-    display: inline-block;
-    width: 40px;
-  }
-  /* 八个图标样式 */
-  .list-item_M:nth-child(1) .list-item__icon_M {
-    background-image: var(--image-list_icon_m1);
-  }
-  .list-item_M:nth-child(2) .list-item__icon_M {
-    background-image: var(--image-list_icon_m2);
-  }
-  .list-item_M:nth-child(3) .list-item__icon_M {
-    background-image: var(--image-list_icon_m3);
-  }
-  .list-item_M:nth-child(4) .list-item__icon_M {
-    background-image: var(--image-list_icon_m4);
-  }
-  .list-item_M:nth-child(5) .list-item__icon_M {
-    background-image: var(--image-list_icon_m5);
-  }
-  .list-item_M:nth-child(6) .list-item__icon_M {
-    background-image: var(--image-list_icon_m6);
-  }
-  .list-item_M:nth-child(7) .list-item__icon_M {
-    background-image: var(--image-list_icon_m7);
-  }
-  .list-item_M:nth-child(8) .list-item__icon_M {
-    background-image: var(--image-list_icon_m8);
-  }
+.list_M {
+  background: none;
+  padding: 0;
+}
+.list__wrapper_M {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* 两列均等 */
+  gap: 18px; /* 统一间距 */
+}
+.list-item_M {
+  height: 37px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.list-item_M:nth-child(1),
+.list-item_M:nth-child(4),
+.list-item_M:nth-child(5),
+.list-item_M:nth-child(8) {
+  background-image: var(--image-list_bg_m1);
+}
 
-  .list-item__content_M {
-    display: flex;
-    text-align: center;
-    align-items: center;
+.list-item_M:nth-child(2),
+.list-item_M:nth-child(3),
+.list-item_M:nth-child(6),
+.list-item_M:nth-child(7) {
+  background-image: var(--image-list_bg_m2);
+}
+.list-item_M:nth-child(7),
+.list-item_M:nth-child(8) {
+  margin-bottom: 0;
+}
+.list-item__icon_M {
+  background-repeat: no-repeat;
+  height: 16px;
+  margin-left: 5px;
+  background-position: center;
+  background-size: auto 100%;
+  display: inline-block;
+  width: 40px;
+}
+/* 八个图标样式 */
+.list-item_M:nth-child(1) .list-item__icon_M {
+  background-image: var(--image-list_icon_m1);
+}
+.list-item_M:nth-child(2) .list-item__icon_M {
+  background-image: var(--image-list_icon_m2);
+}
+.list-item_M:nth-child(3) .list-item__icon_M {
+  background-image: var(--image-list_icon_m3);
+}
+.list-item_M:nth-child(4) .list-item__icon_M {
+  background-image: var(--image-list_icon_m4);
+}
+.list-item_M:nth-child(5) .list-item__icon_M {
+  background-image: var(--image-list_icon_m5);
+}
+.list-item_M:nth-child(6) .list-item__icon_M {
+  background-image: var(--image-list_icon_m6);
+}
+.list-item_M:nth-child(7) .list-item__icon_M {
+  background-image: var(--image-list_icon_m7);
+}
+.list-item_M:nth-child(8) .list-item__icon_M {
+  background-image: var(--image-list_icon_m8);
+}
 
-    .list-item__value_M {
-      font-family: 'douyuFont';
-      font-size: 12px;
-    }
-  }
-  .list_N {
-    background: none;
-    padding: 5px 10px;
-  }
-  .list-item_N {
-    width: 100%;
-    height: 42px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    margin-bottom: 15px;
-  }
-  /* 四个背景样式 */
-  .list-item_N:nth-child(1) {
-    background-image: var(--image-list_bg_n1);
-  }
+.list-item__content_M {
+  display: flex;
+  text-align: center;
+  align-items: center;
 
-  .list-item_N:nth-child(2) {
-    background-image: var(--image-list_bg_n2);
-    .list-item__value_N {
-      color: #27cab7;
-    }
+  .list-item__value_M {
+    font-family: 'douyuFont';
+    font-size: 12px;
   }
+}
+.list_N {
+  background: none;
+  padding: 5px 10px;
+}
+.list-item_N {
+  width: 100%;
+  height: 42px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 15px;
+}
+/* 四个背景样式 */
+.list-item_N:nth-child(1) {
+  background-image: var(--image-list_bg_n1);
+}
 
-  .list-item_N:nth-child(3) {
-    background-image: var(--image-list_bg_n3);
+.list-item_N:nth-child(2) {
+  background-image: var(--image-list_bg_n2);
+  .list-item__value_N {
+    color: #27cab7;
   }
+}
 
-  .list-item_N:nth-child(4) {
-    background-image: var(--image-list_bg_n4);
-    .list-item__value_N {
-      color: #27cab7;
-    }
-  }
-  .list-item__content_N {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    .list-item__value_N {
-      font-family: 'douyuFont';
-    }
-  }
-  .list-item__content_N > div:last-child {
-    flex-basis: 60%;
-  }
+.list-item_N:nth-child(3) {
+  background-image: var(--image-list_bg_n3);
+}
 
-  .list-item__label {
-    flex-basis: 55%;
-  }
-  .list-item__info {
-    flex-grow: 1;
-  }
-  .list-item__value {
-    flex-basis: 30%;
-  }
-  .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: @vent-table-action-link;
-  }
-  .list-item__value_white {
-    color: white;
-  }
-  .gallery-item__value_lightblue {
-    color: @vent-configurable-home-light-border;
+.list-item_N:nth-child(4) {
+  background-image: var(--image-list_bg_n4);
+  .list-item__value_N {
+    color: #27cab7;
+  }
+}
+.list-item__content_N {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  .list-item__value_N {
+    font-family: 'douyuFont';
   }
+}
+.list-item__content_N > div:last-child {
+  flex-basis: 60%;
+}
+
+.list_U {
+  background: none;
+  padding: 0px 20px;
+}
+.list__wrapper_U {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+.list-item_U {
+  width: 80%;
+  height: 42px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* 左右两个背景图（你可以自己换图） */
+.list-item_U:nth-child(odd) {
+  background: var(--image-list_bg_o1);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.list-item_U:nth-child(even) {
+  background: var(--image-list_bg_o2);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.list-item__icon_U {
+  width: 24px;
+  height: 24px;
+  margin-left: 12px;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+.list-item_U:nth-child(1) .list-item__icon_U {
+  background-image: var(--image-list_icon_o1);
+}
+.list-item_U:nth-child(2) .list-item__icon_U {
+  background-image: var(--image-list_icon_o2);
+}
+.list-item__content_U {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 50px 0 15px;
+}
+.list-item__content_U > .list-item__label {
+  font-weight: bold;
+  margin-left: 20px;
+}
+.list-item__value_U {
+  font-family: 'douyuFont';
+  color: #ffffff;
+}
+
+.list-item__label {
+  flex-basis: 55%;
+}
+.list-item__info {
+  flex-grow: 1;
+}
+.list-item__value {
+  flex-basis: 30%;
+}
+.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: @vent-table-action-link;
+}
+.list-item__value_white {
+  color: white;
+}
+.gallery-item__value_lightblue {
+  color: @vent-configurable-home-light-border;
+}
 </style>