From a1a6630f2eabfc78a379b5808b1bf7231a084d0b Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期三, 11 十月 2023 18:02:44 +0800
Subject: [PATCH] 工序弹框的 列表和详情的更新同步

---
 src/views/visualization.vue |  432 +++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 346 insertions(+), 86 deletions(-)

diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 9f3acd5..de42bc4 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -90,7 +90,7 @@
             </span> -->
           </div>
           <div class="gongx">
-          <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0"  finish-status="success" class="steps">
+          <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex ?? 0"  finish-status="success" class="steps">
             <el-step icon="" :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step>
           </el-steps>
         </div>
@@ -124,6 +124,10 @@
               </div>
             </div>
             <div class="content_right">
+              <div class="gif" v-if="taskData.Procedure.ID" @click="processModelClick(taskData,index)">
+                    <img v-if="taskData.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 || "--"
@@ -143,10 +147,10 @@
                   -
                   {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
                 >
-                <el-descriptions-item label="璐х墿鎻忚堪">{{
-                  taskData.Order.orderAttr || "--"
-                }}</el-descriptions-item>
-                <el-descriptions-item label="瀹㈡埛鍚嶇О">{{
+                <el-descriptions-item label="閫氶亾">
+                  {{ channelNameConfig[taskData.Channel] || "--" }}
+                </el-descriptions-item>
+                <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>
@@ -360,9 +375,9 @@
               ></p>
               <div class="right-small-btn bottom-box-btn">
                 <el-button type="primary"> 鎵撳嵃</el-button>
-                <el-button v-if="taskData.Procedure.Status==3" type="primary" class="huise"> 瀹屾垚</el-button>
+
                 <el-popover
-                 v-else
+                v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3"
                   placement="top-end"
                   width="160"
                   class="button-finish"
@@ -385,6 +400,7 @@
                   </div>
                   <el-button type="primary" slot="reference"> 瀹屾垚</el-button>
                 </el-popover>
+                <el-button  v-else type="primary" class="huise"> 瀹屾垚</el-button>
               </div>
             </div>
             <i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
@@ -456,7 +472,7 @@
           <template
               v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)"
             >
-            
+
             <el-empty description="鏆傛棤浠诲姟..."></el-empty>
           </template>
         </div>
@@ -495,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>
@@ -509,7 +524,7 @@
           <div class="right-person-box" v-if="workers && workers.length > 0">
             <dl
               class="right-small-person"
-              v-for="(item, index) in workers"
+              v-for="(item, index) in deduplicateWorkers(displayWorkers())"
               :key="index"
             >
               <dt>
@@ -529,9 +544,9 @@
               <!-- <span>{{ item.phoneNum || "" }}</span> -->
               <span class="color_yellow"><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /><i class="el-icon-star-on" /></span>
             </dl>
-           
+
           </div>
-         
+
           <!-- <div
             style="
               width: 100%;
@@ -587,21 +602,20 @@
           </div>
         </div>
       </div>
-      
+
     </template> -->
     <!-- 鎺у埗鐨勫脊妗� -->
-    <AddControl ref="control" :Arr="Arr" />
-    <!-- 鎺у埗鐨勫脊妗� -->
-    <AddIssue
+    <TaskControlModal
       ref="control"
-      :Arr="Arr"
       :activeName="activeName"
-      :ArrError="ArrError"
-      :safeProduce="safeProduce"
-      :taskData="taskData"
-      :Order="taskData.Order"
       @getSetProductNumber="reloadPage"
       @isTip="isTip"
+    />
+    <!-- 宸ヨ壓妯″瀷 -->
+    <ProcessModel
+      ref="processModel"
+      :listData="listData"
+      @updateGet="updateGet"
     />
   </div>
 </template>
@@ -616,20 +630,28 @@
   getProgress,
   countdown,
   getTaskUnStarted,
+  processModelList,
 } 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";
+import ProcessModel from  "../components/ProcessModel.vue";
+import TaskControlModal from "@/components/TaskControlModal.vue";
+import {channelNameConfig} from "@/common/constants";
+import _ from 'lodash'
 export default {
   components: {
+    TaskControlModal,
     Card,
     Knowledge,
     AddControl,
     AddIssue,
+    ProcessModel,
   },
   data() {
     return {
+      pollingTaskCountTimer: null,
       activeName: 1,
       progress: 70, //杩涘害
       passrate: 30, //鍚堟牸鐜�
@@ -639,6 +661,8 @@
       // 鍙充晶瀹屾垚
       finishShow:{},
       workers:[],
+      // 淇濆瓨褰撳墠涓嶅悓閫氶亾鐨勫�肩彮浜�
+      channelWorkersMap:{0:[],1:[]},
       TasksCopy:[],
       Tasks: [
         {
@@ -729,6 +753,7 @@
       // 璁板綍瀹氭椂鍣ㄧ姸鎬�
       procInfoTimer: null,
       cutdownTimer: null,
+      ProcessModelTimer: null,
       TaskCount:0,
       plcStatus:0,
       isTipShow:false,
@@ -746,6 +771,12 @@
         outputMaterials: [],
         procedureList: [],
       },
+      processList:[],
+      listData:[],
+      resResult:[],
+      resprocInfoTimer:null,
+      channelNameConfig: channelNameConfig,
+      index:null,
     };
   },
   mounted() {
@@ -760,7 +791,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(){
@@ -770,10 +811,86 @@
     // }
   },
   methods: {
+    deduplicateWorkers(workers){
+      return _.uniqBy(workers,ele=>ele.workerName)
+    },
+    updateGet(number,val){
+      if(val){
+        this.getTaskInfo(this.activeName,'new')
+        return true;
+      }
+      this.listData.number=number
+      if(this.index){
+        this.TasksCopy[this.index].number=number
+      }
+    },
+    getModelList(){
+      for (let i in this.TasksCopy){
+        this.TasksCopy[i].isUpdateIcon=false;
+        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 j in this.processList){
+                  if(this.processList[j].isUpdate){
+                    this.TasksCopy[i].isUpdateIcon=true;
+                    this.$forceUpdate()
+                    break;
+                  }
+                }
+              }
+            }
+            this.resResult[i]=res;
+            console.log( this.resResult[i],'===res111')
+          })
+        }
+      }
+    },
+    processModelClick(list,index){
+      this.listData=list;
+      this.index=index
+      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()
+      let string=false;
+      if(this.resResult.length>0){
+        for(let i in this.resResult){
+          if(this.resResult[i]){
+            string=false;
+          }
+        }
+      }
+      if (!this.ProcessModelTimer&&!string) {
+          this.ProcessModelTimer = setInterval(() => {
+            this.resResult=[]
+          this.getModelList();
+        }, 5000)
+      }
+    },
+    mergeProcessParams(params){
+      if (params?.length){
+        return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
+      }else{
+        return ''
+      }
+    },
     taskClick(){
       if(this.TaskCount>0){
-        this.getStartArr()
-        this.$refs.control.islook=true
+        // this.getStartArr()
+        this.$refs.control.show=true
       }else{
         this.$message({
           message:'鐩墠娌℃湁浠诲姟锛�',
@@ -787,6 +904,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){
@@ -829,7 +947,6 @@
         }
       });
     },
