订单完成比

yangfeng

2023-12-01 7f223e7c8f267cff6754f7374b7ec74b90ca2f64

订单完成比

 public/cockpitPage/order-bg.png

 src/views/cockpitPage/components/CountView.vue

@@ -62,16 +62,7 @@
  components: {},
  props: {},
  data() {
    return {
      allList: [
        { title: "开机台数", value: 200 },
        { title: "总产量", value: 1200 },
        { title: "生产工单数", value: 200 },
        { title: "延期交付", value: 20 },
        { title: "物料不足", value: 10 },
        { title: "计划达成率", value: 2 },
      ],
    };
    return {};
  },
  mounted() {},
  watch: {},

 src/views/cockpitPage/components/OrderCompleteRadio.vue

New file
@@ -0,0 +1,104 @@
<template>
  <div class="order-complete-radio">
    <div class="title-bg-view">
      <ChartTitle name="订单完成比率"></ChartTitle>
    </div>
    <div class="list-view">
      <!-- <ul> -->
      <template v-for="item in tableList">
        <div class="table-bg-view">
          <div class="left">{{ item.title }}</div>
          <div class="middle" ref="middle">
            <el-progress
              :stroke-width="20"
              :text-inside="true"
              :percentage="item.radio"
              :define-back-color="'#083f55'"
              :text-color="'#fec718'"
            ></el-progress>
            <!-- <div class="container">
              <div class="item" v-for="i in 40" :key="i"></div>
            </div> -->
          </div>
        </div>
      </template>
      <!-- </ul> -->
    </div>
  </div>
</template>

<script>
import ChartTitle from "@/views/cockpitPage/components/ChartTitle.vue";
export default {
  components: {
    ChartTitle,
  },
  props: {},
  data() {
    return {
      tableList: [
        { title: "DD19070047", radio: 50 },
        { title: "DD19070048", radio: 70 },
        { title: "DD19070049", radio: 85 },
        { title: "DD19070050", radio: 30 },
      ],
    };
  },
  mounted() {
    console.log(this.$refs.middle.$el, "sssssssss");
  },
  watch: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.order-complete-radio {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  margin-top: 10px;
  .title-bg-view {
    width: calc(100% - 20px);
  }
  .list-view {
    height: calc(100% - 20px);
    .table-bg-view {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      background: #083f55;
      height: calc(20% - 10px);
      width: 100%;
      border-radius: 50px;
      .left {
        width: 20%;
        margin: 0 10px;
        color: #02f1fc;
      }
      .middle {
        flex: 1;
        margin: 0 10px;
      }
    }
  }
}
::v-deep {
  .el-progress-bar__outer,
  .el-progress-bar__inner {
    border-radius: inherit;
  }
  .el-progress-bar__inner {
    position: relative;
    // background: #552d08;
    background: url("../../../../public/cockpitPage/order-bg.png") no-repeat
      center center / cover;
  }
  .el-progress-bar__innerText {
    position: absolute;
    top: 2px;
    right: -50px;
    text-align: left;
    font-size: 18px;
  }
}
</style>

 src/views/cockpitPage/index.vue

@@ -9,9 +9,13 @@
    <template #leftBlock3>
      <CountView></CountView>
    </template>
    
    <template #leftBlock4>
      <OrderCompleteRadio></OrderCompleteRadio>
    </template>
    <template #leftBlock6>
      <PerSonnelProductivity @should-reload="reloadAllData"></PerSonnelProductivity>
      <PerSonnelProductivity
        @should-reload="reloadAllData"
      ></PerSonnelProductivity>
    </template>
    <template #rightBlock1>
      <DeviceChart @should-reload="reloadAllData"></DeviceChart>
@@ -34,6 +38,7 @@
import DeviceChart from "@/views/cockpitPage/components/DeviceChart.vue";
import MaterialChart from "@/views/cockpitPage/components/MaterialChart.vue";
import BarChart from "@/views/cockpitPage/components/BarChart.vue";
import OrderCompleteRadio from "@/views/cockpitPage/components/OrderCompleteRadio";
export default {
  components: {
    StatisticalBox,
@@ -44,6 +49,7 @@
    BarChart,
    MachineStartupRate,
    CountView,
    OrderCompleteRadio,
  },
  props: {},
  data() {