Skip to content

H
hg-smart
Commit 2aae7781 by lyy
Options

生产驾驶舱和设备驾驶舱

parent 64ee8d7e
Showing with 278 additions and 44 deletions
src/main/webapp/HG/BI/HGBI002.jsp
......@@ -188,6 +188,7 @@
"manage-echarts": "url:${ctx}/HG/BI/components/hipi/002/manage-echarts.vue",
"right-manage-cockpit": "url:${ctx}/HG/BI/components/hipi/002/right-manage-cockpit.vue",
},
data() {
return {
date: new Date(),
......
src/main/webapp/HG/BI/HGBI003.jsp
......@@ -165,8 +165,54 @@
<el-aside style="width: 40vw;height: 80vh;">
<left-manage-device style="height: 100%"></left-manage-device>
</el-aside>
<el-main style="padding-bottom: 0;height: 80vh;">
<right-manage-device></right-manage-device>
<el-main style="padding-bottom: 0;height: 80vh;overflow: hidden">
<div class="home-page-main">
<div class="left-device device">
<div v-for="(item,index) in queryBySbStatusList"
:key="index" class="device-background">
<div class="device-title " style="padding-top: 0.2vh;margin-left: 2vw;display: flex">
<div class="device-span" style="width: 50%">{{ item.deviceName }}</div>
<div style="display: flex;width: 50%">
<div class="openOn-span" style="margin-left: 0.5vw;margin-right: 0.5vw">设备{{ item.status }}</div>
<img src="${ctx}/common/img/powerOn.png" style="width: 1.5vw;height: 3vh" v-if="item.status != '关机' " alt/>
<img src="${ctx}/common/img/powerDown.png" style="width: 1.5vw;height: 3vh" v-else alt/>
</div>
</div>
<div class="device-main device-span">
<div style="display: flex;width: 100%;margin-left: 1vw;height: 3vh">
<div style="margin-right: 0.5vw;color: #FFFFFF;font-size: 0.8vw;">设备型号</div>
<div style="color: #01A9FF;font-size: 1vw;">{{ item.deviceModel }}</div>
</div>
<div style="height: 15.5vh;width: 100%;display: flex;justify-content: center;align-items: center;">
<img src="${ctx}/common/img/avi.png" style="width: 3vw;height: 6vh;" alt/>
</div>
</div>
</div>
</div>
<div class="left-device device" style="margin-left: 2vw;">
<div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption1" :width="17" :height="24"></manage-echarts>
</div>
</div>
<div class="left-device device" style="margin-left: 2vw;">
<div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts>
</div>
<div class="device-echarts-background">
<manage-echarts :option="testOption2" :width="17" :height="24"></manage-echarts>
</div>
</div>
</div>
</el-main>
</el-container>
</el-container>
......@@ -179,15 +225,141 @@
el: '#app',
components: {
"left-manage-device": "url:${ctx}/HG/BI/components/hipi/001/left-manage-device.vue",
"right-manage-device": "url:${ctx}/HG/BI/components/hipi/001/right-manage-device.vue",
"manage-echarts": "url:${ctx}/HG/BI/components/hipi/002/manage-echarts.vue",
},
data() {
return {
date: new Date(),
option: {},
option1: {},
optionDate1: {},
option2: {},
optionDate2: {},
option3: {},
optionDate3: {},
testOption1:{
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: ['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:'',
factoryList:[],
dataPicker: '',
queryBySbStatusList:[
{
deviceName:'切割机',
status:'关机',
deviceModel:'MZ-1250',
},
{
deviceName:'切割机',
status:'关机',
deviceModel:'MZ-1250',
},
{
deviceName:'焊接机',
status:'关机',
deviceModel:'H9830',
}
],
querySbYesList:[],
querySbYesDate:[],
querySbNoList:[],
querySbNODate:[],
};
},
mounted() {
......@@ -196,12 +368,6 @@
this.date = new Date(); // 更新日期时间
}, 1000);
this.getRoleFactory();
// 设备状态
this.queryBySbStatus();
//设备运行时长
this.querySbYes();
//设备异常时长
this.querySbNo();
},
methods: {
formatTime(currentTime) {
......@@ -248,36 +414,6 @@
handledataPicker(){
},
queryBySbStatus(){
let _this = this;
var inInfo = new EiInfo();
console.log('factory',this.factory)
console.log('dataPicker',this.dataPicker)
inInfo.set('inqu_status-0-factoryCode',this.factory)
inInfo.set('inqu_status-0-date',this.dataPicker)
IPLAT.EiCommunicator.send('HPBI003', 'queryBySbStatus', inInfo, {
onSuccess: function (res) {
console.log('getByProcessWt',res)
if(undefined != res.blocks.result.extAttr){
_this.getByProcessWtList = res.blocks.result.extAttr.processNameList
console.log('getByProcessWtList',_this.getByProcessWtList)
_this.getByProcessWtDate = res.blocks.result.extAttr.totalWeightList
console.log('getByProcessWtDate',_this.getByProcessWtDate)
}
},
onFail: function (err) {
console.error('request_tools----------------->错误信息', err);
}
},
{async: false}
);
},
querySbYes(){
},
querySbNo(){
},
},
computed:{
currentTime() {
......@@ -402,6 +538,76 @@
flex-wrap: wrap;
padding-left: 1vw;
}
.home-page-main{
width: 100%;
height: 100%;
display: flex;
}
.device{
height: 100%;
}
.left-device{
width: 30%;
}
.right-device{
width: 68%;
height: 100%;
}
.device-background{
width: 100%;
height:31.1%;
background-image: url("${ctx}/common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
}
.device-echarts-background{
width: 100%;
height:31.1%;
background-image: url("${ctx}/common/img/productionBackground.png");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-bottom: 2vh;
}
.device-background::before{
content: ""; /* 伪元素需要内容，即使它是空的 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 5vh;
background-image: url("${ctx}/common/img/productionTitle.png");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: -1;
}
.device-span{
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 1vw;
color: #FFFFFF;
}
.openOn-span{
height: 3vh;
font-family: Microsoft YaHei;
font-weight: 400;
font-size: 0.8vw;
color: #1AA6CB;
line-height: 3vh;
}
.device-title{
width: 100%;
height: 5vh;
}
.device-main{
width: 100%
}
</style>
</body>
</html>
src/main/webapp/HG/BI/components/hipi/001/manage-echarts.vue
<template>
<div ref="chartContainer" :style="{ width: '100%', height: '40vh' }"></div>
<div ref="chartContainer" :style="{ width: width+'vw', height: height + 'vh' }"></div>
</template>
<script>
module.exports = {
props: {
option: Object
option: {
type: Object,
required: true,
},
height: {
type: Number,
default: 35
},
width: {
type: Number,
default: 52
}
},
data() {
return {
chart: null,
};
},
watch: {
option: {
handler(newVal) {
if (this.chart) {
this.chart.setOption(newVal);
}
},
deep: true, // 监听对象内部属性的变化
immediate: true, // 在绑定时立即执行一次监听器
},
},
mounted() {
this.initChart();
......@@ -26,7 +53,7 @@ module.exports = {
if (this.chart) {
this.chart.resize();
}
}
}
},
},
};
</script>
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