-
     getDateObj(date, fmt) {
       if (/(y+)/.test(fmt)) {
         fmt = fmt.replace(
@@ -892,7 +1009,7 @@
         let String=now-date*1000;
         let seconds=Math.floor(String/1000)
         let minutes=Math.floor(seconds/60)
-        
+
         let days=Math.floor(String/1000/60/60/24)
         let hours=Math.floor(minutes/60)-days*24
         let m=minutes-days*24*60-hours*60
@@ -943,26 +1060,64 @@
       }
     },
 
-    getTaskInfo(val) {
+    /**
+     * 杞鑾峰彇浠诲姟鏁伴噺
+     */
+    getTaskCountStatistics(){
+      getTaskInfo({taskMode:1}).then((res) => {
+        if (res.code === 200&&res.data) {
+          this.TaskCount=res.data?.TaskCount ?? 0
+        }
+      },err=>{
+        this.TaskCount = 0
+        console.error(err)
+      }).finally(()=>{
+        this.pollingTaskCountTimer = setTimeout(()=>{
+          this.getTaskCountStatistics()
+        //   20绉掍竴娆¤疆璇�
+        },20000)
+      });
+    },
+
+    /**
+     * 鏍规嵁褰撳墠灞曠ず鐨勬槸0閫氶亾杩樻槸1閫氶亾杩樻槸涓や釜閫氶亾灞曠ず瀵瑰簲鐨勫�肩彮浜�
+     * @return {*[]}
+     */
+    displayWorkers(){
+      let showWorkers = []
+      if (this.activeName===1){
+        showWorkers =[...this.channelWorkersMap[0]]
+      }else if (this.activeName===2){
+        showWorkers =[...this.channelWorkersMap[0],...this.channelWorkersMap[1]]
+      }else if (this.activeName===3){
+        showWorkers =[...this.channelWorkersMap[1]]
+      }else {
+        return []
+      }
+
+      return showWorkers
+    },
+
+    getTaskInfo(val,info) {
       this.Tasks = [];
       this.TasksCopy=[]
       getTaskInfo({taskMode:2}).then((res) => {
         if (res.code == 200&&res.data) {
-          let arr=[]
+          // let arr=[]
           if(res.data.Tasks){
-           arr.sort(function(a,b){
+            res.data.Tasks.sort(function(a,b){
             return (a.Channel - b.Channel)
            })
           }
           this.TasksCopy = res.data.Tasks ? res.data.Tasks : [];
-          this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:''
+          // this.safeProduce=res.data.Prompt.safeProduce?res.data.Prompt.safeProduce:''
           this.plcNotConnected=res.data.Prompt.plcNotConnected?res.data.Prompt.plcNotConnected:''
           this.ChannelAmount=res.data.ChannelAmount?res.data.ChannelAmount:1
           // if(this.ChannelAmount>1 &&this.TasksCopy.length<2){
           //   this.TasksCopy.push(this.object)
           // }
           this.TaskCount=res.data.TaskCount?res.data.TaskCount:0
-          
+
           if ((this.TasksCopy.length ==0 )||!this.TasksCopy) {
             if (this.activeName == 1||this.activeName == 3) {
               this.TasksCopy.push(this.object);
@@ -972,11 +1127,23 @@
             }
           }
           this.workers=res.data.workers?res.data.workers:[]
+
+          // 灏嗗�肩彮浜烘牴鎹�氶亾鍙峰垎缁�
+          const groupByChannel= _.groupBy(res.data.Tasks,ele=>ele.Channel)
+          const taskList0= _.first(groupByChannel[0])
+          const taskList1= _.first(groupByChannel[1])
+          const worker0List = taskList0?.Procedure?.procedure?.workers ?? []
+          const worker1List = taskList1?.Procedure?.procedure?.workers ?? []
+          this.channelWorkersMap['0'] =worker0List
+          this.channelWorkersMap['1'] =worker1List
+
           for (let i in this.TasksCopy) {
             this.TasksCopy[i].procedureList = [];
             this.TasksCopy[i].inputMaterials = [];
             this.TasksCopy[i].outputMaterials = [];
             this.TasksCopy[i].finishNumber = 0;
+            this.TasksCopy[i].number=0;
+            this.TasksCopy[i].isUpdateIcon=false;
             this.finishShow['finishShow&'+i]=false
             this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
               .procedure.workers
@@ -989,29 +1156,37 @@
                 ...this.TasksCopy[i].Procedure.procedure,
               },
             ]);
-           
+
             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
+                  this.$forceUpdate()
                 }
               });
             }
             this.setInterCard("inputMaterials", "cardBox1&" + i, i);
             this.setInterCard("outputMaterials", "cardBox3&" + i, i);
           }
+          this.getProcessModelList();
           this.getStartArr()
+          this.cutClick(val?val:1)
+          if(info=='new'){
+            return true;
+          }
+
           this.getProgressInfo();
-              if (!this.procInfoTimer) {
+              if (!this.procInfoTimer&&!this.resprocInfoTimer) {
                 this.procInfoTimer = setInterval(() => {
                   this.getProgressInfo();
                 }, 3000);
-          }
+              }
         }
         // if (res.code != 200 || this.TasksCopy.length == 0) {
         //   this.getcountdown();
