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

xghy大屏

Browse Source
This commit is contained in:
xiangxy
2026-03-18 16:49:17 +08:00
parent b39c19a731
commit d242ff1f88
1 changed files with 225 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

514
src/pages/XghyScreen.vue
View File

@@ -1,19 +1,7 @@
<template>
<section class="bg">
<header>
<p>哈工汽轮机（镇江）有限责任公司数字化焊材库智慧大屏</p>
<div class="data_box clearfix">
<div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div>
<div class="date_item time clearfix">
<div class="tiem_item hours">{{hours}}</div>
<div class="colon">:</div>
<div class="tiem_item minutes">{{minutes}}</div>
<div class="colon">:</div>
<div class="tiem_item seconds">{{seconds}}</div>
</div>
</div>
</header>
<t-header title="哈工汽轮机（镇江）有限责任公司数字化焊材库智慧大屏">
</t-header>
<div class="container">
<div class="left_wrap">
<div class="item_wrap">
@@ -116,9 +104,11 @@
</div>
</div>
<div class="center_wrap">
<div class="item_wrap_2 item_wrap_3">
</div>
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
<div class="item_tip_left">AGV监控</div>
</div>
<div class="item_content_1">
<div id="echart_d03" style="width: 100%; height: 100%"></div>
@@ -126,60 +116,28 @@
</div>
<div class="item_wrap_1 inlblock">
<div class="item_tip item_tip_01">
<div class="item_tip_left">运行设备大类产能比</div>
<div class="item_tip_left">温湿度监控</div>
</div>
<div class="item_content_1">
<div id="echart_d04" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_2 item_wrap_3">
<div class="item_tip item_tip_2">
<div class="item_tip_left">设备综合统计</div>
</div>
<div class="item_content_1">
<div id="echart_d05" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap_2">
<div class="item_tip item_tip_2">
<div class="item_tip_left">设备状态列表</div>
</div>
<div class="item_content_2">
<div class="scroll_wrap">
<ul class="scroll_tab_1">
<li>设备编号</li>
<li>设备名称</li>
<li>设备大类</li>
<li>设备状态</li>
<li>产量</li>
<li>开机时间</li>
<li>关机时间</li>
<li>生产日期</li>
</ul>
<div class="scroll_container_1">
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in array1" :key="i">
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div"><span :style="{'background-color': ddddcolor}"><i></i></span>{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
<div class="scroll-ul_1_div">{{e.material_code}}</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</div>
<div class="right_wrap">
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">设备TOP10故障次数</div>
<div class="item_tip_left">班组焊材领退</div>
</div>
<!-- <div class="item_content_1">
<div id="echart_d10" style="width: 100%; height: 100%"></div>
</div> -->
<div class="item_content_1">
<div id="echart_d05" style="width: 100%; height: 100%"></div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">焊材使用TOP5</div>
</div>
<div class="item_content_1">
<div id="echart_d08" style="width: 100%; height: 100%"></div>
@@ -192,10 +150,11 @@
<div class="item_content_4">
<div class="scroll_wrap">
<ul class="scroll_tab_2">
<li>设备编号</li>
<li>设备名称</li>
<li>报警原因</li>
<li>报警时间</li>
<li>时间</li>
<li>类型</li>
<li>物料</li>
<li>数量</li>
<li>领退人</li>
</ul>
<div class="scroll_container_2">
<vue-seamless-scroll :data="array2" :class-option="defaultOption2">
@@ -205,6 +164,7 @@
<div class="scroll-ul_2_div">{{e.material_code}}</div>
<div class="scroll-ul_2_div">{{e.material_code}}</div>
<div class="scroll-ul_2_div">{{e.material_code}}</div>
<div class="scroll-ul_2_div">{{e.material_code}}</div>
</li>
</ul>
</vue-seamless-scroll>
@@ -212,17 +172,6 @@
</div>
</div>
</div>
<div class="item_wrap">
<div class="item_tip">
<div class="item_tip_left">近30天设备故障统计</div>
</div>
<!-- <div class="item_content_5">
<div id="echart_d4" style="width: 100%; height: 100%"></div>
</div> -->
<div class="item_content_1">
<div id="echart_d10" style="width: 100%; height: 100%"></div>
</div>
</div>
</div>
</div>
<section class="bottom"></section>
@@ -230,9 +179,13 @@
</template>
<script>
import THeader from '@components/header.vue'
import * as echarts from 'echarts'
export default {
name: 'MonitoringScreen2',
name: 'XghyScreen',
components: {
THeader
},
data () {
return {
ddddcolor: '#f00',
@@ -342,6 +295,7 @@ export default {
myCharts4: '',
array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}],
array2: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
array01: [{material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}, {material_code: '01'}],
num: 8
}
},
@@ -371,10 +325,6 @@ export default {
}
}
},
created () {
this.updateTime()
this.timer = window.setInterval(this.updateTime, 1000)
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
@@ -382,7 +332,7 @@ export default {
},
mounted () {
this.setEchart08() // 右1
this.setEchart10() // 右3
// this.setEchart10() // 右3
this.setEchart01() // 左1
this.setEchart02() // 左3
this.setEchart03()
@@ -396,24 +346,6 @@ export default {
let fontSize = clientWidth * res / 1920
return fontSize
},
updateTime () {
let cd = new Date()
let year = cd.getFullYear()
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let myddy = new Date().getDay()
let week = weekday[myddy]
this.time = `${hh}:${mm}:${ss}`
this.hours = `${hh}`
this.minutes = `${mm}`
this.seconds = `${ss}`
this.date = `${year}年${month}月${date}日`
this.week = `${week}`
},
setEchart08 () {
// var myColor = ['#81E7ED'] // 内柱状图颜色
var dataLine = [5, 66, 33, 25, 10]
@@ -617,150 +549,184 @@ export default {
})
},
setEchart04 () {
// 多列柱状图
// 到外面壳边框的距离
let option = {
grid: {
top: this.fontSize(50),
left: 0,
right: this.fontSize(25),
bottom: 0,
containLabel: true
},
// 图例
legend: {
// icon: 'rect',
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '最大产能', itemStyle: {color: '#0E90FD'}}, {name: '平均产能', itemStyle: {color: '#33CCCC'}}, {name: '最小产能', itemStyle: {color: '#EAAD24'}}]
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
data: this.xData
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
splitNumber: 2,
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: {
show: true,
lineStyle: {
type: [8, 4],
dashOffset: 4,
color: '#8FABBF',
opacity: 0.2
}
}
},
series: [
{
type: 'bar', // 形状为柱状图
data: this.yData,
name: '最大产能', // legend属性
barGap: '150%', // 柱图间距
barWidth: '8', // 柱图宽度
itemStyle: {
normal: {
show: true,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
}
},
{
type: 'line', // 形状为折线图
data: this.taskDate2,
name: '最小产能', // legend属性
barGap: '150%', // 柱图间距
barWidth: '8', // 柱图宽度
itemStyle: {
normal: {
show: true,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B68845',
opacity: 1
},
{
offset: 1,
color: 'rgba(134,98,45,0.25)',
opacity: 0.25
}
])
}
}
},
{
type: 'bar', // 形状为柱状图
data: this.taskDate,
name: '平均产能', // legend属性
barGap: '150%', // 柱图间距
barWidth: '8', // 柱图宽度
itemStyle: {
normal: {
show: true,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#33CCCC',
opacity: 1
},
{
offset: 1,
color: 'rgba(31,89,89,0.25)',
opacity: 0.25
}
])
}
}
}
]
// 时间点数组 (保留原始两个0:00, 为了区分但尊重数据)
const timePoints = [
"0:00", "2:24", "4:43", "7:12", "9:36",
"12:00", "14:24", "16:48", "19:12", "21:36", "0:00"
];
// 温度数据 (单位: 摄氏度, 保留一位小数)
const temperatureData = [
8.3, 8.7, 8.5, 9.0, 10.5,
8.3, 8.5, 9.5, 8.3, 8.7, 9.0
];
// 湿度数据 (单位: %RH, 保留一位小数)
const humidityData = [
33.0, 34.0, 30.0, 35.0, 34.0,
33.0, 30.0, 35.0, 33.0, 30.0, 32.0
];
// 校验长度
if (timePoints.length !== temperatureData.length || timePoints.length !== humidityData.length) {
console.error('数据长度不匹配，请检查解析');
return;
}
let option = {
// 标题 (可自行添加)
// title: {
// text: '温湿度变化曲线',
// subtext: '数据源自图片表格 · 横轴为时间',
// left: 'center',
// top: 0,
// textStyle: { fontSize: 16, fontWeight: 'normal', color: '#2d3748' },
// subtextStyle: { fontSize: 12, color: '#718096' }
// },
// 提示框
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: function(params) {
// 自定义提示框: 显示时间、温度和湿度
let time = params[0].axisValue; // 横轴时间
let res = `<b>时间: ${time}</b><br/>`;
params.forEach(item => {
if (item.seriesName === '温度') {
res += `🌡️ 温度: ${item.value} °C<br/>`;
} else if (item.seriesName === '湿度') {
res += `💧 湿度: ${item.value} %RH<br/>`;
}
});
return res;
}
},
// 图例
legend: {
data: ['温度', '湿度'],
orient: 'horizontal',
left: 'right',
top: 6,
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
itemGap: 30.86,
textStyle: {
color: '#fff',
fontSize: 14,
lineHeight: 14
},
},
// 网格 (调整边距，为标题留空间)
grid: {
left: '8%',
right: '6%',
bottom: '10%',
top: '20%',
containLabel: true
},
// 横轴: 时间 (category)
xAxis: {
type: 'category',
data: timePoints,
name: '时间',
nameLocation: 'middle',
nameGap: 30,
nameTextStyle: { fontWeight: 500, color: '#4a5568' },
// axisLine: { lineStyle: { color: '#a0aec0' } },
axisTick: { alignWithLabel: true },
// axisLabel: {
// rotate: 0, // 如果标签重叠可开启旋转，这里11个点刚好
// fontSize: 12,
// color: '#2d3748',
// fontWeight: 400,
// // 针对首尾两个0:00加一个小提示 (可选，但为了清晰我们不额外处理，直接显示)
// },
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
interval: 0,
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
splitLine: { show: false } // 不显示网格竖线
},
// 纵轴: 单一数值轴 (温度和湿度共用)
yAxis: {
type: 'value',
name: '数值 (℃ / %RH)',
nameTextStyle: { fontWeight: 500, color: '#8FABBF' },
// axisLabel: { fontSize: 12, color: '#2d3748' },
splitLine: { lineStyle: { type: 'dashed', color: '#e2e8f0' } },
// 让纵轴范围稍微宽松一些，包含所有数据 (0~40可以同时覆盖温湿度)
min: 0,
max: 40,
// axisLine: { show: false }
axisLine: {
show: true,
lineStyle: {
width: 2,
color: '#8FABBF'
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#8FABBF',
fontSize: 14
}
},
},
// 系列: 两条折线
series: [
{
name: '温度',
type: 'line',
data: temperatureData,
symbol: 'circle',
symbolSize: 8,
lineStyle: { width: 3, color: '#e53e3e' }, // 红色系
itemStyle: { color: '#c53030' },
smooth: false, // 保持折线，不进行平滑（符合原数据）
connectNulls: false,
markPoint: {
data: [
{ type: 'max', name: '最高温' },
{ type: 'min', name: '最低温' }
]
},
tooltip: { valueSuffix: ' °C' }
},
{
name: '湿度',
type: 'line',
data: humidityData,
symbol: 'diamond',
symbolSize: 10,
lineStyle: { width: 3, color: '#3182ce' }, // 蓝色系
itemStyle: { color: '#2c5282' },
smooth: false,
connectNulls: false,
markPoint: {
data: [
{ type: 'max', name: '最高湿' },
{ type: 'min', name: '最低湿' }
]
},
tooltip: { valueSuffix: ' %RH' }
}
],
// 数据缩放 (如果感觉横轴密集，可启用，这里先不加)
dataZoom: [],
// 颜色系列 (全局不强制，已在系列中指定)
color: ['#e53e3e', '#3182ce']
};
let echart = document.getElementById('echart_d04')
this.myCharts04 = this.$echarts.init(echart)
this.myCharts04.setOption(option)
@@ -974,7 +940,7 @@ export default {
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '运行设备', itemStyle: {color: '#0E90FD'}}, {name: '暂未生产设备', itemStyle: {color: '#07E083'}}, {name: '关机设备', itemStyle: {color: '#EAAD24'}}, {name: '故障设备', itemStyle: {color: '#CC6060'}}]
data: [{name: '领料', itemStyle: {color: '#0E90FD'}}, {name: '退料', itemStyle: {color: '#07E083'}}, {name: '消耗', itemStyle: {color: '#EAAD24'}}]
},
xAxis: {
type: 'category',
@@ -995,7 +961,7 @@ export default {
fontSize: 14
}
},
data: ['无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1', '无屑下料机1']
data: ['班组1', '班组2', '班组3', '班组4']
},
yAxis: {
type: 'value',
@@ -1024,7 +990,7 @@ export default {
},
series: [
{
name: '运行设备',
name: '领料',
type: 'bar',
barWidth: '8',
barGap: '100%', // 柱图间距
@@ -1044,10 +1010,10 @@ export default {
])
}
},
data: ['390', '390', '390', '390', '390', '390']
data: ['390', '390', '390', '390']
},
{
name: '暂未生产设备',
name: '退料',
type: 'bar',
barWidth: '8',
barGap: '100%', // 柱图间距
@@ -1067,10 +1033,10 @@ export default {
])
}
},
data: ['230', '230', '230', '230', '230', '230']
data: ['230', '230', '230', '230']
},
{
name: '关机设备',
name: '消耗',
type: 'bar',
barWidth: '8',
barGap: '100%', // 柱图间距
@@ -1090,30 +1056,7 @@ export default {
])
}
},
data: ['210', '210', '210', '210', '210', '210']
},
{
name: '故障设备',
type: 'bar',
barWidth: '8',
barGap: '100%', // 柱图间距
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#CC6060',
opacity: 1
},
{
offset: 1,
color: 'rgba(123,33,33,0.25)',
opacity: 0.25
}
])
}
},
data: ['110', '110', '110', '110', '110', '110']
data: ['210', '210', '210', '210']
}
]
}
@@ -1397,16 +1340,8 @@ export default {
_wh(100%, 100%)
background #050d20 center center / 100% 100% url(../assets/images/screen1/bg.png) no-repeat
overflow hidden
header
width 100%
height 1rem
position relative
background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
p
font-family "PangMenZhengDao"
_font(.26rem, 1rem, #ffffff, lighter, center)
letter-spacing .05rem
text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
.bg >>> header p
font-size: 0.26rem;
.data_box
position absolute
right 0
@@ -1508,9 +1443,10 @@ header
_wh(48.8%, calc((100% - .4rem) / 3))
.item_wrap_2
// _wh(100%, calc((100% - .4rem) / 2))
_wh(100%, calc((100% - .4rem) / 3))
_wh(100%, calc((100% - .4rem) / 3 * 2))
.item_wrap_3
margin-top .26rem
margin-bottom .26rem
background center bottom / 100% 100% url(../assets/images/screen1/xghy-bg.jpg) no-repeat
.inlblock
display inline-block
margin-right 0.08rem
@@ -1571,7 +1507,7 @@ header
border-bottom .01rem solid rgba(8,205,248,0.3)
li
float left
width 25%
width 20%
_font(.14rem,.4rem,#78B1DE,,center)
word-wrap break-word
word-break break-all
@@ -1580,7 +1516,7 @@ header
overflow hidden
box-sizing border-box
&:nth-child(4)
width 25%
width 20%
.scroll_container_2
width 100%
height calc(100% - .4rem)
@@ -1594,7 +1530,7 @@ header
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div
float left
_wh(25%, .44rem)
_wh(20%, .44rem)
_fj(center)
_font(.14rem, .44rem, #fff,,center)
word-wrap break-word
@@ -1603,7 +1539,7 @@ header
padding 0 .02rem
overflow hidden
&:nth-child(4)
width 25%
width 20%
.right_1_up
clear both
_wh(100%, 1.6rem)