root/screen-huahong
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

料仓监控样式

Browse Source
This commit is contained in:
caill
2024-07-17 15:00:40 +08:00
parent 38462d7c08
commit a03883d58f
9 changed files with 128 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/header.vue
View File

@@ -93,11 +93,12 @@ header
// font-family "PangMenZhengDao"
font-family "YouSheBiaoTiHei"
font-size 50px
line-height 100px
line-height 88px
color #fff
font-weight lighter
text-align center
letter-spacing 5px
padding-left 5px
text-shadow 0 8px 8px rgba(0,0,0,0.30)
.data_box
position absolute
@@ -113,12 +114,12 @@ header
color #fff
.tiem_item
float left
font-size 32px
font-size 20px
line-height 37px
color #fff
.colon
float left
font-size 32px
font-size 20px
line-height 37px
color #fff
</style>

2
src/config/getData2.js
View File

@@ -9,3 +9,5 @@ export const kilnDetail = () => post('api/cockpit/kilnDetail', {})
export const screenTableData = () => post('api/cockpit/screenTableData', {})
// 窑看板
export const klineInfo = () => post('api/cockpit/klineInfo', {})
// 料仓监控
export const queryliaocang = () => post('api/hand/queryliaocang', {})

4
src/config/mork2.js
View File

@@ -2533,3 +2533,7 @@ export const klineInfo = () => {
}
return res
}
export const queryliaocang = () => {
let res = [{point_name: 'LC16'}]
return res
}

BIN
src/images/screen1/item_10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
src/images/screen1/item_11.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
src/images/screen1/item_12.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
src/images/screen1/item_8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/images/screen1/item_9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

178
src/pages/modules/board/StockBin.vue
View File

