SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs1.vue

<template>
  <!-- 照明区域 -->
  <div>
    <div class="light-area">
      <div class="light-area-tab"></div>
      <span class="light-area-text"> 照明区域 </span>
      <button class="plan" :class="{ enabled: isPlanEnabled, disabled: !isPlanEnabled }" @click="togglePlan">
        {{ isPlanEnabled ? '计划启用' : '计划禁用' }}
      </button>
    </div>
    <!-- 照明区域按钮部分 -->
    <div class="area">
      <template v-if="!showAllButtonsArea">
        <button v-for="(button, index) in limitedButtons1" :key="index"
          :class="{ btn: true, selected: button.selected }" @click="selectButton(button)">
          {{ button.label }}
        </button>
        <div style="margin-top: 10px">
          <span @click="showAllButtonsArea = true" class="openzm"><down-outlined /> 展开</span>
        </div>
      </template>
      <template v-else>
        <button v-for="(button, index) in props.treeData" :key="index" :class="{ btn: true, selected: button.selected }"
          @click="selectButton(button)">
          {{ button.label }}
        </button>
        <div style="margin-top: 10px">
          <span @click="showAllButtonsArea = false" class="openzm"><up-outlined /> 回缩</span>
        </div>
      </template>
    </div>
  </div>
  <!-- 照明回路部分 -->
  <div>
    <div class="circuit-area" v-if="selectedButton">
      <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" v-if="selectedButton">
      <template v-if="!showAllButtons">
        <button v-for="(button2, index) in limitedButtons2" :key="index"
          :class="{ btn: true, selected: button2.selected }" class="zmhlbtn" @click="toggleSelection(button2)">
          <stop-outlined v-if="button2.stop" />
          {{ button2.label }}
        </button>
        <div style="margin-top: 10px">
          <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
        </div>
      </template>
      <template v-else>
        <button v-for="(button2, index) in buttons2" :key="index" :class="{ btn: true, selected: button2.selected }"
          @click="toggleSelection(button2)">
          {{ button2.label }}
        </button>
        <div style="margin-top: 10px">
          <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
        </div>
      </template>
    </div>
  </div>
  <!-- 控制模式 -->
  <div>
    <div class="control-area" v-show="showControlMode">
      <div class="control-tab"></div>
      <span class="control-text"> 控制模式 </span>
    </div>
    <!-- 控制模式按钮部分 -->
    <div class="control-mode-btn-area" v-show="showControlMode">
      <button v-for="(button3, index) in controlType" :key="index"
        :class="{ btn: true, selected: button3.type == thisButton.type }" @click="selectButton3(button3)">
        {{ button3.name }}
      </button>
    </div>
  </div>
  <!-- 控制场景 -->
  <div>
    <div class="control-scene-area" v-show="showControlScene">
      <div class="control-scene-tab"></div>
      <span class="control-scene-text"> 控制场景 </span>
    </div>
    <!-- 控制场景按钮部分 -->
    <div class="control-scene-btn-area" v-show="showControlScene">
      <button v-for="(button4, index) in controlSceneButtons" :key="index"
        :class="{ btn: true, selected: button4.label === selectedButton4 }" @click="selectButton4(button4)">
        {{ button4.label }}
      </button>
    </div>
  </div>
  <!-- 灯具参数 -->
  <div>
    <div class="light-parameters-area" v-if="selectedButton4">
      <div class="light-parameters-tab"></div>
      <span class="light-parameters-text"> 灯具参数 </span>
    </div>
    <div class="light-parameters-textarea" v-if="selectedButton4">
      <table class="custom-table table1">
        <thead>
          <tr :style="{ background: 'rgba(35,45,69)' }">
            <th>开启数量</th>
            <th>亮度(lux)</th>
            <th>色温</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in lightSource" :key="index" @click="handleRowClick(row.num)"
            :style="{ height: '50px' }">
            <td>{{ row.num }}</td>
            <td>{{ row.light }}</td>
            <td>{{ row.temperature }}</td>
          </tr>
        </tbody>
      </table>
      <div style="margin-bottom: 60px;"></div>
    </div>
  </div>
  <div class="bottom">
    <button class="flushed" @click="refresh">刷新</button>
    <button class="execute" @click="showModal">执行</button>
  </div>

  <div class="out-dialog" v-if="executeVisible">
    <div class="content" v-if="executeVisible">
      <div>
        <div class="div-operation"></div>
        <span class="text-operation">变更内容 </span>
      </div>
      <div class="j-box" v-for="item in cxList" :key="item.id">
        <div class="journal" style="margin-top: 20px">
          <div class="imgText">
            <div class="zjzm">
              <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
              <span class="title-text" style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)">{{ item.name }}</span>
            </div>
            <button class="cxbtn" @click="delBtn(item.id)">撤销</button>
          </div>
          <div class="btn-box">
            <div class="btn-item">
              <div class="left">控制模式</div>
              <div class="right">
                <span>手动</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>自动</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left">
                亮度
              </div>
              <div class="right">
                <span>100lux</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>30lux</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left">
                控制场景
              </div>
              <div class="right">
                <span>手动</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>自动</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left">
                色温
              </div>
              <div class="right">
                <span>4000k</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>3800k</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 60px;"></div>
    <div class="button-box">
      <button class="cancel" @click="executeVisible = false">取消</button>
      <button class="execute">执行</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { controlType } from './treeData'
