mky-vent-base/src/views/vent/home/configurable/blue/components/yj_ventWarn.vue

<template>
  <div class="vent_warn">
    <div v-for="(item, index) in ventData" :key="index" class="vent_warn_item">
      <div class="risk-label">{{ item.name }}</div>
      <div class="risk_progress_container">
        <div class="risk_progress" :style="getProgressStyle(item)"></div>
      </div>
      <div class="risk-value">{{ item.value }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, nextTick } from 'vue';

let props = defineProps({
  ventData: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const colorMap = {
  报警: ['#62465d', '#f50405'],
  重大风险: ['#60685e', '#f37606'],
  较大风险: ['#53777d', '#dfae6a'],
  一般风险: ['#588063', '#efce09'],
  低风险: ['#2a7296', '#47a0cc'],
};

const getProgressStyle = (item) => {
  const maxValue = 10;
  const [startColor, endColor] = colorMap[item.name];

  return {
    width: `${item.value > 0 ? (item.value / maxValue) * 100 : 0}%`,
    background: `linear-gradient(90deg, ${startColor} 0%, ${endColor} 100%)`,
  };
};
watch(
  () => props.ventData,
  (newV, oldV) => {
    console.log(props.ventData, '99900');
  },
  { immediate: true }
);
</script>

<style lang="less" scoped>
.vent_warn {
  position: relative;
  padding-top: 10px;
  height: 100%;
  .vent_warn_item {
    margin-left: 5px;
    margin-top: 10px;
    padding: 10px 0 10px 20px;
    width: 94%;
    height: 39px;
    background: url('@/assets/images/home-warn/3-2.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .risk-label {
      flex: 1;
      font-size: 14px;
      color: #ffffff;
    }
    .risk-value {
      flex: 1;
      margin-right: 10px;
      color: #ffffff;
    }

    .risk_progress_container {
      margin-left: 20px;
      flex: 3;
      height: 8px;
      margin: 0 10px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;
      min-width: 0; /* 关键：允许容器收缩 */
    }
    .risk_progress {
      height: 100%;
      border-radius: 4px;
      transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
  }
}
</style>