From 6565e619523f045ba3e5e15a5bf3ea3ccbb33ba2 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期四, 28 九月 2023 10:26:01 +0800
Subject: [PATCH] 如果工艺参数是空,或者报错,弹框提示工艺参数错误的提示而不是新任务的弹框

---
 src/views/visualization.vue | 1607 +++++++++++++++++++++++++++++++++++++++++------------------
 1 files changed, 1,117 insertions(+), 490 deletions(-)

diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index e02f673..7dc5a4a 100644
--- a/src/views/visualization.vue
+++ b/src/views/visualization.vue
@@ -1,353 +1,479 @@
 
 <template>
-  <div class="home">
-    <template v-if="Object.keys(taskData).length > 0 && taskData.Procedure.ID">
+  <div class="home" ref="homeRef">
+    <!-- v-if="Tasks&&Tasks.length>0" -->
+    <template >
       <div class="left">
         <p class="title">
+          <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"
             style="float: right"
             @click="setUrl"
           ></span>
+          <span
+            style="float: right;margin-right:20px;font-size:28px;line-height:25px;"
+            @click="taskClick"
+          >
+          <el-badge :value="TaskCount"  :class="(TaskCount==0||isTipShow)?'item color_666':'item color_fff'">
+            <i   class="el-icon-chat-dot-round" />
+          </el-badge>
+        </span>
         </p>
