Skip to content

H
hp-smart
Commit 14a0387c by lyy
Options

设备管理驾驶舱

parent 872601a9
Showing with 128 additions and 113 deletions
src/main/webapp/HP/BI/HPBI004.jsp
...@@ -196,10 +196,10 @@ ...@@ -196,10 +196,10 @@
<manage-echarts :option="item.option" :width="17" :height="24"></manage-echarts> <manage-echarts :option="item.option" :width="17" :height="24"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption1" :width="17" :height="24"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption1" :width="17" :height="24"></manage-echarts>
</div> </div>
</div> </div>
<div class="left-device device" style="margin-left: 2vw;"> <div class="left-device device" style="margin-left: 2vw;">
...@@ -208,10 +208,10 @@ ...@@ -208,10 +208,10 @@
<manage-echarts :option="item.option" :width="17" :height="24"></manage-echarts> <manage-echarts :option="item.option" :width="17" :height="24"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption2" :width="17" :height="24"></manage-echarts>
</div> </div>
<div class="device-echarts-background"> <div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts> <manage-echarts :option="lineOption2" :width="17" :height="24"></manage-echarts>
</div> </div>
</div> </div>
</div> </div>
...@@ -240,106 +240,8 @@ ...@@ -240,106 +240,8 @@
optionDate2: {}, optionDate2: {},
option3: {}, option3: {},
optionDate3: {}, optionDate3: {},
testOption1:{ testOption1:{},
title: { testOption2:{},
left: 'left',
text: '设备作业时长/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '13%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
},
testOption2:{
title: {
left: 'left',
text: '设备故障次数/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
data: ['24', '24', '24', '24', '24', '24', '24'],
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '13%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: [24, 24, 24, 24, 24, 24, 24],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
},
factory:'', factory:'',
factoryList:[], factoryList:[],
dataPicker: '', dataPicker: '',
...@@ -353,6 +255,7 @@ ...@@ -353,6 +255,7 @@
mounted() { mounted() {
this.getYesterdayDateFormatted(); this.getYesterdayDateFormatted();
setInterval(() => { setInterval(() => {
this.date = new Date(); // 更新日期时间 this.date = new Date(); // 更新日期时间
}, 1000); }, 1000);
this.queryCompanyInfo(); this.queryCompanyInfo();
...@@ -361,6 +264,13 @@ ...@@ -361,6 +264,13 @@
this.querySbYes(); this.querySbYes();
//设备异常时长 //设备异常时长
this.querySbNo(); this.querySbNo();
this.setOption();
this.setOption2();
setTimeout(function() {
window.location.reload();
}, 60000);
}, },
methods: { methods: {
formatTime(currentTime) { formatTime(currentTime) {
...@@ -416,12 +326,8 @@ ...@@ -416,12 +326,8 @@
queryBySbStatus(){ queryBySbStatus(){
let _this = this; let _this = this;
var inInfo = new EiInfo(); var inInfo = new EiInfo();
console.log('factory',this.factory)
console.log('dataPicker',this.dataPicker)
// inInfo.set('inqu_status-0-factoryCode','R24031403')
// inInfo.set('inqu_status-0-date','20241016')
inInfo.set('inqu_status-0-factoryCode',this.factory) inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.datapicker) inInfo.set('inqu_status-0-date',this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryBySbStatus', inInfo, { IPLAT.EiCommunicator.send('HPBI003', 'queryBySbStatus', inInfo, {
onSuccess: function (res) { onSuccess: function (res) {
console.log('queryBySbStatus',res) console.log('queryBySbStatus',res)
...@@ -480,7 +386,6 @@ ...@@ -480,7 +386,6 @@
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
data: ['0', '0', '0', '0', '0', '0', '0'],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色 color: '#ffffff' // 设置y轴标签字体颜色为白色
...@@ -489,7 +394,7 @@ ...@@ -489,7 +394,7 @@
}, },
grid: { grid: {
top: '13%', // 图表距离容器顶部的距离 top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间 bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%', left: '2%',
right: '2%', right: '2%',
...@@ -573,7 +478,7 @@ ...@@ -573,7 +478,7 @@
}, },
grid: { grid: {
top: '13%', // 图表距离容器顶部的距离 top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间 bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%', left: '2%',
right: '2%', right: '2%',
...@@ -614,8 +519,118 @@ ...@@ -614,8 +519,118 @@
{async: false} {async: false}
); );
}, },
setOption(){
this.testOption1 = {
title: {
left: 'left',
text: '设备作业时长/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: [0, 0, 0, 0, 0, 0, 0],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
},
setOption2(){
this.testOption2 ={
title: {
left: 'left',
text: '设备故障次数/小时',
textStyle: {
color: '#ffffff' // 设置标题字体颜色为白色
}
},
xAxis: {
type: 'category',
data: this.querySbYesDate,
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#ffffff' // 设置y轴标签字体颜色为白色
}
}
},
grid: {
top: '17%', // 图表距离容器顶部的距离
bottom: '2%', // 图表距离容器底部的距离，为下方的文字留出空间
left: '2%',
right: '2%',
containLabel: true // 确保标签（如坐标轴标签）在网格内
},
series: [
{
data: [24, 24, 24, 24, 24, 24, 24],
type: 'line',
smooth: true,
itemStyle: {
color: '#01b9ff'
},
areaStyle: {
color: '#245085'
},
}
]
}
},
}, },
computed:{ computed:{
lineOption1() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.testOption1;
},
lineOption2() {
// 这里我们不需要再次调用 setOption，因为 Vue 会自动处理绑定
return this.testOption2;
},
currentTime() { currentTime() {
return this.formatTime(this.date); return this.formatTime(this.date);
}, },
......
src/main/webapp/HP/BI/components/hipi/004/left-manage-device.vue
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
<div style="width: 79%;margin-left: 3.2vw;height: 28vh;margin-top: 2vh"> <div style="width: 79%;margin-left: 3.2vw;height: 28vh;margin-top: 2vh">
<div class="content-device-img img"> <div class="content-device-img img">
<div class="title-content-device img">成品库 1283</div> <div class="title-content-device img">成品库</div>
</div> </div>
<img src="../../hpjx/common/img/architectureDiagram.png" style="width: 100%;height: 100%" alt/> <img src="../../hpjx/common/img/architectureDiagram.png" style="width: 100%;height: 100%" alt/>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment