SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/ventilationSystem/components/fanControl.vue

<template>
  <a-spin :spinning="isLoading">
    <!-- 排风扇 -->
    <div>
      <div class="circuit-area">
        <div class="circuit-tab"></div>
        <span class="circuit-text">排风扇</span>
        <div class="btn2">
          <button
            class="openPlan"
            :class="{ enabled2: isPlanEnabled2, disabled2: !isPlanEnabled2 }"
            @click="togglePlan2">
            {{ isPlanEnabled2 ? '启用开关' : '禁用开关' }}
          </button>
          <a-switch
            v-model:checked="selectAllCheckbox"
            :disabled="singleSelection"
            :class="{
              'blue-background': selectAllCheckbox,
              'grey-background': !selectAllCheckbox,
            }"
            @change="toggleAllSelection" />
          <button class="allBtn">全选</button>
          <button class="both" @click="selectAll">
            {{ singleSelection ? '多选' : '单选' }}
          </button>
        </div>
      </div>
      <div class="btnArea">
        <template v-if="!showAllButtons">
          <button
            v-for="(button, index) in limitedButtons2"
            :key="index"
            :class="{ btn: true, selected: button.selected }"
            class="zmhlbtn"
            @click="changeLine(button)">
            <stop-outlined v-if="button.ctrlStatus" />
            {{ button.name }}
          </button>
          <div style="margin-top: 10px" v-if="limitedButtons2.length > 0">
            <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
          </div>
        </template>
        <template v-else>
          <button
            v-for="(button, index) in buttons2"
            :key="index"
            :class="{ btn: true, selected: button.selected }"
            class="zmhlbtn"
            @click="changeLine(button)">
            <stop-outlined v-if="button.ctrlStatus" />
            {{ button.name }}
          </button>
          <div style="margin-top: 10px" v-if="buttons2.length > 0">
            <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
          </div>
        </template>
      </div>
    </div>
    <!-- 控制模式部分 -->
    <div>
      <div class="control-area">
        <div class="control-tab"></div>
        <span class="control-text"> 控制模式 </span>
      </div>
      <!-- 控制模式按钮部分 -->
      <div class="control-mode-btn-area" v-show="thisButton2.code">
        <button
          v-for="(button3, index) in controlMode"
          :key="index"
          class="btn"
          :disabled="button3.value != 3"
          :class="{ selected: thisButton2.mode.value == button3.value }"
          @click="selectButton3(button3)">
          {{ button3.label }}
        </button>
      </div>
    </div>
    <!-- 控制场景 -->
    <div>
      <div class="control-area">
        <div class="control-tab"></div>
        <span class="control-text"> 控制场景 </span>
      </div>
      <!-- 控制模式按钮部分 -->
      <div class="control-mode-btn-area" v-show="thisButton2.code">
        <button
          v-for="(button3, index) in controlMode"
          :key="index"
          class="btn"
          :disabled="button3.value != 3"
          :class="{ selected: thisButton2.mode.value == button3.value }"
          @click="selectButton3(button3)">
          {{ button3.label }}
        </button>
      </div>
    </div>
    <div class="div-add">
      <button class="cancel" @click="addModal">刷新</button>
      <button class="add" @click="addModal">执行</button>
    </div>
  </a-spin>
</template>
<script setup lang="ts">
  import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
  import { ref, computed, onMounted } from 'vue';

  const isLoading = ref(false);
  // 开关启用/禁用状态
  const isPlanEnabled2 = ref(true);
  // 按钮区展开与收起状态
  const showAllButtons = ref(false);
  // 全选状态
  const selectAllCheckbox = ref(false);
  // 控制模式枚举
  const controlMode = ref([]);
  // 是否单选，状态
  let singleSelection = ref(true);
  // 照明回路所有按钮
  const buttons2 = ref([]);
  // 默认最多展示8个按钮
  const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
  // 开关启用/禁用切换事件
  const togglePlan2 = () => {};
  // 内侧弹窗显隐
  const executeVisible = ref<boolean>(false);

  const submitChangeList = () => {};
  // 多选与单选切换事件
  const selectAll = () => {
    selectAllCheckbox.value = false;
    singleSelection.value = !singleSelection.value;
  };
  // 储存当前选中的回路
  const thisButton2 = ref({
    code: '',
    name: '',
    pcode: '',
    mode: {
      value: -1,
    },
    scene: {
      value: -1,
    },
  });
  // 控制模式 - 按钮切换
  const selectButton3 = (button3: any) => {
    let checked = thisButton2.value.mode;
    console.log(button3.value, '---', checked.value);
    // 如果点击了相同的按钮，则未作出修改
    if (checked.value === button3.value) {
      return;
    }
    checked.value = button3.value;
  };

  // 全选切换事件（switch）
  const toggleAllSelection = () => {};
  onMounted(() => {});
</script>
<style lang="less" scoped>
  @import './dialogStyle.less';
  @import './tabs1.less';
  .div-add {
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #606879;
    width: 496px;
    .add {
      width: 74px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: #2778ff;
      border: #2778ff;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
      margin-right: 20px;
    }
    .cancel {
      width: 74px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: #ffffff;
      border: #ffffff;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      cursor: pointer;
      margin-right: 12px;
    }
  }
</style>