@@ -1,52 +1,68 @@
<template>
<div class="st_wraper">
<div class="state_wraper">
<div class="state_icon bg_col_1"></div>
<div class="state_title">满货位</div>
<div class="state_icon bg_col_2"></div>
<div class="state_title">空货位</div>
<div class="state_title state_title_1 mgr20">A/B/C区：</div>
<div class="state_icon mgr20 bg_col_1"></div>
<div class="state_title mgr20">0-2000KG</div>
<div class="state_icon mgr20 bg_col_2"></div>
<div class="state_title mgr20">2000-6000KG</div>
<div class="state_icon mgr20 bg_col_3"></div>
<div class="state_title mgr60">6000KG以上</div>
<div class="state_title state_title_1 mgr20">Z区：</div>
<div class="state_icon mgr20 bg_col_1"></div>
<div class="state_title mgr20">0KG以下</div>
<div class="state_icon mgr20 bg_col_2"></div>
<div class="state_title">0KG以上</div>
</div>
<div class="st_content">
<div class="st_item">
<div class="txt">A区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[0]" :key="'a'+ i">
<div class="p_item_i">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
<div class="st_item_i">
<div class="txt">C<br>区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[2]" :key="'a'+ i">
<div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="st_item">
<div class="txt">B区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[1]" :key="'b'+ i">
<div class="p_item_i">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
<div class="st_item_i">
<div class="txt">B<br>区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[1]" :key="'b'+ i">
<div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="st_item">
<div class="txt">C区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[2]" :key="'c'+ i">
<div class="p_item_i">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
<div class="st_item_i">
<div class="txt">A<br>区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[0]" :key="'c'+ i">
<div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="st_item">
<div class="txt">Z区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[3]" :key="'z'+ i" :class="{'p_item_active': e.point_status === '2'}">
<div class="p_item_i">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
<div class="st_item_i">
<div class="txt">Z<br>区</div>
<div class="p_wraper">
<div class="p_item" v-for="(e, i) in dataList[3]" :key="'z'+ i" :class="{'p_item_active': e.point_status === '2'}">
<div class="p_item_i" :class="{'item_bg_1': Number(e.qty) >= 0 && Number(e.qty) < 2000, 'item_bg_2': Number(e.qty) >= 2000 && Number(e.qty) < 6000, 'item_bg_3': Number(e.qty) >= 6000}">
<p class="p1">{{ e.point_name }}</p>
<p class="p2">{{ e.qty }}</p>
</div>
</div>
</div>
</div>
@@ -67,13 +83,33 @@ export default {
created () {
this.refresh()
for (let i = 0; i < 4; i++) {
if (i < 3) {
if (i === 0) {
for (let j = 0; j < 16; j++) {
this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '1'})
let qty = Math.random()
qty = qty.toFixed(4) * 10000
qty = qty.toFixed(0)
this.dataList[i].push({point_name: `A${16 - j}`, qty: qty, point_status: '1'})
}
} else if (i === 1) {
for (let j = 0; j < 16; j++) {
let qty = Math.random()
qty = qty.toFixed(4) * 10000
qty = qty.toFixed(0)
this.dataList[i].push({point_name: `B${16 - j}`, qty: qty, point_status: '1'})
}
} else if (i === 2) {
for (let j = 0; j < 16; j++) {
let qty = Math.random()
qty = qty.toFixed(4) * 10000
qty = qty.toFixed(0)
this.dataList[i].push({point_name: `C${16 - j}`, qty: qty, point_status: '1'})
}
} else {
for (let j = 0; j < 12; j++) {
this.dataList[i].push({point_name: `${i + 1}-${j + 1}`, qty: '100', point_status: '2'})
let qty = Math.random()
qty = qty.toFixed(4) * 10000
qty = qty.toFixed(0)
this.dataList[i].push({point_name: `Z${12 - j}`, qty: qty, point_status: '2'})
}
}
}
@@ -106,17 +142,23 @@ export default {
.st_wraper
position relative
_wh(100%, 100%)
background center / 100% 100% url('../../../images/bg-center.png') no-repeat
padding 20px 20px 0 20px
background center / 100% 100% url('../../../images/screen1/item_8.png') no-repeat
padding 30px 30px 0px 30px
.state_wraper
_wh(100%, 20px)
_fj(row, center)
margin-bottom 20px
.state_icon
_wh(16px, 16px)
.state_title
_font(20px, 20px, #fff,,)
margin 0 60px 0 20px
_font(18px, 20px, #fff,,)
.state_title_1
font-weight 700
font-size 20px
color #63bbf6
.mgr20
margin-right 20px
.mgr60
margin-right 60px
.bg_col_1
border-radius 4px
box-shadow 0px 0px 12px 4px rgba(239, 82, 82, .5)
@@ -124,44 +166,60 @@ export default {
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
.bg_col_2
border-radius 4px
box-shadow 0px 0px 12px 4px rgba(142, 181, 229, .5)
border 1px solid rgba(42, 189, 251, 50%)
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
box-shadow 0px 0px 12px 4px rgba(30, 198, 167, .4)
border 1px solid rgba(30, 198, 167, 50%)
background radial-gradient(circle at 50% 100%, rgba(30, 198, 167, 50%), #06302b, #05322c);
.bg_col_3
border-radius 4px
box-shadow 0px 0px 12px 4px rgba(241, 195, 129, .4)
border 1px solid rgba(241, 195, 129, 50%)
background radial-gradient(circle at 50% 100%, rgba(241, 195, 129, 50%), #533608, #3f2e13);
.st_content
_wh(100%, calc(100% - 40px))
_fj(row)
margin 10px 0
.st_item
_wh(22%, 100%)
_wh(100%, calc(25% - 30px))
background top center / 100% 25px url('../../../images/screen1/item_9.png') no-repeat
padding-top 25px
margin-bottom 30px
.st_item_i
_fj(row)
_wh(100%, 100%)
background linear-gradient(to bottom, rgba(0, 51, 115, 10%), #003373)
padding 20px
.txt
_font(26px, 40px, #fff,,center)
width 50px
_font(26px, 40px, #63bbf6,,left)
font-family: "YouSheBiaoTiHei"
margin-bottom 20px
.p_wraper
_wh(100%, calc(100% - 60px))
_fj(row, flex-start, flex-start)
_wh(calc(100% - 50px), 100%)
_fj(row, flex-start)
align-content: flex-start
flex-wrap wrap
.p_item
_wh(30%, 14%)
// padding 14px
margin-bottom 4.5%
_wh(5.5%, 100%)
border-radius 4px
background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
border 2px solid rgba(42, 189, 251, 20%)
// background radial-gradient(circle at 50% 100%, rgba(95, 217, 252, 50%), rgba(14, 82, 140, 50%), rgba(10, 54, 106, 50%));
// border 4px solid rgba(42, 189, 251, 20%)
margin: 0 0.375%
overflow hidden
&:nth-child(3n+2)
margin 0 5% 2% 5%
.p_item_i
_wh(100%, 100%)
background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
background-size 12px 12px
background-repeat repeat
_fj(,center)
// background-image linear-gradient(to bottom, transparent 11px, rgba(22, 62, 113, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(22, 62, 113, 20%) 1px)
// background-size 12px 12px
// background-repeat repeat
padding 10px 5px 0 5px
.item_bg_1
background center / 100% 100% url('../../../images/screen1/item_12.png') no-repeat
.item_bg_2
background center / 100% 100% url('../../../images/screen1/item_10.png') no-repeat
.item_bg_3
background center / 100% 100% url('../../../images/screen1/item_11.png') no-repeat
.p_item_active
background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
border 2px solid rgba(181, 95, 78, 30%)
// background radial-gradient(circle at 50% 100%, rgba(251, 135, 105, 80%), #77200F, #58190E);
// border 2px solid rgba(181, 95, 78, 30%)
.p_item_i
background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
// background-image linear-gradient(to bottom, transparent 11px, rgba(118, 36, 23, 20%) 1px), linear-gradient(to right, transparent 11px, rgba(118, 36, 23, 20%) 1px)
.p1
_wh(100%, 40%)
_fj(,center)
@@ -175,5 +233,5 @@ export default {
_fj(,center)
_font(18px, 18px, #EFF2FF,,center)
font-family: "SourceHanSansCN-Bold";
background bottom center / 40% auto url('../../../images/out.png') no-repeat
// background bottom center / 40% auto url('../../../images/out.png') no-repeat
</style>