@@ -1022,7 +1197,7 @@
         //     }, 60000);
         //   }
         // }
-        this.cutClick(val?val:1)
+
       });
       // this.TasksCopy.push(this.object)
       // this.TasksCopy.push(this.object)
@@ -1051,7 +1226,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({
@@ -1064,10 +1261,10 @@
                 : 0;
                 this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
             }
+            this.resprocInfoTimer=res;
           });
         }
       }
-      
     },
     // 璁剧疆
     setUrl() {
@@ -1098,7 +1295,7 @@
         finishTask({ id: taskData.Procedure.ID }).then((res) => {
           if (res.code == 200) {
             this.finishShow['finishShow&'+i] = false;
-            this.getTaskInfo();
+            this.reloadPage(this.activeName?this.activeName:1);
             this.$message.success("鎿嶄綔鎴愬姛锛�");
           }
         });
@@ -1125,7 +1322,7 @@
  background:#12234a!important;
  color:#fff!important;
  border-color: #09e5ed !important;
- 
+
  .popper__arrow::after{
   border-top-color:#09e5ed !important;
  }
@@ -1174,7 +1371,7 @@
     box-sizing: border-box;
     border-right: 1px solid #eee;
   }
-  
+
   .small_title {
     margin-bottom: 30px;
   }
