From 9da73a221e3bc79c1f972a1f99d52915e42134dd Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期日, 08 十月 2023 20:59:01 +0800
Subject: [PATCH] feat: 任务弹窗生产准备倒计时和下发失败提示时不允许翻页
---
src/views/visualization.vue | 225 +++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 172 insertions(+), 53 deletions(-)
diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 9599ef7..c0e7cc3 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -124,6 +124,10 @@
</div>
</div>
<div class="content_right">
+ <div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData)">
+ <img v-if="isUpdateIcon" src="../../public/shan.gif" />
+ <span v-else class="yuandian"></span>
+ </div>
<el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
<el-descriptions-item label="浜у搧鍚嶇О">{{
taskData.Order.productName || "--"
@@ -146,7 +150,7 @@
<el-descriptions-item label="璐х墿鎻忚堪">{{
taskData.Order.orderAttr || "--"
}}</el-descriptions-item>
- <el-descriptions-item label="瀹㈡埛鍚嶇О">{{
+ <el-descriptions-item label="瀹㈡埛缂栫爜">{{
taskData.Order.customer || "--"
}}</el-descriptions-item>
<el-descriptions-item label="鍙傛暟瑕佹眰">{{
@@ -271,11 +275,12 @@
v-for="(item, index) in taskData.procedureList"
>
<div
- class="card"
:key="index2"
v-for="(list, index2) in item"
>
- <template v-if="list.name == '宸ュ簭'">
+ <div
+ class="card"
+ v-if="list.name == '宸ュ簭'">
<div class="card_content">
<div class="card_contentLeft color_blue font_dian">
<!-- {{ list.deviceName }} -->
@@ -333,24 +338,34 @@
<!-- <span class="card-top-r-t">瀹屾垚杩涘害锛�50%</span>
<span class="card-top-r-b">12鏈�28鏃� 08:24</span> -->
</div>
- </template>
- <template v-else>
- <!-- <div class="card_content">
-
- </div> -->
- <div :class="(activeName==1||activeName == 3)?'card_top-4 font_size_20px':'card_top-4'">
- <div>宸ヨ壓缂栧彿锛�<div >{{ list.number }}</div></div>
- <!-- <div
- style="
- font-size: 14px;
- color: #cfcfcf;
- line-height: 20px;
- "
+ </div>
+ <div v-else class="process-params">
+ <div class="process-params-title">
+ <el-popover
+ width="200"
+ :content="list.number"
+ placement="top-start"
+ trigger="click"
>
- 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
- </div> -->
+ <span slot="reference">宸ヨ壓缂栧彿锛歿{ list.number }}</span>
+ </el-popover>
+
</div>
- </template>
+ <div class="process-params-value">
+ <!-- 宸ヨ壓鍙傛暟-->
+ {{mergeProcessParams(taskData.Arr)}}
+ </div>
+
+ <!-- <div
+ style="
+ font-size: 14px;
+ color: #cfcfcf;
+ line-height: 20px;
+ "
+ >
+ 宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
+ </div> -->
+ </div>
</div>
</el-carousel-item>
</el-carousel>
@@ -496,7 +511,6 @@
<span v-else>
<img v-if="plcStatus == 1&&!plcNotConnected" src="../../public/duan.png" />
<img v-else src="../../public/lian.png" />
- <!-- <span class="yuandian"></span> -->
{{ plcStatus==1?'鏂紑':(plcStatus==2?'鐢熶骇涓�':'寰呮満') }}
</span>
</span>
@@ -602,7 +616,7 @@
<!-- 宸ヨ壓妯″瀷 -->
<ProcessModel
ref="processModel"
- :processList="processList"
+ :listData="listData"
/>
</div>
</template>
@@ -617,6 +631,7 @@
getProgress,
countdown,
getTaskUnStarted,
+ processModelList,
} from "@/api/home/index"; // 浜х嚎
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
@@ -735,6 +750,7 @@
// 璁板綍瀹氭椂鍣ㄧ姸鎬�
procInfoTimer: null,
cutdownTimer: null,
+ ProcessModelTimer: null,
TaskCount:0,
plcStatus:0,
isTipShow:false,
@@ -752,16 +768,11 @@
outputMaterials: [],
procedureList: [],
},
- processList:[
- {
- name:'浜у搧1+宸ヨ壓2',
- number:'v1.0'
- },
- {
- name:'浜у搧1+宸ヨ壓2',
- number:'v2.0'
- }
- ]
+ processList:[],
+ isUpdateIcon:false,
+ listData:[],
+ resResult:null,
+ resprocInfoTimer:null,
};
},
mounted() {
@@ -776,11 +787,17 @@
this.getDate3();
this.getDate2();
}, 5000);
- this.getTaskInfo();
+
+ let channelType = this.getChannelTypeFromUrl()
+ channelType = channelType ?? 1
+ this.activeName = channelType
+ this.getTaskInfo(channelType);
this.getTaskCountStatistics()
},
beforeDestroy() {
clearTimeout(this.pollingTaskCountTimer)
+ clearTimeout(this.procInfoTimer)
+ clearTimeout(this.ProcessModelTimer)
},
watch:{
// isFinsh(){
@@ -790,6 +807,57 @@
// }
},
methods: {
+ getModelList(){
+ this.resResult=null
+ for (let i in this.TasksCopy){
+ if(this.TasksCopy[i].Procedure.ID&&this.TasksCopy[i].number){
+ processModelList({
+ procedureId: this.TasksCopy[i].Procedure.ID,
+ page: 1,
+ pageSize:6,
+ number:this.TasksCopy[i].number
+ }).then(res=>{
+ if(res.code==200){
+ this.processList=res.data?res.data:[];
+ if(this.processList.length>0){
+ for(let i in this.processList){
+ if(this.processList[i].isUpdate){
+ this.isUpdateIcon=true;
+ break;
+ }
+ }
+ }
+ }
+ this.resResult=res;
+ })
+ }
+ }
+ },
+ processModelClick(list){
+ this.listData=list;
+ if( Object.keys(this.listData).length > 0){
+ if(this.listData.Procedure.ID&&this.listData.number){
+ this.$refs.processModel.islook=true
+ return true;
+ }
+ }
+ this.$message.error('褰撳墠宸ュ簭鏃犵紪鍙凤紝鏃犳硶鏌ョ湅宸ュ簭!')
+ },
+ getProcessModelList(){
+ this.getModelList()
+ if (!this.ProcessModelTimer&&!this.resResult) {
+ this.ProcessModelTimer = setInterval(() => {
+ this.getModelList();
+ }, 10000)
+ }
+ },
+ mergeProcessParams(params){
+ if (params?.length){
+ return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
+ }else{
+ return ''
+ }
+ },
taskClick(){
if(this.TaskCount>0){
// this.getStartArr()
@@ -807,6 +875,7 @@
},
cutClick(val) {
this.activeName = val;
+ this.updateChannelTypeToUrl(val)
if(this.activeName==2){
this.Tasks=this.TasksCopy.slice(0,2)
if(this.Tasks.length<2){
@@ -849,9 +918,6 @@
}
});
},
-
-
-
getDateObj(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(
@@ -1018,6 +1084,7 @@
this.TasksCopy[i].inputMaterials = [];
this.TasksCopy[i].outputMaterials = [];
this.TasksCopy[i].finishNumber = 0;
+ this.TasksCopy[i].number=0;
this.finishShow['finishShow&'+i]=false
this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
.procedure.workers
@@ -1034,11 +1101,12 @@
if (this.TasksCopy[i].Procedure.ID) {
startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => {
if (res.code == 200) {
+ this.TasksCopy[i].number=res.data.Number
// res.data.number
this.TasksCopy[i].procedureList[0].push({
number: res.data.Number,
});
- // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
+ this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
// this.isFinsh=Number(i)+1
}
});
@@ -1048,11 +1116,12 @@
}
this.getStartArr()
this.getProgressInfo();
- if (!this.procInfoTimer) {
+ if (!this.procInfoTimer&&!this.resprocInfoTimer) {
this.procInfoTimer = setInterval(() => {
this.getProgressInfo();
}, 3000);
- }
+ }
+ this.getProcessModelList();
}
// if (res.code != 200 || this.TasksCopy.length == 0) {
// this.getcountdown();
@@ -1092,7 +1161,29 @@
}
})
},
+ /**
+ * 鍚慤RL涓缃綋鍓嶉�氶亾灞曠ず绫诲瀷
+ * @param {number} type 閫氶亾灞曠ず绫诲瀷
+ */
+ updateChannelTypeToUrl(type){
+ const activeName = this.getChannelTypeFromUrl();
+ if (activeName === type){
+ return
+ }
+ let path = this.$router.history.current.path
+ this.$router.push({path, query: {activeName: `${type ?? 1}`}})
+ },
+ /**
+ * 浠嶶RL鑾峰彇褰撳墠閫氶亾灞曠ず绫诲瀷
+ * @return {number}
+ */
+ getChannelTypeFromUrl(){
+ let activeName = new URLSearchParams(location.search).get('activeName')
+ activeName = activeName ? +activeName : undefined
+ return activeName
+ },
getProgressInfo() {
+ this.resprocInfoTimer=null
for (let i in this.TasksCopy){
if(this.TasksCopy[i].Procedure.ID){
getProgress({
@@ -1105,10 +1196,10 @@
: 0;
this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
}
+ this.resprocInfoTimer=res;
});
}
}
-
},
// 璁剧疆
setUrl() {
@@ -1399,6 +1490,16 @@
background: #09e5ed !important;
color: #333 !important;
}
+.yuandian {
+ width: 35px;
+ height: 35px;
+ display:inline-block;
+ // background: #15d815;
+ background:red;
+ border-radius: 50%;
+ // margin-top:-5px;
+ vertical-align: middle;
+ }
.bottom_list {
position: relative;
padding: 10px;
@@ -1459,8 +1560,7 @@
overflow-y:auto;
}
.el-carousel__item{
- // height:auto;
- min-height:160px;
+ height:auto;
}
}
.bottom-box-btn{
@@ -1606,6 +1706,18 @@
padding: 0 10px;
background: rgb(22 72 173);
border-radius: 6px;
+ position:relative;
+ .gif{
+ position:absolute;
+ right:15px;
+ top:10px;
+ width:35px;
+ vertical-align: middle;
+ cursor:pointer;
+ img{
+ width:100%;
+ }
+ }
// background: #233b9e;
.el-descriptions-row{
height:45px;
@@ -1847,18 +1959,6 @@
display:inline-block;
}
}
-
- .yuandian {
- width: 25px;
- height: 25px;
- line-height: 40px;
- margin-top: 12.5px;
- display: inline-block;
- background: #15d815;
- display: block;
- border-radius: 50%;
- float: right;
- }
}
.right-top-m-btn {
margin-top: 10px;
@@ -1969,4 +2069,23 @@
font-weight: 700 !important;
font-size: 16px;
}
+.process-params{
+ margin-top: 10px;
+ border-radius: 5px;
+ overflow: hidden;
+ color: #fff;
+ font-size: 12px;
+ &-title{
+ height: 25px;
+ padding: 0 5px;
+ background-color: #13235a;
+ line-height: 25px;
+ }
+ &-value{
+ background-color: #6b83ff;
+ min-height: 45px;
+ box-sizing: border-box;
+ padding: 12px;
+ }
+}
</style>
--
Gitblit v1.8.0