From ef9633e0d1689fd8869170f3aa0af6c90c2e5e7f Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 07 九月 2022 16:18:24 +0800
Subject: [PATCH] 1.优化项目2.搜索栏多行的变为一行可展开

---
 src/views/kb/zhkb.vue | 1126 ++++++++++++++++++----------------------------------------
 1 files changed, 350 insertions(+), 776 deletions(-)

diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index b758dd0..c754437 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -10,353 +10,97 @@
           <span>{{ headTime }}</span>
         </div>
       </div>
-
+      <MarqueeTips
+        :content="MarqueeTipsContent"
+        class="MarqueeTipsContentClass"
+        :speed="speed"
+      />
       <div class="kb_content">
         <div class="kb_left">
           <!-- 1-->
-          <div class="kb_left_top_title01">
+          <div class="kb_left_top_title01 kb_title_text">
             <!--            <div class="PG01" />-->
             <!--            <svg-icon icon-class="sccx" />-->
-            鐢熶骇浜х嚎锛�
+            浜х嚎鍔犲伐涓换鍔�
           </div>
 
           <div class="kb_left_top kb_pd10">
-            <!--            {{ lineContent01 }}-->
-
-            <div class="kb_left_top_block">
-              <div class="kb_block01 kb_pd10">
-                <div>
-                  <div>浜х嚎鍚嶇О:{{ lineContent01.linename }}</div>
-                  <div class="kb_mt10">浜х嚎鎬婚噺:{{ lineContent01.children!==undefined?lineContent01.lineworkcont:'' }}</div>
-                </div>
-                <div>
-                  <!--                  <div>{{ lineContent01.linename }}</div>-->
-                  <!--                  <div v-if="lineContent01.children!==undefined" class="kb_mt10">{{ lineContent01.lineworkcont }}</div>-->
-                </div>
-              </div>
-              <div class="kb_block02 kb_pd10">
-                <div>
-                  <div>閿�鍞崟鍙�:{{ lineContent01.children!==undefined?lineContent01.children.saleordercode:'' }}</div>
-                  <div class="kb_mt5">鍔犲伐鍗曞彿:{{ lineContent01.children!==undefined?lineContent01.children.workcode:'' }}</div>
-                  <div class="kb_mt5">浜у搧鍚嶇О:{{ lineContent01.children!==undefined?lineContent01.children.partname:'' }}</div>
-                  <div class="kb_mt5">浠诲姟鏁伴噺:{{ lineContent01.children!==undefined?parseFloat(lineContent01.children.qty):'' }}</div>
-                </div>
-                <div v-if="lineContent01.children!==undefined">
-                  <!--                  <div>{{ lineContent01.children.saleordercode }}</div>-->
-                  <!--                  <div class="kb_mt5 ">{{ lineContent01.children.workcode }}</div>-->
-                  <!--                  <div class="kb_mt5">{{ lineContent01.children.partname }}</div>-->
-                  <!--                  <div v-if="parseFloat(lineContent01.children.qty)!==0" class="kb_mt5">-->
-                  <!--                    {{ parseFloat(lineContent01.children.qty) }}-->
-                  <!--                  </div>-->
-                </div>
-              </div>
-              <div class="kb_block03 kb_pd10 ">
-                <div v-if="lineContent01.children!==undefined" class="flex_s_c">
-                  <div
-                    v-for="item in lineContent01.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_content flex_c_c"
-                  >
-                    <div>
-                      <div class="content01">{{ item.stepname }}</div>
+            <div class="kb_left_top02">
+              <div v-for="item in lineContent4" :key="item.workcode" class="kb_left_top_block">
+                <div class="kb_block02 kb_pd10">
+                  <div>
+                    <div>閿�鍞崟鍙�:{{ item.saleordercode }}</div>
+                    <div class="kb_mt5">
+                      鍔犲伐鍗曞彿:{{ item.workcode }}
                     </div>
-                    <div class="content02Parent">
-                      <div class="content02">
-                        <div class="content02_1 ">浠诲姟</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
-                      </div>
-                      <div class="content02">
-                        <div class="content02_1 ">鍚堟牸</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
-                      </div>
-                      <div class="content02" style="border-right: 0">
-                        <div class="content02_1 ">涓嶈壇</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
-                      </div>
+                    <div class="kb_mt5">
+                      浜у搧鍚嶇О:{{ item.partname }}
+                    </div>
+                    <div class="kb_mt5">
+                      浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
                     </div>
                   </div>
                 </div>
