1

liulijun

2026-01-06 114c252dcc51fea8b725bcd375cabb1e8d23a90e

 ÏîÄ¿´úÂë/BigScreen/src/views/index.vue

@@ -1,47 +1,33 @@
<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="myhead"></div>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center" style="margin-top: 17px">
          <div class="d-flex jc-center">
            <div class="dv-dec-8"></div>
            <div class="title">
              <dv-decoration-11 class="title-text" style="
                  font-size: 75px;
                  color: #ffffff;
                  width: 600px;
                  height: 80px;
                  line-height: 80px;
                  margin-top: -30px;
                ">监 æŽ§ æ˜¾ ç¤º</dv-decoration-11>
            </div>
          </div>
        </div>
        <div class="react-right" style="margin-left: 1510px">
          <span class="text" style="width: 400px">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
        </div>
        <div class="body-box">
    <div id="index" ref="appRef">
        <div class="bg">
            <div class="myhead"></div>
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">

          <div class="content-box">
            <div class="boxOrderHeight"
              style="margin-left: 0px; display: flex; align-items: center; position: relative; width: 100%;">
              <span style="
                <div class="react-right" style="margin-left: 1510px">
                    <span class="text" style="width: 400px">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
                </div>
                <div class="body-box">

                    <div class="content-box">
                        <div class="boxOrderHeight"
                            style="margin-left: 0px; display: flex; align-items: center; position: relative; width: 100%;">
                            <span style="
                    width: 5px;
                    height: 40px;
                    background-color: #FF4500;
                    display: block;
                  "></span>
              <span style="
                            <span style="
                    padding-left: 15px;
                    font-size: 50px;
                    font-size: 60px;
                    font-weight: bold;
                    color: #90EE90;
                  ">立库输送轨道原纸信息（共 å·ï¼‰</span>
              //时间
              <div style="position: absolute; right: 20px;">
                <p style="
                  ">立库输送轨道原纸信息（共{{showMsg}}卷）</span>
                            //时间
                            <div style="position: absolute; right: 20px;">
                                <p style="
                      display: inline-block;
                      font-size: 50px;
                      font-weight: bold;
@@ -49,39 +35,20 @@
                      margin: 0;
                      padding: 5px 15px;
                    ">{{ currentTime }}</p>
              </div>
                            </div>
                        </div>
                        <!-- å·¥å•ä¿¡æ¯æ¨¡å— -->
                        <dv-border-box-8 :reverse="true"
                            style="width: 100%; height: 950px; margin-top: 5px; margin-left: auto; margin-right: auto;">
                            <dv-scroll-board :config="config" ref="scrollBoard"
                                style="width: 100%; height: 950px; padding: 5px" />
                        </dv-border-box-8>
                    </div>

                </div>
            </div>
            <!-- å·¥å•ä¿¡æ¯æ¨¡å— -->
            <dv-border-box-8 :reverse="true"
              style="width: 100%; height: 415px; margin-top: 5px; margin-left: auto; margin-right: auto;">
              <dv-scroll-board :config="config" ref="scrollBoard" style="width: 100%; height: 415px; padding: 5px" />
            </dv-border-box-8>
          </div>
          <div class="content-box">
            <div class="boxOrderHeight" style="margin-left: 0px; display: flex; align-items: center; position: relative; width: 100%;">
              <span style="
                    width: 5px;
                    height: 40px;
                    background-color: #FF4500;
                    display: block;
                  "></span>
              <span style="
                    padding-left: 15px;
                    font-size: 50px;
                    font-weight: bold;
                    color: #90EE90;
                  ">排除出库原纸信息（共 å·ï¼‰</span>
            </div>
            <!-- å·¥å•ä¿¡æ¯æ¨¡å— -->
            <dv-border-box-8 :reverse="true"
              style="width: 100%; height: 415px; margin-top: 5px; margin-left: auto; margin-right: auto;">
              <dv-scroll-board :config="config" ref="scrollBoard" style="width: 100%; height: 415px; padding: 5px;" />
            </dv-border-box-8>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
