mes-heli/mes-ui/mes-echarts/src/views/mainrigth.vue

<template>
  <div id="center">
    <dv-border-box-13>
      <div class="dvrow">
        <div>
          <span class="title-span">数控设备加工情况</span>
        </div>
      </div>
      <div class="dvlb">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </dv-border-box-13>

    <dv-border-box-13>
      <div class="dvrow">
        <div>
          <span class="title-span">装配车间工作信息</span>
        </div>
      </div>
      <div class="dvlb">
        <dv-scroll-board class="dv-scr-board" :config="configs" />
      </div>
    </dv-border-box-13>
    <!-- <rightbot2 /> -->

  </div>
</template>

<script>
import { request } from "@/utils/request.js";

export default {
  components: {},
  data() {
    return {
      config: {
        header: ["设备名称", "零件名称", "预计完成时间"],
        data: [
          [
            "1#机",
            "BX RUBY -- B0B1底框侧铣，YIZZ--EP040侧模侧铣",
            "2023/12/1-12/3",
          ],
          ["2#机", "AGYT DN400-- 上下模框、吹气板开粗", "2023/12/1-12/3"],
          ["3#机", "YQZZ--EP040壳体镶块精加工", "2023/12/1-12/4"],
          ["4#机", "BX RUBY -- B0B1顶板精加工", "2023/12/2-12/3"],
          ["5#机", "设备保养中", "--"],
          ["6#机", "BX--福特八缸05/06X芯盒顶板", "2023/12/2-12/3"],
          ["7#机", "设备保养中", "--"],
          ["8#机", "DFZZ-康明斯RUBY主体芯模框精加工", "2023/12/2-12/4"],
          ["9#机", "YQZZ--EP040 6#模上模板精加工", "2023/12/2-12/3"],
          ["10#机", "WC--L1缸盖冒口芯上模块精加工", "2023/12/1-12/4"],
          ["11#机", "WC--L1缸盖进排气定模块精加工", "2023/12/1-12/4"],
          ["12#机", "WC--L1缸盖冒口芯下模块精加工", "2023/12/1-12/4"],
          ["13#机", "SXCY--透气箱上模样精加工", "2023/12/2-12/3"],
        ],
        rowNum: 5, // 表格行数
        headerHeight: 50,
        headerBGC: "#09335A", // 表头
        oddRowBGC: "#16194C", // 奇数行
        evenRowBGC: "#222759", // 偶数行

        index: true,
        columnWidth: [60, 80, 240, 150], // 表的宽度
        align: ["left", "left", "center", "center", "center", "left"],
      },
      configs: {
        header: ["模具名称", "负责人", "进度", "交付时间"],
        data: [
          ["JCGK-支架", "B组", "100%", "2023/12/2"],
          ["DYDJ-0871机壳", "B组", "90%", "2023/12/6"],
          ["YPJX-5636/5657", "B组", "80%", "2023/12/4"],
          ["DFQC-前壳体", "A组", "80%", "2023/12/9"],
          ["BX-ruby缸体", "B组", "50%", "2023/12/16"],
          ["YXK-M50芯盒", "A组", "20%", "2023/12/14"],
          ["YQ-EP040 6#模", "A组", "20%", "2023/12/15"],
          ["YXK-GTGG", "A组", "20%", "2023/12/15"],
          ["XC-磨削胎具", "B组", "10%", "2023/12/9"],
          ["AGYT-DN400芯盒", "B组", "10%", "2023/12/9"],
          ["DFZZ-ruby缸体 /缸盖", "A组", "10%", "2024/1/20"],
          ["BX-福特8缸缸体", "B组", "10%", "2024/1/20"],
        ],
        rowNum: 5, // 表格行数
        headerHeight: 50,
        headerBGC: "#09335A", // 表头
        oddRowBGC: "#16194C", // 奇数行
        evenRowBGC: "#222759", // 偶数行

        index: true,
        columnWidth: [60, 170, 70, 90, 120], // 表的宽度
        align: ["left", "left", "center", "center", "center", "left"],
      },
      moDetailShow: false,
      moKey: null,
      moInfo: {},
    };
  },
  mounted() {
    // this.setData();
    // this.startInterval();
  },
  methods: {
    // 开启定时器
    // startInterval() {
    //   const _this = this;
    //   const time = 1000 * 60 * 60 * 2;
    //   if (this.intervalId !== null) {
    //     clearInterval(this.intervalId);
    //   }
    //   this.intervalId = setInterval(() => {
    //     _this.setData();
    //   }, time);
    // },
    setData() {
      const _this = this;
      request({
        // 获取生产工单
        // url: "/api/BigScreen/getPlanOrderList",
        // method: "get",
      }).then((r) => {
        if (r) {
          const newArr = r.data.map(function (item) {
            var ret = [];
            ret.push(
              item.FBILL_NO,
              item.FMATERIAL_NAME,
              item.FQTY_SHOW,
              item.FREPQUAAUX_QTY_SHOW,
              item.FREPFAILAUX_QTY_SHOW,
              (item.COMPLETE_RATE =
                (item.COMPLETE_RATE * 100).toFixed(1) + "%"),
              item.FENTRY_ID
            );
            return ret;
          });
          _this.config = {
            header: [
              "　生产工单",
              "产品名称",
              "计划数量",
              "合格数量",
              "不合格数量",
              "生产进度(%)",
              "11",
            ],

            data: newArr,
            rowNum: 5, // 表格行数
            headerHeight: 50,
            headerBGC: "#09335A", // 表头
            oddRowBGC: "#16194C", // 奇数行
            evenRowBGC: "#222759", // 偶数行
            columnWidth: [110, 380, 100, 90, 100, 110, 0], // 表的宽度
            align: ["left", "left", "right", "right", "right", "right"], // 显示方式
          };
        }
      });
    },
    getmoDetailInfo() {
      const _this = this;
      request({
        // 获取生产工单详细
        url: "/api/BigScreen/getPlanOrderDetail?fentryId=" + this.moKey,
        method: "get",
      }).then((r) => {
        debugger;
        _this.moInfo = r.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#center {
  width: 100%;
  .dv-border-box-13 {
    width: 100%;
    height: 434px;
    padding: 0 20px;
    padding-top: 20px;
    .dvrow {
      display: flex;
      justify-content: space-between;
    }
    .dvlb {
      margin-top: 15px;
      overflow: hidden;
      .dv-scr-board {
        width: 700px;
        height: 350px;
      }
    }
  }
}

.dv-scroll-board .header .header-item {
  color: #00b2ee;
}
.el-dialog__header {
  background-color: #f5f5f5 !important;
}
.el-dialog__body {
  background-color: #f5f5f5 !important;
}
// .el-descriptions :not(.is-bordered) .el-descriptions-item__cell {
//   background-color:#f5f5f5 !important;
// }

.el-dialog__footer {
  background-color: #f5f5f5 !important;
  color: rgba(33, 255, 255, 0.5);
}
</style>