From 880d8b2a6440405b022e4eb2111ba4d7cfdc0400 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期日, 08 十月 2023 16:29:22 +0800
Subject: [PATCH] 工序列表+工序详情的 前端开发+联调
---
src/components/ProcessModelDetails.vue | 529 ++++++++++++++++++++++---------------
src/components/ProcessModel.vue | 167 ++++++++---
src/views/visualization.vue | 114 ++++++--
src/api/home/index.js | 17 +
4 files changed, 535 insertions(+), 292 deletions(-)
diff --git a/src/api/home/index.js b/src/api/home/index.js
index 5b2d0b9..f548303 100644
--- a/src/api/home/index.js
+++ b/src/api/home/index.js
@@ -124,4 +124,19 @@
});
};
-
+// 鑾峰彇宸ヨ壓妯″瀷鍒楄〃
+export const processModelList = (data) => {
+ return request({
+ url: "/v1/processModel/list?number="+data.number+"&page="+data.page+'&pageSize='+data.pageSize+'&procedureId='+data.procedureId,
+ method: "get",
+ data,
+ });
+};
+// 鏇存柊宸ヨ壓妯″瀷
+export const updateProcessParams = (data) => {
+ return request({
+ url: "/v1/task/updateProcessParams",
+ method: "post",
+ data,
+ });
+};
diff --git a/src/components/ProcessModel.vue b/src/components/ProcessModel.vue
index e90339e..8a0f93a 100644
--- a/src/components/ProcessModel.vue
+++ b/src/components/ProcessModel.vue
@@ -32,22 +32,24 @@
<img src="../../public/process-model.png" />
</div>
<div class="item-r" @click="processDetailsClick(item)">
- <div class="item-r-t font_weight">{{ item.name }}</div>
+ <div class="item-r-t font_weight">{{ item.procedure }}</div>
<div class="item-r-b">褰撳墠宸ヨ壓缂栧彿锛歿{ item.number }}</div>
</div>
- <div class="tip-r">
+ <div class="tip-r" v-if="item.isUpdate">
<img src="../../public/process-tip.png" />
</div>
- <div class="tip-current">褰撳墠浣跨敤</div>
+ <div class="tip-current" v-if="item.number==listData.number">褰撳墠浣跨敤</div>
<div class="btn">
<el-button
type="primary"
size="mini"
class="color_organge"
- @click="finishClick(index, taskData)"
+ :disabled="item.isUpdate?false:true"
+ @click="updateProcess(item,index)"
>
- 鏇存柊宸ヨ壓</el-button
- >
+ <i class="el-icon-loading icon-loading" v-if="isLoading[index]"></i>
+ <span v-else>鏇存柊宸ヨ壓 </span>
+ </el-button>
</div>
</div>
</div>
@@ -60,8 +62,10 @@
<el-button
type="primary"
size="mini"
+ :disabled="top"
class="color_blue margin_right_20px"
- @click="onSubmit()"
+ v-prevent-re-click="3000"
+ @click="onSubmitTop()"
>
涓婁竴椤�</el-button
>
@@ -69,10 +73,10 @@
<el-button
type="primary"
size="mini"
- disabled
+ :disabled="bottom"
class="color_blue"
v-prevent-re-click="3000"
- @click="onSubmit()"
+ @click="onSubmitBottom()"
>
涓嬩竴椤�</el-button
>
@@ -81,6 +85,8 @@
<ProcessModelDetails
ref="processDetails"
:processObj="processObj"
+ :listData="listData"
+ @renew="getProcessModelList"
/>
</div>
@@ -89,25 +95,33 @@
<script>
import {
- startTask,
- sendProcessParams,
+ processModelList,
+ updateProcessParams,
} from "@/api/home/index"; // 浜х嚎
import ProcessModelDetails from "@/components/ProcessModelDetails";
export default {
components: {ProcessModelDetails},
props: {
- processList: {
- type: [Array],
+ listData: {
+ type: [Array,Object],
default: () => {
- return [];
+ return {};
},
},
},
data() {
return {
islook: false,
- isLoading:false,
- processObj:{}
+ isLoading:{},
+ processObj:{},
+ processList:[],
+ pageObj:{
+ page:1,
+ pageSize:6,
+ },
+ total:0,
+ top:false,
+ bottom:false,
};
},
mounted() {
@@ -115,6 +129,7 @@
},
watch: {
islook(){
+ this.getProcessModelList()
},
},
methods: {
@@ -127,31 +142,76 @@
},
getInfo() {
// 1 鏈敓浜� 2鐢熶骇涓� 3鐢熶骇瀹屾垚
- // if (
- // Object.keys(this.processList).length > 0
- // ) {
- // this.islook = true;
- // } else {
- // this.islook = false;
- // }
+ if (
+ Object.keys(this.listData).length > 0
+ ) {
+ this.islook = true;
+ this.getProcessModelList()
+ } else {
+ this.islook = false;
+ }
},
- onSubmit() {
- if(this.isLoading){
- return true;
+ getProcessModelList(){
+ if( Object.keys(this.listData).length > 0){
+ if(this.listData.Procedure.ID&&this.listData.number){
+ processModelList({
+ procedureId: this.listData.Procedure.ID,
+ page: this.pageObj.page,
+ pageSize:this.pageObj.pageSize,
+ number:this.listData.number
+ }).then(res=>{
+ if(res.data){
+ this.processList=res.data?res.data:[];
+ for(let i in this.processList){
+ this.isLoading[i]=false;
+ }
+ this.$forceUpdate()
+ }
+ this.total=res.total?res.total:0;
+ if(this.total<=6){
+ this.top=true;
+ this.bottom=true;
+ }else{
+ let pageTotal=Math.ceil(Number(this.total)/6)
+ if(this.pageObj.page<pageTotal){
+
+ this.bottom=false;
+ }else if(this.pageObj.page==pageTotal){
+ this.bottom=true;
+ }
+ if(this.pageObj.page==1){
+ this.top=true;
+ }else{
+ this.top=false;
+ }
+ }
+
+ })
}
- this.isLoading=true;
- // sendProcessParams({ procedureId: this.processList.Procedure.ID,position: Number(this.taskData.Position), }).then((res) => {
- // if (res.code == 200) {
- // this.resParams = res;
- // this.isLoading=false;
- // } else {
- // this.isLoading=false;
- // this.resParams = res;
- // }
- // });
- setTimeout(()=>{
- this.isLoading=false;
- },30000)
+ }
+ },
+ updateProcess(item,index){
+ this.isLoading[index]=true;
+ updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
+ if(res.code==200){
+ this.isLoading[index]=false;
+ this.$message.success('鏇存柊鎴愬姛锛�')
+ this.getProcessModelList()
+ }else{
+ this.isLoading[index]=false;
+ }
+ })
+ setTimeout(()=>{
+ this.isLoading[index]=false;
+ },50000)
+ },
+ onSubmitTop() {
+ this.pageObj.page= this.pageObj.page-1;
+ this.getProcessModelList()
+ },
+ onSubmitBottom(){
+ this.pageObj.page= this.pageObj.page+1;
+ this.getProcessModelList()
},
shutdown() {
this.islook = false;
@@ -195,13 +255,17 @@
color:#fff;
border:0!important;
font-size:14px;
- padding:10px 15px!important;
+ padding:9px 15px!important;
}
.color_blue{
background:#4343f5!important;
border:0!important;
font-size:16px;
padding:10px 25px!important;
+}
+.el-button.is-disabled{
+ color: #fff!important;
+ background:#7b95d3 !important;
}
.color_4efefa {
color: #4efefa !important;
@@ -344,8 +408,8 @@
overflow:hidden;
width:calc(100% - 20px);
.title-item{
- width:calc(50% - 35px);
- height:70px;
+ width:calc(50% - 30px);
+ height:77px;
padding:23px 10px 10px;
background:#31478f;
border-radius: 8px;
@@ -353,9 +417,9 @@
overflow:hidden;
font-size:15px;
position:relative;
- margin-bottom:30px;
+ margin-bottom:20px;
&:nth-of-type(odd){
- margin-right:30px;
+ margin-right:20px;
}
.item-l-bng{
width:40px;
@@ -370,13 +434,13 @@
float:left;
line-height:25px;
color:#fff;
- font-size:16px;
+ font-size:15px;
cursor:pointer;
.item-r-t{
- font-size:16px;
+ font-size:15px;
}
.item-r-b{
- font-size:14px;
+ font-size:13px;
}
}
.tip-r{
@@ -403,7 +467,14 @@
width:100px;
position:absolute;
right:0px;
- bottom:10px;
+ bottom:5px;
+ .el-button{
+ width:calc(100% - 15px);
+ }
+ .icon-loading{
+ font-size:22px;
+ text-align:center;
+ }
}
}
}
diff --git a/src/components/ProcessModelDetails.vue b/src/components/ProcessModelDetails.vue
index e019e1e..6a0e4dc 100644
--- a/src/components/ProcessModelDetails.vue
+++ b/src/components/ProcessModelDetails.vue
@@ -5,6 +5,7 @@
:visible.sync="islook"
width="758px"
class="add-event-dialog"
+ top="21vh"
:show-close="false"
append-to-body
>
@@ -27,53 +28,73 @@
>
<template>
<div class="title-auto-box">
- <div class="title-box-t margin_bottom_20">
- <div class="item-l">
- <div class="item-l-t">{{ processObj.name }}</div>
- <div class="item-l-b">{{ processObj.name }}</div>
+ <div :class="processObj.isUpdate?'title-box-t margin_bottom_20':'title-box-t title-box-t-two'">
+ <div class="item-l">
+ <div class="item-l-t">{{ processObj.procedure }}</div>
+ <div class="item-l-b">
+ <span v-for="(item,index) in processObj.paramsMap" :key="index">
+ {{ index }} : {{ item }}锛�
+ </span>
</div>
- <div class="item-r">
- 宸ヨ壓缂栧彿锛歿{ processObj.number }}
- </div>
+ </div>
+ <div class="item-r">宸ヨ壓缂栧彿锛歿{ processObj.number }}</div>
</div>
- <div class="title-box-b">
+ <div class="title-box-b" v-if="processObj.isUpdate">
<div class="item-b-t">鏇存柊璁剧疆</div>
- <div class="item-b-m">
- <div class="item-b-b-l"><span class="el-icon-refresh"></span></div>
- <div class="item-b-b-r">
- <span>宸叉鏌ュ埌鏂扮増鏈細H2131221</span>
- <div class="item-b-btn">
- 鏇存柊宸ヨ壓
+ <template v-if="isUpdate == 1">
+ <div class="item-b-m">
+ <div class="item-b-b-l">
+ <span class="el-icon-refresh refresh-icon" style="float: right;"></span>
+ </div>
+ <div class="item-b-b-r">
+ <span>宸叉鏌ュ埌鏂扮増鏈細{{ processObj.newNumber }}</span>
+ <div class="item-b-btn" @click="updateProcess">
+ 鏇存柊宸ヨ壓
+ </div>
</div>
</div>
- </div>
- <div class="item-b-b">
- <div class="item-two-l">
- <div class="item-two-t">{{ processObj.name }}</div>
- <div class="item-two-b">{{ processObj.name }}</div>
+ <div class="item-b-b">
+ <div class="item-two-l">
+ <div class="item-two-t">{{ processObj.procedure }}</div>
+ <div class="item-two-b">
+ <span v-for="(item,index) in processObj.newParamsMap" :key="index">
+ {{ index }} : {{ item }}锛�
+ </span>
+ </div>
+ </div>
+ <div class="item-two-r">
+ 鏂扮増鏈細{{ processObj.newNumber }}
+ </div>
</div>
- <div class="item-two-r">
- 鏂扮増鏈細{{ processObj.number }}
+ </template>
+ <template v-if="isUpdate == 2">
+ <div class="refresh-box">
+ <template v-if="isLoading">
+ <span class="transform el-icon-refresh refresh-icon"></span>
+ <div class="refresh-line">鏇存柊涓紝璇风◢鍚�...</div>
+ </template>
+ <template v-else>
+ <span class="el-icon-top refresh-top-icon"></span>
+ <div class="refresh-line">宸叉槸鏈�鏂扮増鏈�</div>
+ </template>
</div>
- </div>
+ </template>
</div>
</div>
</template>
</div>
</div>
- <div slot="footer" class="dialog-footer tac" style="overflow: hidden">
- </div>
-
+ <div
+ slot="footer"
+ class="dialog-footer tac"
+ style="overflow: hidden"
+ ></div>
</div>
-
</el-dialog>
</template>
<script>
-import {
- startTask,
- sendProcessParams,
-} from "@/api/home/index"; // 浜х嚎
+import { updateProcessParams} from "@/api/home/index"; // 浜х嚎
export default {
components: {},
props: {
@@ -83,33 +104,53 @@
return {};
},
},
+ listData: {
+ type: [Array,Object],
+ default: () => {
+ return {};
+ },
+ },
},
data() {
return {
islook: false,
- isLoading:false,
+ isLoading: false,
+ isUpdate: 1,
};
},
mounted() {
this.getInfo();
},
- watch: {
- islook(){
- },
- },
methods: {
- processDetailsClick(item){
-
+ updateProcess() {
+ this.isUpdate = 2;
+ if (this.isLoading) {
+ return true;
+ }
+ this.isLoading=true;
+ updateProcessParams({procedureId:this.listData.Procedure.ID}).then(res=>{
+ if(res.code==200){
+ this.isLoading=false;
+ this.$message.success('鏇存柊鎴愬姛锛�')
+ this.$emit('renew')
+ }else{
+ this.isLoading=false;
+ this.isUpdate=1
+ }
+ })
+ setTimeout(()=>{
+ this.isLoading=false;
+ },50000)
},
closeClick() {
this.shutdown();
},
getInfo() {
// 1 鏈敓浜� 2鐢熶骇涓� 3鐢熶骇瀹屾垚
- if (
- Object.keys(this.processObj).length > 0
- ) {
- this.islook = true;
+ if (Object.keys(this.processObj).length > 0) {
+ this.isUpdate = 1;
+ this.isLoading = false;
+ this.islook = true;
} else {
this.islook = false;
}
@@ -122,47 +163,45 @@
</script>
<style lang="scss" scoped>
-.color_error{
- color:red;
+.color_error {
+ color: red;
}
-.color_success{
- color:green;
+.color_success {
+ color: green;
}
.tank-box {
- width:758px;
- height:593px;
+ width: 758px;
+ height: 593px;
background: url("../../public/tank-two.png") no-repeat center center / cover;
position: relative;
.dialog-footer {
position: absolute;
bottom: 45px;
- width:100%;
- text-align:center;
-
+ width: 100%;
+ text-align: center;
}
-
}
-.margin_right_20px{
- margin-right:20px;
+.margin_right_20px {
+ margin-right: 20px;
}
-.margin-top-10px{
- margin-top:10px;
+.margin-top-10px {
+ margin-top: 10px;
}
-.margin-top-40px{
- margin-top:40px;
+.margin-top-40px {
+ margin-top: 40px;
}
.color_organge {
background: #f76c0f;
- color:#fff;
- border:0!important;
- font-size:14px;
- padding:10px 15px!important;
+ color: #fff;
+ border: 0 !important;
+ font-size: 14px;
+ padding: 10px 15px !important;
}
-.color_blue{
- background:#4343f5!important;
- border:0!important;
- font-size:16px;
- padding:10px 25px!important;
+.color_blue {
+ background: #4343f5 !important;
+ border: 0 !important;
+ font-size: 16px;
+ padding: 10px 25px !important;
}
.color_4efefa {
color: #4efefa !important;
@@ -173,7 +212,7 @@
.font_size_20 {
font-size: 20px !important;
}
-.font_weight{
+.font_weight {
font-weight: 700;
}
.margin_bottom_13 {
@@ -183,12 +222,12 @@
width: calc(100% - 140px);
height: auto;
overflow: hidden;
- padding:0 70px;
+ padding: 0 70px;
}
.error-t {
width: 100px;
margin: 100px auto 40px;
- font-size:98px;
+ font-size: 98px;
span {
display: inline-block;
}
@@ -209,8 +248,8 @@
::v-deep .el-dialog__body {
padding: 0 !important;
}
-.btn-error{
- bottom:80px!important;
+.btn-error {
+ bottom: 80px !important;
}
::v-deep .el-tabs__content {
@@ -294,166 +333,226 @@
.el-form {
overflow: hidden;
}
+ .refresh-icon {
+ width: 50px;
+ height: 50px;
+ background: #fff;
+ border-radius: 50%;
+ color: blue;
+ font-size: 31px;
+ line-height: 50px;
+ text-align: center;
+ display: inline-block;
+ font-weight: 700;
+ margin-right: 20px;
+ }
+ .refresh-top-icon {
+ width: 50px;
+ height: 50px;
+ border:4px solid #b0b0b0;
+ border-radius: 50%;
+ color: #b0b0b0;
+ font-size: 31px;
+ line-height: 50px;
+ text-align: center;
+ display: inline-block;
+ font-weight: 700;
+ margin-right: 20px;
+ }
+ .transform{
+ -webkit-animation: spin 1s linear infinite;
+ -ms-amimation:spin 1s linear infinite;
+ -moz-amimation:spin 1s linear infinite;
+ -o-amimation:spin 1s linear infinite;
+ }
+ @keyframes spin {
+ 0%,15%{
+ transform:rotate(0);
+ }
+ 100%{
+ transform:rotate(360deg);
+ }
+ }
.title-auto-box {
- height: calc(100% - 0px);
+ height: calc(100% - 20px);
overflow: auto;
- width:calc(100% - 140px);
- margin: 0 auto;
- padding-top:20px;
- .title-box-t{
- overflow:hidden;
- width:calc(100% - 80px);
- background:#0E246A;
- min-height:100px;
- height:auto;
- color:#fff;
- padding:15px 30px;
+ width: calc(100% - 140px);
+ margin: 0 auto;
+ padding-top: 20px;
+ .title-box-t-two{
+ height:calc(100% - 55px)!important;
+ }
+ .title-box-t {
+ overflow: hidden;
+ width: calc(100% - 80px);
+ background: #0e246a;
+ min-height: 100px;
+ height: auto;
+ color: #fff;
+ padding: 15px 30px;
border-radius: 6px;
- margin-bottom:20px;
- .item-auto-box{
- overflow:auto;
+ margin-bottom: 20px;
+ position: relative;
+ .item-auto-box {
+ overflow: auto;
}
- .item-l{
- width:calc(100% - 140px);
- height:100%;
- float:left;
- font-size:17px;
- .item-l-t{
- color:#4efefa;
- margin-bottom:20px;
+ .item-l {
+ width: 100%;
+ height: 100%;
+ float: left;
+ font-size: 17px;
+ .item-l-t {
+ width: calc(100% - 180px);
+ color: #4efefa;
+ margin-bottom: 10px;
}
- .item-l-b{
- font-size:16px;
+ .item-l-b {
+ width: 100%;
+ height: calc(100% - 40px);
+ font-size: 16px;
}
}
- .item-r{
- width:120px;
- padding:10px 10px;
- border-radius:10px;
- background:#4343f5;
- float:left;
- text-align:center;
+ .item-r {
+ width: 180px;
+ padding: 8px 5px;
+ border-radius: 10px;
+ background: #06066a;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ text-align: center;
}
}
- .title-box-b{
- overflow:hidden;
- width:calc(100% - 80px);
- background:#0E246A;
- min-height:250px;
- height:auto;
- color:#fff;
- padding:15px 30px;
+ .title-box-b {
+ overflow: hidden;
+ width: calc(100% - 80px);
+ background: #0e246a;
+ min-height: 250px;
+ height: auto;
+ color: #fff;
+ padding: 15px 30px;
border-radius: 6px;
- .item-b-t{
- font-size:18px;
- margin-bottom:10px;
+ .item-b-t {
+ font-size: 18px;
+ margin-bottom: 10px;
+ color:#eee;
}
- .item-b-m{
- width:100%;
+ .refresh-box{
+ width:240px;
margin:0 auto;
- overflow:hidden;
- .item-b-b-l{
- float:left;
- width:calc(40% - 5px);
- border-right:3px solid #fff;
- span{
- width:50px;
- height:50px;
- background:#fff;
- border-radius: 50%;
- color:blue;
- font-size:30px;
- line-height:50px;
- text-align:center;
- display:inline-block;
- font-weight: 700;
- float:right;
- margin-right:20px;
- }
+ .refresh-icon,.refresh-top-icon{
+ margin: 0 auto;
+ margin-left:95px;
}
- .item-b-b-r{
- width:calc(60% - 20px);
- margin-left:20px;
- float:left;
- span{
- display:inline-block;
- width:100%;
-
+ .refresh-line{
+ width:100%;
+ height:40px;
+ border-top:5px solid #fff;
+ line-height:40px;
+ text-align:center;
+ font-size:18px;
+ color:#999;
+ margin-top:15px;
+ }
+ }
+ .item-b-m {
+ width: 100%;
+ margin: 0 auto;
+ overflow: hidden;
+ .item-b-b-l {
+ float: left;
+ width: calc(40% - 5px);
+ border-right: 3px solid #fff;
+ }
+ .item-b-b-r {
+ width: calc(60% - 20px);
+ margin-left: 20px;
+ float: left;
+ span {
+ display: inline-block;
+ width: 100%;
}
- .item-b-btn{
- width:90px;
- padding:8px 10px;
- border-radius:10px;
- background:#4343f5;
- float:left;
- text-align:center;
- margin-top:10px;
+ .item-b-btn {
+ width: 90px;
+ padding: 8px 10px;
+ border-radius: 10px;
+ background: #4343f5;
+ float: left;
+ cursor: pointer;
+ text-align: center;
+ margin-top: 10px;
}
}
}
- .item-b-b{
- width:calc(100% - 160px);
- margin:10px auto 0;
- border:1px dotted #fff;
- height:calc(100% - 40px);
- overflow:hidden;
- color:#fff;
- padding:10px 10px 10px 30px;
- .item-two-l{
- width:calc(100% - 140px);
- height:100%;
- float:left;
- font-size:14px;
- .item-two-t{
- margin-bottom:10px;
+ .item-b-b {
+ width: calc(100% - 160px);
+ margin: 10px auto 0;
+ border: 1px dotted #fff;
+ height: calc(100% - 40px);
+ min-height: 120px;
+ overflow: hidden;
+ color: #fff;
+ padding: 10px 10px 10px 30px;
+ position: relative;
+ .item-two-l {
+ width: 100%;
+ height: 100%;
+ font-size: 14px;
+ .item-two-t {
+ width: calc(100% - 180px);
+ margin-bottom: 10px;
}
- .item-two-b{
- font-size:14px;
+ .item-two-b {
+ width: 100%;
+ height: calc(100% - 40px);
+ font-size: 14px;
}
}
- .item-two-r{
- width:120px;
- padding:10px 10px;
- border-radius:10px;
- float:left;
- text-align:right;
+ .item-two-r {
+ width: 180px;
+ padding: 10px 10px;
+ border-radius: 10px;
+ position: absolute;
+ right: 5px;
+ top: 0px;
+ text-align: right;
}
}
}
}
- .gif-box{
- width:230px;
- margin:0 auto;
- margin-bottom:5px;
- .gif-right{
- width:210px;
- font-size:14px;
- color:#fff;
- line-height:28px;
- span{
+ .gif-box {
+ width: 230px;
+ margin: 0 auto;
+ margin-bottom: 5px;
+ .gif-right {
+ width: 210px;
+ font-size: 14px;
+ color: #fff;
+ line-height: 28px;
+ span {
font-weight: 700;
- font-size:18px;
+ font-size: 18px;
}
}
}
- .gif{
- width:55px;
+ .gif {
+ width: 55px;
vertical-align: middle;
- float:left;
- margin-right:20px;
- img{
- width:100%;
+ float: left;
+ margin-right: 20px;
+ img {
+ width: 100%;
}
.yuandian {
- width: 55px;
- height: 55px;
- float:left;
- // background: #15d815;
- background:red;
- border-radius: 50%;
- // margin-top:-5px;
- vertical-align: middle;
- }
+ width: 55px;
+ height: 55px;
+ float: left;
+ // background: #15d815;
+ background: red;
+ border-radius: 50%;
+ // margin-top:-5px;
+ vertical-align: middle;
+ }
}
.progress-item {
width: 55%;
@@ -481,27 +580,27 @@
font-weight: 600;
}
.drawerHeader {
- width:99%;
- margin:0 auto;
- overflow:hidden;
- .title-l{
- width:25%;
- float:left;
- margin-left:30px;
+ width: 99%;
+ margin: 0 auto;
+ overflow: hidden;
+ .title-l {
+ width: 25%;
+ float: left;
+ margin-left: 30px;
font-size: 22px;
color: #fff;
height: 3.2vw;
line-height: 4.5vw;
}
- .title-r{
- width:60px;
- float:right;
+ .title-r {
+ width: 60px;
+ float: right;
height: 50px;
- line-height: 5vw;
- cursor:pointer;
- img{
- display:inline-block;
- width:100%;
+ margin-top:-8px;
+ cursor: pointer;
+ img {
+ display: inline-block;
+ width: 100%;
}
}
.identify {
diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 2da3f20..2f1579e 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 || "--"
@@ -362,7 +366,7 @@
<el-button type="primary"> 鎵撳嵃</el-button>
<el-popover
- v-if="taskData.Procedure.Status!=3"
+ v-if="taskData.Procedure.Status!=3&&taskData.Procedure.ID"
placement="top-end"
width="160"
class="button-finish"
@@ -496,7 +500,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>
@@ -607,7 +610,7 @@
<!-- 宸ヨ壓妯″瀷 -->
<ProcessModel
ref="processModel"
- :processList="processList"
+ :listData="listData"
/>
</div>
</template>
@@ -622,6 +625,7 @@
getProgress,
countdown,
getTaskUnStarted,
+ processModelList,
} from "@/api/home/index"; // 浜х嚎
import Card from "@/components/Card.vue";
import Knowledge from "../components/Knowledge.vue";
@@ -737,6 +741,7 @@
// 璁板綍瀹氭椂鍣ㄧ姸鎬�
procInfoTimer: null,
cutdownTimer: null,
+ ProcessModelTimer: null,
TaskCount:0,
plcStatus:0,
isTipShow:false,
@@ -754,16 +759,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() {
@@ -788,6 +788,51 @@
// }
},
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)
+ }
+ },
taskClick(){
if(this.TaskCount>0){
this.getStartArr()
@@ -995,6 +1040,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
@@ -1011,6 +1057,7 @@
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,
@@ -1025,11 +1072,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();
@@ -1070,6 +1118,7 @@
})
},
getProgressInfo() {
+ this.resprocInfoTimer=null
for (let i in this.TasksCopy){
if(this.TasksCopy[i].Procedure.ID){
getProgress({
@@ -1082,10 +1131,10 @@
: 0;
this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
}
+ this.resprocInfoTimer=res;
});
}
}
-
},
// 璁剧疆
setUrl() {
@@ -1376,6 +1425,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;
@@ -1580,6 +1639,17 @@
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;
+ img{
+ width:100%;
+ }
+ }
// background: #233b9e;
.el-descriptions-row{
height:45px;
@@ -1820,18 +1890,6 @@
// float:left;
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 {
--
Gitblit v1.8.0