import {
  DownOutlined,
  UpOutlined,
  StopOutlined,
} from '@ant-design/icons-vue';

// 初始化
onMounted(() => {
  const data = props.treeData[0]
  // 默认选中第一个分区
  data.selected = true
  // 默认展示第一个分区的回路
  buttons2.value = data.children
})

// 与父组件的交互  ===================================================================
const props = defineProps({
  // 分区结构（照明区域 > 照明回路）
  treeData: {
    type: Array,
    default: []
  },
  line: {
    type: Array
  }
});
const emit = defineEmits(['changeArea']);

// 照明区域 ==========================================================================

// 照明区域 - 计划启用状态
const isPlanEnabled = ref(false);
// 照明区域 - 计划启用切换事件
const togglePlan = () => {
  isPlanEnabled.value = !isPlanEnabled.value;
};

// 照明区域 - 按钮区展开与收起状态
const showAllButtonsArea = ref(false);
// 照明区域 - 分区 - 被选中的按钮  默认为1
const selectedButton = ref('1');
// 照明区域 - 区域切换（按钮点击-单选）事件
const selectButton = (button: any) => {
  // 当前选中按钮
  selectedButton.value = button;
  // 重置
  initMenu(1)
  button.selected = true
  buttons2.value = button.children
  // 反选area
  emit('changeArea', []);
  emit('changeArea', button.id);
};
// 照明区域 - 默认最多展示8个按钮
const limitedButtons1 = computed(() => props.treeData.slice(0, 8));

// 照明回路 ==========================================================================

// 照明回路 - 最近交互过的按钮，用于禁用和启用
const zmhlid = ref('');

// 照明回路 - 全选状态
const selectAllCheckbox = ref(false);

// 照明回路 - 面板启用/禁用状态
const isPlanEnabled2 = ref(true);
// 照明回路 - 面板启用/禁用切换事件
const togglePlan2 = () => {
  // 获取最近交互的按钮
  const item = buttons2.value.find((button) => button.id === zmhlid.value)
  isPlanEnabled2.value = !isPlanEnabled2.value;
  // 禁用 - 则取消选中，增加禁止图标
  if (isPlanEnabled2.value) {
    item.stop = true
    // 启用 - 去除禁止图标
  } else {
    item.stop = false
  }
};

// 照明回路 - 多选与单选切换事件
const selectAll = () => {
  emit('changeArea', [String(selectedButton.value.id)])
  selectAllCheckbox.value = false
  buttons2.value.forEach((button) => {
    button.selected = false;
  });
  singleSelection.value = !singleSelection.value;
  showControlMode.value = false
};

// 照明回路 - 是否单选，状态
let singleSelection = ref(true);
// 照明回路 - 全选切换事件（switch）
const toggleAllSelection = () => {
  let arr = [String(selectedButton.value.id)]
  // 全选
  if (selectAllCheckbox.value) {
    buttons2.value.forEach((item) => {
      item.selected = true;
      arr.push(item.id)
    });
    // 全不选
  } else {
    buttons2.value.forEach((item) => {
      item.selected = false;
    });
    showControlMode.value = false
  }
  emit('changeArea', arr)
};