-                <div v-if="lineContent01.children!==undefined" class="kb_block03_02 flex_s_c">
-                  <div
-                    v-for="item in lineContent01.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_02_content flex_c_c"
-                  >
-                    <div class="flex_c_c content01">
-                      <div
-                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: red;"
-                      />
-                      <div
-                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: rgb(255 255 255)"
-                      />
-                      <div
-                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
-                        class="circle"
-                      />
-                      <div v-else class="circleYellow" />
+                <div class="kb_block03 kb_pd10 ">
+                  <div v-if="item.children&&item.children.length>0" class="flex_s_c">
+                    <div
+                      v-for="(it,ind) in item.children"
+                      :key="ind"
+                      class="kb_block03_content flex_c_c"
+                    >
+                      <div>
+                        <div class="content01">{{ it.stepname }}</div>
+                      </div>
+                      <div class="content02Parent">
+                        <div class="content02">
+                          <div class="content02_1 ">浠诲姟</div>
+                          <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
+                        </div>
+                        <div class="content02">
+                          <div class="content02_1 ">鍚堟牸</div>
+                          <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
+                        </div>
+                        <div class="content02" style="border-right: 0">
+                          <div class="content02_1 ">涓嶈壇</div>
+                          <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
+                  <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
+                    <div
+                      v-for="(it,ind) in item.children"
+                      :key="ind"
+                      class="kb_block03_02_content flex_c_c"
+                    >
+                      <div class="flex_c_c content01">
+                        <div
+                          v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
+                          class="circle"
+                          style="background-color: blue;"
+                        />
+                        <div
+                          v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
+                          class="circle"
+                          style="background-color: rgb(255 255 255)"
+                        />
+                        <div
+                          v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
+                          class="circle"
+                        />
+                        <div v-else class="circleYellow" />
+                      </div>
+                    </div>
+                  </div>
 
+                </div>
               </div>
             </div>
