From e9c1bc5f107ebfdb58b6c85e01a719bbeb643d66 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期日, 08 十月 2023 11:39:59 +0800
Subject: [PATCH] feat: 任务弹窗添加翻页展示

---
 src/views/visualization.vue |  674 ++++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 463 insertions(+), 211 deletions(-)

diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 3745c30..bbf6439 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -1,22 +1,36 @@
 
 <template>
-  <div class="home">
-    <!-- v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID" -->
-    <template v-if="Tasks&&Tasks.length>0">
+  <div class="home" ref="homeRef">
+    <!-- v-if="Tasks&&Tasks.length>0" -->
+    <template >
       <div class="left">
         <p class="title">
-          <span
-            class="font set-title"
-            style="float: left; margin-right: 15px;"
-            @click="cutClick(1)"
-          >
-            <img style="width:32px;" v-if="activeName == 1" src="../../public/one-blue.png" />
-            <img style="width:32px;" v-else src="../../public/one.png" />
-          </span>
-          <span class="font set-title" style="float: left" @click="cutClick(2)">
-            <img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" />
-            <img style="width:32px;" v-else src="../../public/two.png" />
-          </span>
+          <template v-if="Number(ChannelAmount)>1">
+            <span
+              class="font set-title"
+              style="float: left; margin-right: 15px;"
+              @click="cutClick(1)"
+            >
+              <img style="width:32px;" v-if="activeName == 1" src="../../public/one-blue.png" />
+              <span  v-else>
+                <img style="width:32px;" src="../../public/one.png" />
+              </span>
+            </span>
+            <span class="font set-title" style="float: left;margin-right: 15px;" @click="cutClick(2)">
+              <img style="width:32px;" v-if="activeName == 2" src="../../public/two-blue.png" />
+              <img style="width:32px;" v-else src="../../public/two.png" />
+            </span>
+            <span
+              class="font set-title"
+              style="float: left;"
+              @click="cutClick(3)"
+            >
+              <img style="width:32px;" v-if="activeName == 3" src="../../public/right-blue.png" />
+              <span  v-else>
+                <img style="width:32px;" src="../../public/right.png" />
+              </span>
+            </span>
+         </template>
           鐢熶骇绠$悊鐪嬫澘
           <span
             class="font el-icon-setting set-title"
@@ -33,10 +47,11 @@
         </span>
         </p>
         <div
-          :class="activeName == 1 ? 'active-one' : 'active-two'"
+          :class="(activeName == 1||activeName == 3) ? 'active-one' : 'active-two'"
           v-for="(taskData, index) in Tasks"
           :key="index"
         >
+        <template v-if="taskData">
           <div class="gong-date">
             宸ュ簭杩愯鏃堕棿锛歿{ getFormatTime(taskData.Procedure.startTime) }}
           </div>
@@ -44,13 +59,13 @@
             <span class="title-item"
               >宸ュ崟缂栧彿:
               <span class="color_4efefa">{{
-                taskData.Order.workOrderId || ""
+                taskData.Order.workOrderId || "--"
               }}</span>
             </span>
             <span class="title-item"
               >褰撳墠宸ュ簭:
               <span class="color_4efefa">{{
-                taskData.Procedure.procedure.procedureName || ""
+                taskData.Procedure.procedure.procedureName || "--"
               }}</span>
             </span>
             <span class="title-item"
@@ -74,8 +89,8 @@
               </span>
             </span> -->
           </div>
-          <div class="gongx" v-if="taskData.AllProcedures">
-          <el-steps :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0"  finish-status="success" class="steps">
+          <div class="gongx">
+          <el-steps v-if="taskData.AllProcedures" :active="taskData.CurrentProcedureIndex?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>
@@ -89,7 +104,7 @@
                       style="font-size: 35px; font-weight: 600"
                       class="color_green"
                     >
-                      {{ taskData.finishNumber }}{{ taskData.Order.unit }}
+                      {{ taskData.finishNumber || 0 }}{{ taskData.Order.unit }}
                     </dd>
                   </dl>
                 </div>
@@ -109,46 +124,46 @@
               </div>
             </div>
             <div class="content_right">
-              <el-descriptions :column="activeName == 1 ? 2 : 1" :colon="true">
+              <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
                 <el-descriptions-item label="浜у搧鍚嶇О">{{
-                  taskData.Order.productName || ""
+                  taskData.Order.productName || "--"
                 }}</el-descriptions-item>
                 <el-descriptions-item label="鏁伴噺"
                   >{{ taskData.Order.amount || 0
                   }}{{ taskData.Order.unit }}</el-descriptions-item
                 >
                 <el-descriptions-item label="浜よ揣鏃ユ湡">{{
-                  taskData.Order.deliverDate || ""
+                  taskData.Order.deliverDate || "--"
                 }}</el-descriptions-item>
                 <el-descriptions-item label="宸ユ椂">
