图表样式

This commit is contained in:
2024-02-23 14:00:50 +08:00
parent ef0aa44935
commit bce2d7d2bc
36 changed files with 783 additions and 2011 deletions

View File

@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
<title>晟华大屏监控</title>
<title>宁德华弘大屏监控</title>
</head>
<body class="clearfix">
<div id="app"></div>

View File

@@ -52,8 +52,8 @@ export default {
<style lang="stylus" scoped>
.data_box
position absolute
right 30px
top 21px
right 15px
top 30px
width 300px
height 39px
display: flex

BIN
src/images/bg-button.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

View File

Before

Width:  |  Height:  |  Size: 488 KiB

After

Width:  |  Height:  |  Size: 488 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 616 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 708 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 748 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 72 KiB

View File

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
src/images/header.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

BIN
src/images/header_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/images/top.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

View File

@@ -9,12 +9,14 @@ import * as echarts from 'echarts'
import 'default-passive-events'
import VueParticles from 'vue-particles'
import scroll from 'vue-seamless-scroll'
import {Message} from 'element-ui'
import {Message, Select, Option} from 'element-ui'
Vue.prototype.$echarts = echarts
Vue.use(VueParticles)
Vue.use(scroll)
Vue.prototype.$message = Message
Vue.use(Select)
Vue.use(Option)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({

View File

@@ -35,11 +35,16 @@
</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>
<!-- <selectOpt :option="option" :index="index" @change="change"></SelectOpt> -->
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</div>
@@ -63,8 +68,8 @@ export default {
return {
loginname: '',
password: '',
option: [{index: '1', label: '新-左'}, {index: '2', label: '新-右'}],
index: this.$store.getters.equipId,
options: [{value: '1', label: '主页'}],
value: this.$store.getters.equipId,
baseUrl: this.$store.getters.baseUrl,
setTime: this.$store.getters.setTime / 1000,
fullscreen: false
@@ -76,9 +81,6 @@ export default {
const screenHeight = window.screen.height
alert('宽:' + screenWidth + ';' + '高:' + screenHeight + ';')
},
change (e) {
this.index = e
},
_config () {
if (this.setTime > 10800) {
this.$message({
@@ -90,13 +92,11 @@ export default {
let obj = {
baseUrl: this.baseUrl,
setTime: this.setTime * 1000,
equipId: this.index
equipId: this.value
}
this.$store.dispatch('setConfig', obj)
if (this.index === '1') {
this.$router.push('/lindex')
} else if (this.index === '2') {
this.$router.push('/rindex')
if (this.value === '1') {
this.$router.push('/home')
}
let element = document.documentElement
if (this.fullscreen) {
@@ -133,7 +133,7 @@ export default {
position relative
_wh(100%, 100%)
z-index 1
background center / 100% 100% url('../images/bg-login.jpg') no-repeat
background center / 100% 100% url('../images/bg.jpg') no-repeat
.lizi
position absolute
top 0
@@ -181,20 +181,22 @@ export default {
width 100%
.inputOuter
_fj(row)
height 38px
line-height 38px
height 40px
line-height 40px
width 100%
margin-bottom 12px
.inputStyle, .select-wraper
_wh(calc(100% - 116px), 38px)
font-size 15px
.inputStyle
_wh(calc(100% - 116px), 40px)
font-size 14px
background none
line-height 38px
color #999999
text-indent 10px
line-height 40px
color #606266
padding 0 15px
border none
box-sizing border-box
background-color #ffffff
.select-wraper
_wh(calc(100% - 116px), 40px)
.submit
width 100%
background-color #2778f3
@@ -215,6 +217,8 @@ export default {
label
width 115px
font-size 15px
line-height 38px
line-height 40px
color #333333
.el-select
width 100%
</style>

View File

@@ -1,117 +0,0 @@
<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>

View File

@@ -1,10 +0,0 @@
<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>

View File

@@ -1,95 +0,0 @@
<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>

View File

@@ -1,174 +0,0 @@
<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>

File diff suppressed because it is too large Load Diff

View File

@@ -1,32 +0,0 @@
<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>

View File

@@ -2,9 +2,7 @@ import Vue from 'vue'
import Router from 'vue-router'
const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
const lIndex = r => require.ensure([], () => r(require('@page/modules/home/left/index')), 'newscreen')
const rIndex = r => require.ensure([], () => r(require('@page/modules/home/right/index')), 'newscreen')
const pinye = r => require.ensure([], () => r(require('@page/modules/pinye')), 'pinye')
const home = r => require.ensure([], () => r(require('@page/modules/home')), 'home')
Vue.use(Router)
@@ -20,16 +18,8 @@ export default new Router({
component: Setup
},
{
path: '/lindex',
component: lIndex
},
{
path: '/rindex',
component: rIndex
},
{
path: '/pinye',
component: pinye
path: '/home',
component: home
}
]
})