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/centerView1.vue | 505 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 505 insertions(+), 0 deletions(-)
diff --git "a/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/src/views/centerView1.vue" "b/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/src/views/centerView1.vue"
new file mode 100644
index 0000000..0ceb6eb
--- /dev/null
+++ "b/\351\241\271\347\233\256\344\273\243\347\240\201/BigScreen/src/views/centerView1.vue"
@@ -0,0 +1,505 @@
+<template>
+ <div id="box">
+ <div class="container">
+ <div class="boxTop">
+ <div class="boxOrder">
+ <div>
+ <div style="margin-top: -10px">
+ <span>
+ <icon
+ name="align-left"
+ class="text-icon"
+ style="margin-left: 5px"
+ ></icon>
+ </span>
+ <span class="fs-xl text mb-1 pl-3" style="font-size: 20px;font-weight: bold;"
+ >宸ュ崟淇℃伅</span
+ >
+ </div>
+ <div style="margin-top: 10px">
+ <div class="row" style="font-weight: bold">
+ <div class="cell">宸ュ崟鍙�</div>
+ <div class="cell">鏍囧噯鍘嬪姏(t)</div>
+ <div class="cell">淇濆帇鏃堕棿(h)</div>
+ <div class="cell">楗兼�诲眰鏁�</div>
+ <div class="cell">鏍囧噯鐩村緞(mm)</div>
+ <div class="cell">瀹為檯鐩村緞(mm)</div>
+ <div class="cell">娴嬪缁撴灉</div>
+ <div class="cell" style="border-right: none;">宸ュ崟鐘舵��</div>
+ </div>
+ <div class="body">
+ <div class="cell">{{ OrderInfo.work_order_no }}</div>
+ <div class="cell">{{ OrderInfo.pressure }}</div>
+ <div class="cell">{{ OrderInfo.holding_time }}</div>
+ <div class="cell">{{ OrderInfo.total_layer }}</div>
+ <div class="cell">{{ OrderInfo.diameter_res }}</div>
+ <div class="cell">{{ OrderInfo.measure_diameter_res }}</div>
+ <div class="cell"><span style="display: block;width: 60px;height: 25px;margin: 4px auto;border: 2px solid gray;" :class="getTolerance(OrderInfo.is_tolerance)"></span></div>
+ <div class="cell" style="border-right: none;" :class="OrderInfo.status==1?'ing':'end'">{{ OrderInfo.status==1?"宸ュ崟杩涜涓�":"宸ュ崟宸插畬鎴�" }}</div>
+ </div>
+ </div>
+ </div>
+
+ <!-- <dv-water-level-pond :config="line" style="width:100px;height:85px;position: absolute;right: 85px;top: 20px;" /> -->
+
+ </div>
+ <div class="boxTitle">
+ <span
+ style="
+ width: 5px;
+ height: 30px;
+ background-color: #f34336;
+ display: block;
+ "
+ ></span>
+ <span
+ style="
+ display: block;
+ padding-left: 15px;
+ font-size: 20px;
+ font-weight: bold;
+ "
+ >璁惧鐘舵��</span
+ >
+ </div>
+ <div style="display: flex;position: absolute;left: 10px;top: 112px; width:1400px;justify-content: space-between;">
+ <dv-border-box-13 class="box" title="鍨掗ゼ鏈�">
+ <div class="boxItem">
+ <div class="boxLeft">
+ <img src="../assets/LB.png" width="150" height="150" style="" />
+ </div>
+ <div class="boxRight">
+ <div
+ style="
+ font-size: 22px;
+ font-weight: bold;
+ color: red;
+ width: 160px;
+ margin-top: 20px;
+ "
+ >
+ 鍨掗ゼ鏈�
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >蹇冭烦淇″彿锛�</span
+ >
+ <span style="display: block; width: 50px;height: 25px;text-align: left;margin: 5px 0px;" :class="LbjInfo.rboolHeart==true?'success':'info'"></span>
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >褰撳墠璁惧缂栧彿锛�</span
+ >
+ <span style="display: block; width: 100px; text-align: left"
+ >{{ LbjInfo.rintMCPDeviceID }}</span
+ >
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >褰撳墠璁惧鐘舵�侊細</span
+ >
+ <span style="display: block; width: 100px; text-align: left"
+ >{{ GetDeviceStatus(LbjInfo.rintMCPDeviceStatus) }}</span
+ >
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >褰撳墠璁惧娴佺▼锛�</span
+ >
+ <span style="display: block; width: 100px; text-align: left"
+ >{{ GetLbjStepNumber(LbjInfo.rintMCPAutoStepNumber) }}</span
+ >
+ </div>
+ </div>
+ </div>
+ </dv-border-box-13>
+ <dv-border-box-13 class="box" title="缈昏浆鏈�">
+ <div class="boxItem">
+ <div class="boxLeft">
+ <img src="../assets/FZ.png" width="150" height="150" style="" />
+ </div>
+ <div class="boxRight">
+ <div
+ style="
+ font-size: 22px;
+ color: red;
+ font-weight: bold;
+ width: 180px;
+ margin-top: 20px;
+ "
+ >
+ 缈昏浆鏈�
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >蹇冭烦淇″彿锛�</span
+ >
+ <span style="display: block; width: 50px;height: 25px;text-align: left;margin: 5px 0px;" :class="FzjInfo.rboolRCP1Heart==true?'success':'info'"></span>
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >褰撳墠璁惧缂栧彿锛�</span
+ >
+ <span style="display: block; width: 100px; text-align: left"
+ >{{ FzjInfo.rintRCP1DeviceID }}</span
+ >
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >褰撳墠璁惧鐘舵�侊細</span
+ >
+ <span style="display: block; width: 100px; text-align: left"
+ >{{ GetDeviceStatus(FzjInfo.rintRCP1DeviceStatus) }}</span
+ >
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right"
+ >褰撳墠璁惧娴佺▼锛�</span
+ >
+ <span style="display: block; width: 100px; text-align: left"
+ >{{ GetFzjStepNumber(FzjInfo.rintRCP1AutoStepNumber) }}</span
+ >
+ </div>
+ </div>
+ </div>
+ </dv-border-box-13>
+ <dv-border-box-13 class="box" title="鏈烘鎵�">
+ <div class="boxItem">
+ <div class="boxLeft">
+ <img src="../assets/JX.png" width="150" height="150" style="" />
+ </div>
+ <div class="boxRight">
+ <div
+ style="
+ font-size: 22px;
+ color: red;
+ font-weight: bold;
+ width: 180px;
+ margin-top: 20px;
+ "
+ >
+ 鏈烘鎵�
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right">蹇冭烦淇″彿锛�</span>
+ <span style="display: block; width: 50px;height: 25px;text-align: left;margin: 5px 0px;" :class="JxsInfo.rboolRCP2Heart==true?'success':'info'"></span>
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right">褰撳墠璁惧缂栧彿锛�</span>
+ <span style="display: block; width: 100px; text-align: left">{{ JxsInfo.rintRCP2DeviceID }}</span>
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right">褰撳墠璁惧鐘舵�侊細</span>
+ <span style="display: block; width: 100px; text-align: left">{{ GetJxsDeviceStatus(JxsInfo.rintRCP2DeviceStatus) }}</span>
+ </div>
+ <div class="boxitem_down">
+ <span style="display: block; width: 160px; text-align: right">褰撳墠璁惧娴佺▼锛�</span>
+ <span style="display: block; width: 100px; text-align: left">{{ GetJxsStepNumber(JxsInfo.rintRCP2AutoStepNumber) }}</span>
+ </div>
+ </div>
+ </div>
+ </dv-border-box-13>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+ <script>
+import axios from "@/api/ajax.js";
+export default {
+ data() {
+ return {
+ line: {
+ data: [86],
+ shape: 'roundRect',
+ waveOpacity:0.2,
+ colors:['#00baff']
+ },
+ 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: [
+ [
+ '<span style="color:#67e0e3;">1灞�</span>',
+ '<span style="color:#9fe6b8;">60mm</span>',
+ '<span style="color:#fb7293;">60mm</span>',
+ ],
+ [
+ '<span style="color:#67e0e3;">1灞�</span>',
+ '<span style="color:#9fe6b8;">60mm</span>',
+ '<span style="color:#fb7293;">60mm</span>',
+ ]
+ ],
+ waitTime: 5000,
+ columnWidth: [85,115,115,115],
+ align: ["center", "center", "center", "center"]
+ },
+ OrderInfo: {
+
+ },
+ LbjInfo:{
+
+ },
+ FzjInfo:{
+
+ },
+ JxsInfo:{
+
+ },
+ IsInterval:true,
+ IsPlc:true,
+ };
+ },
+ mounted() {
+ this.GetPLCData();
+ this.GetOrderInfos();
+ },
+ methods: {
+ GetOrderInfos() {
+ axios.post("/api/dt_WorkOrder/getWorkOrderInfo", null, "").then((res) => {
+ if (res.data.status) {
+ if(res.data.data==null && this.OrderInfo!=null){
+ this.OrderInfo.status=2;
+ return;
+ }
+ this.OrderInfo = res.data.data;
+ if(this.IsInterval){
+ setInterval(() => {
+ this.GetOrderInfos();
+ },5000);
+ this.IsInterval=false;
+ }
+ }
+ });
+ },
+ GetPLCData() {
+ axios.post("/api/dt_WorkOrder/getPLCData", null, "").then((res) => {
+ if (res.data.status) {
+ var data=res.data.data;
+ if(data==null)
+ return console.log("data鍊间负绌�");
+ this.LbjInfo=data.lbj_data;
+ this.FzjInfo=data.fzj_data;
+ this.JxsInfo=data.zljxs_Data;
+ }
+ if(this.IsPlc){
+ setInterval(() => {
+ this.GetPLCData();
+ },1500);
+ this.IsPlc=false;
+ }
+ });
+ },
+ GetLbjStepNumber(val){
+ switch (val) {
+ case 0:
+ return "鏃�";
+ case 1:
+ return "鍥炲緟鏈轰綅";
+ case (val>=10 && val<=19):
+ return "娴嬮珮涓�";
+ case (val>=20 && val<=29):
+ return "娴嬮珮瀹屾垚鍚庤繑鍥炰腑";
+ case (val>=100 && val<=110):
+ return "鍘嬬揣涓�";
+ default:
+ break;
+ }
+ },
+ GetFzjStepNumber(val){
+ switch (val) {
+ case 0:
+ return "鏃�";
+ case 1:
+ return "鍥炲緟鏈轰綅";
+ case (val>=10 && val<=19):
+ return "姝ｅ悜閫侀ゼ涓�";
+ case (val>=20 && val<=29):
+ return "鍙嶅悜閫侀ゼ涓�";
+ default:
+ break;
+ }
+ },
+ GetJxsStepNumber(val){
+ switch (val) {
+ case 0:
+ return "鏃�";
+ case 1:
+ return "璁惧寰呮満涓�";
+ case 2:
+ return "璁惧杩愬姩涓�";
+ default:
+ break;
+ }
+ },
+ GetDeviceStatus(val){
+ switch (val) {
+ case 1:
+ return "鑷姩浣滀笟";
+ case 2:
+ return "鑷姩寰呮満";
+ case 3:
+ return "鏁呴殰";
+ case 4:
+ return "鎵嬪姩";
+ default:
+ break;
+ }
+ },
+ GetJxsDeviceStatus(val){
+ switch (val) {
+ case 1:
+ return "閫熷害妯″紡";
+ case 2:
+ return "鍔涚煩妯″紡";
+ case 3:
+ return "浣嶇疆妯″紡";
+ case 4:
+ return "鏁呴殰";
+ default:
+ break;
+ }
+ },
+ getTolerance(val){
+ if(val==true){
+ return 'success';
+ }else if(val==false){
+ return 'error';
+ }else{
+ return null;
+ }
+ }
+ },
+};
+</script>
+ <style lang="scss" scoped>
+$box-height: 420px;
+$box-width: 1420px;
+#box {
+ padding: 16px;
+ padding-top: 10px;
+ height: $box-height;
+ width: $box-width;
+ border-radius: 5px;
+}
+.container {
+ height: 750px;
+ width: 100%;
+}
+.boxTop {
+ width: 100%;
+ height: 300px;
+ padding-top: 20px;
+ display: flex;
+}
+.boxTop .box {
+ margin-top: 38px;
+ width: 450px;
+ height: 260px;
+}
+.boxItem {
+ display: flex;
+ background-color: rgb(0, 59, 81,0.6);
+ width: 435px;
+ margin: 15px auto;
+ height: 240px;
+ z-index: 0;
+ border-radius: 0% 5%;
+}
+.boxitem_down {
+ display: flex;
+ font-size: 20px;
+ color: whitesmoke;
+}
+.boxLeft {
+ margin-top: 50px;
+ margin-left: 10px;
+ width: 150px;
+ height: 150px;
+}
+.boxRight {
+ margin-left: 10px;
+ width: 300px;
+ height: 260px;
+}
+.boxRight div {
+ line-height: 35px;
+ text-align: right;
+}
+.boxOrderHeight {
+ height: 40px;
+ line-height: 30px;
+ width: 150px;
+ position: absolute;
+ left: 22px;
+ top: 120px;
+ display: flex;
+}
+.boxTitle {
+ height: 40px;
+ line-height: 30px;
+ width: 150px;
+ position: absolute;
+ left: 20px;
+ top: 115px;
+ display: flex;
+}
+.boxOrder {
+ margin-top: -10px;
+}
+.row {
+ display: flex;
+ background-color: rgb(0, 186, 255);
+ color: #fff;
+ height: 30px;
+ line-height: 30px;
+ font-size: 18px;
+}
+.cell {
+ width: 160px;
+ border-right: #fff 1px solid;
+ text-align: center;
+}
+.body {
+ display: flex;
+ background-color: rgb(0, 59, 81);
+ color: #fff;
+ height: 32px;
+ line-height: 32px;
+}
+.rows {
+ display: flex;
+ background-color: rgb(0, 186, 255);
+ color: #fff;
+ height: 30px;
+ line-height: 30px;
+ font-size: 18px;
+}
+.bodys {
+ display: flex;
+ background-color: rgb(0, 59, 81);
+ color: #fff;
+ height: 32px;
+ line-height: 32px;
+}
+.error{
+ background-color: red;
+}
+.success{
+ background-color: #67c23a;
+}
+.info{
+ background-color: lightgray;
+}
+.ing{
+ color: #ffff00;
+}
+.end{
+ color: #67c23a;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3