From da4257bc32483409af02a06dd342c6981ec786ec Mon Sep 17 00:00:00 2001
From: liulijun <liulijun@hnkhzn.com>
Date: 星期一, 17 十一月 2025 17:14:14 +0800
Subject: [PATCH] 更新大屏幕页面和任务信息页面
---
项目代码/BigScreen/src/views/index.vue | 333 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 333 insertions(+), 0 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/src/views/index.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/src/views/index.vue"
new file mode 100644
index 0000000..11141e9
--- /dev/null
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/src/views/index.vue"
@@ -0,0 +1,333 @@
+<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 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 style="position: absolute; right: 20px;">
+ <p style="
+ display: inline-block;
+ font-size: 50px;
+ font-weight: bold;
+ color: #f7b500;
+ margin: 0;
+ padding: 5px 15px;
+ ">{{ currentTime }}</p>
+ </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>
+import drawMixin from "../utils/drawMixin";
+import { formatTime } from "../utils/index.js";
+import centerView1 from "./centerView1.vue";
+import bottomView1 from "./bottomView1.vue";
+import axios from "@/api/ajax.js";
+// 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()];
+
+ 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;
+ }
+ }
+ });
+ }
+ },
+};
+</script>
+
+<style lang="scss">
+@import "../assets/scss/index.scss";
+</style>
+
+<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;
+}
+
+.b-color {
+ width: 1420px;
+}
+
+.boxOrderHeight {
+ height: 40px;
+ line-height: 40px;
+ width: 400px;
+ display: flex;
+}
+
+.body-box {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 0 20px;
+}
+
+.content-box {
+ width: 100%;
+}
+
+.rows {
+ 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;
+}
+
+.bodys {
+ display: flex;
+ background-color: rgb(0, 59, 81);
+ color: #fff;
+ height: 32px;
+ line-height: 40px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3