// 照明回路 - 按钮切换
const toggleSelection = (button: any) => {
  // 存储一次按钮ID，用于禁用/启用交互
  zmhlid.value = button.id
  // 如果已被锁定，则展示禁用/启用状态跳出
  if (button.stop) {
    isPlanEnabled2.value = true
  } else {
    isPlanEnabled2.value = false
  }

  // 选择时反控俯视图
  let level1 = String(selectedButton.value.id)
  let level2 = button.id
  // 单选模式，需将所有按钮设为false
  if (singleSelection.value) {
    buttons2.value.forEach(item => {
      item.selected = false;
    });
    emit('changeArea', [level1, level2])
    button.selected = !button.selected;
  } else {
    // 多选模式传值
    button.selected = !button.selected;
    const arr = [level1]
    buttons2.value.forEach(item => {
      if (item.selected) {
        arr.push(item.id)
      }
    });
    emit('changeArea', arr)
  }
  // 用于展示控制模式
  if (button.selected) {
    // 发生了选中事件
    showControlMode.value = true
    thisButton.value = button
    if (button.type == 3) {
      showControlScene.value = true
    } else {
      showControlScene.value = false
    }
  } else {
    // 未发生选中 或 多选被取消
    showControlMode.value = false
    thisButton.value = { type: '0' }
  }

};
// 照明回路 - 按钮区展开与收起状态
const showAllButtons = ref(false);
// 照明回路 - 默认最多展示8个按钮
const limitedButtons2 = computed(() => buttons2.value.slice(0, 8));
// 照明回路 - 所有按钮
const buttons2 = ref([]);

// 控制模式 =======================================================================
// 控制模式 - 决定该区域是否显示
const showControlMode = ref(false);
const thisButton = ref({ type: '0' })
// 控制模式 - 按钮切换
const selectButton3 = (button3) => {
  thisButton.value.type = button3.type
  showControlScene.value = button3.name === '手动';
  selectedButton4.value = null; // 清空选中的控制场景按钮
};

// 控制场景 =======================================================================
// 控制场景 - 决定该区域是否显示
const showControlScene = ref(false);
// 控制场景 - 所有按钮
const controlSceneButtons = ref([
  { label: '检修', selected: false },
  { label: '午休', selected: false },
  { label: '疏散', selected: false },
  { label: '客流高峰', selected: false },
]);
// 控制场景 - 当前选择按钮
const selectedButton4 = ref(null);
// 控制场景 - 按钮切换
const selectButton4 = (button4) => {
  selectedButton4.value = button4.label;
};

// 灯具参数 ========================================================================
// 灯具参数 - 表格数据
const lightSource = ref([{ num: '8/10', light: '100', temperature: '4200' }]);

let trIndex = ref('-1');
const handleRowClick = (index: any) => {
  trIndex.value = index;
  if (index === trIndex.value) {
    console.log('tri');
  }
};

// 内侧弹窗 ========================================================================
const cxList = ref([
  {
    id: '1',
    name: '站厅照明  1区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '自动',
    brightness3: '4000k',
    brightness4: '3800k',
  },
  {
    id: '2',
    name: '站厅照明  2区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '自动',
    brightness3: '4000k',
    brightness4: '3800k',
  },
  {
    id: '3',
    name: '站厅照明  3区',
    manual: '手动',
    automatic: '自动',
    brightness: '100lux',
    brightness2: '30lux',
    manual2: '手动',
    automatic2: '自动',
    brightness3: '4000k',
    brightness4: '3800k',
  },
]);
// const cxList = cxList.value.concat(cxList.value)
//撤销
const delBtn = (id: any) => {
  console.log(id);
  cxList.value.pop(id);
  console.log(cxList.value.length);

  if (cxList.value.length === 0) {
    executeVisible.value = false;
  }
};
// 其他业务 ========================================================================

