hvac-web/src/views/real-time-monitor/device-control/DeviceControl.vue

<script setup lang="ts">
import { computed, ref } from 'vue';

import { t } from '@/i18n';
import { addUnit } from '@/utils';

import AdvancedSettings from './AdvancedSettings.vue';
import AIOptimization from './AIOptimization.vue';
import AIStartStop from './AIStartStop.vue';

import type { Component, CSSProperties } from 'vue';

interface ConfigItem {
  label: string;
  component: Component;
  style?: CSSProperties;
}

const activeConfigIndex = ref(-1);

const configs = computed<ConfigItem[]>(() => {
  return [
    { label: t('realTimeMonitor.aiStartStop'), component: AIStartStop },
    { label: t('realTimeMonitor.aiOptimization'), component: AIOptimization },
    {
      label: t('common.advancedSettings'),
      component: AdvancedSettings,
      style: {
        paddingBlock: addUnit(16),
      },
    },
  ];
});

const showCtrlPanel = computed(() => {
  return activeConfigIndex.value !== -1;
});

const toggleConfig = (index: number) => {
  if (activeConfigIndex.value === index) {
    closeCtrlPanel();
  } else {
    activeConfigIndex.value = index;
  }
};

const closeCtrlPanel = () => {
  activeConfigIndex.value = -1;
};

defineExpose({
  closeCtrlPanel,
});
</script>

<template>
  <div class="ctrl-button-conatiner top-1/2 flex flex-col -translate-y-1/2" @click.stop>
    <div
      :class="['ctrl-button', { 'ctrl-button-active': activeConfigIndex === index }]"
      v-for="(item, index) in configs"
      :key="index"
      :style="item.style"
      @click="toggleConfig(index)"
    >
      <div class="corner-border lt-border"></div>
      <div class="corner-border rt-border"></div>
      <div class="corner-border lb-border"></div>
      <div class="corner-border rb-border"></div>
      {{ item.label }}
    </div>
    <div class="ctrl-panel" v-if="showCtrlPanel">
      <div class="ctrl-panel-title">{{ configs[activeConfigIndex].label }}</div>
      <component :is="configs[activeConfigIndex].component" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ctrl-button-conatiner {
  position: fixed;
  right: 16px;
  margin-inline: 16px;
}

.ctrl-button {
  position: relative;
  width: 32px;
  height: 96px;
  padding: 8px;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
  cursor: pointer;
  background-color: #323a47;
  border: 1px solid rgb(134 141 152 / 40%);
  box-shadow: inset 0 0 3px 0 rgb(255 255 255 / 24%);

  & + & {
    margin-top: 16px;
  }
}

.ctrl-button-active {
  background-color: var(--antd-color-primary);
  border: 1px solid rgb(255 255 255 / 50%);
  box-shadow: inset 0 0 6px 1px rgb(255 255 255 / 70%);

  .corner-border {
    --corner-border-color: #fff;
  }
}

.ctrl-panel {
  position: absolute;
  top: -147px;
  right: 48px;
  width: 464px;
  height: 630px;
  padding: 24px;
  background: rgb(30 37 48 / 50%);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 8px;
}

.ctrl-panel-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: #fff;
}

:deep(.ant-switch) {
  background: rgb(255 255 255 / 25%);

  &:hover:not(.ant-switch-disabled) {
    background: rgb(255 255 255 / 45%);
  }

  &.ant-switch-checked {
    background: var(--antd-color-primary);

    &:hover:not(.ant-switch-disabled) {
      background: var(--antd-color-primary-hover);
    }
  }
}
</style>