yudao-init/src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue

<!--
 * @Author: zhp
 * @Date: 2024-05-20 13:32:59
 * @LastEditTime: 2024-06-03 16:26:24
 * @LastEditors: zhp
 * @Description:
-->

<template>
  <div class="double-ring-chart">
    <!-- <div> -->
      <div ref="chart" class="double-ring-chart__container"></div>
    <!-- </div> -->
    <!-- style="{ height: vHeight + 'vh' }" -->
    <div class="double-ring-chart__legend">
      <div v-for="item in legendItems" :key="item.label" class="legend-item">
        <span class="legend-item__label">{{ item.label }}</span>
        <span class="legend-item__value">{{ item.value | numberFilter }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import chartMixin from "@/mixins/chart.js";
import screenfull from "screenfull";
import getOptions from "../../../options/double-ring-chart-options";

export default {
  name: "DoubleRingChart",
  mixins: [chartMixin],
  props: {
    vHeight: {
      type: Number,
      default: 24,
    },
    factoryId: {
      type: Number,
      required: true,
    },
    period: {
      type: String,
      default: "日",
    },
    dataSource: {
      type: String,
      default: null,
    },
    than: {
      type: String,
      default: "同比",
    },
  },
  data() {
    return {
      isFullscreen: false,
    };
  },
  filters: {
    numberFilter(val) {
      if (!isNaN(val)) {
        return (+val).toLocaleString();
      }
      return 0;
    },
  },
  computed: {
    dataSourceField() {
      switch (this.dataSource) {
        case "标准组件产出":
          return "stdOutput";
        case "芯片产出":
          return "chipOutput";
        case "BIPV产出":
          return "bipvOutput";
      }
    },
    valueTuple() {
      // [previousValue, currentValue, sumValue?]
      const getter = this.$store.getters.copilot.yield[this.dataSourceField];
      if (this.period === "日" || this.period === "周") {
        console.log(this.period)
        return [
          getter.previous[this.factoryId],
          getter.current[this.factoryId],
        ];
      }
      // [100, 200, 200]
      return [
        getter.previous[this.factoryId],
        getter.current[this.factoryId],
        getter.target[this.factoryId],
      ];
    },

    options() {
      const today = new Date().getDate();
      const year = new Date().getFullYear();
      const month = new Date().getMonth() + 1;
      const vt = this.valueTuple;
      let items = [];
      var day1 = new Date();
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
      var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
      //今天的时间
      // var day2 = new Date();
      // day2.setTime(day2.getTime());
      // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
      // const today = new Date().getDate();
      // let yesterday = new Date().getDate() -1;
      // const month = new Date().getMonth() + 1;
      const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
      // const year = new Date().getFullYear();
      if (this.period === '日' && this.than === '同比') {
        items = [
          { label: `${month}月${today}日累计`,},
          { label: `去年${month}月${today}日累计` },
        ];
      } else if (this.period === '日' && this.than === '环比') {
        items = [
          { label: `${month}月${today}日累计`},
          { label: `${yesterday}日累计`},
        ];
      } else if (this.period === '周' && this.than === '同比') {
        items = [
          { label: `本周累计`,},
          { label: `去年本周累计`},
        ];
      } else if (this.period === '周' && this.than === '环比') {
        items = [
          { label: `本周累计`,},
          { label: `上周累计`,},
        ];
      } else if (this.period === '月' && this.than === '同比') {
        items = [
          { label: `${month}月累计`,},
          { label: `去年${month}月累计`, },
          { label: `${month}月目标`,},
        ];
      } else if (this.period === '月' && this.than === '环比') {
        items = [
          { label: `${month}月累计`,  },
          { label: `${lastMonth}月累计`,},
          { label: `${month}月目标`, },
        ];
      } else {
        items = [
          { label: `${year}年累计`, },
          { label: `${year - 1}年累计` },
          { label: `${year}年目标` },
        ];
      }
      let titleValue =
        vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined)
          ? this.formatNumber((vt[1] / vt[2] * 100)) + '%'
          : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
            ? "100%" : '0%',
        subtitle =
      this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
      console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
      console.log(items)
      return getOptions({
        titleValue,
        subtitle,
        currentName: items[0].label,
        preName: items[1].label,
        previousSum: this.valueTuple[0],
        currentSum: this.valueTuple[1],
        targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
      });
    },

    legendItems() {
      return calculateItems(this.period, this.valueTuple,this.than);
    },
  },
  watch: {
    isFullscreen(val) {
      // this.actualOptions.series.map((item) => {
      //   item.barWidth = val ? 18 : 12;
      // });
      // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
      // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
      // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
      this.initOptions(this.options)
    },
    legendItems() {
      this.initOptions(this.options);
    },
  },
  mounted() {
    this.initOptions(this.options);
    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
  },
  methods: {
    formatNumber(num) {
      // 判断是否为整数
      if (Number.isInteger(num)) {
        return num; // 如果是整数，直接转换为字符串
      } else {
        // 如果不是整数，保留两位小数并转换为字符串
        return num.toFixed(2);
      }
    }
    // fullscreen mixin 需要的回调
    // fullscreenCallback(isFullscreen) {
    //   console.log("isFullscreen--->", isFullscreen);
    // },
  },
};

