From 3d3b89a84fd8c3aa524c013afe56c6949fc3a874 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期日, 08 十月 2023 16:19:45 +0800
Subject: [PATCH] feat: 工序添加工艺参数展示

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

diff --git a/src/views/visualization.vue b/src/views/visualization.vue
index 9640465..a74ba65 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>
+  <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 v-if="activeName == 1" src="../../public/one-blue.png" />
-            <img v-else src="../../public/one.png" />
-          </span>
-          <span class="font set-title" style="float: left" @click="cutClick(2)">
-            <img v-if="activeName == 2" src="../../public/two-blue.png" />
-            <img 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"
@@ -27,27 +41,31 @@
             style="float: right;margin-right:20px;font-size:28px;line-height:25px;"
             @click="taskClick"
           >
-          <el-badge :value="TaskCount" class="item">
-            <i   class="el-icon-chat-round"/>
+          <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="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>
           <div class="statelist">
             <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"
@@ -56,7 +74,7 @@
                 {{ taskData.Procedure.procedure.nextProcedureName || "--" }}
               </span>
             </span>
-            <span class="title-item"
+            <!-- <span class="title-item"
               >宸ヤ綔浜烘暟:
               <span class="color_4efefa">
                 <span
@@ -69,34 +87,34 @@
                 <span v-else>0</span>
                 浜�
               </span>
-            </span>
+            </span> -->
           </div>
-          <div class="gongx" v-if="taskData.AllProcedures">
-          <el-steps :active="taskData.CurrentProcedureIndex?taskData.CurrentProcedureIndex:0" finish-status="success" simple>
-            <el-step :title="item" v-for="(item,index) in taskData.AllProcedures" :key="index"></el-step>
+          <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="small_title">鍔犲伐鏁�</div>
                 <div class="content_leftBttom">
                   <dl>
                     <dd
-                      style="font-size: 26px; font-weight: 600"
+                      style="font-size: 35px; font-weight: 600"
                       class="color_green"
                     >
-                      {{ taskData.finishNumber }}{{ taskData.Order.unit }}
+                      {{ taskData.finishNumber || 0 }}{{ taskData.Order.unit }}
                     </dd>
                   </dl>
                 </div>
               </div>
               <div class="content-top">
-                <div class="small_title">姝e搧鐢熶骇</div>
+                <div class="small_title">鐩爣鏁�</div>
                 <div class="content_leftBttom">
                   <dl>
                     <dd
-                      style="font-size: 26px; font-weight: 600"
+                      style="font-size: 35px; font-weight: 600"
                       class="color_green"
                     >
                       {{ taskData.Order.amount || 0 }}{{ taskData.Order.unit }}
@@ -106,51 +124,53 @@
               </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) || "" }}
+                <el-descriptions-item label="璁″垝鏃堕棿"
+                  >{{ 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
-                          )
-                        : 0
+                        )>100?100:parseInt(
+                            (taskData.finishNumber / taskData.Order.amount) *
+                              100
+                        ): 0
                     "
                   ></el-progress>
                 </el-descriptions-item>
@@ -191,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>
@@ -213,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 || "" }}
@@ -235,21 +271,30 @@
                   v-for="(item, index) in taskData.procedureList"
                 >
                   <div
-                    class="card"
                     :key="index2"
                     v-for="(list, index2) in item"
                   >
-                    <template v-if="list.name == '宸ュ簭'">
+                    <div
+                      class="card"
+                      v-if="list.name == '宸ュ簭'">
                       <div class="card_content">
-                        <div class="card_contentLeft color_blue">
-                          {{ 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) *
@@ -260,8 +305,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"
@@ -271,7 +316,11 @@
                                     (taskData.finishNumber /
                                       taskData.Order.amount) *
                                       100
-                                  )
+                                )>100?100:parseInt(
+                                    (taskData.finishNumber /
+                                      taskData.Order.amount) *
+                                      100
+                                )
                                 : 0
                             "
                             :show-text="false"
@@ -280,29 +329,39 @@
                       </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="card_top-4">
-                        <div>宸ヨ壓缂栧彿锛歿{ list.number }}</div>
-                        <!-- <div
-                          style="
-                            font-size: 14px;
-                            color: #cfcfcf;
-                            line-height: 20px;
-                          "
+                    </div>
+                    <div v-else class="process-params">
+                      <div class="process-params-title">
+                        <el-popover
+                          width="200"
+                          :content="list.number"
+                          placement="top-start"
+                          trigger="click"
                         >
-                          宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
-                        </div> -->
+                          <span slot="reference">宸ヨ壓缂栧彿锛歿{ list.number }}</span>
+                        </el-popover>
+
                       </div>
-                    </template>
+                      <div class="process-params-value">
+                        <!-- 宸ヨ壓鍙傛暟-->
+                        {{mergeProcessParams(taskData.Arr)}}
+                      </div>
+
+                      <!-- <div
+                        style="
+                          font-size: 14px;
+                          color: #cfcfcf;
+                          line-height: 20px;
+                        "
+                      >
+                        宸ヨ壓鐨勫叿浣撲俊鎭鐐瑰嚮鎺у埗鏌ョ湅锛�
+                      </div> -->
+                    </div>
                   </div>
                 </el-carousel-item>
               </el-carousel>
