mky-vent-base/src/views/vent/BeltLaneThreeLevelFire/home/components/detail/ListOne.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="list flex" :class="`list_${type}`">
    <div class="flex-grow" :class="`list__wrapper_${type}`">
      <div v-for="(item, i) in listConfig" :key="`customlist${i}`" class="list-item" :class="`list-item_${type}`">
        <div class="list-item__content" :class="`list-item__content_${type} ${getBgClass(item.value)}`">
          <div class="list-item__label"> {{ item.label }}</div>
          <div class="list-item__value" :class="`list-item__value_${type}`" v-if="item.label != '控制模式'">
            <span v-if="item.label === '系统状态' || item.label === '运行状态'" class="status_dot"></span>
            {{ item.value }}
          </div>
          <div class="list-item__value" :class="`list-item__value_${type}`" v-else>
            <!-- 单选按钮组 -->
            <div class="radio-group">
              <label class="radio-label">
                <input
                  type="radio"
                  :name="`mode_${i}`"
                  value="auto"
                  :checked="item.value === '自动'"
                  @change="$emit('mode-change', { index: i, mode: '自动' })"
                />
                <span>自动</span>
              </label>
              <label class="radio-label">
                <input
                  type="radio"
                  :name="`mode_${i}`"
                  value="manual"
                  :checked="item.value === '手动'"
                  @change="$emit('mode-change', { index: i, mode: '手动' })"
                />
                <span>手动</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
withDefaults(
  defineProps<{
    listConfig: {
      label: string;
      value: string; // 低风险 | 一般风险 | 较大风险 | 严重风险 | 报警
      color?: string;
      info?: string;
    }[];
    type: string;
  }>(),
  {
    listConfig: () => [],
    type: 'A',
  }
);
const getBgClass = (riskLevel: string) => {
  switch (riskLevel) {
    case '低风险':
      return 'bg-lowRisk';
    case '一般风险':
      return 'bg-normalRisk';
    case '较大风险':
      return 'bg-greaterRisk ';
    case '重大风险':
      return 'bg-majorRisk';
    case '报警':
      return 'bg-warning';
    default:
      return 'bg-lowRisk';
  }
};
</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.list {
  background-repeat: no-repeat;
  position: relative;
}

.list-item_B {
  align-items: center;
  text-align: center;
  margin: 20px;
  display: flex;
}
.list-item__content_B {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  padding: 0 30px;
  color: #ffffff;
  font-size: 13px;
  background-image: url('/@/assets/images/beltFire/3-1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list-item__content_B > .list-item__label {
  padding-top: 10px;
  font-size: 14px;
}
.list-item__content_B > .list-item__value {
  padding-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}
.radio-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
}

.radio-label input[type='radio'] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.status_dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  background-color: #46ff9c;
}
</style>