-
-            <!--            234-->
-            <div class="kb_left_top_block">
-              <div class="kb_block01 kb_pd10">
-                <div>
-                  <div>浜х嚎鍚嶇О:{{ lineContent02.linename }}</div>
-                  <div class="kb_mt10">浜х嚎鎬婚噺:{{ lineContent02.children!==undefined?lineContent02.lineworkcont:'' }}</div>
-                </div>
-                <div>
-                  <!--                  <div>{{ lineContent02.linename }}</div>-->
-                  <!--                  <div v-if="lineContent02.children!==undefined" class="kb_mt10">{{ lineContent02.lineworkcont }}</div>-->
-                </div>
-              </div>
-              <div class="kb_block02 kb_pd10">
-                <div>
-                  <div>閿�鍞崟鍙�:{{ lineContent02.children!==undefined?lineContent02.children.saleordercode:'' }}</div>
-                  <div class="kb_mt5">鍔犲伐鍗曞彿:{{ lineContent02.children!==undefined?lineContent02.children.workcode:'' }}</div>
-                  <div class="kb_mt5">浜у搧鍚嶇О:{{ lineContent02.children!==undefined?lineContent02.children.partname:'' }}</div>
-                  <div class="kb_mt5">浠诲姟鏁伴噺:{{ lineContent02.children!==undefined?parseFloat(lineContent02.children.qty):'' }}</div>
-                </div>
-                <div v-if="lineContent02.children!==undefined">
-                  <!--                  <div>{{ lineContent02.children.saleordercode }}</div>-->
-                  <!--                  <div class="kb_mt5 ">{{ lineContent02.children.workcode }}</div>-->
-                  <!--                  <div class="kb_mt5">{{ lineContent02.children.partname }}</div>-->
-                  <!--                  <div v-if="parseFloat(lineContent02.children.qty)!==0" class="kb_mt5">-->
-                  <!--                    {{ parseFloat(lineContent02.children.qty) }}-->
-                  <!--                  </div>-->
-                </div>
-              </div>
-              <div class="kb_block03 kb_pd10 ">
-                <div v-if="lineContent02.children!==undefined" class="flex_s_c">
-                  <div
-                    v-for="item in lineContent02.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_content flex_c_c"
-                  >
-                    <div>
-                      <div class="content01">{{ item.stepname }}</div>
-                    </div>
-                    <div class="content02Parent">
-                      <div class="content02">
-                        <div class="content02_1 ">浠诲姟</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
-                      </div>
-                      <div class="content02">
-                        <div class="content02_1 ">鍚堟牸</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
-                      </div>
-                      <div class="content02" style="border-right: 0">
-                        <div class="content02_1 ">涓嶈壇</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="lineContent02.children!==undefined" class="kb_block03_02 flex_s_c">
-                  <div
-                    v-for="item in lineContent02.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_02_content flex_c_c"
-                  >
-                    <div class="flex_c_c content01">
-                      <div
-                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: red;"
-                      />
-                      <div
-                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: rgb(255 255 255)"
-                      />
-                      <div
-                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
-                        class="circle"
-                      />
-                      <div v-else class="circleYellow" />
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-
-            <div class="kb_left_top_block">
-              <div class="kb_block01 kb_pd10">
-                <div>
-                  <div>浜х嚎鍚嶇О:{{ lineContent03.linename }}</div>
-                  <div class="kb_mt10">浜х嚎鎬婚噺:{{ lineContent03.children!==undefined?lineContent03.lineworkcont:'' }}</div>
-                </div>
-                <div>
-                  <!--                  <div>{{ lineContent03.linename }}</div>-->
-                  <!--                  <div v-if="lineContent03.children!==undefined" class="kb_mt10">{{ lineContent03.lineworkcont }}</div>-->
-                </div>
-              </div>
-              <div class="kb_block02 kb_pd10">
-                <div>
-                  <div>閿�鍞崟鍙�:{{ lineContent03.children!==undefined?lineContent03.children.saleordercode:'' }}</div>
-                  <div class="kb_mt5">鍔犲伐鍗曞彿:{{ lineContent03.children!==undefined?lineContent03.children.workcode:'' }}</div>
-                  <div class="kb_mt5">浜у搧鍚嶇О:{{ lineContent03.children!==undefined?lineContent03.children.partname:'' }}</div>
-                  <div class="kb_mt5">浠诲姟鏁伴噺:{{ lineContent03.children!==undefined?parseFloat(lineContent03.children.qty):'' }}</div>
-                </div>
-                <div v-if="lineContent03.children!==undefined">
-                  <!--                  <div>{{ lineContent03.children.saleordercode }}</div>-->
-                  <!--                  <div class="kb_mt5 ">{{ lineContent03.children.workcode }}</div>-->
-                  <!--                  <div class="kb_mt5">{{ lineContent03.children.partname }}</div>-->
-                  <!--                  <div v-if="parseFloat(lineContent03.children.qty)!==0" class="kb_mt5">-->
-                  <!--                    {{ parseFloat(lineContent03.children.qty) }}-->
-                  <!--                  </div>-->
-                </div>
-              </div>
-              <div class="kb_block03 kb_pd10 ">
-                <div v-if="lineContent03.children!==undefined" class="flex_s_c">
-                  <div
-                    v-for="item in lineContent03.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_content flex_c_c"
-                  >
-                    <div>
-                      <div class="content01">{{ item.stepname }}</div>
-                    </div>
-                    <div class="content02Parent">
-                      <div class="content02">
-                        <div class="content02_1 ">浠诲姟</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
-                      </div>
-                      <div class="content02">
-                        <div class="content02_1 ">鍚堟牸</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
-                      </div>
-                      <div class="content02" style="border-right: 0">
-                        <div class="content02_1 ">涓嶈壇</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="lineContent03.children!==undefined" class="kb_block03_02 flex_s_c">
-                  <div
-                    v-for="item in lineContent03.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_02_content flex_c_c"
-                  >
-                    <div class="flex_c_c content01">
-                      <div
-                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: red;"
-                      />
-                      <div
-                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: rgb(255 255 255)"
-                      />
-                      <div
-                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
-                        class="circle"
-                      />
-                      <div v-else class="circleYellow" />
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-
-            <div class="kb_left_top_block">
-              <div class="kb_block01 kb_pd10">
-                <div>
-                  <div>浜х嚎鍚嶇О:{{ lineContent04.linename }}</div>
-                  <div class="kb_mt10">浜х嚎鎬婚噺:{{ lineContent04.children!==undefined?lineContent04.lineworkcont:'' }}</div>
-                </div>
-                <div>
-                  <!--                  <div>{{ lineContent04.linename }}</div>-->
-                  <!--                  <div v-if="lineContent04.children!==undefined" class="kb_mt10">{{ lineContent04.lineworkcont }}</div>-->
-                </div>
-              </div>
-              <div class="kb_block02 kb_pd10">
-                <div>
-                  <div>閿�鍞崟鍙�:{{ lineContent04.children!==undefined?lineContent04.children.saleordercode:'' }}</div>
-                  <div class="kb_mt5">鍔犲伐鍗曞彿:{{ lineContent04.children!==undefined?lineContent04.children.workcode:'' }}</div>
-                  <div class="kb_mt5">浜у搧鍚嶇О:{{ lineContent04.children!==undefined?lineContent04.children.partname:'' }}</div>
-                  <div class="kb_mt5">浠诲姟鏁伴噺:{{ lineContent04.children!==undefined?parseFloat(lineContent04.children.qty):'' }}</div>
-                </div>
-                <div v-if="lineContent04.children!==undefined">
-                  <!--                  <div>{{ lineContent04.children.saleordercode }}</div>-->
-                  <!--                  <div class="kb_mt5 ">{{ lineContent04.children.workcode }}</div>-->
-                  <!--                  <div class="kb_mt5">{{ lineContent04.children.partname }}</div>-->
-                  <!--                  <div v-if="parseFloat(lineContent04.children.qty)!==0" class="kb_mt5">-->
-                  <!--                    {{ parseFloat(lineContent04.children.qty) }}-->
-                  <!--                  </div>-->
-                </div>
-              </div>
-              <div class="kb_block03 kb_pd10 ">
-                <div v-if="lineContent04.children!==undefined" class="flex_s_c">
-                  <div
-                    v-for="item in lineContent04.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_content flex_c_c"
-                  >
-                    <div>
-                      <div class="content01">{{ item.stepname }}</div>
-                    </div>
-                    <div class="content02Parent">
-                      <div class="content02">
-                        <div class="content02_1 ">浠诲姟</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
-                      </div>
-                      <div class="content02">
-                        <div class="content02_1 ">鍚堟牸</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
-                      </div>
-                      <div class="content02" style="border-right: 0">
-                        <div class="content02_1 ">涓嶈壇</div>
-                        <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div v-if="lineContent04.children!==undefined" class="kb_block03_02 flex_s_c">
-                  <div
-                    v-for="item in lineContent04.children.children"
-                    :key="item.stepseq"
-                    class="kb_block03_02_content flex_c_c"
-                  >
-                    <div class="flex_c_c content01">
-                      <div
-                        v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: red;"
-                      />
-                      <div
-                        v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
-                        class="circle"
-                        style="background-color: rgb(255 255 255)"
-                      />
-                      <div
-                        v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
-                        class="circle"
-                      />
-                      <div v-else class="circleYellow" />
-                    </div>
-                  </div>
-                </div>
-
-              </div>
-            </div>
-
           </div>
           <!-- 2-->
           <div class="kb_left_bottom kb_pd10">
             <div class="kb_left_bottom_content">