@@ -93,178 +60,206 @@
// import{GetDateForLED} from "@/api/http.js"

export default {
  mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      currentTime: '',
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      config: {
        header: [
          '<span style="font-size:50px;">纸卷条码</span>',
          '<span style="font-size:50px;">工单号</span>',
          '<span style="font-size:50px;">代码</span>',
          '<span style="font-size:50px;">上机位</span>',
          '<span style="font-size:50px;">宽幅</span>',
          '<span style="font-size:50px;">纸卷长</span>',
          '<span style="font-size:50px;">需用纸长</span>'
        ],
        data: [
          [
            '<span style="color:#FF4500; font-size:75px;">705010</span>',
            '<span style="color:#FF4500; font-size:75px;">015004</span>',
            '<span style="color:#FF4500; font-size:75px;">X2</span>',
            '<span style="color:#FF4500; font-size:75px;">1</span>',
            '<span style="color:#FF4500; font-size:75px;">1200</span>',
            '<span style="color:#FF4500; font-size:75px;;">4798</span>',
            '<span style="color:#FF4500; font-size:75px;">180</span>',
          ],
          [
           '<span style="color:#FF4500; font-size:75px;">705010</span>',
            '<span style="color:#FF4500; font-size:75px;">015004</span>',
            '<span style="color:#FF4500; font-size:75px;">X2</span>',
            '<span style="color:#FF4500; font-size:75px;">2</span>',
            '<span style="color:#FF4500; font-size:75px;">1200</span>',
            '<span style="color:#FF4500; font-size:75px;;">4798</span>',
            '<span style="color:#FF4500; font-size:75px;">180</span>',
          ],
          [
           '<span style="color:#FF4500; font-size:75px;">705010</span>',
            '<span style="color:#FF4500; font-size:75px;">015004</span>',
            '<span style="color:#FF4500; font-size:75px;">X2</span>',
            '<span style="color:#FF4500; font-size:75px;">3</span>',
            '<span style="color:#FF4500; font-size:75px;">1200</span>',
            '<span style="color:#FF4500; font-size:75px;;">4798</span>',
            '<span style="color:#FF4500; font-size:75px;">180</span>',
          ],
          [
            '<span style="color:#FF4500; font-size:75px;">705010</span>',
            '<span style="color:#FF4500; font-size:75px;">015004</span>',
            '<span style="color:#FF4500; font-size:75px;">X2</span>',
            '<span style="color:#FF4500; font-size:75px;">4</span>',
            '<span style="color:#FF4500; font-size:75px;">1200</span>',
            '<span style="color:#FF4500; font-size:75px;;">4798</span>',
            '<span style="color:#FF4500; font-size:75px;">180</span>',
          ],
          [
           '<span style="color:#FF4500; font-size:75px;">705010</span>',
            '<span style="color:#FF4500; font-size:75px;">015004</span>',
            '<span style="color:#FF4500; font-size:75px;">X2</span>',
            '<span style="color:#FF4500; font-size:75px;">5</span>',
            '<span style="color:#FF4500; font-size:75px;">1200</span>',
            '<span style="color:#FF4500; font-size:75px;;">4798</span>',
            '<span style="color:#FF4500; font-size:75px;">180</span>',
          ],
        ],
        headerHeight: 60,
        oddRowBGC: "rgba(0, 0, 0, 0.6)",
        evenRowBGC: "rgba(0, 0, 0, 0.6)",
        headerBGC: "rgba(0, 0, 0, 0.6)",
        waitTime: 5000,
        columnWidth: [350, 350, 200, 200, 250, 250, 350],
        rowNum: 4,
        align: ["center", "center", "center", "center", "center", "center", "center"],
      },
      IsDetail: true,
      OrderCreator: {},
    };
  },
  components: {
    centerView1,
    bottomView1,
  },
  mounted() {
    this.updateTime(); // åˆå§‹åŒ–时间
    this.timing = setInterval(() => {
      this.updateTime(); // æ¯ç§’更新时间
    }, 1000);
    this.cancelLoading();
    // this.GetOrderDetail();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    // æ›´æ–°åŒ—京时间
    updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const weekday = weekdays[now.getDay()];
    mixins: [drawMixin],
    data() {
        return {
            timing: null,
            timeRequest: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            currentTime: '',
            weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            config: {
                header: [
                    '<span style="font-size:50px;">纸卷条码</span>',
                    '<span style="font-size:50px;">工单号</span>',
                    '<span style="font-size:50px;">代码</span>',
                    '<span style="font-size:50px;">上机位</span>',
                    '<span style="font-size:50px;">宽幅</span>',
                    '<span style="font-size:50px;">纸卷长</span>',
                    '<span style="font-size:50px;">需用纸长</span>'
                ],
                data: [
                    [
                        '<span style="color:#FF4500; font-size:60px;">705010</span>',
                        '<span style="color:#FF4500; font-size:60px;">015004</span>',
                        '<span style="color:#FF4500; font-size:60px;">X2</span>',
                        '<span style="color:#FF4500; font-size:60px;">1</span>',
                        '<span style="color:#FF4500; font-size:60px;">1200</span>',
                        '<span style="color:#FF4500; font-size:60px;;">4798</span>',
                        '<span style="color:#FF4500; font-size:60px;">180</span>',
                    ],
                    [
                        '<span style="color:#FF4500; font-size:60px;">705010</span>',
                        '<span style="color:#FF4500; font-size:60px;">015004</span>',
                        '<span style="color:#FF4500; font-size:60px;">X2</span>',
                        '<span style="color:#FF4500; font-size:60px;">2</span>',
                        '<span style="color:#FF4500; font-size:60px;">1200</span>',
                        '<span style="color:#FF4500; font-size:60px;;">4798</span>',
                        '<span style="color:#FF4500; font-size:60px;">180</span>',
                    ],
                ],
                headerHeight: 60,
                oddRowBGC: "rgba(0, 0, 0, 0.6)",
                evenRowBGC: "rgba(0, 0, 0, 0.6)",
                headerBGC: "rgba(0, 0, 0, 0.6)",
                waitTime: 5000,
                columnWidth: [380, 380, 180, 200, 200, 250, 250],
                rowNum: 10,
                align: ["center", "center", "center", "center", "center", "center", "center"],
            },
            IsDetail: true,
            showMsg:""
        };
    },
    components: {
        centerView1,
        bottomView1,
    },
    mounted() {
        this.updateTime(); // åˆå§‹åŒ–时间
        this.timing = setInterval(() => {
            this.updateTime(); // æ¯ç§’更新时间
        }, 1000);
        this.cancelLoading();
        this.GetOrderDetail();
    },
    beforeDestroy() {
        clearInterval(this.timing);
        clearInterval(this.timeRequest);
    },
    methods: {
        // æ›´æ–°åŒ—京时间
        updateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            const weekday = weekdays[now.getDay()];

      this.currentTime = `${year}-${month}-${day} ${weekday} ${hours}:${minutes}:${seconds}`;
    },
    //刷新时间
    timeFn() {
      this.timing = setInterval(() => {
        axios.post("/api/dt_WorkOrder/GetCurrentTime", null, "").then((x) => {
          if (x.data.status) {
            var data = x.data.data;
            this.dateDay = formatTime(data, "HH: mm: ss");
            this.dateYear = formatTime(data, "yyyy-MM-dd");
          }
        });
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    GetOrderDetail() {
      axios.post("/api/dt_WorkOrder/getWorkOrderInfo", null, "").then((res) => {
        if (res.data.status) {
          if (res.data.data == null) {
            return;
          }
          var sp = '</span>';
          var arr = [];
          res.data.data.dt_WorkOrderDetail.forEach((x) => {
            var item = [
              '<span style="color:#67e0e3;">' + x.layer + '层' + sp,
              '<span style="color:#9fe6b8;">' + (x.lj_hight == null ? '无需测量' : x.lj_hight + 'mm') + sp,
              '<span style="color:#fb7503;">' + (x.measure_hight == null ? '无需测量' : x.measure_hight + 'mm') + sp,
              '<span style="color:#fb7503;">' + x.lj_is_tolerance + sp,
            ];
            arr.push(item);
          });
          this.OrderCreator = res.data.data;
          if (this.IsDetail) {
            this.config = {
              header: [
                '<span style="font-size:18px;">层数</span>',
                '<span style="font-size:18px;">累计标准饼厚</span>',
                '<span style="font-size:18px;">累计饼厚</span>',
                '<span style="font-size:18px;">测高结果</span>'
              ],
              data: arr,
              waitTime: 10000,
              rowNum: 15,
              columnWidth: [75, 150, 110, 110],
              align: ["center", "center", "center", "center"]
            };
          } else {
            this.$refs["scrollBoard"].updateRows(arr)
          }
          if (this.IsDetail) {
            setInterval(() => {
              this.GetOrderDetail();
            }, 10000);
            this.IsDetail = false;
          }
            this.currentTime = `${year}-${month}-${day} ${weekday} ${hours}:${minutes}:${seconds}`;
        },
        //刷新时间
        timeFn() {
            this.timing = setInterval(() => {
                axios.post("/api/dt_WorkOrder/GetCurrentTime", null, "").then((x) => {
                    if (x.data.status) {
                        var data = x.data.data;
                        this.dateDay = formatTime(data, "HH: mm: ss");
                        this.dateYear = formatTime(data, "yyyy-MM-dd");
                    }
                });
            }, 1000);
        },
        cancelLoading() {
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        },
        GetOrderDetail() {
            axios.post("/api/OutLineView/GetOutLineView", null, "").then((res) => {
                if (res.data.status) {
                    if (res.data.data == null) {
                        return;
                    }
                    this.showMsg=res.data.message
                    
                    // 1. æŒ‰çº¸å·æ¡ç åˆ†ç»„
                    const groupedData = {};
                    res.data.data.forEach((x) => {
                        if (!groupedData[x.palletCode]) {
                            groupedData[x.palletCode] = [];
                        }
                        groupedData[x.palletCode].push(x);
                    });
                    
                    // 2. å¤„理数据：将每组相同纸卷条码的记录合并为一条
                    var arr = [];
                    Object.keys(groupedData).forEach((palletCode) => {
                        const group = groupedData[palletCode];
                        if (group.length === 0) return;
                        
                        // å–第一条记录的基本信息
                        const firstItem = group[0];
                        let totalOrderQuantity = 0;
                        
                        // ç»Ÿè®¡æŒ‰çº¸å·æ¡ç åŽ»é‡åŽçš„合并卷数
                        const uniquePalletCodes = new Set();
                        res.data.data.forEach((item) => {
                            if (item.palletCode) {
                                uniquePalletCodes.add(item.palletCode);
                            }
                        });
                        this.showMsg = uniquePalletCodes.size;
                        
                        // ç›´æŽ¥å¤„理每条记录，不进行分组
                        group.forEach((item) => {
                            totalOrderQuantity += parseFloat(item.orderQuantity) || 0;
                        });
                        
                        // å¤„理上机位：只显示最后一位
                        const machineName = firstItem.machineName;
                        const machineLastChar = machineName ? machineName.slice(-3) : '';
                        
                        // å¤„理数值：去除小数点
                        const materialWide = parseInt(firstItem.materialWide) || 0;
                        const originalQuantity = parseInt(firstItem.originalQuantity) || 0;
                        
                        // åˆå¹¶å·¥å•å·ï¼šç”¨é€—号分隔显示所有工单号
                        const orderNos = group.map(item => item.orderNo).join(', ');
                        
                        // åˆ›å»ºåˆå¹¶åŽçš„单条记录
                        var item = [
                            '<span style="color:#FF4500; font-size:85px;">' + palletCode + '</span>',
                            //'<span style="color:#FF4500; font-size:55px;">' + orderNos + '</span>',
                            '<span style="color:#FF4500; font-size:85px;">' + firstItem.materielCode + '</span>',
                            '<span style="color:#FF4500; font-size:85px;">' + machineLastChar + '</span>',
                            '<span style="color:#FF4500; font-size:85px;">' + materialWide + '</span>',
                            '<span style="color:#FF4500; font-size:85px;;">' + originalQuantity + '</span>',
                            '<span style="color:#FF4500; font-size:85px;">' + parseInt(totalOrderQuantity) + '</span>',
                        ];
                        arr.push(item);
                    });
                    if (this.IsDetail) {
                        this.config = {
                            header: [
                            '<span style="font-size:63px;">纸卷条码</span>',
                            //'<span style="font-size:50px;">工单号</span>',
                            '<span style="font-size:63px;">代码</span>',
                            '<span style="font-size:63px;">上机位</span>',
                            '<span style="font-size:63px;">宽幅</span>',
                            '<span style="font-size:63px;">纸卷长</span>',
                            '<span style="font-size:63px;">需用纸长</span>'
                            ],
                            data: arr,
                            headerHeight: 60,
                            oddRowBGC: "rgba(0, 0, 0, 0.6)",
                            evenRowBGC: "rgba(0, 0, 0, 0.6)",
                            headerBGC: "rgba(0, 0, 0, 0.6)",
                            waitTime: 5000,
                            columnWidth: [550, 200, 250, 250, 250, 300],
                            rowNum: 10,
                            align: ["center", "center", "center", "center", "center", "center", "center"],
                        };
                    } else {
                        this.$refs["scrollBoard"].updateRows(arr)
                    }
                    if (this.IsDetail) {
                        this.timeRequest = setInterval(() => {
                            this.GetOrderDetail();
                        }, 10000);
                        this.IsDetail = false;
                    }
                }
            });
        }
      });
    }
  },
    },
};
</script>

@@ -274,60 +269,59 @@

<style lang="css" scoped>
.myhead {
  position: absolute;
  width: 100%;
  height: 100px;
  /* background-color: red; */
  top: 0;
  left: 0;
  z-index: 999;
  background-image: url("../assets/head_bg1.png");
  background-size: cover;
  background-position: center center;
    position: absolute;
    width: 100%;
    height: 100px;
    /* background-color: red; */
    top: 0;
    left: 0;
    z-index: 999;
    background-size: cover;
    background-position: center center;
}

.b-color {
  width: 1420px;
    width: 1420px;
}

.boxOrderHeight {
  height: 40px;
  line-height: 40px;
  width: 400px;
  display: flex;
    height: 40px;
    line-height: 40px;
    width: 400px;
    display: flex;
}

.body-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
}

.content-box {
  width: 100%;
    width: 100%;
}

.rows {
  display: flex;
  background-color: rgb(0, 0, 0);
  color: #fff;
  height: 30px;
  line-height: 30px;
  font-size: 18px;
    display: flex;
    background-color: rgb(0, 0, 0);
    color: #fff;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
}

.cell {
  width: 160px;
  border-right: #fff 1px solid;
  text-align: center;
    width: 160px;
    border-right: #fff 1px solid;
    text-align: center;
}

.bodys {
  display: flex;
  background-color: rgb(0, 59, 81);
  color: #fff;
  height: 32px;
  line-height: 40px;
    display: flex;
    background-color: rgb(0, 59, 81);
    color: #fff;
    height: 32px;
    line-height: 40px;
}
</style>