SynthesisManagement/src/views/screens/screen-components/ProductionCapacitySituation.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" align="start" title="生产量情况" />
    <div class="container">
      <div ref="chartRef" class="charts-container"></div>
      <div class="describe-container">
        <div>
          <span class="typeText">生产目标</span>
          <span class="valueText">{{ progressOption.orderNum }}</span>
          <span class="unitText">件</span>
        </div>
        <div>
          <span class="typeText">实际生产量</span>
          <span class="valueText">{{ progressOption.comNum }}</span>
          <span class="unitText">件</span>
        </div>
      </div>
    </div>
    <div class="bottom-progress">
      <div class="titleText">月进度</div>
      <dv-percent-pond
        :config="progressOption"
        style="width: 100%; height: 20px"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import { productionQuantity } from "@/api/screens";

const chartRef = ref(null);

const generateOption = (c: string, o: string) => {
  const option = {
    series: [
      {
        type: "gauge",
        progress: {
          show: true,
          width: 12,
        },
        axisLine: {
          lineStyle: {
            width: 12,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          distance: 2,
          length: 4,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 12,
          color: "#999",
          fontSize: 14,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 16,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 16,
          offsetCenter: [0, "70%"],
          formatter: "{value}%",
          textStyle: {
            color: "#fff",
          },
        },
        data: [
          {
            value: Number((Number(c) / Number(o)) * 100).toFixed(0),
          },
        ],
      },
    ],
  };
  return option;
};

const progressOption = ref({
  value: 66,
  localGradient: true,
  orderNum: 0,
  comNum: 0,
});

onMounted(async () => {
  const chart = echarts.init(chartRef.value);

  let res: any = await productionQuantity();
  let { data } = res;

  progressOption.value = {
    value: Number(data.rate) * 100,
    localGradient: true,
    orderNum: Number(data.orderNum),
    comNum: Number(data.completeNum),
  };

  chart.setOption(generateOption(data.completeNum, data.orderNum));
});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 60px);
  //border: 1px solid red;
}

.bottom-progress {
  height: 30px;
  display: flex;
  padding: 0 20px;
  width: calc(100% - 60px);

  .titleText {
    color: white;
    font-size: 14px;
    width: 60px;
    margin-right: 10px;
  }
}

.charts-container {
  width: 60%;
  height: 100%;
  //border: 1px solid blue;
}

.describe-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 40%;
}

.typeText {
  font-size: 14px;
  color: #009688;
}

.valueText {
  font-size: 16px;
  color: #4caf50;
  margin-right: 10px;
  margin-left: 10px;
}

.unitText {
  font-size: 12px;
  color: #009688;
}
</style>