-              <div class="content_head">鍦ㄥ埗璁㈠崟锛�</div>
+              <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟</div>
               <div class="content_body">
                 <el-table
                   ref="tableData"
@@ -369,12 +113,12 @@
                   <el-table-column
                     prop="RowNum"
                     label="搴忓彿"
-                    width="53"
+                    width="40"
                   />
                   <el-table-column
                     prop="status"
                     label="鍔犲伐鐘舵��"
-                    width="85"
+                    width="70"
                   >
                     <template slot-scope="{row}">
                       <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
@@ -385,77 +129,87 @@
                   <el-table-column
                     prop="lm_date"
                     label="娲惧彂鏃堕棿"
-                    width="86"
+                    width="95"
                   >
                     <template slot-scope="{row}">
-                      <div>{{ row.lm_date.substring(5, 10) }}</div>
+                      <div>{{ row.lm_date.substring(0, 10) }}</div>
                     </template>
                   </el-table-column>
                   <el-table-column
                     prop="saleOrderCode"
                     label="閿�鍞鍗曞彿"
-                    width="150"
-                  />
+                    width="158"
+                  >
+                    <template slot-scope="{row}">
+                      <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
+                      <div v-else>/</div>
+                    </template>
+                  </el-table-column>
                   <el-table-column
                     prop="wo_code"
                     label="鍔犲伐鍗曞彿"
-                    width="207"
+                    width="175"
                   />
                   <el-table-column
                     prop="partname"
                     label="浜у搧鍚嶇О"
-                    width="105"
+                    width="145"
                   />
                   <el-table-column
                     prop="partspec"
                     label="瑙勬牸"
-                    width="60"
-                  />
+                    width="125"
+                  >
+                    <template slot-scope="{row}">
+                      <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
+                      <div v-else>/</div>
+                    </template>
+                  </el-table-column>
                   <el-table-column
                     prop="name"
                     label="鍗曚綅"
-                    width="60"
+                    width="50"
                   />
                   <el-table-column
                     prop="plan_qty"
                     label="浠诲姟鏁伴噺"
-                    width="90"
+                    width="70"
                   />
                   <el-table-column
                     prop="good_qty"
                     label="瀹屽伐鏁伴噺"
-                    width="90"
+                    width="70"
                   />
                   <el-table-column
                     prop="ng_qty"
                     label="涓嶈壇鏁伴噺"
-                    width="90"
+                    width="70"
                   />
                   <el-table-column
                     prop="wcl"
                     label="瀹屾垚鐜�"
-                    width="70"
+                    width="50"
                   >
                     <template slot-scope="{row}">
-                      <div>{{ parseFloat((row.good_qty / row.plan_qty).toFixed(2)) }}%</div>
+                      <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
                     </template>
                   </el-table-column>
                   <el-table-column
                     prop="planenddate"
                     label="棰勮寮�濮�"
-                    width="86"
+                    width="95"
                   >
                     <template slot-scope="{row}">
-                      <div>{{ row.planenddate.substring(5, 10) }}</div>
+                      <div>{{ row.planenddate.substring(0, 10) }}</div>
                     </template>
                   </el-table-column>
                   <el-table-column
                     prop="planstartdate"
                     label="棰勮缁撴潫"
-                    width="86"
+                    width="105"
                   >
                     <template slot-scope="{row}">
-                      <div>{{ row.planstartdate.substring(5, 10) }}</div>
+                      <div>{{ row.planstartdate.substring(0, 10) }}</div>
                     </template>
                   </el-table-column>
                 </el-table>
@@ -466,7 +220,7 @@
         <div class="kb_right kb_pd10">
           <div class="kb_right_top kb_pd10">
             <div class="kb_right_top_content">
-              <div class="content_head">褰撴棩杞﹂棿浜х嚎浜у搧鏁伴噺鎺掕锛�</div>
+              <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
               <div class="content_body">
                 <el-table
                   ref="tableDataRank"
@@ -475,7 +229,7 @@
                   style="width: 100%;"
                   :header-cell-style="headerCellStyle"
                   :cell-style="cellStyle"
-                  height="426"
+                  height="396"
                 >
                   <el-table-column
                     type="index"
@@ -484,9 +238,14 @@
                   />
                   <el-table-column
                     prop="wkshname"
-                    label="杞﹂棿"
+                    label="杞﹂棿锛堜緵鏂癸級"
                     width="120"
-                  />
+                  >
+                    <template slot-scope="{row}">
+                      <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
+                      <div v-else>/</div>
+                    </template>
+                  </el-table-column>
                   <el-table-column
                     prop="linename"
                     label="浜х嚎"
@@ -507,8 +266,8 @@
             </div>
           </div>
           <div class="kb_right_bottom kb_pd10">
-            <div class="kb_right_bottom_content_title">
-              涓�鍛ㄥ唴Top5涓嶈壇锛�
+            <div class="kb_right_bottom_content_title kb_title_text">
+              涓�鍛ㄤ笉鑹疶op5
             </div>
             <div class="kb_right_bottom_content">
               <div id="bar02" style="width: 100%;height:100%" />
@@ -527,79 +286,32 @@
   LineSearchBottomLeftData,
   LineSearchBottomRightData,
   LineSearchTopLeftData,
