[Feat 0000]首页背景图动态变换

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

@@ -16,7 +16,7 @@
           >
             <template #monitor="{ model }">
               <div class="vent-flex-row-between">
-                <a-input :value="model.pointOptions?.[0]?.label || ''" style="width: calc(100% - 65px)" />
+                <a-input :value="model.pointOptions?.[0]?.label || ''" disabled style="width: calc(100% - 65px); border: 1px solid #1f7699" />
                 <a-button type="primary" @click="selectPoint(model)" style="position: absolute; right: 0; top: 1px">选择</a-button>
               </div>
             </template>
@@ -39,7 +39,7 @@
           >
             <template #monitor="{ model }">
               <div class="vent-flex-row-between">
-                <a-input :value="model.pointOptions?.[0]?.label || ''" style="width: calc(100% - 65px)" />
+                <a-input :value="model.pointOptions?.[0]?.label || ''" disabled style="width: calc(100% - 65px); border: 1px solid #1f7699" />
                 <a-button type="primary" @click="selectPoint(model)" style="position: absolute; right: 0; top: 1px">选择</a-button>
               </div>
             </template>
@@ -157,14 +157,14 @@ async function getDevicePointList(strtype: string) {
 
 // 打开点位选择弹窗
 async function selectPoint(model: any) {
-  if (!model.strtype) {
+  if (!model.deviceType) {
     message.info('请先选择设备！');
     return;
   }
   // 缓存当前编辑行
   tempCurrentModel.value = model;
-  await getDevicePointList(model.strtype);
-  openPointModal(true, { deviceType: model.strtype });
+  await getDevicePointList(model.deviceType);
+  openPointModal(true, { deviceType: model.deviceType });
 }
 
 // 选中点位回填到当前行

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

@@ -90,21 +90,23 @@ async function handleDelete(record) {
 }
 
 async function onSubmit(values) {
-  // 自动判断是新增还是编辑
-  const isUpdate = !!values.id;
+  const params = { ...values };
+  if (params.pNum) {
+    params.partNum = params.pNum;
+  }
+
+  const isUpdate = !!params.id;
   if (isUpdate) {
-    // 编辑模式
-    if (values.alarmType === 'belt_part_warn') {
-      await warningLogAddLeather({ ...values, sysId: props.deviceId, id: values.id });
+    if (params.alarmType === 'belt_part_warn') {
+      await warningLogAddLeather({ ...params, sysId: props.deviceId, id: params.id });
     } else {
-      await warningLogEdit(values);
+      await warningLogEdit(params);
     }
   } else {
-    // 新增模式
-    if (values.alarmType === 'belt_part_warn') {
-      await warningLogAddLeather({ ...values, sysId: props.deviceId });
+    if (params.alarmType === 'belt_part_warn') {
+      await warningLogAddLeather({ ...params, sysId: props.deviceId });
     } else {
-      await warningLogAdd({ ...values, sysId: props.deviceId });
+      await warningLogAdd({ ...params, sysId: props.deviceId });
     }
   }
   closeModal();
@@ -113,6 +115,25 @@ async function onSubmit(values) {
 
 const workFaceWarningSchemas: FormSchema[] = [
   ...workFaceWarningFormSchemasLeather,
+  // 新增时显示
+  {
+    label: '分区总数',
+    field: 'partNum',
+    component: 'Input',
+    ifShow: ({ values }) => {
+      return !values.id; // 无ID = 新增
+    },
+  },
+  // 编辑时显示
+  {
+    label: '分区总数',
+    field: 'pnum',
+    component: 'Input',
+    dynamicDisabled: true,
+    ifShow: ({ values }) => {
+      return !!values.id; // 有ID = 编辑
+    },
+  },
   {
     label: '关联条目',
     field: 'relatedEntries',
@@ -128,6 +149,7 @@ const workFaceWarningSchemas: FormSchema[] = [
     label: '预警后自动控制',
     field: 'isAutoControl',
     component: 'RadioGroup',
+    defaultValue: false,
     componentProps: {
       //options里面由一个一个的radio组成,支持disabled
       options: [
@@ -140,6 +162,7 @@ const workFaceWarningSchemas: FormSchema[] = [
     label: '解除后自动复位',
     field: 'isAutoReset',
     component: 'RadioGroup',
+    defaultValue: false,
     componentProps: {
       //options里面由一个一个的radio组成,支持disabled
       options: [

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

@@ -324,11 +324,6 @@ export const workFaceWarningFormSchemasLeather: FormSchema[] = [
     componentProps: { dictCode: 'leveltype', stringToNumber: true },
     required: true,
   },
-  {
-    label: '分区总数',
-    field: 'partNum',
-    component: 'Input',
-  },
   {
     label: '预警后自动控制等待时间',
     field: 'controlWaitTime',
@@ -352,29 +347,23 @@ export const workFaceWarningFormSchemasLeather: FormSchema[] = [
     componentProps: { dictCode: 'kindtype' },
   },
 ];
-export const deviceFormColumns = (param) =>
+export const deviceFormColumns = () =>
   <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'];
-          },
-        };
+      label: '设备类型',
+      field: 'deviceType',
+      component: 'MTreeSelect',
+      componentProps: {
+        isSearch: false,
       },
+      colProps: { span: 12 },
     },
     {
       label: '点位',
       field: 'monitorId',
       component: 'Select',
       slot: 'monitor',
+      required: true,
     },
     {
       label: '报警下限值',
@@ -441,30 +430,23 @@ export const deviceFormColumns = (param) =>
       colProps: { span: 12 },
     },
   ];
-export const deviceControlColumns = (param) =>
+export const deviceControlColumns = () =>
   <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: 'deviceType',
+      component: 'MTreeSelect',
+      componentProps: {
+        isSearch: false,
       },
+      colProps: { span: 12 },
     },
     {
       label: '点位',
       field: 'monitorId',
       component: 'Select',
       slot: 'monitor',
+      required: true,
     },
     {
       label: '值',

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

@@ -44,7 +44,6 @@ const handleItemClick = async (item) => {
   if (!clickId) return;
   currentSelectedId.value = clickId;
   await nextTick();
-  console.log(currentSelectedId.value, '11111');
   refreshData();
 };
 

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

@@ -31,7 +31,6 @@
     </ventBox1>
   </Transition>
 </template>
-
 <script lang="ts" setup>
 import Header from './header.vue';
 import Content from '../../components/content.vue';
@@ -60,10 +59,48 @@ const emit = defineEmits<{
 }>();
 
 const { header } = props.moduleData;
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
 const selectedData = ref();
 const selectedAlarmItem = ref({});
 const alarmBgClass = ref('');
+watch(() => props.data, updateAlarm, { immediate: true });
+watch(() => props.activeId, updateAlarm);
+const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+// 更新报警情况下背景图
+function updateAlarm() {
+  const currentId = props.activeId;
+  if (!currentId || !props.data) {
+    alarmBgClass.value = '';
+    return;
+  }
+  let level = null;
+  Object.values(props.data || {}).some((moduleList) => {
+    if (!Array.isArray(moduleList)) return false;
+    const target = moduleList.find((item) => {
+      const itemId = item.sysId || item.sys_id;
+      return String(itemId) === String(currentId);
+    });
+    if (target) {
+      level = target.alarmLevel ?? target.alarm_level ?? 0;
+      return true;
+    }
+  });
+  switch (String(level ?? 0)) {
+    case '102':
+      alarmBgClass.value = 'alarm-yellow';
+      break;
+    case '103':
+      alarmBgClass.value = 'alarm-orange';
+      break;
+    case '104':
+      alarmBgClass.value = 'alarm-warning';
+      break;
+    case '0':
+    case 'null':
+    default:
+      alarmBgClass.value = 'alarm-normal';
+  }
+}
+
 const handleAlarmItem = (data) => {
   selectedAlarmItem.value = data;
   emit('clickItem', data);
@@ -90,7 +127,6 @@ function redirectTo() {
   if (!to) return;
   openWindow(getFormattedText(props.data, to));
 }
-
 watch(
   () => props.data,
   (d) => {
@@ -101,33 +137,6 @@ watch(
   },
   { immediate: true }
 );
-watch(
-  () => selectedAlarmItem.value?.value,
-  (newVal, oldVal) => {
-    if (newVal === oldVal) return;
-    const val = newVal;
-    switch (val) {
-      case '0':
-      case '101':
-      case '102':
-        alarmBgClass.value = 'alarm-normal';
-        break;
-      case '103':
-        alarmBgClass.value = 'alarm-yellow';
-        break;
-      case '104':
-        alarmBgClass.value = 'alarm-orange';
-        break;
-      case '201':
-      case '1001':
-        alarmBgClass.value = 'alarm-warning';
-        break;
-      default:
-        alarmBgClass.value = 'alarm-normal';
-    }
-  },
-  { immediate: true } // 初始立即执行一次
-);
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';

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

@@ -10,16 +10,18 @@
         <slot name="container"></slot>
       </div>
     </div>
-    <div class="box1-bottom" :class="`box1-bottom-${pageType}`"></div>
+
+    <div v-if="pageType === 'belt'" class="box1-bottom" :class="`${alarmClass}`"></div>
+    <div v-else class="box1-bottom" :class="`box1-bottom-${pageType}`"></div>
   </div>
 </template>
+
 <script setup lang="ts">
-import { onMounted, defineProps } from 'vue';
-// 定义 props
+import { defineProps } from 'vue';
+
 const props = defineProps({
-  pageType: {
-    type: String,
-  },
+  pageType: { type: String },
+  alarmClass: String,
 });
 </script>
 
@@ -32,10 +34,10 @@ const props = defineProps({
   --image-box1-left1: url('/@/assets/images/beltFire/1-4.png');
   --image-box1-mid: url('/@/assets/images/beltFire/1-5.png');
   --image-box1-right: url('/@/assets/images/beltFire/1-6.png');
-  --container-color: #00213236;
-  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
+  --container-color: #022132;
   width: 100%;
   min-height: 80px;
+
   .box1-top {
     width: 65%;
     height: 35px;
@@ -53,12 +55,6 @@ const props = defineProps({
       color: #fff;
     }
   }
-  .box1-top-beltYjkf {
-    margin-top: 13px;
-  }
-  .box1-top-fireMonitorMid {
-    width: 30% !important;
-  }
   .box1-center {
     width: 93%;
     margin-left: 15px;
@@ -70,6 +66,45 @@ const props = defineProps({
       color: #fff;
     }
   }
+  .box1-bottom {
+    width: 100%;
+    height: 97%;
+    position: absolute;
+    bottom: 0px;
+    pointer-events: none;
+    z-index: -1 !important;
+    background-size: 100% 100%;
+    background-image: var(--image-box1-bottom);
+  }
+
+  /* 默认正常样式 */
+  .box1-bottom.alarm-normal {
+    background-image: var(--image-box1-bottom);
+  }
+  .box1-bottom.alarm-normal.beltYjkf,
+  .box1-bottom.alarm-normal.beltYjkf1 {
+    background-image: var(--image-box1-bottom1);
+  }
+
+  /* 黄色告警 */
+  .box1-bottom.alarm-yellow {
+    background-image: url('/@/assets/images/beltFire/1-2-1.png');
+  }
+  /* 橙色告警 */
+  .box1-bottom.alarm-orange {
+    background-image: url('/@/assets/images/beltFire/1-2-3.png');
+  }
+  /* 红色告警 */
+  .box1-bottom.alarm-warning {
+    background-image: url('/@/assets/images/beltFire/1-2-2.png');
+  }
+
+  .box1-top-beltYjkf {
+    margin-top: 13px;
+  }
+  .box1-top-fireMonitorMid {
+    width: 30% !important;
+  }
   .box1-center-fireMonitorMid {
     margin-left: 30px !important;
     margin-bottom: 10px !important;
@@ -84,34 +119,20 @@ const props = defineProps({
     height: calc(100% - 73px);
     margin-top: 50px;
   }
-  .box1-bottom {
-    width: 100%;
-    height: 97%;
-    position: absolute;
-    bottom: 0px;
-    pointer-events: none;
-    z-index: -1 !important;
-  }
-  // 默认样式
-  .box1-bottom {
-    background: var(--image-box1-bottom) no-repeat;
+  .box1-bottom-fireMonitorLeft {
+    background: var(--image-box1-left1) no-repeat;
     background-size: 100% 100%;
   }
   .box1-bottom-beltYjkf1 {
-    background: var(--image-box1-bottom1) no-repeat;
+    background: var(--image-box1-left1) no-repeat;
     background-size: 100% 100%;
   }
   .box1-bottom-beltYjkf {
-    background: var(--image-box1-bottom1) no-repeat;
-    background-size: 100% 100%;
-  }
-  .box1-bottom-fireMonitorLeft {
     background: var(--image-box1-left1) no-repeat;
     background-size: 100% 100%;
   }
   .box1-bottom-fireMonitorMid {
     background: var(--image-box1-mid) no-repeat !important;
-    background-size: 100% 100% !important;
   }
 }
-</style>
+</style>