-                  {{ taskData.Procedure.procedure.workHours || "" }}
+                  {{ taskData.Procedure.procedure.workHours || "--" }}
                 </el-descriptions-item>
                 <el-descriptions-item label="璁″垝鏃堕棿"
-                  >{{ formatDate(taskData.Order.startTime) || "" }}
+                  >{{ formatDate(taskData.Order.startTime) || "--" }}
                   -
                   {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
                 >
                 <el-descriptions-item label="璐х墿鎻忚堪">{{
-                  taskData.Order.orderAttr || ""
+                  taskData.Order.orderAttr || "--"
                 }}</el-descriptions-item>
                 <el-descriptions-item label="瀹㈡埛鍚嶇О">{{
-                  taskData.Order.customer || ""
+                  taskData.Order.customer || "--"
                 }}</el-descriptions-item>
                 <el-descriptions-item label="鍙傛暟瑕佹眰">{{
-                  taskData.Order.parameter || ""
+                  taskData.Order.parameter || "--"
                 }}</el-descriptions-item>
               </el-descriptions>
               <el-descriptions :column="1" :colon="true">
                 <el-descriptions-item label="瀹屾垚搴�" style="width: 100%">
                   <!--:text-format="format"  -->
                   <el-progress
-                    define-back-color="#133EAF"
-                    color="#09E5ED"
+                    define-back-color="#132f6e"
+                    color="#00cc66"
                     text-color="#fff"
                     :text-inside="true"
                     :stroke-width="30"
                     :percentage="
-                      (taskData.Order && taskData.finishNumber != 0)
+                      (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount)
                         ? parseInt(
                             (taskData.finishNumber / taskData.Order.amount) *
                               100
@@ -196,19 +211,35 @@
                     v-for="(list, index2) in item"
                   >
                     <div class="card_content">
-                      <div class="card_contentLeft">{{ list.materialId }}</div>
+                      <div class="card_contentLeft font_dian">
+                        <el-popover
+                          width="200"
+                          :content="list.materialId"
+                          placement="top-start"
+                          trigger="click"
+                        >
+                          <span slot="reference">{{ list.materialId }}</span>
+                        </el-popover>
+                      </div>
                     </div>
-                    <div class="card_top">
-                      <div>
+                    <div class="card-top-input-out-l">
+                      <div class="font_dian">
                         <!-- 璁惧12<i
                             style="font-size: 14px"
                             class="el-icon-right font-arrow-20"
                           ></i>
                           璁惧13 -->
-                        {{ list.materialName }}
+                          <el-popover
+                          width="200"
+                          :content="list.materialName"
+                          placement="top-start"
+                          trigger="click"
+                        >
+                          <span slot="reference">{{ list.materialName }}</span>
+                        </el-popover>
                       </div>
                     </div>
-                    <div class="card_top2">
+                    <div class="card-top-input-out-r">
                       <div style="line-height: 45px; text-align: center">
                         {{ list.amount }} {{ list.unit }}
                       </div>
@@ -218,11 +249,11 @@
                   </div>
                 </el-carousel-item>
               </el-carousel>
-              <el-button type="primary" class="color_f70f83">
+              <el-button type="primary" class="color_f70f83 bottom-box-btn">
                 <i class="el-icon-phone-outline" />鐗╂枡鍛煎彨</el-button
               >
             </div>
-            <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
+            <i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
             <div class="bottom_list">
               <div class="bottom-title">
                 褰撳墠宸ュ簭:{{ taskData.Procedure.procedure.procedureName || "" }}
@@ -246,15 +277,23 @@
                   >
                     <template v-if="list.name == '宸ュ簭'">
                       <div class="card_content">
-                        <div class="card_contentLeft color_blue">
-                          {{ list.deviceName }}
+                        <div class="card_contentLeft color_blue font_dian">
+                          <!-- {{ list.deviceName }} -->
+                          <el-popover
+                          width="200"
+                          :content="list.deviceName"
+                          placement="top-start"
+                          trigger="click"
+                        >
+                          <span slot="reference">{{ list.deviceName }}</span>
+                        </el-popover>
                           <!-- <span style="float: right">6m/s</span> -->
                         </div>
                       </div>
                       <div class="card_top-3">
                         <span class="card-top-r-t"
                           >瀹屾垚杩涘害锛歿{
-                            taskData.Order && taskData.finishNumber != 0
+                            (taskData.Order && taskData.finishNumber != 0 && taskData.Order.amount)
                               ? parseInt(
                                   (taskData.finishNumber /
                                     taskData.Order.amount) *
@@ -265,8 +304,8 @@
                         >
                         <span class="card-top-r-b">
                           <el-progress
-                            define-back-color="#133EAF"
-                            color="#09E5ED"
+                            define-back-color="#132f6e"
+                            color="#00cc66"
                             text-color="#fff"
                             :text-inside="true"
                             :stroke-width="10"
@@ -289,7 +328,7 @@
                       </div>
                       <div class="card_top-2">
                         <div style="line-height: 45px; text-align: center">
-                          鐢熶骇涓�
+                          {{ taskData.Procedure.Status==3?'鐢熶骇瀹屾垚':'鐢熶骇涓�' }}
                         </div>
                         <!-- <span class="card-top-r-t">瀹屾垚杩涘害锛�50%</span>
                           <span class="card-top-r-b">12鏈�28鏃� 08:24</span> -->
@@ -297,10 +336,10 @@
                     </template>
                     <template v-else>
                       <!-- <div class="card_content">
-                        
+
                       </div> -->
-                      <div class="card_top-4">
-                        <div>宸ヨ壓缂栧彿锛歿{ list.number }}</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;
@@ -319,16 +358,18 @@
               <p
                 style="font-size: 22px; margin-left: 12px; margin-top: 50px"
               ></p>
-              <div class="right-small-btn">
+              <div class="right-small-btn bottom-box-btn">
                 <el-button type="primary"> 鎵撳嵃</el-button>
+
                 <el-popover
+                v-if="taskData.Procedure.Status && taskData.Procedure.Status!==3"
                   placement="top-end"
                   width="160"
                   class="button-finish"
                   v-model="finishShow['finishShow&'+index]"
                   trigger="click"
                 >
-                  <p>璇风‘璁ゆ槸鍚﹀凡瀹屾垚璇ョ敓浜т换鍔�?</p>
+                  <p><i class="el-icon-error" style="color:red;margin-right:5px;"/>璇风‘璁ゆ槸鍚﹀凡瀹屾垚璇ョ敓浜т换鍔�?</p>
                   <div style="text-align: right; margin: 0">
                     <el-button size="mini" @click="finishShow['finishShow&'+index] = false">
                       鍙栨秷</el-button
@@ -336,6 +377,7 @@
                     <el-button
                       type="primary"
                       size="mini"
+                      class="color_f70f83"
                       @click="finishClick(index, taskData)"
                     >
                       纭畾</el-button
@@ -343,9 +385,10 @@
                   </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_4efefa"></i>
+            <i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
             <div class="bottom_list">
               <div class="bottom-title">
                 <span>杈撳嚭璧勬簮</span>
@@ -372,57 +415,51 @@
                   >
                     <div class="card">
                       <div class="card_content">
-                        <div class="card_contentLeft">
-                          {{ list.materialId }}
+                        <div class="card_contentLeft font_dian">
+                          <el-popover
+                          width="200"
+                          :content="list.materialId"
+                          placement="top-start"
+                          trigger="click"
+                        >
+                          <span slot="reference">{{ list.materialId }}</span>
+                        </el-popover>
                         </div>
                       </div>
-                      <div class="card_top">
-                        <div>
-                          {{ list.materialName }}
-                          <!-- 璁惧12<i
-                            style="font-size: 14px"
-                            class="el-icon-right font-arrow-20"
-                          ></i>
-                          璁惧13 -->
+                      <div class="card-top-input-out-l">
+                        <div class="font_dian">
+                          <el-popover
+                            width="200"
+                            :content="list.materialName"
+                            placement="top-start"
+                            trigger="click"
+                          >
+                            <span slot="reference">{{ list.materialName }}</span>
+                          </el-popover>
                         </div>
                       </div>
-                      <div class="card_top2">
+                      <div class="card-top-input-out-r">
                         <div style="line-height: 45px; text-align: center">
                           {{ list.amount }} {{ list.unit }}
                         </div>
-                        <!-- <span class="card-top-r-t">鐢熶骇瀹屾垚</span>
-                        <span class="card-top-r-b">12鏈�28鏃� 08:24</span> -->
                       </div>
-                      <!-- <div class="card-info-box">棰勮10鍒嗛挓閫佽揪</div> -->
                     </div>
-                    <!-- <div class="card">
-                      <div class="card_content">
-                        <div class="card_contentLeft color_green">
-                          鍖呭彿:G22122304 100鍚�
-                        </div>
-                      </div>
-                      <div class="card_top">
-                        <div>
-                          璁惧12<i
-                            style="font-size: 14px"
-                            class="el-icon-right font-arrow-20"
-                          ></i>
-                          璁惧13
-                        </div>
-                      </div>
-                      <div class="card_top-2">
-                        <span class="card-top-r-t">鐢熶骇瀹屾垚</span>
-                        <span class="card-top-r-b">12鏈�28鏃� 08:24</span>
-                      </div>
-                    </div> -->
                   </div>
                 </el-carousel-item>
               </el-carousel>
-              <el-button type="primary" class="color_f70f83">
+              <el-button type="primary" class="color_f70f83 bottom-box-btn">
                 <i class="el-icon-phone-outline" />杩愯緭鍛煎彨</el-button
               >
             </div>
           </div>
+        </template>
+          <!-- 2涓换鍔$殑鏃跺�欙紝绗簩涓换鍔′负绌虹殑鏃跺�欐樉绀� -->
+          <template
+              v-if="activeName == 2 &&(!taskData||Object.keys(taskData).length==0)"
+            >
+
+            <el-empty description="鏆傛棤浠诲姟..."></el-empty>
+          </template>
         </div>
       </div>
       <div class="right">
@@ -443,12 +480,25 @@
         <div class="right-top-m">
           璁惧鐘舵��:
           <!-- 1鏂紑2鐢熶骇3寰呮満 -->
-          <span style="position: relative"
+          <span style="position: relative" v-if="plcStatus" >
+            <el-popover
+              v-if="plcStatus == 1&&plcNotConnected"
+              width="180"
+              :content="plcNotConnected"
+              placement="top-end"
+              trigger="click"
             >
-            <img v-if="plcStatus == 1" src="../../public/duan.png" />
-            <img v-else src="../../public/lian.png" />
-            <!-- <span class="yuandian"></span> -->
-            {{ plcStatus==1?'鏂紑':(plcStatus==2?'鐢熶骇涓�':'寰呮満') }}
+              <span slot="reference">
+                <img  src="../../public/duan.png" />
+                鏂紑
+              </span>
+            </el-popover>
+            <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>
         </div>
         <div class="right-top-m-btn">
@@ -477,9 +527,12 @@
                 style="font-size: 20px; font-weight: 600; margin-right: 10px"
                 >{{ item.workerName || "" }}</span
               >
-              <span>{{ item.phoneNum || "" }}</span>
+              <!-- <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%;
@@ -494,7 +547,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;margin-top:20px;">鐭ヨ瘑搴�</div>
           <Knowledge />
           <div class="right-base-btn call">
             <el-button type="primary"
@@ -504,8 +557,8 @@
         </div>
       </div>
     </template>
-    <!-- v-else -->
-    <template v-else>
+    <!--  -->
+    <!-- <template v-else>
       <div class="home-img-box">
         <div class="bg-title">
           <img src="../../public/bg-title.png" />
@@ -535,17 +588,21 @@
           </div>
         </div>
       </div>
-    </template>
+
+    </template> -->
     <!-- 鎺у埗鐨勫脊妗� -->
     <AddControl ref="control" :Arr="Arr" />
     <!-- 鎺у埗鐨勫脊妗� -->
-    <AddIssue
+    <TaskControlModal
       ref="control"
-      :Arr="Arr"
-      :taskData="taskData"
-      :Order="taskData.Order"
-      @getSetProductNumber="getTaskInfo"
+      :activeName="activeName"
+      @getSetProductNumber="reloadPage"
       @isTip="isTip"
+    />
+    <!-- 宸ヨ壓妯″瀷 -->
+    <ProcessModel
+      ref="processModel"
+      :processList="processList"
     />
   </div>
 </template>
@@ -559,20 +616,26 @@
   startTask,
   getProgress,
   countdown,
+  getTaskUnStarted,
 } 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";
 export default {
   components: {
+    TaskControlModal,
     Card,
     Knowledge,
     AddControl,
     AddIssue,
+    ProcessModel,
   },
   data() {
     return {
+      pollingTaskCountTimer: null,
       activeName: 1,
       progress: 70, //杩涘害
       passrate: 30, //鍚堟牸鐜�
@@ -582,6 +645,7 @@
       // 鍙充晶瀹屾垚
       finishShow:{},
       workers:[],
+      TasksCopy:[],
       Tasks: [
         {
           Order: {
@@ -667,12 +731,37 @@
       countDownHour: 0,
       countDownMinute: 0,
       Arr: [],
+      ArrError:'',
       // 璁板綍瀹氭椂鍣ㄧ姸鎬�
       procInfoTimer: null,
       cutdownTimer: null,
       TaskCount:0,
-      plcStatus:1,
+      plcStatus:0,
       isTipShow:false,
+      // isFinsh:0,
+      safeProduce:'',
+      // 璁惧鏂紑鐨勫師鍥�
+      plcNotConnected:'',
+      ChannelAmount:0,
+      object:{
+        Order: {},
+        Procedure: {
+          procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
+        },
+        inputMaterials: [],
+        outputMaterials: [],
+        procedureList: [],
+      },
+      processList:[
+        {
+          name:'浜у搧1+宸ヨ壓2',
+          number:'v1.0'
+        },
+        {
+          name:'浜у搧1+宸ヨ壓2',
+          number:'v2.0'
+        }
+      ]
     };
   },
   mounted() {
@@ -688,13 +777,29 @@
       this.getDate2();
     }, 5000);
     this.getTaskInfo();
+    this.getTaskCountStatistics()
+  },
+  beforeDestroy() {
+    clearTimeout(this.pollingTaskCountTimer)
+  },
+  watch:{
+    // isFinsh(){
+    //   if(this.isFinsh==this.Tasks.length){
+    //     this.getStartArr()
+    //   }
+    // }
   },
   methods: {
     taskClick(){
       if(this.TaskCount>0){
-        this.$refs.control.islook=true
+        // this.getStartArr()
+        this.$refs.control.show=true
       }else{
-        this.$message.error('鐩墠娌℃湁浠诲姟锛�')
+        this.$message({
+          message:'鐩墠娌℃湁浠诲姟锛�',
+          type: 'error',
+          duration: 3 * 1000
+        })
       }
     },
     isTip(val){
@@ -702,11 +807,29 @@
     },
     cutClick(val) {
       this.activeName = val;
-      this.getTaskInfo();
+      if(this.activeName==2){
+        this.Tasks=this.TasksCopy.slice(0,2)
+        if(this.Tasks.length<2){
+          if(this.Tasks.length==0){
+            this.Tasks.push(this.object)
+          }
+          this.Tasks.push(this.object)
+        }
+      }else if(this.activeName==1){
+        this.Tasks=this.TasksCopy.slice(0,1)
+        if(this.Tasks.length<1){
+          this.Tasks.push(this.object)
+        }
+      }else if(this.activeName==3){
+        this.Tasks=this.TasksCopy.slice(1)
+        if(this.Tasks.length<1){
+          this.Tasks.push(this.object)
+        }
+      }
     },
-    reloadPage() {
+    reloadPage(val) {
       // window.location.reload();
-      this.getTaskInfo();
+      this.getTaskInfo(val);
     },
     getcountdown() {
       countdown().then((res) => {
@@ -720,9 +843,14 @@
           this.countDownMinute = res.data.CountDownMinute
             ? res.data.CountDownMinute
             : 0;
+            if(this.countDownHour==0&& this.countDownMinute==0){
+              this.getTaskInfo();
+            }
         }
       });
     },
+
+
 
     getDateObj(date, fmt) {
       if (/(y+)/.test(fmt)) {
@@ -756,7 +884,7 @@
     formatDate(value) {
       if (value) {
         const now = value ? new Date(value * 1000) : new Date();
-        let time = this.getDateObj(now, "yyyy-MM-dd hh:mm:ss");
+        let time = this.getDateObj(now, "MM-dd hh:mm");
         return time;
       } else {
         return "";
@@ -786,7 +914,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
@@ -796,18 +924,23 @@
       setInterval(() => {
        d= getCha();
       }, 6000);
-      return d;
+      return date?d:'--';
     },
     setInterCard(value, name, i) {
-      if (this.Tasks[i].Procedure.procedure[value]) {
+      if (this.TasksCopy[i].Procedure.procedure[value]!=null) {
         let height = 200;
-        let num = 1;
-        if (this.$refs[name]) {
-          height = this.$refs[name].$el.offsetHeight;
-          num = Math.floor(height / 80);
+        let num = 3;
+        // if (this.$refs[name]) {
+        //   height = this.$refs[name].$el?this.$refs[name].$el.offsetHeight:200;
+        //   num = Math.floor(height / 80);
+        // }
+        height = this.$refs['homeRef']?(this.$refs['homeRef'].offsetHeight-470-90-20):200;
+        if(this.activeName==2){
+          height=height-610-90-20
         }
+        num = Math.floor(height / 80);
         let inputMaterials = JSON.parse(
-          JSON.stringify(this.Tasks[i].Procedure.procedure[value])
+          JSON.stringify(this.TasksCopy[i].Procedure.procedure[value])
         );
         let newDataList = [];
         let current = 0;
@@ -828,66 +961,85 @@
             }
           }
         }
-        this.Tasks[i][value] = [...newDataList];
+        this.TasksCopy[i][value] = [...newDataList];
       }
     },
 
-    getTaskInfo() {
-      let object = {
-        Order: {},
-        Procedure: {
-          procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
-        },
-        inputMaterials: [],
-        outputMaterials: [],
-        procedureList: [],
-      };
+    /**
+     * 杞鑾峰彇浠诲姟鏁伴噺
+     */
+    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)
+      });
+    },
+
+    getTaskInfo(val) {
       this.Tasks = [];
-      getTaskInfo({ page: 1, pageSize: this.activeName }).then((res) => {
+      this.TasksCopy=[]
+      getTaskInfo({taskMode:2}).then((res) => {
         if (res.code == 200&&res.data) {
           let arr=[]
           if(res.data.Tasks){
            arr.sort(function(a,b){
-            return (a.Position - b.Position)
+            return (a.Channel - b.Channel)
            })
           }
-          this.Tasks = res.data.Tasks ? res.data.Tasks : [];
+          this.TasksCopy = res.data.Tasks ? res.data.Tasks : [];
+          // 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
-          this.workers=res.data.workers?res.data.workers:[]
-          if (this.Tasks.length == 0) {
-            if (this.activeName == 1) {
-              this.Tasks.push(object);
+
+          if ((this.TasksCopy.length ==0 )||!this.TasksCopy) {
+            if (this.activeName == 1||this.activeName == 3) {
+              this.TasksCopy.push(this.object);
             } else {
-              this.Tasks.push(object);
-              this.Tasks.push(object);
+              this.TasksCopy.push(this.object);
+              this.TasksCopy.push(this.object);
             }
           }
-          for (let i in this.Tasks) {
-            this.Tasks[i].procedureList = [];
-            this.Tasks[i].inputMaterials = [];
-            this.Tasks[i].outputMaterials = [];
-            this.Tasks[i].finishNumber = 0;
+          this.workers=res.data.workers?res.data.workers:[]
+          for (let i in this.TasksCopy) {
+            this.TasksCopy[i].procedureList = [];
+            this.TasksCopy[i].inputMaterials = [];
+            this.TasksCopy[i].outputMaterials = [];
+            this.TasksCopy[i].finishNumber = 0;
             this.finishShow['finishShow&'+i]=false
-            this.Tasks[i].Procedure.procedure.workers = this.Tasks[i].Procedure
+            this.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
               .procedure.workers
-              ? this.Tasks[i].Procedure.procedure.workers
+              ? this.TasksCopy[i].Procedure.procedure.workers
               : [];
-            this.Tasks[i].procedureList.push([
+
+            this.TasksCopy[i].procedureList.push([
               {
                 name: "宸ュ簭",
-                ...this.Tasks[i].Procedure.procedure,
+                ...this.TasksCopy[i].Procedure.procedure,
               },
             ]);
-            
-            if (this.Tasks[i].Procedure.ID) {
-              startTask({ id: this.Tasks[i].Procedure.ID }).then((res) => {
+
+            if (this.TasksCopy[i].Procedure.ID) {
+              startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => {
                 if (res.code == 200) {
                   // res.data.number
-                  this.Tasks[i].procedureList[0].push({
+                  this.TasksCopy[i].procedureList[0].push({
                     number: res.data.Number,
-                    name: "宸ヨ壓",
-                    Arr:res.data.Params ? res.data.Params : [],
                   });
+                  // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
+                  // this.isFinsh=Number(i)+1
                 }
               });
             }
@@ -899,44 +1051,64 @@
               if (!this.procInfoTimer) {
                 this.procInfoTimer = setInterval(() => {
                   this.getProgressInfo();
-                }, 9000);
+                }, 3000);
           }
         }
-        if (res.code != 200 || this.Tasks.length == 0) {
-          this.getcountdown();
-          // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒
-          if (!this.cutdownTimer) {
-            this.cutdownTimer = setInterval(() => {
-              this.getcountdown();
-            }, 60000);
-          }
-        }
+        // if (res.code != 200 || this.TasksCopy.length == 0) {
+        //   this.getcountdown();
+        //   // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒
+        //   if (!this.cutdownTimer) {
+        //     this.cutdownTimer = setInterval(() => {
+        //       this.getcountdown();
+        //     }, 60000);
+        //   }
+        // }
+        this.cutClick(val?val:1)
       });
+      // this.TasksCopy.push(this.object)
+      // this.TasksCopy.push(this.object)
     },
     getStartArr(){
-      for (let i in this.Tasks) {
-        if (this.Tasks[i].Procedure.Status==1) {
-            this.Arr = this.Tasks[i].procedureList[0].Arr ?this.Tasks[i].procedureList[0].Arr: [];
-            this.taskData=this.Tasks[i];
-            break;
+      // for (let i in this.TasksCopy) {
+      //   if (this.TasksCopy[i].Procedure.Status==1) {
+      //       this.Arr = this.TasksCopy[i].Arr ?this.TasksCopy[i].Arr: [];
+      //       // this.taskData=this.TasksCopy[i];
+      //       break;
+      //   }
+      // }
+      getTaskInfo({taskMode:1}).then(res=>{
+        if(res.code==200){
+          this.taskData=res.data.Tasks?res.data.Tasks[0]:{};
+          this.ArrError=''
+          if (Object.keys(this.taskData).length > 0 &&this.taskData.Procedure.ID) {
+              startTask({ id: this.taskData.Procedure.ID }).then((res) => {
+                if (res.code == 200) {
+                  this.Arr =res.data.Params ? res.data.Params : []
+                }else{
+                  this.ArrError=res.msg?res.msg:'鑾峰彇宸ヨ壓鍙傛暟澶辫触锛�';
+                }
+              });
+            }
         }
-      }
+      })
     },
     getProgressInfo() {
-      for (let i in this.Tasks){
-        getProgress({
-          position: Number(i),
-          procedureId: this.Tasks[i].Procedure.ID,
-        }).then((res) => {
-          if (res.code == 200) {
-            this.Tasks[i].finishNumber = res.data.finishNumber
-              ? res.data.finishNumber
-              : 0;
-              this.plcStatus=res.data.plcStatus?res.data.plcStatus:1
-          }
-        });
+      for (let i in this.TasksCopy){
+        if(this.TasksCopy[i].Procedure.ID){
+          getProgress({
+            channel: Number(i),
+            procedureId: this.TasksCopy[i].Procedure.ID,
+          }).then((res) => {
+            if (res.code == 200) {
+              this.TasksCopy[i].finishNumber = res.data.finishNumber
+                ? res.data.finishNumber
+                : 0;
+                this.plcStatus=res.data.plcStatus?res.data.plcStatus:0
+            }
+          });
+        }
       }
-      
+
     },
     // 璁剧疆
     setUrl() {
@@ -967,7 +1139,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("鎿嶄綔鎴愬姛锛�");
           }
         });
@@ -986,6 +1158,33 @@
 </script>
 
 <style lang="scss">
+.tooltip-width-200{
+  width:200px;
+  line-height:1.3!important;
+}
+.el-popover{
+ background:#12234a!important;
+ color:#fff!important;
+ border-color: #09e5ed !important;
+
+ .popper__arrow::after{
+  border-top-color:#09e5ed !important;
+ }
+}
+.color_yellow{
+  color:yellow;
+}
+.color_318583{
+ color:#318583;
+}
+.el-empty{
+  height:calc(100% - 190px);
+  .el-empty__description p{
+    font-size:16px!important;
+    color:#fff!important;
+  }
+}
+
 .active-one {
   width: 100%;
   height: calc(100% - 100px);
@@ -996,10 +1195,13 @@
     margin-bottom: 20px;
   }
   .content {
-    height: 240px;
+    height: 300px;
   }
   .bottom {
-    height: calc(100% - 410px);
+    height: calc(100% - 470px);
+  }
+  .font_size_20px{
+    font-size:20px!important;
   }
 }
 .active-two {
@@ -1013,6 +1215,7 @@
     box-sizing: border-box;
     border-right: 1px solid #eee;
   }
+
   .small_title {
     margin-bottom: 30px;
   }
@@ -1027,18 +1230,18 @@
     line-height: 20px;
   }
   .content {
-    height: 370px;
+    height: 430px;
 
     .content-top {
-      height: calc(50% - 20px) !important;
-      padding-top: 10px !important;
+      height: calc(50% - 30px) !important;
+      padding-top: 20px !important;
     }
     .el-descriptions__body {
       font-size: 16px !important;
     }
   }
   .bottom {
-    height: calc(100% - 560px);
+    height: calc(100% - 610px);
   }
   .bottom_list .bottom-title {
     font-size: 16px;
@@ -1068,7 +1271,7 @@
       font-size:14px;
     }
   }
-  
+
   .el-step{
     .el-step__icon{
      background:#00cc66;
@@ -1250,14 +1453,21 @@
   }
   .card-box {
     width: 100%;
-    height: calc(100% - 50px - 50px);
+    height: calc(100% - 50px - 40px);
     // height:300px;
     .el-carousel__container{
       overflow-y:auto;
     }
-    // .el-carousel__item{
-    //   min-height:116px;
-    // }
+    .el-carousel__item{
+    //  height:auto;
+     min-height:160px;
+    }
+  }
+  .bottom-box-btn{
+    width:calc(100% - 20px);
+    position:absolute;
+    bottom:10px;
+    left:10px;
   }
 }
 
@@ -1291,6 +1501,15 @@
       border: 0;
     }
   }
+  .huise{
+    width: 46%;
+    float: right;
+  }
+  .huise.el-button--primary {
+      background: #CCE8E8;
+      color: #AAAAAA;
+      border: 0;
+    }
 }
 .home {
   width: 100%;
@@ -1324,11 +1543,12 @@
       align-content: center;
       justify-content: space-around;
       align-items: center;
+      overflow:hidden;
       .title-item {
-        width: calc(33.333% - 50px);
+        width: calc((100% - 50px)/3);
         float: left;
         margin-right: 10px;
-        padding: 15px 20px;
+        padding: 10px 5px;
         text-align: center;
         border-radius: 4px;
         display: inline-block;
@@ -1384,6 +1604,9 @@
         background: rgb(22 72 173);
         border-radius: 6px;
         // background: #233b9e;
+        .el-descriptions-row{
+          height:45px;
+        }
         .el-descriptions__body {
           background: transparent;
           font-size: 18px;
@@ -1420,18 +1643,31 @@
         // border: 1px solid #ccc;
         background: #6b83ff;
         border-radius: 5px;
-        margin-top: 20px;
+        margin-top: 10px;
         color: #333;
         position: relative;
-        .card_top-2,
+        .font_dian{
+            -webkit-box-orient:vertical;
+            overflow:hidden;
+            text-overflow:ellipsis;
+            white-space:nowrap;
+          }
+        .card_top-2{
+          width:35%;
+        }
+        .card-top-input-out-r,
         .card_top-3 {
-          width: 50%;
+          width:65%;
+        }
+        .card_top-2,.card-top-input-out-r,
+        .card_top-3 {
           height: 45px;
           border-radius: 5px;
           background: #6b83ff;
-          font-size: 12px;
+          font-size: 13px;
           color: #fff;
           float: left;
+          font-weight: 700;
           .card-top-r-t {
             width: 100%;
             text-align: center;
@@ -1465,7 +1701,7 @@
           }
         }
 
-        .card_top,
+        .card_top,.card-top-input-out-l,
         .card_top-4 {
           width: 50%;
           height: 45px;
@@ -1474,10 +1710,8 @@
           color: #fff;
           font-size: 12px;
           line-height: 45px;
-          float: left;
-
           > div {
-            margin-left: 12px;
+            padding-left: 12px;
             position: relative;
             p {
               position: absolute;
@@ -1487,15 +1721,32 @@
             }
           }
         }
+        .card_top{
+          float: left;
+        }
+        .card-top-input-out-l{
+          float:left;
+          width:65%;
+          line-height:20px;
+          vertical-align: middle;
+          display:flex;
+          justify-content:space-around;
+          align-items:center;
+        }
+        .card-top-input-out-r{
+          width:35%;
+        }
         .card_top-4 {
           width: calc(100% - 20px);
-          padding: 0 10px;
-          height: 70px;
-
-          line-height: 70px;
+          padding: 10px 10px;
           color: #fff;
           background: rgb(19, 35, 90);
-          font-size: 20px;
+          font-size: 14px;
+          height:50px;
+          line-height: 25px;
+          >div{
+            margin-left:0px;
+          }
         }
         .card-info-box {
           position: absolute;
@@ -1522,6 +1773,7 @@
             border-radius: 5px 5px 0 0;
             background: rgb(19, 35, 90);
           }
+
 
           .card_contentRight {
             width: 100%;
@@ -1592,7 +1844,7 @@
           display:inline-block;
         }
       }
-      
+
       .yuandian {
         width: 25px;
         height: 25px;
@@ -1619,7 +1871,7 @@
     .right_dutyLst {
       width: calc(106% - 20px);
       // height: 270px;
-      height: 310px;
+      height: 370px;
       border-radius: 4px;
       line-height: 30px;
       overflow: hidden;
@@ -1638,7 +1890,7 @@
       }
       .right-person-box {
         width: 100%;
-        height: calc(100% - 40px);
+        height: calc(100% - 60px);
         overflow: auto;
         margin-top: -10px;
       }
@@ -1668,7 +1920,7 @@
     }
     .right_base {
       width: 100%;
-      height: calc(100% - 520px);
+      height: calc(100% - 580px);
       min-height: 200px;
       // overflow-y:auto;
       position: relative;

--
Gitblit v1.8.0