From 8c64ac1cd077f2d5b488b7f5d2009ad07ceddc71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=B2?=
 <8702040+cai-ling@user.noreply.gitee.com>
Date: Wed, 13 Nov 2024 17:25:56 +0800
Subject: [PATCH] css

---
 src/config/mork2.js            | 199 ++++++++++++++++++++++++++-------
 src/pages/modules/index2.vue   |  74 ++++++------
 src/pages/modules/style.stylus |  14 ++-
 3 files changed, 208 insertions(+), 79 deletions(-)

diff --git a/src/config/mork2.js b/src/config/mork2.js
index e3fe78a..87c0341 100644
--- a/src/config/mork2.js
+++ b/src/config/mork2.js
@@ -264,37 +264,39 @@ export const queryPickingPoint = () => {
 export const pickingInfo = () => {
     let res = [
         {
-            "qty": 100,
-            "vehicle_code": "X000010",
+            "qty": 26,
+            "vehicle_code": "Z00017",
             "create_time": null,
             "update_time": null,
             "stor_code": null,
-            "task_type": "PK20241107003",
+            "task_type": "PK20240909006",
             "material_name": "测试物料",
-            "material_code": "24999999S",
-            "assign_qty": 111,
+            "material_code": null,
+            "material_spec": "test_zz",
+            "assign_qty": 7,
             "single_weight": 15.70,
             "theory_qty": 0,
             "actual_weight": 0,
-            "remaining_qty": 100,
-            "form_data": "{\"stor_code\": \"FStockId\", \"point_code\": \"1308\", \"product_area\": \"A1\", \"vehicle_code\": \"X00007\"}",
+            "remaining_qty": 26,
+            "form_data": "{\"stor_code\": \"FStockId\", \"point_code\": \"1311\", \"product_area\": \"A1\", \"vehicle_code\": \"Z00017\"}",
             "product_area": "A1"
         },
         {
-            "qty": 300,
-            "vehicle_code": "X00007",
+            "qty": 200,
+            "vehicle_code": "X00021",
             "create_time": null,
             "update_time": null,
             "stor_code": null,
-            "task_type": "PK20241107004",
+            "task_type": "PK20241017002",
             "material_name": "测试物料",
-            "material_code": "24999999S",
-            "assign_qty": 111,
+            "material_code": null,
+            "material_spec": "test_zz",
+            "assign_qty": 4,
             "single_weight": 15.70,
             "theory_qty": 0,
             "actual_weight": 0,
-            "remaining_qty": 300,
-            "form_data": "{\"stor_code\": \"FStockId\", \"point_code\": \"1308\", \"product_area\": \"A1\", \"vehicle_code\": \"X00007\"}",
+            "remaining_qty": 200,
+            "form_data": "{\"stor_code\": \"FStockId\", \"point_code\": \"1311\", \"product_area\": \"A1\", \"vehicle_code\": \"X00021\"}",
             "product_area": "A1"
         }
     ]
@@ -305,51 +307,85 @@ export const synthesizeInfo = () => {
     let res = {
         "tp_used": {
             "total": 960,
-            "used": 1,
-            "free": 959,
-            "percent": "0.1%"
+            "used": 5,
+            "free": 955,
+            "percent": "0.52%"
         },
         "lx_out_week": [
+            {
+                "date": "11-13",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-12",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-11",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-10",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-09",
+                "total_qty": "0"
+            },
             {
                 "date": "11-08",
-                "total_qty": 2210.000
+                "total_qty": "0"
             },
             {
                 "date": "11-07",
                 "total_qty": "0"
-            },
+            }
+        ],
+        "tp_in_week": [
             {
-                "date": "11-06",
+                "date": "11-13",
                 "total_qty": "0"
             },
             {
-                "date": "11-05",
+                "date": "11-12",
                 "total_qty": "0"
             },
             {
-                "date": "11-04",
+                "date": "11-11",
                 "total_qty": "0"
             },
             {
-                "date": "11-03",
+                "date": "11-10",
                 "total_qty": "0"
             },
             {
-                "date": "11-02",
+                "date": "11-09",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-08",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-07",
                 "total_qty": "0"
             }
         ],
-        "tp_in_week": [],
         "tp_inventory": [
             {
-                "total": "0"
+                "total": 4.000
+            },
+            {
+                "qty": 4.000,
+                "name": "托盘",
+                "percent": "100.00%"
             }
         ],
         "lx_used": {
-            "total": 21424,
-            "used": 1,
-            "free": 21423,
-            "percent": "0.0%"
+            "total": 21423,
+            "used": 94,
+            "free": 21329,
+            "percent": "0.44%"
         },
         "tp_task": [
             {
@@ -363,28 +399,111 @@ export const synthesizeInfo = () => {
                 "time": "0h"
             }
         ],
-        "lx_in_week": [],
-        "tp_out_week": [],
+        "lx_in_week": [
+            {
+                "date": "11-13",
+                "total_qty": 4400.000
+            },
+            {
+                "date": "11-12",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-11",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-10",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-09",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-08",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-07",
+                "total_qty": "0"
+            }
+        ],
+        "tp_out_week": [
+            {
+                "date": "11-13",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-12",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-11",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-10",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-09",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-08",
+                "total_qty": "0"
+            },
+            {
+                "date": "11-07",
+                "total_qty": "0"
+            }
+        ],
         "lx_task": [
+            {
+                "total": 4400,
+                "box": 19,
+                "time": "0.0h"
+            },
             {
                 "total": 0,
                 "box": 0,
                 "time": "0h"
-            },
-            {
-                "total": 2210,
-                "box": 9,
-                "time": "5.0h"
             }
         ],
         "lx_inventory": [
             {
-                "total": 200.000
+                "total": 15800.000
             },
             {
-                "qty": 200.000,
+                "qty": 12000.000,
                 "name": "测试物料",
-                "percent": "100.00%"
+                "percent": "75.95%"
+            },
+            {
+                "qty": 2000.000,
+                "name": "A345度等径承插口弯头45CCL1 1/8USNA0131010TH",
+                "percent": "12.66%"
+            },
+            {
+                "qty": 1500.000,
+                "name": "A345度等径承插口弯头45CCL1 5/8USNA0131014",
+                "percent": "9.49%"
+            },
+            {
+                "qty": 300.000,
+                "name": "A345度等径承插口弯头45CCL1 5/8USNA0131014TH",
+                "percent": "1.90%"
+            },
+            {
+                "qty": 1500.000,
+                "name": "A345度等径承插口弯头45CCL1 5/8USNA0131014",
+                "percent": "9.49%"
+            },
+            {
+                "qty": 300.000,
+                "name": "A345度等径承插口弯头45CCL1 5/8USNA0131014TH",
+                "percent": "1.90%"
             }
         ]
     }
diff --git a/src/pages/modules/index2.vue b/src/pages/modules/index2.vue
index 483e6f0..b0abc33 100644
--- a/src/pages/modules/index2.vue
+++ b/src/pages/modules/index2.vue
@@ -7,7 +7,7 @@
         <p>料箱库监控</p>
       </div>
       <div class="zd-row wraper_1 mgb8">
-        <div class="box zd-col-8 mgr8">
+        <div class="box zd-col-7 mgr8">
           <div class="relative wraper_2 mgb8">
             <div class="absolute bg_j bg_j_1"></div>
             <div class="absolute bg_j bg_j_2"></div>
@@ -48,29 +48,29 @@
                     <div class="percent_i" :style="{'width': lx_task[0].total !== 0 ? lx_task[0].box / lx_task[0].total * 100 + '%' : 0}"></div>
                   </div>
                   <div class="zd-row">
-                    <p class="item_label">总数量：{{ lx_task[0].total }}</p>
-                    <p class="item_label">箱数：{{ lx_task[0].box }}箱</p>
-                    <p class="item_label">耗时：{{ lx_task[0].time }}</p>
+                    <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[0].total }}</span></p>
+                    <p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[0].box }}</span>箱</p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ lx_task[0].time }}</span></p>
                   </div>
                 </div>
               </div>
               <div class="zd-row flexstart">
                 <div class="zd-col-3 item_label">出库</div>
                 <div class="zd-col-20">