-  LineSearchTopRightData,
-  ShopSearchLine
+  LineSearchTopRightData, ShopSearch,
+  ShopSearchLine, WkspReportNotice
 } from '@/api/dzkb'
+import MarqueeTips from 'vue-marquee-tips'
 
 export default {
   name: 'Index2',
+  components: {
+    MarqueeTips
+  },
   data() {
     return {
       headTime: '',
 
-      lineArr: [],
-      // lineContent01: {},
-      lineContent01: {
-        linename: '',
-        lineworkcont: '',
-        children: undefined
-      },
-      lineContent02: {
-        linename: '',
-        lineworkcont: '',
-        children: undefined
-      },
-      lineContent03: {
-        linename: '',
-        lineworkcont: '',
-        children: undefined
-      },
-      lineContent04: {
-        linename: '',
-        lineworkcont: '',
-        children: undefined
-        // children: {
-        //   workcode: '',
-        //   partname: '',
-        //   qty: 0,
-        //   saleordercode: '',
-        //   children: [
-        //     {
-        //       stepseq: '',
-        //       stepname: '',
-        //       planqty: 0,
-        //       goodqty: '',
-        //       ngqty: ''
-        //     }
-        //   ]
-        // }
-      },
+      lineContent: [],
+      lineContent4: [],
 
       leftTopData: [],
       tableData: [],
-      tableDataRank: [// 鎺掕
-        // { xh: 'NO.1', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.2', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.3', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.4', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.5', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.6', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.7', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.9', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.10', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.11', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.12', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.13', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.14', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.15', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.16', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.17', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.18', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.19', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
-        // { xh: 'NO.20', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
-        //
-      ]
+      tableDataRank: [],
+      lineCodeArr: [],
+
+      ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
+
+      MarqueeTipsContent: '', // 鍏憡
+      speed: 100// 鍏憡鎾斁鐨勯�熷害
 
     }
   },
@@ -612,221 +324,148 @@
   },
   methods: {
     async getValue() {
+      await this.getShopSearch()
       await this.getShopSearchLine()
-      await this.getLineSearchTopLeftData()
 
-      this.getEcharts()
-      this.getTableDataRoll()
-      this.getTableDataRankRoll()
+      await this.getEcharts()
+      await this.getTableDataRoll()
+      await this.getTableDataRankRoll()
+      await this.getMarqueeTipsContent()
+      await this.getMarqueeTipsContent()
     },
-    // 鐢熶骇浜х嚎
-    async getShopSearchLine() {
-      const { data: res } = await ShopSearchLine({ shopcode: 'CJ001' })
-      this.lineArr = res
-    },
+    // 鑾峰彇鍏憡
+    getMarqueeTipsContent() {
+      WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
+        let contentAll = ''
+        res.data.forEach(item => {
+          contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
+        })
+        this.MarqueeTipsContent = contentAll
+        this.speed = this.MarqueeTipsContent.length / 10
 
-    getLineSearchTopLeftData() {
-      this.lineArr.forEach((item, index) => {
-        // if (index === 0) {
-        this.handleEveryLine(item, index)
-        // }
+        setInterval(() => {
+          WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
+            let contentAll = ''
+            res1.data.forEach(item => {
+              contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
+            })
+            this.MarqueeTipsContent = contentAll
+            this.speed = this.MarqueeTipsContent.length / 10
+          })
+        }, this.speed * 1000)
       })
     },
-    // 澶勭悊姣忎竴鏉′骇绾�
-    async handleEveryLine(item, index) {
-      const { data: res } = await LineSearchTopLeftData([item])
-      console.log(res, 8999)
-      let flag1 = true
-      let flag2 = true
-      let flag3 = true
-      let flag4 = true
-      if (index === 0) {
-        let count = 0
-        if (flag1) {
-          this.lineContent01 = {
-            linename: res[0].linename,
-            lineworkcont: res[0].lineworkcont,
-            children: res[0].children[count]
-          }
-          flag1 = false
-        }
-
-        setInterval(() => {
-          if (count > 0) {
-            this.lineContent01 = {
-              linename: res[0].linename,
-              lineworkcont: res[0].lineworkcont,
-              children: res[0].children[count]
-            }
-          }
-          // count++
-          if (res[0].children.length === count++) {
-            count = 0
-            LineSearchTopLeftData([item]).then(res => {
-              this.lineContent01 = {
-                linename: res.data[0].linename,
-                lineworkcont: res.data[0].lineworkcont,
-                children: res.data[0].children[count]
-              }
-            })
-
-            // this.handleEveryLine(item, index)
-          }
-        }, 1000 * 6)
-      } else if (index === 1) {
-        let count = 0
-        if (flag2) {
-          this.lineContent02 = {
-            linename: res[0].linename,
-            lineworkcont: res[0].lineworkcont,
-            children: res[0].children[count]
-          }
-          flag2 = false
-        }
-
-        setInterval(() => {
-          if (count > 0) {
-            this.lineContent02 = {
-              linename: res[0].linename,
-              lineworkcont: res[0].lineworkcont,
-              children: res[0].children[count]
-            }
-          }
-
-          // count++
-          console.log(this.lineContent02, 123)
-          if (res[0].children.length === count++) {
-            count = 0
-            LineSearchTopLeftData([item]).then(res => {
-              this.lineContent02 = {
-                linename: res.data[0].linename,
-                lineworkcont: res.data[0].lineworkcont,
-                children: res.data[0].children[count]
-              }
-            })
-
-            // this.handleEveryLine(item, index)
-          }
-        }, 1000 * 6)
-      } else if (index === 2) {
-        let count = 0
-        if (flag3) {
-          this.lineContent03 = {
-            linename: res[0].linename,
-            lineworkcont: res[0].lineworkcont,
-            children: res[0].children[count]
-          }
-          flag3 = false
-        }
-
-        setInterval(() => {
-          if (count > 0) {
-            this.lineContent03 = {
-              linename: res[0].linename,
-              lineworkcont: res[0].lineworkcont,
-              children: res[0].children[count]
-            }
-          }
-          // count++
-          if (res[0].children.length === count++) {
-            count = 0
-            LineSearchTopLeftData([item]).then(res => {
-              this.lineContent03 = {
-                linename: res.data[0].linename,
-                lineworkcont: res.data[0].lineworkcont,
-                children: res.data[0].children[count]
-              }
-            })
-            // this.handleEveryLine(item, index)
-          }
-        }, 1000 * 6)
-      } else if (index === 3) {
-        let count = 0
-        if (flag4) {
-          this.lineContent04 = {
-            linename: res[0].linename,
-            lineworkcont: res[0].lineworkcont,
-            children: res[0].children[count]
-          }
-          flag4 = false
-        }
-
-        setInterval(() => {
-          if (count > 0) {
-            this.lineContent04 = {
-              linename: res[0].linename,
-              lineworkcont: res[0].lineworkcont,
-              children: res[0].children[count]
-            }
-          }
-          // count++
-          if (res[0].children.length === count++) {
-            count = 0
-            LineSearchTopLeftData([item]).then(res => {
-              this.lineContent04 = {
-                linename: res.data[0].linename,
-                lineworkcont: res.data[0].lineworkcont,
-                children: res.data[0].children[count]
-              }
-            })
-            // this.handleEveryLine(item, index)
-          }
-        }, 1000 * 6)
+    // 鑾峰彇杞﹂棿缂栫爜
+    async  getShopSearch() {
+      const res1 = await ShopSearch()
+      if (res1.code === '200') {
+        this.ShopArr = []
+        res1.data.forEach(item => {
+          this.ShopArr.push(item.org_code)
+        })
       }
+      setInterval(() => {
+        ShopSearch().then(res1 => {
+          if (res1.code === '200') {
+            this.ShopArr = []
+            res1.data.forEach(item => {
+              this.ShopArr.push(item.org_code)
+            })
+          }
+        })
+      }, 1000 * 30)
+    },
+    // 浜х嚎鍔犲伐涓换鍔�
+    getShopSearchLine() {
+      let length, count
+      LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+        this.lineContent = res.data
+        length = this.lineContent.length
+        count = Math.ceil(length / 4) // 闇�瑕佽疆鎾殑缁勬暟   4涓负涓�缁�
+        this.lineContent4 = this.lineContent.slice(0, 4)
+      })
+
+      let start = 0
+      const task = setInterval(() => {
+        if (Math.floor(start / 4) === count && count !== 0) {
+          start = 0
+          LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+            this.lineContent = res.data
+            length = this.lineContent.length
+            count = Math.ceil(length / 4) // 闇�瑕佽疆鎾殑缁勬暟   4涓负涓�缁�
+            this.lineContent4 = this.lineContent.slice(0, 4)
+          })
+        } else if (count === 0) {
+          clearInterval(task)
+          this.getShopSearchLine()
+        }
+        this.lineContent4 = this.lineContent.slice(start, start + 4)
+        start = start + 4
+      }, 1000 * 3)
     },
 
-    // 鍦ㄥ埗璁㈠崟table
+    // 浜х嚎鍔犲伐浠诲姟
     getTableDataRoll() {
-      LineSearchBottomLeftData().then(res => {
+      LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
         this.tableData = res.data
+
+        const divData = this.$refs.tableData.bodyWrapper
+        // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+        const task = setInterval(() => {
+          // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+          divData.scrollTop += 1
+          // divData.scrollTop += divData.scrollHeight / this.tableData.length
+          // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+            // 閲嶇疆table璺濈椤堕儴璺濈
+            divData.scrollTop = 0
+            LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+              this.tableData = res.data
+              if (this.tableData.length > 10) {
+                clearInterval(task)
+                this.getTableDataRoll()
+              }
+            })
+          }
+        }, this.tableData.length <= 10 ? 1000 * 3 : 100)
       })
-      const divData = this.$refs.tableData.bodyWrapper
-      // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
-      setInterval(() => {
-        // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
-        divData.scrollTop += 1
-        // divData.scrollTop += divData.scrollHeight / this.tableData.length
-        // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
-        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
-          // 閲嶇疆table璺濈椤堕儴璺濈
-          divData.scrollTop = 0
-          LineSearchBottomLeftData().then(res => {
-            this.tableData = res.data
-          })
-        }
-      }, this.tableData.length <= 10 ? 1000 * 6 : 100)
     },
