<template>
  <div class="screen-common-component">
    <ScreenComHeader
      :module-id="moduleId"
      align="start"
      title="当月生产工单完成进度"
    />
    <div class="bottom-progress">
      <!--      <div-->
      <!--        class="titleText"-->
      <!--        :style="{ fontSize: bigScreenData.fontSize * 1.9 + 'px' }"-->
      <!--      >-->
      <!--        月进度-->
      <!--      </div>-->
      <dv-percent-pond
        :config="progressOption"
        style="width: 100%; height: 30px"
      />
    </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 bigScreenData: any = inject("bigScreenData");

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

onMounted(async () => {
  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),
  };
});

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: 50px;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-top: 15px;
  width: 100%;

  .titleText {
    color: white;

    width: 80px;
    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>
