yudao-init/src/views/copilot/factoryData/components/Order.vue

<template>
  <div class="order-container">
    <div class="table">
      <dv-scroll-board v-if="showTable" :config="config"
        style="width: 100%; height: 100%; color: rgba(255, 255, 255,1);font-size:16," ref="orderScrollBoard" />
    </div>
    <div class="chart">
      <div class="chart-title">
        <span class="title">工单情况</span>
        <span class="line"></span>
      </div>
      <div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;">
        <CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
          :active="i === type" @click="() => $emit('update:type', i)" />
      </div>
      <barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
    </div>
  </div>

</template>
<script>
import { debounce } from "@/utils/debounce";
import barChartBase from './BarChartBase'
// import barChartBase from './BarChartBase'
import CopilotButton from "./chartButton"
export default {
  name: "Order",
  components: {
    barChartBase,
    CopilotButton,
  },
  data() {
    return {
      showTable: true,
      // type: '目标产量',
      config: {
        header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"],
        headerBGC: "rgba(0, 106, 205, 0.22)",
        oddRowBGC: "rgba(0, 106, 205, 0.22)",
        evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
        data: [],
        rowNum: 12,
        fontSize:16,
        waitTime: 3000,
        columnWidth: [150],
        align: ["left"],
        carousel: "page",
      },
    };
  },
  props: {
    type: {
      type: String,
      default: "目标产量",
    },
    prodOrder: {
      type: Array,
      default: [],
    },
  },
  computed: {
    isOpen() {
      return this.$store.getters.sidebar.opened;
    },
  },
  watch: {
    isOpen(val) {
      this.tableReset();
    },
    prodOrder() {
      this.getTableList();
    },
  },
  mounted() {
    window.addEventListener("resize", this.tableReset)
    this.$nextTick(() => {
      let button = document.getElementsByClassName('button-type')
      console.log(button);
      button[0].children[0].style.borderRadius = '4px 0 0 4px'
      button[0].children[5].style.borderRadius = '0px 4px 4px 0px'
      // children[5].classList.add('skate')
      // console.log(button[0].children[5].classList);
    });
  },
  methods: {

    tableReset() {
      this.showTable = false;
      debounce(() => {
        this.initTable();
      }, 500)();
    },
    initTable() {
      this.showTable = true;
    },
    getTableList() {
      let outArr = [];
      if (this.prodOrder.length > 0) {
        for (let i = 0; i < this.prodOrder.length; i++) {
          let arr = [];
          // arr.push(i + 1);
          arr.push(
            `<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${
            this.prodOrder[i].workOrderNumber || ""
            }</span>`,
              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
              }</span>`,
              `<span style='color: rgba(223,241,254,.8);font-size:1.2em' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
              }</span>`,
              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
              }</span>`,
              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
              }</span>`,
              `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
              }</span>`,
              `<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
                ? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
                : "0%"
              }</span>
            <div style="display:inline-block;height:20px;vertical-align:top;margin-top:3px;">
            <svg xmlns="http://www.w3.org/200/svg" height="18" width="18">
              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
                ? this.prodOrder[i].productionProgress.toFixed(2) *100 *
                37.68 *
                0.01 +
                "," +
                (1 -
                  this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 *
                37.68
                : 0 + "," + 37.68
              }"/>
            </svg>
          </div>`
          )
          outArr.push(arr);
        }
        this.config.data = outArr;
      } else {
        this.config.data = [];
      }
      this.$refs["orderScrollBoard"].updateRows(outArr);
    },
  },
};
</script>
<style lang="scss" scoped>
.order-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .table{
    flex: 1;
  }
        .chart {
          flex: 1;
          display: flex;
          flex-direction: column;
          // gap: 6px;
          .chart-title {
            margin-top: 5px;
            // flex: 1;
            // gap: 6px;
            height: 1.5vw;
            width: 100%;
            display: flex;
            align-items: center;

            // flex-direction: column;
            // flex-wrap: nowrap;
            // justify-content: end
            // margin-top: 10px;
            .title {
              // flex: 1;
              font-weight: 400;
              font-size: 24px;
              // width: 5vw;
              color: #FFFFFF;
              line-height: 24px;
              text-align: left;
              font-style: normal;
              display: inline-block;
            }

            .line {
              flex: 1;
              // width: 80%;
              height: 1px; // display: inline-block;
              border: 1px solid;
              // display: inline-block;
              // border-image: linear-gradient(to right, transparent 5%, rgba(95, 190, 249, 1) 20%, transparent 90%, )1;
              border-image: linear-gradient(to right, transparent 10%, rgba(95, 190, 249, 1 )30%, transparent 90%,)1;
              // backdrop-filter: blur(3px);
            }
          }
        }
}
</style>