接口轮训时 设备负荷对比柱状图 动画问题修改

haoxuan

2023-12-05 cd388c78650efe85fe4dd41cc439208d58ab6c29

 src/views/cockpitPage/components/WorkOrderProgress.vue

@@ -16,35 +16,35 @@
          height="100%"
        >
          <el-table-column
            prop="workOrderId"
            prop="Number"
            label="工单编号"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="product"
            prop="Product"
            label="产品"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="productSpecs"
            prop="Scale"
            label="产品规格"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="amount"
            prop="Amount"
            label="生产数量"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="planTime"
            prop="PlanTime"
            label="计划时间"
            align="center"
            min-width="100"
@@ -55,7 +55,7 @@
            <template slot-scope="scope">
              <div class="progerss-bg">
                <div
                  v-for="item in scope.row.completeProgerss"
                  v-for="(item, index) in scope.row.completeProgerss"
                  class="progerss"
                  :class="
                    item.status == 1
@@ -73,9 +73,17 @@
          </el-table-column>
          <el-table-column label="延期预警" align="center">
            <template slot-scope="scope">
              <div v-show="scope.row.delayWarning > 0" class="round-view">
                <div class="round"></div>
                <div class="title">{{ scope.row.delayWarning + "天" }}</div>
              <div v-show="scope.row.DelayDays > 0" class="round-view">
                <div class="round red-bg"></div>
                <div class="title red-color">
                  {{ scope.row.DelayDays + "天" }}
                </div>
              </div>
              <div v-show="scope.row.DelayDays < 0" class="round-view">
                <div class="round green-bg"></div>
                <div class="title green-color">
                  {{ scope.row.DelayDays + "天" }}
                </div>
              </div>
            </template>
          </el-table-column>
@@ -88,171 +96,176 @@
<script>
export default {
  components: {},
  props: {},
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [
        {
          workOrderId: "A5435",
          product: "产品1",
          productSpecs: "规格",
          amount: "2000",
          planTime: "02-23~05-23",
          completeProgerss: [
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 3,
        },
        {
          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: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 1 },
            { status: 2 },
            { status: 0 },
          ],
          delayWarning: 2,
        },
        {
          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: "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,
        },
      ],
      // tableData: [
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 3,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 2,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: -2,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "A5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "BA5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      //   {
      //     Number: "BA5435",
      //     Product: "产品1",
      //     Scale: "规格",
      //     Amount: "2000",
      //     PlanTime: "02-23~05-23",
      //     completeProgerss: [
      //       { status: 1 },
      //       { status: 1 },
      //       { status: 2 },
      //       { status: 0 },
      //     ],
      //     DelayDays: 0,
      //   },
      // ],
    };
  },
  mounted() {
@@ -344,14 +357,26 @@
      .round-view {
        display: flex;
        justify-content: center;
        color: #ff0000;

        .round {
          width: 22px;
          height: 22px;
          border-radius: 11px;
          background: #ff0000;

          margin-right: 5px;
        }
        .red-bg {
          background: #ff0000;
        }
        .green-bg {
          background: #00cc00;
        }
        .red-color {
          color: #ff0000;
        }
        .green-color {
          color: #00cc00;
        }
      }
    }
  }