-    // 浜х嚎浜у搧鏁伴噺鎺掕婊氬姩鏁堟灉
+    // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
     getTableDataRankRoll() {
-      LineSearchTopRightData().then(res => {
+      LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
         this.tableDataRank = res.data
+
+        const divData = this.$refs.tableDataRank.bodyWrapper
+        // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+        const task = setInterval(() => {
+          // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+          // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
+          divData.scrollTop += 1
+          // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+          if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+            // 閲嶇疆table璺濈椤堕儴璺濈
+            divData.scrollTop = 0
+            LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
+              this.tableDataRank = res.data
+
+              if (this.tableDataRank.length > 9) {
+                clearInterval(task)
+                this.getTableDataRankRoll()
+              }
+            })
+          }
+        }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
       })
-      console.log(this.tableDataRank.length, 88)
-      const divData = this.$refs.tableDataRank.bodyWrapper
-      // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
-      setInterval(() => {
-        // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
-        // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
-        divData.scrollTop += 1
-        // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
-        if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
-          // 閲嶇疆table璺濈椤堕儴璺濈
-          divData.scrollTop = 0
-          LineSearchTopRightData().then(res => {
-            this.tableDataRank = res.data
-          })
-        }
-      }, this.tableDataRank.length <= 10 ? 1000 * 6 : 100)
     },
     // 鑾峰彇echarts
     getEcharts() {
-      LineSearchBottomRightData().then(res => {
-        loadEcharts('bar02', bar02(res.data))
+      LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
+        loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
       })
 
       setInterval(() => {
-        LineSearchBottomRightData().then(res => {
-          loadEcharts('bar02', bar02(res.data))
+        LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
+          loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
         })
       }, 1000 * 15)
     },
@@ -871,17 +510,14 @@
 </script>
 
 <style scoped lang="scss">
