130 lines
3.2 KiB
Vue
130 lines
3.2 KiB
Vue
<!--
|
||
* @FilePath: CenterBottom.vue
|
||
* @Author: zz
|
||
* @Date: 2024-07-19 11:04:25
|
||
* @LastEditors: Please set LastEditors
|
||
* @LastEditTime: 2024-07-19 11:08:37
|
||
* @Descripttion:
|
||
-->
|
||
<template>
|
||
<Border class="centerbottom">
|
||
<h2 class="components-header">
|
||
<DecorationFadeOut> {{ title }} </DecorationFadeOut>
|
||
</h2>
|
||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||
</Border>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import Border from "./Border.vue";
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
onUnmounted,
|
||
getCurrentInstance,
|
||
onUpdated,
|
||
defineProps,
|
||
computed,
|
||
reactive,
|
||
watch,
|
||
} from "vue";
|
||
const { proxy } = getCurrentInstance() as any;
|
||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||
const prop = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
data: {
|
||
type: Object,
|
||
default: () => ({
|
||
list: [],
|
||
}),
|
||
},
|
||
});
|
||
|
||
const devList = ref(null);
|
||
let config = reactive({
|
||
header: [
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "程序名称" + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "刀具号" + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "加工数量" + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "操作模式" + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "运行模式" + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工周期 " + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "轴状态" + "</span>",
|
||
'<span style="color:#AEEEFAFE;font-size:18px;">' + "实际加工时间" + "</span>",
|
||
],
|
||
|
||
headerBGC: "rgba(0, 11, 18, 1)",
|
||
oddRowBGC: "#0d1625",
|
||
evenRowBGC: "#000F1D",
|
||
wrap: [false, false, false, false, false],
|
||
columnWidth: [130, 120, 130, 120, 130, 160, 130, 160],
|
||
align: ["center", "center", "center", "center", "center", "center", "center", "center"],
|
||
rowNum: 3,
|
||
fontsize: "18px",
|
||
waitTime: 3000,
|
||
// data: computed(() => prop.data),
|
||
});
|
||
|
||
const handleData = () => {
|
||
let config_data = prop.data.map((item: any) => {
|
||
let statusString;
|
||
if (item.axisstatus === 0) {
|
||
statusString = "***";
|
||
} else if (item.axisstatus === 1) {
|
||
statusString = "移动";
|
||
} else if (item.axisstatus === 2) {
|
||
statusString = "暂停";
|
||
} else {
|
||
// 可选：如果axisstatus不是0、1或2，你可以设置一个默认值或抛出错误
|
||
statusString = "未知状态";
|
||
}
|
||
return [
|
||
item.procedurename,
|
||
item.knifenum,
|
||
item.pronum,
|
||
item.operate,
|
||
item.run,
|
||
item.machining + "min",
|
||
statusString,
|
||
item.processingtime + "s",
|
||
];
|
||
});
|
||
console.log(config_data, "-------------");
|
||
if (devList.value) {
|
||
devList.value.updateRows(config_data, config);
|
||
}
|
||
};
|
||
watch(
|
||
() => prop.data,
|
||
(newVal, oldVal) => {
|
||
handleData();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
onMounted(() => {
|
||
// console.log(config_data);
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
.centerbottom {
|
||
height: 30%;
|
||
width: 94%;
|
||
margin: 2% 3%;
|
||
}
|
||
.components-header {
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
color: #00c7ebfc;
|
||
}
|
||
.dev-list {
|
||
width: 100%;
|
||
height: 75%;
|
||
}
|
||
:deep(.zd-scroll-board .rows .row-item) {
|
||
font-size: 18px;
|
||
}
|
||
</style>
|