agriculture-one-map/src/components/fileBar.vue

<template>
  <div class="file-chart">
    <div v-for="(item, index) in fileData" :key="index" class="item-container">
      <div class="file-label cursor-pointer" :class="{'active': activeIndex === index}" @click="toggleActive(index)">{{ item.name }}</div>
      <div class="file-bar">
        <div
          v-for="(value, subIndex) in item.data"
          :key="subIndex"
          class="bar-block"
          :style="{ width: computedWidths[index][subIndex] + 'px' }"
        >
          <div class="block-bg" :class="'bg-' + value.level">
            <el-tooltip
              class="tooltip-item"
              effect="light"
              :content="value.tag"
              placement="top"
            >
              <div class="cursor-pointer">{{ value.tag }}</div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
const fileData = ref([
  {
    name: "高产级",
    data: [
      { value: 325, level: 4, tag: "325棵" },
      { value: 325, level: 3, tag: "325棵" },
      { value: 325, level: 2, tag: "325棵" },
      { value: 325, level: 1, tag: "325棵" },
    ],
  },
  {
    name: "稳产级",
    data: [
      { value: 260, level: 4, tag: "260棵" },
      { value: 270, level: 3, tag: "270棵" },
      { value: 270, level: 2, tag: "270棵" },
      { value: 270, level: 1, tag: "270棵" },
    ],
  },
  {
    name: "休养-幼树",
    data: [
      { value: 380, level: 0, tag: "已调养 <1年" },
      { value: 330, level: 0, tag: "已治愈 >1年" },
      { value: 200, level: 0, tag: "未治愈" },
    ],
  },
  {
    name: "休养-病虫",
    data: [
      { value: 380, level: 3, tag: "已治愈 <1年" },
      { value: 380, level: 1, tag: "已治愈 >1年" },
      { value: 140, level: 0, tag: "未治愈" },
    ],
  },
  {
    name: "休养-生长",
    data: [
      { value: 400, level: 2, tag: "已休养<1年" },
      { value: 380, level: 2, tag: "已休养1-2年" },
      { value: 420, level: 2, tag: "已休养>2年" },
    ],
  },
]);
// 计算所有 data 中 value 属性的总和最大值
const maxSum = computed(() => {
  return Math.max(
    ...fileData.value.map((item) =>
      item.data.reduce((sum, dataPoint) => sum + dataPoint.value, 0)
    )
  );
});

// 计算每个 dataPoint 的值在所有 data 中 value 总和最大值中所占的百分比
const computedWidths = computed(() => {
  const max = maxSum.value;
  return fileData.value.map((item) => {
    // 258是右侧容器总宽度
    return item.data.map((dataPoint) =>
      ((dataPoint.value / max) * 230).toFixed(0)
    ); // 保留两位小数
  });
});

// 设置选中
const activeIndex = ref(0)
const toggleActive = (index) => {
  activeIndex.value = index
}
</script>

<style lang="scss" scoped>
.file-chart {
  padding: 0 6px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 76px;
    width: 1px;
    height: calc(100% - 24px);
    background: rgba(255, 255, 255, 0.08);
  }
  .item-container {
    display: flex;
    width: 100%;
    color: #ffffff;
    margin-bottom: 12px;
    .file-label {
      width: 68px;
      text-align: center;
      font-size: 12px;
      padding: 0 4px;
      box-sizing: border-box;
      &.active {
        background: #2199F8;
        border-radius: 22px;
      }
    }
    .file-bar {
      width: calc(100% - 56px);
      display: flex;
      padding-left: 6px;
      height: 18px;
      font-size: 10px;
      div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .bar-block {
        text-align: center;
        border-radius: 0px 4px 4px 0px;
        padding: 1px;
        background-image: linear-gradient(
          to right,
          rgba(255, 223, 223, 0),
          rgba(234, 232, 232, 1)
        );
        .block-bg {
          padding-left: 2px;
          border-radius: 0px 4px 4px 0px;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .bg-0 {
        background-image: linear-gradient(to right, #042921, #0cba93);
      }
      .bg-1 {
        background: linear-gradient( 90deg, #2E2424 0%, #F86A01 100%);
      }
      .bg-2 {
        background: linear-gradient( 90deg, #2E2424 0%, #F29501 100%);
      }
      .bg-3 {
        background: linear-gradient( 90deg, #2E2424 0%, #E33C3C 100%);
      }
      .bg-4 {
        background: linear-gradient( 270deg, #665E55 0%, #232323 100%);
      }
    }
  }
}
</style>