function calculateItems(period, valueTuple,than) {
  let items = [];
  var day1 = new Date();
  day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
  var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
  //今天的时间
  // var day2 = new Date();
  // day2.setTime(day2.getTime());
  // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
  const today = new Date().getDate();
  // let yesterday = new Date().getDate() -1;
  const month = new Date().getMonth() + 1;
  const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 -1;
  const year = new Date().getFullYear();
  if (period === '日' && than === '同比') {
    items = [
      { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
      { label: `${month}月${today}日累计`, value: valueTuple[1] },
    ];
  } else if (period === '日' && than === '环比') {
    items = [
      { label: `${yesterday}日累计`, value: valueTuple[0] },
      { label: `${month}月${today}日累计`, value: valueTuple[1] },
    ];
  } else if (period === '周' && than === '同比') {
    items = [
      { label: `去年本周累计`, value: valueTuple[0] },
      { label: `本周累计`, value: valueTuple[1] },
    ];
  } else if (period === '周' && than === '环比') {
    items = [
      { label: `上周累计`, value: valueTuple[0] },
      { label: `本周累计`, value: valueTuple[1] },
    ];
  } else if (period === '月' && than === '同比') {
    items = [
      { label: `去年${month}月累计`, value: valueTuple[0] },
      { label: `${month}月累计`, value: valueTuple[1] },
      { label: `${month}月目标`, value: valueTuple[2] },
    ];
  } else if (period === '月' && than === '环比') {
    items = [
      { label: `${lastMonth}月累计`, value: valueTuple[0] },
      { label: `${month}月累计`, value: valueTuple[1] },
      { label: `${month}月目标`, value: valueTuple[2] },
    ];
  } else {
    items = [
      { label: `${year - 1}年累计`, value: valueTuple[0] },
      { label: `${year}年累计`, value: valueTuple[1] },
      { label: `${year}年目标`, value: valueTuple[2] },
    ];
  }
  // switch (period) {
  //   case "年":
  //     items = [
  //       { label: `${year}年累计`, value: valueTuple[1] },
  //       { label: `${year - 1}年累计`, value: valueTuple[0] },
  //       { label: `${year}年目标`, value: valueTuple[2] },
  //     ];
  //     break;
  // }
  return items;
}
</script>

<style scoped>
.double-ring-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.double-ring-chart__container {
  flex:1 1 auto;
  padding: 0 10%;
  /* margin: 10%; */
  /* min-width: 300px; */
  align-self: stretch;
  height: 0;
}

.double-ring-chart__legend {
  padding: 12px;
  color: #fff;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.legend-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.legend-item__label {
  position: relative;
}

.legend-item__label::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 2px;
  top: 6px;
  left: -18px;
}

.legend-item:nth-child(2) .legend-item__label::before {
  background: #12fff5;
}
.legend-item:nth-child(2) .legend-item__value {
  color: #12fff5;
}

.legend-item:nth-child(1) .legend-item__label::before {
  background: #0f65ff;
}
.legend-item:nth-child(1) .legend-item__value {
  color: #0f65ff;
}

.legend-item:nth-child(3) .legend-item__label::before {
  background: #003982;
}
</style>