yudao-init/src/views/dashboard/charts/ChipYield.vue

<!-- 
    filename: ChipYield.vue
    author: liubin
    date: 2024-04-11 10:46:47
    description: 
-->

<template>
  <div class="chip-yield">
    <chip-yield-chart :factory="activeLoc" />
    <section class="right-part">
      <div class="yield-location">
        <section class="btn-group">
          <button
            @click="activeLoc = '1'"
            :class="activeLoc === '1' ? 'active' : ''"
          >
            成都
          </button>
          <button
            @click="activeLoc = '2'"
            :class="activeLoc === '2' ? 'active' : ''"
          >
            邯郸
          </button>
          <button
            @click="activeLoc = '3'"
            :class="activeLoc === '3' ? 'active' : ''"
          >
            株洲
          </button>
          <button
            @click="activeLoc = '4'"
            :class="activeLoc === '4' ? 'active' : ''"
          >
            瑞昌
          </button>
        </section>
        <section class="btn-group">
          <button
            @click="activeLoc = '5'"
            :class="activeLoc === '5' ? 'active' : ''"
            class="fixwidth"
          >
            佳木斯
          </button>
          <button
            @click="activeLoc = '6'"
            :class="activeLoc === '6' ? 'active' : ''"
          >
            凯盛光伏
          </button>
          <button
            @click="activeLoc = '7'"
            :class="activeLoc === '7' ? 'active' : ''"
          >
            蚌埠兴科
          </button>
        </section>
      </div>
      <div class="yield-summary">
        <div class="legend">
          <span class="legend-label">2024年累计</span>
          <span class="legend-value deep-green">{{ output.current }}</span>
        </div>
        <div class="legend">
          <span class="legend-label">2024年目标</span>
          <span class="legend-value">{{ output.target }}</span>
        </div>
        <div class="legend">
          <span class="legend-label">2023年累计</span>
          <span class="legend-value deep-blue">{{ output.previous }}</span>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import ChipYieldChart from "./ChipYieldChart.vue";

export default {
  name: "ChipYield",
  components: { ChipYieldChart },
  props: {},
  data() {
    return {
      activeLoc: "1",
    };
  },
  computed: {
    output() {
      // ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]
      const chipOutput = this.$store.getters.home.chipOutput;
      if (
        !chipOutput ||
        !chipOutput.target ||
        !chipOutput.current ||
        !chipOutput.previous
      )
        return {
          target: 0,
          current: 0,
          previous: 0,
        };
      const index =
        this.activeLoc == "1"
          ? 4
          : this.activeLoc == "2"
          ? 1
          : this.activeLoc == "3"
          ? 2
          : this.activeLoc == "4"
          ? 0
          : this.activeLoc == "5"
          ? 3
          : this.activeLoc == "6"
          ? 5
          : 6;
      return {
        target: parseInt(chipOutput.target[index]).toLocaleString(),
        current: parseInt(chipOutput.current[index]).toLocaleString(),
        previous: parseInt(chipOutput.previous[index]).toLocaleString(),
      };
    },
  },
};
</script>

<style scoped lang="scss">
.chip-yield {
  height: 0;
  flex: 1;
  display: flex;
  gap: 12px;

  .yield-location {
    margin-top: 2.2vh;

    .btn-group {
      margin-top: 8px;
      display: flex;
      border-radius: 4px;
      overflow: hidden;

      button {
        flex: 1;
        appearance: none;
        outline: none;
        border: none;
        cursor: pointer;
        background: #01306c;
        color: #fff;
        padding: 8px 6px;
        font-size: 0.63vw;
        position: relative;
      }

      button.fixwidth {
        flex: unset;
        width: 2.765vw;
      }

      button:not(:first-child)::before {
        content: "";
        display: inline-block;
        width: 2px;
        height: 60%;
        background: #052141;
        position: absolute;
        top: 20%;
        left: -1px;
      }

      button.active {
        background: #1d74d8;
      }
    }
  }

  .yield-summary {
    margin-top: 3vh;
    display: grid;
    gap: 0.56vw;
    grid-auto-rows: 40px;
    grid-template-columns: 1fr 1fr;

    .legend {
      border-radius: 4px;
      padding: 1px;
      display: flex;
      flex-direction: column;
      font-size: 0.725vw;
      padding-left: 0.88vw;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 20%;
        left: 0;
        width: 0.52vw;
        height: 0.52vw;
        border-radius: 2px;
        background: #ccc;
        display: inline-block;
      }

      &:first-child::before {
        background: #11f0e8;
      }

      &:nth-child(2)::before {
        background: #003982;
      }

      &:last-child::before {
        background: #0551c7;
      }

      .deep-blue {
        color: #0551c7;
      }

      .deep-green {
        color: #11f0e8;
      }
    }
  }
}
</style>