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

<template>
  <div class="select-cs">
    <div v-if="config && config.switch1 && config.switch2 && config.switch3" class="select-item">
      <div class="select-item-box">
        <a-select v-model:value="selectVal" :bordered="false" style="width: 100%">
          <a-select-option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </div>
      <div class="select-item-box">
        <span>{{ config.switch1.label[0] }}</span>
        <a-switch
          :disabled="config.switch1.disabled"
          :checked="getFormattedText(devicedata, config.switch1.value, config.switch1.trans)"
          @update:checked="handlUpdate($event, config.switch1)"
        />
        <span>{{ config.switch1.label[1] }}</span>
      </div>
    </div>
    <div v-if="config && config.switch2 && config.switch3" class="select-item">
      <div class="select-item-box1">
        <span>{{ config.switch2.label[0] }}</span>
        <a-switch
          :disabled="config.switch2.disabled"
          :checked="getFormattedText(devicedata, config.switch2.value, config.switch2.trans)"
          @update:checked="handlUpdate($event, config.switch2)"
        />
      </div>
      <div class="select-item-box1">
        <span>{{ config.switch3.label[0] }}</span>
        <a-switch
          :disabled="config.switch3.disabled"
          :checked="getFormattedText(devicedata, config.switch3.value, config.switch3.trans)"
          @update:checked="handlUpdate($event, config.switch3)"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { getData, getFormattedText } from '../../hooks/helper';
  import { deviceControlApi } from '/@/api/vent';
  import { message } from 'ant-design-vue';

  interface SwitchConfig {
    /** 提交控制时 启动 状态对应的key */
    keyOn: string;
    /** 提交控制时 关闭 状态对应的key */
    keyOff: string;
    /** 提交控制时 启动 状态对应的value */
    valueOn: string;
    /** 提交控制时 关闭 状态对应的value */
    valueOff: string;
    /** 提示文本，按需从数组中依次读取内容 */
    label: string[];
    disabled?: boolean;
    /** 判断该项的默认状态时用到的value，formatter格式 */
    value: string;
    /** 如果value不是boolean类型，需要给出trans转换 */
    trans: any;
  }
  interface CSConfig {
    selector: {
      label: string;
      value: string;
      readFrom: string;
    };
    switch1: SwitchConfig;
    switch2: SwitchConfig;
    switch3: SwitchConfig;
  }

  const props = defineProps<{
    config: CSConfig;
    devicedata: Record<string, any>;
  }>();

  const options = computed(() => {
    const { readFrom, value, label } = props.config.selector;
    const res = getData(props.devicedata.value, readFrom);
    return (Array.isArray(res) ? res : [res]).map((item) => {
      return {
        label: getFormattedText(item, label),
        value: getFormattedText(item, value),
      };
    });
  });

  const selectVal = ref(undefined);

  function handlUpdate(checked: boolean, item: SwitchConfig) {
    deviceControlApi({
      deviceid: selectVal,
      paramcode: checked ? item.keyOn : item.keyOff,
      value: checked ? item.valueOn : item.valueOff,
    })
      .then((r) => {
        if (!r.success) throw r.message || '操作失败';
        message.success('指令下发成功');
      })
      .catch((e) => {
        message.error(typeof e === 'string' ? e : '指令下发失败');
      });
  }
</script>

<style lang="less" scoped>
  .select-cs {
    height: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;

    .select-item {
      display: flex;
      width: 100%;
      height: calc(50% - 2px);

      &:nth-child(1) {
        margin-bottom: 2px;
        padding: 0px 10px;
        background: url('@/assets/images/vent/homeNew/databg/11.png') no-repeat;
        background-size: 100% 100%;
      }

      &:nth-child(2) {
        margin-top: 2px;
      }

      .select-item-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 34px;
        padding-top: 6px;
        box-sizing: border-box;

        &:nth-child(1) {
          background: url('@/assets/images/vent/homeNew/databg/bg-line.png') no-repeat right;
        }

        span {
          margin: 0px 10px;
        }
      }

      .select-item-box1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        padding: 10px 20px 0px 20px;
        box-sizing: border-box;
        background: url('@/assets/images/vent/homeNew/databg/13.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    ::v-deep .zxm-select-selector {
      background-color: transparent;
      height: 28px;
      padding: 0 10px;
    }

    ::v-deep .zxm-switch {
      border-top: 1px solid rgba(45, 187, 255);
      border-bottom: 1px solid rgba(45, 187, 255);
      border-right: 1px solid rgba(45, 187, 255);
    }
  }
</style>