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

物流工艺样式

Browse Source
This commit is contained in:
caill
2023-11-09 14:53:45 +08:00
parent 16fea50bc3
commit da318049f5
6 changed files with 481 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/reset.css
View File

@@ -82,9 +82,7 @@ li {
/* 顺安大屏尺寸1920*1200 */
html, body {
/* width: 100%;
height: 100%;
min-width: 1440px;
min-height: 1040px; */
height: 100%; */
width: 1920px;
height: 1200px;
/* 顺和大屏尺寸 */

21
src/components/header.vue
View File

@@ -66,16 +66,19 @@ export default {
</script>
<style lang="stylus" scoped>
@import '~@css/mixin'
header
position relative
width 100%
height 1rem
height 8%
position relative
background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
p
font-family "PangMenZhengDao"
_font(.5rem, 1rem, #ffffff, lighter, center)
font-size .5rem
line-height 1rem
color #fff
font-weight lighter
text-align center
letter-spacing .05rem
text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
.data_box
@@ -90,11 +93,17 @@ header
text-align center
.date_item
float left
_font(.2rem, .37rem, #fff,,)
font-size .2rem
line-height .37rem
color #fff
.tiem_item
float left
_font(.32rem, .37rem, #fff,,)
font-size .32rem
line-height .37rem
color #fff
.colon
float left
_font(.32rem, .37rem, #fff,,)
font-size .32rem
line-height .37rem
color #fff
</style>

47
src/components/canvas.vue → src/pages/shunhe/LogisticsProcess/canvas.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- <div class="canvas_container" @click="rectClick"> -->
<div class="canvas_container">
<div class="canvas_container" @click="rectClick">
<!-- <div class="canvas_container"> -->
<canvas id="myCanvas" width="946" height="982"></canvas>
</div>
</template>
@@ -10,21 +10,16 @@ export default {
data () {
return {
af: undefined,
// points: [{x1: 650, y1: 885, x2: 650, y2: 852}, {x1: 577, y1: 815, x2: 548, y2: 815}, {x1: 719, y1: 815, x2: 754, y2: 815}, {x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}],
points: [{x1: 305, y1: 560, x2: 305, y2: 545}, {x1: 419, y1: 510, x2: 419, y2: 490}, {x1: 455, y1: 282, x2: 548, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 561}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 560}],
dot1: {x1: 650, y1: 885, x2: 650, y2: 852},
dot2: {x1: 577, y1: 815, x2: 548, y2: 815},
dot3: {x1: 719, y1: 815, x2: 754, y2: 815},
dot4: {x1: 305, y1: 560, x2: 305, y2: 545},
dot5: {x1: 419, y1: 510, x2: 419, y2: 490},
dot6: {x1: 455, y1: 282, x2: 548, y2: 282},
line1: 1,
points: [{x1: 305, y1: 563, x2: 305, y2: 550}, {x1: 419, y1: 514, x2: 419, y2: 494}, {x1: 453, y1: 282, x2: 550, y2: 282}, {x1: 830, y1: 395, x2: 830, y2: 474}, {x1: 830, y1: 499, x2: 830, y2: 563}, {x1: 830, y1: 516, x2: 488, y2: 516}, {x1: 488, y1: 516, x2: 488, y2: 563}],
dot4: {x1: 305, y1: 563, x2: 305, y2: 550},
dot5: {x1: 419, y1: 514, x2: 419, y2: 494},
dot6: {x1: 453, y1: 282, x2: 550, y2: 282},
line2: 1,
line3: 1,
dot7: {x1: 830, y1: 395, x2: 830, y2: 474},
dot8: {x1: 830, y1: 499, x2: 830, y2: 561},
dot8: {x1: 830, y1: 499, x2: 830, y2: 563},
dot9: {x1: 830, y1: 516, x2: 488, y2: 516},
dot10: {x1: 488, y1: 516, x2: 488, y2: 560},
dot10: {x1: 488, y1: 516, x2: 488, y2: 563},
line4: 1
}
},
@@ -62,32 +57,6 @@ export default {
let canvas = document.getElementById('myCanvas')
let ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
// if (this.line1 === 1) {
// this.dot1.y1 -= 1
// this.drawPoint(ctx, this.dot1.x1, this.dot1.y1)
// if (this.dot1.y1 === this.dot1.y2) {
// this.dot1.y1 = 885
// this.line1 = 2
// }
// }
// if (this.line1 === 2) {
// this.dot2.x1 -= 1
// this.drawPoint(ctx, this.dot2.x1, this.dot2.y1)
// // this.line1 = 3
// if (this.dot2.x1 === this.dot2.x2) {
// this.dot2.x1 = 577
// this.line1 = 3
// }
// }
// if (this.line1 === 3) {
// this.dot3.x1 += 1
// this.drawPoint(ctx, this.dot3.x1, this.dot3.y1)
// // this.line1 = 2
// if (this.dot3.x1 === this.dot3.x2) {
// this.dot3.x1 = 719
// this.line1 = 1
// }
// }
if (this.line2 === 1) {
this.dot4.y1 -= 1
this.drawPoint(ctx, this.dot4.x1, this.dot4.y1)

178
src/pages/shunhe/LogisticsProcess.vue → src/pages/shunhe/LogisticsProcess/index.vue
View File

@@ -34,7 +34,7 @@
<div class="item_tip">
<div class="item_tip_left">当日工序生产统计</div>
</div>
<div class="item_content_1" style="padding-left: 15px;padding-right:15px">
<div class="item_content_1 item_content_3">
<div class="item_inner_wrap">
<div class="item_inner_h1">
<div class="item_inner_h1_l">混料</div>
@@ -232,9 +232,9 @@
<script>
import THeader from '@components/header.vue'
import TWorkshop from '@components/workshop.vue'
import {homepageData} from '@js/getData2.js'
// import {homepageData} from '@js/mork2.js'
import TWorkshop from './workshop.vue'
// import {homepageData} from '@js/getData2.js'
import {homepageData} from '@js/mork2.js'
export default {
name: 'LogisticsProcess',
components: {
@@ -695,62 +695,87 @@ export default {
</script>
<style lang="stylus" scoped>
@import '~@css/mixin'
.bg
_wh(100%, 100%)
width 100%
height 100%
overflow hidden
.container
_wh(100%, calc(100% - 1.38rem))
padding .3rem .2509rem 0
width 100%
height 89%
padding 1.563% 1.306% 0
clear both
.bottom
_wh(100%, .38rem)
background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
width 100%
height 3%
background center bottom / 19.06rem 100% url(../../../assets/images/screen1/bottom.png) no-repeat
.left_wrap
float left
_wh(4.0756rem, 100%)
width 4.0756rem
height 100%
background-image linear-gradient(to bottom, #040b1a, #050919)
.center_wrap
float left
_wh(9.96rem, 100%)
width 9.96rem
height 100%
margin-left .2936rem
padding .25rem
background center bottom / 100% 100% url(../../assets/images/screen1/item_2.png) no-repeat
background center bottom / 100% 100% url(../../../assets/images/screen1/item_2.png) no-repeat
.right_wrap
float right
_wh(4.0273rem, 100%)
width 4.0273rem
height 100%
background-image linear-gradient(to bottom, #040b1a, #050919)
.item_wrap
_wh(100%, calc(100% / 2))
width 100%
height calc(100% / 2)
.item_tip
clear both
_wh(100%, .32rem)
width 100%
height .32rem
line-height .32rem
background center center / 100% 100% url(../../assets/images/screen1/title_bg_1.png) no-repeat
background center center / 100% 100% url(../../../assets/images/screen1/title_bg_1.png) no-repeat
.item_tip_left
float left
_wh(60%, 100%)
width 60%
height 100%
font-family "SourceHanSansCN"
_font(.18rem, inherit, #fff, 700,)
font-size .18rem
line-height inherit
color #fff
text-align left
font-weight 700
letter-spacing .02rem
text-shadow 0 0 .09rem #159AFF
padding-left .38rem
.item_content_1
_wh(100%, calc(100% - .32rem))
width 100%
height calc(100% - .32rem)
padding .12rem 0 .15rem
.item_content_2
_wh(calc(100% - 30px), calc(100% - .5rem))
width calc(100% - 30px)
height calc(100% - .5rem)
margin .12rem 15px 0 15px
border .01rem solid rgba(8,205,248,0.3)
.item_content_3
padding-left .15rem
padding-right .15rem
display flex
flex-direction column
justify-content space-between
.scroll_wrap
_wh(100%, 100%)
width 100%
height 100%
.scroll_tab_1
_wh(100%, .4rem)
width 100%
height .4rem
border-bottom .01rem solid rgba(8,205,248,0.3)
li
float left
width 30%
_font(.14rem,.4rem,#78B1DE,,center)
font-size .14rem
line-height .4rem
color #78B1DE
text-align center
word-wrap break-word
word-break break-all
white-space nowrap
@@ -777,8 +802,13 @@ export default {
float left
width 32%
height 100%
_fj(center)
_font(.12rem, .16rem, #fff,,center)
display: flex
justify-content center
align-items center
font-size .12rem
line-height .16rem
color #fff
text-align center
word-wrap break-word
word-break break-all
padding 0 .02rem
@@ -789,71 +819,105 @@ export default {
width 20%
.item_inner_wrap
width 100%
padding-bottom .17rem
margin-bottom .2rem
background center bottom / 100% .03rem url(../../assets/images/screen1/line_2.png) no-repeat
padding-bottom 4%
background center bottom / 100% .03rem url(../../../assets/images/screen1/line_2.png) no-repeat
&:last-child
background none
padding 0
margin 0
.item_inner_h1
_wh(100%, .2rem)
width 100%
height .2rem
overflow hidden
_fj()
display: flex
justify-content space-between
align-items center
.item_inner_h1_l
_wh(0.6rem, 100%)
width .6rem
height 100%
font-family "SourceHanSansCN"
_font(.14rem, .16rem, #84B0DA, 700,)
font-size .14rem
line-height .16rem
color #84B0DA
font-weight 700
text-align left
letter-spacing .02rem
.item_inner_h1_r
_wh(calc(100% - 0.6rem), 100%)
_fj()
width calc(100% - 0.6rem)
height 100%
display: flex
justify-content space-between
align-items center
.process_wrap
_wh(100%, .0805rem)
width 100%
height .0805rem
background-color #B68845
_fj()
display: flex
justify-content space-between
align-items center
.process_rate
height 100%
background-color #07e083
.item_inner_h2
_wh(100%, .3rem)
width 100%
height .3rem
margin-top .1rem
_fj()
display: flex
justify-content space-between
align-items center
.item_inner_h2_inner
_wh(48%, .3rem)
_fj()
background center bottom / 100% 100% url(../../assets/images/screen1/item_5.png) no-repeat
width 48%
height .3rem
display: flex
justify-content space-between
align-items center
background center bottom / 100% 100% url(../../../assets/images/screen1/item_5.png) no-repeat
.item_inner_h2_inner_l
_wh(50%, 100%)
_fj()
width 50%
height 100%
display: flex
justify-content space-between
align-items center
span
display block
&:nth-child(1)
_wh(.0725rem, .0725rem)
width .0725rem
height .0725rem
margin-left .15rem
i
display block
_wh(.0725rem, .0725rem)
width .0725rem
height .0725rem
border-radius 100%
&:nth-child(2)
_wh(calc(100% - 0.2825rem), .3rem)
width calc(100% - 0.2825rem)
height .3rem
font-family "SourceHanSansCN"
_font(.12rem, .3rem, #fff,400,)
font-size .12rem
line-height .3rem
color #fff
margin-left .06rem
overflow hidden
text-overflow ellipsis
white-space nowrap
.item_inner_h2_inner_r
_wh(50%, 100%)
width 50%
height 100%
line-height .3rem
overflow hidden
text-align right
span
font-family "SourceHanSansCN"
_font(.12rem, .3rem, #fff,700,)
font-size .12rem
line-height .3rem
color #fff
font-weight 700
&:nth-child(1)
font-family "SourceHanSansCN"
_font(.18rem, .3rem, #00D5FF,700,)
font-size .18rem
line-height .3rem
color #00D5FF
font-weight 700
overflow hidden
text-overflow ellipsis
white-space nowrap
@@ -865,12 +929,18 @@ export default {
position absolute
left .2509rem
top 11%
_wh(20%, .4rem)
_fj(flex-start)
width 20%
height .4rem
display: flex
justify-content flex-start
align-items center
a
cursor pointer
font-family "SourceHanSansCN"
_font(.18rem, .30rem, #fff, 700,)
font-size .18rem
line-height .3rem
color #fff
font-weight 700
letter-spacing .01rem
padding .05rem .2rem
border-radius .05rem

594
src/components/workshop.vue → src/pages/shunhe/LogisticsProcess/workshop.vue
View File

File diff suppressed because it is too large Load Diff

2
src/router/index.js
View File

@@ -9,7 +9,7 @@ const HomeScreen = r => require.ensure([], () => r(require('@page/HomeScreen')),
const ProdCount = r => require.ensure([], () => r(require('@page/shunhe/ProdCount')), 'ProdCount')
const StorageMonitor = r => require.ensure([], () => r(require('@page/shunhe/StorageMonitor')), 'StorageMonitor')
const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess')), 'LogisticsProcess')
const LogisticsProcess = r => require.ensure([], () => r(require('@page/shunhe/LogisticsProcess/index')), 'LogisticsProcess')
const SortWorkMonitor = r => require.ensure([], () => r(require('@page/shunhe/SortWorkMonitor')), 'SortWorkMonitor')
Vue.use(Router)