mky-vent-base/src/views/vent/home/configurable/components/preset/nitrogenBtnList.vue

<template>
  <div class="buttons-wrapper">
    <div class="button-group-container" v-for="(btn, index) in buttonList" :key="index" :class="index % 2 === 0 ? 'green-item' : 'blue-item'">
      <div class="button-name">{{ btn.label }}</div>
      <div class="radio-card" @click="toggleStatus(btn, index)">
        <a-radio class="radio-dot" v-model="btn.value" :value="true"></a-radio>
      </div>
    </div>
  </div>
  <ConfirmModal v-model:visible="modalVisible" @cancel="handleCancel" @confirm="handleConfirm" class="btn-confirm-modal"> </ConfirmModal>
</template>

<script setup lang="ts">
import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal1.vue';
import { ref, inject, onMounted } from 'vue';
import { InputPassword, message } from 'ant-design-vue';
import { deviceControlApi } from '/@/api/vent/index';
const globalConfig = inject<any>('globalConfig');

let props = defineProps({
  data: Object,
  buttonList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
// 定义按钮项的类型
interface ButtonItem {
  isShowInput: boolean;
  inputContent: string;
  inputValue: string | number;
  value: string | number;
  label: string;
  content: string;
}
const password = ref('');
const inputWarn = ref('密码错误请重新输入');
const modalVisible = ref(false);
const currentButton = ref({}); // 记录当前点击的按钮
const toggleStatus = (btn: ButtonItem, index) => {
  modalVisible.value = !modalVisible.value;
  console.log(btn, '按钮信息');
  currentButton.value = btn;
};
// 注入祖父组件提供的处理函数
const handleButtonConfirm = inject<(button: ButtonItem) => void>(
  'handleButtonConfirm',
  () => console.warn('未提供handleButtonConfirm函数') // 默认值，避免报错
);
/**
 * 处理密码确认回调
 */
const handleConfirm = async (inputPassword: string) => {
  try {
    const data = {
      paramcode: currentButton.value.value,
      password: inputPassword || globalConfig?.simulatedPassword,
      devicetype: props.data.deviceType,
      value: !currentButton.value.value,
      deviceid: props.data.deviceID,
    };
    deviceControlApi(data).then((res) => {
      if (res.success) {
        message.success('指令已下发成功！');
      } else {
        message.error(res.message);
      }
      modalVisible.value = false;
    });
    currentButton.value.value = !currentButton.value.value;
    message.success('操作成功');
    modalVisible.value = false; // 关闭弹窗
    return true;
  } catch (err: any) {
    message.error(err.message);
    return false; // 保持弹窗打开
  }
};

/**
 * 处理弹窗取消回调
 */
const handleCancel = () => {
  console.log('关闭弹窗');
  password.value = '';
  inputWarn.value = '';
  modalVisible.value = false;
};
onMounted(() => {});
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'douyuFont';
  src: url('../../../../assets/font/douyuFont.otf');
}
/* 外层容器：适配多按钮组的布局（网格/横向排列可选） */
.buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

/* 单个按钮组容器 */
.button-group-container {
  height: 80px;
  width: 28%;
  margin: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.blue-item {
  background: url('/@/assets/images/home-container/configurable/blueBtn.png') no-repeat;
  background-size: 100% 100%;
  .button-name {
    margin-top: 18px;
    color: #05beee;
    font-family: 'douyuFont';
    font-size: 12px;
  }
}
.green-item {
  background: url('/@/assets/images/home-container/configurable/greenBtn.png') no-repeat;
  background-size: 100% 100%;
  .button-name {
    margin-top: 18px;
    color: #2bfedc;
    font-family: 'douyuFont';
    font-size: 12px;
  }
}

.radio-card {
  display: flex;
  align-items: center;
  cursor: pointer;
  cursor: pointer;
  margin-left: 27px;
  margin-top: 5px;
}

.radio-dot {
  margin-left: 30px;
  margin-right: 5px;
}

.radio-text {
  color: #fff;
  font-size: 12px;
}

.radio-dot input {
  display: none;
}
.btn-confirm-modal {
  .zxm-modal-content {
    height: 240px !important;
    .zxm-modal-body {
      height: 187px !important;
      padding-top: 33px !important;
    }
    .zxm-modal-footer {
      text-align: center;
    }
  }
}
.pswInput {
  margin-top: 55px;
  width: 50%;
  margin-left: 25% !important;
}
.warn-text {
  color: red;
  font-size: 15px;
}
</style>