css
This commit is contained in:
蔡玲
@@ -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%"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
background-color #23dd67
|
||||
border-radius 10px
|
||||
.percent_line_c
|
||||
background-color rgba(0 118 242, .3)
|
||||
.percent_i_c
|
||||
background-color #0076f2
|
||||
Reference in New Issue
Block a user