@@ -310,16 +369,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
@@ -327,6 +388,7 @@
                     <el-button
                       type="primary"
                       size="mini"
+                      class="color_f70f83"
                       @click="finishClick(index, taskData)"
                     >
                       纭畾</el-button
@@ -334,9 +396,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>
@@ -363,57 +426,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">
@@ -433,9 +490,26 @@
         </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">
@@ -464,9 +538,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%;
@@ -481,7 +558,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"
@@ -491,8 +568,8 @@
         </div>
       </div>
     </template>
-    <!-- v-else -->
-    <template>
+    <!--  -->
+    <!-- <template v-else>
       <div class="home-img-box">
         <div class="bg-title">
           <img src="../../public/bg-title.png" />
@@ -522,16 +599,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>
@@ -545,20 +627,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, //鍚堟牸鐜�
@@ -568,6 +656,7 @@
       // 鍙充晶瀹屾垚
       finishShow:{},
       workers:[],
+      TasksCopy:[],
       Tasks: [
         {
           Order: {
@@ -653,10 +742,37 @@
       countDownHour: 0,
       countDownMinute: 0,
       Arr: [],
+      ArrError:'',
       // 璁板綍瀹氭椂鍣ㄧ姸鎬�
-      procInfoTimer: [null, null],
+      procInfoTimer: null,
       cutdownTimer: null,
       TaskCount:0,
+      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() {
@@ -672,22 +788,66 @@
       this.getDate2();
     }, 5000);
     this.getTaskInfo();
+    this.getTaskCountStatistics()
+  },
+  beforeDestroy() {
+    clearTimeout(this.pollingTaskCountTimer)
+  },
+  watch:{
+    // isFinsh(){
+    //   if(this.isFinsh==this.Tasks.length){
+    //     this.getStartArr()
+    //   }
+    // }
   },
   methods: {
+    mergeProcessParams(params){
+      if (params?.length){
+        return params.map(ele=> `${ele.Key}: ${ele.Value}`).join(' ')
+      }else{
+        return ''
+      }
+    },
     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){
+      this.isTipShow=val
     },
     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) => {
@@ -701,9 +861,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)) {
@@ -737,7 +902,17 @@
     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 "";
+      }
+    },
+    // 鏍煎紡鍖栨椂闂� ==> 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;
       } else {
         return "";
@@ -751,16 +926,39 @@
       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 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;
@@ -781,103 +979,154 @@
             }
           }
         }
-        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) => {
-        if (res.code == 200) {
+      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: "宸ヨ壓",
                   });
-                  if (i == 0) {
-                    this.Arr = res.data.Params ? res.data.Params : [];
-                    this.taskData=this.Tasks[i]
-                  }
+                  this.TasksCopy[i].Arr=res.data.Params ? res.data.Params : []
+                  // this.isFinsh=Number(i)+1
                 }
               });
-              this.getProgressInfo(i);
-              if (!this.procInfoTimer[i]) {
-                this.procInfoTimer[i] = setInterval(() => {
-                  this.getProgressInfo(i);
-                }, 6000);
-              }
             }
             this.setInterCard("inputMaterials", "cardBox1&" + i, i);
             this.setInterCard("outputMaterials", "cardBox3&" + i, i);
           }
-        }
-        if (res.code != 200 || this.Tasks.length == 0) {
-          this.getcountdown();
-          // 鎺у埗閲嶆柊璇锋眰getTaskInfo, 鍙紑鍚竴涓畾鏃跺櫒
-          if (!this.cutdownTimer) {
-            this.cutdownTimer = setInterval(() => {
-              this.getcountdown();
-            }, 60000);
+          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(val?val:1)
       });
+      // this.TasksCopy.push(this.object)
+      // this.TasksCopy.push(this.object)
     },