-                  <div class="percent_line">
-                    <div class="percent_i" :style="{'width': lx_task[1].total !== 0 ? lx_task[1].box / lx_task[1].total * 100 + '%' : 0}"></div>
+                  <div class="percent_line percent_line_c">
+                    <div class="percent_i percent_i_c" :style="{'width': lx_task[1].total !== 0 ? lx_task[1].box / lx_task[1].total * 100 + '%' : 0}"></div>
                   </div>
                   <div class="zd-row">
-                    <p class="item_label">总数量：{{ lx_task[1].total }}</p>
-                    <p class="item_label">箱数：{{ lx_task[1].box }}箱</p>
-                    <p class="item_label">耗时：{{ lx_task[1].time }}</p>
+                    <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[1].total }}</span></p>
+                    <p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[1].box }}</span>箱</p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ lx_task[1].time }}</span></p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="box zd-col-8 mgr8">
+        <div class="box zd-col-10 mgr8">
           <div class="relative wraper_2 wraper_3">
             <div class="absolute bg_j bg_j_1"></div>
             <div class="absolute bg_j bg_j_2"></div>
@@ -78,23 +78,25 @@
             <div class="absolute bg_j bg_j_4"></div>
             <p class="title">实时库存分析</p>
             <div class="zd-row wraper_4">
