SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue

<template>
  <div style="width: 100%; height: 100%">
    <div class="box-title title">
      <span style="margin-left: 12px">空调箱组</span>
    </div>
    <div class="box-center">
      <template v-if="!showAllButtons">
        <template v-for="(item, index) in dataSource.slice(0, 3)" :key="index">
          <div
            class="box-center-button"
            :style="{
              backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
            }"
            @click="selectConditioningData(item, index)">
            {{ item.title }}
          </div>
        </template>
        <div style="width: 100%; height: 20px">
          <span @click="showAllButtons = true" class="openzm"><down-outlined /> 展开</span>
        </div>
      </template>
      <template v-else>
        <template v-for="(item, index) in dataSource" :key="index">
          <div
            class="box-center-button"
            :style="{
              backgroundColor: item.title === selectConditioning.title ? '#a7e5ff' : '#b5cdd9',
            }"
            @click="selectConditioningData(item, index)">
            {{ item.title }}
          </div>
        </template>
        <div style="width: 100%; height: 20px">
          <span @click="showAllButtons = false" class="openzm"><up-outlined /> 回缩</span>
        </div>
      </template>
    </div>
    <div class="box-bottom">
      <div class="box-bottom-items">
        <div class="box-bottom-item-top">
          <img width="42" src="../../image/airConditioningSystem/conditioningModelIcon.png" />
          <div class="box-bottom-item-top-title">
            {{ selectConditioning.title }}
          </div>

          <div style="width: 100%; height: 300px; display: flex; gap: 12px; flex-direction: column">
            <div class="box-bottom-top">
              开关
              <div class="box-bottom-item-line-value">
                <a-switch
                  :disabled="true"
                  :checked="selectConditioning.enableRules === 1 ? true : false"
                  :class="{
                    'blue-background': selectConditioning.enableRules === 1 ? true : false,
                    'grey-background': selectConditioning.enableRules === 1 ? false : true,
                  }" />
              </div>
            </div>
            <div class="box-bottom-center">
              <div style="width: 100%; height: 40px; line-height: 40px">温度 </div>
              <div style="width: 100%; height: 60px">
                <a-slider
                  v-model:value="selectConditioning.number"
                  :marks="marks"
                  :min="0"
                  :max="100"
                  :disabled="true"
                  :trackStyle="{ backgroundColor: '#91caff', height: '5px' }"
                  :handleStyle="{ backgroundColor: '#ffffff', borderColor: '#91caff' }"
                  :railStyle="{ backgroundColor: 'gray' }">
                  <template #mark="{ label, point }">
                    <span style="color: #0dfff2"> {{ label }}</span>
                  </template>
                </a-slider>
              </div>
            </div>
            <div class="box-bottom-center">
              <div style="width: 100%; height: 40px; line-height: 40px"> 风量 </div>
              <div style="width: 100%; height: 60px">
                <a-slider id="test" v-model:value="selectConditioning.number" :disabled="true" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { DownOutlined, UpOutlined, StopOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';

  // defineProps({
  //   dataSource: {
  //     type: Object,
  //     default: () => {
  //       return [];
  //     },
  //   },
  //   selectConditioning: {
  //     type: Object,
  //     default: () => {
  //       return {};
  //     },
  //   },
  // });
  const selectConditioning = ref({});
  const dataSource = ref([]);
  // 向上传递方法
  const emit = defineEmits(['selectConditioningData']);
  const showAllButtons = ref(false);
  const marks = ref<Record<number, any>>({
    0: 0,
    100: 100,
  });
  const toggle = (data: any, selectData: any) => {
    console.log(data, '数据');
    dataSource.value = data;
    selectConditioning.value = selectData;
  };
  const selectConditioningData = (data: any, index: any) => {
    selectConditioning.value = data;
    //向上传递 选择的空调箱
    emit('selectConditioningData', data);
  };
  defineExpose({
    toggle,
  });
</script>
<style lang="less" scoped>
  .title {
    position: relative;
    padding-left: 9px;
    &::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 40%;
      transform: translateY(-50%);
      height: 12px;
      width: 3px;
      border-radius: 1px;
      background-color: #4388fb;
    }
  }
  .box-title {
    color: white;
    padding: 0px 10px;
    font-size: 14px;
    width: 100%;
    height: 30px;
  }
  .box-center {
    width: 100%;
    height: auto;
    padding: 9px;
    color: white;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .box-center-button {
      width: 95px;
      height: 40px;
      background-color: #b5cdd9;
      border: 1px solid #aaaaaa;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
  }
  .box-bottom {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: auto;
    margin-top: 10px;
    overflow-x: hidden;
    .box-bottom-items {
      width: 100%;
      height: 354px;
      background-image: url(../../image/airConditioningSystem/conditioningModelBg.png);
      background-size: 100% 99%;
      background-repeat: no-repeat;
      color: white;
      padding: 8px;
      .box-bottom-item-top {
        width: 100%;
        font-size: 18px;
        padding: 6px 12px;
        position: relative;
      }
      .box-bottom-item-top-title {
        display: flex;
        position: absolute;
        left: 62px;
        top: 7px;
      }
      .box-bottom-item-line-value {
        display: flex;
        position: absolute;
        right: 24px;
        font-weight: bold;
      }
    }
    .box-bottom-top {
      width: 100%;
      height: 50px;
      display: flex;
      position: relative;
      padding: 6px 24px;
      font-size: 14px;
      background-color: #0d1b32;
      align-items: center;
    }
    .box-bottom-center {
      width: 100%;
      height: 100px;
      display: flex;
      position: relative;
      padding: 6px 24px;
      font-size: 14px;
      background-color: #0d1b32;
      flex-direction: column;
    }
  }
  /* 禁用状态下的轨道样式 */
  :deep(.ant-slider-disabled .ant-slider-track) {
    background-color: #91caff !important; /* 自定义颜色 */
  }

  /* 禁用状态下的滑块样式 */
  :deep(.ant-slider-disabled .ant-slider-handle) {
    background-color: #ffffff !important; /* 自定义颜色 */
    border-color: #91caff !important; /* 自定义颜色 */
  }

  /* 禁用状态下的底部轨道样式 */
  :deep(.ant-slider-disabled .ant-slider-rail) {
    background-color: #384c5d !important; /* 自定义颜色 */
  }

  .openzm {
    cursor: pointer;
    margin-left: 12px;
    font-size: 14px;
  }
</style>