-//$kbBorderColor: #3A0088;
-$kbBorderColor: #09d8f2;
-$kbBackgroundColor: rgba(30, 33, 46,0.6);
+$kbBorderColor: rgba(9, 216, 242, 0.4);
+$kbBackgroundColor: rgba(30, 33, 46, 0.6);
 .kb_content {
   display: flex;
   position: relative;
   height: 990px;
   width: 100%;
-  //background-color: #000;
   letter-spacing: 2px;
-  //color: #d8d7d9;
   color: #fff;
 
   .kb_left {
@@ -891,10 +527,11 @@
 
     .kb_left_top_title01 {
       position: absolute;
-      top: 10px;
+      top: 40px;
       left: 15px;
       font-size: 18px;
       display: flex;
+      color: #00ffff;
 
       .PG01 {
         background: url("../../assets/images/GP_1.png") no-repeat;
@@ -910,118 +547,112 @@
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      padding-top: 30px;
-
-      .kb_left_top_block {
-        margin-top: 10px;
-        width: 100%;
-        height: 100px;
+      padding-top: 70px;
+      .kb_left_top02 {
         display: flex;
-        border-radius: 5px;
-        font-size: 14px;
-        //border: 1px solid rgba(255, 255, 255, 0.6);
-        border: 1px solid $kbBorderColor;
+        flex-direction: column;
         justify-content: flex-start;
+        border: 1px solid $kbBorderColor;
+        height: 400px;
+        border-radius: 5px;
+        background-color: $kbBackgroundColor;
 
-        .kb_block01 {
-          width: 171px;
+        .kb_left_top_block {
+          width: 100%;
+          height: 100px;
           display: flex;
-          align-items: center;
-          border-right: 1px solid $kbBorderColor;
-          background-color: $kbBackgroundColor;
-          border-bottom-left-radius: 5px;
-          border-top-left-radius: 5px;
+          font-size: 14px;
+          border-bottom: 1px solid $kbBorderColor;
+          justify-content: flex-start;
 
-        }
+          .kb_block02 {
+            width: 304px;
+            display: flex;
+            align-items: center;
+            border-right: 1px solid $kbBorderColor;
+          }
 
-        .kb_block02 {
-          width: 304px;
-          display: flex;
-          align-items: center;
-          border-right: 1px solid $kbBorderColor;
-          background-color:$kbBackgroundColor;
-        }
+          .kb_block03 {
+            width: 1020px;
 
-        .kb_block03 {
-          width: 843px;
-          display: flex;
-          flex-direction: column;
-          font-size: 12px;
-          background-color: $kbBackgroundColor;
-          border-radius: 5px;
-
-          .kb_block03_content {
-            border: 1px solid $kbBorderColor;
-            width: 152px;
-            height: 50px;
-            margin-right: 15px;
-            //margin-right: 20px;
             display: flex;
             flex-direction: column;
+            font-size: 12px;
+            border-radius: 5px;
 
-            .content01 {
-              //width: 50px;
-              width: 100%;
-              height: 20px;
-              border-bottom: 1px solid $kbBorderColor;
+            .kb_block03_content {
+              border: 1px solid $kbBorderColor;
+              width: 180px;
+              height: 50px;
+              margin-right: 15px;
               display: flex;
-              align-items: center;
-              justify-content: center;
-            }
+              flex-direction: column;
 
-            .content02Parent {
-              display: flex;
-
-              .content02 {
-                width: 50px;
-                border-right: 1px solid $kbBorderColor;
-
-                .content02_1 {
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  height: 50%;
-                }
-
-                .content02_2 {
-                  height: 50%;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                }
-
-                .borderTop {
-                  border-top: 1px solid $kbBorderColor;
-                }
+              .content01 {
+                width: 100%;
+                height: 18px;
+                border-bottom: 1px solid $kbBorderColor;
+                display: flex;
+                align-items: center;
+                justify-content: center;
               }
-            }
 
-          }
-        }
+              .content02Parent {
+                display: flex;
+                .content02 {
+                  width: 60px;
+                  border-right: 1px solid $kbBorderColor;
 
-        .kb_block03_02 {
-          margin-top: 7px;
-          display: flex;
+                  .content02_1 {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 50%;
+                  }
 
-          .kb_block03_02_content {
-            width: 152px;
-            margin-right: 15px;
+                  .content02_2 {
+                    height: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                  }
 
-            .content01 {
-              .circle {
-                width: 26px;
-                height: 26px;
-                background-color: #00ff8b;
-                border-radius: 50%;
+                  .borderTop {
+                    border-top: 1px solid $kbBorderColor;
+                  }
+                }
               }
 
             }
-
           }
+
+          .kb_block03_02 {
+            margin-top: 7px;
+            display: flex;
+
+            .kb_block03_02_content {
+              width: 180px;
+              margin-right: 15px;
+
+              .content01 {
+                .circle {
+                  width: 26px;
+                  height: 26px;
+                  background-color: #00ff8b;
+                  border-radius: 50%;
+                }
+
+              }
+
+            }
+          }
+
         }
 
+        .kb_left_top_block:nth-child(4n) {
+          border-bottom: none !important;
+        }
       }
-
     }
 
     .kb_left_bottom {
@@ -1031,22 +662,14 @@
         height: 460px;
         display: flex;
         flex-direction: column;
-        //border: 1px solid $kbBorderColor;
 
         .content_head {
-          ////font-size: 26px;
-          //font-size: 18px;
-          //height: 55px;
-          //line-height: 55px;
-          ////border-bottom: 1px solid $kbBorderColor;
-          ////text-align: center;
-          //padding-left: 10px;
-
           font-size: 18px;
           line-height: 20px;
-          //padding-left: 10px;
           margin-bottom: 10px;
           margin-top: -10px;
+          color: #00ffff;
+
         }
 
         .content_body {
@@ -1061,45 +684,47 @@
     height: 100%;
 
     .kb_right_top {
+      margin-top: 30px;
+      margin-bottom: -30px;
       height: 476px;
       width: 100%;
 
       .kb_right_top_content {
-        //border: 1px solid $kbBorderColor;
-        height: 460px;
+        height: 430px;
         display: flex;
         flex-direction: column;
 
         .content_head {
           font-size: 18px;
           line-height: 20px;
-          //padding-left: 10px;
           margin-bottom: 10px;
           margin-top: -10px;
+          color: #00ffff;
         }
 
         .content_body {
           border: 1px solid $kbBorderColor;
-          //border-radius: 5px;
         }
       }
     }
 
     .kb_right_bottom {
-      height: 481px;
+      height: 482px;
       margin-top: 8px;
-      .kb_right_bottom_content_title{
-      font-size: 18px;
+
+      .kb_right_bottom_content_title {
+        color: #00ffff;
+        font-size: 18px;
         margin-bottom: 10px;
         margin-top: -10px;
       }
+
       .kb_right_bottom_content {
         border: 1px solid $kbBorderColor;
-        height: 440px;
+        height: 441px;
         width: 100%;
         border-radius: 5px;
-        background-color:$kbBackgroundColor;
-        //height: 100%;
+        background-color: $kbBackgroundColor;
       }
     }
   }
@@ -1110,7 +735,6 @@
 }
 
 ::v-deep .el-table__body-wrapper {
-  //background-color: #044563;
   background-color: rgba(30, 33, 46);
 }
 
@@ -1119,64 +743,14 @@
   width: 0;
 }
 
-//
-///* 瀹氫箟keyframes鍔ㄧ敾锛屽懡鍚嶄负blink*/
-//@keyframes blink {
-//  0% {
-//    opacity: 1
-//  }
-//  100% {
-//    opacity: 0
-//  }
-//}
-//
-///*娣诲姞鍏煎鎬у墠缂�*/
-//@-webkit-keyframes blink {
-//  0% {
-//    opacity: 1
-//  }
-//  100% {
-//    opacity: 0
-//  }
-//}
-//
-//@-o-keyframes blink {
-//  0% {
-//    opacity: 1
-//  }
-//  100% {
-//    opacity: 0
-//  }
-//}
-//
-//@-moz-keyframes blink {
-//  0% {
-//    opacity: 1
-//  }
-//  100% {
-//    opacity: 0
-//  }
-//}
-//
-//@-ms-keyframes blink {
-//  0% {
-//    opacity: 1
-//  }
-//  100% {
-//    opacity: 0
-//  }
-//}
-//
+::v-deep .cell {
+  padding: 0 !important;
+}
+
 .circleYellow {
   width: 26px;
   height: 26px;
   background-color: rgb(255 255 0);
   border-radius: 50%;
-
-  //animation: blink 2s linear infinite;
-  //-webkit-animation: blink 2s linear infinite;
-  //-moz-animation: blink 2s linear infinite;
-  //-ms-animation: blink 2s linear infinite;
-  //-o-animation: blink 2s linear infinite;
 }
 </style>

--
Gitblit v1.9.3