11-mes-new/src/views/3DOverview/components/TechyAnalysisBar.vue

<template>
  <div class="quality-analysis-bar" :class="`border-${color}`">
    <div class="placeholder-block-wrapper">
      <div class="flex justify-end">
        <div class="placeholder-block" :class="`block-${color}-1`" />
        <div class="placeholder-block" :class="`block-${color}-2`" />
        <div class="placeholder-block" :class="`block-${color}-3`" />
        <div class="placeholder-block" :class="`block-${color}-4`" />
        <div class="placeholder-block" :class="`block-${color}-5`" />
      </div>
    </div>
    <span class="quality-analysis-bar__name">
      {{ name }}
    </span>
    <span class="quality-analysis-bar__amount" :title="'数量:' + amount">
      {{ amount | amountFilter }}
    </span>
  </div>
</template>

<script>
export default {
  name: 'TechyAnalysisBar',
  filters: {
    amountFilter: val => {
      const sVal = val.toString()
      return sVal.length > 9 ? sVal.slice(0, 8) + '...' : sVal
    }
  },
  props: {
    name: {
      type: String,
      default: 'null'
    },
    amount: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: 'green'
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
.flex {
  display: flex;
}

.justify-end {
  justify-content: flex-end;
}

.quality-analysis-bar {
  border-radius: 2px;
  padding: calc(2px * var(--beilv));
  display: flex;
}

.border-green {
  border: 2px solid #35abad;
}
.border-blue {
  border: 2px solid #49b2ff;
}
.border-orange {
  border: 2px solid #ffb94d;
}
.border-pink {
  border: 2px solid #ed879f;
}

.placeholder-block-wrapper {
  flex-grow: 1;
  overflow: hidden;
  min-width: calc(32px * var(--beilv));
  position: relative;
  display: flex;
  justify-content: center;
}

.placeholder-block-wrapper > div {
  width: calc(300px * var(--beilv));
  position: absolute;
  top: 0;
  right: 0;
}

.placeholder-block {
  width: calc(20px * var(--beilv));
  height: calc(20px * var(--beilv));
  margin-left: calc(3px * var(--beilv));
}

.block-green-5 {
  background: linear-gradient(to left, #35abad, hsla(181, 53%, 44%, 0.75));
  /* margin-left: 4px; */
}
.block-green-4 {
  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.75), hsla(181, 53%, 44%, 0.44));
}
.block-green-3 {
  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.44), hsla(181, 53%, 44%, 0.15));
}
.block-green-2 {
  background: linear-gradient(to left, hsla(181, 53%, 44%, 0.15), hsla(181, 53%, 44%, 0));
}
.block-green-1 {
  /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
  background: transparent;
}

/* ================ blue ================ */
.block-blue-5 {
  background: linear-gradient(to left, hsl(205, 100%, 64%), hsla(205, 100%, 64%, 0.65));
  /* margin-left: 4px; */
}
.block-blue-4 {
  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.65), hsla(205, 100%, 64%, 0.4));
}
.block-blue-3 {
  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.4), hsla(205, 100%, 64%, 0.2));
}
.block-blue-2 {
  background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0));
}
.block-blue-1 {
  /* background: linear-gradient(to left, hsla(205, 100%, 64%, 0.2), hsla(205, 100%, 64%, 0)); */
  background: transparent;
}

/* ================ orange ================ */
.block-orange-5 {
  background: linear-gradient(to left, hsl(36, 100%, 65%), hsla(36, 100%, 65%, 0.65));
  /* margin-left: 4px; */
}
.block-orange-4 {
  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.65), hsla(36, 100%, 65%, 0.4));
}
.block-orange-3 {
  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.4), hsla(36, 100%, 65%, 0.2));
}
.block-orange-2 {
  background: linear-gradient(to left, hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0));
}
.block-orange-1 {
  /* background: linear-gradient(to left,hsla(36, 100%, 65%, 0.2), hsla(36, 100%, 65%, 0)); */
  background: transparent;
}

/* ================ pink ================ */
.block-pink-5 {
  background: linear-gradient(to left, hsl(346, 74%, 73%), hsla(346, 74%, 73%, 0.65));
  /* margin-left: 4px; */
}
.block-pink-4 {
  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.65), hsla(346, 74%, 73%, 0.4));
}
.block-pink-3 {
  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.4), hsla(346, 74%, 73%, 0.2));
}
.block-pink-2 {
  background: linear-gradient(to left, hsla(346, 74%, 73%, 0.2), hsla(346, 74%, 73%, 0));
}
.block-pink-1 {
  /* background: linear-gradient(to left, hsla(181, 53%, 44%, 0.2), hsla(181, 53%, 44%, 0)); */
  background: transparent;
}

.quality-analysis-bar__name {
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  color: white;
  display: inline-block;
  padding: calc(3px * var(--beilv)) calc(8px * var(--beilv));
  font-size: calc(14px * var(--beilv));
  line-height: calc(12px * var(--beilv));
}

.quality-analysis-bar__amount {
  color: rgba(255, 255, 255, 0.725);
  display: inline-block;
  /* min-width: 35%; */
  width: 45%;
  text-align: left;
  padding: calc(3px * var(--beilv)) 0;
  font-size: calc(14px * var(--beilv));
  line-height: calc(12px * var(--beilv));
}
</style>