@@ -1230,7 +1427,7 @@
       font-size:14px;
     }
   }
-  
+
   .el-step{
     .el-step__icon{
      background:#00cc66;
@@ -1241,19 +1438,47 @@
       }
     }
   }
-  .el-step__head.is-process{
-    color: #00cc66 !important;
-    border-color:#00cc66;
-  }
-  .el-step__title.is-process{
-    color: #00cc66 !important;
-  }
   .el-step__head.is-wait{
     color:#fff;
     border-color:#fff;
   }
   .el-step__title.is-wait{
     color:#fff;
+  }
+
+  // 浣挎楠ゆ潯鑺傜偣鐘舵�佹垚鍔熸椂,鍓嶉潰鐨勭嚎鍚屾鏇存敼棰滆壊
+  .steps{
+    /* 杩涜涓姸鎬侊細鍦堢嚎 */
+    &  .el-step__head.is-process {
+      color: #00cc66;
+      border-color: #00cc66;
+    }
+    /* 杩涜涓姸鎬侊細鍦堝唴 */
+    &  .el-step__head.is-process > .el-step__icon {
+      background: #00cc66;
+      color: #00cc66;
+    }
+    /* 杩涜涓姸鎬侊細title锛堟枃瀛楋級 */
+    &  .el-step__title.is-process {
+      color: #00cc66;
+    }
+
+    /* 瀹屾垚鐘舵�侊細鍦堢嚎 */
+    &  .el-step__head.is-success {
+      color: #00cc66;
+      border-color: #00cc66;
+    }
+    /* 瀹屾垚鐘舵�侊細title锛堟枃瀛楋級 */
+    &  .el-step__title.is-success {
+      color: #00cc66;
+    }
+    /* 瀹屾垚鐘舵�侊細line
+     * 鎻忚堪锛氱涓�姝ュ畬鎴愶紝绗簩姝ヨ繘琛屾椂锛屼箣闂寸殑杩涘害鏉℃湁棰滆壊
+     */
+    &  .el-step__head.is-success > .el-step__line > .el-step__line-inner {
+      width: 100% !important;
+      border-width: 1px !important;
+    }
   }
 }
 .set-title {
@@ -1358,6 +1583,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;
@@ -1418,8 +1653,7 @@
       overflow-y:auto;
     }
     .el-carousel__item{
-    //  height:auto;
-     min-height:160px;
+      height:auto;
     }
   }
   .bottom-box-btn{
@@ -1427,6 +1661,10 @@
     position:absolute;
     bottom:10px;
     left:10px;
+    .el-button{
+      height: 40px;
+
+    }
   }
 }
 
@@ -1434,7 +1672,6 @@
   font-size: 20px;
 }
 .right-small-btn {
-  margin-top: 10px;
   width: calc(100% - 20px);
   margin: 0 auto;
   position: absolute;
@@ -1549,7 +1786,7 @@
           width: 100%;
           height: 30px;
           // text-align: left;
-          font-size: 24px;
+          font-size: 28px!important;
           margin: 0;
           text-align: center;
           line-height: 36px;
@@ -1562,6 +1799,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;
@@ -1612,11 +1861,11 @@
             white-space:nowrap;
           }
         .card_top-2{
-          width:35%;
+          width:38%;
         }
         .card-top-input-out-r,
         .card_top-3 {
-          width:65%;
+          width:62%;
         }
         .card_top-2,.card-top-input-out-r,
         .card_top-3 {
@@ -1732,7 +1981,7 @@
             border-radius: 5px 5px 0 0;
             background: rgb(19, 35, 90);
           }
-          
+
 
           .card_contentRight {
             width: 100%;
@@ -1802,18 +2051,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 {
@@ -1886,7 +2123,7 @@
       .right-base-btn {
         width: 100%;
         position: absolute;
-        bottom: 0;
+        bottom: 24px;
         left: 0;
         .el-button--primary {
           width: 100%;
@@ -1896,6 +2133,10 @@
           color: #fff;
           font-weight: 700;
           font-size: 18px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }
       // .call {
@@ -1921,4 +2162,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