// 用于初始化5级联动的菜单
const initMenu = (tier: number) => {
  // 1 = 照明区域 - 切换时，重置以下所有菜单
  if (tier == 1) {
    // 切换前，清除照明回路的选中状态
    buttons2.value.forEach(item => {
      item.selected = false
    })
    // 切换后，清空所有选中状态
    props.treeData.forEach(item => {
      item.selected = false
    })
    // 控制模式 隐藏
    showControlMode.value = false;
    // 控制场景 隐藏
    showControlScene.value = false;
    // 灯具参数 隐藏
    selectedButton4.value = null;
  } else if (tier == 2) {
    // 控制场景 隐藏
    showControlScene.value = false;
    // 灯具参数 隐藏
    selectedButton4.value = null;
  }
}
// 刷新
const refresh = () => {
  executeVisible.value = false
  selectedButton.value = '1';
  emit('changeArea', []);
  emit('changeArea', [1]);
  showControlMode.value = false;
  showControlScene.value = false;
  selectedButton4.value = null;
};
// 执行确认
const executeVisible = ref<boolean>(false);
const showModal = () => {
  executeVisible.value = true;
};
</script>
<style lang="less" scoped>
@import "./dialogStyle.less";

// 抽屉
.drawer-item {

  .light-area,
  .circuit-area,
  .control-area,
  .control-scene-area,
  .light-parameters-area {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }

  .light-area-tab,
  .circuit-tab,
  .control-tab,
  .control-scene-tab,
  .light-parameters-tab {
    width: 5px;
    height: 23px;
    opacity: 1;
    background: rgba(26, 174, 251, 1);
    margin-right: 4px;
  }

  .light-area-text,
  .circuit-text,
  .control-text,
  .control-scene-text,
  .light-parameters-text {
    font-size: 14px;
    color: white;
    padding-left: 5px;
    line-height: 23px;
    width: 110px;
    height: 23px;
    background: linear-gradient(270deg, rgba(86, 221, 253, 0) 0%, rgba(25, 176, 255, 1) 100%);
    user-select: none;
  }

  .light-area-tab,
  .light-area-text {
    display: inline-block;
    justify-content: center;
  }

  .plan.enabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    vertical-align: top;
    margin-left: 235px;
    width: 88px;
    height: 32px;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    color: white;
  }

  .plan.disabled {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: white;
    vertical-align: top;
    margin-left: 235px;
    width: 88px;
    height: 32px;
    background-color: red;
  }

  .plan:disabled {
    cursor: not-allowed;
  }

  .openPlan.enabled2 {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: white;
    vertical-align: top;
    width: 88px;
    height: 32px;
    background: linear-gradient(180deg, rgba(103, 222, 0, 1) 0%, rgba(0, 181, 6, 1) 100%);
    color: white;
  }

  .openPlan.disabled2 {
    border: none;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    color: white;
    vertical-align: top;
    width: 88px;
    height: 32px;
    background-color: red;
  }

  .openPlan:disabled {
    cursor: not-allowed;
  }

  .btn2 {
    display: flex;
    align-items: center;
    margin-left: 80px;
  }

  .openzm {
    cursor: pointer;
    color: rgba(34, 183, 255, 1);
    margin-left: 20px;
    font-size: 14px;
  }

  .custom-checkbox {
    width: 13px;
    height: 13px;
  }

  .both {
    width: 59.79px;
    height: 32px;
    opacity: 1;
    background: linear-gradient(180deg,
        rgba(255, 187, 0, 1) 0%,
        rgba(255, 112, 3, 1) 91.21%,
        rgba(255, 129, 3, 1) 100%);
    margin-left: 8px;
    font-size: 12px;
    color: white;
    border: none;
    border-radius: 5px;
  }

  .btn2 {
    button {
      margin: 0 5px;
    }
  }

  .allBtn {
    border: 0;
    width: 40px;
    color: white;
    background-color: transparent;
  }

  .blue-background.ant-switch-checked {
    background-color: linear-gradient(180deg,
        rgba(1, 206, 255, 1) 0%,
        rgba(0, 150, 229, 1) 100%) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(180deg,
        rgba(1, 206, 255, 1) 0%,
        rgba(0, 150, 229, 1) 100%) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }

  p {
    color: white;
  }

  .area,
  .btnArea,
  .control-mode-btn-area,
  .control-scene-btn-area {
    margin-left: -17px;

    button {
      width: 21%;
      padding: 0 2%;
    }
  }

  .btn {
    width: 92px;
    height: 40px;
    border-radius: 4px;
    opacity: 1;
    margin-top: 10px;
    margin-left: 17px;
    font-size: 14px;
    font-weight: 400;
    opacity: 1;
    border: 1px solid rgba(207, 212, 219, 1);
    line-height: 20.27px;
    color: white;
    text-align: center;
    vertical-align: top;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .selected {
    background: linear-gradient(180deg, rgba(201, 245, 255, 1) 0%, rgba(138, 215, 255, 1) 100%);
    color: rgba(0, 61, 90, 1);
    border: 1px solid white;
  }

  .btn:hover {
    background-color: rgba(207, 212, 219, 1);
  }

  .btn:active {
    background-color: rgba(102, 102, 102, 1);
    color: white;
  }

  .circuit-area,
  .control-scene-area,
  .light-parameters-area {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .circuit-tab,
  .circuit-text {
    display: inline-block;
  }

  .batch {
    width: 60px;
    height: 32px;
    opacity: 1;
    border: 1px solid rgba(67, 136, 251, 1);
    color: rgba(67, 136, 251, 1);
    border-radius: 5px;
    background-color: white;
    margin-left: 11px;
  }

  .control-area {
    left: 51px;
    width: 100%;
    margin-top: 20px;
  }

  .control-tab,
  .control-text {
    display: inline-block;
  }

  :deep(.cell) {
    text-align: center;
  }

  :deep(#pane-first) {
    height: 100%;
  }

  .control-scene-tab,
  .control-scene-text {
    display: inline-block;
  }

  .light-parameters-tab,
  .light-parameters-text {
    display: inline-block;
  }

  .light-parameters-textarea>p {
    height: 100%;
    display: flex;
    border: 1px solid rgba(236, 239, 245, 1);
    justify-content: center;
    align-items: center;
  }

  .bottom {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
  }

  .execute {
    margin-right: 20px;
    width: 74px;
    height: 40px;
    opacity: 1;
    cursor: pointer;
    border-radius: 4px;
    background: rgba(67, 136, 251, 1);
    font-size: 14px;
    font-weight: 400;
    color: white;
    border: 0;
    margin-left: 10px;
  }

  .flushed {
    width: 74px;
    height: 40px;
    cursor: pointer;
    opacity: 1;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    background: white;
    border: 1px solid rgba(193, 197, 204, 1);
  }

  :deep(.ant-table-pagination) {
    visibility: hidden;
  }

  .drawer-content {
    margin-left: 20px;
  }

  .arrow-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
  }

  .drawer-title1 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    z-index: 99999;
  }

  .drawer-title2 {
    position: fixed;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    right: 495px;
    margin: auto;
    z-index: 99999;
  }

  .arrowbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 1);
    opacity: 0.5;
    border: none;
  }

  :deep(.ant-tabs-tab-btn) {
    color: white;
  }

  :deep(.ant-table) {
    background-color: transparent;
  }

  :deep(.ant-table-bordered) {
    background-color: transparent;
  }

  :deep(.ant-table-thead) {
    background-color: transparent;
  }

  :deep(.ant-table-cell) {
    background-color: transparent;
    color: #fff;
  }

  .custom-table {
    border-collapse: collapse;
    width: 416px;
    height: 60px;
    color: rgba(255, 255, 255, 1);
  }

  .custom-table th,
  .custom-table td {
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: left;
    padding: 8px;
    text-align: center;
  }

  .table1 {
    margin-top: 20px;
    width: 100%;
    cellspacing: 0;
    cellpadding: 0;
    border: 1px solid rgba(255, 255, 255);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
  }

  .light-area,
  .circuit-area,
  .control-area,
  .control-scene-area,
  .light-parameters-area {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
  }

  .zmhlbtn {
    position: relative;
  }

  // 禁用图标
  .anticon-stop {
    position: absolute;
    right: 3px;
    bottom: 3px;
  }
}
</style>