设置订单完成比率和工单进度统计动态显示

yangfeng

2023-12-04 1f4903411dd41223554e62bc3b134b7ec4d42975

设置订单完成比率和工单进度统计动态显示

 public/cockpitPage/order-bg.png

 src/views/cockpitPage/components/OrderCompleteRadio.vue

@@ -29,19 +29,52 @@
  components: {
    ChartTitle,
  },
  props: {},
  props: {
    orderCompleteObject: {
      type: Object,
      default: () => {
        return {
          startIndex: 0,
          orderCompleteList: [],
        };
      },
    },
  },
  data() {
    return {
      tableList: [
        { title: "DD19070047", radio: 50.6 },
        { title: "DD19070048", radio: 89 },
        { title: "DD19070049", radio: 100 },
        { title: "DD19070050", radio: 30 },
      ],
      startIndex: 0,
      time: 0,
    };
  },
  mounted() {},
  watch: {},
  mounted() {
    setInterval(() => {
      this.startIndex += 4;
    }, 5000);
  },
  computed: {
    tableList: {
      get() {
        if (
          this.startIndex > this.orderCompleteObject.orderCompleteList.length
        ) {
          this.startIndex = 0;
        }
        return this.orderCompleteObject.orderCompleteList.slice(
          this.startIndex,
          this.startIndex + 4
        );
      },
      set(val) {
        console.log(val);
      },
    },
  },
  watch: {
    "orderCompleteObject.orderCompleteList"(val) {
      console.log(val, "ssssssssss");
      this.startIndex = this.orderCompleteObject.startIndex;
    },
  },
  methods: {},
};
</script>
@@ -66,13 +99,16 @@
      border-radius: 50px;
      transition: all 1s ease-in-out 0s;
      .left {
        width: 20%;
        width: 23%;
        margin: 0 10px;
        color: #02f1fc;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .middle {
        flex: 1;
        margin: 0 10px;
        margin-right: 5px;
      }
    }
  }

 src/views/cockpitPage/components/WorkOrderProgress.vue

@@ -9,7 +9,12 @@
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" style="width: 100%">
        <el-table
          ref="table"
          :data="tableData"
          style="width: 100%"
          height="100%"
        >
          <el-table-column
            prop="workOrderId"
            label="工单编号"
@@ -149,12 +154,130 @@
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "BA5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
        {
          workOrderId: "BA5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 0,
        },
      ],
    };
  },
  mounted() {},
  mounted() {
    this.setAutoScroll();
  },
  watch: {},
  methods: {},
  methods: {
    // 实现自动滚动的方法
    setAutoScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      setInterval(() => {
        // 元素自增距离顶部1像素
        divData.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, 200); // 滚动速度
    },
  },
};
</script>

@@ -192,6 +315,8 @@
    }
    .table-box {
      padding: 20px 15px;
      height: calc(100% - 75px);
      overflow: hidden;
      .progerss-bg {
        width: 100%;
        height: 22px;
@@ -251,6 +376,7 @@
  // 修改表格字体颜色
  .el-table__body td {
    color: #00ffff;
    padding: 8px 0;
  }
  // 设置表格背景透明
  .el-table th {
@@ -285,5 +411,10 @@
  .el-table::before {
    display: none;
  }
  // 保留垂直滚动且隐藏滚动条
  .el-table__body-wrapper::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
}
</style>

 src/views/cockpitPage/index.vue

@@ -10,7 +10,9 @@
      <CountView :total-object="totalObject"></CountView>
    </template>
    <template #leftBlock4>
      <OrderCompleteRadio></OrderCompleteRadio>
      <OrderCompleteRadio
        :order-complete-object="orderCompleteObject"
      ></OrderCompleteRadio>
    </template>
    <template #leftBlock5>
      <WorkOrderProgress></WorkOrderProgress>
@@ -69,13 +71,19 @@
      ],
      // 左中数据统计对象
      totalObject: {},
      // 订单完成比率
      orderCompleteObject: {
        startIndex: 0,
        orderCompleteList: [],
      },
      dataindex: 0,
    };
  },
  mounted() {
    this.getDashboard();
    setInterval(() => {
      this.getDashboard();
    }, 300000);
    }, 10000);
  },
  watch: {},
  methods: {
@@ -86,6 +94,8 @@
        this.setLeftBlock1(res.data);
        //  左中数据统计值
        this.setLeftBlock3(res.data);
        // 订单完成比率
        this.setLeftBlock4(res.data);
      });
    },
    // 处理左上数据
@@ -124,6 +134,48 @@
        RealProductionAmount: data?.RealProductionAmount ?? 0,
      };
    },
    // 订单完成比率
    setLeftBlock4(data) {
      this.orderCompleteObject.startIndex = 0;
      // 此处后面会替换成真实后端返回数据
      if (this.dataindex == 1) {
        this.orderCompleteObject.orderCompleteList = [
          { title: "SSSSDD19070047", radio: 20.6 },
          { title: "SDD19070048", radio: 79 },
          { title: "SDD19070049", radio: 100 },
          { title: "SDD19070050", radio: 30 },
          { title: "DD19070047", radio: 20.6 },
          { title: "DD19070048", radio: 49 },
          { title: "DD19070049", radio: 60 },
          { title: "SSDD19070050", radio: 10 },
          { title: "SDD19070047", radio: 33.6 },
          { title: "DD19070048", radio: 69 },
          { title: "SDD19070049", radio: 70 },
          { title: "DD19070050", radio: 20 },
          { title: "SDD19070047", radio: 66.6 },
          { title: "DD19070048", radio: 46 },
        ];
        this.dataindex = 0;
      } else {
        this.orderCompleteObject.orderCompleteList = [
          { title: "fffffDD19070047", radio: 50.6 },
          { title: "DD19070043", radio: 89 },
          { title: "DD15566649", radio: 100 },
          { title: "ASD5555550", radio: 30 },
          { title: "DD19070047", radio: 30.6 },
          { title: "DD19070048", radio: 49 },
          { title: "DD19070049", radio: 60 },
          { title: "DD19070050", radio: 10 },
          { title: "DD19070047", radio: 33.6 },
          { title: "DD19070048", radio: 69 },
          { title: "DD19070049", radio: 70 },
          { title: "DD19070050", radio: 20 },
          { title: "DD19070047", radio: 66.6 },
          { title: "DD19070048", radio: 96 },
        ];
        this.dataindex = 1;
      }
    },
  },
};
</script>