[Feat 0000]除尘装置控制系统页面按钮增加点击事件与弹窗

src/views/vent/home/configurable/components/preset/buttonList.vue

@@ -3,30 +3,34 @@
     <div :class="`button-block_${type}`" v-if="type === 'A'">
       <div :class="`button-item_${type}`" v-for="button in buttonList" :key="button.value">
         <div v-if="button.isShowInput" :class="`input-area_${type}`">
-          <a-input v-model:value="inputValue" :placeholder="button.input" />
-          <a-button type="primary">{{ button.label }}</a-button>
+          <a-input v-model:value="button.inputValue" :placeholder="button.inputContent" />
+          <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
         </div>
         <div v-else>
-          <a-button type="primary">{{ button.label }}</a-button>
+          <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
         </div>
       </div>
     </div>
-  </div>
-  <div :class="`button-block_${type}`" v-if="type === 'B'">
-    <!-- 遍历分组后的按钮组 -->
-    <div :class="`button-group_${type}`" v-for="(group, groupIndex) in groupedButtons" :key="groupIndex">
-      <!-- 遍历每组中的按钮 -->
-      <div :class="`button-item_${type}`" v-for="button in group" :key="button.value">
-        <a-button type="primary">{{ button.label }}</a-button>
+    <div :class="`button-block_${type}`" v-if="type === 'B'">
+      <!-- 遍历分组后的按钮组 -->
+      <div :class="`button-group_${type}`" v-for="(group, groupIndex) in groupedButtons" :key="groupIndex">
+        <!-- 遍历每组中的按钮 -->
+        <div :class="`button-item_${type}`" v-for="button in group" :key="button.value">
+          <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
+        </div>
       </div>
     </div>
   </div>
+  <ConfirmModal v-model:visible="modalVisible" @ok="handleConfirm">
+    <SvgIcon class="icon" size="34" name="warning-icon-gas" />
+    <span> {{ currentButton?.content }} </span>
+  </ConfirmModal>
 </template>
 
 <script lang="ts" setup>
   defineOptions({ name: 'ButtonList' });
-
-  import { computed, onMounted, ref, watch } from 'vue';
+  import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal.vue';
+  import { computed, ref, inject } from 'vue';
   // 定义组件属性
   const props = defineProps<{
     type: string;
@@ -36,17 +40,16 @@
   // 定义按钮项的类型
   interface ButtonItem {
     isShowInput: boolean;
-    input: string;
+    inputContent: string;
+    inputValue: string | number;
     value: string | number;
     label: string;
+    content: string;
     // 可以根据实际需求添加其他属性
   }
-  const inputValue = ref<string>('');
-  // 组件挂载时初始化一次
-  onMounted(() => {
-    console.log(props);
-    // 设置默认选中项
-  });
+  const modalVisible = ref(false);
+  const currentButton = ref<ButtonItem | null>(null); // 记录当前点击的按钮
+
   const groupedButtons = computed<ButtonItem[][]>(() => {
     if (props.type !== 'B') return [];
     const groups: ButtonItem[][] = [];
@@ -55,17 +58,19 @@
     }
     return groups;
   });
-
-  watch(
-    () => props.config,
-    (newV) => {
-      console.log(newV, 'debuger---');
-    },
-    {
-      deep: true,
-      immediate: true,
-    }
+  // 注入祖父组件提供的处理函数
+  const handleButtonConfirm = inject<(button: ButtonItem) => void>(
+    'handleButtonConfirm',
+    () => console.warn('未提供handleButtonConfirm函数') // 默认值，避免报错
   );
+  const handleData = (button: ButtonItem) => {
+    modalVisible.value = !modalVisible.value;
+    currentButton.value = button;
+  };
+  const handleConfirm = () => {
+    if (!currentButton.value) return;
+    handleButtonConfirm(currentButton.value);
+  };
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/components/preset/radioLabel.vue

@@ -5,7 +5,7 @@
         <span>{{ props.config.leftLabel }}</span>
       </div>
       <div :class="`left-label_${type}`" v-if="props.config.isShowRadio">
-        <a-radio-group v-model:value="defaultValue" :options="options" @change="handleRadioChange" />
+        <a-radio-group v-model:value="defaultValue" :options="options" @change="handleChange" />
       </div>
       <div :class="`right-label_${type}`" v-else>
         <span>{{ props.config.rightLbel }}</span>
@@ -15,10 +15,9 @@
 </template>
 
 <script lang="ts" setup>
-  // Set a multi-word component name to follow Vue style guide
   defineOptions({ name: 'PresetRadio' });
 
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, inject } from 'vue';
   import { RadioGroupProps } from 'ant-design-vue';
   // 定义组件属性
   const props = defineProps<{
@@ -26,8 +25,6 @@
     config: any;
   }>();
 
-  // 获取组件根DOM元素
-  const radioContainer = ref<HTMLDivElement>();
   // 定义选项数据
   let options: RadioGroupProps['options'] = [];
   // 定义各个单选组的默认值
@@ -35,7 +32,6 @@
   // 组件挂载时初始化一次
   onMounted(() => {
     initData();
-    console.log(props);
     // 设置默认选中项
   });
   // 初始化数据
@@ -47,33 +43,16 @@
       defaultValue.value = props.config.defaultValue || '';
     }
   };
