拷贝晟华新大屏
This commit is contained in:
220
src/pages/Setup.vue
Normal file
220
src/pages/Setup.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<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="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>
|
||||
<button class="btn" @click="_config">配置</button>
|
||||
<!-- <button class="btn" @click="getCc">获取尺寸</button> -->
|
||||
<!-- <div class="submit"><input type="submit" value="配 置" class="btn" @click="_config"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectOpt from '@components/select.vue'
|
||||
export default {
|
||||
components: {
|
||||
SelectOpt
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loginname: '',
|
||||
password: '',
|
||||
option: [{index: '1', label: '新-左'}, {index: '2', label: '新-右'}],
|
||||
index: this.$store.getters.equipId,
|
||||
baseUrl: this.$store.getters.baseUrl,
|
||||
setTime: this.$store.getters.setTime / 1000,
|
||||
fullscreen: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCc () {
|
||||
const screenWidth = window.screen.width
|
||||
const screenHeight = window.screen.height
|
||||
alert('宽：' + screenWidth + ';' + '高：' + screenHeight + ';')
|
||||
},
|
||||
change (e) {
|
||||
this.index = e
|
||||
},
|
||||
_config () {
|
||||
if (this.setTime > 10800) {
|
||||
this.$message({
|
||||
message: '刷新时间设置过长',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
baseUrl: this.baseUrl,
|
||||
setTime: this.setTime * 1000,
|
||||
equipId: this.index
|
||||
}
|
||||
this.$store.dispatch('setConfig', obj)
|
||||
if (this.index === '1') {
|
||||
this.$router.push('/lindex')
|
||||
} else if (this.index === '2') {
|
||||
this.$router.push('/rindex')
|
||||
}
|
||||
let element = document.documentElement
|
||||
if (this.fullscreen) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
} else {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen()
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen()
|
||||
} else if (element.msRequestFullscreen) {
|
||||
// IE11
|
||||
element.msRequestFullscreen()
|
||||
}
|
||||
}
|
||||
this.fullscreen = !this.fullscreen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.login-container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
z-index 1
|
||||
background center / 100% url('../images/bg-login.jpg') 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
|
||||
width 500px
|
||||
background-color rgba(255, 255, 255, 0.8)
|
||||
border-radius 5px
|
||||
.login_tab
|
||||
position relative
|
||||
height 50px
|
||||
font-size 0
|
||||
background-color rgba(255, 255, 255, 0.9)
|
||||
border-radius 5px 5px 0 0
|
||||
.login_tab_item
|
||||
float left
|
||||
width 50%
|
||||
font-size 16px
|
||||
line-height 50px
|
||||
color #333333
|
||||
text-align center
|
||||
cursor pointer
|
||||
.login_tab_line
|
||||
position absolute
|
||||
width 50%
|
||||
height 2px
|
||||
background-color #2778f3
|
||||
left 0
|
||||
bottom 0
|
||||
.login_cnt
|
||||
width 100%
|
||||
padding 15px
|
||||
.title-name
|
||||
_font(16px, 28px, #000,,center)
|
||||
margin-bottom 10px
|
||||
.login_card
|
||||
width 100%
|
||||
.inputOuter
|
||||
_fj(row)
|
||||
height 38px
|
||||
line-height 38px
|
||||
width 100%
|
||||
margin-bottom 12px
|
||||
.inputStyle, .select-wraper
|
||||
_wh(calc(100% - 116px), 38px)
|
||||
font-size 15px
|
||||
background none
|
||||
line-height 38px
|
||||
color #999999
|
||||
text-indent 10px
|
||||
border none
|
||||
box-sizing border-box
|
||||
background-color #ffffff
|
||||
.submit
|
||||
width 100%
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
.btn
|
||||
background-color #2778f3
|
||||
border-radius 3px
|
||||
margin-top 5px
|
||||
height 40px
|
||||
font-size 18px
|
||||
color #fff
|
||||
line-height 39px
|
||||
width 100%
|
||||
outline none
|
||||
border none
|
||||
font-weight normal
|
||||
label
|
||||
width 115px
|
||||
font-size 15px
|
||||
line-height 38px
|
||||
color #333333
|
||||
</style>
|
||||
117
src/pages/modules/home/left/index.vue
Normal file
117
src/pages/modules/home/left/index.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="n_container">
|
||||
<!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
|
||||
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
|
||||
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
|
||||
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
|
||||
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
|
||||
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
|
||||
<div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div> -->
|
||||
<div class="n_header">
|
||||
<div class="n_header_h1">
|
||||
<h1>生产数据</h1>
|
||||
</div>
|
||||
<div class="n_header_h2">
|
||||
<h2>辽宁晟华耐火材料有限公司</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_bg"></div>
|
||||
<div class="button_bg"></div>
|
||||
<div class="n_body_container">
|
||||
<div class="n_left_wraper">
|
||||
<left-page></left-page>
|
||||
</div>
|
||||
<div class="n_right_wraper">
|
||||
<right-page></right-page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import leftPage from './left.vue'
|
||||
import rightPage from './right.vue'
|
||||
export default {
|
||||
components: {
|
||||
leftPage,
|
||||
rightPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.n_container
|
||||
position relative
|
||||
width 100%
|
||||
height 100%
|
||||
background center / 100% url('../../../../images/bg-home_left.jpg') no-repeat
|
||||
overflow hidden
|
||||
.n_header
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
width 100%
|
||||
height 181px
|
||||
background center / 100% url('../../../../images/bg-top_left.png') no-repeat
|
||||
.n_header_h1
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top 26px
|
||||
h1
|
||||
font-size: 60px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: transparent;
|
||||
line-height: 44px;
|
||||
opacity: 0.89;
|
||||
letter-spacing 18px
|
||||
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||||
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
text-align right
|
||||
margin-right -9px
|
||||
.n_header_h2
|
||||
position absolute
|
||||
top 18px
|
||||
left 29px
|
||||
width 562px
|
||||
height 31px
|
||||
h2
|
||||
font-size: 42px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: transparent;
|
||||
line-height: 29px;
|
||||
background: linear-gradient(0deg, #B6C3D3 0%, #E3E9F2 53.3154296875%, #FEFEFE 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
.left_bg
|
||||
position absolute
|
||||
left 0
|
||||
top 111px
|
||||
width 34px
|
||||
height 839px
|
||||
background center / 100% url('../../../../images/bg-left.png') no-repeat
|
||||
.button_bg
|
||||
position absolute
|
||||
left 0
|
||||
bottom 0
|
||||
width 100%
|
||||
height 46px
|
||||
background center / 100% url('../../../../images/bg-button_left.png') no-repeat
|
||||
.n_body_container
|
||||
width 100%
|
||||
height 100%
|
||||
padding 125px 0 50px 50px
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.n_left_wraper
|
||||
width 935px
|
||||
height 100%
|
||||
.n_right_wraper
|
||||
width calc(100% - 965px)
|
||||
height 100%
|
||||
padding-top 5px
|
||||
</style>
|
||||
1225
src/pages/modules/home/left/left.vue
Normal file
1225
src/pages/modules/home/left/left.vue
Normal file
File diff suppressed because it is too large
Load Diff
10
src/pages/modules/home/left/right.vue
Normal file
10
src/pages/modules/home/left/right.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div class="right_wraper"></div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.right_wraper
|
||||
_wh(100%, 100%)
|
||||
background center / 100% 100% url('../../../../images/bg-center_left.jpg') no-repeat
|
||||
</style>
|
||||
95
src/pages/modules/home/right/index.vue
Normal file
95
src/pages/modules/home/right/index.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="n_container">
|
||||
<div class="n_header">
|
||||
<div class="n_header_h1">
|
||||
<h1>控制中心</h1>
|
||||
</div>
|
||||
<v-time></v-time>
|
||||
</div>
|
||||
<div class="right_bg"></div>
|
||||
<div class="button_bg"></div>
|
||||
<div class="n_body_container">
|
||||
<div class="n_left_wraper">
|
||||
<left-page></left-page>
|
||||
</div>
|
||||
<div class="n_right_wraper">
|
||||
<right-page></right-page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import leftPage from './left.vue'
|
||||
import rightPage from './right.vue'
|
||||
import vTime from '@components/time.vue'
|
||||
export default {
|
||||
components: {
|
||||
leftPage,
|
||||
rightPage,
|
||||
vTime
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.n_container
|
||||
position relative
|
||||
width 100%
|
||||
height 100%
|
||||
background center / 100% url('../../../../images/bg-home_right.jpg') no-repeat
|
||||
overflow hidden
|
||||
.n_header
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
width 100%
|
||||
height 181px
|
||||
background center / 100% url('../../../../images/bg-top_right.png') no-repeat
|
||||
.n_header_h1
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top 26px
|
||||
h1
|
||||
font-size: 60px;
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-weight: 400;
|
||||
color: transparent;
|
||||
line-height: 44px;
|
||||
opacity: 0.89;
|
||||
letter-spacing 18px
|
||||
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
|
||||
filter: drop-shadow(#092F6D 1px 4px 1px);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
text-align left
|
||||
padding-left 9px
|
||||
.right_bg
|
||||
position absolute
|
||||
right 0
|
||||
top 111px
|
||||
width 34px
|
||||
height 839px
|
||||
background center / 100% url('../../../../images/bg-right.png') no-repeat
|
||||
.button_bg
|
||||
position absolute
|
||||
left 0
|
||||
bottom 0
|
||||
width 100%
|
||||
height 46px
|
||||
background center / 100% url('../../../../images/bg-button_right.png') no-repeat
|
||||
.n_body_container
|
||||
width 100%
|
||||
height 100%
|
||||
padding 125px 50px 50px 0
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.n_left_wraper
|
||||
width calc(100% - 965px)
|
||||
height 100%
|
||||
padding-top 5px
|
||||
.n_right_wraper
|
||||
width 935px
|
||||
height 100%
|
||||
</style>
|
||||
174
src/pages/modules/home/right/left.vue
Normal file
174
src/pages/modules/home/right/left.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="left_wraper">
|
||||
<div class="table_wraper_1">
|
||||
<div class="scroll_wrap">
|
||||
<div class="scroll_title">
|
||||
<p>生产完成</p>
|
||||
</div>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="productReport" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in productReport" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.create_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.material_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.number}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table_wraper_2">
|
||||
<div class="scroll_wrap">
|
||||
<div class="scroll_title">
|
||||
<p>设备状态</p>
|
||||
</div>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="deviceReport" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1 scroll-ul_2">
|
||||
<li v-for="(e, i) in deviceReport" :key="i">
|
||||
<div class="scroll-ul_1_div">{{e.failure_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_1_div">
|
||||
<span class="state" :class="'state_' + e.failure_info"></span>
|
||||
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.failure_info)]}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { homepageEquipment } from '@js/mork2.js'
|
||||
import { homepageEquipment } from '@js/getData2.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
productReport: [],
|
||||
deviceReport: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption1 () {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
||||
hoverStop: true, // 是否开启鼠标悬停stop
|
||||
direction: 1, // 0向下 1向上 2向左 3向右
|
||||
openWatch: true, // 开启数据实时监控刷新dom
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this._homepageEquipment()
|
||||
this.refresh()
|
||||
},
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._homepageEquipment()
|
||||
}, this.interTime)
|
||||
},
|
||||
async _homepageEquipment () {
|
||||
let res = await homepageEquipment()
|
||||
this.productReport = [...res.productReport]
|
||||
this.deviceReport = [...res.deviceReport]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@style/mixin'
|
||||
.left_wraper
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
background center / 100% 100% url('../../../../images/bg-center_right.jpg') no-repeat
|
||||
.table_wraper_1
|
||||
position absolute
|
||||
top 678px
|
||||
right 408px
|
||||
_wh(358px, 195px)
|
||||
.table_wraper_2
|
||||
position absolute
|
||||
top 678px
|
||||
right 30px
|
||||
_wh(358px, 195px)
|
||||
.scroll_wrap
|
||||
_wh(100%, 100%)
|
||||
.scroll_title
|
||||
_wh(100%, 31px)
|
||||
background center / 100% 100% url('../../../../images/bg-title_3.png') no-repeat
|
||||
padding 8px 8px 0 39px
|
||||
p
|
||||
font-size 20px
|
||||
font-family: 'YouSheBiaoTiHei';
|
||||
font-style: italic;
|
||||
color: transparent;
|
||||
line-height 20px
|
||||
background: linear-gradient(0deg, #F9FEFF 0%, #F5FCFF 53.3154296875%, #BAE9FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
.scroll_container_1
|
||||
width 100%
|
||||
height calc(100% - 31px)
|
||||
overflow hidden
|
||||
.scroll-ul_1
|
||||
li
|
||||
_wh(100%, 40px)
|
||||
border-bottom 1px solid rgba(122,159,224,0.17)
|
||||
background-color rgba(31,46,73,0.9)
|
||||
opacity: 0.9
|
||||
.scroll-ul_1_div
|
||||
float left
|
||||
height 40px
|
||||
_fj(row, center)
|
||||
_font(16px, 16px, #B2BBD7,,center)
|
||||
font-family: 'SourceHanSansCN-Regular';
|
||||
font-style: italic;
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
// white-space nowrap
|
||||
padding 0 5px
|
||||
overflow hidden
|
||||
&:nth-child(1)
|
||||
width 29%
|
||||
&:nth-child(2)
|
||||
width 51%
|
||||
&:nth-child(3)
|
||||
width 20%
|
||||
.state
|
||||
display block
|
||||
_wh(20px, 14px)
|
||||
.state_name
|
||||
width calc(100% - 20px)
|
||||
.scroll-ul_2
|
||||
li
|
||||
.scroll-ul_1_div
|
||||
&:nth-child(1)
|
||||
width 47%
|
||||
&:nth-child(2)
|
||||
width 30%
|
||||
&:nth-child(3)
|
||||
width 23%
|
||||
.state_0
|
||||
background center / 100% 100% url('../../../../images/state_0.png') no-repeat
|
||||
.state_1
|
||||
background center / 100% 100% url('../../../../images/state_1.png') no-repeat
|
||||
.state_2
|
||||
background center / 100% 100% url('../../../../images/state_2.png') no-repeat
|
||||
.state_3
|
||||
background center / 100% 100% url('../../../../images/state_3.png') no-repeat
|
||||
</style>
|
||||
1025
src/pages/modules/home/right/right.vue
Normal file
1025
src/pages/modules/home/right/right.vue
Normal file
File diff suppressed because it is too large
Load Diff
32
src/pages/modules/pinye.vue
Normal file
32
src/pages/modules/pinye.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<div class="n_left_wraper">
|
||||
<left-page></left-page>
|
||||
</div>
|
||||
<div class="n_left_wraper">
|
||||
<right-page></right-page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import leftPage from './home/left/index.vue'
|
||||
import rightPage from './home/right/index.vue'
|
||||
export default {
|
||||
components: {
|
||||
leftPage,
|
||||
rightPage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.box
|
||||
width 100%
|
||||
height 100%
|
||||
display: flex
|
||||
justify-content: space-between;
|
||||
.n_left_wraper
|
||||
width 50%
|
||||
height 100%
|
||||
</style>
|
||||
Reference in New Issue
Block a user