bigdata_WX/pages/cb/wenshidp/components/OperationCard.vue

<template>
  <view class="operation">
    <view class="operation__header">
      <image class="operation__icon" :src="iconSrc" mode="aspectFit" />
      <view class="operation__name">{{
        dourceData.display_name || dourceData.name || dourceData.code
      }}</view>
    </view>
    <view class="operation__body">
      <!-- 三状态：按钮形式（0 停止 1 正向 2 反向） -->
      <block v-if="hasPos">
        <view
          class="operation__btn"
          :class="btnClass(opt.value)"
          v-for="opt in options"
          :key="opt.value"
          @click="handleClick(opt.value)"
          >{{ opt.label }}</view
        >
      </block>
      <!-- 两状态：单个开关（1 开 0 关） -->
      <view v-else class="operation__switch-row">
        <view
          class="operation__switch-label"
          :class="{ on: statusValue == 1 }"
          >{{ statusValue == 1 ? '开' : '关' }}</view
        >
        <u-switch
          :value="statusValue == 1"
          active-color="#0bbc58"
          inactive-color="#C3CAD8"
          size="36"
          @input="handleSwitch"
        ></u-switch>
      </view>
    </view>
  </view>
</template>
<script>

const ICONS = {
  inner_shade_on: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/inner_shade_on.png',
  inner_shade_off: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/inner_shade_off.png',
  outer_shade_on: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/outer_shade_on.png',
  outer_shade_off: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/outer_shade_off.png',
  roof_window_on: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/roof_window_on.png',
  roof_window_off: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/roof_window_off.png',
  side_window_on: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/side_window_on.png',
  side_window_off: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/side_window_off.png',
  fan_on: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/fan_on.png',
  fan_off: 'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/greenHouseIcon/fan_off.png',
};

export default {
  name: 'OperationCard',
  props: {
    dourceData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    // 存在 CurrentPos 字段即为三状态（0 停止 1 正向 2 反向），否则两状态（0 停止 1 开启）
    // CurrentPos 可能是明文字段或 ChannelParamSetXX:CurrentPos 平铺属性，只用于判定形态
    hasPos() {
      const d = this.dourceData;
      if ('CurrentPos' in d) {
        return true;
      }
      return Object.keys(d).some((k) =>
        /^ChannelParamSet\d+:CurrentPos$/.test(k)
      );
    },
    options() {
      return [
        { label: '正向', value: 1 },
        { label: '反向', value: 2 },
        { label: '停止', value: 0 },
      ];
    },
    // 通道遥测 key：形如 ChannelParamSet00:Status
    statusKey() {
      const d = this.dourceData;
      const code = d.code || d.sfCode;
      if (code && /^ChannelParamSet\d+:Status$/.test(String(code))) {
        return String(code);
      }
      return (
        Object.keys(d).find((k) => /^ChannelParamSet\d+:Status$/.test(k)) || ''
      );
    },
    // Status 值存放的属性名：同名属性或 value
    statusField() {
      const d = this.dourceData;
      return this.statusKey && this.statusKey in d ? this.statusKey : 'value';
    },
    // 高亮始终取 Status 值：三状态 0 停止 1 正向 2 反向，两状态 0 停止 1 开启
    statusValue() {
      const d = this.dourceData;
      const val = this.statusKey ? d[this.statusKey] : d.value;
      return val == null ? 0 : Number(val);
    },
    // 按通道名匹配图标，随运行状态切换 on/off 变体
    iconSrc() {
      const d = this.dourceData;
      const name = String(d.display_name || d.name || '');
      let base = '';
      if (name.includes('内遮阳')) {
        base = 'inner_shade';
      } else if (name.includes('外遮阳')) {
        base = 'outer_shade';
      } else if (name.includes('顶开窗') || name.includes('顶通风')) {
        base = 'roof_window';
      } else if (name.includes('侧开窗') || name.includes('侧通风')) {
        base = 'side_window';
      } else if (name.includes('风机')) {
        base = 'fan';
      } else {
        base = this.hasPos ? 'inner_shade' : 'roof_window';
      }
      const state = this.statusValue == 0 ? 'off' : 'on';
      return ICONS[`${base}_${state}`];
    },
  },
  methods: {
    // 三状态按钮高亮：正/反向绿色，停止橙色
    btnClass(value) {
      if (Number(value) !== this.statusValue) {
        return '';
      }
      return Number(value) === 0
        ? 'operation__btn--stop'
        : 'operation__btn--run';
    },
    handleClick(value) {
      this.$emit('change', {
        dourceData: this.dourceData,
        value,
        code: this.statusKey || this.dourceData.code || '',
        field: this.statusField,
      });
    },
    // 两状态开关：切换后 开=1 关=0
    handleSwitch(newValue) {
      this.handleClick(newValue ? 1 : 0);
    },
  },
};
</script>
<style scoped lang="scss">
.operation {
  // 卡片浅灰底，与头部渐变底色衔接；白色按钮直接落在灰底上
  background: #eff2fa;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
  &__header {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx;
    background: linear-gradient(180deg, #eff4ff 20.24%, #eff2fa 100%);
  }
  &__icon {
    flex-shrink: 0;
    width: 44rpx;
    height: 44rpx;
    margin-right: 12rpx;
  }
  &__name {
    color: #333333;
    font-family: 'Source Han Sans CN VF';
    font-size: 28rpx;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  &__body {
    display: flex;
    align-items: center;
    padding: 20rpx 24rpx 24rpx;
  }
  &__btn {
    flex: 1;
    height: 72rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12rpx;
    background: #ffffff;
    border: 2rpx solid #eef0f5;
    box-sizing: border-box;
    color: #999999;
    font-family: 'Source Han Sans CN VF';
    font-size: 26rpx;
    font-weight: 400;
    margin-right: 16rpx;
    &:last-child {
      margin-right: 0;
    }
    &--run {
      background: #0bbc58;
      border-color: #0bbc58;
      color: #ffffff;
      font-weight: 500;
    }
    &--stop {
      background: #ffa200;
      border-color: #ffa200;
      color: #ffffff;
      font-weight: 500;
    }
  }
  &__switch-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__switch-label {
    color: #999999;
    font-family: 'Source Han Sans CN VF';
    font-size: 26rpx;
    font-weight: 400;
    &.on {
      color: #333333;
    }
  }
}
</style>