screenFront/src/views/ChangHaoView/components/CenterBottom.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> &nbsp;{{ title }}&nbsp; </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>