样式
This commit is contained in:
@@ -24,3 +24,9 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
#app
|
||||
width 100%
|
||||
height 100%
|
||||
</style>
|
||||
|
||||
@@ -4,16 +4,16 @@ $gray = #516282
|
||||
$orange = #F96700
|
||||
$green2 = #65d837
|
||||
|
||||
.green
|
||||
background-color $green
|
||||
.yellow
|
||||
background-color $yellow
|
||||
.gray
|
||||
background-color $gray
|
||||
.orange
|
||||
background-color $orange
|
||||
.green2
|
||||
background-color $green2
|
||||
// .green
|
||||
// background-color $green
|
||||
// .yellow
|
||||
// background-color $yellow
|
||||
// .gray
|
||||
// background-color $gray
|
||||
// .orange
|
||||
// background-color $orange
|
||||
// .green2
|
||||
// background-color $green2
|
||||
|
||||
//宽高
|
||||
_wh(w, h)
|
||||
|
||||
@@ -14,11 +14,11 @@ time, mark, audio, video, input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 0.16rem;
|
||||
line-height: inherit;
|
||||
/* font-size: 0.16rem;
|
||||
line-height: inherit; */
|
||||
color: #ffffff;
|
||||
font-weight: normal;
|
||||
vertical-align: baseline;
|
||||
/* font-weight: normal; */
|
||||
/* vertical-align: baseline; */
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
@@ -79,12 +79,12 @@ li {
|
||||
}
|
||||
|
||||
html, body {
|
||||
/* width: 100%; */
|
||||
width: 1920px;
|
||||
/* min-width: 1550px; */
|
||||
height: 1060px;
|
||||
/* width: 1920px;
|
||||
height: 1040px; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1440px;
|
||||
min-height: 789px;
|
||||
/* width: 2560px;
|
||||
height: 1440px; */
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -95,7 +95,7 @@ body {
|
||||
-ms-user-select:none;/*IE10*/
|
||||
-khtml-user-select:none;/*早期浏览器*/
|
||||
user-select:none;
|
||||
background: #05032a center center / 100% 100% url(../../assets/images/bg.png) no-repeat;
|
||||
background: #05032a center center / 100% 100% url(../../assets/images/bg.jpg) no-repeat;
|
||||
}
|
||||
|
||||
div, p {
|
||||
@@ -145,6 +145,10 @@ div, p {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pl10 {padding-left: 10px;}
|
||||
.pl20 {padding-left: 20px;}
|
||||
.mgb3 {margin-bottom: .03rem;}
|
||||
|
||||
BIN
src/assets/images/bg.jpg
Normal file
BIN
src/assets/images/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
BIN
src/assets/images/loginbg.jpg
Normal file
BIN
src/assets/images/loginbg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 307 KiB |
@@ -10,3 +10,4 @@
|
||||
if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false)
|
||||
doc.addEventListener('DOMContentLoaded', recalc, false)
|
||||
})(document, window)
|
||||
// 晟华大屏尺寸2560*1440，屏幕太大用rem样式会错乱，现在使用px、%
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<header>
|
||||
<div class="center_text">晟华大屏监控</div>
|
||||
<div class="tag_block clearfix">
|
||||
<div class="fl">
|
||||
<div class="tag_block">
|
||||
<div class="tag_left">
|
||||
<!-- <div v-if="index == '0'" class="tag cur_tag">首页</div>
|
||||
<router-link v-else to="/homepage" class="tag">首页</router-link> -->
|
||||
<div v-if="index == '1'" class="tag cur_tag">生产统计</div>
|
||||
<router-link v-else to="/prodcount" class="tag">生产统计</router-link>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<div class="tag_right">
|
||||
<div v-if="index == '2'" class="tag cur_tag">仓储监控</div>
|
||||
<router-link v-else to="/storagemonitor" class="tag">仓储监控</router-link>
|
||||
<div v-if="index == '3'" class="tag cur_tag">设备监控</div>
|
||||
@@ -47,7 +47,19 @@ header
|
||||
margin-left -200px
|
||||
letter-spacing 6px
|
||||
.tag_block
|
||||
margin 35px .54rem 0
|
||||
_wh(100%, 100%)
|
||||
_fj(row)
|
||||
padding 25px 15px 0
|
||||
.tag_left
|
||||
_wh(50%, 100%)
|
||||
_fj(row, flex-start)
|
||||
.tag
|
||||
margin-right 20px
|
||||
.tag_right
|
||||
_wh(50%, 100%)
|
||||
_fj(row, flex-end)
|
||||
.tag
|
||||
margin-left 20px
|
||||
.tag
|
||||
display inline-block
|
||||
_wh(132px, 36px)
|
||||
|
||||
97
src/components/select.vue
Normal file
97
src/components/select.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="select">
|
||||
<div class="select-item pointer" @click="selectOption">
|
||||
<div class="select-item-txt">{{defaultLabel}}</div>
|
||||
<div class="select-item-button"> </div>
|
||||
</div>
|
||||
<ul v-show="active" class="options">
|
||||
<li class="pointer" :class="{'li-active': e.index === index}" v-for="e in option" :key="e.index" @click="change(e)">{{e.label}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectOpt',
|
||||
props: {
|
||||
option: Array,
|
||||
index: [Number, String]
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultLabel () {
|
||||
let val = ''
|
||||
this.option.map(e => {
|
||||
if (e.index === this.index) {
|
||||
val = e.label
|
||||
}
|
||||
})
|
||||
return val
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectOption () {
|
||||
this.active = true
|
||||
},
|
||||
change (e) {
|
||||
this.$emit('change', e.index)
|
||||
this.active = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.select
|
||||
position relative
|
||||
_wh(100%, inherit)
|
||||
background-color #fff
|
||||
user-select none
|
||||
.select-item
|
||||
width 100%
|
||||
_fj(row)
|
||||
.select-item-txt
|
||||
width calc(100% - 50px)
|
||||
_font(15px, inherit, #999,,left)
|
||||
padding 0 10px
|
||||
.select-item-button
|
||||
position relative
|
||||
_wh(50px, inherit)
|
||||
vertical-align top
|
||||
&::before
|
||||
content ''
|
||||
width 0
|
||||
height 0
|
||||
border-left 5px solid transparent
|
||||
border-right 5px solid transparent
|
||||
border-top 5px solid #999
|
||||
position absolute
|
||||
right 13px
|
||||
top 13px
|
||||
pointer-events none
|
||||
z-index 3
|
||||
.options
|
||||
position absolute
|
||||
z-index 100000
|
||||
top 44px
|
||||
width 100%
|
||||
padding 10px 0
|
||||
background-color #fff
|
||||
border 1px solid #eee
|
||||
border-radius 5px
|
||||
li
|
||||
width 100%
|
||||
_font(15px, 38px, #999,,left)
|
||||
padding 0 10px
|
||||
user-select none
|
||||
box-sizing border-box
|
||||
&:hover
|
||||
background-color #f5f7fa
|
||||
.li-active
|
||||
color #409eff
|
||||
</style>
|
||||
@@ -167,6 +167,8 @@ export default {
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.container
|
||||
_wh(100%, 100%)
|
||||
.close_btn
|
||||
position absolute
|
||||
top 2px
|
||||
@@ -178,8 +180,8 @@ export default {
|
||||
cursor pointer
|
||||
.content
|
||||
width 100%
|
||||
height calc(100% - 100px)
|
||||
padding 0 15px
|
||||
height calc(100% - 84px)
|
||||
padding 15px
|
||||
.item_tr
|
||||
width 100%
|
||||
height 100%
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<section>
|
||||
<t-header index='1'></t-header>
|
||||
<section>
|
||||
<section class="content">
|
||||
<div class="con1">
|
||||
<div class="c-title c-left">
|
||||
<span class="icon1"></span>
|
||||
@@ -26,7 +26,7 @@
|
||||
<span>块</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex">
|
||||
<div class="center_wrapper" style="display:flex">
|
||||
<div class="con2">
|
||||
<div class="title">原料计划完成情况</div>
|
||||
<div class="desc">
|
||||
@@ -576,6 +576,10 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.content
|
||||
_wh(calc(100% - 108px), calc(100% - 108px))
|
||||
margin 12px auto
|
||||
.blue
|
||||
color #32C5FF !important
|
||||
.green
|
||||
@@ -589,16 +593,11 @@ export default {
|
||||
.red
|
||||
color #FF0000 !important
|
||||
.con1
|
||||
width 18.14rem
|
||||
// height 1.23rem
|
||||
width 100%
|
||||
height 123px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_top.png) no-repeat
|
||||
margin 0 auto
|
||||
// margin-top 0.32rem
|
||||
// margin-bottom 0.15rem
|
||||
margin-top 32px
|
||||
margin-bottom 15px
|
||||
text-align center
|
||||
// display flex
|
||||
@@ -643,87 +642,65 @@ export default {
|
||||
.dot
|
||||
background none
|
||||
width .14rem
|
||||
.center_wrapper
|
||||
_wh(100%, calc(50% - 69px))
|
||||
_fj(row)
|
||||
.con2
|
||||
float left
|
||||
margin-left .49rem
|
||||
// width 4.45rem
|
||||
width 40%
|
||||
// height 4.05rem
|
||||
height 405px
|
||||
height 100%
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg1.png) no-repeat
|
||||
margin-right .15rem
|
||||
.title
|
||||
position absolute
|
||||
top .3rem
|
||||
left .25rem
|
||||
font-size .16rem
|
||||
_wh(calc(100% - 34px), 22px)
|
||||
margin 17px
|
||||
_font(16px, 22px, #fff,,left)
|
||||
.desc
|
||||
position absolute
|
||||
top .6rem
|
||||
left .25rem
|
||||
display flex
|
||||
_wh(100%, 22px)
|
||||
_fj(row, center)
|
||||
div
|
||||
font-size .16rem
|
||||
margin-right .5rem
|
||||
margin-right 1.2rem
|
||||
_font(16px, 22px, #fff,,)
|
||||
span
|
||||
font-size .16rem
|
||||
font-size 16px
|
||||
color #F7B502
|
||||
margin 0 .25rem
|
||||
margin 0 30px
|
||||
.item_content_0
|
||||
position absolute
|
||||
top .4rem
|
||||
left .25rem
|
||||
height 380px
|
||||
width 85%
|
||||
_wh(calc(100% - 44px), calc(100% - 112px))
|
||||
margin 17px auto
|
||||
.con3
|
||||
float left
|
||||
// width 13.57rem
|
||||
width 54%
|
||||
// height 4.05rem
|
||||
height 405px
|
||||
width calc(60% - 15px)
|
||||
height 100%
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg2.png) no-repeat
|
||||
.title
|
||||
position absolute
|
||||
top .3rem
|
||||
left .25rem
|
||||
font-size .16rem
|
||||
_wh(calc(100% - 34px), 22px)
|
||||
margin 17px
|
||||
_font(16px, 22px, #fff,,left)
|
||||
.item_content_1
|
||||
position absolute
|
||||
top .3rem
|
||||
left .25rem
|
||||
height 360px
|
||||
width 95%
|
||||
margin-bottom .1rem
|
||||
_wh(calc(100% - 44px), calc(100% - 90px))
|
||||
margin 17px auto
|
||||
.con4
|
||||
float left
|
||||
margin-left .49rem
|
||||
// margin-top .16rem
|
||||
_wh(100%, calc(50% - 85px))
|
||||
margin-top 16px
|
||||
width 18.17rem
|
||||
// height 3.35rem
|
||||
height 335px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
padding 0 .27rem 0 .27rem
|
||||
.block_h2
|
||||
_wh(calc(100% - 34px), 22px)
|
||||
margin 17px auto
|
||||
h2
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
margin .15rem 0 .15rem 0
|
||||
_font(16px, 22px, #fff,,left)
|
||||
.list_scroll_title
|
||||
width 100%
|
||||
_wh(calc(100% - 50px), 32px)
|
||||
margin 0 auto
|
||||
background #262F52
|
||||
line-height 32px
|
||||
span
|
||||
display inline-block
|
||||
width 11%
|
||||
text-align center
|
||||
line-height .32rem
|
||||
line-height 32px
|
||||
// float left
|
||||
font-size 14px
|
||||
&:nth-child(1)
|
||||
@@ -731,12 +708,15 @@ export default {
|
||||
&:nth-child(2)
|
||||
width 15%
|
||||
.content-block-scroll
|
||||
width 100%
|
||||
height calc(100% - 0.6rem)
|
||||
_wh(calc(100% - 50px), calc(100% - 113px))
|
||||
margin 0 auto 25px auto
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
width 100%
|
||||
li
|
||||
width 100%
|
||||
height 38px
|
||||
_fj(row, center)
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
@@ -745,7 +725,7 @@ export default {
|
||||
font-size 12px
|
||||
// padding 0 .1rem
|
||||
text-align center
|
||||
line-height .38rem
|
||||
line-height 38px
|
||||
box-sizing border-box
|
||||
// float left
|
||||
&:nth-child(1)
|
||||
|
||||
@@ -1,44 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="login-container">
|
||||
<vue-particles
|
||||
color="#fff"
|
||||
:particleOpacity="0.7"
|
||||
:particlesNumber="60"
|
||||
shapeType="circle"
|
||||
:particleSize="4"
|
||||
linesColor="#fff"
|
||||
:linesWidth="1"
|
||||
:lineLinked="true"
|
||||
:lineOpacity="0.4"
|
||||
:linesDistance="150"
|
||||
:moveSpeed="2"
|
||||
:hoverEffect="true"
|
||||
hoverMode="grab"
|
||||
:clickEffect="true"
|
||||
clickMode="push"
|
||||
class="lizi"
|
||||
>
|
||||
</vue-particles>
|
||||
<div class="login_wrap">
|
||||
<div class="login_cnt clearfix drift">
|
||||
<div class="login_card fl">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<label>域名地址</label>
|
||||
<input type="text" class="inputStyle" v-model="baseUrl">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<label>刷新时间</label>
|
||||
<input type="number" class="inputStyle" v-model="setTime">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<label>设备看板</label>
|
||||
<select name="equipment" v-model="equipId">
|
||||
<option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
|
||||
</select>
|
||||
color="#fff"
|
||||
:particleOpacity="0.7"
|
||||
:particlesNumber="60"
|
||||
shapeType="circle"
|
||||
:particleSize="4"
|
||||
linesColor="#fff"
|
||||
:linesWidth="1"
|
||||
:lineLinked="true"
|
||||
:lineOpacity="0.4"
|
||||
:linesDistance="150"
|
||||
:moveSpeed="2"
|
||||
:hoverEffect="true"
|
||||
hoverMode="grab"
|
||||
:clickEffect="true"
|
||||
clickMode="push"
|
||||
class="lizi"
|
||||
>
|
||||
</vue-particles>
|
||||
<div class="body-container">
|
||||
<div class="login_wrap">
|
||||
<div class="login_cnt">
|
||||
<div class="title-name">系统配置</div>
|
||||
<div class="login_card">
|
||||
<div class="card_wrap">
|
||||
<div class="inputOuter">
|
||||
<label>域名地址</label>
|
||||
<input type="text" class="inputStyle" v-model="baseUrl">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<label>刷新时间</label>
|
||||
<input type="number" class="inputStyle" v-model="setTime">
|
||||
</div>
|
||||
<div class="inputOuter">
|
||||
<label>设备看板</label>
|
||||
<!-- <select name="equipment" v-model="equipId">
|
||||
<option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
|
||||
</select> -->
|
||||
<div class="select-wraper">
|
||||
<selectOpt :option="option" :index="index" @change="change"></SelectOpt>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit"><input type="submit" value="配 置" class="btn" @click="_config"></div>
|
||||
</div>
|
||||
<div class="submit"><input type="submit" value="配 置" class="btn" @click="_config"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -46,19 +52,20 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectOpt from '@components/select.vue'
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: {
|
||||
SelectOpt
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
equipment: [{id: 1, name: '生产统计'}, {id: 2, name: '仓储监控'}, {id: 3, name: '设备监控'}],
|
||||
equipId: Number(this.$store.getters.equipId),
|
||||
drift: 0,
|
||||
option: [{index: '1', label: '生产统计'}, {index: '2', label: '仓储监控'}, {index: '3', label: '设备监控'}],
|
||||
index: this.$store.getters.equipId,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
fullscreen: false,
|
||||
heightLimit: false
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
@@ -68,20 +75,21 @@ export default {
|
||||
document.body.removeAttribute('class', 'login_bg')
|
||||
},
|
||||
methods: {
|
||||
change (e) {
|
||||
this.index = e
|
||||
},
|
||||
_config () {
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000,
|
||||
equipId: this.equipId
|
||||
equipId: this.index
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
if (this.equipId === 0) {
|
||||
this.$router.push('/homepage')
|
||||
} else if (this.equipId === 1) {
|
||||
if (this.index === '1') {
|
||||
this.$router.push('/prodcount')
|
||||
} else if (this.equipId === 2) {
|
||||
} else if (this.index === '2') {
|
||||
this.$router.push('/storagemonitor')
|
||||
} else if (this.equipId === 3) {
|
||||
} else if (this.index === '3') {
|
||||
this.$router.push('/devicemonitor')
|
||||
}
|
||||
let element = document.documentElement
|
||||
@@ -114,17 +122,28 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.login-container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
z-index 1
|
||||
background url('../assets/images/loginbg.jpg') center center / 100% 100% no-repeat
|
||||
.lizi
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 2
|
||||
_wh(100%, 100%)
|
||||
.body-container
|
||||
position relative
|
||||
z-index 3
|
||||
_wh(100%, 100%)
|
||||
_fj(row, center)
|
||||
margin 0 auto
|
||||
.login_wrap
|
||||
position fixed
|
||||
left 50%
|
||||
top 50%
|
||||
width 410px
|
||||
transform translate3d(-50%, -50%, 0)
|
||||
width 500px
|
||||
background-color rgba(255, 255, 255, 0.8)
|
||||
border-radius 5px
|
||||
overflow hidden
|
||||
.height-limit
|
||||
height 300px
|
||||
.login_tab
|
||||
position relative
|
||||
height 50px
|
||||
@@ -147,35 +166,29 @@ export default {
|
||||
left 0
|
||||
bottom 0
|
||||
.login_cnt
|
||||
position relative
|
||||
width 200%
|
||||
overflow hidden
|
||||
width 100%
|
||||
padding 15px
|
||||
.title-name
|
||||
_font(16px, 28px, #000,,center)
|
||||
margin-bottom 10px
|
||||
.login_card
|
||||
width 50%
|
||||
padding .3rem
|
||||
.card_wrap
|
||||
overflow hidden
|
||||
width 100%
|
||||
.inputOuter
|
||||
position relative
|
||||
_fj(row)
|
||||
height 38px
|
||||
line-height 38px
|
||||
width 100%
|
||||
margin-bottom 12px
|
||||
overflow hidden
|
||||
.inputStyle, select
|
||||
width 260px
|
||||
font-size 0.16rem
|
||||
float right
|
||||
.inputStyle, .select-wraper
|
||||
_wh(calc(100% - 100px), 38px)
|
||||
font-size 15px
|
||||
background none
|
||||
line-height 38px
|
||||
height 38px
|
||||
color #999999
|
||||
text-indent 10px
|
||||
border none
|
||||
box-sizing border-box
|
||||
background-color #ffffff
|
||||
select
|
||||
appearance auto
|
||||
outline none
|
||||
.submit
|
||||
width 100%
|
||||
background-color #2778f3
|
||||
@@ -189,9 +202,8 @@ select
|
||||
outline none
|
||||
font-weight normal
|
||||
label
|
||||
position absolute
|
||||
font-size .16rem
|
||||
width 100px
|
||||
font-size 15px
|
||||
line-height 38px
|
||||
color #333333
|
||||
padding-left 5px
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<section>
|
||||
<t-header index='2'></t-header>
|
||||
<div class="content clearfix">
|
||||
<div class="con1">
|
||||
<div class="top_wrapper">
|
||||
<div class="yard-wrap">
|
||||
<div class="corridor_2">原料仓储监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="corridor_2">成品仓储监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_1">
|
||||
<div class="yard_group_ul yard_group_ul_2">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
@@ -93,35 +93,37 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="con-b con3">
|
||||
<div class="block_h2">
|
||||
<h2>原料库存</h2>
|
||||
<div class="bottom_wrapper">
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>原料库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>重量</span><span>已静置时间</span><span>状态</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>重量</span><span>已静置时间</span><span>状态</span>
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>库存数</span><span>是否满垛</span><span>托盘号</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_weight}}</span><span>{{e.standing_time}}</span><span>{{e.standing_status}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="con-b con3">
|
||||
<div class="block_h2">
|
||||
<h2>成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>库存数</span><span>是否满垛</span><span>托盘号</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<span>{{e.point_name}}</span><span>{{e.material_code}}</span><span>{{e.ivt_qty}}</span><span>{{e.is_full}}</span><span>{{e.vehicle_code}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -159,8 +161,8 @@ export default {
|
||||
// }
|
||||
classOption () {
|
||||
return {
|
||||
step: 0.2, // 数值越大速度滚动越快
|
||||
limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
|
||||
step: 0.6, // 数值越大速度滚动越快
|
||||
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
@@ -319,232 +321,240 @@ export default {
|
||||
.status2
|
||||
color #F7B502
|
||||
.content
|
||||
width calc(100% - 108px)
|
||||
height calc(100% - 108px)
|
||||
margin 12px auto
|
||||
.top_wrapper
|
||||
position relative
|
||||
height 50%
|
||||
.tag_block
|
||||
position absolute
|
||||
// bottom .1rem
|
||||
top 25px
|
||||
right .3rem
|
||||
_fj(row)
|
||||
.tag_type
|
||||
_fj(row)
|
||||
padding-left .3rem
|
||||
.type_color
|
||||
width .1rem
|
||||
height .1rem
|
||||
border-radius 50%
|
||||
margin-right 10px
|
||||
.tag_text
|
||||
font-size .12rem
|
||||
line-height .2rem
|
||||
.blue
|
||||
background #32C5FF !important
|
||||
.green
|
||||
background #30EBC9 !important
|
||||
.gray
|
||||
background #516282 !important
|
||||
.yellow
|
||||
background #E2BB0E !important
|
||||
.orange
|
||||
background #F96700 !important
|
||||
.red
|
||||
background #FF0000 !important
|
||||
.lock
|
||||
border .02rem solid #f00 !important
|
||||
.yard-wrap
|
||||
// height 6.95rem
|
||||
height 100%
|
||||
width 100%
|
||||
padding .15rem .54rem 0
|
||||
.con1
|
||||
position relative
|
||||
// height 5.7rem
|
||||
height 570px
|
||||
.tag_block
|
||||
position absolute
|
||||
// bottom .1rem
|
||||
top 25px
|
||||
right .3rem
|
||||
.tag_type
|
||||
// padding .1rem 0
|
||||
.yard_group
|
||||
width 100%
|
||||
height calc(50% - 46px)
|
||||
clear both
|
||||
&:nth-child(1)
|
||||
margin-bottom 20px
|
||||
.yard_group_ul
|
||||
float left
|
||||
display grid
|
||||
grid-gap 0
|
||||
justify-items center
|
||||
align-items center
|
||||
margin-top -.01rem
|
||||
.yard_group_ul_1
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_2
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(3, 90px)
|
||||
.yard_group_ul_3
|
||||
width 40%
|
||||
grid-template-columns repeat(8, 100% / 8)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(3, 90px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
width 100%
|
||||
// height calc(1.8rem / 2)
|
||||
height 100%
|
||||
box-sizing border-box
|
||||
border 1px solid #32C5FF
|
||||
background #000F2B
|
||||
border-radius 8px
|
||||
.yard_group_p
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
p
|
||||
font-size 12px
|
||||
// line-height 0.28rem
|
||||
line-height 28px
|
||||
height 28px
|
||||
-webkit-text-size-adjust none
|
||||
text-align center
|
||||
white-space nowrap
|
||||
img
|
||||
display block
|
||||
width 60%
|
||||
// height 0.6rem
|
||||
height 60px
|
||||
margin 0 auto
|
||||
.machine_1
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.machine_2
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
.ingbox
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
z-index 97 //
|
||||
.corridor_2
|
||||
_wh(100%,22px)
|
||||
_font(16px, 22px, #fff,,left)
|
||||
margin 12px 12px 12px 0
|
||||
.locate-wrap
|
||||
position absolute
|
||||
width 100%
|
||||
bottom -40%
|
||||
.locate-content
|
||||
position absolute
|
||||
width 2.9rem
|
||||
height 2.56rem
|
||||
z-index 99
|
||||
background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
||||
padding .36rem .15rem
|
||||
.tan_pline
|
||||
width 100%
|
||||
margin 0 auto
|
||||
.tan_p
|
||||
font-size .13rem
|
||||
line-height .36rem
|
||||
height .36rem
|
||||
overflow hidden
|
||||
color #fff
|
||||
.close_btn
|
||||
position absolute
|
||||
top 3%
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.bottom_wrapper
|
||||
width 100%
|
||||
height 50%
|
||||
padding-top 20px
|
||||
_fj(row)
|
||||
.bottom_wrapper_l
|
||||
_wh(calc(50% - 10px), 100%)
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
left .25rem
|
||||
.block_h2
|
||||
_wh(100%, 22px)
|
||||
margin 12px
|
||||
h2
|
||||
font-size 16px
|
||||
line-height 22px
|
||||
.list_scroll_title
|
||||
width calc(100% - 30px)
|
||||
margin 0 15px
|
||||
background #262F52
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
text-align center
|
||||
line-height 32px
|
||||
font-size 12px
|
||||
color rgba(255,255,255,0.60)
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.content-block-scroll
|
||||
width calc(100% - 30px)
|
||||
margin 0 15px 4px 15px
|
||||
height calc(100% - 82px)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
width 100%
|
||||
li
|
||||
width 100%
|
||||
height 38px
|
||||
_fj(row, center)
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
padding-left .3rem
|
||||
.type_color
|
||||
display inline-block
|
||||
width .1rem
|
||||
height .1rem
|
||||
border-radius 50%
|
||||
.tag_text
|
||||
display inline-block
|
||||
font-size .14rem
|
||||
line-height .2rem
|
||||
.blue
|
||||
background #32C5FF !important
|
||||
.green
|
||||
background #30EBC9 !important
|
||||
.gray
|
||||
background #516282 !important
|
||||
.yellow
|
||||
background #E2BB0E !important
|
||||
.orange
|
||||
background #F96700 !important
|
||||
.red
|
||||
background #FF0000 !important
|
||||
.lock
|
||||
border .02rem solid #f00 !important
|
||||
.yard-wrap
|
||||
// height 6.95rem
|
||||
height 100%
|
||||
width 100%
|
||||
// padding .1rem 0
|
||||
.yard_group
|
||||
width 100%
|
||||
// height 1.8rem
|
||||
height 180px
|
||||
clear both
|
||||
.yard_group_ul
|
||||
float left
|
||||
display grid
|
||||
grid-gap 0
|
||||
justify-items center
|
||||
align-items center
|
||||
margin-top -.01rem
|
||||
.yard_group_ul_1
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(20, 100% / 20)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_2
|
||||
width 90%
|
||||
grid-template-columns repeat(18, 100% / 18)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_ul_3
|
||||
width 40%
|
||||
grid-template-columns repeat(8, 100% / 8)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 90px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
width 100%
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
width 18%
|
||||
padding 0 10px
|
||||
font-size 12px
|
||||
text-align center
|
||||
line-height 38px
|
||||
box-sizing border-box
|
||||
border .01rem solid #32C5FF
|
||||
background #000F2B
|
||||
border-radius 8px
|
||||
.yard_group_p
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
p
|
||||
font-size 12px
|
||||
// line-height 0.28rem
|
||||
line-height 28px
|
||||
height 28px
|
||||
-webkit-text-size-adjust none
|
||||
text-align center
|
||||
white-space nowrap
|
||||
img
|
||||
display block
|
||||
width 60%
|
||||
// height 0.6rem
|
||||
height 60px
|
||||
margin 0 auto
|
||||
.machine_1
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/zhong.png) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.machine_2
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 60px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../assets/images/cp1.jpg) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
.ingbox
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
z-index 97 //
|
||||
.corridor_2
|
||||
width 100%
|
||||
height 60px
|
||||
line-height 60px
|
||||
.locate-wrap
|
||||
position absolute
|
||||
width 100%
|
||||
.locate-content
|
||||
position absolute
|
||||
width 2.9rem
|
||||
height 2.56rem
|
||||
z-index 99
|
||||
background center center / 100% 100% url(../assets/images/popover_1.png) no-repeat
|
||||
padding .36rem .15rem
|
||||
.tan_pline
|
||||
width 100%
|
||||
margin 0 auto
|
||||
.tan_p
|
||||
font-size .13rem
|
||||
line-height .36rem
|
||||
height .36rem
|
||||
overflow hidden
|
||||
color #fff
|
||||
.close_btn
|
||||
position absolute
|
||||
top 3%
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.con-b
|
||||
width 49%
|
||||
// height 3.45rem
|
||||
height 345px
|
||||
overflow hidden
|
||||
position relative
|
||||
background center center / 100% 100% url(../assets/images/sctj_bg3.png) no-repeat
|
||||
margin-top .1rem
|
||||
float left
|
||||
.con2
|
||||
margin-right .2rem
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
left .25rem
|
||||
.con3
|
||||
padding 0 .27rem 0 .27rem
|
||||
.block_h2
|
||||
h2
|
||||
font-size .16rem
|
||||
line-height .22rem
|
||||
margin .15rem 0 .15rem 0
|
||||
.list_scroll_title
|
||||
width 100%
|
||||
background #262F52
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
text-align center
|
||||
line-height .32rem
|
||||
font-size 14px
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.content-block-scroll
|
||||
width 100%
|
||||
height calc(100% - 0.6rem)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
li
|
||||
width 100%
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
padding 0 .1rem
|
||||
font-size 12px
|
||||
text-align center
|
||||
line-height .38rem
|
||||
box-sizing border-box
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.foldcricle0
|
||||
position absolute
|
||||
z-index 102
|
||||
@@ -681,4 +691,10 @@ export default {
|
||||
// transform rotate(-120deg)
|
||||
// bottom -2px
|
||||
// left 138px
|
||||
.yard_group_p
|
||||
_wh(100%, 100%)
|
||||
.fontselect
|
||||
_font(12px, 30px, #fff,,)
|
||||
// transform scale(0.8)
|
||||
white-space:nowrap
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user