115 lines
3.3 KiB
Vue
115 lines
3.3 KiB
Vue
<template>
|
|
<dv-scroll-board
|
|
v-if="showTable"
|
|
:config="config"
|
|
style="width: 100%; height: 100%"
|
|
ref="orderScrollBoard"
|
|
/>
|
|
</template>
|
|
<script>
|
|
import { debounce } from "@/utils/debounce";
|
|
export default {
|
|
name: "Order",
|
|
data() {
|
|
return {
|
|
showTable: true,
|
|
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,
|
|
waitTime: 3000,
|
|
columnWidth: [50],
|
|
align: ["center"],
|
|
carousel: "page",
|
|
},
|
|
};
|
|
},
|
|
props: {
|
|
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);
|
|
},
|
|
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].customerName || ""}>${
|
|
this.prodOrder[i].customerName || ""
|
|
}</span>`
|
|
);
|
|
arr.push(
|
|
`<span title=${this.prodOrder[i].productName || ""}>${
|
|
this.prodOrder[i].productName || ""
|
|
}</span>`
|
|
);
|
|
arr.push(
|
|
`<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
|
|
this.prodOrder[i].plannedProductionQuantity || ""
|
|
}</span>`
|
|
);
|
|
arr.push(`<span style="display:inline-block;width:45px;">${
|
|
this.prodOrder[i].productionProgress
|
|
? this.prodOrder[i].productionProgress.toFixed(0) + "%"
|
|
: "0%"
|
|
}</span>
|
|
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
|
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
|
<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(0) *
|
|
37.68 *
|
|
0.01 +
|
|
"," +
|
|
(1 -
|
|
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
|
|
37.68
|
|
: 0 + "," + 37.68
|
|
}"/>
|
|
</svg>
|
|
</div>`);
|
|
outArr.push(arr);
|
|
}
|
|
this.config.data = outArr;
|
|
} else {
|
|
this.config.data = [];
|
|
}
|
|
this.$refs["orderScrollBoard"].updateRows(outArr);
|
|
},
|
|
},
|
|
};
|
|
</script>
|