-        <div class="statelist">
-          <span class="title-item"
-            >宸ュ崟缂栧彿:
-            <span class="color_4efefa">{{
-              taskData.Order.workOrderId || ""
-            }}</span>
-          </span>
-          <span class="title-item"
-            >褰撳墠宸ュ簭:
-            <span class="color_4efefa">{{
-              taskData.Procedure.procedure.procedureName || ""
-            }}</span>
-          </span>
-          <span class="title-item"
-            >鍚庨亾宸ュ簭:
-            <span class="color_4efefa">
-              {{
-                taskData.Procedure.procedure.nextProcedureName || "--"
-              }}
-            </span>
-          </span>
-          <span class="title-item"
-            >宸ヤ綔浜烘暟:
-            <span class="color_4efefa">
-              <span
-                v-if="
-                  taskData.Procedure.procedure &&
-                  taskData.Procedure.procedure.workers
-                "
-                >{{ taskData.Procedure.procedure.workers.length }}</span
-              >
-              <span v-else>0</span>
-              浜�
-            </span>
-          </span>
-        </div>
-        <div class="content">
-          <div class="content_left">
-            <div class="content-top">
-              <div class="small_title">褰撳墠瀹屾垚</div>
-              <div class="content_leftBttom">
-                <dl>
-                  <dd style="font-size: 26px; font-weight: 600">
-                    {{ finishNumber }}{{ taskData.Order.unit }}
-                  </dd>
-                </dl>
-              </div>
-            </div>
-            <div class="content-top">
-              <div class="small_title">姝e搧鐢熶骇</div>
-              <div class="content_leftBttom">
-                <dl>
-                  <dd style="font-size: 26px; font-weight: 600">
-                    {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
-                  </dd>
-                </dl>
-              </div>
-            </div>
+        <div
+          :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>
-          <div class="content_right">
-            <el-descriptions :column="2" :colon="true">
-              <el-descriptions-item label="浜у搧鍚嶇О">{{
-                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 || ""
-              }}</el-descriptions-item>
-              <el-descriptions-item label="宸ユ椂">
-                {{ taskData.Procedure.procedure.workHours || "" }}
-              </el-descriptions-item>
-              <el-descriptions-item label="璧锋鏃堕棿"
-                >{{ formatDate(taskData.Order.startTime) || "" }}
-                -
-                {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
-              >
-              <el-descriptions-item label="璐х墿鎻忚堪">{{
-                taskData.Order.orderAttr || ""
-              }}</el-descriptions-item>
-              <el-descriptions-item label="瀹㈡埛鍚嶇О">{{
-                taskData.Order.customer || ""
-              }}</el-descriptions-item>
-              <el-descriptions-item label="鍙傛暟瑕佹眰">{{
-                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"
-                  :text-inside="true"
-                  :stroke-width="30"
-                  :percentage="finishPercent"
-                ></el-progress>
-              </el-descriptions-item>
-              <!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%">
+          <div class="statelist">
+            <span class="title-item"
+              >宸ュ崟缂栧彿:
+              <span class="color_4efefa">{{
+                taskData.Order.workOrderId || "--"
+              }}</span>
+            </span>
+            <span class="title-item"
+              >褰撳墠宸ュ簭:
+              <span class="color_4efefa">{{
+                taskData.Procedure.procedure.procedureName || "--"
+              }}</span>
+            </span>
+            <span class="title-item"
+              >鍚庨亾宸ュ簭:
+              <span class="color_4efefa">
+                {{ taskData.Procedure.procedure.nextProcedureName || "--" }}
+              </span>
+            </span>
+            <!-- <span class="title-item"
+              >宸ヤ綔浜烘暟:
+              <span class="color_4efefa">
+                <span
+                  v-if="
+                    taskData.Procedure.procedure &&
+                    taskData.Procedure.procedure.workers
+                  "
+                  >{{ taskData.Procedure.procedure.workers.length }}</span
+                >
+                <span v-else>0</span>
+                浜�
+              </span>
+            </span> -->
+          </div>
+          <div class="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>
+          <div class="content">
+            <div class="content_left">
+              <div class="content-top">
+                <div class="small_title">鍔犲伐鏁�</div>
+                <div class="content_leftBttom">
+                  <dl>
+                    <dd
+                      style="font-size: 35px; font-weight: 600"
+                      class="color_green"
+                    >
+                      {{ taskData.finishNumber }}{{ taskData.Order.unit }}
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+              <div class="content-top">
+                <div class="small_title">鐩爣鏁�</div>
+                <div class="content_leftBttom">
+                  <dl>
+                    <dd
+                      style="font-size: 35px; font-weight: 600"
+                      class="color_green"
+                    >
+                      {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
+                    </dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+            <div class="content_right">
+              <el-descriptions :column="(activeName == 1||activeName == 3) ? 2 : 1" :colon="true">
+                <el-descriptions-item label="浜у搧鍚嶇О">{{
+                  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 || ""
+                }}</el-descriptions-item>
+                <el-descriptions-item label="宸ユ椂">
+                  {{ taskData.Procedure.procedure.workHours || "" }}
+                </el-descriptions-item>
+                <el-descriptions-item label="璁″垝鏃堕棿"
+                  >{{ formatDate(taskData.Order.startTime) || "" }}
+                  -
+                  {{ formatDate(taskData.Order.endTime) }}</el-descriptions-item
+                >
+                <el-descriptions-item label="璐х墿鎻忚堪">{{
+                  taskData.Order.orderAttr || ""
+                }}</el-descriptions-item>
+                <el-descriptions-item label="瀹㈡埛鍚嶇О">{{
+                  taskData.Order.customer || ""
+                }}</el-descriptions-item>
+                <el-descriptions-item label="鍙傛暟瑕佹眰">{{
+                  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="#007101"
-                    color="#00CC66"
+                    define-back-color="#132f6e"
+                    color="#00cc66"
+                    text-color="#fff"
                     :text-inside="true"
                     :stroke-width="30"
-                    :percentage="passrate"
+                    :percentage="
+                      (taskData.Order && taskData.finishNumber != 0)
+                        ? parseInt(
+                            (taskData.finishNumber / taskData.Order.amount) *
+                              100
+                        )>100?100:parseInt(
+                            (taskData.finishNumber / taskData.Order.amount) *
+                              100
+                        ): 0
+                    "
                   ></el-progress>
-                </el-descriptions-item> -->
-            </el-descriptions>
-          </div>
-        </div>
-        <div class="bottom">
-          <div class="bottom_list">
-            <div class="bottom-title">杈撳叆璧勬簮</div>
-            <el-carousel
-              direction="vertical"
-              height="calc(100% -  0px)"
-              :interval="500"
-              class="card-box"
-              ref="cardBox1"
-              v-if="
-                taskData.Procedure.procedure &&
-                taskData.Procedure.procedure.inputMaterials
-              "
-            >
-              <el-carousel-item
-                :key="index"
-                v-for="(item, index) in inputMaterials"
-              >
-                <div class="card" :key="index2" v-for="(list, index2) in item">
-                  <div class="card_content">
-                    <div class="card_contentLeft">{{ list.materialId }}</div>
-                  </div>
-                  <div class="card_top">
-                    <div>
-                      <!-- 璁惧12<i
-                          style="font-size: 14px"
-                          class="el-icon-right font-arrow-20"
-                        ></i>
-                        璁惧13 -->
-                      {{ list.materialName }}
-                    </div>
-                  </div>
-                  <div class="card_top2">
-                    <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>
-              </el-carousel-item>
-            </el-carousel>
-            <el-button type="primary" class="color_f70f83">
-              <i class="el-icon-phone-outline" />鐗╂枡鍛煎彨</el-button
-            >
-          </div>
-          <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
-          <div class="bottom_list">
-            <div class="bottom-title">
-              褰撳墠宸ュ簭:{{ taskData.Procedure.procedure.procedureName || "" }}
-            </div>
-            <el-carousel
-              direction="vertical"
-              height="calc(100% -  0px)"
-              :interval="500"
-              class="card-box"
-              ref="cardBox2"
-              v-if="taskData.Procedure.procedure && procedureList"
-            >
-              <el-carousel-item
-                :key="index"
-                v-for="(item, index) in procedureList"
-              >
-                <div class="card" :key="index2" v-for="(list, index2) in item">
-                  <template v-if="list.name == '宸ュ簭'">
-                    <div class="card_content">
-                      <div class="card_contentLeft color_blue">
-                        {{ list.deviceName }}
-                        <!-- <span style="float: right">6m/s</span> -->
-                      </div>
-                    </div>
-                    <div class="card_top-3">
-                      <span class="card-top-r-t"
-                        >瀹屾垚杩涘害锛歿{ finishPercent || 0 }}</span
-                      >
-                      <span class="card-top-r-b">
-                        <el-progress
-                          define-back-color="#133EAF"
-                          color="#09E5ED"
-                          :text-inside="true"
-                          :stroke-width="10"
-                          :percentage="finishPercent"
-                          :show-text="false"
-                        ></el-progress>
-                      </span>
-                    </div>
-                    <div class="card_top-2">
-                      <div style="line-height: 45px; text-align: center">
-                        鐢熶骇涓�
-                      </div>
-                      <!-- <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="card_top-4">
-                      <div>宸ヨ壓缂栧彿锛歿{ list.number }}</div>
-                      <div
-                        style="
-                          font-size: 14px;
-                          color: #cfcfcf;
-                          line-height: 20px;
-                        "
-                      >
-                        宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
-                      </div>
-                    </div>
-                  </template>
-                </div>
-              </el-carousel-item>
-            </el-carousel>
-
-            <p style="font-size: 22px; margin-left: 12px; margin-top: 50px"></p>
-            <div class="right-small-btn">
-              <el-button type="primary"> 鎵撳嵃</el-button>
-              <el-popover
-                placement="top-end"
-                width="160"
-                class="button-finish"
-                v-model="finishShow"
-                trigger="click"
-              >
-                <p>璇风‘璁ゆ槸鍚﹀凡瀹屾垚璇ョ敓浜т换鍔�?</p>
-                <div style="text-align: right; margin: 0">
-                  <el-button size="mini" @click="finishShow = false">
-                    鍙栨秷</el-button
-                  >
-                  <el-button type="primary" size="mini" @click="finishClick">
-                    纭畾</el-button
-                  >
-                </div>
-                <el-button type="primary" slot="reference"> 瀹屾垚</el-button>
-              </el-popover>
+                </el-descriptions-item>
+                <!-- <el-descriptions-item label="鍚堟牸鐜�" style="width: 100%">
+                    <el-progress
+                      define-back-color="#007101"
+                      color="#00CC66"
+                      text-color="#fff"
+                      :text-inside="true"
+                      :stroke-width="30"
+                      :percentage="passrate"
+                    ></el-progress>
+                  </el-descriptions-item> -->
+              </el-descriptions>
             </div>
           </div>
-          <i class="el-icon-arrow-right font-arrow-20 color_4efefa"></i>
-          <div class="bottom_list">
-            <div class="bottom-title">
-              <span>杈撳嚭璧勬簮</span>
-            </div>
-            <el-carousel
-              direction="vertical"
-              height="calc(100% -  0px)"
-              :interval="500"
-              ref="cardBox3"
-              class="card-box"
-              v-if="
-                taskData.Procedure.procedure &&
-                taskData.Procedure.procedure.outputMaterials
-              "
-            >
-              <el-carousel-item
-                :key="index"
-                v-for="(item, index) in outputMaterials"
+          <div class="bottom">
+            <div class="bottom_list">
+              <div class="bottom-title">杈撳叆璧勬簮</div>
+              <el-carousel
+                direction="vertical"
+                height="calc(100% -  0px)"
+                :interval="500"
+                class="card-box"
+                :ref="'cardBox1&' + index"
+                v-if="
+                  taskData.Procedure.procedure &&
+                  taskData.Procedure.procedure.inputMaterials
+                "
               >
-                <div
-                  class="card-box"
-                  :key="index2"
-                  v-for="(list, index2) in item"
+                <el-carousel-item
+                  :key="index"
+                  v-for="(item, index) in taskData.inputMaterials"
                 >
-                  <div class="card">
+                  <div
+                    class="card"
+                    :key="index2"
+                    v-for="(list, index2) in item"
+                  >
                     <div class="card_content">
-                      <div class="card_contentLeft">{{ list.materialId }}</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_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_top2">
+                    <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 -->
+                          <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-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> -->
+                        <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鍚�
+                </el-carousel-item>
+              </el-carousel>
+              <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_318583"></i>
+            <div class="bottom_list">
+              <div class="bottom-title">
+                褰撳墠宸ュ簭:{{ taskData.Procedure.procedure.procedureName || "" }}
+              </div>
+              <el-carousel
+                direction="vertical"
+                height="calc(100% -  0px)"
+                :interval="500"
+                class="card-box"
+                :ref="'cardBox2&' + index"
+                v-if="taskData.Procedure.procedure && taskData.procedureList"
+              >
+                <el-carousel-item
+                  :key="index"
+                  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_content">
+                        <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
+                              ? parseInt(
+                                  (taskData.finishNumber /
+                                    taskData.Order.amount) *
+                                    100
+                                )
+                              : 0
+                          }}</span
+                        >
+                        <span class="card-top-r-b">
+                          <el-progress
+                            define-back-color="#132f6e"
+                            color="#00cc66"
+                            text-color="#fff"
+                            :text-inside="true"
+                            :stroke-width="10"
+                            :percentage="
+                             (taskData.Order && taskData.finishNumber != 0)
+                                ? parseInt(
+                                    (taskData.finishNumber /
+                                      taskData.Order.amount) *
+                                      100
+                                )>100?100:parseInt(
+                                    (taskData.finishNumber /
+                                      taskData.Order.amount) *
+                                      100
+                                )
+                                : 0
+                            "
+                            :show-text="false"
+                          ></el-progress>
+                        </span>
+                      </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> -->
+                      </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>
+                    </template>
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+
+              <p
+                style="font-size: 22px; margin-left: 12px; margin-top: 50px"
+              ></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
+                  placement="top-end"
+                  width="160"
+                  class="button-finish"
+                  v-model="finishShow['finishShow&'+index]"
+                  trigger="click"
+                >
+                  <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
+                    >
+                    <el-button
+                      type="primary"
+                      size="mini"
+                      class="color_f70f83"
+                      @click="finishClick(index, taskData)"
+                    >
+                      纭畾</el-button
+                    >
+                  </div>
+                  <el-button type="primary" slot="reference"> 瀹屾垚</el-button>
+                </el-popover>
+              </div>
+            </div>
+            <i class="el-icon-arrow-right font-arrow-20 color_318583"></i>
+            <div class="bottom_list">
+              <div class="bottom-title">
+                <span>杈撳嚭璧勬簮</span>
+              </div>
+              <el-carousel
+                direction="vertical"
+                height="calc(100% -  0px)"
+                :interval="500"
+                :ref="'cardBox3&' + index"
+                class="card-box"
+                v-if="
+                  taskData.Procedure.procedure &&
+                  taskData.Procedure.procedure.outputMaterials
+                "
+              >
+                <el-carousel-item
+                  :key="index"
+                  v-for="(item, index) in taskData.outputMaterials"
+                >
+                  <div
+                    class="card-box"
+                    :key="index2"
+                    v-for="(list, index2) in item"
+                  >
+                    <div class="card">
+                      <div class="card_content">
+                        <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-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-top-input-out-r">
+                        <div style="line-height: 45px; text-align: center">
+                          {{ list.amount }} {{ list.unit }}
+                        </div>
                       </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">
-              <i class="el-icon-phone-outline" />杩愯緭鍛煎彨</el-button
-            >
+                  </div>
+                </el-carousel-item>
+              </el-carousel>
+              <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>
+        <template v-if="!Tasks||Tasks.length==0">
+          <el-empty description="鏆傛棤浠诲姟..."></el-empty>
+        </template>
       </div>
       <div class="right">
         <div class="right_top">
           <div class="right-top-l">浣滀笟鐘舵��</div>
           <div class="time">
             <dl>
-              <dd><span style="font-size: 32px">{{ formatDate3() }}</span></dd>
               <dd>
-                <span style="font-size: 12px; "
-                  >{{ formatDate2() }}</span
-                >
+                <span style="font-size: 32px">{{ formatTime3 }}</span>
+              </dd>
+              <dd>
+                <span style="font-size: 12px">{{ formatTime2 }}</span>
                 <!--margin-right: 10px <span style="font-size: 14px">鏄熸湡鍥�</span> -->
               </dd>
             </dl>
@@ -355,23 +481,38 @@
         </div>
         <div class="right-top-m">
           璁惧鐘舵��:
-          <span style="position: relative"
-            >姝e父
-            <span class="yuandian"></span>
+          <!-- 1鏂紑2鐢熶骇3寰呮満 -->
+          <span style="position: relative" v-if="plcStatus" >
+            <el-popover
+              v-if="plcStatus == 1&&plcNotConnected"
+              width="180"
+              :content="plcNotConnected"
+              placement="top-end"
+              trigger="click"
+            >
+              <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">
-          <el-button type="primary" @click="controlClick"> 鎺у埗</el-button>
+          <!-- <el-button type="primary" @click="controlClick"> 鎺у埗</el-button> -->
         </div>
         <div class="right_dutyLst">
           <div class="right-small-title">褰撳墠鍊肩彮</div>
-          <div
-            class="right-person-box"
-            v-if="taskData.Procedure.procedure.workers"
-          >
+
+          <div class="right-person-box" v-if="workers && workers.length > 0">
             <dl
               class="right-small-person"
-              v-for="(item, index) in taskData.Procedure.procedure.workers"
+              v-for="(item, index) in workers"
               :key="index"
             >
               <dt>
@@ -388,9 +529,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%;
@@ -405,7 +549,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"
@@ -415,12 +559,16 @@
         </div>
       </div>
     </template>
-    <template v-else>
+    <!--  -->
+    <!-- <template v-else>
       <div class="home-img-box">
         <div class="bg-title">
           <img src="../../public/bg-title.png" />
           <span class="bg-title-span">璁惧瀹炴椂鐢熶骇鐪嬫澘</span>
-          <div class="bg-date"><span>{{ formatDate3() }}</span><br/>{{formatDate2()}}</div>
+          <div class="bg-date">
+            <span>{{ formatTime3 }}</span
+            ><br />{{ formatTime2 }}
+          </div>
           <span
             class="font el-icon-setting set-title bg-set"
             @click="setUrl"
@@ -430,15 +578,33 @@
           <img src="../../public/yuan.png" />
           <div class="btn-img">
             <div class="font_size_16" style="line-height: 5; margin-top: 18%">
-              鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂...
+              <span v-if="showCountDown"
+                >璺濈浠诲姟寮�濮嬫椂闂达細
+                <span class="color_red">{{ countDownHour }}</span
+                >鏃� <span class="color_red">{{ countDownMinute }}</span
+                >鍒�</span
+              >
+              <span v-else>鏆傛棤浠诲姟锛屼紤鎭竴涓嬪惂...</span>
             </div>
             <el-button type="primary" @click="reloadPage">鍒锋柊浠诲姟</el-button>
           </div>
         </div>
       </div>
-    </template>
+      
+    </template> -->
     <!-- 鎺у埗鐨勫脊妗� -->
-    <AddControl ref="control" :id="taskData.Procedure.ID" />
+    <AddControl ref="control" :Arr="Arr" />
+    <!-- 鎺у埗鐨勫脊妗� -->
+    <AddIssue
+      ref="control"
+      :Arr="Arr"
+      :ArrError="ArrError"
+      :safeProduce="safeProduce"
+      :taskData="taskData"
+      :Order="taskData.Order"
+      @getSetProductNumber="getTaskInfo"
+      @isTip="isTip"
+    />
   </div>
 </template>
 
@@ -450,28 +616,71 @@
   saveMiniDict,
   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";
 export default {
   components: {
     Card,
     Knowledge,
     AddControl,
+    AddIssue,
   },
   data() {
     return {
+      activeName: 1,
       progress: 70, //杩涘害
       passrate: 30, //鍚堟牸鐜�
       production: 25, //鐢熶骇涓�
-      finishNumber: 0,
-      finishPercent: 0,
+      formatTime2: "",
+      formatTime3: "",
       // 鍙充晶瀹屾垚
-      finishShow: false,
-      inputMaterials: [],
-      outputMaterials: [],
-      procedureList: [],
+      finishShow:{},
+      workers:[],
+      TasksCopy:[],
+      Tasks: [
+        {
+          Order: {
+            amount: "",
+            customer: "",
+            deliverDate: "",
+            endTime: "",
+            orderAttr: [],
+            orderId: "",
+            parameter: "",
+            productId: "",
+            productName: "",
+            startTime: "",
+            unit: "",
+          },
+          Procedure: {
+            id: 1,
+            procedure: {
+              deviceId: "",
+              endTime: "",
+              inputMaterials: [
+                {
+                  amount: 1,
+                  materialId: 1,
+                  materialName: 1,
+                },
+              ],
+              outputMaterials: [],
+              procedureId: "",
+              procedureName: "",
+              startTime: "",
+              workHours: "",
+            },
+          },
+          inputMaterials: [],
+          outputMaterials: [],
+          procedureList: [],
+        },
+      ],
       taskData: {
         Order: {
           amount: "",
@@ -513,6 +722,23 @@
           },
         },
       },
+      totalNumber: 0,
+      showCountDown: false,
+      countDownHour: 0,
+      countDownMinute: 0,
+      Arr: [],
+      ArrError:'',
+      // 璁板綍瀹氭椂鍣ㄧ姸鎬�
+      procInfoTimer: null,
+      cutdownTimer: null,
+      TaskCount:0,
+      plcStatus:0,
+      isTipShow:false,
+      // isFinsh:0,
+      safeProduce:'',
+      // 璁惧鏂紑鐨勫師鍥�
+      plcNotConnected:'',
+      ChannelAmount:0,
     };
   },
   mounted() {
@@ -521,26 +747,73 @@
     //   this.passrate = this.getRandomNumber(1, 100);
     //   this.production = this.getRandomNumber(1, 100);
     // }, 3000);
-    this.getTaskInfo();
+    this.getDate3();
+    this.getDate2();
     setInterval(() => {
-      this.getProgressInfo();
-    }, 60000);
+      this.getDate3();
+      this.getDate2();
+    }, 5000);
+    this.getTaskInfo();
   },
-
+  watch:{
+    // isFinsh(){
+    //   if(this.isFinsh==this.Tasks.length){
+    //     this.getStartArr()
+    //   }
+    // }
+  },
   methods: {
-    reloadPage() {
-      window.location.reload();
+    taskClick(){
+      if(this.TaskCount>0){
+        this.getStartArr()
+        this.$refs.control.islook=true
+      }else{
+        this.$message({
+          message:'鐩墠娌℃湁浠诲姟锛�',
+          type: 'error',
+          duration: 3 * 1000
+        })
+      }
     },
-    getProgressInfo() {
-      getProgress().then((res) => {
+    isTip(val){
+      this.isTipShow=val
+    },
+    cutClick(val) {
+      this.activeName = val;
+      if(this.activeName==2){
+        this.Tasks=this.TasksCopy.slice(0,2)
+        if(this.Tasks.length<2){
+          this.Tasks.push(null)
+        }
+      }else if(this.activeName==1){
+        this.Tasks=this.TasksCopy.slice(0,1)
+      }else if(this.activeName==3){
+        this.Tasks=this.TasksCopy.slice(1)
+      }
+    },
+    reloadPage() {
+      // window.location.reload();
+      this.getTaskInfo();
+    },
+    getcountdown() {
+      countdown().then((res) => {
         if (res.code == 200) {
-          this.finishNumber = res.data.finishNumber ? res.data.finishNumber : 0;
-          this.finishPercent = res.data.finishPercent
-            ? res.data.finishPercent
+          this.showCountDown = res.data.ShowCountDown
+            ? res.data.ShowCountDown
+            : false;
+          this.countDownHour = res.data.CountDownHour
+            ? res.data.CountDownHour
             : 0;
+          this.countDownMinute = res.data.CountDownMinute
+            ? res.data.CountDownMinute
+            : 0;
+            if(this.countDownHour==0&& this.countDownMinute==0){
+              this.getTaskInfo();
+            }
         }
       });
     },
+
     getDateObj(date, fmt) {
       if (/(y+)/.test(fmt)) {
         fmt = fmt.replace(
@@ -573,127 +846,268 @@
     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 "";
       }
     },
-    formatDate3() {
-        const now =  new Date();
-        let time = this.getDateObj(now, "hh:mm");
+    // 鏍煎紡鍖栨椂闂� ==> yyyy-mm-dd
+    formatDate2(value) {
+      if (value) {
+        const now = value ? new Date(value * 1000) : new Date();
+        let time = this.getDateObj(now, "yyyy/MM/dd hh:mm:ss");
         return time;
-    },
-    formatDate2(){
-      const now =  new Date();
-        let time = this.getDateObj(now, "yyyy骞碝M鏈坉d鏃�");
-        return time;
-    },
-    setInterCard(value, name) {
-      let height = 200;
-      let num = 1;
-      if (this.$refs[name]) {
-        height = this.$refs[name].$el.offsetHeight;
-        num = Math.floor(height / 80);
+      } else {
+        return "";
       }
-      let inputMaterials = JSON.parse(
-        JSON.stringify(this.taskData.Procedure.procedure[value])
-      );
-      let newDataList = [];
-      let current = 0;
-      // let num=4;
-      if (inputMaterials && inputMaterials.length > 0) {
-        for (let i = 0; i <= inputMaterials.length - 1; i++) {
-          if (i % num !== 0 || i === 0) {
-            if (!newDataList[current]) {
+    },
+    getDate3() {
+      let now = new Date();
+      this.formatTime3 = this.getDateObj(now, "hh:mm");
+    },
+    getDate2() {
+      let now = new Date();
+      this.formatTime2 = this.getDateObj(now, "yyyy骞碝M鏈坉d鏃�");
+    },
+    getFormatTime(date){
+      const getCha=()=>{
+        let now=new Date().getTime()
+        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
+        return days+'澶�'+hours+'鏃�'+m+'鍒�'
+      }
+      let d= getCha()
+      setInterval(() => {
+       d= getCha();
+      }, 6000);
+      return d;
+    },
+    setInterCard(value, name, i) {
+      if (this.TasksCopy[i].Procedure.procedure[value]!=null) {
+        let height = 200;
+        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.TasksCopy[i].Procedure.procedure[value])
+        );
+        let newDataList = [];
+        let current = 0;
+        // let num=4;
+        if (inputMaterials && inputMaterials.length > 0) {
+          for (let i = 0; i <= inputMaterials.length - 1; i++) {
+            if (i % num !== 0 || i === 0) {
+              if (!newDataList[current]) {
+                newDataList[current] = [];
+                newDataList[current].push(inputMaterials[i]);
+              } else {
+                newDataList[current].push(inputMaterials[i]);
+              }
+            } else {
+              current++;
               newDataList[current] = [];
               newDataList[current].push(inputMaterials[i]);
-            } else {
-              newDataList[current].push(inputMaterials[i]);
             }
-          } else {
-            current++;
-            newDataList[current] = [];
-            newDataList[current].push(inputMaterials[i]);
           }
         }
+        this.TasksCopy[i][value] = [...newDataList];
       }
-      this[value] = [...newDataList];
-      console.log(this.inputMaterials, "inputMaterials");
     },
 
     getTaskInfo() {
-      this.taskData = {
+      let object = {
         Order: {},
         Procedure: {
           procedure: { inputMaterials: [], outputMaterials: [], workers: [] },
         },
+        inputMaterials: [],
+        outputMaterials: [
+            // [
+            //   {
+            //    materialId:11111,
+            //    materialName:'272澶у鍟婃斁鍋囦簡鍗¤壈鑻﹀鏂楀瀮鍦惧彂蹇�掑瀮鍦惧弽棣堟潵寰楀強鍏嬮殕',
+            //    amount:100,
+            //    unit:'浠�'
+            //   }
+            // ]
+        ],
+        procedureList: [
+        //  [ 
+        //     {
+        //       name:"宸ュ簭",
+        //       deviceName:'1111dhafjdhajkhf jkdahjkf鎵撴硶鍗冲彲鎵撻枊閺堟帴鑲痉鍩哄晩鐪嬩締jdad澶ч浜笢鍗¤�佸徃鏈虹暘绐犲�掕嚰寮�浜嗘埧閲戦樋濂庣鍗佸叚灞婂弽棣堟媺寰锋柉鍩簁鎵撳崱鏈洪樋鐝傞檮浠舵墦寮�浜嗙偣鍑婚樋閲屽崱鍑忚偉鐨勫崱鎷夎兌寮�浜嗘埧澶ц涓婂厠闅唂k鍟﹀ぇ瀹堕槻绌洪浄閬旀暩鎿氱湅i'
+        //     },
+        //   ]
+        ],
       };
-      getTaskInfo().then((res) => {
-        if (res.code == 200) {
-          this.taskData = res.data
-            ? res.data
-            : {
-                Order: {},
-                Procedure: {
-                  procedure: {
-                    inputMaterials: [],
-                    outputMaterials: [],
-                    workers: [],
-                  },
-                },
-              };
-          this.taskData.Procedure.procedure.workers = this.taskData.Procedure
-            .procedure.workers
-            ? this.taskData.Procedure.procedure.workers
-            : [];
-          this.procedureList.push([
-            {
-              name: "宸ュ簭",
-              ...this.taskData.Procedure.procedure,
-            },
-          ]);
-          if (this.taskData.Procedure.ID) {
-            startTask({ id: this.taskData.Procedure.ID }).then((res) => {
-              if (res.code == 200) {
-                // res.data.number
-                this.procedureList[0].push({
-                  number: res.data.number,
-                  name: "宸ヨ壓",
-                });
-              }
-            });
+      this.Tasks = [];
+      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.Channel - b.Channel)
+           })
           }
-          console.log(this.procedureList, "===1111procedureList");
-          // setTimeout(() => {
-          this.setInterCard("inputMaterials", "cardBox1");
-          // this.setInterCard('procedureList','cardBox2')
-          this.setInterCard("outputMaterials", "cardBox3");
-          // }, 5000);
+          this.activeName=1;
+          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(object)
+          // }
+          this.TaskCount=res.data.TaskCount?res.data.TaskCount:0
+          
+          if (this.TasksCopy.length == 0&&this.TaskCount==0) {
+            if (this.activeName == 1||this.activeName == 3) {
+              this.TasksCopy.push(object);
+            } else {
+              this.TasksCopy.push(object);
+              this.TasksCopy.push(object);
+            }
+          }
+          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.TasksCopy[i].Procedure.procedure.workers = this.TasksCopy[i].Procedure
+              .procedure.workers
+              ? this.TasksCopy[i].Procedure.procedure.workers
+              : [];
+
+            this.TasksCopy[i].procedureList.push([
+              {
+                name: "宸ュ簭",
+                ...this.TasksCopy[i].Procedure.procedure,
+              },
+            ]);
+           
+            if (this.TasksCopy[i].Procedure.ID) {
+              startTask({ id: this.TasksCopy[i].Procedure.ID }).then((res) => {
+                if (res.code == 200) {
+                  // res.data.number
+                  this.TasksCopy[i].procedureList[0].push({
+                    number: res.data.Number,
+                  });
+                  // this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
+                  // this.isFinsh=Number(i)+1
+                }
+              });
+            }
+            this.setInterCard("inputMaterials", "cardBox1&" + i, i);
+            this.setInterCard("outputMaterials", "cardBox3&" + i, i);
+          }
+          this.getStartArr()
+          this.getProgressInfo();
+              if (!this.procInfoTimer) {
+                this.procInfoTimer = setInterval(() => {
+                  this.getProgressInfo();
+                }, 3000);
+          }
         }
+        // if (res.code != 200 || this.TasksCopy.length == 0) {
+        //   this.getcountdown();
+        //   // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒
+        //   if (!this.cutdownTimer) {
+        //     this.cutdownTimer = setInterval(() => {
+        //       this.getcountdown();
+        //     }, 60000);
+        //   }
+        // }
+        this.cutClick(1)
       });
+      // this.TasksCopy.push(object)
+      // this.TasksCopy.push(object)
+    },
+    getStartArr(){
+      // 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 (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;
+                }
+              });
+            }
+        }
+      })
+    },
+    getProgressInfo() {
+      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() {
-      const { href } = this.$router.resolve({
+      // const { href } = this.$router.resolve({
+      //   path: "/set",
+      // });
+      // window.open(href, "_blank");
+      this.$router.push({
         path: "/set",
       });
-      window.open(href, "_blank");
     },
     // 鍙充晶鎺у埗
     controlClick() {
-      if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
-        this.$refs.control.islook = true;
+      if (this.Tasks.length > 0) {
+        for(let i in this.Tasks){
+          if(this.Tasks[i].Procedure.Status==1){
+            this.$refs.control.islook = true;
+            break;
+          }
+        }
       } else {
         this.$message.error("褰撳墠璁惧娌℃湁宸ュ簭锛�");
       }
     },
     // 鍙充晶瀹屾垚
-    finishClick() {
-      if (Object.keys(this.taskData).length > 0 && this.taskData.Procedure.ID) {
-        finishTask({ id: this.taskData.Procedure.ID }).then((res) => {
+    finishClick(i, taskData) {
+      if (Object.keys(taskData).length > 0 && taskData.Procedure.ID) {
+        finishTask({ id: taskData.Procedure.ID }).then((res) => {
           if (res.code == 200) {
-            this.finishShow = false;
+            this.finishShow['finishShow&'+i] = false;
             this.getTaskInfo();
             this.$message.success("鎿嶄綔鎴愬姛锛�");
           }
@@ -713,8 +1127,147 @@
 </script>
 
 <style lang="scss">
-.set-title{
-  cursor:pointer;
+.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);
+  .statelist {
+    height: 50px;
+  }
+  .small_title {
+    margin-bottom: 20px;
+  }
+  .content {
+    height: 300px;
+  }
+  .bottom {
+    height: calc(100% - 470px);
+  }
+  .font_size_20px{
+    font-size:20px!important;
+  }
+}
+.active-two {
+  width: calc(50% - 10px);
+  height: calc(100% - 100px);
+  float: left;
+  padding-left: 10px;
+  &:nth-of-type(1) {
+    padding-right: 10px;
+    padding-left: 0px;
+    box-sizing: border-box;
+    border-right: 1px solid #eee;
+  }
+  
+  .small_title {
+    margin-bottom: 30px;
+  }
+  .statelist {
+    height: 60px;
+   .title-item{
+    font-size:14px!important;
+   }
+  }
+  .title-item > span {
+    display: block;
+    line-height: 20px;
+  }
+  .content {
+    height: 430px;
+
+    .content-top {
+      height: calc(50% - 30px) !important;
+      padding-top: 20px !important;
+    }
+    .el-descriptions__body {
+      font-size: 16px !important;
+    }
+  }
+  .bottom {
+    height: calc(100% - 610px);
+  }
+  .bottom_list .bottom-title {
+    font-size: 16px;
+  }
+}
+.gong-date{
+ width:100%;
+ height:20px;
+ line-height:20px;
+ margin-bottom:10px;
+ font-size:16px;
+}
+.gongx{
+  width:100%;
+  height:50px;
+  overflow-x:auto;
+  // overflow-y:hidden;
+  margin-top:-5px;
+  .steps{
+    height:100%;
+    .el-step__icon{
+      width:16px;
+      height:16px;
+    }
+    .el-step__title{
+      line-height:25px;
+      font-size:14px;
+    }
+  }
+  
+  .el-step{
+    .el-step__icon{
+     background:#00cc66;
+    }
+    .is-wait{
+      .el-step__icon{
+        background:#fff;
+      }
+    }
+  }
+  .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;
+  }
+}
+.set-title {
+  cursor: pointer;
 }
 .home-img-box {
   width: calc(100% - 40px);
@@ -731,39 +1284,38 @@
     }
     .bg-title-span {
       position: absolute;
-      width: 400px;
-      height: 100px;
-      line-height: 100px;
+      width: 30%;
+      height: 4rem;
+      line-height: 2.4;
       font-size: 26px;
       font-weight: 700;
       text-align: center;
-      left: 39%;
-      top: 5%;
+      left: 36%;
+      top: 1.5rem;
       display: inline-block;
     }
-    .bg-set{
-      position:absolute;
-      right:10%;
-      height: 100px;
-      line-height: 100px;
+    .bg-set {
+      position: absolute;
+      right: 10%;
+      height: 4rem;
+      line-height: 2.4;
       font-size: 40px;
       font-weight: 700;
-      top: 5%;
+      top: 1rem;
     }
-    .bg-date{
-      position:absolute;
-      left:3%;
+    .bg-date {
+      position: absolute;
+      left: 3%;
       height: 100px;
       line-height: 30px;
       font-size: 16px;
       top: 15%;
-      span{
+      span {
         font-size: 35px;
-       font-weight: 700;
-       line-height: 20px;
+        font-weight: 700;
+        line-height: 20px;
       }
     }
-    
   }
   .yuan {
     width: 40%;
@@ -780,7 +1332,7 @@
       margin: 0 auto;
       text-align: center;
       position: absolute;
-      top: 21%;
+      top: 9rem;
     }
   }
 }
@@ -788,10 +1340,11 @@
   font-size: 30px;
   font-weight: 700;
 }
-.el-button--primary {
-  border: 0;
-  font-weight: 700 !important;
-  font-size: 16px !important;
+.color_666{
+  color:#666!important;
+}
+.color_fff{
+  color:#fff!important;
 }
 .color_4efefa {
   color: #4efefa;
@@ -803,7 +1356,10 @@
   background: #33ccff !important;
 }
 .color_green {
-  background: #00cc66 !important;
+  color: #00cc66 !important;
+}
+.color_red {
+  background: red !important;
 }
 .color_organge {
   background: #f76c0f !important;
@@ -816,16 +1372,16 @@
   position: relative;
   padding: 10px;
   width: 30%;
-  height: 100%;
+  height: calc(100% - 20px);
   border-radius: 6px;
   background: rgb(22 72 173);
   // float:left;
   .bottom-title {
     font-weight: 600;
-    font-size: 22px;
+    font-size: 20px;
     height: 30px;
     line-height: 30px;
-    margin-bottom: 30px;
+    margin-bottom: 5px;
     .el-button--primary {
       color: #fff;
       float: right;
@@ -866,15 +1422,26 @@
   }
   .card-box {
     width: 100%;
-    height: calc(100% - 50px - 50px);
-    // overflow:auto;
+    height: calc(100% - 50px - 40px);
     // height:300px;
+    .el-carousel__container{
+      overflow-y:auto;
+    }
+    .el-carousel__item{
+    //  height:auto;
+     min-height:160px;
+    }
+  }
+  .bottom-box-btn{
+    width:calc(100% - 20px);
+    position:absolute;
+    bottom:10px;
+    left:10px;
   }
 }
 
 .small_title {
-  font-size: 24px;
-  margin-bottom: 10px;
+  font-size: 20px;
 }
 .right-small-btn {
   margin-top: 10px;
@@ -903,6 +1470,15 @@
       border: 0;
     }
   }
+  .huise{
+    width: 46%;
+    float: right;
+  }
+  .huise.el-button--primary {
+      background: #CCE8E8;
+      color: #AAAAAA;
+      border: 0;
+    }
 }
 .home {
   width: 100%;
@@ -921,23 +1497,27 @@
     .title {
       font-size: 30px;
       font-weight: 600;
-
+      height:40px;
+      margin:10px 0 30px;
       text-align: center;
+      .el-badge__content, .el-progress.is-exception .el-progress-bar__inner{
+        background-color:green;
+      }
     }
 
     .statelist {
       width: 100%;
-      margin: 0 auto;
-      height: 50px;
+      margin: 0 auto 10px;
       flex-wrap: nowrap;
       align-content: center;
       justify-content: space-around;
       align-items: center;
+      overflow:hidden;
       .title-item {
-        width: calc(25% - 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;
@@ -951,8 +1531,7 @@
     }
     .content {
       width: 100%;
-      height: 240px;
-      margin: 30px 0px;
+      margin: 0px 0px 20px;
       overflow: hidden;
       .content_left {
         width: 24%;
@@ -961,8 +1540,8 @@
         // padding:2%;
         .content-top {
           background: rgb(22 72 173);
-          height: calc(50% - 30px);
-          padding-top: 20px;
+          height: calc(50% - 20px);
+          padding-top: 10px;
           text-align: center;
           line-height: 30px;
           border-radius: 6px;
@@ -994,6 +1573,9 @@
         background: rgb(22 72 173);
         border-radius: 6px;
         // background: #233b9e;
+        .el-descriptions-row{
+          height:45px;
+        }
         .el-descriptions__body {
           background: transparent;
           font-size: 18px;
@@ -1002,7 +1584,7 @@
           width: 100%;
           margin: 10px 0px;
           // background: #233b9e;
-          color: #fff;
+          color: #ffff99;
           .el-descriptions--small {
             width: 100%;
             // margin: 50px 50px;
@@ -1016,7 +1598,6 @@
 
     .bottom {
       width: 100%;
-      height: calc(100% - 500px);
       display: flex;
       flex-wrap: nowrap;
       align-content: center;
@@ -1031,18 +1612,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;
@@ -1076,7 +1670,7 @@
           }
         }
 
-        .card_top,
+        .card_top,.card-top-input-out-l,
         .card_top-4 {
           width: 50%;
           height: 45px;
@@ -1085,10 +1679,8 @@
           color: #fff;
           font-size: 12px;
           line-height: 45px;
-          float: left;
-
           > div {
-            margin-left: 12px;
+            padding-left: 12px;
             position: relative;
             p {
               position: absolute;
@@ -1098,15 +1690,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: 40px;
+          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;
@@ -1133,6 +1742,7 @@
             border-radius: 5px 5px 0 0;
             background: rgb(19, 35, 90);
           }
+          
 
           .card_contentRight {
             width: 100%;
@@ -1191,9 +1801,19 @@
       line-height: 50px;
       font-weight: 700;
       font-size: 18px;
-      padding: 0 4%;
+      padding: 0 3%;
       overflow-x: hidden;
-      margin-left: -4%;
+      margin-left: -3%;
+      span{
+        display:inline-block;
+        img{
+          width:23px;
+          vertical-align: middle;
+          // float:left;
+          display:inline-block;
+        }
+      }
+      
       .yuandian {
         width: 25px;
         height: 25px;
@@ -1218,14 +1838,16 @@
       }
     }
     .right_dutyLst {
-      width: calc(100% - 20px);
-      height: 270px;
+      width: calc(106% - 20px);
+      // height: 270px;
+      height: 370px;
       border-radius: 4px;
       line-height: 30px;
       overflow: hidden;
-      // background: #00cc66;
+      background: #4565c9;
       margin-top: 10px;
       padding: 5px 10px;
+      margin-left:-3%;
       position: relative;
       .right-small-title {
         width: auto;
@@ -1237,7 +1859,7 @@
       }
       .right-person-box {
         width: 100%;
-        height: calc(100% - 40px);
+        height: calc(100% - 60px);
         overflow: auto;
         margin-top: -10px;
       }
@@ -1267,7 +1889,7 @@
     }
     .right_base {
       width: 100%;
-      height: calc(100% - 520px);
+      height: calc(100% - 580px);
       min-height: 200px;
       // overflow-y:auto;
       position: relative;
@@ -1304,4 +1926,9 @@
     }
   }
 }
+.el-button--primary {
+  border: 0;
+  font-weight: 700 !important;
+  font-size: 16px;
+}
 </style>

--
Gitblit v1.8.0