yudao-init/src/views/copilot/factoryData/components/Order.vue
‘937886381’ ef618a4abb 修改bug
2024-06-07 11:13:59 +08:00

212 lines
6.4 KiB
Vue

<template>
<div class="order-container">
<div class="table">
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" 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: 1%;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,
waitTime: 3000,
columnWidth: [100],
align: ["center"],
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 || ""}>${
this.prodOrder[i].workOrderNumber || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].inStatus || ""}>${
this.prodOrder[i].inStatus || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${
this.prodOrder[i].plannedInvestment || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</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>
<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(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
backdrop-filter: blur(3px);
}
}
}
}
</style>