-              <div class="box zd-col-11">
+              <div class="box zd-col-8 mgr8">
                 <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
               </div>
-              <div class="box zd-col-13 zd-row flexwrap jcflexstart aligncenter">
+              <div class="box zd-col-16 zd-row flexwrap jcflexstart aligncenter flexstart">
                 <div class="zd-col-12 zd-row flexstart pie_item_wrap" v-for="(e, i) in lx_inventory.slice(1)" :key="i">
-                  <div class="pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
-                  <div class="zd-col-24">
+                  <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
+                  <div class="zd-col-21">
                     <p class="pie_legend_txt_1">{{ e.name }}</p>
-                    <p class="pie_legend_txt_2">{{ e.qty }}</p>
-                    <p class="pie_legend_txt_3">{{ e.percent }}</p>
+                    <div class="zd-row jcflexstart">
+                      <p class="pie_legend_txt_2">{{ e.qty }}</p>
+                      <p class="pie_legend_txt_3">{{ e.percent }}</p>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="box zd-col-8">
+        <div class="box zd-col-7">
           <div class="relative wraper_2 wraper_3">
             <div class="absolute bg_j bg_j_1"></div>
             <div class="absolute bg_j bg_j_2"></div>
@@ -112,7 +114,7 @@
         <p>托盘库监控</p>
       </div>
       <div class="zd-row wraper_1">
-        <div class="box zd-col-8 mgr8">
+        <div class="box zd-col-7 mgr8">
           <div class="relative wraper_2 mgb8">
             <div class="absolute bg_j bg_j_1"></div>
             <div class="absolute bg_j bg_j_2"></div>
@@ -153,29 +155,29 @@
                     <div class="percent_i" :style="{'width': tp_task[0].total !== 0 ? tp_task[0].box / tp_task[0].total * 100 + '100%' : 0}"></div>
                   </div>
                   <div class="zd-row">
-                    <p class="item_label">总数量：{{ tp_task[0].total }}</p>
-                    <p class="item_label">箱数：{{ tp_task[0].box }}箱</p>
-                    <p class="item_label">耗时：{{ tp_task[0].time }}</p>
+                    <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[0].total }}</span></p>
+                    <p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[0].box }}</span>箱</p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ tp_task[0].time }}</span></p>
                   </div>
                 </div>
               </div>
               <div class="zd-row flexstart">
                 <div class="zd-col-3 item_label">出库</div>
                 <div class="zd-col-20">