-    getProgressInfo(i) {
-      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;
+    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 (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.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() {
@@ -892,7 +1141,12 @@
     // 鍙充晶鎺у埗
     controlClick() {
       if (this.Tasks.length > 0) {
-        this.$refs.control.islook = true;
+        for(let i in this.Tasks){
+          if(this.Tasks[i].Procedure.Status==1){
+            this.$refs.control.islook = true;
+            break;
+          }
+        }
       } else {
         this.$message.error("褰撳墠璁惧娌℃湁宸ュ簭锛�");
       }
@@ -903,7 +1157,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("鎿嶄綔鎴愬姛锛�");
           }
         });
@@ -922,22 +1176,55 @@
 </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: 100%;
+  height: calc(100% - 100px);
   .statelist {
     height: 50px;
   }
+  .small_title {
+    margin-bottom: 20px;
+  }
   .content {
-    height: 240px;
+    height: 300px;
   }
   .bottom {
-    height: calc(100% - 500px - 30px);
+    height: calc(100% - 470px);
+  }
+  .font_size_20px{
+    font-size:20px!important;
   }
 }
 .active-two {
   width: calc(50% - 10px);
-  height: 100%;
+  height: calc(100% - 100px);
   float: left;
   padding-left: 10px;
   &:nth-of-type(1) {
@@ -946,38 +1233,72 @@
     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: 370px;
+    height: 430px;
 
     .content-top {
-      height: calc(50% - 60px) !important;
-      padding-top: 50px !important;
+      height: calc(50% - 30px) !important;
+      padding-top: 20px !important;
     }
     .el-descriptions__body {
       font-size: 16px !important;
     }
   }
   .bottom {
-    height: calc(100% - 630px - 50px);
+    height: calc(100% - 610px);
   }
   .bottom_list .bottom-title {
-    font-size: 18px;
+    font-size: 16px;
   }
+}
+.gong-date{
+ width:100%;
+ height:20px;
+ line-height:20px;
+ margin-bottom:10px;
+ font-size:16px;
 }
 .gongx{
   width:100%;
-  height:30px;
-  margin-bottom:10px;
-   .el-steps--simple{
-    background:transparent;
-    padding:5px 10px;
+  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;
@@ -1068,7 +1389,12 @@
   font-size: 30px;
   font-weight: 700;
 }
-
+.color_666{
+  color:#666!important;
+}
+.color_fff{
+  color:#fff!important;
+}
 .color_4efefa {
   color: #4efefa;
 }
@@ -1095,16 +1421,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;
@@ -1145,18 +1471,31 @@
   }
   .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;
+    }
+  }
+  .bottom-box-btn{
+    width:calc(100% - 20px);
+    position:absolute;
+    bottom:10px;
+    left:10px;
+    .el-button{
+      height: 40px;
+
+    }
   }
 }
 
 .small_title {
-  font-size: 24px;
-  margin-bottom: 10px;
+  font-size: 20px;
 }
 .right-small-btn {
-  margin-top: 10px;
   width: calc(100% - 20px);
   margin: 0 auto;
   position: absolute;
@@ -1182,6 +1521,15 @@
       border: 0;
     }
   }
+  .huise{
+    width: 46%;
+    float: right;
+  }
+  .huise.el-button--primary {
+      background: #CCE8E8;
+      color: #AAAAAA;
+      border: 0;
+    }
 }
 .home {
   width: 100%;
@@ -1200,22 +1548,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 20px;
+      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;
@@ -1229,7 +1582,7 @@
     }
     .content {
       width: 100%;
-      margin: 0px 0px 30px;
+      margin: 0px 0px 20px;
       overflow: hidden;
       .content_left {
         width: 24%;
@@ -1238,8 +1591,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;
@@ -1271,6 +1624,9 @@
         background: rgb(22 72 173);
         border-radius: 6px;
         // background: #233b9e;
+        .el-descriptions-row{
+          height:45px;
+        }
         .el-descriptions__body {
           background: transparent;
           font-size: 18px;
@@ -1307,18 +1663,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;
@@ -1352,7 +1721,7 @@
           }
         }
 
-        .card_top,
+        .card_top,.card-top-input-out-l,
         .card_top-4 {
           width: 50%;
           height: 45px;
@@ -1361,10 +1730,8 @@
           color: #fff;
           font-size: 12px;
           line-height: 45px;
-          float: left;
-
           > div {
-            margin-left: 12px;
+            padding-left: 12px;
             position: relative;
             p {
               position: absolute;
@@ -1374,15 +1741,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;
@@ -1409,6 +1793,7 @@
             border-radius: 5px 5px 0 0;
             background: rgb(19, 35, 90);
           }
+
 
           .card_contentRight {
             width: 100%;
@@ -1467,9 +1852,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;
@@ -1494,15 +1889,16 @@
       }
     }
     .right_dutyLst {
-      width: calc(100% - 20px);
+      width: calc(106% - 20px);
       // height: 270px;
-      height: 310px;
+      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;
@@ -1514,7 +1910,7 @@
       }
       .right-person-box {
         width: 100%;
-        height: calc(100% - 40px);
+        height: calc(100% - 60px);
         overflow: auto;
         margin-top: -10px;
       }
@@ -1544,14 +1940,14 @@
     }
     .right_base {
       width: 100%;
-      height: calc(100% - 520px);
+      height: calc(100% - 580px);
       min-height: 200px;
       // overflow-y:auto;
       position: relative;
       .right-base-btn {
         width: 100%;
         position: absolute;
-        bottom: 0;
+        bottom: 24px;
         left: 0;
         .el-button--primary {
           width: 100%;
@@ -1561,6 +1957,10 @@
           color: #fff;
           font-weight: 700;
           font-size: 18px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
       }
       // .call {
@@ -1586,4 +1986,23 @@
   font-weight: 700 !important;
   font-size: 16px;
 }
+.process-params{
+  margin-top: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  color: #fff;
+  font-size: 12px;
+  &-title{
+    height: 25px;
+    padding: 0 5px;
+    background-color: #13235a;
+    line-height: 25px;
+  }
+  &-value{
+    background-color: #6b83ff;
+    min-height: 45px;
+    box-sizing: border-box;
+    padding: 12px;
+  }
+}
 </style>

--
Gitblit v1.8.0