From c88b44ec4d27cf616ce587505029e6fd178c545d Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 25 八月 2023 14:57:45 +0800
Subject: [PATCH] plc配置的反显问题
---
src/views/visualization.vue | 383 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 275 insertions(+), 108 deletions(-)
diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 6322a9b..fefc625 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -1,7 +1,7 @@
<template>
<div class="home">
- <template v-if="Object.keys(taskData).length > 0">
+ <template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID">
<div class="left">
<p class="title">
鐢熶骇绠＄悊鐪嬫澘
@@ -13,8 +13,10 @@
</p>
<div class="statelist">
<span class="title-item"
- >璁㈠崟缂栧彿:
- <span class="color_4efefa">{{ taskData.Order.orderId || "" }}</span>
+ >宸ュ崟缂栧彿:
+ <span class="color_4efefa">{{
+ taskData.Order.workOrderId || ""
+ }}</span>
</span>
<span class="title-item"
>褰撳墠宸ュ簭:
@@ -25,16 +27,24 @@
<span class="title-item"
>鍚庨亾宸ュ簭:
<span class="color_4efefa">
- <!-- {{
- taskData.NextProcedure.procedure.procedureName || "--"
- }} -->
+ {{
+ taskData.Procedure.procedure.nextProcedureName || "--"
+ }}
</span>
</span>
<span class="title-item"
>宸ヤ綔浜烘暟:
- <span class="color_4efefa"
- >{{ taskData.Procedure.procedure.workers.length || 0 }}浜�</span
- >
+ <span class="color_4efefa">
+ <span
+ v-if="
+ taskData.Procedure.procedure &&
+ taskData.Procedure.procedure.workers
+ "
+ >{{ taskData.Procedure.procedure.workers.length }}</span
+ >
+ <span v-else>0</span>
+ 浜�
+ </span>
</span>
</div>
<div class="content">
@@ -76,13 +86,9 @@
{{ taskData.Procedure.procedure.workHours || "" }}
</el-descriptions-item>
<el-descriptions-item label="璧锋鏃堕棿"
- >{{
- formatDate(taskData.Procedure.procedure.startTime) || ""
- }}
+ >{{ formatDate(taskData.Order.startTime) || "" }}
-
- {{
- formatDate(taskData.Procedure.procedure.endTime)
- }}</el-descriptions-item
+ {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
>
<el-descriptions-item label="璐х墿鎻忚堪">{{
taskData.Order.orderAttr || ""
@@ -100,19 +106,17 @@
<el-progress
define-back-color="#133EAF"
color="#09E5ED"
+ text-color="#fff"
:text-inside="true"
:stroke-width="30"
- :percentage="
- finishNumber && taskData.Order.amount
- ? parseInt(finishNumber / taskData.Order.amount)
- : 0
- "
+ :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount):0"
></el-progress>
</el-descriptions-item>
<!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%">
<el-progress
define-back-color="#007101"
color="#00CC66"
+ text-color="#fff"
:text-inside="true"
:stroke-width="30"
:percentage="passrate"
@@ -194,20 +198,16 @@
</div>
<div class="card_top-3">
<span class="card-top-r-t"
- >瀹屾垚杩涘害锛歿{
- parseInt(finishNumber / taskData.Order.amount) || 0
- }}</span
+ >瀹屾垚杩涘害锛歿{ taskData.Order?parseInt(finishNumber/taskData.Order.amount):0}}</span
>
<span class="card-top-r-b">
-
<el-progress
define-back-color="#133EAF"
color="#09E5ED"
+ text-color="#fff"
:text-inside="true"
:stroke-width="10"
- :percentage="
- parseInt(finishNumber / taskData.Order.amount)
- "
+ :percentage="taskData.Order?parseInt(finishNumber/taskData.Order.amount):0"
:show-text="false"
></el-progress>
</span>
@@ -224,8 +224,18 @@
<!-- <div class="card_content">
</div> -->
- <div class="card_top-4"><div>宸ヨ壓缂栧彿锛歿{ list.number }}</div>
- <div style="font-size:14px;color:#cfcfcf;line-height:20px">宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�</div></div>
+ <div class="card_top-4">
+ <div>宸ヨ壓缂栧彿锛歿{ list.number }}</div>
+ <div
+ style="
+ font-size: 14px;
+ color: #cfcfcf;
+ line-height: 20px;
+ "
+ >
+ 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
+ </div>
+ </div>
</template>
</div>
</el-carousel-item>
@@ -336,12 +346,12 @@
<div class="right-top-l">浣滀笟鐘舵��</div>
<div class="time">
<dl>
- <dd><span style="font-size: 32px">17:50</span></dd>
+ <dd><span style="font-size: 32px">{{ formatTime3 }}</span></dd>
<dd>
- <span style="font-size: 12px; margin-right: 10px"
- >2023/02/16</span
+ <span style="font-size: 12px; "
+ >{{ formatTime2 }}</span
>
- <span style="font-size: 14px">鏄熸湡鍥�</span>
+ <!--margin-right: 10px <span style="font-size: 14px">鏄熸湡鍥�</span> -->
</dd>
</dl>
</div>
@@ -358,7 +368,10 @@
</div>
<div class="right_dutyLst">
<div class="right-small-title">褰撳墠鍊肩彮</div>
- <div class="right-person-box">
+ <div
+ class="right-person-box"
+ v-if="taskData.Procedure.procedure.workers"
+ >
<dl
class="right-small-person"
v-for="(item, index) in taskData.Procedure.procedure.workers"
@@ -378,7 +391,7 @@
style="font-size: 20px; font-weight: 600; margin-right: 10px"
>{{ item.workerName || "" }}</span
>
- <span style="color: #666">{{ item.phoneNum || "" }}</span>
+ <span>{{ item.phoneNum || "" }}</span>
</dl>
</div>
<!-- <div
@@ -395,7 +408,7 @@
</div> -->
</div>
<div class="right_base">
- <div class="right-small-title" style="line-height:40px;">鐭ヨ瘑搴�</div>
+ <div class="right-small-title" style="line-height: 40px">鐭ヨ瘑搴�</div>
<Knowledge />
<div class="right-base-btn call">
<el-button type="primary"
@@ -406,34 +419,37 @@
</div>
</template>
<template v-else>
- <div
- style="
- width: 100%;
- height: 100%;
- font-size: 20px;
- text-align: center;
- line-height: 100px;
- "
- >
- <div
- style="
- width: 200px;
- height: 200px;
- margin: 0 auto;
- line-height: 200px;
- margin-top: calc(20% - 100px);
- "
- >
- 鏆傛棤浠诲姟
+ <div class="home-img-box">
+ <div class="bg-title">
+ <img src="../../public/bg-title.png" />
+ <span class="bg-title-span">璁惧瀹炴椂鐢熶骇鐪嬫澘</span>
+ <div class="bg-date"><span>{{ formatTime3 }}</span><br/>{{formatTime2}}</div>
+ <span
+ class="font el-icon-setting set-title bg-set"
+ @click="setUrl"
+ ></span>
+ </div>
+ <div class="yuan">
+ <img src="../../public/yuan.png" />
+ <div class="btn-img">
+ <div class="font_size_16" style="line-height: 5; margin-top: 18%">
+ <span v-if="showCountDown">璺濈浠诲姟寮�濮嬫椂闂达細{{countDownHour}}鏃� {{countDownMinute}}鍒�</span>
+ <span v-else>鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂...</span>
+ </div>
+ <el-button type="primary" @click="reloadPage">鍒锋柊浠诲姟</el-button>
+ </div>
</div>
</div>
</template>
<!-- 鎺у埗鐨勫脊妗� -->
<AddControl ref="control" :id="taskData.Procedure.ID" />
+ <!-- 鎺у埗鐨勫脊妗� -->
+ <AddIssue ref="control" :taskData="taskData" :Order="taskData.Order" @getSetProductNumber="getTaskInfo" />
</div>
</template>
<script>
+
import {
getTaskInfo,
finishTask,
@@ -441,15 +457,18 @@
saveMiniDict,
startTask,
getProgress,
+ countdown,
} from "@/api/home/index"; // 浜х嚎
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
import AddControl from "../components/AddControl.vue";
+import AddIssue from "../components/AddIssue.vue";
export default {
components: {
Card,
Knowledge,
AddControl,
+ AddIssue,
},
data() {
return {
@@ -457,28 +476,13 @@
passrate: 30, //鍚堟牸鐜�
production: 25, //鐢熶骇涓�
finishNumber: 0,
+ formatTime2:'',
+ formatTime3:'',
// 鍙充晶瀹屾垚
finishShow: false,
- inputMaterials: [
- {
- amount: 1,
- materialId: 1,
- materialName: 1,
- },
- ],
+ inputMaterials: [],
outputMaterials: [],
- procedureList: [
- [
- {
- number:10,
- name:'宸ュ簭'
- },
- {
- number:10,
- },
-
- ]
- ],
+ procedureList: [],
taskData: {
Order: {
amount: "",
@@ -520,6 +524,10 @@
},
},
},
+ totalNumber:0,
+ showCountDown:false,
+ countDownHour:0,
+ countDownMinute:0,
};
},
mounted() {
@@ -528,36 +536,81 @@
// this.passrate = this.getRandomNumber(1, 100);
// this.production = this.getRandomNumber(1, 100);
// }, 3000);
+ this.getDate3()
+ this.getDate2()
+ setInterval(()=>{
+ this.getDate3()
+ this.getDate2()
+ },5000)
this.getTaskInfo();
- setInterval(() => {
- this.getProgressInfo();
- }, 60000);
},
-
methods: {
- getProgressInfo() {
- getProgress().then((res) => {
+ reloadPage() {
+ // window.location.reload();
+ this.getTaskInfo();
+ },
+ getcountdown(){
+ countdown().then((res) => {
if (res.code == 200) {
+ this.showCountDown=res.data.ShowCountDown?res.data.ShowCountDown:false;
+ this.countDownHour=res.data.CountDownHour?res.data.CountDownHour:0
+ this.countDownMinute=res.data.CountDownMinute?res.data.CountDownMinute:0
}
});
},
- getDateObj(ms) {
- const now = ms ? new Date(ms) : new Date();
- const y = now.getFullYear();
- let m = now.getMonth() + 1;
- m = m > 9 ? m : "0" + m;
- let d = now.getDate();
- d = d > 9 ? d : "0" + d;
- return { y, m, d };
+ getProgressInfo() {
+ getProgress().then((res) => {
+ if (res.code == 200) {
+ this.finishNumber = res.data.finishNumber ? res.data.finishNumber : 0;
+
+ }
+ });
+ },
+ getDateObj(date, fmt) {
+ if (/(y+)/.test(fmt)) {
+ fmt = fmt.replace(
+ RegExp.$1,
+ (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+ );
+ }
+ let o = {
+ "M+": date.getMonth() + 1,
+ "d+": date.getDate(),
+ "h+": date.getHours(),
+ "m+": date.getMinutes(),
+ "s+": date.getSeconds(),
+ };
+ for (let k in o) {
+ if (new RegExp(`(${k})`).test(fmt)) {
+ let str = o[k] + "";
+ fmt = fmt.replace(
+ RegExp.$1,
+ RegExp.$1.length === 1 ? str : this.padLeftZero(str)
+ );
+ }
+ }
+ return fmt;
+ },
+ padLeftZero(str) {
+ return ("00" + str).substr(str.length);
},
// 鏍煎紡鍖栨椂闂� ==> yyyy-mm-dd
- formatDate(value, str) {
+ formatDate(value) {
if (value) {
- const dateObj = this.getDateObj(value);
- return "" + dateObj.y + "-" + dateObj.m + "-" + dateObj.d;
+ const now = value ? new Date(value * 1000) : new Date();
+ let time = this.getDateObj(now, "yyyy-MM-dd hh:mm:ss");
+ return time;
} else {
return "";
}
+ },
+ getDate3(){
+ let now= new Date();
+ this.formatTime3 = this.getDateObj(now, "hh:mm");
+ },
+ getDate2(){
+ let now = new Date();
+ this.formatTime2 = this.getDateObj(now, "yyyy骞碝M鏈坉d鏃�");
},
setInterCard(value, name) {
let height = 200;
@@ -593,25 +646,52 @@
},
getTaskInfo() {
+ this.taskData = {
+ Order: {},
+ Procedure: {
+ procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
+ },
+ };
getTaskInfo().then((res) => {
if (res.code == 200) {
- this.taskData = res.data;
+ this.taskData = res.data
+ ? res.data
+ : {
+ Order: {},
+ Procedure: {
+ procedure: {
+ inputMaterials: [],
+ outputMaterials: [],
+ workers: [],
+ },
+ },
+ };
+ this.taskData.Procedure.procedure.workers = this.taskData.Procedure
+ .procedure.workers
+ ? this.taskData.Procedure.procedure.workers
+ : [];
this.procedureList.push([
{
name: "宸ュ簭",
...this.taskData.Procedure.procedure,
},
]);
+
+
if (this.taskData.Procedure.ID) {
startTask({ id: this.taskData.Procedure.ID }).then((res) => {
if (res.code == 200) {
// res.data.number
this.procedureList[0].push({
- number: res.data.number,
+ number: res.data.Number,
name: "宸ヨ壓",
});
}
});
+ this.getProgressInfo();
+ setInterval(() => {
+ this.getProgressInfo();
+ }, 6000);
}
console.log(this.procedureList, "===1111procedureList");
// setTimeout(() => {
@@ -620,28 +700,45 @@
this.setInterCard("outputMaterials", "cardBox3");
// }, 5000);
}
+ if(res.code!=200||!this.taskData.Procedure.ID){
+ this.getcountdown();
+ setInterval(() => {
+ this.getcountdown();
+ }, 60000);
+ }
});
},
// 璁剧疆
setUrl() {
- const { href } = this.$router.resolve({
+ // const { href } = this.$router.resolve({
+ // path: "/set",
+ // });
+ // window.open(href, "_blank");
+ this.$router.push({
path: "/set",
});
- window.open(href, "_blank");
},
// 鍙充晶鎺у埗
controlClick() {
- this.$refs.control.islook = true;
+ if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
+ this.$refs.control.islook = true;
+ } else {
+ this.$message.error("褰撳墠璁惧娌℃湁宸ュ簭锛�");
+ }
},
// 鍙充晶瀹屾垚
finishClick() {
- finishTask({ id: this.taskData.Procedure.ID }).then((res) => {
- if (res.code == 200) {
- this.finishShow = false;
- this.getTaskInfo();
- this.$message.success("鎿嶄綔鎴愬姛锛�");
- }
- });
+ if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
+ finishTask({ id: this.taskData.Procedure.ID }).then((res) => {
+ if (res.code == 200) {
+ this.finishShow = false;
+ this.getTaskInfo();
+ this.$message.success("鎿嶄綔鎴愬姛锛�");
+ }
+ });
+ } else {
+ this.$message.error("褰撳墠璁惧娌℃湁宸ュ簭锛�");
+ }
},
getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
@@ -654,6 +751,77 @@
</script>
<style lang="scss">
+.set-title{
+ cursor:pointer;
+}
+.home-img-box {
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
+ margin: 0 auto;
+ overflow: hidden;
+ padding: 20px;
+ .bg-title {
+ width: 90%;
+ margin: 0 auto;
+ position: absolute;
+ img {
+ width: 100%;
+ }
+ .bg-title-span {
+ position: absolute;
+ width: 30%;
+ height: 4rem;
+ line-height:2.4;
+ font-size: 26px;
+ font-weight: 700;
+ text-align: center;
+ left: 36%;
+ top: 1.5rem;
+ display: inline-block;
+ }
+ .bg-set{
+ position:absolute;
+ right:10%;
+ height: 4rem;
+ line-height:2.4;
+ font-size: 40px;
+ font-weight: 700;
+ top: 1rem;
+ }
+ .bg-date{
+ position:absolute;
+ left:3%;
+ height: 100px;
+ line-height: 30px;
+ font-size: 16px;
+ top: 15%;
+ span{
+ font-size: 35px;
+ font-weight: 700;
+ line-height: 20px;
+ }
+ }
+
+ }
+ .yuan {
+ width: 40%;
+ height: 80%;
+ margin: 0 auto;
+ margin-top: 10%;
+ position: relative;
+ img {
+ width: 100%;
+ }
+ .btn-img {
+ width: 100%;
+ height: 50%;
+ margin: 0 auto;
+ text-align: center;
+ position: absolute;
+ top: 9rem;
+ }
+ }
+}
.font-arrow-20 {
font-size: 30px;
font-weight: 700;
@@ -744,13 +912,12 @@
.small_title {
font-size: 24px;
- font-weight: 600;
margin-bottom: 10px;
}
.right-small-btn {
margin-top: 10px;
width: calc(100% - 20px);
- margin:0 auto;
+ margin: 0 auto;
position: absolute;
bottom: 10px;
left: 10px;
@@ -779,13 +946,13 @@
width: 100%;
height: 100%;
color: #fff;
- background: rgb(19 35 90);
+ background: #12234a;
overflow: hidden;
.left {
width: calc(78% - 60px);
height: 100%;
min-height: 100%;
- background: rgb(19 35 90);
+ background: #12234a;
float: left;
padding: 30px;
padding-top: 20px;
@@ -977,7 +1144,7 @@
line-height: 40px;
color: #fff;
background: rgb(19, 35, 90);
- font-size:20px;
+ font-size: 20px;
}
.card-info-box {
position: absolute;
--
Gitblit v1.8.0