-                  <div class="percent_line">
-                    <div class="percent_i" :style="{'width': tp_task[1].total !== 0 ? tp_task[1].box / tp_task[1].total * 100 + '100%' : 0}"></div>
+                  <div class="percent_line percent_line_c">
+                    <div class="percent_i percent_i_c" :style="{'width': tp_task[1].total !== 0 ? tp_task[1].box / tp_task[1].total * 100 + '100%' : 0}"></div>
                   </div>
                   <div class="zd-row">
-                    <p class="item_label">总数量：{{ tp_task[1].total }}</p>
-                    <p class="item_label">箱数：{{ tp_task[1].box }}箱</p>
-                    <p class="item_label">耗时：{{ tp_task[1].time }}</p>
+                    <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[1].total }}</span></p>
+                    <p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[1].box }}</span>箱</p>
+                    <p class="item_label font_2">耗时:<span class="c_y">{{ tp_task[1].time }}</span></p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="box zd-col-8 mgr8">
+        <div class="box zd-col-10 mgr8">
           <div class="relative wraper_2 wraper_3">
             <div class="absolute bg_j bg_j_1"></div>
             <div class="absolute bg_j bg_j_2"></div>
@@ -183,13 +185,13 @@
             <div class="absolute bg_j bg_j_4"></div>
             <p class="title">实时库存分析</p>
             <div class="zd-row wraper_4">
-              <div class="box zd-col-11">
+              <div class="box zd-col-8 mgr8">
                 <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
               </div>
-              <div class="box zd-col-13 zd-row flexwrap jcflexstart">
+              <div class="box zd-col-16 zd-row flexwrap jcflexstart aligncenter flexstart">
                 <div class="zd-col-11 zd-row flexstart" v-for="(e, i) in tp_inventory.slice(1)" :key="i">
-                  <div class="pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
-                  <div class="zd-col-24">
+                  <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
+                  <div class="zd-col-21">
                     <p class="pie_legend_txt_1">{{ e.name }}</p>
                     <div class="zd-row jcflexstart">
                       <p class="pie_legend_txt_2">{{ e.qty }}</p>
@@ -201,7 +203,7 @@
             </div>
           </div>
         </div>
-        <div class="box zd-col-8">
+        <div class="box zd-col-7">
           <div class="relative wraper_2 wraper_3">
             <div class="absolute bg_j bg_j_1"></div>
             <div class="absolute bg_j bg_j_2"></div>
@@ -852,10 +854,16 @@ export default {
   width 76px
   background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
   p
-    font-size 14px
+    font-size 12px
     line-height 76px
     color #fff
     text-align center
 .font_1
   font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  white-space nowrap
+.c_y
+  color #f4ab00
 </style>
diff --git a/src/pages/modules/style.stylus b/src/pages/modules/style.stylus
index d4ae8e5..cbb1381 100644
--- a/src/pages/modules/style.stylus
+++ b/src/pages/modules/style.stylus
@@ -103,14 +103,12 @@
   border-right 4px solid #00d6ff
   border-bottom 4px solid #00d6ff
 .pie_item_wrap
-  min-height 32%
   &:nth-child(n+3)
     margin-top 10px
 .pie_legend_icon
   width 8px
   height 8px
-  margin 0 4px
-  background-color #1980EA
+  margin 0 auto
   border-radius 2px
 .pie_legend_txt_1
   font-size: 12px;
@@ -208,10 +206,14 @@
         width 10%
 .percent_line
   height 8px
-  background-color #4f464c
+  background-color rgba(35, 221, 103, .3)
   border-radius 10px
   margin-bottom 6px
 .percent_i
   height 100%
-  background-color #f5aa00
-  border-radius 10px
\ No newline at end of file
+  background-color #23dd67
+  border-radius 10px
+.percent_line_c
+  background-color rgba(0 118 242, .3)
+.percent_i_c
+  background-color #0076f2
\ No newline at end of file