+  // 注入祖父组件提供的处理函数（关键：跨层级获取）
+  const handleRadioChange = inject<(value: string) => void>(
+    'handleRadioChange', // 注入的key，需与祖父组件保持一致
+    () => console.warn('未提供handleRadioChange函数') // 默认值，避免报错
+  );
+
   // 处理单选框变化，触发原生DOM事件
-  const handleRadioChange = (value: string) => {
-    if (radioContainer.value) {
-      // 创建自定义原生事件，携带选中值（通过event.detail传递）
-      const event = new CustomEvent('radio-value-change', {
-        detail: {
-          value,
-        },
-        bubbles: true, // 允许事件冒泡
-        cancelable: true,
-      });
-      console.log('debuger', event);
-      // 触发事件
-      radioContainer.value.dispatchEvent(event);
-    }
+  const handleChange = (value: string) => {
+    handleRadioChange(value);
   };
-
-  watch(
-    () => props.config,
-    (newV) => {
-      console.log(newV, 'debuger---');
-    },
-    {
-      deep: true,
-      immediate: true,
-    }
-  );
 </script>
 
 <style lang="less" scoped>

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

@@ -173,12 +173,12 @@ export const testConfigDustControl: Config[] = [
           readFrom: '',
           type: 'A',
           buttonList: [
-            { isShowInput: true, input: '水位设置', label: '保存', value: 'save' },
-            { label: '自动补水', value: 'zdbs' },
-            { label: '喷头清洁', value: 'ptqj' },
-            { label: '沉淀清洁', value: 'cdqj' },
-            { label: '开启喷雾', value: 'kqpw' },
-            { label: '停止喷雾', value: 'tzpw' },
+            { isShowInput: true, inputContent: '水位设置', inputValue: '', label: '保存', value: 'save', content: '是否进行保存设置' },
+            { label: '自动补水', value: 'zdbs', content: '是否自动补水' },
+            { label: '喷头清洁', value: 'ptqj', content: '是否喷头清洁' },
+            { label: '沉淀清洁', value: 'cdqj', content: '是否沉淀清洁' },
+            { label: '开启喷雾', value: 'kqpw', content: '是否开启喷雾' },
+            { label: '停止喷雾', value: 'tzpw', content: '是否停止喷雾' },
           ],
         },
       ],
@@ -314,12 +314,12 @@ export const testConfigDustControl: Config[] = [
           readFrom: '',
           type: 'B',
           buttonList: [
-            { label: '自动运行', value: 'ZDYX' },
-            { label: '手动运行', value: 'SDYX' },
-            { label: '就地控制', value: 'JDKZ' },
-            { label: '远程控制', value: 'YCKZ' },
-            { label: '启动风机', value: 'QDKJ' },
-            { label: '停止风机', value: 'TZFJ' },
+            { label: '自动运行', value: 'ZDYX', content: '是否自动运行' },
+            { label: '手动运行', value: 'SDYX', content: '是否手动运行' },
+            { label: '就地控制', value: 'JDKZ', content: '是否就地控制' },
+            { label: '远程控制', value: 'YCKZ', content: '是否远程控制' },
+            { label: '启动风机', value: 'QDKJ', content: '是否启动风机' },
+            { label: '停止风机', value: 'TZFJ', content: '是否停止风机' },
           ],
         },
       ],

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

@@ -30,7 +30,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref, provide } from 'vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import { testConfigDustControl } from './configurable.data.dustControl';
   import ModuleCommon from './components/ModuleCommon.vue';
@@ -43,14 +43,6 @@
   let interval: ReturnType<typeof setInterval> | undefined;
   // 新增：获取容器DOM元素
   const dustControlContainer = ref<HTMLDivElement>();
-  const handleRadioChange = (event: Event) => {
-    // 类型断言，获取事件详情
-    const detail = (event as CustomEvent).detail;
-    if (detail) {
-      console.log('监听到radio切换：', detail.value);
-      // 这里处理业务逻辑
-    }
-  };
   onMounted(() => {
     loading.value = true;
     mountedThree('#dedust3D', ['#dedustCss', '#dedustEnvA', '#dedustEnvB']).then(() => {
@@ -64,24 +56,24 @@
       //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
       // }).then(updateData);
     });
-    // interval = setInterval(() => {
-    // getDisHome({
-    //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    // }).then(updateData);
-    // }, 2000);
-    // 监听自定义原生事件
-    // 在容器上监听事件（事件会从radio组件冒泡到这里）
-    if (dustControlContainer.value) {
-      dustControlContainer.value.addEventListener('radio-value-change', handleRadioChange);
-    }
+    interval = setInterval(() => {
+      // getDisHome({
+      //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      // }).then(updateData);
+    }, 2000);
+  });
+  // 提供处理函数（关键：跨层级传递给buttonList）
+  provide('handleButtonConfirm', (button) => {
+    console.log('祖父组件收到数据：', button);
+    // 对按钮事件进行处理
+  });
+  provide('handleRadioChange', (value) => {
+    console.log('祖父组件收到数据：', value);
+    // 对切换事件进行处理
   });
-
   onUnmounted(() => {
     destroy();
     clearInterval(interval);
-    if (dustControlContainer.value) {
-      dustControlContainer.value.removeEventListener('radio-value-change', handleRadioChange);
-    }
   });
 </script>
 <style lang="less" scoped>